@vielzeug/refine 1.1.1

package/dist/styles/mixins/shape.css.cjs

@@ -0,0 +1,66 @@
+let e=require("@vielzeug/ore");var t=e.css`
+  /* ========================================
+     Padding Variants
+     ======================================== */
+
+  :host([padding='none']) {
+    --_padding: var(--size-0);
+  }
+
+  :host([padding='sm']) {
+    --_padding: var(--size-3);
+  }
+
+  :host([padding='md']) {
+    --_padding: var(--size-4);
+  }
+
+  :host([padding='lg']) {
+    --_padding: var(--size-6);
+  }
+
+  :host([padding='xl']) {
+    --_padding: var(--size-8);
+  }
+`,n=e.css`
+  :host([rounded='none']) {
+    --_radius: var(--rounded-none);
+  }
+  :host([rounded='sm']) {
+    --_radius: var(--rounded-sm);
+  }
+  :host([rounded='md']) {
+    --_radius: var(--rounded-md);
+  }
+  :host([rounded='lg']) {
+    --_radius: var(--rounded-lg);
+  }
+  :host([rounded='xl']) {
+    --_radius: var(--rounded-xl);
+  }
+  :host([rounded='2xl']) {
+    --_radius: var(--rounded-2xl);
+  }
+  :host([rounded='3xl']) {
+    --_radius: var(--rounded-3xl);
+  }
+  :host([rounded='full']),
+  :host([rounded='']) {
+    --_radius: var(--rounded-full);
+  }
+`,r={fontSize:`--_font-size`,gap:`--_gap`,height:`--_height`,iconSize:`--_icon-size`,lineHeight:`--_line-height`,padding:`--_padding`,size:`--_size`,thumbSize:`--_thumb-size`,width:`--_width`},i=e=>Object.entries(e).filter(([,e])=>e!==void 0).map(([e,t])=>`${e.startsWith(`--`)?e:r[e]??`--_${e}`}: ${t};`).join(`
+        `),a=t=>{let n=i({fontSize:`var(--text-xs)`,gap:`var(--size-1-5)`,size:`var(--size-4)`,...t?.sm}),r=i({fontSize:`var(--text-sm)`,gap:`var(--size-2)`,size:`var(--size-5)`,...t?.md});return e.css`
+    :host {
+      ${r}
+    }
+    :host([size='sm']) {
+      ${n}
+    }
+    :host([size='md']) {
+      ${r}
+    }
+    :host([size='lg']) {
+      ${i({fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,size:`var(--size-6)`,...t?.lg})}
+    }
+  `};exports.paddingMixin=t,exports.roundedVariantMixin=n,exports.sizeVariantMixin=a;
+//# sourceMappingURL=shape.css.cjs.map

