feat: Enhance layout options in settings and update SCSS imports

core/scss/_core.scss

@@ -13,6 +13,7 @@
 @import 'layout/page';
 @import 'layout/footer';
 @import 'layout/dark';
+@import 'layout/layout';
 
 @import 'ui/accordion';
 @import 'ui/alerts';

core/scss/layout/_core.scss

@@ -1,5 +1,3 @@
-@use 'sass:map';
-
 html {
   scrollbar-gutter: stable;
 
@@ -32,45 +30,3 @@ body {
 }
 
 @include scrollbar;
-
-//
-// Fluid container
-//
-.layout-fluid {
-  .container,
-  [class^='container-'],
-  [class*=' container-'] {
-    max-width: 100%;
-  }
-}
-
-//
-// Boxed container
-//
-.layout-boxed {
-  --#{$prefix}theme-boxed-border-radius: 0;
-  --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
-
-  @include media-breakpoint-up(md) {
-    background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
-    padding: 1rem;
-    --#{$prefix}theme-boxed-border-radius: #{$border-radius};
-  }
-
-  .page {
-    margin: 0 auto;
-    max-width: var(--#{$prefix}theme-boxed-width);
-    border-radius: var(--#{$prefix}theme-boxed-border-radius);
-    color: var(--#{$prefix}body-color);
-
-    @include media-breakpoint-up(md) {
-      border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-      background: var(--#{$prefix}body-bg);
-    }
-
-    > .navbar:first-child {
-      border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
-      border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
-    }
-  }
-}

core/scss/layout/_layout.scss

@@ -0,0 +1,47 @@
+@use 'sass:map';
+
+//
+// Fluid container
+//
+.layout-fluid,
+[data-bs-theme-layout="fluid"],
+[data-layout="fluid"] {
+   .container,
+   [class^='container-'],
+   [class*=' container-'] {
+      max-width: 100%;
+   }
+}
+
+//
+// Boxed container
+//
+.layout-boxed,
+[data-bs-theme-layout="boxed"],
+[data-layout="boxed"] {
+   --#{$prefix}theme-boxed-border-radius: 0;
+   --#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
+
+   @include media-breakpoint-up(md) {
+      background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
+      padding: 1rem;
+      --#{$prefix}theme-boxed-border-radius: #{$border-radius};
+   }
+
+   .page {
+      margin: 0 auto;
+      max-width: var(--#{$prefix}theme-boxed-width);
+      border-radius: var(--#{$prefix}theme-boxed-border-radius);
+      color: var(--#{$prefix}body-color);
+
+      @include media-breakpoint-up(md) {
+         border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
+         background: var(--#{$prefix}body-bg);
+      }
+
+      >.navbar:first-child {
+         border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
+         border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
+      }
+   }
+}

shared/includes/settings.html

@@ -43,13 +43,14 @@
 					<label class="form-label">Font family</label>
 					<p class="form-hint">Choose the font family that fits your app.</p>
 
-					<div>
+					<div class="form-selectgroup">
 						{% assign fonts = 'sans-serif,serif,monospace,comic' | split: ',' %} {% for font in fonts %}
-						<label class="form-check">
+						<label class="form-selectgroup-item">
-							<div class="form-selectgroup-item">
+							<input type="radio" name="theme-font" value="{{ font }}" class="form-selectgroup-input"{% if font == 'sans-serif' %} checked{% endif %} />
-								<input type="radio" name="theme-font" value="{{ font }}" class="form-check-input"{% if font == 'sans-serif' %} checked{% endif %} />
+							<span class="form-selectgroup-label">
-								<div class="form-check-label">{{ font | capitalize }}</div>
+								<span class="form-selectgroup-check"></span>
-							</div>
+								<span class="display-6" style="font-family: var(--tblr-font-{{ font }})">Aa</span>
+							</span>
 						</label>
 						{% endfor %}
 					</div>
@@ -88,6 +89,19 @@
 						{% endfor %}
 					</div>
 				</div>
+
+				<div class="mb-4">
+					<label class="form-label">Layout</label>
+					<p class="form-hint">Choose the layout style for your app.</p>
+					{% assign layouts = 'fluid,boxed' | split: ',' %} {% for layout in layouts %}
+					<label class="form-check">
+						<div class="form-selectgroup-item">
+							<input type="radio" name="theme-layout" value="{{ layout }}" class="form-check-input"{% if layout == 'fluid' %} checked{% endif %} />
+							<div class="form-check-label">{{ layout | capitalize }}</div>
+						</div>
+					</label>
+					{% endfor %}
+				</div>
 			</div>
 
 			<div class="mt-auto space-y">
@@ -121,6 +135,7 @@
 			"theme-font": "sans-serif",
 			"theme-primary": "blue",
 			"theme-radius": "1",
+			"theme-layout": "fluid",
 		}
 
 		var url = new URL(window.location)