@vielzeug/buildit 2.0.0

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

@@ -0,0 +1,97 @@
+/**
+ * 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/craftit").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/craftit").CSSResult;
+/**
+ * Size Variant Mixin
+ *
+ * Provides consistent size variants (sm, md, lg) across components.
+ * Reduces code duplication for size-based styling.
+ *
+ * @param config - Optional configuration for size-specific values
+ * @returns CSSResult with size variant styles
+ *
+ * @example
+ * ```ts
+ * import { sizeVariantMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [sizeVariantMixin(), componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Custom size configuration
+ * return {
+ *   styles: [sizeVariantMixin({
+ *     sm: { size: 'var(--size-3)', fontSize: 'var(--text-2xs)' },
+ *     lg: { size: 'var(--size-8)', fontSize: 'var(--text-lg)' },
+ *   }), componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+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?: {
+    /** Large size configuration */
+    lg?: SizeConfig;
+    /** Medium size configuration (default) */
+    md?: SizeConfig;
+    /** Small size configuration */
+    sm?: SizeConfig;
+}) => import("@vielzeug/craftit").CSSResult;
+export {};
+//# 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,uCAwBxB,CAAC;AAIF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,mBAAmB,uCA0B/B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,KAAK,UAAU,GAAG;IAChB,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;AAEF,eAAO,MAAM,gBAAgB,GAAI,SAAS;IACxC,+BAA+B;IAC/B,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,0CAA0C;IAC1C,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,+BAA+B;IAC/B,EAAE,CAAC,EAAE,UAAU,CAAC;CACjB,0CAqEA,CAAC"}

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