package/dist/styles/mixins/shape.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.css.cjs","names":[],"sources":["../../../src/styles/mixins/shape.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Padding ───────────────────────────────────────────────────────────────────\n\n/**\n * Padding Variant Mixin\n *\n * Provides padding size variants (none, sm, md, lg, xl) via CSS custom properties.\n * Sets the --_padding variable based on padding attribute.\n *\n * @example\n * ```ts\n * import { paddingMixin } from '../../styles';\n *\n * return {\n *   styles: [paddingMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const paddingMixin = css`\n  /* ========================================\n     Padding Variants\n     ======================================== */\n\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n`;\n\n// ── Rounded ───────────────────────────────────────────────────────────────────\n\n/**\n * Rounded Variant Mixin\n *\n * Shared border-radius variant styles for components.\n * Maps rounded attribute values to theme border radius tokens.\n *\n * @example\n * ```ts\n * import { roundedVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [roundedVariantMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const roundedVariantMixin = css`\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none);\n  }\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n  :host([rounded='full']),\n  :host([rounded='']) {\n    --_radius: var(--rounded-full);\n  }\n`;\n\n// ── Size Variants ─────────────────────────────────────────────────────────────\n\n/**\n * Size Variant Mixin\n *\n * Injects the three standard size tiers (sm / md / lg) as CSS custom property\n * blocks on `:host([size=\"…\"])`. Per-component overrides are supplied as a raw\n * CSS string for each tier and are appended after the shared defaults.\n *\n * All property names use the `--_` internal convention already established by\n * other mixins. The mapping is:\n *\n * | Config key   | CSS custom property  |\n * |------------- |----------------------|\n * | fontSize     | --_font-size         |\n * | gap          | --_gap               |\n * | height       | --_height            |\n * | iconSize     | --_icon-size         |\n * | lineHeight   | --_line-height       |\n * | padding      | --_padding           |\n * | size         | --_size              |\n * | thumbSize    | --_thumb-size        |\n * | width        | --_width             |\n * | --foo        | --foo (pass-through) |\n *\n * @example\n * ```ts\n * styles: [\n *   sizeVariantMixin({\n *     sm: { height: 'var(--size-8)', padding: 'var(--size-1-5) var(--size-3)' },\n *     lg: { height: 'var(--size-12)', padding: 'var(--size-2-5) var(--size-5)' },\n *   }),\n *   componentStyles,\n * ]\n * ```\n */\nexport type SizeConfig = {\n  /** Arbitrary CSS custom properties (must start with --) */\n  [key: `--${string}`]: string | undefined;\n  /** Font size — maps to --_font-size */\n  fontSize?: string;\n  /** Gap between elements — maps to --_gap */\n  gap?: string;\n  /** Element height — maps to --_height */\n  height?: string;\n  /** Icon size — maps to --_icon-size */\n  iconSize?: string;\n  /** Line height — maps to --_line-height */\n  lineHeight?: string;\n  /** Internal padding — maps to --_padding */\n  padding?: string;\n  /** Element size (width/height) — maps to --_size */\n  size?: string;\n  /** Thumb size (e.g. toggle/switch thumb) — maps to --_thumb-size */\n  thumbSize?: string;\n  /** Element width — maps to --_width */\n  width?: string;\n};\n\nconst PROP_MAP: Record<string, string> = {\n  fontSize: '--_font-size',\n  gap: '--_gap',\n  height: '--_height',\n  iconSize: '--_icon-size',\n  lineHeight: '--_line-height',\n  padding: '--_padding',\n  size: '--_size',\n  thumbSize: '--_thumb-size',\n  width: '--_width',\n};\n\nconst configToBlock = (config: SizeConfig): string =>\n  Object.entries(config)\n    .filter(([, v]) => v !== undefined)\n    .map(([k, v]) => `${k.startsWith('--') ? k : (PROP_MAP[k] ?? `--_${k}`)}: ${v};`)\n    .join('\\n        ');\n\nexport const sizeVariantMixin = (config?: { lg?: SizeConfig; md?: SizeConfig; sm?: SizeConfig }) => {\n  const sm = configToBlock({\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n    ...config?.sm,\n  });\n  const md = configToBlock({\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n    size: 'var(--size-5)',\n    ...config?.md,\n  });\n  const lg = configToBlock({\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n    ...config?.lg,\n  });\n\n  return css`\n    :host {\n      ${md}\n    }\n    :host([size='sm']) {\n      ${sm}\n    }\n    :host([size='md']) {\n      ${md}\n    }\n    :host([size='lg']) {\n      ${lg}\n    }\n  `;\n};\n"],"mappings":"+BAoBA,IAAa,EAAe,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;EA4ClB,EAAsB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;EAuFhC,EAAmC,CACvC,SAAU,eACV,IAAK,SACL,OAAQ,YACR,SAAU,eACV,WAAY,iBACZ,QAAS,aACT,KAAM,UACN,UAAW,gBACX,MAAO,UACT,EAEM,EAAiB,GACrB,OAAO,QAAQ,CAAM,CAAC,CACnB,QAAQ,EAAG,KAAO,IAAM,IAAA,EAAS,CAAC,CAClC,KAAK,CAAC,EAAG,KAAO,GAAG,EAAE,WAAW,IAAI,EAAI,EAAK,EAAS,IAAM,MAAM,IAAK,IAAI,EAAE,EAAE,CAAC,CAChF,KAAK;SAAY,EAET,EAAoB,GAAmE,CAClG,IAAM,EAAK,EAAc,CACvB,SAAU,iBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EACK,EAAK,EAAc,CACvB,SAAU,iBACV,IAAK,gBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAAC,EAQD,MAAO,GAAA,GAAG;;QAEJ,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;;QAfE,EAAc,CACvB,SAAU,mBACV,IAAK,kBACL,KAAM,gBACN,GAAG,GAAQ,EACb,CAaM,EAAG;;GAGX"}

package/dist/styles/mixins/shape.css.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Padding Variant Mixin
+ *
+ * Provides padding size variants (none, sm, md, lg, xl) via CSS custom properties.
+ * Sets the --_padding variable based on padding attribute.
+ *
+ * @example
+ * ```ts
+ * import { paddingMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [paddingMixin, componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const paddingMixin: import("@vielzeug/ore").CSSResult;
+/**
+ * Rounded Variant Mixin
+ *
+ * Shared border-radius variant styles for components.
+ * Maps rounded attribute values to theme border radius tokens.
+ *
+ * @example
+ * ```ts
+ * import { roundedVariantMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [roundedVariantMixin, componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const roundedVariantMixin: import("@vielzeug/ore").CSSResult;
+/**
+ * Size Variant Mixin
+ *
+ * Injects the three standard size tiers (sm / md / lg) as CSS custom property
+ * blocks on `:host([size="…"])`. Per-component overrides are supplied as a raw
+ * CSS string for each tier and are appended after the shared defaults.
+ *
+ * All property names use the `--_` internal convention already established by
+ * other mixins. The mapping is:
+ *
+ * | Config key   | CSS custom property  |
+ * |------------- |----------------------|
+ * | fontSize     | --_font-size         |
+ * | gap          | --_gap               |
+ * | height       | --_height            |
+ * | iconSize     | --_icon-size         |
+ * | lineHeight   | --_line-height       |
+ * | padding      | --_padding           |
+ * | size         | --_size              |
+ * | thumbSize    | --_thumb-size        |
+ * | width        | --_width             |
+ * | --foo        | --foo (pass-through) |
+ *
+ * @example
+ * ```ts
+ * styles: [
+ *   sizeVariantMixin({
+ *     sm: { height: 'var(--size-8)', padding: 'var(--size-1-5) var(--size-3)' },
+ *     lg: { height: 'var(--size-12)', padding: 'var(--size-2-5) var(--size-5)' },
+ *   }),
+ *   componentStyles,
+ * ]
+ * ```
+ */
+export type SizeConfig = {
+    /** Arbitrary CSS custom properties (must start with --) */
+    [key: `--${string}`]: string | undefined;
+    /** Font size — maps to --_font-size */
+    fontSize?: string;
+    /** Gap between elements — maps to --_gap */
+    gap?: string;
+    /** Element height — maps to --_height */
+    height?: string;
+    /** Icon size — maps to --_icon-size */
+    iconSize?: string;
+    /** Line height — maps to --_line-height */
+    lineHeight?: string;
+    /** Internal padding — maps to --_padding */
+    padding?: string;
+    /** Element size (width/height) — maps to --_size */
+    size?: string;
+    /** Thumb size (e.g. toggle/switch thumb) — maps to --_thumb-size */
+    thumbSize?: string;
+    /** Element width — maps to --_width */
+    width?: string;
+};
+export declare const sizeVariantMixin: (config?: {
+    lg?: SizeConfig;
+    md?: SizeConfig;
+    sm?: SizeConfig;
+}) => import("@vielzeug/ore").CSSResult;
+//# sourceMappingURL=shape.css.d.ts.map

package/dist/styles/mixins/shape.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/shape.css.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,mCAwBxB,CAAC;AAIF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,mBAAmB,mCA0B/B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,2DAA2D;IAC3D,CAAC,GAAG,EAAE,KAAK,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,CAAC;IACzC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAoBF,eAAO,MAAM,gBAAgB,GAAI,SAAS;IAAE,EAAE,CAAC,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,UAAU,CAAA;CAAE,sCAkC9F,CAAC"}

package/dist/styles/mixins/shape.css.js

@@ -0,0 +1,98 @@
+import { css as e } from "@vielzeug/ore";
+//#region src/styles/mixins/shape.css.ts
+var t = e`
+  /* ========================================
+     Padding Variants
+     ======================================== */
+
+  :host([padding='none']) {
+    --_padding: var(--size-0);
+  }
+
+  :host([padding='sm']) {
+    --_padding: var(--size-3);
+  }
+
+  :host([padding='md']) {
+    --_padding: var(--size-4);
+  }
+
+  :host([padding='lg']) {
+    --_padding: var(--size-6);
+  }
+
+  :host([padding='xl']) {
+    --_padding: var(--size-8);
+  }
+`, n = e`
+  :host([rounded='none']) {
+    --_radius: var(--rounded-none);
+  }
+  :host([rounded='sm']) {
+    --_radius: var(--rounded-sm);
+  }
+  :host([rounded='md']) {
+    --_radius: var(--rounded-md);
+  }
+  :host([rounded='lg']) {
+    --_radius: var(--rounded-lg);
+  }
+  :host([rounded='xl']) {
+    --_radius: var(--rounded-xl);
+  }
+  :host([rounded='2xl']) {
+    --_radius: var(--rounded-2xl);
+  }
+  :host([rounded='3xl']) {
+    --_radius: var(--rounded-3xl);
+  }
+  :host([rounded='full']),
+  :host([rounded='']) {
+    --_radius: var(--rounded-full);
+  }
+`, r = {
+	fontSize: "--_font-size",
+	gap: "--_gap",
+	height: "--_height",
+	iconSize: "--_icon-size",
+	lineHeight: "--_line-height",
+	padding: "--_padding",
+	size: "--_size",
+	thumbSize: "--_thumb-size",
+	width: "--_width"
+}, i = (e) => Object.entries(e).filter(([, e]) => e !== void 0).map(([e, t]) => `${e.startsWith("--") ? e : r[e] ?? `--_${e}`}: ${t};`).join("\n        "), a = (t) => {
+	let n = i({
+		fontSize: "var(--text-xs)",
+		gap: "var(--size-1-5)",
+		size: "var(--size-4)",
+		...t?.sm
+	}), r = i({
+		fontSize: "var(--text-sm)",
+		gap: "var(--size-2)",
+		size: "var(--size-5)",
+		...t?.md
+	});
+	return e`
+    :host {
+      ${r}
+    }
+    :host([size='sm']) {
+      ${n}
+    }
+    :host([size='md']) {
+      ${r}
+    }
+    :host([size='lg']) {
+      ${i({
+		fontSize: "var(--text-base)",
+		gap: "var(--size-2-5)",
+		size: "var(--size-6)",
+		...t?.lg
+	})}
+    }
+  `;
+};
+//#endregion
+export { t as paddingMixin, n as roundedVariantMixin, a as sizeVariantMixin };
+
+//# sourceMappingURL=shape.css.js.map

package/dist/styles/mixins/shape.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.css.js","names":[],"sources":["../../../src/styles/mixins/shape.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n// ── Padding ───────────────────────────────────────────────────────────────────\n\n/**\n * Padding Variant Mixin\n *\n * Provides padding size variants (none, sm, md, lg, xl) via CSS custom properties.\n * Sets the --_padding variable based on padding attribute.\n *\n * @example\n * ```ts\n * import { paddingMixin } from '../../styles';\n *\n * return {\n *   styles: [paddingMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const paddingMixin = css`\n  /* ========================================\n     Padding Variants\n     ======================================== */\n\n  :host([padding='none']) {\n    --_padding: var(--size-0);\n  }\n\n  :host([padding='sm']) {\n    --_padding: var(--size-3);\n  }\n\n  :host([padding='md']) {\n    --_padding: var(--size-4);\n  }\n\n  :host([padding='lg']) {\n    --_padding: var(--size-6);\n  }\n\n  :host([padding='xl']) {\n    --_padding: var(--size-8);\n  }\n`;\n\n// ── Rounded ───────────────────────────────────────────────────────────────────\n\n/**\n * Rounded Variant Mixin\n *\n * Shared border-radius variant styles for components.\n * Maps rounded attribute values to theme border radius tokens.\n *\n * @example\n * ```ts\n * import { roundedVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [roundedVariantMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const roundedVariantMixin = css`\n  :host([rounded='none']) {\n    --_radius: var(--rounded-none);\n  }\n  :host([rounded='sm']) {\n    --_radius: var(--rounded-sm);\n  }\n  :host([rounded='md']) {\n    --_radius: var(--rounded-md);\n  }\n  :host([rounded='lg']) {\n    --_radius: var(--rounded-lg);\n  }\n  :host([rounded='xl']) {\n    --_radius: var(--rounded-xl);\n  }\n  :host([rounded='2xl']) {\n    --_radius: var(--rounded-2xl);\n  }\n  :host([rounded='3xl']) {\n    --_radius: var(--rounded-3xl);\n  }\n  :host([rounded='full']),\n  :host([rounded='']) {\n    --_radius: var(--rounded-full);\n  }\n`;\n\n// ── Size Variants ─────────────────────────────────────────────────────────────\n\n/**\n * Size Variant Mixin\n *\n * Injects the three standard size tiers (sm / md / lg) as CSS custom property\n * blocks on `:host([size=\"…\"])`. Per-component overrides are supplied as a raw\n * CSS string for each tier and are appended after the shared defaults.\n *\n * All property names use the `--_` internal convention already established by\n * other mixins. The mapping is:\n *\n * | Config key   | CSS custom property  |\n * |------------- |----------------------|\n * | fontSize     | --_font-size         |\n * | gap          | --_gap               |\n * | height       | --_height            |\n * | iconSize     | --_icon-size         |\n * | lineHeight   | --_line-height       |\n * | padding      | --_padding           |\n * | size         | --_size              |\n * | thumbSize    | --_thumb-size        |\n * | width        | --_width             |\n * | --foo        | --foo (pass-through) |\n *\n * @example\n * ```ts\n * styles: [\n *   sizeVariantMixin({\n *     sm: { height: 'var(--size-8)', padding: 'var(--size-1-5) var(--size-3)' },\n *     lg: { height: 'var(--size-12)', padding: 'var(--size-2-5) var(--size-5)' },\n *   }),\n *   componentStyles,\n * ]\n * ```\n */\nexport type SizeConfig = {\n  /** Arbitrary CSS custom properties (must start with --) */\n  [key: `--${string}`]: string | undefined;\n  /** Font size — maps to --_font-size */\n  fontSize?: string;\n  /** Gap between elements — maps to --_gap */\n  gap?: string;\n  /** Element height — maps to --_height */\n  height?: string;\n  /** Icon size — maps to --_icon-size */\n  iconSize?: string;\n  /** Line height — maps to --_line-height */\n  lineHeight?: string;\n  /** Internal padding — maps to --_padding */\n  padding?: string;\n  /** Element size (width/height) — maps to --_size */\n  size?: string;\n  /** Thumb size (e.g. toggle/switch thumb) — maps to --_thumb-size */\n  thumbSize?: string;\n  /** Element width — maps to --_width */\n  width?: string;\n};\n\nconst PROP_MAP: Record<string, string> = {\n  fontSize: '--_font-size',\n  gap: '--_gap',\n  height: '--_height',\n  iconSize: '--_icon-size',\n  lineHeight: '--_line-height',\n  padding: '--_padding',\n  size: '--_size',\n  thumbSize: '--_thumb-size',\n  width: '--_width',\n};\n\nconst configToBlock = (config: SizeConfig): string =>\n  Object.entries(config)\n    .filter(([, v]) => v !== undefined)\n    .map(([k, v]) => `${k.startsWith('--') ? k : (PROP_MAP[k] ?? `--_${k}`)}: ${v};`)\n    .join('\\n        ');\n\nexport const sizeVariantMixin = (config?: { lg?: SizeConfig; md?: SizeConfig; sm?: SizeConfig }) => {\n  const sm = configToBlock({\n    fontSize: 'var(--text-xs)',\n    gap: 'var(--size-1-5)',\n    size: 'var(--size-4)',\n    ...config?.sm,\n  });\n  const md = configToBlock({\n    fontSize: 'var(--text-sm)',\n    gap: 'var(--size-2)',\n    size: 'var(--size-5)',\n    ...config?.md,\n  });\n  const lg = configToBlock({\n    fontSize: 'var(--text-base)',\n    gap: 'var(--size-2-5)',\n    size: 'var(--size-6)',\n    ...config?.lg,\n  });\n\n  return css`\n    :host {\n      ${md}\n    }\n    :host([size='sm']) {\n      ${sm}\n    }\n    :host([size='md']) {\n      ${md}\n    }\n    :host([size='lg']) {\n      ${lg}\n    }\n  `;\n};\n"],"mappings":";;AAoBA,IAAa,IAAe,CAAG;;;;;;;;;;;;;;;;;;;;;;;;GA4ClB,IAAsB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;GAuFhC,IAAmC;CACvC,UAAU;CACV,KAAK;CACL,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,SAAS;CACT,MAAM;CACN,WAAW;CACX,OAAO;AACT,GAEM,KAAiB,MACrB,OAAO,QAAQ,CAAM,CAAC,CACnB,QAAQ,GAAG,OAAO,MAAM,KAAA,CAAS,CAAC,CAClC,KAAK,CAAC,GAAG,OAAO,GAAG,EAAE,WAAW,IAAI,IAAI,IAAK,EAAS,MAAM,MAAM,IAAK,IAAI,EAAE,EAAE,CAAC,CAChF,KAAK,YAAY,GAET,KAAoB,MAAmE;CAClG,IAAM,IAAK,EAAc;EACvB,UAAU;EACV,KAAK;EACL,MAAM;EACN,GAAG,GAAQ;CACb,CAAC,GACK,IAAK,EAAc;EACvB,UAAU;EACV,KAAK;EACL,MAAM;EACN,GAAG,GAAQ;CACb,CAAC;CAQD,OAAO,CAAG;;QAEJ,EAAG;;;QAGH,EAAG;;;QAGH,EAAG;;;QAfE,EAAc;EACvB,UAAU;EACV,KAAK;EACL,MAAM;EACN,GAAG,GAAQ;CACb,CAaM,EAAG;;;AAGX"}

package/dist/styles/mixins/states.css.cjs

@@ -0,0 +1,37 @@
+let e=require("@vielzeug/ore");var t=e.css`
+  :host([disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) ::slotted(*),
+  :host([disabled]) > :not(slot) {
+    pointer-events: none;
+  }
+`;e.css`
+  :host([loading]) {
+    opacity: 0.5;
+    cursor: wait;
+  }
+
+  :host([loading]) ::slotted(*),
+  :host([loading]) > :not(slot) {
+    pointer-events: none;
+  }
+`;var n=e.css`
+  :host([disabled]),
+  :host([loading]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :host([loading]) {
+    cursor: wait;
+  }
+
+  :host([disabled]) > :not(slot),
+  :host([loading]) > :not(slot) {
+    pointer-events: none;
+  }
+`;exports.disabledLoadingMixin=n,exports.disabledStateMixin=t;
+//# sourceMappingURL=states.css.cjs.map

package/dist/styles/mixins/states.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"states.css.cjs","names":[],"sources":["../../../src/styles/mixins/states.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Disabled State Mixin\n *\n * Reduces opacity and shows `not-allowed` cursor on the host.\n * `pointer-events: none` is placed on the inner slot so the host stays\n * hoverable (e.g. for tooltips that explain why the control is disabled).\n */\nexport const disabledStateMixin = css`\n  :host([disabled]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) ::slotted(*),\n  :host([disabled]) > :not(slot) {\n    pointer-events: none;\n  }\n`;\n\n/**\n * Loading State Mixin\n *\n * Shows `wait` cursor on the host; blocks pointer events on inner content.\n */\nexport const loadingStateMixin = css`\n  :host([loading]) {\n    opacity: 0.5;\n    cursor: wait;\n  }\n\n  :host([loading]) ::slotted(*),\n  :host([loading]) > :not(slot) {\n    pointer-events: none;\n  }\n`;\n\n/**\n * Combined Disabled & Loading State Mixin\n *\n * Convenience mixin combining both disabled and loading host states.\n * Use for most interactive components that support both attributes.\n *\n * - Host receives the correct cursor (not-allowed / wait) and remains\n *   hoverable so external tooltip wrappers can still fire pointer events.\n * - Inner shadow-DOM children have pointer-events disabled so they refuse\n *   clicks while the host cursor signal is still visible.\n */\nexport const disabledLoadingMixin = css`\n  :host([disabled]),\n  :host([loading]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  :host([loading]) {\n    cursor: wait;\n  }\n\n  :host([disabled]) > :not(slot),\n  :host([loading]) > :not(slot) {\n    pointer-events: none;\n  }\n`;\n"],"mappings":"+BASA,IAAa,EAAqB,EAAA,GAAG;;;;;;;;;;EAiBJ,EAAA,GAAG;;;;;;;;;;EAuBpC,IAAa,EAAuB,EAAA,GAAG"}

package/dist/styles/mixins/states.css.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Disabled State Mixin
+ *
+ * Reduces opacity and shows `not-allowed` cursor on the host.
+ * `pointer-events: none` is placed on the inner slot so the host stays
+ * hoverable (e.g. for tooltips that explain why the control is disabled).
+ */
+export declare const disabledStateMixin: import("@vielzeug/ore").CSSResult;
+/**
+ * Loading State Mixin
+ *
+ * Shows `wait` cursor on the host; blocks pointer events on inner content.
+ */
+export declare const loadingStateMixin: import("@vielzeug/ore").CSSResult;
+/**
+ * Combined Disabled & Loading State Mixin
+ *
+ * Convenience mixin combining both disabled and loading host states.
+ * Use for most interactive components that support both attributes.
+ *
+ * - Host receives the correct cursor (not-allowed / wait) and remains
+ *   hoverable so external tooltip wrappers can still fire pointer events.
+ * - Inner shadow-DOM children have pointer-events disabled so they refuse
+ *   clicks while the host cursor signal is still visible.
+ */
+export declare const disabledLoadingMixin: import("@vielzeug/ore").CSSResult;
+//# sourceMappingURL=states.css.d.ts.map

package/dist/styles/mixins/states.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"states.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/states.css.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,mCAU9B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,mCAU7B,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,oBAAoB,mCAehC,CAAC"}

package/dist/styles/mixins/states.css.js

@@ -0,0 +1,44 @@
+import { css as e } from "@vielzeug/ore";
+//#region src/styles/mixins/states.css.ts
+var t = e`
+  :host([disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :host([disabled]) ::slotted(*),
+  :host([disabled]) > :not(slot) {
+    pointer-events: none;
+  }
+`;
+e`
+  :host([loading]) {
+    opacity: 0.5;
+    cursor: wait;
+  }
+
+  :host([loading]) ::slotted(*),
+  :host([loading]) > :not(slot) {
+    pointer-events: none;
+  }
+`;
+var n = e`
+  :host([disabled]),
+  :host([loading]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :host([loading]) {
+    cursor: wait;
+  }
+
+  :host([disabled]) > :not(slot),
+  :host([loading]) > :not(slot) {
+    pointer-events: none;
+  }
+`;
+//#endregion
+export { n as disabledLoadingMixin, t as disabledStateMixin };
+
+//# sourceMappingURL=states.css.js.map

package/dist/styles/mixins/states.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"states.css.js","names":[],"sources":["../../../src/styles/mixins/states.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Disabled State Mixin\n *\n * Reduces opacity and shows `not-allowed` cursor on the host.\n * `pointer-events: none` is placed on the inner slot so the host stays\n * hoverable (e.g. for tooltips that explain why the control is disabled).\n */\nexport const disabledStateMixin = css`\n  :host([disabled]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  :host([disabled]) ::slotted(*),\n  :host([disabled]) > :not(slot) {\n    pointer-events: none;\n  }\n`;\n\n/**\n * Loading State Mixin\n *\n * Shows `wait` cursor on the host; blocks pointer events on inner content.\n */\nexport const loadingStateMixin = css`\n  :host([loading]) {\n    opacity: 0.5;\n    cursor: wait;\n  }\n\n  :host([loading]) ::slotted(*),\n  :host([loading]) > :not(slot) {\n    pointer-events: none;\n  }\n`;\n\n/**\n * Combined Disabled & Loading State Mixin\n *\n * Convenience mixin combining both disabled and loading host states.\n * Use for most interactive components that support both attributes.\n *\n * - Host receives the correct cursor (not-allowed / wait) and remains\n *   hoverable so external tooltip wrappers can still fire pointer events.\n * - Inner shadow-DOM children have pointer-events disabled so they refuse\n *   clicks while the host cursor signal is still visible.\n */\nexport const disabledLoadingMixin = css`\n  :host([disabled]),\n  :host([loading]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  :host([loading]) {\n    cursor: wait;\n  }\n\n  :host([disabled]) > :not(slot),\n  :host([loading]) > :not(slot) {\n    pointer-events: none;\n  }\n`;\n"],"mappings":";;AASA,IAAa,IAAqB,CAAG;;;;;;;;;;;AAiBJ,CAAG;;;;;;;;;;;AAuBpC,IAAa,IAAuB,CAAG"}

package/dist/styles/mixins/table-base.css.cjs

@@ -0,0 +1,94 @@
+let e=require("@vielzeug/ore");var t=t=>e.css`
+  @layer refine.base {
+    :host {
+      /* ── Public token API ─────────────────────────────────────────────── */
+      --_bg: var(--${t}-bg, var(--color-canvas));
+      --_border-color: var(--${t}-border-color, var(--color-contrast-200));
+      --_radius: var(--${t}-radius, var(--rounded-xl));
+      --_header-bg: var(--${t}-header-bg, var(--color-contrast-50));
+      --_accent: var(--${t}-accent, var(--color-neutral-focus));
+      --_row-hover-bg: var(--${t}-row-hover-bg, color-mix(in oklch, var(--_accent) 6%, transparent));
+      --_stripe-bg: var(--${t}-stripe-bg, color-mix(in oklch, var(--color-contrast-900) 3%, transparent));
+      --_cell-padding-x: var(--${t}-cell-padding-x, var(--size-3));
+      --_cell-padding-y: var(--${t}-cell-padding-y, var(--size-2-5));
+      --_font-size: var(--${t}-font-size, var(--text-sm));
+
+      display: block;
+      overflow: hidden;
+      background: var(--_bg);
+      border: var(--border) solid var(--_border-color);
+      border-radius: var(--_radius);
+      box-shadow: var(--${t}-shadow, var(--shadow-sm));
+    }
+
+    /* ── Scroll wrapper ─────────────────────────────────────────────────── */
+
+    .scroll-container {
+      overflow: auto;
+      max-height: var(--${t}-max-height, none);
+    }
+
+    /* ── Native table ───────────────────────────────────────────────────── */
+
+    table {
+      width: 100%;
+      font-size: var(--_font-size);
+      table-layout: auto;
+      border-collapse: collapse;
+      background: var(--_bg);
+    }
+
+    /* ── Loading state ──────────────────────────────────────────────────── */
+
+    :host([loading]) .scroll-container {
+      opacity: 0.5;
+      pointer-events: none;
+      cursor: wait;
+    }
+  }
+
+  @layer refine.variants {
+    /* Bordered */
+    :host([bordered]) {
+      overflow: hidden;
+      border: var(--border) solid var(--_border-color);
+      border-radius: var(--_radius);
+      box-shadow: var(--shadow-xs);
+    }
+
+    :host([bordered]) .scroll-container {
+      border-radius: inherit;
+      clip-path: inset(0 round var(--_radius));
+    }
+
+    /* Sticky header */
+    :host([sticky]) .scroll-container {
+      max-height: var(--${t}-sticky-max-height, 24rem);
+      overflow-y: auto;
+    }
+  }
+
+  @layer refine.density {
+    :host([density='compact']) {
+      --_cell-padding-x: var(--size-2);
+      --_cell-padding-y: var(--size-1-5);
+    }
+
+    :host([density='cozy']) {
+      --_cell-padding-x: var(--size-3);
+      --_cell-padding-y: var(--size-2-5);
+    }
+
+    :host([density='comfortable']) {
+      --_cell-padding-x: var(--size-4);
+      --_cell-padding-y: var(--size-3-5);
+    }
+  }
+
+  @layer refine.overrides {
+    :host([fullwidth]) {
+      width: 100%;
+    }
+  }
+`;exports.tableBaseMixin=t;
+//# sourceMappingURL=table-base.css.cjs.map

package/dist/styles/mixins/table-base.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-base.css.cjs","names":[],"sources":["../../../src/styles/mixins/table-base.css.ts"],"sourcesContent":["import { css } from '@vielzeug/ore';\n\n/**\n * Table Base Mixin\n *\n * Shared structural foundation for table-like components (`ore-table`, `ore-datagrid`).\n * Covers only the `:host` shell, `.scroll-container`, and the bare `table` element.\n * Each consumer component owns all cell, row, head, and footer styles itself.\n *\n * Token naming:\n *  - `--_accent`   Primary interactive accent (sort icons, selection borders, focus rings).\n *                  Defaults to `--color-primary-focus`. Override via `--{prefix}-accent`.\n *\n * @param prefix  CSS custom-property namespace, e.g. `'table'` or `'datagrid'`\n *\n * @example\n * ```ts\n * // ore-table\n * styles: [tableBaseMixin('table'), componentStyles]\n *\n * // ore-datagrid\n * styles: [tableBaseMixin('datagrid'), componentStyles]\n * ```\n */\nexport const tableBaseMixin = (prefix: string) => css`\n  @layer refine.base {\n    :host {\n      /* ── Public token API ─────────────────────────────────────────────── */\n      --_bg: var(--${prefix}-bg, var(--color-canvas));\n      --_border-color: var(--${prefix}-border-color, var(--color-contrast-200));\n      --_radius: var(--${prefix}-radius, var(--rounded-xl));\n      --_header-bg: var(--${prefix}-header-bg, var(--color-contrast-50));\n      --_accent: var(--${prefix}-accent, var(--color-neutral-focus));\n      --_row-hover-bg: var(--${prefix}-row-hover-bg, color-mix(in oklch, var(--_accent) 6%, transparent));\n      --_stripe-bg: var(--${prefix}-stripe-bg, color-mix(in oklch, var(--color-contrast-900) 3%, transparent));\n      --_cell-padding-x: var(--${prefix}-cell-padding-x, var(--size-3));\n      --_cell-padding-y: var(--${prefix}-cell-padding-y, var(--size-2-5));\n      --_font-size: var(--${prefix}-font-size, var(--text-sm));\n\n      display: block;\n      overflow: hidden;\n      background: var(--_bg);\n      border: var(--border) solid var(--_border-color);\n      border-radius: var(--_radius);\n      box-shadow: var(--${prefix}-shadow, var(--shadow-sm));\n    }\n\n    /* ── Scroll wrapper ─────────────────────────────────────────────────── */\n\n    .scroll-container {\n      overflow: auto;\n      max-height: var(--${prefix}-max-height, none);\n    }\n\n    /* ── Native table ───────────────────────────────────────────────────── */\n\n    table {\n      width: 100%;\n      font-size: var(--_font-size);\n      table-layout: auto;\n      border-collapse: collapse;\n      background: var(--_bg);\n    }\n\n    /* ── Loading state ──────────────────────────────────────────────────── */\n\n    :host([loading]) .scroll-container {\n      opacity: 0.5;\n      pointer-events: none;\n      cursor: wait;\n    }\n  }\n\n  @layer refine.variants {\n    /* Bordered */\n    :host([bordered]) {\n      overflow: hidden;\n      border: var(--border) solid var(--_border-color);\n      border-radius: var(--_radius);\n      box-shadow: var(--shadow-xs);\n    }\n\n    :host([bordered]) .scroll-container {\n      border-radius: inherit;\n      clip-path: inset(0 round var(--_radius));\n    }\n\n    /* Sticky header */\n    :host([sticky]) .scroll-container {\n      max-height: var(--${prefix}-sticky-max-height, 24rem);\n      overflow-y: auto;\n    }\n  }\n\n  @layer refine.density {\n    :host([density='compact']) {\n      --_cell-padding-x: var(--size-2);\n      --_cell-padding-y: var(--size-1-5);\n    }\n\n    :host([density='cozy']) {\n      --_cell-padding-x: var(--size-3);\n      --_cell-padding-y: var(--size-2-5);\n    }\n\n    :host([density='comfortable']) {\n      --_cell-padding-x: var(--size-4);\n      --_cell-padding-y: var(--size-3-5);\n    }\n  }\n\n  @layer refine.overrides {\n    :host([fullwidth]) {\n      width: 100%;\n    }\n  }\n`;\n"],"mappings":"+BAwBA,IAAa,EAAkB,GAAmB,EAAA,GAAG;;;;qBAIhC,EAAO;+BACG,EAAO;yBACb,EAAO;4BACJ,EAAO;yBACV,EAAO;+BACD,EAAO;4BACV,EAAO;iCACF,EAAO;iCACP,EAAO;4BACZ,EAAO;;;;;;;0BAOT,EAAO;;;;;;;0BAOP,EAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAsCP,EAAO"}

package/dist/styles/mixins/table-base.css.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Table Base Mixin
+ *
+ * Shared structural foundation for table-like components (`ore-table`, `ore-datagrid`).
+ * Covers only the `:host` shell, `.scroll-container`, and the bare `table` element.
+ * Each consumer component owns all cell, row, head, and footer styles itself.
+ *
+ * Token naming:
+ *  - `--_accent`   Primary interactive accent (sort icons, selection borders, focus rings).
+ *                  Defaults to `--color-primary-focus`. Override via `--{prefix}-accent`.
+ *
+ * @param prefix  CSS custom-property namespace, e.g. `'table'` or `'datagrid'`
+ *
+ * @example
+ * ```ts
+ * // ore-table
+ * styles: [tableBaseMixin('table'), componentStyles]
+ *
+ * // ore-datagrid
+ * styles: [tableBaseMixin('datagrid'), componentStyles]
+ * ```
+ */
+export declare const tableBaseMixin: (prefix: string) => import("@vielzeug/ore").CSSResult;
+//# sourceMappingURL=table-base.css.d.ts.map

package/dist/styles/mixins/table-base.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-base.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/table-base.css.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM,sCA4F5C,CAAC"}

package/dist/styles/mixins/table-base.css.js

@@ -0,0 +1,99 @@
+import { css as e } from "@vielzeug/ore";
+//#region src/styles/mixins/table-base.css.ts
+var t = (t) => e`
+  @layer refine.base {
+    :host {
+      /* ── Public token API ─────────────────────────────────────────────── */
+      --_bg: var(--${t}-bg, var(--color-canvas));
+      --_border-color: var(--${t}-border-color, var(--color-contrast-200));
+      --_radius: var(--${t}-radius, var(--rounded-xl));
+      --_header-bg: var(--${t}-header-bg, var(--color-contrast-50));
+      --_accent: var(--${t}-accent, var(--color-neutral-focus));
+      --_row-hover-bg: var(--${t}-row-hover-bg, color-mix(in oklch, var(--_accent) 6%, transparent));
+      --_stripe-bg: var(--${t}-stripe-bg, color-mix(in oklch, var(--color-contrast-900) 3%, transparent));
+      --_cell-padding-x: var(--${t}-cell-padding-x, var(--size-3));
+      --_cell-padding-y: var(--${t}-cell-padding-y, var(--size-2-5));
+      --_font-size: var(--${t}-font-size, var(--text-sm));
+
+      display: block;
+      overflow: hidden;
+      background: var(--_bg);
+      border: var(--border) solid var(--_border-color);
+      border-radius: var(--_radius);
+      box-shadow: var(--${t}-shadow, var(--shadow-sm));
+    }
+
+    /* ── Scroll wrapper ─────────────────────────────────────────────────── */
+
+    .scroll-container {
+      overflow: auto;
+      max-height: var(--${t}-max-height, none);
+    }
+
+    /* ── Native table ───────────────────────────────────────────────────── */
+
+    table {
+      width: 100%;
+      font-size: var(--_font-size);
+      table-layout: auto;
+      border-collapse: collapse;
+      background: var(--_bg);
+    }
+
+    /* ── Loading state ──────────────────────────────────────────────────── */
+
+    :host([loading]) .scroll-container {
+      opacity: 0.5;
+      pointer-events: none;
+      cursor: wait;
+    }
+  }
+
+  @layer refine.variants {
+    /* Bordered */
+    :host([bordered]) {
+      overflow: hidden;
+      border: var(--border) solid var(--_border-color);
+      border-radius: var(--_radius);
+      box-shadow: var(--shadow-xs);
+    }
+
+    :host([bordered]) .scroll-container {
+      border-radius: inherit;
+      clip-path: inset(0 round var(--_radius));
+    }
+
+    /* Sticky header */
+    :host([sticky]) .scroll-container {
+      max-height: var(--${t}-sticky-max-height, 24rem);
+      overflow-y: auto;
+    }
+  }
+
+  @layer refine.density {
+    :host([density='compact']) {
+      --_cell-padding-x: var(--size-2);
+      --_cell-padding-y: var(--size-1-5);
+    }
+
+    :host([density='cozy']) {
+      --_cell-padding-x: var(--size-3);
+      --_cell-padding-y: var(--size-2-5);
+    }
+
+    :host([density='comfortable']) {
+      --_cell-padding-x: var(--size-4);
+      --_cell-padding-y: var(--size-3-5);
+    }
+  }
+
+  @layer refine.overrides {
+    :host([fullwidth]) {
+      width: 100%;
+    }
+  }
+`;
+//#endregion
+export { t as tableBaseMixin };
+
+//# sourceMappingURL=table-base.css.js.map