@mhmo91/schmancy 0.8.3 → 0.8.6

package/dist/{surface-DcqbWGub.cjs.map → surface-CW3H23Va.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"surface-DcqbWGub.cjs","sources":["../src/surface/surface.ts"],"sourcesContent":["import { createContext, provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/tailwind.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n\nexport type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface fill=\"all\" rounded=\"all\" elevation=\"3\" type=\"surfaceBright\" scroller>\n *   <p>Your scrollable content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n  overflow: visible;\n\t}\n\t\n\t/* Fill styles */\n\t:host([fill='all']) {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t:host([fill='width']) {\n\t\twidth: 100%;\n\t}\n\t:host([fill='height']) {\n\t\theight: 100%;\n\t}\n\t\n\t/* Rounded corner styles using M3 shape tokens */\n\t:host([rounded='none']) {\n\t\tborder-radius: 0;\n\t}\n\t:host([rounded='top']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small) var(--schmancy-sys-shape-corner-small) 0 0;\n\t}\n\t:host([rounded='left']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small) 0 0 var(--schmancy-sys-shape-corner-small);\n\t}\n\t:host([rounded='right']) {\n\t\tborder-radius: 0 var(--schmancy-sys-shape-corner-small) var(--schmancy-sys-shape-corner-small) 0;\n\t}\n\t:host([rounded='bottom']) {\n\t\tborder-radius: 0 0 var(--schmancy-sys-shape-corner-small) var(--schmancy-sys-shape-corner-small);\n\t}\n\t:host([rounded='all']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small);\n\t}\n\t\n\t/* Elevation styles with M3 surface tint support */\n\t:host([elevation='1']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-1);\n\t\t/* Apply surface tint for elevated surfaces */\n\t\tposition: relative;\n\t}\n\t:host([elevation='2']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-2);\n\t\tposition: relative;\n\t}\n\t:host([elevation='3']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-3);\n\t\tposition: relative;\n\t}\n\t:host([elevation='4']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-4);\n\t\tposition: relative;\n\t}\n\t:host([elevation='5']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-5);\n\t\tposition: relative;\n\t}\n\n\t/* M3 Surface tint overlay for elevated surfaces */\n\t:host([elevation]:not([elevation='0']))::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground: var(--schmancy-sys-color-surface-tint);\n\t\t/* Tint opacity increases with elevation */\n\t\topacity: calc(var(--elevation, 0) * 0.02);\n\t}\n\t:host([elevation='1'])::after { --elevation: 1; }\n\t:host([elevation='2'])::after { --elevation: 2; }\n\t:host([elevation='3'])::after { --elevation: 3; }\n\t:host([elevation='4'])::after { --elevation: 4; }\n\t:host([elevation='5'])::after { --elevation: 5; }\n\t\n\t/* Surface type styles - background and text colors */\n\t/* Note: surface-low/high/lowest/highest map to M3 containerLow/High/Lowest/Highest */\n\t:host([type='surface']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-default);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='surfaceDim']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-dim);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='surfaceBright']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-bright);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerLowest']) {\n\t\t/* M3 containerLowest */\n\t\tbackground-color: var(--schmancy-sys-color-surface-lowest);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerLow']) {\n\t\t/* M3 containerLow */\n\t\tbackground-color: var(--schmancy-sys-color-surface-low);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='container']) {\n\t\t/* M3 container */\n\t\tbackground-color: var(--schmancy-sys-color-surface-container);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerHigh']) {\n\t\t/* M3 containerHigh */\n\t\tbackground-color: var(--schmancy-sys-color-surface-high);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerHighest']) {\n\t\t/* M3 containerHighest */\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='glass']) {\n\t\t/* Glassmorphism effect with theme-aware colors */\n\t\tbackground-color: color-mix(in srgb, var(--schmancy-sys-color-surface-container) 70%, transparent);\n\t\tbackdrop-filter: blur(10px) saturate(180%);\n\t\t-webkit-backdrop-filter: blur(10px) saturate(180%);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-surface-on) 10%, transparent);\n\t}\n\t:host([type='transparent']) {\n\t\t/* Fully transparent background */\n\t\tbackground-color: transparent;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='glassOforim']) {\n\t\t/* Oforim-specific glass variant with enhanced blur */\n\t\tbackground-color: color-mix(in srgb, var(--schmancy-sys-color-surface-container) 60%, transparent);\n\t\tbackdrop-filter: blur(16px) saturate(200%) brightness(1.1);\n\t\t-webkit-backdrop-filter: blur(16px) saturate(200%) brightness(1.1);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);\n\t}\n\n\t/* State-based surface types for selection/active states */\n\t:host([type='primary']) {\n\t\tbackground-color: var(--schmancy-sys-color-primary-default);\n\t\tcolor: var(--schmancy-sys-color-primary-on);\n\t}\n\t:host([type='primaryContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-primary-container);\n\t\tcolor: var(--schmancy-sys-color-primary-onContainer);\n\t}\n\t:host([type='secondary']) {\n\t\tbackground-color: var(--schmancy-sys-color-secondary-default);\n\t\tcolor: var(--schmancy-sys-color-secondary-on);\n\t}\n\t:host([type='secondaryContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-secondary-container);\n\t\tcolor: var(--schmancy-sys-color-secondary-onContainer);\n\t}\n\t:host([type='tertiary']) {\n\t\tbackground-color: var(--schmancy-sys-color-tertiary-default);\n\t\tcolor: var(--schmancy-sys-color-tertiary-on);\n\t}\n\t:host([type='tertiaryContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-tertiary-container);\n\t\tcolor: var(--schmancy-sys-color-tertiary-onContainer);\n\t}\n\t:host([type='error']) {\n\t\tbackground-color: var(--schmancy-sys-color-error-container);\n\t\tcolor: var(--schmancy-sys-color-error-onContainer);\n\t}\n\t:host([type='errorContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-error-container);\n\t\tcolor: var(--schmancy-sys-color-error-onContainer);\n\t}\n\t:host([type='success']) {\n\t\tbackground-color: var(--schmancy-sys-color-success-default);\n\t\tcolor: var(--schmancy-sys-color-success-on);\n\t}\n\t:host([type='successContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-success-container);\n\t\tcolor: var(--schmancy-sys-color-success-onContainer);\n\t}\n\t:host([type='warning']) {\n\t\tbackground-color: var(--schmancy-sys-color-warning-default);\n\t\tcolor: var(--schmancy-sys-color-warning-on);\n\t}\n\t:host([type='warningContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-warning-container);\n\t\tcolor: var(--schmancy-sys-color-warning-onContainer);\n\t}\n\t:host([type='info']) {\n\t\tbackground-color: var(--schmancy-sys-color-info-default);\n\t\tcolor: var(--schmancy-sys-color-info-on);\n\t}\n\t:host([type='infoContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-info-container);\n\t\tcolor: var(--schmancy-sys-color-info-onContainer);\n\t}\n`) {\n\t/**\n\t * Fill the width and/or height of the parent container.\n\t * Options: 'all', 'width', 'height', 'auto'.\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: 'all' | 'width' | 'height' | 'auto' = 'auto'\n\n\t/**\n\t * Specifies the rounding style of the component's corners.\n\t * Options: 'none', 'top', 'left', 'right', 'bottom', 'all'.\n\t * @default 'none'\n\t */\n\t@property({ reflect: true })\n\trounded: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' = 'none'\n\n\t/**\n\t * Specifies the surface type for styling.\n\t * Provided to descendant components via context.\n\t * Options: 'surface', 'surfaceDim', 'surfaceBright', 'containerLowest',\n\t * 'containerLow', 'container', 'containerHigh', 'containerHighest',\n\t * 'glass', 'transparent', 'glassOforim', 'primary', 'primaryContainer',\n\t * 'secondary', 'secondaryContainer', 'tertiary', 'tertiaryContainer',\n\t * 'error', 'errorContainer', 'success', 'successContainer',\n\t * 'warning', 'warningContainer', 'info', 'infoContainer'.\n\t * @default 'container'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property({ reflect: true })\n\ttype: TSurfaceColor = 'container'\n\n\t/**\n\t * Defines the elevation level (shadow depth) of the surface.\n\t * Valid values: 0, 1, 2, 3, 4, 5.\n\t * @default 0\n\t */\n\t@property({ type: Number, reflect: true })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"names":["SchmancySurfaceTypeContext","createContext","SchmancySurface","TailwindElement","css","super","arguments","this","fill","rounded","type","elevation","render","html","__decorateClass","property","String","reflect","prototype","provide","context","Number","customElement"],"mappings":"kVAMO,MAAMA,EAA6BC,EAAAA,EAA6B,SAAA,EAoB1DC,QAAAA,gBAAN,cAA8BC,EAAAA,gBAAgBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA9C,CAAA,CAAA,cAAAC,MAAAA,GAAAC,SAAAA,EA4MNC,KAAAC,KAA4C,OAQ5CD,KAAAE,QAAgE,OAehEF,KAAAG,KAAsB,YAQtBH,KAAAI,UAAmC,CAAA,CAEzB,QAAAC,CACT,OAAOC,EAAAA,mBACR,CAAA,EAnCAC,EAAA,CADCC,EAAAA,SAAS,CAAEL,KAAMM,OAAQC,UAAS,CAAA,CAAA,EA3MvBf,wBA4MZgB,UAAA,OAAA,GAQAJ,EAAA,CADCC,WAAS,CAAEE,UAAS,CAAA,CAAA,EAnNTf,wBAoNZgB,UAAA,UAAA,CAAA,EAeAJ,EAAA,CAFCK,IAAQ,CAAEC,QAASpB,CAAAA,CAAAA,EACnBe,WAAS,CAAEE,UAAS,CAAA,CAAA,EAlOTf,wBAmOZgB,UAAA,OAAA,GAQAJ,EAAA,CADCC,EAAAA,SAAS,CAAEL,KAAMW,OAAQJ,QAAAA,MA1Odf,wBA2OZgB,UAAA,YAAA,CAAA,EA3OYhB,QAAAA,gBAANY,EAAA,CADNQ,EAAAA,cAAc,qBACFpB"}
+{"version":3,"file":"surface-CW3H23Va.cjs","sources":["../src/surface/surface.ts"],"sourcesContent":["import { createContext, provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/tailwind.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n\nexport type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface fill=\"all\" rounded=\"all\" elevation=\"3\" type=\"surfaceBright\" scroller>\n *   <p>Your scrollable content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n  overflow: visible;\n\t}\n\t\n\t/* Fill styles */\n\t:host([fill='all']) {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t:host([fill='width']) {\n\t\twidth: 100%;\n\t}\n\t:host([fill='height']) {\n\t\theight: 100%;\n\t}\n\t\n\t/* Rounded corner styles using M3 shape tokens */\n\t:host([rounded='none']) {\n\t\tborder-radius: 0;\n\t}\n\t:host([rounded='top']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small) var(--schmancy-sys-shape-corner-small) 0 0;\n\t}\n\t:host([rounded='left']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small) 0 0 var(--schmancy-sys-shape-corner-small);\n\t}\n\t:host([rounded='right']) {\n\t\tborder-radius: 0 var(--schmancy-sys-shape-corner-small) var(--schmancy-sys-shape-corner-small) 0;\n\t}\n\t:host([rounded='bottom']) {\n\t\tborder-radius: 0 0 var(--schmancy-sys-shape-corner-small) var(--schmancy-sys-shape-corner-small);\n\t}\n\t:host([rounded='all']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small);\n\t}\n\t\n\t/* Elevation styles with M3 surface tint support */\n\t:host([elevation='1']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-1);\n\t\t/* Apply surface tint for elevated surfaces */\n\t\tposition: relative;\n\t}\n\t:host([elevation='2']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-2);\n\t\tposition: relative;\n\t}\n\t:host([elevation='3']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-3);\n\t\tposition: relative;\n\t}\n\t:host([elevation='4']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-4);\n\t\tposition: relative;\n\t}\n\t:host([elevation='5']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-5);\n\t\tposition: relative;\n\t}\n\n\t/* M3 Surface tint overlay for elevated surfaces */\n\t:host([elevation]:not([elevation='0']))::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground: var(--schmancy-sys-color-surface-tint);\n\t\t/* Tint opacity increases with elevation */\n\t\topacity: calc(var(--elevation, 0) * 0.02);\n\t}\n\t:host([elevation='1'])::after { --elevation: 1; }\n\t:host([elevation='2'])::after { --elevation: 2; }\n\t:host([elevation='3'])::after { --elevation: 3; }\n\t:host([elevation='4'])::after { --elevation: 4; }\n\t:host([elevation='5'])::after { --elevation: 5; }\n\t\n\t/* Surface type styles - background and text colors */\n\t/* Note: surface-low/high/lowest/highest map to M3 containerLow/High/Lowest/Highest */\n\t:host([type='surface']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-default);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='surfaceDim']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-dim);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='surfaceBright']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-bright);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerLowest']) {\n\t\t/* M3 containerLowest */\n\t\tbackground-color: var(--schmancy-sys-color-surface-lowest);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerLow']) {\n\t\t/* M3 containerLow */\n\t\tbackground-color: var(--schmancy-sys-color-surface-low);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='container']) {\n\t\t/* M3 container */\n\t\tbackground-color: var(--schmancy-sys-color-surface-container);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerHigh']) {\n\t\t/* M3 containerHigh */\n\t\tbackground-color: var(--schmancy-sys-color-surface-high);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerHighest']) {\n\t\t/* M3 containerHighest */\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='glass']) {\n\t\t/* Glassmorphism effect with theme-aware colors */\n\t\tbackground-color: color-mix(in srgb, var(--schmancy-sys-color-surface-container) 70%, transparent);\n\t\tbackdrop-filter: blur(10px) saturate(180%);\n\t\t-webkit-backdrop-filter: blur(10px) saturate(180%);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-surface-on) 10%, transparent);\n\t}\n\t:host([type='transparent']) {\n\t\t/* Fully transparent background */\n\t\tbackground-color: transparent;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='glassOforim']) {\n\t\t/* Oforim-specific glass variant with enhanced blur */\n\t\tbackground-color: color-mix(in srgb, var(--schmancy-sys-color-surface-container) 60%, transparent);\n\t\tbackdrop-filter: blur(16px) saturate(200%) brightness(1.1);\n\t\t-webkit-backdrop-filter: blur(16px) saturate(200%) brightness(1.1);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);\n\t}\n\n\t/* State-based surface types for selection/active states */\n\t:host([type='primary']) {\n\t\tbackground-color: var(--schmancy-sys-color-primary-default);\n\t\tcolor: var(--schmancy-sys-color-primary-on);\n\t}\n\t:host([type='primaryContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-primary-container);\n\t\tcolor: var(--schmancy-sys-color-primary-onContainer);\n\t}\n\t:host([type='secondary']) {\n\t\tbackground-color: var(--schmancy-sys-color-secondary-default);\n\t\tcolor: var(--schmancy-sys-color-secondary-on);\n\t}\n\t:host([type='secondaryContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-secondary-container);\n\t\tcolor: var(--schmancy-sys-color-secondary-onContainer);\n\t}\n\t:host([type='tertiary']) {\n\t\tbackground-color: var(--schmancy-sys-color-tertiary-default);\n\t\tcolor: var(--schmancy-sys-color-tertiary-on);\n\t}\n\t:host([type='tertiaryContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-tertiary-container);\n\t\tcolor: var(--schmancy-sys-color-tertiary-onContainer);\n\t}\n\t:host([type='error']) {\n\t\tbackground-color: var(--schmancy-sys-color-error-container);\n\t\tcolor: var(--schmancy-sys-color-error-onContainer);\n\t}\n\t:host([type='errorContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-error-container);\n\t\tcolor: var(--schmancy-sys-color-error-onContainer);\n\t}\n\t:host([type='success']) {\n\t\tbackground-color: var(--schmancy-sys-color-success-default);\n\t\tcolor: var(--schmancy-sys-color-success-on);\n\t}\n\t:host([type='successContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-success-container);\n\t\tcolor: var(--schmancy-sys-color-success-onContainer);\n\t}\n\t:host([type='warning']) {\n\t\tbackground-color: var(--schmancy-sys-color-warning-default);\n\t\tcolor: var(--schmancy-sys-color-warning-on);\n\t}\n\t:host([type='warningContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-warning-container);\n\t\tcolor: var(--schmancy-sys-color-warning-onContainer);\n\t}\n\t:host([type='info']) {\n\t\tbackground-color: var(--schmancy-sys-color-info-default);\n\t\tcolor: var(--schmancy-sys-color-info-on);\n\t}\n\t:host([type='infoContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-info-container);\n\t\tcolor: var(--schmancy-sys-color-info-onContainer);\n\t}\n`) {\n\t/**\n\t * Fill the width and/or height of the parent container.\n\t * Options: 'all', 'width', 'height', 'auto'.\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: 'all' | 'width' | 'height' | 'auto' = 'auto'\n\n\t/**\n\t * Specifies the rounding style of the component's corners.\n\t * Options: 'none', 'top', 'left', 'right', 'bottom', 'all'.\n\t * @default 'none'\n\t */\n\t@property({ reflect: true })\n\trounded: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' = 'none'\n\n\t/**\n\t * Specifies the surface type for styling.\n\t * Provided to descendant components via context.\n\t * Options: 'surface', 'surfaceDim', 'surfaceBright', 'containerLowest',\n\t * 'containerLow', 'container', 'containerHigh', 'containerHighest',\n\t * 'glass', 'transparent', 'glassOforim', 'primary', 'primaryContainer',\n\t * 'secondary', 'secondaryContainer', 'tertiary', 'tertiaryContainer',\n\t * 'error', 'errorContainer', 'success', 'successContainer',\n\t * 'warning', 'warningContainer', 'info', 'infoContainer'.\n\t * @default 'container'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property({ reflect: true })\n\ttype: TSurfaceColor = 'container'\n\n\t/**\n\t * Defines the elevation level (shadow depth) of the surface.\n\t * Valid values: 0, 1, 2, 3, 4, 5.\n\t * @default 0\n\t */\n\t@property({ type: Number, reflect: true })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"names":["SchmancySurfaceTypeContext","createContext","SchmancySurface","TailwindElement","css","super","arguments","this","fill","rounded","type","elevation","render","html","__decorateClass","property","String","reflect","prototype","provide","context","Number","customElement"],"mappings":"kVAMO,MAAMA,EAA6BC,EAAAA,EAA6B,SAAA,EAoB1DC,QAAAA,gBAAN,cAA8BC,EAAAA,gBAAgBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA9C,CAAA,CAAA,cAAAC,MAAAA,GAAAC,SAAAA,EA4MNC,KAAAC,KAA4C,OAQ5CD,KAAAE,QAAgE,OAehEF,KAAAG,KAAsB,YAQtBH,KAAAI,UAAmC,CAAA,CAEzB,QAAAC,CACT,OAAOC,EAAAA,mBACR,CAAA,EAnCAC,EAAA,CADCC,EAAAA,SAAS,CAAEL,KAAMM,OAAQC,UAAS,CAAA,CAAA,EA3MvBf,wBA4MZgB,UAAA,OAAA,GAQAJ,EAAA,CADCC,WAAS,CAAEE,UAAS,CAAA,CAAA,EAnNTf,wBAoNZgB,UAAA,UAAA,CAAA,EAeAJ,EAAA,CAFCK,IAAQ,CAAEC,QAASpB,CAAAA,CAAAA,EACnBe,WAAS,CAAEE,UAAS,CAAA,CAAA,EAlOTf,wBAmOZgB,UAAA,OAAA,GAQAJ,EAAA,CADCC,EAAAA,SAAS,CAAEL,KAAMW,OAAQJ,QAAAA,MA1Odf,wBA2OZgB,UAAA,YAAA,CAAA,EA3OYhB,QAAAA,gBAANY,EAAA,CADNQ,EAAAA,cAAc,qBACFpB"}

package/dist/{surface-BYU3l_Q2.js → surface-eBfnSwQS.js}

@@ -1,5 +1,5 @@
 import { e as y, n as h } from "./provide-tcktw8xB.js";
-import { T as u } from "./tailwind.mixin-Ddt05Frc.js";
+import { T as u } from "./tailwind.mixin-Bp_PR6yc.js";
 import { css as v, html as m } from "lit";
 import { property as e, customElement as d } from "lit/decorators.js";
 var p = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (i, a, n, c) => {
@@ -217,4 +217,4 @@ export {
   b as S,
   r as a
 };
-//# sourceMappingURL=surface-BYU3l_Q2.js.map
+//# sourceMappingURL=surface-eBfnSwQS.js.map

package/dist/{surface-BYU3l_Q2.js.map → surface-eBfnSwQS.js.map}

@@ -1 +1 @@
-{"version":3,"file":"surface-BYU3l_Q2.js","sources":["../src/surface/surface.ts"],"sourcesContent":["import { createContext, provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/tailwind.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n\nexport type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface fill=\"all\" rounded=\"all\" elevation=\"3\" type=\"surfaceBright\" scroller>\n *   <p>Your scrollable content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n  overflow: visible;\n\t}\n\t\n\t/* Fill styles */\n\t:host([fill='all']) {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t:host([fill='width']) {\n\t\twidth: 100%;\n\t}\n\t:host([fill='height']) {\n\t\theight: 100%;\n\t}\n\t\n\t/* Rounded corner styles using M3 shape tokens */\n\t:host([rounded='none']) {\n\t\tborder-radius: 0;\n\t}\n\t:host([rounded='top']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small) var(--schmancy-sys-shape-corner-small) 0 0;\n\t}\n\t:host([rounded='left']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small) 0 0 var(--schmancy-sys-shape-corner-small);\n\t}\n\t:host([rounded='right']) {\n\t\tborder-radius: 0 var(--schmancy-sys-shape-corner-small) var(--schmancy-sys-shape-corner-small) 0;\n\t}\n\t:host([rounded='bottom']) {\n\t\tborder-radius: 0 0 var(--schmancy-sys-shape-corner-small) var(--schmancy-sys-shape-corner-small);\n\t}\n\t:host([rounded='all']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small);\n\t}\n\t\n\t/* Elevation styles with M3 surface tint support */\n\t:host([elevation='1']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-1);\n\t\t/* Apply surface tint for elevated surfaces */\n\t\tposition: relative;\n\t}\n\t:host([elevation='2']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-2);\n\t\tposition: relative;\n\t}\n\t:host([elevation='3']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-3);\n\t\tposition: relative;\n\t}\n\t:host([elevation='4']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-4);\n\t\tposition: relative;\n\t}\n\t:host([elevation='5']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-5);\n\t\tposition: relative;\n\t}\n\n\t/* M3 Surface tint overlay for elevated surfaces */\n\t:host([elevation]:not([elevation='0']))::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground: var(--schmancy-sys-color-surface-tint);\n\t\t/* Tint opacity increases with elevation */\n\t\topacity: calc(var(--elevation, 0) * 0.02);\n\t}\n\t:host([elevation='1'])::after { --elevation: 1; }\n\t:host([elevation='2'])::after { --elevation: 2; }\n\t:host([elevation='3'])::after { --elevation: 3; }\n\t:host([elevation='4'])::after { --elevation: 4; }\n\t:host([elevation='5'])::after { --elevation: 5; }\n\t\n\t/* Surface type styles - background and text colors */\n\t/* Note: surface-low/high/lowest/highest map to M3 containerLow/High/Lowest/Highest */\n\t:host([type='surface']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-default);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='surfaceDim']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-dim);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='surfaceBright']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-bright);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerLowest']) {\n\t\t/* M3 containerLowest */\n\t\tbackground-color: var(--schmancy-sys-color-surface-lowest);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerLow']) {\n\t\t/* M3 containerLow */\n\t\tbackground-color: var(--schmancy-sys-color-surface-low);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='container']) {\n\t\t/* M3 container */\n\t\tbackground-color: var(--schmancy-sys-color-surface-container);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerHigh']) {\n\t\t/* M3 containerHigh */\n\t\tbackground-color: var(--schmancy-sys-color-surface-high);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerHighest']) {\n\t\t/* M3 containerHighest */\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='glass']) {\n\t\t/* Glassmorphism effect with theme-aware colors */\n\t\tbackground-color: color-mix(in srgb, var(--schmancy-sys-color-surface-container) 70%, transparent);\n\t\tbackdrop-filter: blur(10px) saturate(180%);\n\t\t-webkit-backdrop-filter: blur(10px) saturate(180%);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-surface-on) 10%, transparent);\n\t}\n\t:host([type='transparent']) {\n\t\t/* Fully transparent background */\n\t\tbackground-color: transparent;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='glassOforim']) {\n\t\t/* Oforim-specific glass variant with enhanced blur */\n\t\tbackground-color: color-mix(in srgb, var(--schmancy-sys-color-surface-container) 60%, transparent);\n\t\tbackdrop-filter: blur(16px) saturate(200%) brightness(1.1);\n\t\t-webkit-backdrop-filter: blur(16px) saturate(200%) brightness(1.1);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);\n\t}\n\n\t/* State-based surface types for selection/active states */\n\t:host([type='primary']) {\n\t\tbackground-color: var(--schmancy-sys-color-primary-default);\n\t\tcolor: var(--schmancy-sys-color-primary-on);\n\t}\n\t:host([type='primaryContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-primary-container);\n\t\tcolor: var(--schmancy-sys-color-primary-onContainer);\n\t}\n\t:host([type='secondary']) {\n\t\tbackground-color: var(--schmancy-sys-color-secondary-default);\n\t\tcolor: var(--schmancy-sys-color-secondary-on);\n\t}\n\t:host([type='secondaryContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-secondary-container);\n\t\tcolor: var(--schmancy-sys-color-secondary-onContainer);\n\t}\n\t:host([type='tertiary']) {\n\t\tbackground-color: var(--schmancy-sys-color-tertiary-default);\n\t\tcolor: var(--schmancy-sys-color-tertiary-on);\n\t}\n\t:host([type='tertiaryContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-tertiary-container);\n\t\tcolor: var(--schmancy-sys-color-tertiary-onContainer);\n\t}\n\t:host([type='error']) {\n\t\tbackground-color: var(--schmancy-sys-color-error-container);\n\t\tcolor: var(--schmancy-sys-color-error-onContainer);\n\t}\n\t:host([type='errorContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-error-container);\n\t\tcolor: var(--schmancy-sys-color-error-onContainer);\n\t}\n\t:host([type='success']) {\n\t\tbackground-color: var(--schmancy-sys-color-success-default);\n\t\tcolor: var(--schmancy-sys-color-success-on);\n\t}\n\t:host([type='successContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-success-container);\n\t\tcolor: var(--schmancy-sys-color-success-onContainer);\n\t}\n\t:host([type='warning']) {\n\t\tbackground-color: var(--schmancy-sys-color-warning-default);\n\t\tcolor: var(--schmancy-sys-color-warning-on);\n\t}\n\t:host([type='warningContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-warning-container);\n\t\tcolor: var(--schmancy-sys-color-warning-onContainer);\n\t}\n\t:host([type='info']) {\n\t\tbackground-color: var(--schmancy-sys-color-info-default);\n\t\tcolor: var(--schmancy-sys-color-info-on);\n\t}\n\t:host([type='infoContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-info-container);\n\t\tcolor: var(--schmancy-sys-color-info-onContainer);\n\t}\n`) {\n\t/**\n\t * Fill the width and/or height of the parent container.\n\t * Options: 'all', 'width', 'height', 'auto'.\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: 'all' | 'width' | 'height' | 'auto' = 'auto'\n\n\t/**\n\t * Specifies the rounding style of the component's corners.\n\t * Options: 'none', 'top', 'left', 'right', 'bottom', 'all'.\n\t * @default 'none'\n\t */\n\t@property({ reflect: true })\n\trounded: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' = 'none'\n\n\t/**\n\t * Specifies the surface type for styling.\n\t * Provided to descendant components via context.\n\t * Options: 'surface', 'surfaceDim', 'surfaceBright', 'containerLowest',\n\t * 'containerLow', 'container', 'containerHigh', 'containerHighest',\n\t * 'glass', 'transparent', 'glassOforim', 'primary', 'primaryContainer',\n\t * 'secondary', 'secondaryContainer', 'tertiary', 'tertiaryContainer',\n\t * 'error', 'errorContainer', 'success', 'successContainer',\n\t * 'warning', 'warningContainer', 'info', 'infoContainer'.\n\t * @default 'container'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property({ reflect: true })\n\ttype: TSurfaceColor = 'container'\n\n\t/**\n\t * Defines the elevation level (shadow depth) of the surface.\n\t * Valid values: 0, 1, 2, 3, 4, 5.\n\t * @default 0\n\t */\n\t@property({ type: Number, reflect: true })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"names":["SchmancySurfaceTypeContext","createContext","SchmancySurface","TailwindElement","css","super","arguments","this","fill","rounded","type","elevation","render","html","__decorateClass","property","String","reflect","prototype","provide","context","Number","customElement"],"mappings":";;;;;;;;AAMO,MAAMA,IAA6BC,EAA6B,SAAA;AAoBhE,IAAMC,IAAN,cAA8BC,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA9C,EAAA;AAAA,EAAA;AAAAC,UAAAA,GAAAC,SAAAA,GA4MNC,KAAAC,OAA4C,QAQ5CD,KAAAE,UAAgE,QAehEF,KAAAG,OAAsB,aAQtBH,KAAAI,YAAmC;AAAA,EAAA;AAAA,EAEzB,SAAAC;AACT,WAAOC;AAAAA,EACR;AAAA;AAnCAC,EAAA,CADCC,EAAS,EAAEL,MAAMM,QAAQC,SAAAA,GAAS,CAAA,CAAA,GA3MvBf,EA4MZgB,WAAA,QAAA,CAAA,GAQAJ,EAAA,CADCC,EAAS,EAAEE,SAAAA,GAAS,CAAA,CAAA,GAnNTf,EAoNZgB,WAAA,WAAA,CAAA,GAeAJ,EAAA,CAFCK,EAAQ,EAAEC,SAASpB,EAAAA,CAAAA,GACnBe,EAAS,EAAEE,SAAAA,GAAS,CAAA,CAAA,GAlOTf,EAmOZgB,WAAA,QAAA,CAAA,GAQAJ,EAAA,CADCC,EAAS,EAAEL,MAAMW,QAAQJ,SAAAA,QA1Odf,EA2OZgB,WAAA,aAAA,CAAA,GA3OYhB,IAANY,EAAA,CADNQ,EAAc,kBAAA,CAAA,GACFpB;"}
+{"version":3,"file":"surface-eBfnSwQS.js","sources":["../src/surface/surface.ts"],"sourcesContent":["import { createContext, provide } from '@lit/context'\nimport { TailwindElement } from '@mixins/tailwind.mixin'\nimport { TSurfaceColor } from '@schmancy/types'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport const SchmancySurfaceTypeContext = createContext<TSurfaceColor>('surface')\n\nexport type SchmancySurfaceFill = 'all' | 'width' | 'height' | 'auto'\n/**\n * `<schmancy-surface>` component\n *\n * This component renders a styled container that adapts its dimensions based on the `fill` property.\n * It supports various rounding options, elevation levels, and applies background and text color classes\n * based on the specified surface variant. Additionally, when the `scroller` property is true, the component\n * enables internal scrolling by applying overflow and scroll-behavior styles.\n *\n * @element schmancy-surface\n * @slot - Default slot for projecting child content.\n *\n * @example\n * <schmancy-surface fill=\"all\" rounded=\"all\" elevation=\"3\" type=\"surfaceBright\" scroller>\n *   <p>Your scrollable content here</p>\n * </schmancy-surface>\n */\n@customElement('schmancy-surface')\nexport class SchmancySurface extends TailwindElement(css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n  overflow: visible;\n\t}\n\t\n\t/* Fill styles */\n\t:host([fill='all']) {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t:host([fill='width']) {\n\t\twidth: 100%;\n\t}\n\t:host([fill='height']) {\n\t\theight: 100%;\n\t}\n\t\n\t/* Rounded corner styles using M3 shape tokens */\n\t:host([rounded='none']) {\n\t\tborder-radius: 0;\n\t}\n\t:host([rounded='top']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small) var(--schmancy-sys-shape-corner-small) 0 0;\n\t}\n\t:host([rounded='left']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small) 0 0 var(--schmancy-sys-shape-corner-small);\n\t}\n\t:host([rounded='right']) {\n\t\tborder-radius: 0 var(--schmancy-sys-shape-corner-small) var(--schmancy-sys-shape-corner-small) 0;\n\t}\n\t:host([rounded='bottom']) {\n\t\tborder-radius: 0 0 var(--schmancy-sys-shape-corner-small) var(--schmancy-sys-shape-corner-small);\n\t}\n\t:host([rounded='all']) {\n\t\tborder-radius: var(--schmancy-sys-shape-corner-small);\n\t}\n\t\n\t/* Elevation styles with M3 surface tint support */\n\t:host([elevation='1']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-1);\n\t\t/* Apply surface tint for elevated surfaces */\n\t\tposition: relative;\n\t}\n\t:host([elevation='2']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-2);\n\t\tposition: relative;\n\t}\n\t:host([elevation='3']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-3);\n\t\tposition: relative;\n\t}\n\t:host([elevation='4']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-4);\n\t\tposition: relative;\n\t}\n\t:host([elevation='5']) {\n\t\tbox-shadow: var(--schmancy-sys-elevation-5);\n\t\tposition: relative;\n\t}\n\n\t/* M3 Surface tint overlay for elevated surfaces */\n\t:host([elevation]:not([elevation='0']))::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tpointer-events: none;\n\t\tbackground: var(--schmancy-sys-color-surface-tint);\n\t\t/* Tint opacity increases with elevation */\n\t\topacity: calc(var(--elevation, 0) * 0.02);\n\t}\n\t:host([elevation='1'])::after { --elevation: 1; }\n\t:host([elevation='2'])::after { --elevation: 2; }\n\t:host([elevation='3'])::after { --elevation: 3; }\n\t:host([elevation='4'])::after { --elevation: 4; }\n\t:host([elevation='5'])::after { --elevation: 5; }\n\t\n\t/* Surface type styles - background and text colors */\n\t/* Note: surface-low/high/lowest/highest map to M3 containerLow/High/Lowest/Highest */\n\t:host([type='surface']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-default);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='surfaceDim']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-dim);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='surfaceBright']) {\n\t\tbackground-color: var(--schmancy-sys-color-surface-bright);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerLowest']) {\n\t\t/* M3 containerLowest */\n\t\tbackground-color: var(--schmancy-sys-color-surface-lowest);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerLow']) {\n\t\t/* M3 containerLow */\n\t\tbackground-color: var(--schmancy-sys-color-surface-low);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='container']) {\n\t\t/* M3 container */\n\t\tbackground-color: var(--schmancy-sys-color-surface-container);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerHigh']) {\n\t\t/* M3 containerHigh */\n\t\tbackground-color: var(--schmancy-sys-color-surface-high);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='containerHighest']) {\n\t\t/* M3 containerHighest */\n\t\tbackground-color: var(--schmancy-sys-color-surface-highest);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='glass']) {\n\t\t/* Glassmorphism effect with theme-aware colors */\n\t\tbackground-color: color-mix(in srgb, var(--schmancy-sys-color-surface-container) 70%, transparent);\n\t\tbackdrop-filter: blur(10px) saturate(180%);\n\t\t-webkit-backdrop-filter: blur(10px) saturate(180%);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-surface-on) 10%, transparent);\n\t}\n\t:host([type='transparent']) {\n\t\t/* Fully transparent background */\n\t\tbackground-color: transparent;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t}\n\t:host([type='glassOforim']) {\n\t\t/* Oforim-specific glass variant with enhanced blur */\n\t\tbackground-color: color-mix(in srgb, var(--schmancy-sys-color-surface-container) 60%, transparent);\n\t\tbackdrop-filter: blur(16px) saturate(200%) brightness(1.1);\n\t\t-webkit-backdrop-filter: blur(16px) saturate(200%) brightness(1.1);\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tborder: 1px solid color-mix(in srgb, var(--schmancy-sys-color-primary-default) 20%, transparent);\n\t}\n\n\t/* State-based surface types for selection/active states */\n\t:host([type='primary']) {\n\t\tbackground-color: var(--schmancy-sys-color-primary-default);\n\t\tcolor: var(--schmancy-sys-color-primary-on);\n\t}\n\t:host([type='primaryContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-primary-container);\n\t\tcolor: var(--schmancy-sys-color-primary-onContainer);\n\t}\n\t:host([type='secondary']) {\n\t\tbackground-color: var(--schmancy-sys-color-secondary-default);\n\t\tcolor: var(--schmancy-sys-color-secondary-on);\n\t}\n\t:host([type='secondaryContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-secondary-container);\n\t\tcolor: var(--schmancy-sys-color-secondary-onContainer);\n\t}\n\t:host([type='tertiary']) {\n\t\tbackground-color: var(--schmancy-sys-color-tertiary-default);\n\t\tcolor: var(--schmancy-sys-color-tertiary-on);\n\t}\n\t:host([type='tertiaryContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-tertiary-container);\n\t\tcolor: var(--schmancy-sys-color-tertiary-onContainer);\n\t}\n\t:host([type='error']) {\n\t\tbackground-color: var(--schmancy-sys-color-error-container);\n\t\tcolor: var(--schmancy-sys-color-error-onContainer);\n\t}\n\t:host([type='errorContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-error-container);\n\t\tcolor: var(--schmancy-sys-color-error-onContainer);\n\t}\n\t:host([type='success']) {\n\t\tbackground-color: var(--schmancy-sys-color-success-default);\n\t\tcolor: var(--schmancy-sys-color-success-on);\n\t}\n\t:host([type='successContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-success-container);\n\t\tcolor: var(--schmancy-sys-color-success-onContainer);\n\t}\n\t:host([type='warning']) {\n\t\tbackground-color: var(--schmancy-sys-color-warning-default);\n\t\tcolor: var(--schmancy-sys-color-warning-on);\n\t}\n\t:host([type='warningContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-warning-container);\n\t\tcolor: var(--schmancy-sys-color-warning-onContainer);\n\t}\n\t:host([type='info']) {\n\t\tbackground-color: var(--schmancy-sys-color-info-default);\n\t\tcolor: var(--schmancy-sys-color-info-on);\n\t}\n\t:host([type='infoContainer']) {\n\t\tbackground-color: var(--schmancy-sys-color-info-container);\n\t\tcolor: var(--schmancy-sys-color-info-onContainer);\n\t}\n`) {\n\t/**\n\t * Fill the width and/or height of the parent container.\n\t * Options: 'all', 'width', 'height', 'auto'.\n\t * @default 'auto'\n\t */\n\t@property({ type: String, reflect: true })\n\tfill: 'all' | 'width' | 'height' | 'auto' = 'auto'\n\n\t/**\n\t * Specifies the rounding style of the component's corners.\n\t * Options: 'none', 'top', 'left', 'right', 'bottom', 'all'.\n\t * @default 'none'\n\t */\n\t@property({ reflect: true })\n\trounded: 'none' | 'top' | 'left' | 'right' | 'bottom' | 'all' = 'none'\n\n\t/**\n\t * Specifies the surface type for styling.\n\t * Provided to descendant components via context.\n\t * Options: 'surface', 'surfaceDim', 'surfaceBright', 'containerLowest',\n\t * 'containerLow', 'container', 'containerHigh', 'containerHighest',\n\t * 'glass', 'transparent', 'glassOforim', 'primary', 'primaryContainer',\n\t * 'secondary', 'secondaryContainer', 'tertiary', 'tertiaryContainer',\n\t * 'error', 'errorContainer', 'success', 'successContainer',\n\t * 'warning', 'warningContainer', 'info', 'infoContainer'.\n\t * @default 'container'\n\t */\n\t@provide({ context: SchmancySurfaceTypeContext })\n\t@property({ reflect: true })\n\ttype: TSurfaceColor = 'container'\n\n\t/**\n\t * Defines the elevation level (shadow depth) of the surface.\n\t * Valid values: 0, 1, 2, 3, 4, 5.\n\t * @default 0\n\t */\n\t@property({ type: Number, reflect: true })\n\televation: 0 | 1 | 2 | 3 | 4 | 5 = 0\n\n\tprotected render(): unknown {\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-surface': SchmancySurface\n\t}\n}\n"],"names":["SchmancySurfaceTypeContext","createContext","SchmancySurface","TailwindElement","css","super","arguments","this","fill","rounded","type","elevation","render","html","__decorateClass","property","String","reflect","prototype","provide","context","Number","customElement"],"mappings":";;;;;;;;AAMO,MAAMA,IAA6BC,EAA6B,SAAA;AAoBhE,IAAMC,IAAN,cAA8BC,EAAgBC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,CAA9C,EAAA;AAAA,EAAA;AAAAC,UAAAA,GAAAC,SAAAA,GA4MNC,KAAAC,OAA4C,QAQ5CD,KAAAE,UAAgE,QAehEF,KAAAG,OAAsB,aAQtBH,KAAAI,YAAmC;AAAA,EAAA;AAAA,EAEzB,SAAAC;AACT,WAAOC;AAAAA,EACR;AAAA;AAnCAC,EAAA,CADCC,EAAS,EAAEL,MAAMM,QAAQC,SAAAA,GAAS,CAAA,CAAA,GA3MvBf,EA4MZgB,WAAA,QAAA,CAAA,GAQAJ,EAAA,CADCC,EAAS,EAAEE,SAAAA,GAAS,CAAA,CAAA,GAnNTf,EAoNZgB,WAAA,WAAA,CAAA,GAeAJ,EAAA,CAFCK,EAAQ,EAAEC,SAASpB,EAAAA,CAAAA,GACnBe,EAAS,EAAEE,SAAAA,GAAS,CAAA,CAAA,GAlOTf,EAmOZgB,WAAA,QAAA,CAAA,GAQAJ,EAAA,CADCC,EAAS,EAAEL,MAAMW,QAAQJ,SAAAA,QA1Odf,EA2OZgB,WAAA,aAAA,CAAA,GA3OYhB,IAANY,EAAA,CADNQ,EAAc,kBAAA,CAAA,GACFpB;"}

package/dist/surface.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./surface-DcqbWGub.cjs");Object.defineProperty(exports,"SchmancySurface",{enumerable:!0,get:()=>e.SchmancySurface}),exports.SchmancySurfaceTypeContext=e.SchmancySurfaceTypeContext;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./surface-CW3H23Va.cjs");Object.defineProperty(exports,"SchmancySurface",{enumerable:!0,get:()=>e.SchmancySurface}),exports.SchmancySurfaceTypeContext=e.SchmancySurfaceTypeContext;
 //# sourceMappingURL=surface.cjs.map

package/dist/surface.js

@@ -1,4 +1,4 @@
-import { a as e, S } from "./surface-BYU3l_Q2.js";
+import { a as e, S } from "./surface-eBfnSwQS.js";
 export {
   e as SchmancySurface,
   S as SchmancySurfaceTypeContext

package/dist/{table-C9fzDjjk.cjs → table-D0tiSL_u.cjs}

@@ -1,4 +1,4 @@
-"use strict";const y=require("./tslib.es6-DgOcxv4s.cjs"),h=require("lit"),g=require("lit/decorators/property.js"),x=require("lit/directive.js"),A=require("lit/async-directive.js"),N=require("lit/directives/repeat.js"),D=require("./litElement.mixin-BVBdv0GP.cjs"),c=require("lit/decorators.js");var B=Object.defineProperty,j=Object.getOwnPropertyDescriptor,v=(l,t,e,i)=>{for(var s,r=i>1?void 0:i?j(t,e):t,o=l.length-1;o>=0;o--)(s=l[o])&&(r=(i?s(t,e,r):s(r))||r);return i&&r&&B(t,e,r),r};exports.SchmancyTableRow=class extends D.$LitElement(){constructor(){super(...arguments),this.columns=[],this.cols=this.columns.map(()=>"1fr").join(" ")}renderCell(l){if(l.render)return h.html`
+"use strict";const y=require("./tslib.es6-DgOcxv4s.cjs"),h=require("lit"),g=require("lit/decorators/property.js"),x=require("lit/directive.js"),A=require("lit/async-directive.js"),N=require("lit/directives/repeat.js"),D=require("./litElement.mixin-CrpeGpZ7.cjs"),c=require("lit/decorators.js");var B=Object.defineProperty,j=Object.getOwnPropertyDescriptor,v=(l,t,e,i)=>{for(var s,r=i>1?void 0:i?j(t,e):t,o=l.length-1;o>=0;o--)(s=l[o])&&(r=(i?s(t,e,r):s(r))||r);return i&&r&&B(t,e,r),r};exports.SchmancyTableRow=class extends D.$LitElement(){constructor(){super(...arguments),this.columns=[],this.cols=this.columns.map(()=>"1fr").join(" ")}renderCell(l){if(l.render)return h.html`
 				<div class="overflow-hidden text-ellipsis">
 					<schmancy-typography align="${l.align||"left"}" maxLines="2" weight="${l.weight||"normal"}">
 						${l.render(this.item)}
@@ -61,4 +61,4 @@
 						`}
 			</schmancy-grid>
 		`}},d([c.property({type:Array,attribute:!1})],exports.SchmancyDataTable.prototype,"columns",2),d([c.property({type:Array,attribute:!1})],exports.SchmancyDataTable.prototype,"data",2),d([c.property({type:String})],exports.SchmancyDataTable.prototype,"keyField",2),d([c.property({type:String})],exports.SchmancyDataTable.prototype,"cols",2),d([c.property({type:Boolean})],exports.SchmancyDataTable.prototype,"sortable",2),d([c.state()],exports.SchmancyDataTable.prototype,"sortColumn",2),d([c.state()],exports.SchmancyDataTable.prototype,"sortDirection",2),d([c.state()],exports.SchmancyDataTable.prototype,"filteredData",2),exports.SchmancyDataTable=d([c.customElement("schmancy-table")],exports.SchmancyDataTable);
-//# sourceMappingURL=table-C9fzDjjk.cjs.map
+//# sourceMappingURL=table-D0tiSL_u.cjs.map