@@ -0,0 +1,104 @@
+import { css as e } from "@vielzeug/craftit";
+//#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 = (t) => {
+	let n = {
+		lg: {
+			fontSize: "var(--text-base)",
+			gap: "var(--size-2-5)",
+			size: "var(--size-6)"
+		},
+		md: {
+			fontSize: "var(--text-sm)",
+			gap: "var(--size-2)",
+			size: "var(--size-5)"
+		},
+		sm: {
+			fontSize: "var(--text-xs)",
+			gap: "var(--size-1-5)",
+			size: "var(--size-4)"
+		}
+	}, r = {
+		...n.sm,
+		...t?.sm
+	}, i = {
+		...n.md,
+		...t?.md
+	}, a = {
+		...n.lg,
+		...t?.lg
+	}, o = (e) => e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`), s = (e) => Object.entries(e).map(([e, t]) => t === void 0 ? "" : e.startsWith("--") ? `${e}: ${t};` : `${`--_${o(e)}`}: ${t};`).filter(Boolean).join("\n        ");
+	return e`
+    /* ========================================
+       Size Variants (Shared Mixin)
+       ======================================== */
+
+    /* Small */
+    :host([size='sm']) {
+      ${s(r)}
+    }
+
+    /* Medium (default, can be used for explicit md attribute) */
+    :host([size='md']) {
+      ${s(i)}
+    }
+
+    /* Large */
+    :host([size='lg']) {
+      ${s(a)}
+    }
+  `;
+};
+//#endregion
+export { t as paddingMixin, n as roundedVariantMixin, r 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/craftit';\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 * Provides consistent size variants (sm, md, lg) across components.\n * Reduces code duplication for size-based styling.\n *\n * @param config - Optional configuration for size-specific values\n * @returns CSSResult with size variant styles\n *\n * @example\n * ```ts\n * import { sizeVariantMixin } from '../../styles';\n *\n * return {\n *   styles: [sizeVariantMixin(), componentStyles],\n *   template: html`...`\n * };\n * ```\n *\n * @example\n * ```ts\n * // Custom size configuration\n * return {\n *   styles: [sizeVariantMixin({\n *     sm: { size: 'var(--size-3)', fontSize: 'var(--text-2xs)' },\n *     lg: { size: 'var(--size-8)', fontSize: 'var(--text-lg)' },\n *   }), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\ntype 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\nexport const sizeVariantMixin = (config?: {\n  /** Large size configuration */\n  lg?: SizeConfig;\n  /** Medium size configuration (default) */\n  md?: SizeConfig;\n  /** Small size configuration */\n  sm?: SizeConfig;\n}) => {\n  const defaults = {\n    lg: {\n      fontSize: 'var(--text-base)',\n      gap: 'var(--size-2-5)',\n      size: 'var(--size-6)',\n    },\n    md: {\n      fontSize: 'var(--text-sm)',\n      gap: 'var(--size-2)',\n      size: 'var(--size-5)',\n    },\n    sm: {\n      fontSize: 'var(--text-xs)',\n      gap: 'var(--size-1-5)',\n      size: 'var(--size-4)',\n    },\n  };\n\n  const sm = { ...defaults.sm, ...config?.sm };\n  const md = { ...defaults.md, ...config?.md };\n  const lg = { ...defaults.lg, ...config?.lg };\n\n  // Helper to convert camelCase to kebab-case\n  const camelToKebab = (str: string): string => {\n    return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);\n  };\n\n  // Helper to generate CSS for a size\n  const generateSizeCSS = (sizeConfig: typeof sm) => {\n    return Object.entries(sizeConfig)\n      .map(([key, value]) => {\n        if (value === undefined) return '';\n\n        // If it already starts with --, pass it through as-is (custom property)\n        if (key.startsWith('--')) {\n          return `${key}: ${value};`;\n        }\n\n        // Convert camelCase to --_kebab-case custom property\n        // Examples: gap → --_gap, fontSize → --_font-size, lineHeight → --_line-height\n        const customProperty = `--_${camelToKebab(key)}`;\n\n        return `${customProperty}: ${value};`;\n      })\n      .filter(Boolean)\n      .join('\\n        ');\n  };\n\n  return css`\n    /* ========================================\n       Size Variants (Shared Mixin)\n       ======================================== */\n\n    /* Small */\n    :host([size='sm']) {\n      ${generateSizeCSS(sm)}\n    }\n\n    /* Medium (default, can be used for explicit md attribute) */\n    :host([size='md']) {\n      ${generateSizeCSS(md)}\n    }\n\n    /* Large */\n    :host([size='lg']) {\n      ${generateSizeCSS(lg)}\n    }\n  `;\n};\n"],"mappings":";;AAoBA,IAAa,IAAe,CAAG;;;;;;;;;;;;;;;;;;;;;;;;GA4ClB,IAAsB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;GAoFzB,KAAoB,MAO3B;CACJ,IAAM,IAAW;EACf,IAAI;GACF,UAAU;GACV,KAAK;GACL,MAAM;GACP;EACD,IAAI;GACF,UAAU;GACV,KAAK;GACL,MAAM;GACP;EACD,IAAI;GACF,UAAU;GACV,KAAK;GACL,MAAM;GACP;EACF,EAEK,IAAK;EAAE,GAAG,EAAS;EAAI,GAAG,GAAQ;EAAI,EACtC,IAAK;EAAE,GAAG,EAAS;EAAI,GAAG,GAAQ;EAAI,EACtC,IAAK;EAAE,GAAG,EAAS;EAAI,GAAG,GAAQ;EAAI,EAGtC,KAAgB,MACb,EAAI,QAAQ,WAAW,MAAW,IAAI,EAAO,aAAa,GAAG,EAIhE,KAAmB,MAChB,OAAO,QAAQ,EAAW,CAC9B,KAAK,CAAC,GAAK,OACN,MAAU,KAAA,IAAkB,KAG5B,EAAI,WAAW,KAAK,GACf,GAAG,EAAI,IAAI,EAAM,KAOnB,GAFgB,MAAM,EAAa,EAAI,GAErB,IAAI,EAAM,GACnC,CACD,OAAO,QAAQ,CACf,KAAK,aAAa;AAGvB,QAAO,CAAG;;;;;;;QAOJ,EAAgB,EAAG,CAAC;;;;;QAKpB,EAAgB,EAAG,CAAC;;;;;QAKpB,EAAgB,EAAG,CAAC"}

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

