@vielzeug/refine 1.8.0 → 2.0.1

package/dist/separator.cjs

@@ -4,24 +4,24 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                 <hr
                   class="separator"
                   part="separator"
-                  :role="${t}"
-                  :aria-hidden="${r}"
-                  :aria-orientation="${()=>e.orientation.value}" />
+                  role="${t}"
+                  aria-hidden="${r}"
+                  aria-orientation="${()=>e.orientation.value}" />
                 <span class="separator-label" part="label">${()=>e.label.value}</span>
                 <hr
                   class="separator"
                   part="separator"
-                  :role="${t}"
-                  :aria-hidden="${r}"
-                  :aria-orientation="${()=>e.orientation.value}" />
+                  role="${t}"
+                  aria-hidden="${r}"
+                  aria-orientation="${()=>e.orientation.value}" />
               </div>
             `:n.html`
               <hr
                 class="separator"
                 part="separator"
-                :role="${t}"
-                :aria-hidden="${r}"
-                :aria-orientation="${()=>e.orientation.value}" />
+                role="${t}"
+                aria-hidden="${r}"
+                aria-orientation="${()=>e.orientation.value}" />
             `}
     `},styles:[e.colorThemeMixin,t.default]}),exports.SEPARATOR_TAG=r;
 //# sourceMappingURL=separator.cjs.map

package/dist/separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"separator.cjs","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport type { ThemeColor } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type OreSeparatorProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Decorative only (default true) — set to false for semantic separators */\n  decorative?: boolean;\n  /** Optional label text centered on the separator */\n  label?: string;\n  /** Orientation of the separator */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A simple visual divider between sections of content.\n *\n * @element ore-separator\n *\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {boolean} decorative - When true (default), aria-hidden is applied\n * @attr {string} label - Optional centered label text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @part wrapper - Root wrapper container.\n * @part separator - Separator element.\n * @part label - Label element.\n * @example\n * ```html\n * <ore-separator></ore-separator>\n * <ore-separator label=\"or\"></ore-separator>\n * <ore-separator orientation=\"vertical\"></ore-separator>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-separator' as const;\ndefine<OreSeparatorProps>(SEPARATOR_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    decorative: prop.bool(true),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n  },\n  setup(props) {\n    const roleAttr = () => (props.decorative.value ? 'none' : 'separator');\n    const ariaHidden = () => (props.decorative.value ? 'true' : null);\n\n    return html`\n      ${() =>\n        props.label.value\n          ? html`\n              <div class=\"separator-wrapper\" part=\"wrapper\">\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${roleAttr}\"\n                  :aria-hidden=\"${ariaHidden}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n                <span class=\"separator-label\" part=\"label\">${() => props.label.value}</span>\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${roleAttr}\"\n                  :aria-hidden=\"${ariaHidden}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                :role=\"${roleAttr}\"\n                :aria-hidden=\"${ariaHidden}\"\n                :aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n});\n"],"mappings":"sMA2CA,IAAa,EAAgB,6BACH,EAAe,CACvC,MAAO,CACL,MAAO,EAAA,KAAK,OAAmB,EAC/B,WAAY,EAAA,KAAK,KAAK,EAAI,EAC1B,MAAO,EAAA,KAAK,OAAO,EACnB,YAAa,EAAA,KAAK,MAAM,CAAC,aAAc,UAAU,EAAY,YAAY,CAC3E,EACA,MAAM,EAAO,CACX,IAAM,MAAkB,EAAM,WAAW,MAAQ,OAAS,YACpD,MAAoB,EAAM,WAAW,MAAQ,OAAS,KAE5D,MAAO,GAAA,IAAI;YAEP,EAAM,MAAM,MACR,EAAA,IAAI;;;;;2BAKW,EAAS;kCACF,EAAW;2CACA,EAAM,YAAY,MAAM;iEACF,EAAM,MAAM,MAAM;;;;2BAI1D,EAAS;kCACF,EAAW;2CACA,EAAM,YAAY,MAAM;;cAGzD,EAAA,IAAI;;;;yBAIS,EAAS;gCACF,EAAW;yCACA,EAAM,YAAY,MAAM;cACrD;KAEZ,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,OAAe,CAC3C,CAAC"}
+{"version":3,"file":"separator.cjs","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport type { ThemeColor } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type OreSeparatorProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Decorative only (default true) — set to false for semantic separators */\n  decorative?: boolean;\n  /** Optional label text centered on the separator */\n  label?: string;\n  /** Orientation of the separator */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A simple visual divider between sections of content.\n *\n * @element ore-separator\n *\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {boolean} decorative - When true (default), aria-hidden is applied\n * @attr {string} label - Optional centered label text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @part wrapper - Root wrapper container.\n * @part separator - Separator element.\n * @part label - Label element.\n * @example\n * ```html\n * <ore-separator></ore-separator>\n * <ore-separator label=\"or\"></ore-separator>\n * <ore-separator orientation=\"vertical\"></ore-separator>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-separator' as const;\ndefine<OreSeparatorProps>(SEPARATOR_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    decorative: prop.bool(true),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n  },\n  setup(props) {\n    const roleAttr = () => (props.decorative.value ? 'none' : 'separator');\n    const ariaHidden = () => (props.decorative.value ? 'true' : null);\n\n    return html`\n      ${() =>\n        props.label.value\n          ? html`\n              <div class=\"separator-wrapper\" part=\"wrapper\">\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  role=\"${roleAttr}\"\n                  aria-hidden=\"${ariaHidden}\"\n                  aria-orientation=\"${() => props.orientation.value}\" />\n                <span class=\"separator-label\" part=\"label\">${() => props.label.value}</span>\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  role=\"${roleAttr}\"\n                  aria-hidden=\"${ariaHidden}\"\n                  aria-orientation=\"${() => props.orientation.value}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                role=\"${roleAttr}\"\n                aria-hidden=\"${ariaHidden}\"\n                aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n});\n"],"mappings":"sMA2CA,IAAa,EAAgB,iBAC7B,EAAA,EAAA,OAAA,CAA0B,EAAe,CACvC,MAAO,CACL,MAAO,EAAA,KAAK,OAAmB,EAC/B,WAAY,EAAA,KAAK,KAAK,EAAI,EAC1B,MAAO,EAAA,KAAK,OAAO,EACnB,YAAa,EAAA,KAAK,MAAM,CAAC,aAAc,UAAU,EAAY,YAAY,CAC3E,EACA,MAAM,EAAO,CACX,IAAM,MAAkB,EAAM,WAAW,MAAQ,OAAS,YACpD,MAAoB,EAAM,WAAW,MAAQ,OAAS,KAE5D,MAAO,GAAA,IAAI;YAEP,EAAM,MAAM,MACR,EAAA,IAAI;;;;;0BAKU,EAAS;iCACF,EAAW;0CACA,EAAM,YAAY,MAAM;iEACD,EAAM,MAAM,MAAM;;;;0BAI3D,EAAS;iCACF,EAAW;0CACA,EAAM,YAAY,MAAM;;cAGxD,EAAA,IAAI;;;;wBAIQ,EAAS;+BACF,EAAW;wCACA,EAAM,YAAY,MAAM;cACpD;KAEZ,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,OAAe,CAC3C,CAAC"}

package/dist/separator.js

@@ -18,24 +18,24 @@ n(a, {
                 <hr
                   class="separator"
                   part="separator"
-                  :role="${t}"
-                  :aria-hidden="${n}"
-                  :aria-orientation="${() => e.orientation.value}" />
+                  role="${t}"
+                  aria-hidden="${n}"
+                  aria-orientation="${() => e.orientation.value}" />
                 <span class="separator-label" part="label">${() => e.label.value}</span>
                 <hr
                   class="separator"
                   part="separator"
-                  :role="${t}"
-                  :aria-hidden="${n}"
-                  :aria-orientation="${() => e.orientation.value}" />
+                  role="${t}"
+                  aria-hidden="${n}"
+                  aria-orientation="${() => e.orientation.value}" />
               </div>
             ` : r`
               <hr
                 class="separator"
                 part="separator"
-                :role="${t}"
-                :aria-hidden="${n}"
-                :aria-orientation="${() => e.orientation.value}" />
+                role="${t}"
+                aria-hidden="${n}"
+                aria-orientation="${() => e.orientation.value}" />
             `}
     `;
 	},

package/dist/separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"separator.js","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport type { ThemeColor } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type OreSeparatorProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Decorative only (default true) — set to false for semantic separators */\n  decorative?: boolean;\n  /** Optional label text centered on the separator */\n  label?: string;\n  /** Orientation of the separator */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A simple visual divider between sections of content.\n *\n * @element ore-separator\n *\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {boolean} decorative - When true (default), aria-hidden is applied\n * @attr {string} label - Optional centered label text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @part wrapper - Root wrapper container.\n * @part separator - Separator element.\n * @part label - Label element.\n * @example\n * ```html\n * <ore-separator></ore-separator>\n * <ore-separator label=\"or\"></ore-separator>\n * <ore-separator orientation=\"vertical\"></ore-separator>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-separator' as const;\ndefine<OreSeparatorProps>(SEPARATOR_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    decorative: prop.bool(true),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n  },\n  setup(props) {\n    const roleAttr = () => (props.decorative.value ? 'none' : 'separator');\n    const ariaHidden = () => (props.decorative.value ? 'true' : null);\n\n    return html`\n      ${() =>\n        props.label.value\n          ? html`\n              <div class=\"separator-wrapper\" part=\"wrapper\">\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${roleAttr}\"\n                  :aria-hidden=\"${ariaHidden}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n                <span class=\"separator-label\" part=\"label\">${() => props.label.value}</span>\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  :role=\"${roleAttr}\"\n                  :aria-hidden=\"${ariaHidden}\"\n                  :aria-orientation=\"${() => props.orientation.value}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                :role=\"${roleAttr}\"\n                :aria-hidden=\"${ariaHidden}\"\n                :aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n});\n"],"mappings":";;;;AA2CA,IAAa,IAAgB;AAC7B,EAA0B,GAAe;CACvC,OAAO;EACL,OAAO,EAAK,OAAmB;EAC/B,YAAY,EAAK,KAAK,EAAI;EAC1B,OAAO,EAAK,OAAO;EACnB,aAAa,EAAK,MAAM,CAAC,cAAc,UAAU,GAAY,YAAY;CAC3E;CACA,MAAM,GAAO;EACX,IAAM,UAAkB,EAAM,WAAW,QAAQ,SAAS,aACpD,UAAoB,EAAM,WAAW,QAAQ,SAAS;EAE5D,OAAO,CAAI;cAEP,EAAM,MAAM,QACR,CAAI;;;;;2BAKW,EAAS;kCACF,EAAW;6CACA,EAAM,YAAY,MAAM;mEACF,EAAM,MAAM,MAAM;;;;2BAI1D,EAAS;kCACF,EAAW;6CACA,EAAM,YAAY,MAAM;;gBAGzD,CAAI;;;;yBAIS,EAAS;gCACF,EAAW;2CACA,EAAM,YAAY,MAAM;cACrD;;CAEZ;CACA,QAAQ,CAAC,GAAiB,CAAe;AAC3C,CAAC"}
+{"version":3,"file":"separator.js","names":[],"sources":["../src/content/separator/separator.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport type { ThemeColor } from '../../types';\n\nimport { colorThemeMixin } from '../../styles';\nimport componentStyles from './separator.css?inline';\n\n/** Separator component properties */\nexport type OreSeparatorProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Decorative only (default true) — set to false for semantic separators */\n  decorative?: boolean;\n  /** Optional label text centered on the separator */\n  label?: string;\n  /** Orientation of the separator */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A simple visual divider between sections of content.\n *\n * @element ore-separator\n *\n * @attr {string} orientation - 'horizontal' (default) | 'vertical'\n * @attr {boolean} decorative - When true (default), aria-hidden is applied\n * @attr {string} label - Optional centered label text\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @cssprop --separator-color - Line color\n * @cssprop --separator-size - Line thickness\n * @cssprop --separator-spacing - Vertical margin\n *\n * @part wrapper - Root wrapper container.\n * @part separator - Separator element.\n * @part label - Label element.\n * @example\n * ```html\n * <ore-separator></ore-separator>\n * <ore-separator label=\"or\"></ore-separator>\n * <ore-separator orientation=\"vertical\"></ore-separator>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-separator' as const;\ndefine<OreSeparatorProps>(SEPARATOR_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    decorative: prop.bool(true),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n  },\n  setup(props) {\n    const roleAttr = () => (props.decorative.value ? 'none' : 'separator');\n    const ariaHidden = () => (props.decorative.value ? 'true' : null);\n\n    return html`\n      ${() =>\n        props.label.value\n          ? html`\n              <div class=\"separator-wrapper\" part=\"wrapper\">\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  role=\"${roleAttr}\"\n                  aria-hidden=\"${ariaHidden}\"\n                  aria-orientation=\"${() => props.orientation.value}\" />\n                <span class=\"separator-label\" part=\"label\">${() => props.label.value}</span>\n                <hr\n                  class=\"separator\"\n                  part=\"separator\"\n                  role=\"${roleAttr}\"\n                  aria-hidden=\"${ariaHidden}\"\n                  aria-orientation=\"${() => props.orientation.value}\" />\n              </div>\n            `\n          : html`\n              <hr\n                class=\"separator\"\n                part=\"separator\"\n                role=\"${roleAttr}\"\n                aria-hidden=\"${ariaHidden}\"\n                aria-orientation=\"${() => props.orientation.value}\" />\n            `}\n    `;\n  },\n  styles: [colorThemeMixin, componentStyles],\n});\n"],"mappings":";;;;AA2CA,IAAa,IAAgB;AAC7B,EAA0B,GAAe;CACvC,OAAO;EACL,OAAO,EAAK,OAAmB;EAC/B,YAAY,EAAK,KAAK,EAAI;EAC1B,OAAO,EAAK,OAAO;EACnB,aAAa,EAAK,MAAM,CAAC,cAAc,UAAU,GAAY,YAAY;CAC3E;CACA,MAAM,GAAO;EACX,IAAM,UAAkB,EAAM,WAAW,QAAQ,SAAS,aACpD,UAAoB,EAAM,WAAW,QAAQ,SAAS;EAE5D,OAAO,CAAI;cAEP,EAAM,MAAM,QACR,CAAI;;;;;0BAKU,EAAS;iCACF,EAAW;4CACA,EAAM,YAAY,MAAM;mEACD,EAAM,MAAM,MAAM;;;;0BAI3D,EAAS;iCACF,EAAW;4CACA,EAAM,YAAY,MAAM;;gBAGxD,CAAI;;;;wBAIQ,EAAS;+BACF,EAAW;0CACA,EAAM,YAAY,MAAM;cACpD;;CAEZ;CACA,QAAQ,CAAC,GAAiB,CAAe;AAC3C,CAAC"}

