@mhmo91/schmancy 0.10.41 → 0.10.43

package/dist/skeleton.js

@@ -1,5 +1,5 @@
-import { t as e, u as t } from "./SchmancyElement-OWgz9ePG.js";
-import "./mixins-COeG4DiX.js";
+import { t as e, u as t } from "./SchmancyElement-Ob9yGkiG.js";
+import "./mixins-q4KAL8Xr.js";
 import { customElement as n, property as r } from "lit/decorators.js";
 import { css as i, html as a } from "lit";
 var o = class extends e {
@@ -8,38 +8,42 @@ var o = class extends e {
 	}
 	static {
 		this.styles = [i`
-	:host {
-		display: block;
-		width: var(--_sw, 100%);
-		height: var(--_sh, 1rem);
-	}
-	.surface {
-		width: 100%;
-		height: 100%;
-		border-radius: var(--_sr, 0.25rem);
-		background: linear-gradient(
-			90deg,
-			var(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 25%,
-			var(--schmancy-sys-color-surface-container, #f2f2f2) 37%,
-			var(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 63%
-		);
-		background-size: 400% 100%;
-		animation: schmancy-skeleton-shimmer 1.4s ease infinite;
-	}
-	:host([shape='circle']) .surface {
-		border-radius: 50%;
-	}
-	@keyframes schmancy-skeleton-shimmer {
-		0% { background-position: 100% 50%; }
-		100% { background-position: 0 50%; }
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.surface {
-			animation: none;
-			background: var(--schmancy-sys-color-surface-containerHighest, #e6e6e6);
-		}
-	}
-`];
+			:host {
+				display: block;
+				width: var(--_sw, 100%);
+				height: var(--_sh, 1rem);
+			}
+			.surface {
+				width: 100%;
+				height: 100%;
+				border-radius: var(--_sr, 0.25rem);
+				background: linear-gradient(
+					90deg,
+					var(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 25%,
+					var(--schmancy-sys-color-surface-container, #f2f2f2) 37%,
+					var(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 63%
+				);
+				background-size: 400% 100%;
+				animation: schmancy-skeleton-shimmer 1.4s ease infinite;
+			}
+			:host([shape='circle']) .surface {
+				border-radius: 50%;
+			}
+			@keyframes schmancy-skeleton-shimmer {
+				0% {
+					background-position: 100% 50%;
+				}
+				100% {
+					background-position: 0 50%;
+				}
+			}
+			@media (prefers-reduced-motion: reduce) {
+				.surface {
+					animation: none;
+					background: var(--schmancy-sys-color-surface-containerHighest, #e6e6e6);
+				}
+			}
+		`];
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.setAttribute("role", "status"), this.setAttribute("aria-busy", "true"), this.setAttribute("aria-label", "Loading");

package/dist/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","names":[],"sources":["../src/skeleton/skeleton.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * Placeholder shimmer surface shown while content loads. Renders a\n * shape-configurable rectangle with a reduced-motion-aware shimmer.\n *\n * @element schmancy-skeleton\n * @attr shape - 'rect' | 'circle' | 'text'. Default 'rect'.\n * @attr width  - CSS length (e.g. `100%`, `12rem`).\n * @attr height - CSS length; for `shape=text` defaults to 1em.\n * @attr radius - CSS length for corner radius; ignored for `shape=circle`.\n * @csspart surface - The shimmering surface element.\n */\n@customElement('schmancy-skeleton')\nexport class SchmancySkeleton extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\twidth: var(--_sw, 100%);\n\t\theight: var(--_sh, 1rem);\n\t}\n\t.surface {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: var(--_sr, 0.25rem);\n\t\tbackground: linear-gradient(\n\t\t\t90deg,\n\t\t\tvar(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 25%,\n\t\t\tvar(--schmancy-sys-color-surface-container, #f2f2f2) 37%,\n\t\t\tvar(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 63%\n\t\t);\n\t\tbackground-size: 400% 100%;\n\t\tanimation: schmancy-skeleton-shimmer 1.4s ease infinite;\n\t}\n\t:host([shape='circle']) .surface {\n\t\tborder-radius: 50%;\n\t}\n\t@keyframes schmancy-skeleton-shimmer {\n\t\t0% { background-position: 100% 50%; }\n\t\t100% { background-position: 0 50%; }\n\t}\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.surface {\n\t\t\tanimation: none;\n\t\t\tbackground: var(--schmancy-sys-color-surface-containerHighest, #e6e6e6);\n\t\t}\n\t}\n`];\n\t@property({ type: String, reflect: true }) shape: 'rect' | 'circle' | 'text' = 'rect'\n\t@property({ type: String }) width = ''\n\t@property({ type: String }) height = ''\n\t@property({ type: String }) radius = ''\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.setAttribute('role', 'status')\n\t\tthis.setAttribute('aria-busy', 'true')\n\t\tthis.setAttribute('aria-label', 'Loading')\n\t}\n\n\tprotected updated(): void {\n\t\tif (this.width) this.style.setProperty('--_sw', this.width)\n\t\tconst defaultHeight = this.shape === 'text' ? '1em' : '1rem'\n\t\tthis.style.setProperty('--_sh', this.height || defaultHeight)\n\t\tif (this.radius) this.style.setProperty('--_sr', this.radius)\n\t}\n\n\trender() {\n\t\treturn html`<div part=\"surface\" class=\"surface\"></div>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-skeleton': SchmancySkeleton\n\t}\n}\n"],"mappings":";;;;AAgBO,IAAA,IAAA,cAA+B,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,CAAA,GAAA,KAAA,QAkC0C,QAAA,KAAA,QAC3C,IAAA,KAAA,SACC,IAAA,KAAA,SACA;CAAA;CAAA;EAAA,KAAA,SApCrB,CAAC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCpB,oBAAA;EACC,MAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,QAAA,GAC1B,KAAK,aAAa,aAAa,MAAA,GAC/B,KAAK,aAAa,cAAc,SAAA;CACjC;CAEA,UAAA;EACK,KAAK,SAAO,KAAK,MAAM,YAAY,SAAS,KAAK,KAAA;EACrD,IAAM,IAAgB,KAAK,UAAU,SAAS,QAAQ;EACtD,KAAK,MAAM,YAAY,SAAS,KAAK,UAAU,CAAA,GAC3C,KAAK,UAAQ,KAAK,MAAM,YAAY,SAAS,KAAK,MAAA;CACvD;CAEA,SAAA;EACC,OAAO,CAAI;CACZ;AAAA;AAAA,EAAA,CArBC,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;AAAA,CAAA,CAAA,GAAM,EAAA,WAAA,SAAA,KAAA,CAAA,GAAA,EAAA,CACxC,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,SAAA,KAAA,CAAA,GAAA,EAAA,CACzB,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,UAAA,KAAA,CAAA,GAAA,EAAA,CACzB,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,UAAA,KAAA,CAAA,GAAA,IAAA,EAAA,CAtC1B,EAAc,mBAAA,CAAA,GAAmB,CAAA;AAAA,SAAA,KAAA"}
+{"version":3,"file":"skeleton.js","names":[],"sources":["../src/skeleton/skeleton.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * Placeholder shimmer surface shown while content loads. Renders a\n * shape-configurable rectangle with a reduced-motion-aware shimmer.\n *\n * @element schmancy-skeleton\n * @attr shape - 'rect' | 'circle' | 'text'. Default 'rect'.\n * @attr width  - CSS length (e.g. `100%`, `12rem`).\n * @attr height - CSS length; for `shape=text` defaults to 1em.\n * @attr radius - CSS length for corner radius; ignored for `shape=circle`.\n * @csspart surface - The shimmering surface element.\n */\n@customElement('schmancy-skeleton')\nexport class SchmancySkeleton extends SchmancyElement {\n\tstatic styles = [\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: var(--_sw, 100%);\n\t\t\t\theight: var(--_sh, 1rem);\n\t\t\t}\n\t\t\t.surface {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tborder-radius: var(--_sr, 0.25rem);\n\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\t90deg,\n\t\t\t\t\tvar(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 25%,\n\t\t\t\t\tvar(--schmancy-sys-color-surface-container, #f2f2f2) 37%,\n\t\t\t\t\tvar(--schmancy-sys-color-surface-containerHighest, #e6e6e6) 63%\n\t\t\t\t);\n\t\t\t\tbackground-size: 400% 100%;\n\t\t\t\tanimation: schmancy-skeleton-shimmer 1.4s ease infinite;\n\t\t\t}\n\t\t\t:host([shape='circle']) .surface {\n\t\t\t\tborder-radius: 50%;\n\t\t\t}\n\t\t\t@keyframes schmancy-skeleton-shimmer {\n\t\t\t\t0% {\n\t\t\t\t\tbackground-position: 100% 50%;\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t\tbackground-position: 0 50%;\n\t\t\t\t}\n\t\t\t}\n\t\t\t@media (prefers-reduced-motion: reduce) {\n\t\t\t\t.surface {\n\t\t\t\t\tanimation: none;\n\t\t\t\t\tbackground: var(--schmancy-sys-color-surface-containerHighest, #e6e6e6);\n\t\t\t\t}\n\t\t\t}\n\t\t`,\n\t]\n\t@property({ type: String, reflect: true }) shape: 'rect' | 'circle' | 'text' = 'rect'\n\t@property({ type: String }) width = ''\n\t@property({ type: String }) height = ''\n\t@property({ type: String }) radius = ''\n\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.setAttribute('role', 'status')\n\t\tthis.setAttribute('aria-busy', 'true')\n\t\tthis.setAttribute('aria-label', 'Loading')\n\t}\n\n\tprotected updated(): void {\n\t\tif (this.width) this.style.setProperty('--_sw', this.width)\n\t\tconst defaultHeight = this.shape === 'text' ? '1em' : '1rem'\n\t\tthis.style.setProperty('--_sh', this.height || defaultHeight)\n\t\tif (this.radius) this.style.setProperty('--_sr', this.radius)\n\t}\n\n\trender() {\n\t\treturn html`<div part=\"surface\" class=\"surface\"></div>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-skeleton': SchmancySkeleton\n\t}\n}\n"],"mappings":";;;;AAgBO,IAAA,IAAA,cAA+B,EAAA;CAAA,YAAA,GAAA,GAAA;EAAA,MAAA,GAAA,CAAA,GAAA,KAAA,QAwC0C,QAAA,KAAA,QAC3C,IAAA,KAAA,SACC,IAAA,KAAA,SACA;CAAA;CAAA;EAAA,KAAA,SA1CrB,CACf,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CJ,oBAAA;EACC,MAAM,kBAAA,GACN,KAAK,aAAa,QAAQ,QAAA,GAC1B,KAAK,aAAa,aAAa,MAAA,GAC/B,KAAK,aAAa,cAAc,SAAA;CACjC;CAEA,UAAA;EACK,KAAK,SAAO,KAAK,MAAM,YAAY,SAAS,KAAK,KAAA;EACrD,IAAM,IAAgB,KAAK,UAAU,SAAS,QAAQ;EACtD,KAAK,MAAM,YAAY,SAAS,KAAK,UAAU,CAAA,GAC3C,KAAK,UAAQ,KAAK,MAAM,YAAY,SAAS,KAAK,MAAA;CACvD;CAEA,SAAA;EACC,OAAO,CAAI;CACZ;AAAA;AAAA,EAAA,CArBC,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;AAAA,CAAA,CAAA,GAAM,EAAA,WAAA,SAAA,KAAA,CAAA,GAAA,EAAA,CACxC,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,SAAA,KAAA,CAAA,GAAA,EAAA,CACzB,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,UAAA,KAAA,CAAA,GAAA,EAAA,CACzB,EAAS,EAAE,MAAM,OAAA,CAAA,CAAA,GAAQ,EAAA,WAAA,UAAA,KAAA,CAAA,GAAA,IAAA,EAAA,CA5C1B,EAAc,mBAAA,CAAA,GAAmB,CAAA;AAAA,SAAA,KAAA"}

package/dist/skills/schmancy/surface.md

@@ -1,12 +1,12 @@
 # Surface
 
-> Glass depth container. Every surface is translucent — depth comes from blur intensity.
+> Color-variant container. Paints a background and establishes the inherited text color for descendants.
 
 ## Usage
 
 ```html
-<schmancy-surface type="subtle" rounded="all" fill="all">
-  Content on frosted glass
+<schmancy-surface type="container" class="rounded-2xl w-full h-full">
+  Content on tonal glass
 </schmancy-surface>
 ```
 
@@ -18,7 +18,7 @@ Without a surface under the theme, typography reads the browser's default color
 
 ```html
 <schmancy-theme root scheme="auto">
-  <schmancy-surface type="solid" fill="all">
+  <schmancy-surface type="containerLowest" class="w-full h-full">
     <!-- your app -->
   </schmancy-surface>
 </schmancy-theme>
@@ -28,22 +28,74 @@ Without a surface under the theme, typography reads the browser's default color
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| `type` | string | `'subtle'` | Glass depth level (see below) |
-| `fill` | string | `'auto'` | `'all'`, `'width'`, `'height'`, `'auto'` |
-| `rounded` | string | `'none'` | `'none'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'all'` |
-| `elevation` | number | `0` | Glow intensity 0-5 (primary-colored glow, not shadow) |
-| `clickable` | boolean | `false` | Adds luminous hover + spring press |
+| `type` | string | `'containerLow'` | Color variant (see below) |
+
+Corner radius, shadow depth, and cursor behavior are applied as stock Tailwind classes directly on the element.
+
+## Stock Tailwind replacement table
+
+### Corner radius
+
+| Desired rounding | Class |
+|---|---|
+| All corners | `rounded-2xl` |
+| Top corners | `rounded-t-2xl` |
+| Bottom corners | `rounded-b-2xl` |
+| Left corners | `rounded-l-2xl` |
+| Right corners | `rounded-r-2xl` |
+| No rounding | *(omit — default)* |
+
+`rounded-2xl` equals `1rem` — the same value as `corner.large` in the theme token (`theme.format.ts`), so it stays pixel-exact with no custom token.
+
+### Shadow depth
+
+| elevation value | Class |
+|---|---|
+| `1` | `shadow-sm` |
+| `2` | `shadow` |
+| `3` | `shadow-md` |
+| `4` | `shadow-lg` |
+| `5` | `shadow-2xl` |
+| `0` / absent | *(omit — default)* |
+
+### Interactivity
+
+For a clickable surface:
+
+```
+cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2
+```
 
 ## Surface Types
 
-### Structural (glass depth model)
+### Tonal (M3 depth model)
 
-| Type | Opacity | Blur | Use for |
-|------|---------|------|---------|
-| `solid` | 92% | — | Dense glass ground layer, highest readability |
-| `subtle` | 78% | 8px | Frosted panels, default containers |
-| `glass` | 55% | 16px | Dialogs, dropdowns, overlays |
-| `luminous` | 42% | 20px | Hero panels, featured content |
+Depth is expressed by tone. Each tonal name renders one constant glass material:
+
+```
+--glass-material: blur(16px) saturate(180%)
+--glass-opacity:  72%
+```
+
+Only `--glass-base` differs per name — it is the matching M3 tonal token. The shared material rule is:
+
+```css
+background: color-mix(in srgb, var(--glass-base) var(--glass-opacity), transparent);
+backdrop-filter: var(--glass-material);
+-webkit-backdrop-filter: var(--glass-material);
+color: var(--schmancy-sys-color-surface-on);
+```
+
+| `type` | `--glass-base` token | Use for |
+|---|---|---|
+| `surface` | `--schmancy-sys-color-surface-default` | Neutral base layer |
+| `surfaceDim` | `--schmancy-sys-color-surface-dim` | Recessed background |
+| `surfaceBright` | `--schmancy-sys-color-surface-bright` | Elevated background |
+| `containerLowest` | `--schmancy-sys-color-surface-containerLowest` | Ground layer, highest readability |
+| `containerLow` | `--schmancy-sys-color-surface-containerLow` | Default panels and cards |
+| `container` | `--schmancy-sys-color-surface-container` | Dialogs, dropdowns, overlays |
+| `containerHigh` | `--schmancy-sys-color-surface-containerHigh` | Hero panels, featured content |
+| `containerHighest` | `--schmancy-sys-color-surface-containerHighest` | Topmost floating layers |
 
 ### Semantic (tinted glass)
 `primary`, `secondary`, `tertiary`, `error`, `success`, `warning`, `info`
@@ -57,44 +109,32 @@ Each applies a translucent tint of its color + 4px blur.
 
 ```html
 <!-- Page background -->
-<schmancy-surface type="solid" fill="all" rounded="none">
+<schmancy-surface type="containerLowest" class="w-full h-full">
   <slot></slot>
 </schmancy-surface>
 
 <!-- Card-like container -->
-<schmancy-surface type="subtle" rounded="all" elevation="1">
-  <div class="p-4">Frosted panel with glow</div>
+<schmancy-surface type="containerLow" class="rounded-2xl shadow-lg">
+  <div class="p-4">Tonal panel</div>
 </schmancy-surface>
 
 <!-- Dialog surface (used internally by schmancy-dialog) -->
-<schmancy-surface type="glass" rounded="all">
-  <div class="p-6">Glass overlay content</div>
+<schmancy-surface type="container" class="rounded-2xl">
+  <div class="p-6">Dialog content</div>
 </schmancy-surface>
 
-<!-- Hero panel with glow halo -->
-<schmancy-surface type="luminous" rounded="all" elevation="3">
+<!-- Hero panel -->
+<schmancy-surface type="containerHigh" class="rounded-2xl shadow-2xl">
   <div class="p-8">Featured content</div>
 </schmancy-surface>
 
-<!-- Clickable surface with spring physics -->
-<schmancy-surface type="subtle" rounded="all" clickable @click=${handler}>
-  Hover: lift + glow. Press: spring compress.
+<!-- Clickable surface -->
+<schmancy-surface type="containerLow" class="rounded-2xl cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2" @click=${handler}>
+  Hover and press.
 </schmancy-surface>
 
 <!-- Error state -->
-<schmancy-surface type="error" rounded="all">
+<schmancy-surface type="error" class="rounded-2xl">
   <div class="p-3">Something went wrong</div>
 </schmancy-surface>
 ```
-
-## Elevation (Glow-based)
-
-Elevation 1-5 applies a primary-colored glow underneath the surface:
-```
-Level 1: subtle glow (15% primary)
-Level 5: strong glow (42% primary)
-```
-
-## Paint Containment
-
-`glass` and `luminous` types automatically apply `contain: content` for GPU optimization.

package/dist/skills/surface.md

@@ -1,12 +1,12 @@
 # Surface
 
-> Glass depth container. Every surface is translucent — depth comes from blur intensity.
+> Color-variant container. Paints a background and establishes the inherited text color for descendants.
 
 ## Usage
 
 ```html
-<schmancy-surface type="subtle" rounded="all" fill="all">
-  Content on frosted glass
+<schmancy-surface type="container" class="rounded-2xl w-full h-full">
+  Content on tonal glass
 </schmancy-surface>
 ```
 
@@ -18,7 +18,7 @@ Without a surface under the theme, typography reads the browser's default color
 
 ```html
 <schmancy-theme root scheme="auto">
-  <schmancy-surface type="solid" fill="all">
+  <schmancy-surface type="containerLowest" class="w-full h-full">
     <!-- your app -->
   </schmancy-surface>
 </schmancy-theme>
@@ -28,22 +28,74 @@ Without a surface under the theme, typography reads the browser's default color
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| `type` | string | `'subtle'` | Glass depth level (see below) |
-| `fill` | string | `'auto'` | `'all'`, `'width'`, `'height'`, `'auto'` |
-| `rounded` | string | `'none'` | `'none'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'all'` |
-| `elevation` | number | `0` | Glow intensity 0-5 (primary-colored glow, not shadow) |
-| `clickable` | boolean | `false` | Adds luminous hover + spring press |
+| `type` | string | `'containerLow'` | Color variant (see below) |
+
+Corner radius, shadow depth, and cursor behavior are applied as stock Tailwind classes directly on the element.
+
+## Stock Tailwind replacement table
+
+### Corner radius
+
+| Desired rounding | Class |
+|---|---|
+| All corners | `rounded-2xl` |
+| Top corners | `rounded-t-2xl` |
+| Bottom corners | `rounded-b-2xl` |
+| Left corners | `rounded-l-2xl` |
+| Right corners | `rounded-r-2xl` |
+| No rounding | *(omit — default)* |
+
+`rounded-2xl` equals `1rem` — the same value as `corner.large` in the theme token (`theme.format.ts`), so it stays pixel-exact with no custom token.
+
+### Shadow depth
+
+| elevation value | Class |
+|---|---|
+| `1` | `shadow-sm` |
+| `2` | `shadow` |
+| `3` | `shadow-md` |
+| `4` | `shadow-lg` |
+| `5` | `shadow-2xl` |
+| `0` / absent | *(omit — default)* |
+
+### Interactivity
+
+For a clickable surface:
+
+```
+cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2
+```
 
 ## Surface Types
 
-### Structural (glass depth model)
+### Tonal (M3 depth model)
 
-| Type | Opacity | Blur | Use for |
-|------|---------|------|---------|
-| `solid` | 92% | — | Dense glass ground layer, highest readability |
-| `subtle` | 78% | 8px | Frosted panels, default containers |
-| `glass` | 55% | 16px | Dialogs, dropdowns, overlays |
-| `luminous` | 42% | 20px | Hero panels, featured content |
+Depth is expressed by tone. Each tonal name renders one constant glass material:
+
+```
+--glass-material: blur(16px) saturate(180%)
+--glass-opacity:  72%
+```
+
+Only `--glass-base` differs per name — it is the matching M3 tonal token. The shared material rule is:
+
+```css
+background: color-mix(in srgb, var(--glass-base) var(--glass-opacity), transparent);
+backdrop-filter: var(--glass-material);
+-webkit-backdrop-filter: var(--glass-material);
+color: var(--schmancy-sys-color-surface-on);
+```
+
+| `type` | `--glass-base` token | Use for |
+|---|---|---|
+| `surface` | `--schmancy-sys-color-surface-default` | Neutral base layer |
+| `surfaceDim` | `--schmancy-sys-color-surface-dim` | Recessed background |
+| `surfaceBright` | `--schmancy-sys-color-surface-bright` | Elevated background |
+| `containerLowest` | `--schmancy-sys-color-surface-containerLowest` | Ground layer, highest readability |
+| `containerLow` | `--schmancy-sys-color-surface-containerLow` | Default panels and cards |
+| `container` | `--schmancy-sys-color-surface-container` | Dialogs, dropdowns, overlays |
+| `containerHigh` | `--schmancy-sys-color-surface-containerHigh` | Hero panels, featured content |
+| `containerHighest` | `--schmancy-sys-color-surface-containerHighest` | Topmost floating layers |
 
 ### Semantic (tinted glass)
 `primary`, `secondary`, `tertiary`, `error`, `success`, `warning`, `info`
@@ -57,44 +109,32 @@ Each applies a translucent tint of its color + 4px blur.
 
 ```html
 <!-- Page background -->
-<schmancy-surface type="solid" fill="all" rounded="none">
+<schmancy-surface type="containerLowest" class="w-full h-full">
   <slot></slot>
 </schmancy-surface>
 
 <!-- Card-like container -->
-<schmancy-surface type="subtle" rounded="all" elevation="1">
-  <div class="p-4">Frosted panel with glow</div>
+<schmancy-surface type="containerLow" class="rounded-2xl shadow-lg">
+  <div class="p-4">Tonal panel</div>
 </schmancy-surface>
 
 <!-- Dialog surface (used internally by schmancy-dialog) -->
-<schmancy-surface type="glass" rounded="all">
-  <div class="p-6">Glass overlay content</div>
+<schmancy-surface type="container" class="rounded-2xl">
+  <div class="p-6">Dialog content</div>
 </schmancy-surface>
 
-<!-- Hero panel with glow halo -->
-<schmancy-surface type="luminous" rounded="all" elevation="3">
+<!-- Hero panel -->
+<schmancy-surface type="containerHigh" class="rounded-2xl shadow-2xl">
   <div class="p-8">Featured content</div>
 </schmancy-surface>
 
-<!-- Clickable surface with spring physics -->
-<schmancy-surface type="subtle" rounded="all" clickable @click=${handler}>
-  Hover: lift + glow. Press: spring compress.
+<!-- Clickable surface -->
+<schmancy-surface type="containerLow" class="rounded-2xl cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2" @click=${handler}>
+  Hover and press.
 </schmancy-surface>
 
 <!-- Error state -->
-<schmancy-surface type="error" rounded="all">
+<schmancy-surface type="error" class="rounded-2xl">
   <div class="p-3">Something went wrong</div>
 </schmancy-surface>
 ```
-
-## Elevation (Glow-based)
-
-Elevation 1-5 applies a primary-colored glow underneath the surface:
-```
-Level 1: subtle glow (15% primary)
-Level 5: strong glow (42% primary)
-```
-
-## Paint Containment
-
-`glass` and `luminous` types automatically apply `contain: content` for GPU optimization.

package/dist/slider.cjs

@@ -1,16 +1,16 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-D9WA9FP9.cjs`);require(`./mixins-XGVIOvKt.cjs`);let t=require(`rxjs`),n=require(`rxjs/operators`),r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/cache.js`);var o=class extends e.t{constructor(...e){super(...e),this.type=`content`,this.src=``,this.alt=``,this.controls=!0,this.autoplay=!1,this.loop=!1,this.muted=!1,this.fit=`cover`}static{this.styles=[i.css`
-	:host {
-		display: block;
-		scroll-snap-align: center; /* If your slider uses scroll-snap */
-	}
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-CncqDLb2.cjs`);const e=require(`./SchmancyElement-CeKrBW2j.cjs`);require(`./mixins-Cjn20BQH.cjs`);let t=require(`rxjs`),n=require(`rxjs/operators`),r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/cache.js`);var o=class extends e.t{constructor(...e){super(...e),this.type=`content`,this.src=``,this.alt=``,this.controls=!0,this.autoplay=!1,this.loop=!1,this.muted=!1,this.fit=`cover`}static{this.styles=[i.css`
+			:host {
+				display: block;
+				scroll-snap-align: center; /* If your slider uses scroll-snap */
+			}
 
-	.slide {
-		display: block;
-		width: 100%;
-		height: auto;
-		object-fit: var(--object-fit, cover);
-	}
-`]}render(){return i.html` <div style="--object-fit: ${this.fit}">${(0,a.cache)(this.renderSlide())}</div> `}renderSlide(){switch(this.type){case`image`:return i.html` <img class="slide" src="${this.src}" alt="${this.alt}" loading="lazy" /> `;case`video`:return i.html`
+			.slide {
+				display: block;
+				width: 100%;
+				height: auto;
+				object-fit: var(--object-fit, cover);
+			}
+		`]}render(){return i.html` <div style="--object-fit: ${this.fit}">${(0,a.cache)(this.renderSlide())}</div> `}renderSlide(){switch(this.type){case`image`:return i.html` <img class="slide" src="${this.src}" alt="${this.alt}" loading="lazy" /> `;case`video`:return i.html`
 					<video
 						class="slide"
 						src="${this.src}"
@@ -22,31 +22,31 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./ch
 						Your browser does not support HTML video.
 					</video>
 				`;default:return i.html`<slot></slot>`}}};e.u([(0,r.property)({type:String})],o.prototype,`type`,void 0),e.u([(0,r.property)({type:String})],o.prototype,`src`,void 0),e.u([(0,r.property)({type:String})],o.prototype,`alt`,void 0),e.u([(0,r.property)({type:Boolean})],o.prototype,`controls`,void 0),e.u([(0,r.property)({type:Boolean})],o.prototype,`autoplay`,void 0),e.u([(0,r.property)({type:Boolean})],o.prototype,`loop`,void 0),e.u([(0,r.property)({type:Boolean})],o.prototype,`muted`,void 0),e.u([(0,r.property)({type:String})],o.prototype,`fit`,void 0),o=e.u([(0,r.customElement)(`schmancy-slide`)],o);var s=class extends e.t{constructor(...e){super(...e),this.selectedIndex=0,this.showArrows=!0}static{this.styles=[i.css`
-	.slider {
-		/* Lay out slides horizontally, one after another */
-		display: flex;
-		overflow-x: auto;
+			.slider {
+				/* Lay out slides horizontally, one after another */
+				display: flex;
+				overflow-x: auto;
 
-		/* Optional: scroll snapping */
-		scroll-snap-type: x mandatory;
+				/* Optional: scroll snapping */
+				scroll-snap-type: x mandatory;
 
-		/* Hide scrollbars */
-		-ms-overflow-style: none; /* IE and Edge */
-		scrollbar-width: none; /* Firefox */
-	}
-	.slider::-webkit-scrollbar {
-		display: none; /* Chrome, Safari, Opera */
-	}
+				/* Hide scrollbars */
+				-ms-overflow-style: none; /* IE and Edge */
+				scrollbar-width: none; /* Firefox */
+			}
+			.slider::-webkit-scrollbar {
+				display: none; /* Chrome, Safari, Opera */
+			}
 
-	/* 
+			/* 
       Ensure each slide takes up the full slider width.
       "schmancy-slide" is the child custom element.
     */
-	::slotted(schmancy-slide) {
-		flex: 0 0 100%;
-		box-sizing: border-box;
-	}
-`]}firstUpdated(){this.slider.scrollLeft=0,(0,t.fromEvent)(this.slider,`scroll`).pipe((0,n.throttleTime)(100,void 0,{trailing:!0})).subscribe(()=>{this.updateSelectedIndexOnScroll()})}updateSelectedIndexOnScroll(){let e=this.defaultSlot?.assignedElements({flatten:!0})??[];if(!e.length)return;let t=this.selectedIndex,n=this.slider.scrollLeft+this.slider.clientWidth/2,r=0,i=1/0;e.forEach((e,t)=>{let a=e.offsetLeft+e.clientWidth/2,o=Math.abs(n-a);o<i&&(i=o,r=t)}),this.selectedIndex=r,this.selectedIndex!==t&&this.dispatchEvent(new CustomEvent(`slide-changed`,{detail:{index:this.selectedIndex}}))}goToSlide(e){let t=this.defaultSlot?.assignedElements({flatten:!0})??[];t[e]&&this.slider.scrollTo({left:t[e].offsetLeft,behavior:`smooth`})}onPrevClick(){this.goToSlide(this.selectedIndex-1)}onNextClick(){let e=this.defaultSlot?.assignedElements({flatten:!0})??[];this.selectedIndex<e.length-1&&this.goToSlide(this.selectedIndex+1)}render(){let e=this.defaultSlot?.assignedElements({flatten:!0})??[];return i.html`
+			::slotted(schmancy-slide) {
+				flex: 0 0 100%;
+				box-sizing: border-box;
+			}
+		`]}firstUpdated(){this.slider.scrollLeft=0,(0,t.fromEvent)(this.slider,`scroll`).pipe((0,n.throttleTime)(100,void 0,{trailing:!0})).subscribe(()=>{this.updateSelectedIndexOnScroll()})}updateSelectedIndexOnScroll(){let e=this.defaultSlot?.assignedElements({flatten:!0})??[];if(!e.length)return;let t=this.selectedIndex,n=this.slider.scrollLeft+this.slider.clientWidth/2,r=0,i=1/0;e.forEach((e,t)=>{let a=e.offsetLeft+e.clientWidth/2,o=Math.abs(n-a);o<i&&(i=o,r=t)}),this.selectedIndex=r,this.selectedIndex!==t&&this.dispatchEvent(new CustomEvent(`slide-changed`,{detail:{index:this.selectedIndex}}))}goToSlide(e){let t=this.defaultSlot?.assignedElements({flatten:!0})??[];t[e]&&this.slider.scrollTo({left:t[e].offsetLeft,behavior:`smooth`})}onPrevClick(){this.goToSlide(this.selectedIndex-1)}onNextClick(){let e=this.defaultSlot?.assignedElements({flatten:!0})??[];this.selectedIndex<e.length-1&&this.goToSlide(this.selectedIndex+1)}render(){let e=this.defaultSlot?.assignedElements({flatten:!0})??[];return i.html`
 			<div class="relative inset-0">
 				<!-- The scrollable track -->
 				<div class="slider" id="slider">

package/dist/slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.cjs","names":[],"sources":["../src/slider/slide.ts","../src/slider/slider.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { cache } from 'lit/directives/cache.js'\n\n/**\n * Supported slide \"types.\"\n * - 'image': Renders an <img>\n * - 'video': Renders a <video>\n * - 'content': Renders a <slot> (the default)\n */\ntype SlideType = 'image' | 'video' | 'content'\n\n/**\n * Allowed values for the 'fit' property,\n * which maps to CSS object-fit.\n */\ntype ObjectFit = 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'\n\n@customElement('schmancy-slide')\nexport class SchmancySlide extends SchmancyElement {\n\tstatic styles = [css`\n\t:host {\n\t\tdisplay: block;\n\t\tscroll-snap-align: center; /* If your slider uses scroll-snap */\n\t}\n\n\t.slide {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tobject-fit: var(--object-fit, cover);\n\t}\n`]\n\n\t/**\n\t * Determines how this slide should be rendered.\n\t * Defaults to 'content' if not provided.\n\t */\n\t@property({ type: String }) type: SlideType = 'content'\n\n\t/**\n\t * Source for images or videos (if `type` is 'image' or 'video').\n\t */\n\t@property({ type: String }) src: string = ''\n\n\t/**\n\t * Alternate text for images.\n\t */\n\t@property({ type: String }) alt: string = ''\n\n\t/**\n\t * Whether to show default video controls (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) controls = true\n\n\t/**\n\t * Whether the video should autoplay (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) autoplay = false\n\n\t/**\n\t * Whether the video should loop (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) loop = false\n\n\t/**\n\t * Whether the video is muted (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) muted = false\n\n\t/**\n\t * CSS `object-fit` property, applied to images/videos.\n\t */\n\t@property({ type: String }) fit: ObjectFit = 'cover'\n\n\trender() {\n\t\treturn html` <div style=\"--object-fit: ${this.fit}\">${cache(this.renderSlide())}</div> `\n\t}\n\n\tprivate renderSlide() {\n\t\tswitch (this.type) {\n\t\t\tcase 'image':\n\t\t\t\treturn html` <img class=\"slide\" src=\"${this.src}\" alt=\"${this.alt}\" loading=\"lazy\" /> `\n\t\t\tcase 'video':\n\t\t\t\treturn html`\n\t\t\t\t\t<video\n\t\t\t\t\t\tclass=\"slide\"\n\t\t\t\t\t\tsrc=\"${this.src}\"\n\t\t\t\t\t\t?controls=\"${this.controls}\"\n\t\t\t\t\t\t?autoplay=\"${this.autoplay}\"\n\t\t\t\t\t\t?loop=\"${this.loop}\"\n\t\t\t\t\t\t?muted=\"${this.muted}\"\n\t\t\t\t\t>\n\t\t\t\t\t\tYour browser does not support HTML video.\n\t\t\t\t\t</video>\n\t\t\t\t`\n\t\t\tcase 'content':\n\t\t\tdefault:\n\t\t\t\treturn html`<slot></slot>`\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slide': SchmancySlide\n\t}\n}\n","import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { fromEvent } from 'rxjs'\nimport { throttleTime } from 'rxjs/operators'\n\n@customElement('schmancy-slider')\nexport class SchmancySlider extends SchmancyElement {\n\tstatic styles = [css`\n\t.slider {\n\t\t/* Lay out slides horizontally, one after another */\n\t\tdisplay: flex;\n\t\toverflow-x: auto;\n\n\t\t/* Optional: scroll snapping */\n\t\tscroll-snap-type: x mandatory;\n\n\t\t/* Hide scrollbars */\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n\t.slider::-webkit-scrollbar {\n\t\tdisplay: none; /* Chrome, Safari, Opera */\n\t}\n\n\t/* \n      Ensure each slide takes up the full slider width.\n      \"schmancy-slide\" is the child custom element.\n    */\n\t::slotted(schmancy-slide) {\n\t\tflex: 0 0 100%;\n\t\tbox-sizing: border-box;\n\t}\n`]\n\n\t/**\n\t * Currently centered slide index\n\t */\n\t@state() private selectedIndex: number = 0\n\n\t/**\n\t * If true, renders next/prev buttons\n\t */\n\t@property({ type: Boolean }) showArrows: boolean = true\n\n\t@query('#slider') private slider!: HTMLDivElement\n\t@query('slot') private defaultSlot!: HTMLSlotElement\n\n\tprotected firstUpdated() {\n\t\t// Start at leftmost position\n\t\tthis.slider.scrollLeft = 0\n\n\t\t// Throttle scroll events to update selected index\n\t\tfromEvent(this.slider, 'scroll')\n\t\t\t.pipe(throttleTime(100, undefined, { trailing: true }))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.updateSelectedIndexOnScroll()\n\t\t\t})\n\t}\n\n\tprivate updateSelectedIndexOnScroll() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides.length) return\n\n\t\tconst oldIndex = this.selectedIndex\n\n\t\t// Center of the slider’s visible area\n\t\tconst sliderCenter = this.slider.scrollLeft + this.slider.clientWidth / 2\n\n\t\tlet closestIndex = 0\n\t\tlet closestDistance = Infinity\n\n\t\tslides.forEach((slide, index) => {\n\t\t\tconst itemStart = (slide as HTMLElement).offsetLeft\n\t\t\tconst itemCenter = itemStart + slide.clientWidth / 2\n\t\t\tconst distance = Math.abs(sliderCenter - itemCenter)\n\n\t\t\tif (distance < closestDistance) {\n\t\t\t\tclosestDistance = distance\n\t\t\t\tclosestIndex = index\n\t\t\t}\n\t\t})\n\n\t\tthis.selectedIndex = closestIndex\n\n\t\t// If the index changed, dispatch event\n\t\tif (this.selectedIndex !== oldIndex) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('slide-changed', {\n\t\t\t\t\tdetail: { index: this.selectedIndex },\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate goToSlide(newIndex: number) {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides[newIndex]) return\n\n\t\tthis.slider.scrollTo({\n\t\t\tleft: (slides[newIndex] as HTMLElement).offsetLeft,\n\t\t\tbehavior: 'smooth',\n\t\t})\n\t}\n\n\tprivate onPrevClick() {\n\t\tthis.goToSlide(this.selectedIndex - 1)\n\t}\n\n\tprivate onNextClick() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (this.selectedIndex < slides.length - 1) {\n\t\t\tthis.goToSlide(this.selectedIndex + 1)\n\t\t}\n\t}\n\n\trender() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\n\t\treturn html`\n\t\t\t<div class=\"relative inset-0\">\n\t\t\t\t<!-- The scrollable track -->\n\t\t\t\t<div class=\"slider\" id=\"slider\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Next/Prev Buttons (Optional) -->\n\t\t\t\t${this.showArrows\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute left-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onPrevClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === 0}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_left\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute right-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onNextClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === slides.length - 1}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_right\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t: null}\n\n\t\t\t\t<!-- Dots / indicators -->\n\t\t\t\t<div class=\"absolute bottom-4 left-1/2 -translate-x-1/2 flex  space-x-2\">\n\t\t\t\t\t${slides.map((_, index) => {\n\t\t\t\t\t\tconst isSelected = index === this.selectedIndex\n\t\t\t\t\t\treturn html`\n\t\t\t\t\t\t\t<schmancy-button .variant=${isSelected ? 'filled tonal' : 'outlined'} class=\"rounded-full \">\n\t\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slider': SchmancySlider\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"slider.cjs","names":[],"sources":["../src/slider/slide.ts","../src/slider/slider.ts"],"sourcesContent":["import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { cache } from 'lit/directives/cache.js'\n\n/**\n * Supported slide \"types.\"\n * - 'image': Renders an <img>\n * - 'video': Renders a <video>\n * - 'content': Renders a <slot> (the default)\n */\ntype SlideType = 'image' | 'video' | 'content'\n\n/**\n * Allowed values for the 'fit' property,\n * which maps to CSS object-fit.\n */\ntype ObjectFit = 'cover' | 'contain' | 'fill' | 'scale-down' | 'none'\n\n@customElement('schmancy-slide')\nexport class SchmancySlide extends SchmancyElement {\n\tstatic styles = [\n\t\tcss`\n\t\t\t:host {\n\t\t\t\tdisplay: block;\n\t\t\t\tscroll-snap-align: center; /* If your slider uses scroll-snap */\n\t\t\t}\n\n\t\t\t.slide {\n\t\t\t\tdisplay: block;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: auto;\n\t\t\t\tobject-fit: var(--object-fit, cover);\n\t\t\t}\n\t\t`,\n\t]\n\n\t/**\n\t * Determines how this slide should be rendered.\n\t * Defaults to 'content' if not provided.\n\t */\n\t@property({ type: String }) type: SlideType = 'content'\n\n\t/**\n\t * Source for images or videos (if `type` is 'image' or 'video').\n\t */\n\t@property({ type: String }) src: string = ''\n\n\t/**\n\t * Alternate text for images.\n\t */\n\t@property({ type: String }) alt: string = ''\n\n\t/**\n\t * Whether to show default video controls (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) controls = true\n\n\t/**\n\t * Whether the video should autoplay (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) autoplay = false\n\n\t/**\n\t * Whether the video should loop (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) loop = false\n\n\t/**\n\t * Whether the video is muted (if `type` is 'video').\n\t */\n\t@property({ type: Boolean }) muted = false\n\n\t/**\n\t * CSS `object-fit` property, applied to images/videos.\n\t */\n\t@property({ type: String }) fit: ObjectFit = 'cover'\n\n\trender() {\n\t\treturn html` <div style=\"--object-fit: ${this.fit}\">${cache(this.renderSlide())}</div> `\n\t}\n\n\tprivate renderSlide() {\n\t\tswitch (this.type) {\n\t\t\tcase 'image':\n\t\t\t\treturn html` <img class=\"slide\" src=\"${this.src}\" alt=\"${this.alt}\" loading=\"lazy\" /> `\n\t\t\tcase 'video':\n\t\t\t\treturn html`\n\t\t\t\t\t<video\n\t\t\t\t\t\tclass=\"slide\"\n\t\t\t\t\t\tsrc=\"${this.src}\"\n\t\t\t\t\t\t?controls=\"${this.controls}\"\n\t\t\t\t\t\t?autoplay=\"${this.autoplay}\"\n\t\t\t\t\t\t?loop=\"${this.loop}\"\n\t\t\t\t\t\t?muted=\"${this.muted}\"\n\t\t\t\t\t>\n\t\t\t\t\t\tYour browser does not support HTML video.\n\t\t\t\t\t</video>\n\t\t\t\t`\n\t\t\tcase 'content':\n\t\t\tdefault:\n\t\t\t\treturn html`<slot></slot>`\n\t\t}\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slide': SchmancySlide\n\t}\n}\n","import { SchmancyElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { fromEvent } from 'rxjs'\nimport { throttleTime } from 'rxjs/operators'\n\n@customElement('schmancy-slider')\nexport class SchmancySlider extends SchmancyElement {\n\tstatic styles = [\n\t\tcss`\n\t\t\t.slider {\n\t\t\t\t/* Lay out slides horizontally, one after another */\n\t\t\t\tdisplay: flex;\n\t\t\t\toverflow-x: auto;\n\n\t\t\t\t/* Optional: scroll snapping */\n\t\t\t\tscroll-snap-type: x mandatory;\n\n\t\t\t\t/* Hide scrollbars */\n\t\t\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\t\t\tscrollbar-width: none; /* Firefox */\n\t\t\t}\n\t\t\t.slider::-webkit-scrollbar {\n\t\t\t\tdisplay: none; /* Chrome, Safari, Opera */\n\t\t\t}\n\n\t\t\t/* \n      Ensure each slide takes up the full slider width.\n      \"schmancy-slide\" is the child custom element.\n    */\n\t\t\t::slotted(schmancy-slide) {\n\t\t\t\tflex: 0 0 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t`,\n\t]\n\n\t/**\n\t * Currently centered slide index\n\t */\n\t@state() private selectedIndex: number = 0\n\n\t/**\n\t * If true, renders next/prev buttons\n\t */\n\t@property({ type: Boolean }) showArrows: boolean = true\n\n\t@query('#slider') private slider!: HTMLDivElement\n\t@query('slot') private defaultSlot!: HTMLSlotElement\n\n\tprotected firstUpdated() {\n\t\t// Start at leftmost position\n\t\tthis.slider.scrollLeft = 0\n\n\t\t// Throttle scroll events to update selected index\n\t\tfromEvent(this.slider, 'scroll')\n\t\t\t.pipe(throttleTime(100, undefined, { trailing: true }))\n\t\t\t.subscribe(() => {\n\t\t\t\tthis.updateSelectedIndexOnScroll()\n\t\t\t})\n\t}\n\n\tprivate updateSelectedIndexOnScroll() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides.length) return\n\n\t\tconst oldIndex = this.selectedIndex\n\n\t\t// Center of the slider’s visible area\n\t\tconst sliderCenter = this.slider.scrollLeft + this.slider.clientWidth / 2\n\n\t\tlet closestIndex = 0\n\t\tlet closestDistance = Infinity\n\n\t\tslides.forEach((slide, index) => {\n\t\t\tconst itemStart = (slide as HTMLElement).offsetLeft\n\t\t\tconst itemCenter = itemStart + slide.clientWidth / 2\n\t\t\tconst distance = Math.abs(sliderCenter - itemCenter)\n\n\t\t\tif (distance < closestDistance) {\n\t\t\t\tclosestDistance = distance\n\t\t\t\tclosestIndex = index\n\t\t\t}\n\t\t})\n\n\t\tthis.selectedIndex = closestIndex\n\n\t\t// If the index changed, dispatch event\n\t\tif (this.selectedIndex !== oldIndex) {\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('slide-changed', {\n\t\t\t\t\tdetail: { index: this.selectedIndex },\n\t\t\t\t}),\n\t\t\t)\n\t\t}\n\t}\n\n\tprivate goToSlide(newIndex: number) {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (!slides[newIndex]) return\n\n\t\tthis.slider.scrollTo({\n\t\t\tleft: (slides[newIndex] as HTMLElement).offsetLeft,\n\t\t\tbehavior: 'smooth',\n\t\t})\n\t}\n\n\tprivate onPrevClick() {\n\t\tthis.goToSlide(this.selectedIndex - 1)\n\t}\n\n\tprivate onNextClick() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\t\tif (this.selectedIndex < slides.length - 1) {\n\t\t\tthis.goToSlide(this.selectedIndex + 1)\n\t\t}\n\t}\n\n\trender() {\n\t\tconst slides = this.defaultSlot?.assignedElements({ flatten: true }) ?? []\n\n\t\treturn html`\n\t\t\t<div class=\"relative inset-0\">\n\t\t\t\t<!-- The scrollable track -->\n\t\t\t\t<div class=\"slider\" id=\"slider\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- Next/Prev Buttons (Optional) -->\n\t\t\t\t${this.showArrows\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute left-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onPrevClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === 0}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_left\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t\t<schmancy-icon-button\n\t\t\t\t\t\t\t\tclass=\"absolute right-2 top-1/2 -translate-y-1/2\"\n\t\t\t\t\t\t\t\t@click=${this.onNextClick}\n\t\t\t\t\t\t\t\t?disabled=${this.selectedIndex === slides.length - 1}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tchevron_right\n\t\t\t\t\t\t\t</schmancy-icon-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t: null}\n\n\t\t\t\t<!-- Dots / indicators -->\n\t\t\t\t<div class=\"absolute bottom-4 left-1/2 -translate-x-1/2 flex  space-x-2\">\n\t\t\t\t\t${slides.map((_, index) => {\n\t\t\t\t\t\tconst isSelected = index === this.selectedIndex\n\t\t\t\t\t\treturn html`\n\t\t\t\t\t\t\t<schmancy-button .variant=${isSelected ? 'filled tonal' : 'outlined'} class=\"rounded-full \">\n\t\t\t\t\t\t\t</schmancy-button>\n\t\t\t\t\t\t`\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-slider': SchmancySlider\n\t}\n}\n"],"mappings":"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"}