@@ -0,0 +1,18 @@
+let e=require(`@vielzeug/craftit`);var t=(t=``)=>e.css`
+    :host([disabled])${t?` ${t}`:``} {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  `,n=(t=``)=>{let n=t?` ${t}`:``;return e.css`
+    :host([disabled])${n}, :host([loading])${n} {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    :host([loading])${n} {
+      cursor: wait;
+    }
+  `};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/craftit';\n\n/**\n * Disabled State Mixin\n *\n * Provides consistent disabled styling across interactive components.\n * Reduces opacity, changes cursor, and prevents pointer events.\n *\n * @param selector - Optional CSS selector to apply styles to (default: component root)\n * @returns CSSResult with disabled state styles\n *\n * @example\n * ```ts\n * import { disabledStateMixin } from '../../styles';\n *\n * return {\n *   styles: [disabledStateMixin(), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const disabledStateMixin = (selector = '') => {\n  const sel = selector ? ` ${selector}` : '';\n\n  return css`\n    :host([disabled])${sel} {\n      opacity: 0.5;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  `;\n};\n\n/**\n * Loading State Mixin\n *\n * Provides consistent loading styling across interactive components.\n * Similar to disabled but for loading states.\n *\n * @param selector - Optional CSS selector to apply styles to (default: component root)\n * @returns CSSResult with loading state styles\n *\n * @example\n * ```ts\n * import { loadingStateMixin } from '../../styles';\n *\n * return {\n *   styles: [loadingStateMixin(), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const loadingStateMixin = (selector = '') => {\n  const sel = selector ? ` ${selector}` : '';\n\n  return css`\n    :host([loading])${sel} {\n      opacity: 0.5;\n      cursor: wait;\n      pointer-events: none;\n    }\n  `;\n};\n\n/**\n * Combined Disabled & Loading State Mixin\n *\n * Convenience mixin that combines both disabled and loading states.\n * Most interactive components need both.\n *\n * @param selector - Optional CSS selector to apply styles to\n * @returns CSSResult with both disabled and loading state styles\n *\n * @example\n * ```ts\n * import { disabledLoadingMixin } from '../../styles';\n *\n * return {\n *   styles: [disabledLoadingMixin('button'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const disabledLoadingMixin = (selector = '') => {\n  const sel = selector ? ` ${selector}` : '';\n\n  return css`\n    :host([disabled])${sel}, :host([loading])${sel} {\n      opacity: 0.5;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    :host([loading])${sel} {\n      cursor: wait;\n    }\n  `;\n};\n"],"mappings":"mCAqBA,IAAa,GAAsB,EAAW,KAGrC,EAAA,GAAG;uBAFE,EAAW,IAAI,IAAa,GAGf;;;;;IA0Dd,GAAwB,EAAW,KAAO,CACrD,IAAM,EAAM,EAAW,IAAI,IAAa,GAExC,MAAO,GAAA,GAAG;uBACW,EAAI,oBAAoB,EAAI;;;;;;sBAM7B,EAAI"}

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