package/dist/shared/index.d.ts

@@ -6,7 +6,7 @@
  * - `./prop-bundles` — reusable ore prop bundle objects
  * - `./size-presets` — sizeVariantMixin size preset constants
  *
- * `src/types/` re-exports from this file for the public `@vielzeug/refine/types` entry point.
+ * Component modules import these types directly; this module is not a public package boundary.
  */
 export * from './prop-bundles';
 export * from './size-presets';

package/dist/shared/prop-bundles.cjs

@@ -1,2 +1,2 @@
-let e=require("@vielzeug/ore");var t={color:e.prop.string()},n={size:e.prop.string()},r={disabled:e.prop.bool(!1)},i={loading:e.prop.bool(!1)},a={rounded:e.prop.string()},o={elevation:e.prop.number()},s={...t,...n,...r,...i,...a};exports.commonProps=s,exports.disablableBundle=r,exports.elevatableBundle=o,exports.loadableBundle=i,exports.roundableBundle=a,exports.sizableBundle=n,exports.themableBundle=t;
+let e=require("@vielzeug/ore");var t={color:e.prop.string()},n={size:e.prop.string()},r={disabled:e.prop.bool(!1)},i={loading:e.prop.bool(!1)},a={rounded:e.prop.string()};e.prop.number();var o={...t,...n,...r,...i,...a};exports.commonProps=o,exports.disablableBundle=r,exports.loadableBundle=i,exports.roundableBundle=a,exports.sizableBundle=n,exports.themableBundle=t;
 //# sourceMappingURL=prop-bundles.cjs.map

package/dist/shared/prop-bundles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"prop-bundles.cjs","names":[],"sources":["../../src/shared/prop-bundles.ts"],"sourcesContent":["import { prop } from '@vielzeug/ore';\n\nimport type { ComponentSize, ElevationLevel, RoundedSize, ThemeColor } from './types';\n\n/** Prop bundle for components that support a theme colour. */\nexport const themableBundle = {\n  color: prop.string<ThemeColor>(),\n};\n\n/** Prop bundle for components with discrete size variants. */\nexport const sizableBundle = {\n  size: prop.string<ComponentSize>(),\n};\n\n/** Prop bundle for interactive components that can be disabled. */\nexport const disablableBundle = {\n  disabled: prop.bool(false),\n};\n\n/** Prop bundle for components with a loading / busy state. */\nexport const loadableBundle = {\n  loading: prop.bool(false),\n};\n\n/** Prop bundle for components with configurable border-radius. */\nexport const roundableBundle = {\n  rounded: prop.string<RoundedSize>(),\n};\n\n/** Prop bundle for components with an elevation / box-shadow. */\nexport const elevatableBundle = {\n  elevation: prop.number<ElevationLevel>(),\n};\n\n/**\n * Convenience bundle combining the five most common interactive-component props:\n * `color`, `size`, `disabled`, `loading`, and `rounded`.\n *\n * Use this single spread instead of five separate bundle spreads when a\n * component needs all of them.\n *\n * @example\n * ```ts\n * props: { ...commonProps, href: prop.string() }\n * ```\n */\nexport const commonProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  ...loadableBundle,\n  ...roundableBundle,\n};\n"],"mappings":"+BAKA,IAAa,EAAiB,CAC5B,MAAO,EAAA,KAAK,OAAmB,CACjC,EAGa,EAAgB,CAC3B,KAAM,EAAA,KAAK,OAAsB,CACnC,EAGa,EAAmB,CAC9B,SAAU,EAAA,KAAK,KAAK,EAAK,CAC3B,EAGa,EAAiB,CAC5B,QAAS,EAAA,KAAK,KAAK,EAAK,CAC1B,EAGa,EAAkB,CAC7B,QAAS,EAAA,KAAK,OAAoB,CACpC,EAGa,EAAmB,CAC9B,UAAW,EAAA,KAAK,OAAuB,CACzC,EAca,EAAc,CACzB,GAAG,EACH,GAAG,EACH,GAAG,EACH,GAAG,EACH,GAAG,CACL"}
+{"version":3,"file":"prop-bundles.cjs","names":[],"sources":["../../src/shared/prop-bundles.ts"],"sourcesContent":["import { prop } from '@vielzeug/ore';\n\nimport type { ComponentSize, ElevationLevel, RoundedSize, ThemeColor } from './types';\n\n/** Prop bundle for components that support a theme colour. */\nexport const themableBundle = {\n  color: prop.string<ThemeColor>(),\n};\n\n/** Prop bundle for components with discrete size variants. */\nexport const sizableBundle = {\n  size: prop.string<ComponentSize>(),\n};\n\n/** Prop bundle for interactive components that can be disabled. */\nexport const disablableBundle = {\n  disabled: prop.bool(false),\n};\n\n/** Prop bundle for components with a loading / busy state. */\nexport const loadableBundle = {\n  loading: prop.bool(false),\n};\n\n/** Prop bundle for components with configurable border-radius. */\nexport const roundableBundle = {\n  rounded: prop.string<RoundedSize>(),\n};\n\n/** Prop bundle for components with an elevation / box-shadow. */\nexport const elevatableBundle = {\n  elevation: prop.number<ElevationLevel>(),\n};\n\n/**\n * Convenience bundle combining the five most common interactive-component props:\n * `color`, `size`, `disabled`, `loading`, and `rounded`.\n *\n * Use this single spread instead of five separate bundle spreads when a\n * component needs all of them.\n *\n * @example\n * ```ts\n * props: { ...commonProps, href: prop.string() }\n * ```\n */\nexport const commonProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  ...loadableBundle,\n  ...roundableBundle,\n};\n"],"mappings":"+BAKA,IAAa,EAAiB,CAC5B,MAAO,EAAA,KAAK,OAAmB,CACjC,EAGa,EAAgB,CAC3B,KAAM,EAAA,KAAK,OAAsB,CACnC,EAGa,EAAmB,CAC9B,SAAU,EAAA,KAAK,KAAK,EAAK,CAC3B,EAGa,EAAiB,CAC5B,QAAS,EAAA,KAAK,KAAK,EAAK,CAC1B,EAGa,EAAkB,CAC7B,QAAS,EAAA,KAAK,OAAoB,CACpC,EAIa,EAAA,KAAK,OAAuB,EAezC,IAAa,EAAc,CACzB,GAAG,EACH,GAAG,EACH,GAAG,EACH,GAAG,EACH,GAAG,CACL"}

package/dist/shared/prop-bundles.js

@@ -1,6 +1,8 @@
 import { prop as e } from "@vielzeug/ore";
 //#region src/shared/prop-bundles.ts
-var t = { color: e.string() }, n = { size: e.string() }, r = { disabled: e.bool(!1) }, i = { loading: e.bool(!1) }, a = { rounded: e.string() }, o = { elevation: e.number() }, s = {
+var t = { color: e.string() }, n = { size: e.string() }, r = { disabled: e.bool(!1) }, i = { loading: e.bool(!1) }, a = { rounded: e.string() };
+e.number();
+var o = {
 	...t,
 	...n,
 	...r,
@@ -8,6 +10,6 @@ var t = { color: e.string() }, n = { size: e.string() }, r = { disabled: e.bool(
 	...a
 };
 //#endregion
-export { s as commonProps, r as disablableBundle, o as elevatableBundle, i as loadableBundle, a as roundableBundle, n as sizableBundle, t as themableBundle };
+export { o as commonProps, r as disablableBundle, i as loadableBundle, a as roundableBundle, n as sizableBundle, t as themableBundle };
 
 //# sourceMappingURL=prop-bundles.js.map

package/dist/shared/prop-bundles.js.map

@@ -1 +1 @@
-{"version":3,"file":"prop-bundles.js","names":[],"sources":["../../src/shared/prop-bundles.ts"],"sourcesContent":["import { prop } from '@vielzeug/ore';\n\nimport type { ComponentSize, ElevationLevel, RoundedSize, ThemeColor } from './types';\n\n/** Prop bundle for components that support a theme colour. */\nexport const themableBundle = {\n  color: prop.string<ThemeColor>(),\n};\n\n/** Prop bundle for components with discrete size variants. */\nexport const sizableBundle = {\n  size: prop.string<ComponentSize>(),\n};\n\n/** Prop bundle for interactive components that can be disabled. */\nexport const disablableBundle = {\n  disabled: prop.bool(false),\n};\n\n/** Prop bundle for components with a loading / busy state. */\nexport const loadableBundle = {\n  loading: prop.bool(false),\n};\n\n/** Prop bundle for components with configurable border-radius. */\nexport const roundableBundle = {\n  rounded: prop.string<RoundedSize>(),\n};\n\n/** Prop bundle for components with an elevation / box-shadow. */\nexport const elevatableBundle = {\n  elevation: prop.number<ElevationLevel>(),\n};\n\n/**\n * Convenience bundle combining the five most common interactive-component props:\n * `color`, `size`, `disabled`, `loading`, and `rounded`.\n *\n * Use this single spread instead of five separate bundle spreads when a\n * component needs all of them.\n *\n * @example\n * ```ts\n * props: { ...commonProps, href: prop.string() }\n * ```\n */\nexport const commonProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  ...loadableBundle,\n  ...roundableBundle,\n};\n"],"mappings":";;AAKA,IAAa,IAAiB,EAC5B,OAAO,EAAK,OAAmB,EACjC,GAGa,IAAgB,EAC3B,MAAM,EAAK,OAAsB,EACnC,GAGa,IAAmB,EAC9B,UAAU,EAAK,KAAK,EAAK,EAC3B,GAGa,IAAiB,EAC5B,SAAS,EAAK,KAAK,EAAK,EAC1B,GAGa,IAAkB,EAC7B,SAAS,EAAK,OAAoB,EACpC,GAGa,IAAmB,EAC9B,WAAW,EAAK,OAAuB,EACzC,GAca,IAAc;CACzB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL"}
+{"version":3,"file":"prop-bundles.js","names":[],"sources":["../../src/shared/prop-bundles.ts"],"sourcesContent":["import { prop } from '@vielzeug/ore';\n\nimport type { ComponentSize, ElevationLevel, RoundedSize, ThemeColor } from './types';\n\n/** Prop bundle for components that support a theme colour. */\nexport const themableBundle = {\n  color: prop.string<ThemeColor>(),\n};\n\n/** Prop bundle for components with discrete size variants. */\nexport const sizableBundle = {\n  size: prop.string<ComponentSize>(),\n};\n\n/** Prop bundle for interactive components that can be disabled. */\nexport const disablableBundle = {\n  disabled: prop.bool(false),\n};\n\n/** Prop bundle for components with a loading / busy state. */\nexport const loadableBundle = {\n  loading: prop.bool(false),\n};\n\n/** Prop bundle for components with configurable border-radius. */\nexport const roundableBundle = {\n  rounded: prop.string<RoundedSize>(),\n};\n\n/** Prop bundle for components with an elevation / box-shadow. */\nexport const elevatableBundle = {\n  elevation: prop.number<ElevationLevel>(),\n};\n\n/**\n * Convenience bundle combining the five most common interactive-component props:\n * `color`, `size`, `disabled`, `loading`, and `rounded`.\n *\n * Use this single spread instead of five separate bundle spreads when a\n * component needs all of them.\n *\n * @example\n * ```ts\n * props: { ...commonProps, href: prop.string() }\n * ```\n */\nexport const commonProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  ...loadableBundle,\n  ...roundableBundle,\n};\n"],"mappings":";;AAKA,IAAa,IAAiB,EAC5B,OAAO,EAAK,OAAmB,EACjC,GAGa,IAAgB,EAC3B,MAAM,EAAK,OAAsB,EACnC,GAGa,IAAmB,EAC9B,UAAU,EAAK,KAAK,EAAK,EAC3B,GAGa,IAAiB,EAC5B,SAAS,EAAK,KAAK,EAAK,EAC1B,GAGa,IAAkB,EAC7B,SAAS,EAAK,OAAoB,EACpC;AAIa,EAAK,OAAuB;AAezC,IAAa,IAAc;CACzB,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL"}

package/dist/shared/size-presets.cjs

@@ -1,2 +1,2 @@
-var e={lg:{"--_field-height":`var(--size-12)`,"--_padding":`var(--size-2-5) var(--size-3-5)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_field-height":`var(--size-10)`,"--_padding":`var(--size-1-5) var(--size-3)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_field-height":`var(--size-8)`,"--_padding":`var(--size-1) var(--size-2)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},t={lg:{"--_padding":`var(--size-2-5) var(--size-3-5)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_padding":`var(--size-1-5) var(--size-3)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_padding":`var(--size-1) var(--size-2)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},n={lg:{fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,size:`var(--size-6)`},sm:{fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`,size:`var(--size-4)`}},r={lg:{fontSize:`var(--text-base)`,gap:`var(--size-3)`,height:`var(--size-7)`,thumbSize:`var(--size-6)`,width:`var(--size-14)`},sm:{fontSize:`var(--text-xs)`,gap:`var(--size-2)`,height:`var(--size-5)`,thumbSize:`var(--size-4)`,width:`var(--size-9)`}},i={lg:{fontSize:`var(--text-base)`,height:`calc(var(--size-5) - var(--size-1))`,size:`var(--size-5)`},md:{fontSize:`var(--text-base)`,height:`var(--size-3)`,size:`var(--size-5)`},sm:{fontSize:`var(--text-xs)`,height:`var(--size-2)`,size:`var(--size-4)`}},a={lg:{"--_padding":`var(--size-4)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_padding":`var(--size-3)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_padding":`var(--size-2)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},o={lg:{"--_item-padding":`var(--size-2) var(--size-3-5)`,"--_panel-padding":`var(--size-1-5)`,"--_separator-margin":`var(--size-1-5)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_item-padding":`var(--size-1-5) var(--size-3)`,"--_panel-padding":`var(--size-1)`,"--_separator-margin":`var(--size-1)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_item-padding":`var(--size-1) var(--size-2-5)`,"--_panel-padding":`var(--size-0-5)`,"--_separator-margin":`var(--size-0-5)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},s={lg:{"--_min-height":`var(--size-14)`,"--_min-height-two-line":`calc(var(--size-16) + var(--size-2))`,"--_padding-inline-end":`var(--size-6)`,fontSize:`var(--text-base)`,gap:`var(--size-4)`,padding:`var(--size-3) var(--size-4)`},md:{"--_min-height":`var(--size-14)`,"--_min-height-two-line":`calc(var(--size-16) + var(--size-2))`,"--_padding-inline-end":`var(--size-6)`,fontSize:`var(--text-sm)`,gap:`var(--size-4)`,padding:`var(--size-2-5) var(--size-4)`},sm:{"--_min-height":`var(--size-12)`,"--_min-height-two-line":`var(--size-16)`,"--_padding-inline-end":`var(--size-4)`,fontSize:`var(--text-xs)`,gap:`var(--size-2)`,padding:`var(--size-1-5) var(--size-2)`}},c={lg:{"--_min-height":`var(--size-40)`,fontSize:`var(--text-base)`},md:{"--_min-height":`var(--size-32)`,fontSize:`var(--text-sm)`},sm:{"--_min-height":`var(--size-28)`,fontSize:`var(--text-xs)`}};exports.CONTROL_SIZE_PRESET=n,exports.FIELD_SIZE_PRESET=e,exports.FILE_INPUT_SIZE_PRESET=c,exports.LIST_SIZE_PRESET=s,exports.MENU_SIZE_PRESET=o,exports.MESSAGE_COMPOSER_SIZE_PRESET=a,exports.SLIDER_SIZE_PRESET=i,exports.SWITCH_SIZE_PRESET=r,exports.TEXTAREA_SIZE_PRESET=t;
+var e={lg:{"--_field-height":`var(--size-12)`,"--_padding":`var(--size-2-5) var(--size-3-5)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_field-height":`var(--size-10)`,"--_padding":`var(--size-1-5) var(--size-3)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_field-height":`var(--size-8)`,"--_padding":`var(--size-1) var(--size-2)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},t={lg:{"--_padding":`var(--size-2-5) var(--size-3-5)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_padding":`var(--size-1-5) var(--size-3)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_padding":`var(--size-1) var(--size-2)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},n={lg:{fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,size:`var(--size-6)`},sm:{fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`,size:`var(--size-4)`}},r={lg:{fontSize:`var(--text-base)`,gap:`var(--size-3)`,height:`var(--size-7)`,thumbSize:`var(--size-6)`,width:`var(--size-14)`},sm:{fontSize:`var(--text-xs)`,gap:`var(--size-2)`,height:`var(--size-5)`,thumbSize:`var(--size-4)`,width:`var(--size-9)`}},i={lg:{"--_thumb-inset":`var(--slider-thumb-inset, var(--size-3))`,fontSize:`var(--text-base)`,height:`calc(var(--size-5) - var(--size-1))`,size:`var(--size-6)`},md:{"--_thumb-inset":`var(--slider-thumb-inset, var(--size-2-5))`,fontSize:`var(--text-base)`,height:`var(--size-3)`,size:`var(--size-5)`},sm:{"--_thumb-inset":`var(--slider-thumb-inset, var(--size-2))`,fontSize:`var(--text-xs)`,height:`var(--size-2)`,size:`var(--size-4)`}},a={lg:{"--_padding":`var(--size-4)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_padding":`var(--size-3)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_padding":`var(--size-2)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},o={lg:{"--_item-padding":`var(--size-2) var(--size-3-5)`,"--_panel-padding":`var(--size-1-5)`,"--_separator-margin":`var(--size-1-5)`,fontSize:`var(--text-base)`,gap:`var(--size-2-5)`},md:{"--_item-padding":`var(--size-1-5) var(--size-3)`,"--_panel-padding":`var(--size-1)`,"--_separator-margin":`var(--size-1)`,fontSize:`var(--text-sm)`,gap:`var(--size-2)`},sm:{"--_item-padding":`var(--size-1) var(--size-2-5)`,"--_panel-padding":`var(--size-0-5)`,"--_separator-margin":`var(--size-0-5)`,fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`}},s={lg:{"--_min-height":`var(--size-14)`,"--_min-height-two-line":`calc(var(--size-16) + var(--size-2))`,"--_padding-inline-end":`var(--size-6)`,fontSize:`var(--text-base)`,gap:`var(--size-4)`,padding:`var(--size-3) var(--size-4)`},md:{"--_min-height":`var(--size-14)`,"--_min-height-two-line":`calc(var(--size-16) + var(--size-2))`,"--_padding-inline-end":`var(--size-6)`,fontSize:`var(--text-sm)`,gap:`var(--size-4)`,padding:`var(--size-2-5) var(--size-4)`},sm:{"--_min-height":`var(--size-12)`,"--_min-height-two-line":`var(--size-16)`,"--_padding-inline-end":`var(--size-4)`,fontSize:`var(--text-xs)`,gap:`var(--size-2)`,padding:`var(--size-1-5) var(--size-2)`}},c={lg:{"--_min-height":`var(--size-40)`,fontSize:`var(--text-base)`},md:{"--_min-height":`var(--size-32)`,fontSize:`var(--text-sm)`},sm:{"--_min-height":`var(--size-28)`,fontSize:`var(--text-xs)`}};exports.CONTROL_SIZE_PRESET=n,exports.FIELD_SIZE_PRESET=e,exports.FILE_INPUT_SIZE_PRESET=c,exports.LIST_SIZE_PRESET=s,exports.MENU_SIZE_PRESET=o,exports.MESSAGE_COMPOSER_SIZE_PRESET=a,exports.SLIDER_SIZE_PRESET=i,exports.SWITCH_SIZE_PRESET=r,exports.TEXTAREA_SIZE_PRESET=t;
 //# sourceMappingURL=size-presets.cjs.map

package/dist/shared/size-presets.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"size-presets.cjs","names":[],"sources":["../../src/shared/size-presets.ts"],"sourcesContent":["import type { SizeConfig } from '../styles/mixins/shape.css';\nimport type { ComponentSize } from './types';\n\n/** A preset with an entry for every ComponentSize key. */\ntype FullSizePreset = Record<ComponentSize, SizeConfig>;\n\n/** A preset that may omit some ComponentSize keys (sizeVariantMixin fills the gaps with its defaults). */\ntype PartialSizePreset = Partial<Record<ComponentSize, SizeConfig>>;\n\nexport const FIELD_SIZE_PRESET = {\n  lg: {\n    '--_field-height': 'var(--size-12)',\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_field-height': 'var(--size-10)',\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_field-height': 'var(--size-8)',\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\nexport const TEXTAREA_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for checkbox and radio (icon + label layout). */\nexport const CONTROL_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the switch toggle control. */\nexport const SWITCH_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-3)',\n    height: 'var(--size-7)',\n    thumbSize: 'var(--size-6)',\n    width: 'var(--size-14)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    height: 'var(--size-5)',\n    thumbSize: 'var(--size-4)',\n    width: 'var(--size-9)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the slider track/thumb. */\nexport const SLIDER_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    height: 'calc(var(--size-5) - var(--size-1))',\n    size: 'var(--size-5)',\n  },\n  md: {\n    fontSize: 'var(--text-base)',\n    height: 'var(--size-3)',\n    size: 'var(--size-5)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    height: 'var(--size-2)',\n    size: 'var(--size-4)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for the message composer card. Padding is symmetric (unlike\n * `TEXTAREA_SIZE_PRESET`'s field-shaped padding) since this scales a card that wraps a field\n * *and* a toolbar row, not a bare field — `md`'s padding matches the value the card used before\n * `size` scaled anything, so the default look is unchanged.\n */\nexport const MESSAGE_COMPOSER_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-4)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for `ore-menu`'s floating panel, `ore-menu-item`'s row, and `ore-menu-separator`'s\n * margin. `--_panel-padding`, `--_item-padding`, and `--_separator-margin` are custom pass-through\n * keys (not one of `SizeConfig`'s named slots) since the panel, its items, and its separators each\n * need independently-scaling spacing; `md`'s values match what `menu.css`/`menu-item.css`/\n * `menu-separator.css` hardcoded before `size` was wired up, so the default look is unchanged.\n * `--_font-size`/`--_gap` are inherited by `ore-menu-item` from `ore-menu`'s own host — custom\n * properties cascade down through light-DOM children the same way they cascade into a shadow root.\n */\nexport const MENU_SIZE_PRESET = {\n  lg: {\n    '--_item-padding': 'var(--size-2) var(--size-3-5)',\n    '--_panel-padding': 'var(--size-1-5)',\n    '--_separator-margin': 'var(--size-1-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_item-padding': 'var(--size-1-5) var(--size-3)',\n    '--_panel-padding': 'var(--size-1)',\n    '--_separator-margin': 'var(--size-1)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_item-padding': 'var(--size-1) var(--size-2-5)',\n    '--_panel-padding': 'var(--size-0-5)',\n    '--_separator-margin': 'var(--size-0-5)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for `ore-list`'s own host. `ore-list-item` has no `sizeVariantMixin` call of its\n * own — it reads `--_gap`/`--_padding`/`--_padding-inline-end`/`--_font-size`/`--_min-height`/\n * `--_min-height-two-line` inherited straight from its parent `ore-list`'s shadow host (custom\n * properties cascade through light-DOM children the same way `MENU_SIZE_PRESET` cascades from\n * `ore-menu` into `ore-menu-item`), with fallback defaults for standalone use outside an\n * `ore-list`.\n *\n * Follows Material 3's list-item spacing at `md`/`lg`: 16dp between leading/content/trailing\n * (`gap`), 16dp inline-start (`padding`), 24dp inline-end (`--_padding-inline-end` — the trailing\n * edge sits 8dp further out than the other three sides in the M3 spec), 56dp one-line / 72dp\n * two-line row height (`--_min-height`/`--_min-height-two-line`, applied in `list-item.css`).\n * `sm` keeps the same asymmetry and the M3/WCAG 48dp touch-target floor proportionally, for a\n * denser list that still reads as \"M3-like\" rather than hitting the exact dp values M3 doesn't\n * itself define an alternate density for.\n */\nexport const LIST_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-14)',\n    '--_min-height-two-line': 'calc(var(--size-16) + var(--size-2))',\n    '--_padding-inline-end': 'var(--size-6)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-4)',\n    padding: 'var(--size-3) var(--size-4)',\n  },\n  md: {\n    '--_min-height': 'var(--size-14)',\n    '--_min-height-two-line': 'calc(var(--size-16) + var(--size-2))',\n    '--_padding-inline-end': 'var(--size-6)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-4)',\n    padding: 'var(--size-2-5) var(--size-4)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-12)',\n    '--_min-height-two-line': 'var(--size-16)',\n    '--_padding-inline-end': 'var(--size-4)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    padding: 'var(--size-1-5) var(--size-2)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for the file-input dropzone. */\nexport const FILE_INPUT_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-40)',\n    fontSize: 'var(--text-base)',\n  },\n  md: {\n    '--_min-height': 'var(--size-32)',\n    fontSize: 'var(--text-sm)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-28)',\n    fontSize: 'var(--text-xs)',\n  },\n} satisfies FullSizePreset;\n"],"mappings":"AASA,IAAa,EAAoB,CAC/B,GAAI,CACF,kBAAmB,iBACnB,aAAc,kCACd,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,kBAAmB,iBACnB,aAAc,gCACd,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,kBAAmB,gBACnB,aAAc,8BACd,SAAU,iBACV,IAAK,iBACP,CACF,EAEa,EAAuB,CAClC,GAAI,CACF,aAAc,kCACd,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,aAAc,gCACd,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,aAAc,8BACd,SAAU,iBACV,IAAK,iBACP,CACF,EAGa,EAAsB,CACjC,GAAI,CACF,SAAU,mBACV,IAAK,kBACL,KAAM,eACR,EACA,GAAI,CACF,SAAU,iBACV,IAAK,kBACL,KAAM,eACR,CACF,EAGa,EAAqB,CAChC,GAAI,CACF,SAAU,mBACV,IAAK,gBACL,OAAQ,gBACR,UAAW,gBACX,MAAO,gBACT,EACA,GAAI,CACF,SAAU,iBACV,IAAK,gBACL,OAAQ,gBACR,UAAW,gBACX,MAAO,eACT,CACF,EAGa,EAAqB,CAChC,GAAI,CACF,SAAU,mBACV,OAAQ,sCACR,KAAM,eACR,EACA,GAAI,CACF,SAAU,mBACV,OAAQ,gBACR,KAAM,eACR,EACA,GAAI,CACF,SAAU,iBACV,OAAQ,gBACR,KAAM,eACR,CACF,EAQa,EAA+B,CAC1C,GAAI,CACF,aAAc,gBACd,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,aAAc,gBACd,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,aAAc,gBACd,SAAU,iBACV,IAAK,iBACP,CACF,EAWa,EAAmB,CAC9B,GAAI,CACF,kBAAmB,gCACnB,mBAAoB,kBACpB,sBAAuB,kBACvB,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,kBAAmB,gCACnB,mBAAoB,gBACpB,sBAAuB,gBACvB,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,kBAAmB,gCACnB,mBAAoB,kBACpB,sBAAuB,kBACvB,SAAU,iBACV,IAAK,iBACP,CACF,EAkBa,EAAmB,CAC9B,GAAI,CACF,gBAAiB,iBACjB,yBAA0B,uCAC1B,wBAAyB,gBACzB,SAAU,mBACV,IAAK,gBACL,QAAS,6BACX,EACA,GAAI,CACF,gBAAiB,iBACjB,yBAA0B,uCAC1B,wBAAyB,gBACzB,SAAU,iBACV,IAAK,gBACL,QAAS,+BACX,EACA,GAAI,CACF,gBAAiB,iBACjB,yBAA0B,iBAC1B,wBAAyB,gBACzB,SAAU,iBACV,IAAK,gBACL,QAAS,+BACX,CACF,EAGa,EAAyB,CACpC,GAAI,CACF,gBAAiB,iBACjB,SAAU,kBACZ,EACA,GAAI,CACF,gBAAiB,iBACjB,SAAU,gBACZ,EACA,GAAI,CACF,gBAAiB,iBACjB,SAAU,gBACZ,CACF"}
+{"version":3,"file":"size-presets.cjs","names":[],"sources":["../../src/shared/size-presets.ts"],"sourcesContent":["import type { SizeConfig } from '../styles/mixins/shape.css';\nimport type { ComponentSize } from './types';\n\n/** A preset with an entry for every ComponentSize key. */\ntype FullSizePreset = Record<ComponentSize, SizeConfig>;\n\n/** A preset that may omit some ComponentSize keys (sizeVariantMixin fills the gaps with its defaults). */\ntype PartialSizePreset = Partial<Record<ComponentSize, SizeConfig>>;\n\nexport const FIELD_SIZE_PRESET = {\n  lg: {\n    '--_field-height': 'var(--size-12)',\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_field-height': 'var(--size-10)',\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_field-height': 'var(--size-8)',\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\nexport const TEXTAREA_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for checkbox and radio (icon + label layout). */\nexport const CONTROL_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the switch toggle control. */\nexport const SWITCH_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-3)',\n    height: 'var(--size-7)',\n    thumbSize: 'var(--size-6)',\n    width: 'var(--size-14)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    height: 'var(--size-5)',\n    thumbSize: 'var(--size-4)',\n    width: 'var(--size-9)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the slider track/thumb. */\nexport const SLIDER_SIZE_PRESET = {\n  lg: {\n    '--_thumb-inset': 'var(--slider-thumb-inset, var(--size-3))',\n    fontSize: 'var(--text-base)',\n    height: 'calc(var(--size-5) - var(--size-1))',\n    size: 'var(--size-6)',\n  },\n  md: {\n    '--_thumb-inset': 'var(--slider-thumb-inset, var(--size-2-5))',\n    fontSize: 'var(--text-base)',\n    height: 'var(--size-3)',\n    size: 'var(--size-5)',\n  },\n  sm: {\n    '--_thumb-inset': 'var(--slider-thumb-inset, var(--size-2))',\n    fontSize: 'var(--text-xs)',\n    height: 'var(--size-2)',\n    size: 'var(--size-4)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for the message composer card. Padding is symmetric (unlike\n * `TEXTAREA_SIZE_PRESET`'s field-shaped padding) since this scales a card that wraps a field\n * *and* a toolbar row, not a bare field — `md`'s padding matches the value the card used before\n * `size` scaled anything, so the default look is unchanged.\n */\nexport const MESSAGE_COMPOSER_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-4)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for `ore-menu`'s floating panel, `ore-menu-item`'s row, and `ore-menu-separator`'s\n * margin. `--_panel-padding`, `--_item-padding`, and `--_separator-margin` are custom pass-through\n * keys (not one of `SizeConfig`'s named slots) since the panel, its items, and its separators each\n * need independently-scaling spacing; `md`'s values match what `menu.css`/`menu-item.css`/\n * `menu-separator.css` hardcoded before `size` was wired up, so the default look is unchanged.\n * `--_font-size`/`--_gap` are inherited by `ore-menu-item` from `ore-menu`'s own host — custom\n * properties cascade down through light-DOM children the same way they cascade into a shadow root.\n */\nexport const MENU_SIZE_PRESET = {\n  lg: {\n    '--_item-padding': 'var(--size-2) var(--size-3-5)',\n    '--_panel-padding': 'var(--size-1-5)',\n    '--_separator-margin': 'var(--size-1-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_item-padding': 'var(--size-1-5) var(--size-3)',\n    '--_panel-padding': 'var(--size-1)',\n    '--_separator-margin': 'var(--size-1)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_item-padding': 'var(--size-1) var(--size-2-5)',\n    '--_panel-padding': 'var(--size-0-5)',\n    '--_separator-margin': 'var(--size-0-5)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for `ore-list`'s own host. `ore-list-item` has no `sizeVariantMixin` call of its\n * own — it reads `--_gap`/`--_padding`/`--_padding-inline-end`/`--_font-size`/`--_min-height`/\n * `--_min-height-two-line` inherited straight from its parent `ore-list`'s shadow host (custom\n * properties cascade through light-DOM children the same way `MENU_SIZE_PRESET` cascades from\n * `ore-menu` into `ore-menu-item`), with fallback defaults for standalone use outside an\n * `ore-list`.\n *\n * Follows Material 3's list-item spacing at `md`/`lg`: 16dp between leading/content/trailing\n * (`gap`), 16dp inline-start (`padding`), 24dp inline-end (`--_padding-inline-end` — the trailing\n * edge sits 8dp further out than the other three sides in the M3 spec), 56dp one-line / 72dp\n * two-line row height (`--_min-height`/`--_min-height-two-line`, applied in `list-item.css`).\n * `sm` keeps the same asymmetry and the M3/WCAG 48dp touch-target floor proportionally, for a\n * denser list that still reads as \"M3-like\" rather than hitting the exact dp values M3 doesn't\n * itself define an alternate density for.\n */\nexport const LIST_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-14)',\n    '--_min-height-two-line': 'calc(var(--size-16) + var(--size-2))',\n    '--_padding-inline-end': 'var(--size-6)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-4)',\n    padding: 'var(--size-3) var(--size-4)',\n  },\n  md: {\n    '--_min-height': 'var(--size-14)',\n    '--_min-height-two-line': 'calc(var(--size-16) + var(--size-2))',\n    '--_padding-inline-end': 'var(--size-6)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-4)',\n    padding: 'var(--size-2-5) var(--size-4)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-12)',\n    '--_min-height-two-line': 'var(--size-16)',\n    '--_padding-inline-end': 'var(--size-4)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    padding: 'var(--size-1-5) var(--size-2)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for the file-input dropzone. */\nexport const FILE_INPUT_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-40)',\n    fontSize: 'var(--text-base)',\n  },\n  md: {\n    '--_min-height': 'var(--size-32)',\n    fontSize: 'var(--text-sm)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-28)',\n    fontSize: 'var(--text-xs)',\n  },\n} satisfies FullSizePreset;\n"],"mappings":"AASA,IAAa,EAAoB,CAC/B,GAAI,CACF,kBAAmB,iBACnB,aAAc,kCACd,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,kBAAmB,iBACnB,aAAc,gCACd,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,kBAAmB,gBACnB,aAAc,8BACd,SAAU,iBACV,IAAK,iBACP,CACF,EAEa,EAAuB,CAClC,GAAI,CACF,aAAc,kCACd,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,aAAc,gCACd,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,aAAc,8BACd,SAAU,iBACV,IAAK,iBACP,CACF,EAGa,EAAsB,CACjC,GAAI,CACF,SAAU,mBACV,IAAK,kBACL,KAAM,eACR,EACA,GAAI,CACF,SAAU,iBACV,IAAK,kBACL,KAAM,eACR,CACF,EAGa,EAAqB,CAChC,GAAI,CACF,SAAU,mBACV,IAAK,gBACL,OAAQ,gBACR,UAAW,gBACX,MAAO,gBACT,EACA,GAAI,CACF,SAAU,iBACV,IAAK,gBACL,OAAQ,gBACR,UAAW,gBACX,MAAO,eACT,CACF,EAGa,EAAqB,CAChC,GAAI,CACF,iBAAkB,2CAClB,SAAU,mBACV,OAAQ,sCACR,KAAM,eACR,EACA,GAAI,CACF,iBAAkB,6CAClB,SAAU,mBACV,OAAQ,gBACR,KAAM,eACR,EACA,GAAI,CACF,iBAAkB,2CAClB,SAAU,iBACV,OAAQ,gBACR,KAAM,eACR,CACF,EAQa,EAA+B,CAC1C,GAAI,CACF,aAAc,gBACd,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,aAAc,gBACd,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,aAAc,gBACd,SAAU,iBACV,IAAK,iBACP,CACF,EAWa,EAAmB,CAC9B,GAAI,CACF,kBAAmB,gCACnB,mBAAoB,kBACpB,sBAAuB,kBACvB,SAAU,mBACV,IAAK,iBACP,EACA,GAAI,CACF,kBAAmB,gCACnB,mBAAoB,gBACpB,sBAAuB,gBACvB,SAAU,iBACV,IAAK,eACP,EACA,GAAI,CACF,kBAAmB,gCACnB,mBAAoB,kBACpB,sBAAuB,kBACvB,SAAU,iBACV,IAAK,iBACP,CACF,EAkBa,EAAmB,CAC9B,GAAI,CACF,gBAAiB,iBACjB,yBAA0B,uCAC1B,wBAAyB,gBACzB,SAAU,mBACV,IAAK,gBACL,QAAS,6BACX,EACA,GAAI,CACF,gBAAiB,iBACjB,yBAA0B,uCAC1B,wBAAyB,gBACzB,SAAU,iBACV,IAAK,gBACL,QAAS,+BACX,EACA,GAAI,CACF,gBAAiB,iBACjB,yBAA0B,iBAC1B,wBAAyB,gBACzB,SAAU,iBACV,IAAK,gBACL,QAAS,+BACX,CACF,EAGa,EAAyB,CACpC,GAAI,CACF,gBAAiB,iBACjB,SAAU,kBACZ,EACA,GAAI,CACF,gBAAiB,iBACjB,SAAU,gBACZ,EACA,GAAI,CACF,gBAAiB,iBACjB,SAAU,gBACZ,CACF"}

package/dist/shared/size-presets.d.ts

@@ -68,16 +68,19 @@ export declare const SWITCH_SIZE_PRESET: {
 /** Shared size preset for the slider track/thumb. */
 export declare const SLIDER_SIZE_PRESET: {
     lg: {
+        '--_thumb-inset': string;
         fontSize: string;
         height: string;
         size: string;
     };
     md: {
+        '--_thumb-inset': string;
         fontSize: string;
         height: string;
         size: string;
     };
     sm: {
+        '--_thumb-inset': string;
         fontSize: string;
         height: string;
         size: string;

package/dist/shared/size-presets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"size-presets.d.ts","sourceRoot":"","sources":["../../src/shared/size-presets.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAmBJ,CAAC;AAE3B,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;CAgBP,CAAC;AAE3B,uEAAuE;AACvE,eAAO,MAAM,mBAAmB;;;;;;;;;;;CAWH,CAAC;AAE9B,wDAAwD;AACxD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;CAeF,CAAC;AAE9B,qDAAqD;AACrD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;CAgBL,CAAC;AAE3B;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;CAgBf,CAAC;AAE3B;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;CAsBH,CAAC;AAE3B;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBH,CAAC;AAE3B,sDAAsD;AACtD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;CAaT,CAAC"}
+{"version":3,"file":"size-presets.d.ts","sourceRoot":"","sources":["../../src/shared/size-presets.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAmBJ,CAAC;AAE3B,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;CAgBP,CAAC;AAE3B,uEAAuE;AACvE,eAAO,MAAM,mBAAmB;;;;;;;;;;;CAWH,CAAC;AAE9B,wDAAwD;AACxD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;CAeF,CAAC;AAE9B,qDAAqD;AACrD,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;CAmBL,CAAC;AAE3B;;;;;GAKG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;CAgBf,CAAC;AAE3B;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;CAsBH,CAAC;AAE3B;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBH,CAAC;AAE3B,sDAAsD;AACtD,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;CAaT,CAAC"}

package/dist/shared/size-presets.js

@@ -62,16 +62,19 @@ var e = {
 	}
 }, i = {
 	lg: {
+		"--_thumb-inset": "var(--slider-thumb-inset, var(--size-3))",
 		fontSize: "var(--text-base)",
 		height: "calc(var(--size-5) - var(--size-1))",
-		size: "var(--size-5)"
+		size: "var(--size-6)"
 	},
 	md: {
+		"--_thumb-inset": "var(--slider-thumb-inset, var(--size-2-5))",
 		fontSize: "var(--text-base)",
 		height: "var(--size-3)",
 		size: "var(--size-5)"
 	},
 	sm: {
+		"--_thumb-inset": "var(--slider-thumb-inset, var(--size-2))",
 		fontSize: "var(--text-xs)",
 		height: "var(--size-2)",
 		size: "var(--size-4)"

package/dist/shared/size-presets.js.map

@@ -1 +1 @@
-{"version":3,"file":"size-presets.js","names":[],"sources":["../../src/shared/size-presets.ts"],"sourcesContent":["import type { SizeConfig } from '../styles/mixins/shape.css';\nimport type { ComponentSize } from './types';\n\n/** A preset with an entry for every ComponentSize key. */\ntype FullSizePreset = Record<ComponentSize, SizeConfig>;\n\n/** A preset that may omit some ComponentSize keys (sizeVariantMixin fills the gaps with its defaults). */\ntype PartialSizePreset = Partial<Record<ComponentSize, SizeConfig>>;\n\nexport const FIELD_SIZE_PRESET = {\n  lg: {\n    '--_field-height': 'var(--size-12)',\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_field-height': 'var(--size-10)',\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_field-height': 'var(--size-8)',\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\nexport const TEXTAREA_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for checkbox and radio (icon + label layout). */\nexport const CONTROL_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the switch toggle control. */\nexport const SWITCH_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-3)',\n    height: 'var(--size-7)',\n    thumbSize: 'var(--size-6)',\n    width: 'var(--size-14)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    height: 'var(--size-5)',\n    thumbSize: 'var(--size-4)',\n    width: 'var(--size-9)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the slider track/thumb. */\nexport const SLIDER_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    height: 'calc(var(--size-5) - var(--size-1))',\n    size: 'var(--size-5)',\n  },\n  md: {\n    fontSize: 'var(--text-base)',\n    height: 'var(--size-3)',\n    size: 'var(--size-5)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    height: 'var(--size-2)',\n    size: 'var(--size-4)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for the message composer card. Padding is symmetric (unlike\n * `TEXTAREA_SIZE_PRESET`'s field-shaped padding) since this scales a card that wraps a field\n * *and* a toolbar row, not a bare field — `md`'s padding matches the value the card used before\n * `size` scaled anything, so the default look is unchanged.\n */\nexport const MESSAGE_COMPOSER_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-4)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for `ore-menu`'s floating panel, `ore-menu-item`'s row, and `ore-menu-separator`'s\n * margin. `--_panel-padding`, `--_item-padding`, and `--_separator-margin` are custom pass-through\n * keys (not one of `SizeConfig`'s named slots) since the panel, its items, and its separators each\n * need independently-scaling spacing; `md`'s values match what `menu.css`/`menu-item.css`/\n * `menu-separator.css` hardcoded before `size` was wired up, so the default look is unchanged.\n * `--_font-size`/`--_gap` are inherited by `ore-menu-item` from `ore-menu`'s own host — custom\n * properties cascade down through light-DOM children the same way they cascade into a shadow root.\n */\nexport const MENU_SIZE_PRESET = {\n  lg: {\n    '--_item-padding': 'var(--size-2) var(--size-3-5)',\n    '--_panel-padding': 'var(--size-1-5)',\n    '--_separator-margin': 'var(--size-1-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_item-padding': 'var(--size-1-5) var(--size-3)',\n    '--_panel-padding': 'var(--size-1)',\n    '--_separator-margin': 'var(--size-1)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_item-padding': 'var(--size-1) var(--size-2-5)',\n    '--_panel-padding': 'var(--size-0-5)',\n    '--_separator-margin': 'var(--size-0-5)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for `ore-list`'s own host. `ore-list-item` has no `sizeVariantMixin` call of its\n * own — it reads `--_gap`/`--_padding`/`--_padding-inline-end`/`--_font-size`/`--_min-height`/\n * `--_min-height-two-line` inherited straight from its parent `ore-list`'s shadow host (custom\n * properties cascade through light-DOM children the same way `MENU_SIZE_PRESET` cascades from\n * `ore-menu` into `ore-menu-item`), with fallback defaults for standalone use outside an\n * `ore-list`.\n *\n * Follows Material 3's list-item spacing at `md`/`lg`: 16dp between leading/content/trailing\n * (`gap`), 16dp inline-start (`padding`), 24dp inline-end (`--_padding-inline-end` — the trailing\n * edge sits 8dp further out than the other three sides in the M3 spec), 56dp one-line / 72dp\n * two-line row height (`--_min-height`/`--_min-height-two-line`, applied in `list-item.css`).\n * `sm` keeps the same asymmetry and the M3/WCAG 48dp touch-target floor proportionally, for a\n * denser list that still reads as \"M3-like\" rather than hitting the exact dp values M3 doesn't\n * itself define an alternate density for.\n */\nexport const LIST_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-14)',\n    '--_min-height-two-line': 'calc(var(--size-16) + var(--size-2))',\n    '--_padding-inline-end': 'var(--size-6)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-4)',\n    padding: 'var(--size-3) var(--size-4)',\n  },\n  md: {\n    '--_min-height': 'var(--size-14)',\n    '--_min-height-two-line': 'calc(var(--size-16) + var(--size-2))',\n    '--_padding-inline-end': 'var(--size-6)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-4)',\n    padding: 'var(--size-2-5) var(--size-4)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-12)',\n    '--_min-height-two-line': 'var(--size-16)',\n    '--_padding-inline-end': 'var(--size-4)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    padding: 'var(--size-1-5) var(--size-2)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for the file-input dropzone. */\nexport const FILE_INPUT_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-40)',\n    fontSize: 'var(--text-base)',\n  },\n  md: {\n    '--_min-height': 'var(--size-32)',\n    fontSize: 'var(--text-sm)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-28)',\n    fontSize: 'var(--text-xs)',\n  },\n} satisfies FullSizePreset;\n"],"mappings":";AASA,IAAa,IAAoB;CAC/B,IAAI;EACF,mBAAmB;EACnB,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,cAAc;EACd,UAAU;EACV,KAAK;CACP;AACF,GAEa,IAAuB;CAClC,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;AACF,GAGa,IAAsB;CACjC,IAAI;EACF,UAAU;EACV,KAAK;EACL,MAAM;CACR;CACA,IAAI;EACF,UAAU;EACV,KAAK;EACL,MAAM;CACR;AACF,GAGa,IAAqB;CAChC,IAAI;EACF,UAAU;EACV,KAAK;EACL,QAAQ;EACR,WAAW;EACX,OAAO;CACT;CACA,IAAI;EACF,UAAU;EACV,KAAK;EACL,QAAQ;EACR,WAAW;EACX,OAAO;CACT;AACF,GAGa,IAAqB;CAChC,IAAI;EACF,UAAU;EACV,QAAQ;EACR,MAAM;CACR;CACA,IAAI;EACF,UAAU;EACV,QAAQ;EACR,MAAM;CACR;CACA,IAAI;EACF,UAAU;EACV,QAAQ;EACR,MAAM;CACR;AACF,GAQa,IAA+B;CAC1C,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;AACF,GAWa,IAAmB;CAC9B,IAAI;EACF,mBAAmB;EACnB,oBAAoB;EACpB,uBAAuB;EACvB,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,oBAAoB;EACpB,uBAAuB;EACvB,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,oBAAoB;EACpB,uBAAuB;EACvB,UAAU;EACV,KAAK;CACP;AACF,GAkBa,IAAmB;CAC9B,IAAI;EACF,iBAAiB;EACjB,0BAA0B;EAC1B,yBAAyB;EACzB,UAAU;EACV,KAAK;EACL,SAAS;CACX;CACA,IAAI;EACF,iBAAiB;EACjB,0BAA0B;EAC1B,yBAAyB;EACzB,UAAU;EACV,KAAK;EACL,SAAS;CACX;CACA,IAAI;EACF,iBAAiB;EACjB,0BAA0B;EAC1B,yBAAyB;EACzB,UAAU;EACV,KAAK;EACL,SAAS;CACX;AACF,GAGa,IAAyB;CACpC,IAAI;EACF,iBAAiB;EACjB,UAAU;CACZ;CACA,IAAI;EACF,iBAAiB;EACjB,UAAU;CACZ;CACA,IAAI;EACF,iBAAiB;EACjB,UAAU;CACZ;AACF"}
+{"version":3,"file":"size-presets.js","names":[],"sources":["../../src/shared/size-presets.ts"],"sourcesContent":["import type { SizeConfig } from '../styles/mixins/shape.css';\nimport type { ComponentSize } from './types';\n\n/** A preset with an entry for every ComponentSize key. */\ntype FullSizePreset = Record<ComponentSize, SizeConfig>;\n\n/** A preset that may omit some ComponentSize keys (sizeVariantMixin fills the gaps with its defaults). */\ntype PartialSizePreset = Partial<Record<ComponentSize, SizeConfig>>;\n\nexport const FIELD_SIZE_PRESET = {\n  lg: {\n    '--_field-height': 'var(--size-12)',\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_field-height': 'var(--size-10)',\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_field-height': 'var(--size-8)',\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\nexport const TEXTAREA_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-2-5) var(--size-3-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-1-5) var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-1) var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for checkbox and radio (icon + label layout). */\nexport const CONTROL_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the switch toggle control. */\nexport const SWITCH_SIZE_PRESET = {\n  lg: {\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-3)',\n    height: 'var(--size-7)',\n    thumbSize: 'var(--size-6)',\n    width: 'var(--size-14)',\n  },\n  sm: {\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    height: 'var(--size-5)',\n    thumbSize: 'var(--size-4)',\n    width: 'var(--size-9)',\n  },\n} satisfies PartialSizePreset;\n\n/** Shared size preset for the slider track/thumb. */\nexport const SLIDER_SIZE_PRESET = {\n  lg: {\n    '--_thumb-inset': 'var(--slider-thumb-inset, var(--size-3))',\n    fontSize: 'var(--text-base)',\n    height: 'calc(var(--size-5) - var(--size-1))',\n    size: 'var(--size-6)',\n  },\n  md: {\n    '--_thumb-inset': 'var(--slider-thumb-inset, var(--size-2-5))',\n    fontSize: 'var(--text-base)',\n    height: 'var(--size-3)',\n    size: 'var(--size-5)',\n  },\n  sm: {\n    '--_thumb-inset': 'var(--slider-thumb-inset, var(--size-2))',\n    fontSize: 'var(--text-xs)',\n    height: 'var(--size-2)',\n    size: 'var(--size-4)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for the message composer card. Padding is symmetric (unlike\n * `TEXTAREA_SIZE_PRESET`'s field-shaped padding) since this scales a card that wraps a field\n * *and* a toolbar row, not a bare field — `md`'s padding matches the value the card used before\n * `size` scaled anything, so the default look is unchanged.\n */\nexport const MESSAGE_COMPOSER_SIZE_PRESET = {\n  lg: {\n    '--_padding': 'var(--size-4)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_padding': 'var(--size-3)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_padding': 'var(--size-2)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for `ore-menu`'s floating panel, `ore-menu-item`'s row, and `ore-menu-separator`'s\n * margin. `--_panel-padding`, `--_item-padding`, and `--_separator-margin` are custom pass-through\n * keys (not one of `SizeConfig`'s named slots) since the panel, its items, and its separators each\n * need independently-scaling spacing; `md`'s values match what `menu.css`/`menu-item.css`/\n * `menu-separator.css` hardcoded before `size` was wired up, so the default look is unchanged.\n * `--_font-size`/`--_gap` are inherited by `ore-menu-item` from `ore-menu`'s own host — custom\n * properties cascade down through light-DOM children the same way they cascade into a shadow root.\n */\nexport const MENU_SIZE_PRESET = {\n  lg: {\n    '--_item-padding': 'var(--size-2) var(--size-3-5)',\n    '--_panel-padding': 'var(--size-1-5)',\n    '--_separator-margin': 'var(--size-1-5)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n  },\n  md: {\n    '--_item-padding': 'var(--size-1-5) var(--size-3)',\n    '--_panel-padding': 'var(--size-1)',\n    '--_separator-margin': 'var(--size-1)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n  },\n  sm: {\n    '--_item-padding': 'var(--size-1) var(--size-2-5)',\n    '--_panel-padding': 'var(--size-0-5)',\n    '--_separator-margin': 'var(--size-0-5)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n  },\n} satisfies FullSizePreset;\n\n/**\n * Size preset for `ore-list`'s own host. `ore-list-item` has no `sizeVariantMixin` call of its\n * own — it reads `--_gap`/`--_padding`/`--_padding-inline-end`/`--_font-size`/`--_min-height`/\n * `--_min-height-two-line` inherited straight from its parent `ore-list`'s shadow host (custom\n * properties cascade through light-DOM children the same way `MENU_SIZE_PRESET` cascades from\n * `ore-menu` into `ore-menu-item`), with fallback defaults for standalone use outside an\n * `ore-list`.\n *\n * Follows Material 3's list-item spacing at `md`/`lg`: 16dp between leading/content/trailing\n * (`gap`), 16dp inline-start (`padding`), 24dp inline-end (`--_padding-inline-end` — the trailing\n * edge sits 8dp further out than the other three sides in the M3 spec), 56dp one-line / 72dp\n * two-line row height (`--_min-height`/`--_min-height-two-line`, applied in `list-item.css`).\n * `sm` keeps the same asymmetry and the M3/WCAG 48dp touch-target floor proportionally, for a\n * denser list that still reads as \"M3-like\" rather than hitting the exact dp values M3 doesn't\n * itself define an alternate density for.\n */\nexport const LIST_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-14)',\n    '--_min-height-two-line': 'calc(var(--size-16) + var(--size-2))',\n    '--_padding-inline-end': 'var(--size-6)',\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-4)',\n    padding: 'var(--size-3) var(--size-4)',\n  },\n  md: {\n    '--_min-height': 'var(--size-14)',\n    '--_min-height-two-line': 'calc(var(--size-16) + var(--size-2))',\n    '--_padding-inline-end': 'var(--size-6)',\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-4)',\n    padding: 'var(--size-2-5) var(--size-4)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-12)',\n    '--_min-height-two-line': 'var(--size-16)',\n    '--_padding-inline-end': 'var(--size-4)',\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-2)',\n    padding: 'var(--size-1-5) var(--size-2)',\n  },\n} satisfies FullSizePreset;\n\n/** Shared size preset for the file-input dropzone. */\nexport const FILE_INPUT_SIZE_PRESET = {\n  lg: {\n    '--_min-height': 'var(--size-40)',\n    fontSize: 'var(--text-base)',\n  },\n  md: {\n    '--_min-height': 'var(--size-32)',\n    fontSize: 'var(--text-sm)',\n  },\n  sm: {\n    '--_min-height': 'var(--size-28)',\n    fontSize: 'var(--text-xs)',\n  },\n} satisfies FullSizePreset;\n"],"mappings":";AASA,IAAa,IAAoB;CAC/B,IAAI;EACF,mBAAmB;EACnB,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,cAAc;EACd,UAAU;EACV,KAAK;CACP;AACF,GAEa,IAAuB;CAClC,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;AACF,GAGa,IAAsB;CACjC,IAAI;EACF,UAAU;EACV,KAAK;EACL,MAAM;CACR;CACA,IAAI;EACF,UAAU;EACV,KAAK;EACL,MAAM;CACR;AACF,GAGa,IAAqB;CAChC,IAAI;EACF,UAAU;EACV,KAAK;EACL,QAAQ;EACR,WAAW;EACX,OAAO;CACT;CACA,IAAI;EACF,UAAU;EACV,KAAK;EACL,QAAQ;EACR,WAAW;EACX,OAAO;CACT;AACF,GAGa,IAAqB;CAChC,IAAI;EACF,kBAAkB;EAClB,UAAU;EACV,QAAQ;EACR,MAAM;CACR;CACA,IAAI;EACF,kBAAkB;EAClB,UAAU;EACV,QAAQ;EACR,MAAM;CACR;CACA,IAAI;EACF,kBAAkB;EAClB,UAAU;EACV,QAAQ;EACR,MAAM;CACR;AACF,GAQa,IAA+B;CAC1C,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,cAAc;EACd,UAAU;EACV,KAAK;CACP;AACF,GAWa,IAAmB;CAC9B,IAAI;EACF,mBAAmB;EACnB,oBAAoB;EACpB,uBAAuB;EACvB,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,oBAAoB;EACpB,uBAAuB;EACvB,UAAU;EACV,KAAK;CACP;CACA,IAAI;EACF,mBAAmB;EACnB,oBAAoB;EACpB,uBAAuB;EACvB,UAAU;EACV,KAAK;CACP;AACF,GAkBa,IAAmB;CAC9B,IAAI;EACF,iBAAiB;EACjB,0BAA0B;EAC1B,yBAAyB;EACzB,UAAU;EACV,KAAK;EACL,SAAS;CACX;CACA,IAAI;EACF,iBAAiB;EACjB,0BAA0B;EAC1B,yBAAyB;EACzB,UAAU;EACV,KAAK;EACL,SAAS;CACX;CACA,IAAI;EACF,iBAAiB;EACjB,0BAA0B;EAC1B,yBAAyB;EACzB,UAAU;EACV,KAAK;EACL,SAAS;CACX;AACF,GAGa,IAAyB;CACpC,IAAI;EACF,iBAAiB;EACjB,UAAU;CACZ;CACA,IAAI;EACF,iBAAiB;EACjB,UAAU;CACZ;CACA,IAAI;EACF,iBAAiB;EACjB,UAAU;CACZ;AACF"}

package/dist/sidebar.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./utils/link.cjs"),n=require("./layout/sidebar/sidebar-group.css.cjs"),r=require("./layout/sidebar/sidebar-item.css.cjs"),i=require("./layout/sidebar/sidebar.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple"),s=require("@vielzeug/ore/observers");var c=e=>{let t=String(e??``).trim();if(!t)return;let n=/max-width\s*:\s*([0-9]+(?:\.[0-9]+)?)px/i.exec(t);if(!n)return;let r=Number.parseFloat(n[1]);return Number.isFinite(r)?r:void 0},l=e=>{let t=e.parentElement;for(;t?.tagName.toLowerCase()===`ore-grid-item`;)t=t.parentElement;return t},u=e=>{let t=l(e)?.clientWidth??0;return t>0?t:e.offsetWidth},d=(0,a.createContext)(`SidebarContext`),f=`ore-sidebar`;(0,a.define)(f,{props:{"bottom-nav-at":a.prop.string(),collapsed:a.prop.bool(!1),collapsible:a.prop.bool(!1),"container-breakpoints":a.prop.bool(!1),"default-collapsed":a.prop.bool(!1),label:a.prop.string(`Sidebar navigation`),responsive:a.prop.string(),variant:a.prop.string()},setup(e){let t=(0,a.getHost)(),n=(0,a.useEmit)(),r=(0,a.useSlots)(),i=()=>r.has(`header`).value,f=()=>r.has(`footer`).value,p=()=>r.has(`logo`).value,m=(0,o.signal)(t.hasAttribute(`collapsed`)),h=(0,o.signal)(m.value?t.hasAttribute(`collapsed`):e[`default-collapsed`].value),g=(0,o.signal)(!1),_=(0,o.signal)(!1),v=(0,o.signal)([]),y=(0,o.signal)(!1),b=(0,o.signal)(!1),x=(0,o.signal)(c(e.responsive.value)),S=(0,o.signal)(!!String(e.responsive.value??``).trim()),C=(0,o.signal)(!1),w=(0,o.signal)(!1),T=(0,o.signal)(c(e[`bottom-nav-at`].value)),E=(0,o.signal)(!1),D=()=>h.value,O=(0,o.computed)(()=>g.value?`bottom-nav`:h.value?`collapsed`:`default`),k=()=>{let t=e[`container-breakpoints`].value,n=t?b.value:y.value||b.value,r=t?w.value:C.value||w.value;_.value||(g.value=r),!r&&!_.value&&M(!1,`responsive`),S.value&&j(n,`responsive`)},A=()=>{let e=r.elements().value.filter(e=>e instanceof HTMLElement&&e.tagName.toLowerCase()===`ore-sidebar-item`).map((e,t)=>{let n=e.querySelector(`:scope > [slot="icon"]`)??e.querySelector(`[slot="icon"]`),r=n?.tagName.toLowerCase()===`ore-icon`?n.getAttribute(`name`):null,i=n?.querySelector(`ore-icon`)?.getAttribute(`name`)??null,a=(e.textContent??``).trim();return{active:e.hasAttribute(`active`),disabled:e.hasAttribute(`disabled`),href:e.getAttribute(`href`)??void 0,iconName:r??i??void 0,label:a||`Item ${t+1}`,source:e}});v.value=e};(0,a.provide)(d,{collapsed:(0,o.computed)(()=>!g.value&&h.value),mobileOpen:(0,o.computed)(()=>g.value&&_.value),mode:O,variant:e.variant});let j=(e,t)=>{D()!==e&&(m.value||(h.value=e),n(`collapsed-change`,{collapsed:e,source:t}))},M=(e,t)=>{let r=!!e;if(r&&!g.value&&(g.value=!0),!g.value&&!r){_.value&&=!1;return}_.value!==r&&(_.value=r,r||k(),n(`mobile-open-change`,{open:r,source:t}))},N=()=>{j(!D(),`toggle`)},P=t;return P.setCollapsed=e=>j(!!e,`api`),P.toggle=N,P.openMobile=()=>M(!0,`api`),P.closeMobile=()=>M(!1,`api`),P.toggleMobile=()=>M(!_.value,`toggle`),(0,a.bind)({attr:{"data-bottom-nav":()=>g.value?!0:void 0,"data-collapsed":()=>D()&&!g.value?!0:void 0,"data-mobile-open":()=>g.value&&_.value?!0:void 0,"data-preview-mode":()=>E.value?!0:void 0}}),(0,a.onMounted)(()=>{t.setAttribute(`data-no-transition`,``);let n=!1,i=()=>{n||(n=!0,t.removeAttribute(`data-no-transition`))};requestAnimationFrame(()=>requestAnimationFrame(i));let a,d,f=new Map,p=new MutationObserver(()=>{!t.hasAttribute(`collapsed`)&&!m.value||(m.value=!0,h.value=t.hasAttribute(`collapsed`))});p.observe(t,{attributeFilter:[`collapsed`],attributes:!0}),(0,o.watch)(e.responsive,n=>{a?.(),a=void 0;let r=String(n??``).trim();S.value=!!r,x.value=c(r),y.value=!1;let i=u(t);if(b.value=i>0&&x.value!=null?i<=x.value:!1,k(),e[`container-breakpoints`].value&&x.value!=null||!r||typeof window.matchMedia!=`function`)return;let o=window.matchMedia(r),s=e=>{y.value=e.matches,k()};y.value=o.matches,k(),o.addEventListener(`change`,s),a=()=>{o.removeEventListener(`change`,s)}},{immediate:!0}),(0,o.watch)(e[`bottom-nav-at`],n=>{d?.(),d=void 0;let r=String(n??``).trim();T.value=c(r),C.value=!1;let i=u(t);if(w.value=i>0&&T.value!=null?i<=T.value:!1,k(),e[`container-breakpoints`].value&&T.value!=null||!r||typeof window.matchMedia!=`function`)return;let a=window.matchMedia(r),o=e=>{C.value=e.matches,k()};C.value=a.matches,k(),a.addEventListener(`change`,o),d=()=>{a.removeEventListener(`change`,o)}},{immediate:!0});let _=typeof ResizeObserver==`function`?(()=>{let e=(0,s.resizeObserver)(t),n=t.parentElement,r=l(t),a=n?(0,s.resizeObserver)(n):void 0,c=r&&r!==n?(0,s.resizeObserver)(r):void 0,d;return(0,o.watch)((0,o.computed)(()=>[e.value.width,e.value.height,a?.value.width,a?.value.height,c?.value.width,c?.value.height]),()=>{d!==void 0&&cancelAnimationFrame(d),d=requestAnimationFrame(()=>{let e=l(t),n=u(t),r=b.value,a=w.value,o=e?.clientWidth??0;E.value=o>0&&o<window.innerWidth,b.value=n>0&&x.value!=null?n<=x.value:!1,w.value=n>0&&T.value!=null?n<=T.value:!1,(r!==b.value||a!==w.value)&&k(),i()})})})():void 0,v=e=>{let t=new Set(e);for(let[e,n]of f)t.has(e)||(n.disconnect(),f.delete(e));for(let t of e){if(f.has(t))continue;let e=new MutationObserver(()=>{g.value&&A()});e.observe(t,{attributeFilter:[`active`,`disabled`,`href`],attributes:!0}),f.set(t,e)}};return(0,o.watch)(r.elements(),e=>{let t=e.filter(e=>e instanceof HTMLElement&&e.tagName.toLowerCase()===`ore-sidebar-item`);v(t),A()},{immediate:!0}),()=>{p.disconnect(),a?.(),d?.(),_?.dispose();for(let e of f.values())e.disconnect();f.clear()}}),a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./utils/link.cjs"),n=require("./layout/sidebar/sidebar-group.css.cjs"),r=require("./layout/sidebar/sidebar-item.css.cjs"),i=require("./layout/sidebar/sidebar.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple"),s=require("@vielzeug/ripple/watch");var c=e=>{let t=String(e??``).trim();if(!t)return;let n=/max-width\s*:\s*([0-9]+(?:\.[0-9]+)?)px/i.exec(t);if(!n)return;let r=Number.parseFloat(n[1]);return Number.isFinite(r)?r:void 0},l=e=>{let t=e.parentElement;for(;t?.tagName.toLowerCase()===`ore-grid-item`;)t=t.parentElement;return t},u=e=>{let t=l(e)?.clientWidth??0;return t>0?t:e.offsetWidth},d=(0,a.createContext)(`SidebarContext`),f=`ore-sidebar`;(0,a.define)(f,{props:{"bottom-nav-at":a.prop.string(),collapsed:a.prop.bool(!1),collapsible:a.prop.bool(!1),"container-breakpoints":a.prop.bool(!1),"default-collapsed":a.prop.bool(!1),label:a.prop.string(`Sidebar navigation`),responsive:a.prop.string(),variant:a.prop.string()},setup(e){let t=(0,a.getHost)(),n=(0,a.useEmit)(),r=(0,a.useSlots)(),i=()=>r.has(`header`).value,f=()=>r.has(`footer`).value,p=()=>r.has(`logo`).value,m=(0,o.signal)(t.hasAttribute(`collapsed`)),h=(0,o.signal)(m.value?t.hasAttribute(`collapsed`):e[`default-collapsed`].value),g=(0,o.signal)(!1),_=(0,o.signal)(!1),v=(0,o.signal)([]),y=(0,o.signal)(!1),b=(0,o.signal)(!1),x=(0,o.signal)(c(e.responsive.value)),S=(0,o.signal)(!!String(e.responsive.value??``).trim()),C=(0,o.signal)(!1),w=(0,o.signal)(!1),T=(0,o.signal)(c(e[`bottom-nav-at`].value)),E=(0,o.signal)(!1),D=()=>h.value,O=(0,o.computed)(()=>g.value?`bottom-nav`:h.value?`collapsed`:`default`),k=()=>{let t=e[`container-breakpoints`].value,n=t?b.value:y.value||b.value,r=t?w.value:C.value||w.value;_.value||(g.value=r),!r&&!_.value&&M(!1,`responsive`),S.value&&j(n,`responsive`)},A=()=>{let e=r.elements().value.filter(e=>e instanceof HTMLElement&&e.tagName.toLowerCase()===`ore-sidebar-item`).map((e,t)=>{let n=e.querySelector(`:scope > [slot="icon"]`)??e.querySelector(`[slot="icon"]`),r=n?.tagName.toLowerCase()===`ore-icon`?n.getAttribute(`name`):null,i=n?.querySelector(`ore-icon`)?.getAttribute(`name`)??null,a=(e.textContent??``).trim();return{active:e.hasAttribute(`active`),disabled:e.hasAttribute(`disabled`),href:e.getAttribute(`href`)??void 0,iconName:r??i??void 0,label:a||`Item ${t+1}`,source:e}});v.value=e};(0,a.provide)(d,{collapsed:(0,o.computed)(()=>!g.value&&h.value),mobileOpen:(0,o.computed)(()=>g.value&&_.value),mode:O,variant:e.variant});let j=(e,t)=>{D()!==e&&(m.value||(h.value=e),n(`collapsed-change`,{collapsed:e,source:t}))},M=(e,t)=>{let r=!!e;if(r&&!g.value&&(g.value=!0),!g.value&&!r){_.value&&=!1;return}_.value!==r&&(_.value=r,r||k(),n(`mobile-open-change`,{open:r,source:t}))},N=()=>{j(!D(),`toggle`)},P=t;return P.setCollapsed=e=>j(!!e,`api`),P.toggle=N,P.openMobile=()=>M(!0,`api`),P.closeMobile=()=>M(!1,`api`),P.toggleMobile=()=>M(!_.value,`toggle`),(0,a.bind)({attr:{"data-bottom-nav":()=>g.value?!0:void 0,"data-collapsed":()=>D()&&!g.value?!0:void 0,"data-mobile-open":()=>g.value&&_.value?!0:void 0,"data-preview-mode":()=>E.value?!0:void 0}}),(0,a.onMounted)(()=>{t.setAttribute(`data-no-transition`,``);let n=!1,i=()=>{n||(n=!0,t.removeAttribute(`data-no-transition`))};requestAnimationFrame(()=>requestAnimationFrame(i));let d,f,p=new Map,_=new MutationObserver(()=>{!t.hasAttribute(`collapsed`)&&!m.value||(m.value=!0,h.value=t.hasAttribute(`collapsed`))});_.observe(t,{attributeFilter:[`collapsed`],attributes:!0}),(0,s.watch)(e.responsive,n=>{d?.(),d=void 0;let r=String(n??``).trim();S.value=!!r,x.value=c(r),y.value=!1;let i=u(t);if(b.value=i>0&&x.value!=null&&i<=x.value,k(),e[`container-breakpoints`].value&&x.value!=null||!r||typeof window.matchMedia!=`function`)return;let a=window.matchMedia(r),o=e=>{y.value=e.matches,k()};y.value=a.matches,k(),a.addEventListener(`change`,o),d=()=>{a.removeEventListener(`change`,o)}},{immediate:!0}),(0,s.watch)(e[`bottom-nav-at`],n=>{f?.(),f=void 0;let r=String(n??``).trim();T.value=c(r),C.value=!1;let i=u(t);if(w.value=i>0&&T.value!=null&&i<=T.value,k(),e[`container-breakpoints`].value&&T.value!=null||!r||typeof window.matchMedia!=`function`)return;let a=window.matchMedia(r),o=e=>{C.value=e.matches,k()};C.value=a.matches,k(),a.addEventListener(`change`,o),f=()=>{a.removeEventListener(`change`,o)}},{immediate:!0});let v=typeof ResizeObserver==`function`?(()=>{let e=(0,a.resizeObserver)(t),n=t.parentElement,r=l(t),c=n?(0,a.resizeObserver)(n):void 0,d=r&&r!==n?(0,a.resizeObserver)(r):void 0,f;return(0,s.watch)((0,o.computed)(()=>[e.value.width,e.value.height,c?.value.width,c?.value.height,d?.value.width,d?.value.height]),()=>{f!==void 0&&cancelAnimationFrame(f),f=requestAnimationFrame(()=>{let e=l(t),n=u(t),r=b.value,a=w.value,o=e?.clientWidth??0;E.value=o>0&&o<window.innerWidth,b.value=n>0&&x.value!=null&&n<=x.value,w.value=n>0&&T.value!=null&&n<=T.value,(r!==b.value||a!==w.value)&&k(),i()})})})():void 0,D=e=>{let t=new Set(e);for(let[e,n]of p)t.has(e)||(n.disconnect(),p.delete(e));for(let t of e){if(p.has(t))continue;let e=new MutationObserver(()=>{g.value&&A()});e.observe(t,{attributeFilter:[`active`,`disabled`,`href`],attributes:!0}),p.set(t,e)}};return(0,s.watch)(r.elements(),e=>{let t=e.filter(e=>e instanceof HTMLElement&&e.tagName.toLowerCase()===`ore-sidebar-item`);D(t),A()},{immediate:!0}),()=>{_.disconnect(),d?.(),f?.(),v?.dispose();for(let e of p.values())e.disconnect();p.clear()}}),a.html`
       <button
         class="mobile-backdrop"
         part="mobile-backdrop"
@@ -43,7 +43,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                   aria-current="${e.active?`page`:null}"
                   data-active="${e.active?`true`:null}">
                   <span class="bottom-tab-icon" aria-hidden="true" ?hidden=${()=>!e.iconName}>
-                    <ore-icon :name="${e.iconName}" size="18" stroke-width="2"></ore-icon>
+                    <ore-icon name="${e.iconName}" size="18" stroke-width="2"></ore-icon>
                   </span>
                   <span class="bottom-tab-label">${e.label}</span>
                 </a>
@@ -56,14 +56,14 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
                 data-active="${e.active?`true`:null}"
                 @click=${()=>e.source.click()}>
                 <span class="bottom-tab-icon" aria-hidden="true" ?hidden=${()=>!e.iconName}>
-                  <ore-icon :name="${e.iconName}" size="18" stroke-width="2"></ore-icon>
+                  <ore-icon name="${e.iconName}" size="18" stroke-width="2"></ore-icon>
                 </span>
                 <span class="bottom-tab-label">${e.label}</span>
               </button>
             `})}
       </div>
-    `},styles:[e.coarsePointerMixin,e.reducedMotionMixin,i.default]});var p=`ore-sidebar-group`;(0,a.define)(p,{props:{collapsible:a.prop.bool(!1),"default-open":a.prop.bool(!0),label:a.prop.string(),open:{default:void 0,parse:e=>e==null?void 0:e===``||e===`true`,reflect:!1}},setup(e){let t=(0,a.useSlots)(),n=()=>t.has(`icon`).value,r=(0,a.inject)(d);(0,a.bind)({attr:{"sidebar-bottom-nav":()=>r?.mode.value===`bottom-nav`&&!r?.mobileOpen.value?!0:void 0,"sidebar-collapsed":()=>r?.collapsed.value?!0:void 0}});let i=()=>e.open.value!==void 0,s=(0,o.signal)(e[`default-open`].value),c=(0,o.computed)(()=>e.collapsible.value?i()?e.open.value??!1:s.value:!0);return(0,o.watch)(e.open,e=>{e!==void 0&&(s.value=e)}),(0,a.bind)({attr:{open:()=>c.value?!0:void 0}}),a.html`
-      <details class="group" part="group" ?open=${c}>
+    `},styles:[e.coarsePointerMixin,e.reducedMotionMixin,i.default]});var p=`ore-sidebar-group`;(0,a.define)(p,{props:{collapsible:a.prop.bool(!1),"default-open":a.prop.bool(!0),label:a.prop.string(),open:{default:void 0,parse:e=>e==null?void 0:e===``||e===`true`,reflect:!1}},setup(e){let t=(0,a.useSlots)(),n=()=>t.has(`icon`).value,r=(0,a.inject)(d);(0,a.bind)({attr:{"sidebar-bottom-nav":()=>r?.mode.value===`bottom-nav`&&!r?.mobileOpen.value||void 0,"sidebar-collapsed":()=>r?.collapsed.value?!0:void 0}});let i=()=>e.open.value!==void 0,c=(0,o.signal)(e[`default-open`].value),l=(0,o.computed)(()=>e.collapsible.value?i()?e.open.value??!1:c.value:!0);return(0,s.watch)(e.open,e=>{e!==void 0&&(c.value=e)}),(0,a.bind)({attr:{open:()=>l.value?!0:void 0}}),a.html`
+      <details class="group" part="group" ?open=${l}>
         <summary
           class="group-header"
           part="group-header"
@@ -81,7 +81,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           <slot></slot>
         </div>
       </details>
-    `},styles:[e.reducedMotionMixin,n.default]});var m=`ore-sidebar-item`;(0,a.define)(m,{props:{active:a.prop.bool(!1),disabled:a.prop.bool(!1),href:a.prop.string(),rel:a.prop.string(),target:a.prop.string()},setup(e){let n=(0,a.useSlots)(),r=()=>n.has(`icon`).value,i=()=>n.has(`end`).value,s=(0,a.inject)(d);(0,a.bind)({attr:{"sidebar-bottom-nav":()=>s?.mode.value===`bottom-nav`&&!s?.mobileOpen.value?!0:void 0,"sidebar-collapsed":()=>s?.collapsed.value?!0:void 0}});let c=()=>!!e.href.value&&!e.disabled.value,l=(0,o.computed)(()=>t.computeSafeRel(e.rel.value,e.target.value)),u=()=>a.html`
+    `},styles:[e.reducedMotionMixin,n.default]});var m=`ore-sidebar-item`;(0,a.define)(m,{props:{active:a.prop.bool(!1),disabled:a.prop.bool(!1),href:a.prop.string(),rel:a.prop.string(),target:a.prop.string()},setup(e){let n=(0,a.useSlots)(),r=()=>n.has(`icon`).value,i=()=>n.has(`end`).value,s=(0,a.inject)(d);(0,a.bind)({attr:{"sidebar-bottom-nav":()=>s?.mode.value===`bottom-nav`&&!s?.mobileOpen.value||void 0,"sidebar-collapsed":()=>s?.collapsed.value?!0:void 0}});let c=()=>!!e.href.value&&!e.disabled.value,l=(0,o.computed)(()=>t.computeSafeRel(e.rel.value,e.target.value)),u=()=>a.html`
       <span class="item-icon" part="item-icon" ?hidden=${()=>!r()} aria-hidden="true">
         <slot name="icon"></slot>
       </span>
@@ -95,8 +95,8 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               class="item"
               part="item"
               href="${e.href}"
-              :rel="${l}"
-              :target="${e.target}"
+              rel="${l}"
+              target="${e.target}"
               aria-current="${()=>e.active.value?`page`:null}">
               ${u()}
             </a>