@@ -0,0 +1,61 @@
+/**
+ * Disabled State Mixin
+ *
+ * Provides consistent disabled styling across interactive components.
+ * Reduces opacity, changes cursor, and prevents pointer events.
+ *
+ * @param selector - Optional CSS selector to apply styles to (default: component root)
+ * @returns CSSResult with disabled state styles
+ *
+ * @example
+ * ```ts
+ * import { disabledStateMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [disabledStateMixin(), componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const disabledStateMixin: (selector?: string) => import("@vielzeug/craftit").CSSResult;
+/**
+ * Loading State Mixin
+ *
+ * Provides consistent loading styling across interactive components.
+ * Similar to disabled but for loading states.
+ *
+ * @param selector - Optional CSS selector to apply styles to (default: component root)
+ * @returns CSSResult with loading state styles
+ *
+ * @example
+ * ```ts
+ * import { loadingStateMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [loadingStateMixin(), componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const loadingStateMixin: (selector?: string) => import("@vielzeug/craftit").CSSResult;
+/**
+ * Combined Disabled & Loading State Mixin
+ *
+ * Convenience mixin that combines both disabled and loading states.
+ * Most interactive components need both.
+ *
+ * @param selector - Optional CSS selector to apply styles to
+ * @returns CSSResult with both disabled and loading state styles
+ *
+ * @example
+ * ```ts
+ * import { disabledLoadingMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [disabledLoadingMixin('button'), componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const disabledLoadingMixin: (selector?: string) => import("@vielzeug/craftit").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;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,kBAAkB,GAAI,iBAAa,0CAU/C,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,iBAAiB,GAAI,iBAAa,0CAU9C,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,oBAAoB,GAAI,iBAAa,0CAcjD,CAAC"}

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

@@ -0,0 +1,26 @@
+import { css as e } from "@vielzeug/craftit";
+//#region src/styles/mixins/states.css.ts
+var t = (t = "") => e`
+    :host([disabled])${t ? ` ${t}` : ""} {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  `, n = (t = "") => {
+	let n = t ? ` ${t}` : "";
+	return e`
+    :host([disabled])${n}, :host([loading])${n} {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    :host([loading])${n} {
+      cursor: wait;
+    }
+  `;
+};
+//#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/craftit';\n\n/**\n * Disabled State Mixin\n *\n * Provides consistent disabled styling across interactive components.\n * Reduces opacity, changes cursor, and prevents pointer events.\n *\n * @param selector - Optional CSS selector to apply styles to (default: component root)\n * @returns CSSResult with disabled state styles\n *\n * @example\n * ```ts\n * import { disabledStateMixin } from '../../styles';\n *\n * return {\n *   styles: [disabledStateMixin(), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const disabledStateMixin = (selector = '') => {\n  const sel = selector ? ` ${selector}` : '';\n\n  return css`\n    :host([disabled])${sel} {\n      opacity: 0.5;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  `;\n};\n\n/**\n * Loading State Mixin\n *\n * Provides consistent loading styling across interactive components.\n * Similar to disabled but for loading states.\n *\n * @param selector - Optional CSS selector to apply styles to (default: component root)\n * @returns CSSResult with loading state styles\n *\n * @example\n * ```ts\n * import { loadingStateMixin } from '../../styles';\n *\n * return {\n *   styles: [loadingStateMixin(), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const loadingStateMixin = (selector = '') => {\n  const sel = selector ? ` ${selector}` : '';\n\n  return css`\n    :host([loading])${sel} {\n      opacity: 0.5;\n      cursor: wait;\n      pointer-events: none;\n    }\n  `;\n};\n\n/**\n * Combined Disabled & Loading State Mixin\n *\n * Convenience mixin that combines both disabled and loading states.\n * Most interactive components need both.\n *\n * @param selector - Optional CSS selector to apply styles to\n * @returns CSSResult with both disabled and loading state styles\n *\n * @example\n * ```ts\n * import { disabledLoadingMixin } from '../../styles';\n *\n * return {\n *   styles: [disabledLoadingMixin('button'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const disabledLoadingMixin = (selector = '') => {\n  const sel = selector ? ` ${selector}` : '';\n\n  return css`\n    :host([disabled])${sel}, :host([loading])${sel} {\n      opacity: 0.5;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    :host([loading])${sel} {\n      cursor: wait;\n    }\n  `;\n};\n"],"mappings":";;AAqBA,IAAa,KAAsB,IAAW,OAGrC,CAAG;uBAFE,IAAW,IAAI,MAAa,GAGf;;;;;KA0Dd,KAAwB,IAAW,OAAO;CACrD,IAAM,IAAM,IAAW,IAAI,MAAa;AAExC,QAAO,CAAG;uBACW,EAAI,oBAAoB,EAAI;;;;;;sBAM7B,EAAI"}

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

@@ -0,0 +1,146 @@
+let e=require(`@vielzeug/craftit`);var t=e.css`
+  /* ========================================
+     Color Themes (Default: Neutral)
+     ======================================== */
+
+  :host {
+    /* Default to neutral when no color is specified */
+    --_theme-base: var(--color-neutral);
+    --_theme-content: var(--color-neutral-content);
+    --_theme-contrast: var(--color-neutral-contrast);
+    --_theme-focus: var(--color-neutral-focus);
+    --_theme-backdrop: var(--color-neutral-backdrop);
+    --_theme-border: var(--color-neutral-border);
+    --_theme-shadow: var(--color-neutral-focus-shadow);
+    --_theme-halo: var(--halo-shadow-neutral);
+  }
+
+  :host([color='primary']) {
+    --_theme-base: var(--color-primary);
+    --_theme-content: var(--color-primary-content);
+    --_theme-contrast: var(--color-primary-contrast);
+    --_theme-focus: var(--color-primary-focus);
+    --_theme-backdrop: var(--color-primary-backdrop);
+    --_theme-border: var(--color-primary-border);
+    --_theme-shadow: var(--color-primary-focus-shadow);
+    --_theme-halo: var(--halo-shadow-primary);
+  }
+
+  :host([color='secondary']) {
+    --_theme-base: var(--color-secondary);
+    --_theme-content: var(--color-secondary-content);
+    --_theme-contrast: var(--color-secondary-contrast);
+    --_theme-focus: var(--color-secondary-focus);
+    --_theme-backdrop: var(--color-secondary-backdrop);
+    --_theme-border: var(--color-secondary-border);
+    --_theme-shadow: var(--color-secondary-focus-shadow);
+    --_theme-halo: var(--halo-shadow-secondary);
+  }
+
+  :host([color='info']) {
+    --_theme-base: var(--color-info);
+    --_theme-content: var(--color-info-content);
+    --_theme-contrast: var(--color-info-contrast);
+    --_theme-focus: var(--color-info-focus);
+    --_theme-backdrop: var(--color-info-backdrop);
+    --_theme-border: var(--color-info-border);
+    --_theme-shadow: var(--color-info-focus-shadow);
+    --_theme-halo: var(--halo-shadow-info);
+  }
+
+  :host([color='success']) {
+    --_theme-base: var(--color-success);
+    --_theme-content: var(--color-success-content);
+    --_theme-contrast: var(--color-success-contrast);
+    --_theme-focus: var(--color-success-focus);
+    --_theme-backdrop: var(--color-success-backdrop);
+    --_theme-border: var(--color-success-border);
+    --_theme-shadow: var(--color-success-focus-shadow);
+    --_theme-halo: var(--halo-shadow-success);
+  }
+
+  :host([color='warning']) {
+    --_theme-base: var(--color-warning);
+    --_theme-content: var(--color-warning-content);
+    --_theme-contrast: var(--color-warning-contrast);
+    --_theme-focus: var(--color-warning-focus);
+    --_theme-backdrop: var(--color-warning-backdrop);
+    --_theme-border: var(--color-warning-border);
+    --_theme-shadow: var(--color-warning-focus-shadow);
+    --_theme-halo: var(--halo-shadow-warning);
+  }
+
+  :host([color='error']) {
+    --_theme-base: var(--color-error);
+    --_theme-content: var(--color-error-content);
+    --_theme-contrast: var(--color-error-contrast);
+    --_theme-focus: var(--color-error-focus);
+    --_theme-backdrop: var(--color-error-backdrop);
+    --_theme-border: var(--color-error-border);
+    --_theme-shadow: var(--color-error-focus-shadow);
+    --_theme-halo: var(--halo-shadow-error);
+  }
+`,n=e.css`
+  /* ========================================
+     Elevation Levels (0-5)
+     ======================================== */
+
+  :host([elevation='0']) {
+    --_shadow: none;
+  }
+
+  :host([elevation='1']) {
+    --_shadow: var(--shadow-sm);
+  }
+
+  :host([elevation='2']) {
+    --_shadow: var(--shadow-md);
+  }
+
+  :host([elevation='3']) {
+    --_shadow: var(--shadow-lg);
+  }
+
+  :host([elevation='4']) {
+    --_shadow: var(--shadow-xl);
+  }
+
+  :host([elevation='5']) {
+    --_shadow: var(--shadow-2xl);
+  }
+`,r=e.css`
+  @media (forced-colors: active) {
+    :host {
+      border: 1px solid ButtonText;
+    }
+  }
+`,i=t=>e.css`
+  @media (forced-colors: active) {
+    ${t}:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+      box-shadow: none;
+    }
+  }
+`,a=e.css`
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: none;
+      color: ButtonText;
+      background: ButtonFace;
+      border: 1px solid ButtonText;
+    }
+
+    :host([checked]) {
+      background: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+    }
+
+    :host([disabled]) {
+      color: GrayText;
+      border-color: GrayText;
+    }
+  }
+`;exports.colorThemeMixin=t,exports.elevationMixin=n,exports.forcedColorsFocusMixin=i,exports.forcedColorsFormControlMixin=a,exports.forcedColorsMixin=r;
+//# sourceMappingURL=theme.css.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.css.cjs","names":[],"sources":["../../../src/styles/mixins/theme.css.ts"],"sourcesContent":["import { css } from '@vielzeug/craftit';\n\n// ── Color Theme ───────────────────────────────────────────────────────────────\n\n/**\n * Color Theme Mixin\n *\n * Provides theme color CSS custom properties for components.\n * Sets up --_theme-* variables that map to semantic color tokens.\n *\n * @example\n * ```ts\n * import { colorThemeMixin } from '../../styles';\n *\n * return {\n *   styles: [colorThemeMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const colorThemeMixin = css`\n  /* ========================================\n     Color Themes (Default: Neutral)\n     ======================================== */\n\n  :host {\n    /* Default to neutral when no color is specified */\n    --_theme-base: var(--color-neutral);\n    --_theme-content: var(--color-neutral-content);\n    --_theme-contrast: var(--color-neutral-contrast);\n    --_theme-focus: var(--color-neutral-focus);\n    --_theme-backdrop: var(--color-neutral-backdrop);\n    --_theme-border: var(--color-neutral-border);\n    --_theme-shadow: var(--color-neutral-focus-shadow);\n    --_theme-halo: var(--halo-shadow-neutral);\n  }\n\n  :host([color='primary']) {\n    --_theme-base: var(--color-primary);\n    --_theme-content: var(--color-primary-content);\n    --_theme-contrast: var(--color-primary-contrast);\n    --_theme-focus: var(--color-primary-focus);\n    --_theme-backdrop: var(--color-primary-backdrop);\n    --_theme-border: var(--color-primary-border);\n    --_theme-shadow: var(--color-primary-focus-shadow);\n    --_theme-halo: var(--halo-shadow-primary);\n  }\n\n  :host([color='secondary']) {\n    --_theme-base: var(--color-secondary);\n    --_theme-content: var(--color-secondary-content);\n    --_theme-contrast: var(--color-secondary-contrast);\n    --_theme-focus: var(--color-secondary-focus);\n    --_theme-backdrop: var(--color-secondary-backdrop);\n    --_theme-border: var(--color-secondary-border);\n    --_theme-shadow: var(--color-secondary-focus-shadow);\n    --_theme-halo: var(--halo-shadow-secondary);\n  }\n\n  :host([color='info']) {\n    --_theme-base: var(--color-info);\n    --_theme-content: var(--color-info-content);\n    --_theme-contrast: var(--color-info-contrast);\n    --_theme-focus: var(--color-info-focus);\n    --_theme-backdrop: var(--color-info-backdrop);\n    --_theme-border: var(--color-info-border);\n    --_theme-shadow: var(--color-info-focus-shadow);\n    --_theme-halo: var(--halo-shadow-info);\n  }\n\n  :host([color='success']) {\n    --_theme-base: var(--color-success);\n    --_theme-content: var(--color-success-content);\n    --_theme-contrast: var(--color-success-contrast);\n    --_theme-focus: var(--color-success-focus);\n    --_theme-backdrop: var(--color-success-backdrop);\n    --_theme-border: var(--color-success-border);\n    --_theme-shadow: var(--color-success-focus-shadow);\n    --_theme-halo: var(--halo-shadow-success);\n  }\n\n  :host([color='warning']) {\n    --_theme-base: var(--color-warning);\n    --_theme-content: var(--color-warning-content);\n    --_theme-contrast: var(--color-warning-contrast);\n    --_theme-focus: var(--color-warning-focus);\n    --_theme-backdrop: var(--color-warning-backdrop);\n    --_theme-border: var(--color-warning-border);\n    --_theme-shadow: var(--color-warning-focus-shadow);\n    --_theme-halo: var(--halo-shadow-warning);\n  }\n\n  :host([color='error']) {\n    --_theme-base: var(--color-error);\n    --_theme-content: var(--color-error-content);\n    --_theme-contrast: var(--color-error-contrast);\n    --_theme-focus: var(--color-error-focus);\n    --_theme-backdrop: var(--color-error-backdrop);\n    --_theme-border: var(--color-error-border);\n    --_theme-shadow: var(--color-error-focus-shadow);\n    --_theme-halo: var(--halo-shadow-error);\n  }\n`;\n\n// ── Elevation ─────────────────────────────────────────────────────────────────\n\n/**\n * Elevation Mixin\n *\n * Provides elevation shadow levels (0-5) via CSS custom properties.\n * Sets the --_shadow variable based on elevation attribute.\n *\n * @example\n * ```ts\n * import { elevationMixin } from '../../styles';\n *\n * return {\n *   styles: [elevationMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const elevationMixin = css`\n  /* ========================================\n     Elevation Levels (0-5)\n     ======================================== */\n\n  :host([elevation='0']) {\n    --_shadow: none;\n  }\n\n  :host([elevation='1']) {\n    --_shadow: var(--shadow-sm);\n  }\n\n  :host([elevation='2']) {\n    --_shadow: var(--shadow-md);\n  }\n\n  :host([elevation='3']) {\n    --_shadow: var(--shadow-lg);\n  }\n\n  :host([elevation='4']) {\n    --_shadow: var(--shadow-xl);\n  }\n\n  :host([elevation='5']) {\n    --_shadow: var(--shadow-2xl);\n  }\n`;\n\n// ── Forced Colors ─────────────────────────────────────────────────────────────\n\n/**\n * Forced Colors Mixin\n *\n * Ensures components are visually distinct in Windows High Contrast / forced-colors mode.\n * The browser already overrides `color`, `background-color`, and `border-color` to system\n * color keywords, but components that rely solely on `background` for visual identity\n * (no border) or that use `box-shadow` for focus rings need explicit fallbacks.\n *\n * Usage: apply to any component that has a background but no natural border.\n *\n * @example\n * ```ts\n * import { forcedColorsMixin } from '../../styles';\n *\n * return {\n *   styles: [forcedColorsMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const forcedColorsMixin = css`\n  @media (forced-colors: active) {\n    :host {\n      border: 1px solid ButtonText;\n    }\n  }\n`;\n\n/**\n * Forced Colors Focus Ring Mixin\n *\n * Replaces box-shadow focus rings (which are removed in forced-colors mode)\n * with a proper system-color outline.\n *\n * @param selector - CSS selector for the focusable element inside the host\n *\n * @example\n * ```ts\n * import { forcedColorsFocusMixin } from '../../styles';\n *\n * return {\n *   styles: [forcedColorsFocusMixin('button'), componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const forcedColorsFocusMixin = (selector: string) => css`\n  @media (forced-colors: active) {\n    ${selector}:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n      box-shadow: none;\n    }\n  }\n`;\n\n/**\n * Forced Colors Form Control Mixin\n *\n * For custom form controls (checkbox, radio, switch, slider) that paint their\n * own visual state. Maps checked/active state to system colors so they remain\n * distinguishable in forced-colors mode.\n *\n * @example\n * ```ts\n * import { forcedColorsFormControlMixin } from '../../styles';\n *\n * return {\n *   styles: [forcedColorsFormControlMixin, componentStyles],\n *   template: html`...`\n * };\n * ```\n */\nexport const forcedColorsFormControlMixin = css`\n  @media (forced-colors: active) {\n    :host {\n      forced-color-adjust: none;\n      color: ButtonText;\n      background: ButtonFace;\n      border: 1px solid ButtonText;\n    }\n\n    :host([checked]) {\n      background: Highlight;\n      color: HighlightText;\n      border-color: Highlight;\n    }\n\n    :host([disabled]) {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n`;\n"],"mappings":"mCAoBA,IAAa,EAAkB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsGrB,EAAiB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDpB,EAAoB,EAAA,GAAG;;;;;;EA0BvB,EAA0B,GAAqB,EAAA,GAAG;;MAEzD,EAAS;;;;;;EAyBF,EAA+B,EAAA,GAAG"}

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

@@ -0,0 +1,93 @@
+/**
+ * Color Theme Mixin
+ *
+ * Provides theme color CSS custom properties for components.
+ * Sets up --_theme-* variables that map to semantic color tokens.
+ *
+ * @example
+ * ```ts
+ * import { colorThemeMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [colorThemeMixin, componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const colorThemeMixin: import("@vielzeug/craftit").CSSResult;
+/**
+ * Elevation Mixin
+ *
+ * Provides elevation shadow levels (0-5) via CSS custom properties.
+ * Sets the --_shadow variable based on elevation attribute.
+ *
+ * @example
+ * ```ts
+ * import { elevationMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [elevationMixin, componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const elevationMixin: import("@vielzeug/craftit").CSSResult;
+/**
+ * Forced Colors Mixin
+ *
+ * Ensures components are visually distinct in Windows High Contrast / forced-colors mode.
+ * The browser already overrides `color`, `background-color`, and `border-color` to system
+ * color keywords, but components that rely solely on `background` for visual identity
+ * (no border) or that use `box-shadow` for focus rings need explicit fallbacks.
+ *
+ * Usage: apply to any component that has a background but no natural border.
+ *
+ * @example
+ * ```ts
+ * import { forcedColorsMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [forcedColorsMixin, componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const forcedColorsMixin: import("@vielzeug/craftit").CSSResult;
+/**
+ * Forced Colors Focus Ring Mixin
+ *
+ * Replaces box-shadow focus rings (which are removed in forced-colors mode)
+ * with a proper system-color outline.
+ *
+ * @param selector - CSS selector for the focusable element inside the host
+ *
+ * @example
+ * ```ts
+ * import { forcedColorsFocusMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [forcedColorsFocusMixin('button'), componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const forcedColorsFocusMixin: (selector: string) => import("@vielzeug/craftit").CSSResult;
+/**
+ * Forced Colors Form Control Mixin
+ *
+ * For custom form controls (checkbox, radio, switch, slider) that paint their
+ * own visual state. Maps checked/active state to system colors so they remain
+ * distinguishable in forced-colors mode.
+ *
+ * @example
+ * ```ts
+ * import { forcedColorsFormControlMixin } from '../../styles';
+ *
+ * return {
+ *   styles: [forcedColorsFormControlMixin, componentStyles],
+ *   template: html`...`
+ * };
+ * ```
+ */
+export declare const forcedColorsFormControlMixin: import("@vielzeug/craftit").CSSResult;
+//# sourceMappingURL=theme.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"theme.css.d.ts","sourceRoot":"","sources":["../../../src/styles/mixins/theme.css.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,uCAkF3B,CAAC;AAIF;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,uCA4B1B,CAAC;AAIF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,uCAM7B,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,sBAAsB,GAAI,UAAU,MAAM,0CAQtD,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,4BAA4B,uCAoBxC,CAAC"}