@vielzeug/buildit 2.0.0

package/dist/inputs/slider/slider.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/slider/slider.css?inline
+var e = "@layer buildit.base{:host{--_size:var(--slider-size,var(--size-5));--_height:var(--slider-height,var(--size-3));--_track:var(--slider-track,var(--color-contrast-300));--_fill:var(--slider-fill,var(--color-neutral));--_thumb:var(--slider-thumb,var(--color-contrast-100));--_thumb-size:calc(var(--_size) - var(--size-1));--_font-size:var(--text-sm);--_shadow:var(--color-neutral-focus-shadow);gap:var(--_gap,var(--size-3));touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;width:100%;display:inline-flex;position:relative}}.slider-container{width:100%;height:var(--_size);min-height:var(--_touch-target);flex:1;align-items:center;display:flex;position:relative}.slider-track{width:100%;height:var(--_height);background:var(--_track);border-radius:var(--rounded-full);position:relative}.slider-fill{top:0;left:var(--_fill-start,0%);width:var(--_fill-width,0%);background:var(--_fill);border-radius:var(--rounded-full);height:100%;transition:left var(--transition-normal), width var(--transition-normal);position:absolute}:host([data-dragging]) .slider-fill{transition:none}.slider-thumb{z-index:1;width:var(--_thumb-size);height:var(--_thumb-size);cursor:grab;background:var(--_thumb);border:2px solid var(--_fill);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-normal), transform var(--transition-fast), left var(--transition-normal);position:absolute;top:50%;transform:translate(-50%,-50%)}:host([data-dragging]) .slider-thumb{transition:box-shadow var(--transition-normal), transform var(--transition-fast)}.slider-thumb-sole{left:var(--_thumb-pos,0%)}:host(:focus-visible) .slider-thumb-sole,:host(:active) .slider-thumb-sole{box-shadow:var(--_shadow);transform:translate(-50%,-50%)scale(1.1)}.slider-thumb-start{left:var(--_thumb-start,0%)}.slider-thumb-end{left:var(--_thumb-end,100%)}.slider-thumb-start:focus-visible,.slider-thumb-end:focus-visible{z-index:2;cursor:grabbing;outline:var(--border-2) solid var(--_fill);outline-offset:2px;box-shadow:var(--_shadow);transform:translate(-50%,-50%)scale(1.1)}:host(:not([range])) .slider-thumb-start,:host(:not([range])) .slider-thumb-end,:host([range]) .slider-thumb-sole{display:none}@media (forced-colors:active){:host(:focus-visible) .slider-thumb-sole{outline-offset:2px;box-shadow:none;outline:2px solid highlight}}@layer buildit.overrides{:host{--_fill:var(--slider-fill,var(--_theme-base));--_shadow:var(--_theme-shadow)}}.label{font-size:var(--_font-size);color:var(--color-contrast);white-space:nowrap}@media (pointer:coarse){:host{--_thumb-size:calc(var(--_size) + var(--size-2));--_size:var(--size-7)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=slider.css?inline.js.map

package/dist/inputs/slider/slider.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.css?inline.js","names":[],"sources":["../../../src/inputs/slider/slider.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles & Defaults\n       ======================================== */\n\n  :host {\n    --_size: var(--slider-size, var(--size-5));\n    --_height: var(--slider-height, var(--size-3));\n    --_track: var(--slider-track, var(--color-contrast-300));\n    --_fill: var(--slider-fill, var(--color-neutral));\n    --_thumb: var(--slider-thumb, var(--color-contrast-100));\n    --_thumb-size: calc(var(--_size) - var(--size-1));\n    --_font-size: var(--text-sm);\n    --_shadow: var(--color-neutral-focus-shadow);\n\n    position: relative;\n    display: inline-flex;\n    gap: var(--_gap, var(--size-3));\n    align-items: center;\n    width: 100%;\n    touch-action: none;\n    cursor: pointer;\n    user-select: none;\n  }\n}\n\n/* ========================================\n     Track, Fill & Thumb\n     ======================================== */\n\n.slider-container {\n  position: relative;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  width: 100%;\n  height: var(--_size);\n  min-height: var(--_touch-target);\n}\n\n.slider-track {\n  position: relative;\n  width: 100%;\n  height: var(--_height);\n  background: var(--_track);\n  border-radius: var(--rounded-full);\n}\n\n/* Fill: always driven by --_fill-start / --_fill-width */\n.slider-fill {\n  position: absolute;\n  top: 0;\n  left: var(--_fill-start, 0%);\n  width: var(--_fill-width, 0%);\n  height: 100%;\n  background: var(--_fill);\n  border-radius: var(--rounded-full);\n  transition:\n    left var(--transition-normal),\n    width var(--transition-normal);\n}\n\n:host([data-dragging]) .slider-fill {\n  transition: none;\n}\n\n.slider-thumb {\n  position: absolute;\n  top: 50%;\n  z-index: 1;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  cursor: grab;\n  background: var(--_thumb);\n  border: 2px solid var(--_fill);\n  border-radius: var(--rounded-full);\n  box-shadow: var(--shadow-sm);\n  transform: translate(-50%, -50%);\n  transition:\n    box-shadow var(--transition-normal),\n    transform var(--transition-fast),\n    left var(--transition-normal);\n}\n\n:host([data-dragging]) .slider-thumb {\n  transition:\n    box-shadow var(--transition-normal),\n    transform var(--transition-fast);\n}\n\n/* ── Single-value thumb ─────────────────────────────────── */\n\n.slider-thumb-sole {\n  left: var(--_thumb-pos, 0%);\n}\n\n:host(:focus-visible) .slider-thumb-sole,\n:host(:active) .slider-thumb-sole {\n  box-shadow: var(--_shadow);\n  transform: translate(-50%, -50%) scale(1.1);\n}\n\n/* ── Range thumbs ───────────────────────────────────────── */\n\n.slider-thumb-start {\n  left: var(--_thumb-start, 0%);\n}\n\n.slider-thumb-end {\n  left: var(--_thumb-end, 100%);\n}\n\n.slider-thumb-start:focus-visible,\n.slider-thumb-end:focus-visible {\n  z-index: 2;\n  cursor: grabbing;\n  outline: var(--border-2) solid var(--_fill);\n  outline-offset: 2px;\n  box-shadow: var(--_shadow);\n  transform: translate(-50%, -50%) scale(1.1);\n}\n\n/* ── Visibility gating ──────────────────────────────────── */\n\n:host(:not([range])) .slider-thumb-start,\n:host(:not([range])) .slider-thumb-end {\n  display: none;\n}\n\n:host([range]) .slider-thumb-sole {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  /* Replace box-shadow focus ring with outline for sole-thumb focus visibility */\n  :host(:focus-visible) .slider-thumb-sole {\n    outline: 2px solid Highlight;\n    outline-offset: 2px;\n    box-shadow: none;\n  }\n}\n\n@layer buildit.overrides {\n  :host {\n    --_fill: var(--slider-fill, var(--_theme-base));\n    --_shadow: var(--_theme-shadow);\n  }\n}\n\n/* ========================================\n     Label\n     ======================================== */\n\n.label {\n  font-size: var(--_font-size);\n  color: var(--color-contrast);\n  white-space: nowrap;\n}\n\n@media (pointer: coarse) {\n  :host {\n    --_thumb-size: calc(var(--_size) + var(--size-2));\n    --_size: var(--size-7);\n  }\n}\n"],"mappings":""}

package/dist/inputs/slider/slider.d.ts

@@ -0,0 +1,82 @@
+import type { DisablableProps, SizableProps, ThemableProps } from '../../types';
+/** Slider component properties */
+export type BitSliderEvents = {
+    change: {
+        from?: number;
+        originalEvent?: Event;
+        to?: number;
+        value: number | {
+            from: number;
+            to: number;
+        };
+    };
+};
+export type BitSliderProps = ThemableProps & SizableProps & DisablableProps & {
+    /** Range mode: lower bound */
+    from?: number | string;
+    /** Range mode a11y label for the start thumb (e.g. "$20") */
+    'from-value-text'?: string;
+    /** Maximum value */
+    max?: number | string;
+    /** Minimum value */
+    min?: number | string;
+    /** Single-value mode: form field name */
+    name?: string;
+    /** Activate two-thumb range selection */
+    range?: boolean;
+    /** Step increment */
+    step?: number | string;
+    /** Range mode: upper bound */
+    to?: number | string;
+    /** Range mode a11y label for the end thumb (e.g. "$80") */
+    'to-value-text'?: string;
+    /** Single-value mode: current value */
+    value?: number | string;
+    /** Single-value mode a11y label override (e.g. "75%"). Overrides raw aria-valuenow. */
+    'value-text'?: string;
+};
+/**
+ * A slider for selecting a single numeric value or a numeric range.
+ *
+ * Add the boolean `range` attribute to activate two-thumb range mode.
+ *
+ * @element bit-slider
+ *
+ * @attr {number}  min   - Minimum value (default: 0)
+ * @attr {number}  max   - Maximum value (default: 100)
+ * @attr {number}  step  - Step increment (default: 1)
+ * @attr {number}  value - Current value (single mode)
+ * @attr {number}  from  - Lower bound (range mode)
+ * @attr {number}  to    - Upper bound (range mode)
+ * @attr {boolean} range - Activate range mode
+ * @attr {boolean} disabled - Disable interaction
+ * @attr {string}  name  - Form field name (single mode)
+ * @attr {string}  color - Theme color
+ * @attr {string}  size  - 'sm' | 'md' | 'lg'
+ *
+ * @fires change - detail always includes `value`; single mode: { value: number }, range mode: { value: { from, to }, from, to }, plus optional originalEvent
+ *
+ * @slot - Slider label text
+ *
+ * @part slider      - Slider container
+ * @part track       - Track element
+ * @part fill        - Fill element
+ * @part thumb       - Single-value thumb
+ * @part thumb-start - Range start thumb
+ * @part thumb-end   - Range end thumb
+ * @part label       - Label element
+ *
+ * @cssprop --slider-height - Track height
+ * @cssprop --slider-size   - Thumb dimensions
+ * @cssprop --slider-track  - Track background color
+ * @cssprop --slider-fill   - Fill background color
+ * @cssprop --slider-thumb  - Thumb background color
+ *
+ * @example
+ * ```html
+ * <bit-slider value="50" name="volume">Volume</bit-slider>
+ * <bit-slider range from="20" to="80" color="primary">Price range</bit-slider>
+ * ```
+ */
+export declare const SLIDER_TAG: string;
+//# sourceMappingURL=slider.d.ts.map

package/dist/inputs/slider/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/inputs/slider/slider.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAShF,kCAAkC;AAElC,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAC;CAC7G,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,aAAa,GACxC,YAAY,GACZ,eAAe,GAAG;IAChB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,6DAA6D;IAC7D,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,8BAA8B;IAC9B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,UAAU,QA8brB,CAAC"}

package/dist/inputs/switch/switch.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_width:var(--switch-width,var(--size-10));--_height:var(--switch-height,var(--size-5));--_padding:var(--size-0-5);--_thumb-size:calc(var(--_height) - var(--_padding) * 2);--_track-bg:var(--switch-track,var(--color-contrast-300));--_thumb-bg:var(--switch-thumb,white);--_font-size:var(--switch-font-size,var(--text-sm));gap:var(--_gap,var(--size-2-5));min-height:var(--size-11);touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.switch-wrapper{flex-shrink:0;display:flex}.switch-track{width:var(--_width);height:var(--_height);background:var(--_track-bg);border-radius:var(--rounded-full);transition:background var(--transition-slower), box-shadow var(--transition-normal);will-change:background;position:relative}.switch-thumb{top:var(--_padding);width:var(--_thumb-size);height:var(--_thumb-size);background:var(--_thumb-bg);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:transform var(--transition-spring), box-shadow var(--transition-normal);will-change:transform;position:absolute}.switch-thumb:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--_padding)}.switch-thumb:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding)}input:focus-visible~.switch-track{box-shadow:var(--_focus-shadow)}.label{font-size:var(--_font-size);color:var(--color-contrast)}}@layer buildit.overrides{:host{--_active-bg:var(--switch-bg,var(--_theme-base));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .switch-track{background:var(--_active-bg)}:host([checked]) .switch-thumb{transform:translateX(calc(var(--_width) - var(--_height)))}:host(:dir(rtl)[checked]) .switch-thumb{transform:translateX(calc(-1 * (var(--_width) - var(--_height))))}:host(:hover:not([disabled],[checked])) .switch-track{background:var(--color-contrast-400)}:host(:hover:not([disabled])[checked]) .switch-track{filter:brightness(1.1)}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500)}.helper-text:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--_width) + var(--size-2-5))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_width) + var(--size-2-5))}.helper-text[role=alert]{color:var(--color-error)}}`;exports.default=e;
+//# sourceMappingURL=switch.css?inline.cjs.map

package/dist/inputs/switch/switch.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.css?inline.cjs","names":[],"sources":["../../../src/inputs/switch/switch.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_width: var(--switch-width, var(--size-10));\n    --_height: var(--switch-height, var(--size-5));\n    --_padding: var(--size-0-5);\n    --_thumb-size: calc(var(--_height) - var(--_padding) * 2);\n    --_track-bg: var(--switch-track, var(--color-contrast-300));\n    --_thumb-bg: var(--switch-thumb, white);\n    --_font-size: var(--switch-font-size, var(--text-sm));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2-5));\n    align-items: center;\n    min-height: var(--size-11);\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* ========================================\n       Track & Thumb\n       ======================================== */\n\n  .switch-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .switch-track {\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    background: var(--_track-bg);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-slower),\n      box-shadow var(--transition-normal);\n    will-change: background;\n  }\n\n  .switch-thumb {\n    position: absolute;\n    inset-inline-start: var(--_padding);\n    top: var(--_padding);\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n    background: var(--_thumb-bg);\n    border-radius: var(--rounded-full);\n    box-shadow: var(--shadow-sm);\n    transition:\n      transform var(--transition-spring),\n      box-shadow var(--transition-normal);\n    will-change: transform;\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  input:focus-visible ~ .switch-track {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n}\n\n@layer buildit.overrides {\n  /* Map theme variables to switch-specific variables */\n  :host {\n    --_active-bg: var(--switch-bg, var(--_theme-base));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .switch-track {\n    background: var(--_active-bg);\n  }\n\n  :host([checked]) .switch-thumb {\n    transform: translateX(calc(var(--_width) - var(--_height)));\n  }\n\n  /* In RTL the thumb starts at the inline-end edge; slide left to reach inline-start */\n  :host(:dir(rtl)[checked]) .switch-thumb {\n    transform: translateX(calc(-1 * (var(--_width) - var(--_height))));\n  }\n\n  /* ========================================\n       Hover & Active States\n       ======================================== */\n\n  :host(:hover:not([disabled], [checked])) .switch-track {\n    background: var(--color-contrast-400);\n  }\n\n  :host(:hover:not([disabled])[checked]) .switch-track {\n    filter: brightness(1.1);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_width) + var(--size-2-5));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n"],"mappings":""}

package/dist/inputs/switch/switch.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/switch/switch.css?inline
+var e = "@layer buildit.base{:host{--_width:var(--switch-width,var(--size-10));--_height:var(--switch-height,var(--size-5));--_padding:var(--size-0-5);--_thumb-size:calc(var(--_height) - var(--_padding) * 2);--_track-bg:var(--switch-track,var(--color-contrast-300));--_thumb-bg:var(--switch-thumb,white);--_font-size:var(--switch-font-size,var(--text-sm));gap:var(--_gap,var(--size-2-5));min-height:var(--size-11);touch-action:manipulation;cursor:pointer;-webkit-user-select:none;user-select:none;flex-wrap:wrap;align-items:center;display:inline-flex}.switch-wrapper{flex-shrink:0;display:flex}.switch-track{width:var(--_width);height:var(--_height);background:var(--_track-bg);border-radius:var(--rounded-full);transition:background var(--transition-slower), box-shadow var(--transition-normal);will-change:background;position:relative}.switch-thumb{top:var(--_padding);width:var(--_thumb-size);height:var(--_thumb-size);background:var(--_thumb-bg);border-radius:var(--rounded-full);box-shadow:var(--shadow-sm);transition:transform var(--transition-spring), box-shadow var(--transition-normal);will-change:transform;position:absolute}.switch-thumb:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--_padding)}.switch-thumb:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--_padding)}input:focus-visible~.switch-track{box-shadow:var(--_focus-shadow)}.label{font-size:var(--_font-size);color:var(--color-contrast)}}@layer buildit.overrides{:host{--_active-bg:var(--switch-bg,var(--_theme-base));--_focus-shadow:var(--_theme-shadow)}:host([checked]) .switch-track{background:var(--_active-bg)}:host([checked]) .switch-thumb{transform:translateX(calc(var(--_width) - var(--_height)))}:host(:dir(rtl)[checked]) .switch-thumb{transform:translateX(calc(-1 * (var(--_width) - var(--_height))))}:host(:hover:not([disabled],[checked])) .switch-track{background:var(--color-contrast-400)}:host(:hover:not([disabled])[checked]) .switch-track{filter:brightness(1.1)}.helper-text{width:100%;font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500)}.helper-text:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-left:calc(var(--_width) + var(--size-2-5))}.helper-text:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-right:calc(var(--_width) + var(--size-2-5))}.helper-text[role=alert]{color:var(--color-error)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=switch.css?inline.js.map

package/dist/inputs/switch/switch.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.css?inline.js","names":[],"sources":["../../../src/inputs/switch/switch.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_width: var(--switch-width, var(--size-10));\n    --_height: var(--switch-height, var(--size-5));\n    --_padding: var(--size-0-5);\n    --_thumb-size: calc(var(--_height) - var(--_padding) * 2);\n    --_track-bg: var(--switch-track, var(--color-contrast-300));\n    --_thumb-bg: var(--switch-thumb, white);\n    --_font-size: var(--switch-font-size, var(--text-sm));\n\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--_gap, var(--size-2-5));\n    align-items: center;\n    min-height: var(--size-11);\n    touch-action: manipulation;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  /* ========================================\n       Track & Thumb\n       ======================================== */\n\n  .switch-wrapper {\n    display: flex;\n    flex-shrink: 0;\n  }\n\n  .switch-track {\n    position: relative;\n    width: var(--_width);\n    height: var(--_height);\n    background: var(--_track-bg);\n    border-radius: var(--rounded-full);\n    transition:\n      background var(--transition-slower),\n      box-shadow var(--transition-normal);\n    will-change: background;\n  }\n\n  .switch-thumb {\n    position: absolute;\n    inset-inline-start: var(--_padding);\n    top: var(--_padding);\n    width: var(--_thumb-size);\n    height: var(--_thumb-size);\n    background: var(--_thumb-bg);\n    border-radius: var(--rounded-full);\n    box-shadow: var(--shadow-sm);\n    transition:\n      transform var(--transition-spring),\n      box-shadow var(--transition-normal);\n    will-change: transform;\n  }\n\n  /* ========================================\n       Focus State\n       ======================================== */\n\n  input:focus-visible ~ .switch-track {\n    box-shadow: var(--_focus-shadow);\n  }\n\n  /* ========================================\n       Label\n       ======================================== */\n\n  .label {\n    font-size: var(--_font-size);\n    color: var(--color-contrast);\n  }\n}\n\n@layer buildit.overrides {\n  /* Map theme variables to switch-specific variables */\n  :host {\n    --_active-bg: var(--switch-bg, var(--_theme-base));\n    --_focus-shadow: var(--_theme-shadow);\n  }\n\n  /* ========================================\n       Checked State\n       ======================================== */\n\n  :host([checked]) .switch-track {\n    background: var(--_active-bg);\n  }\n\n  :host([checked]) .switch-thumb {\n    transform: translateX(calc(var(--_width) - var(--_height)));\n  }\n\n  /* In RTL the thumb starts at the inline-end edge; slide left to reach inline-start */\n  :host(:dir(rtl)[checked]) .switch-thumb {\n    transform: translateX(calc(-1 * (var(--_width) - var(--_height))));\n  }\n\n  /* ========================================\n       Hover & Active States\n       ======================================== */\n\n  :host(:hover:not([disabled], [checked])) .switch-track {\n    background: var(--color-contrast-400);\n  }\n\n  :host(:hover:not([disabled])[checked]) .switch-track {\n    filter: brightness(1.1);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text {\n    width: 100%;\n    padding-inline-start: calc(var(--_width) + var(--size-2-5));\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  .helper-text[role='alert'] {\n    color: var(--color-error);\n  }\n}\n"],"mappings":""}

package/dist/inputs/switch/switch.d.ts

@@ -0,0 +1,40 @@
+import type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';
+export type BitSwitchEvents = {
+    change: {
+        checked: boolean;
+        originalEvent?: Event;
+        value: boolean;
+    };
+};
+export type BitSwitchProps = CheckableProps & ThemableProps & SizableProps & DisablableProps & {
+    /** Error message (marks field as invalid) */
+    error?: string;
+    /** Helper text displayed below the switch */
+    helper?: string;
+};
+/**
+ * A toggle switch component for binary on/off states.
+ *
+ * @element bit-switch
+ *
+ * @attr {boolean} checked - Checked/on state
+ * @attr {boolean} disabled - Disable switch interaction
+ * @attr {string} value - Field value
+ * @attr {string} name - Form field name
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'
+ * @attr {string} error - Error message (marks field as invalid)
+ * @attr {string} helper - Helper text displayed below the switch
+ *
+ * @fires change - Emitted when switch is toggled. detail: { value: boolean, checked: boolean, originalEvent?: Event }
+ *
+ * @slot - Switch label text
+ *
+ * @part switch - The switch wrapper element
+ * @part track - The switch track element
+ * @part thumb - The switch thumb element
+ * @part label - The label element
+ * @part helper-text - The helper/error text element
+ */
+export declare const SWITCH_TAG: string;
+//# sourceMappingURL=switch.d.ts.map

package/dist/inputs/switch/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/inputs/switch/switch.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAQhG,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC;CACrE,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,GACzC,aAAa,GACb,YAAY,GACZ,eAAe,GAAG;IAChB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,UAAU,QAyErB,CAAC"}

package/dist/inputs/textarea/textarea.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_font-size:var(--textarea-font-size,var(--text-sm));--_gap:var(--textarea-gap,var(--size-2));--_padding:var(--textarea-padding,var(--size-2) var(--size-3));--_radius:var(--textarea-radius,var(--rounded-lg));--_placeholder:var(--textarea-placeholder-color,var(--color-contrast-500));--_bg:var(--textarea-bg,var(--color-contrast-100));--_border-color:var(--textarea-border-color,var(--color-contrast-300));--_min-height:var(--textarea-min-height,var(--size-24));--_max-height:var(--textarea-max-height,none);--_resize:var(--textarea-resize,vertical);flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}.textarea-wrapper{gap:var(--size-1-5);flex-direction:column;min-width:0;display:flex}.field{box-sizing:border-box;min-width:0;padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), backdrop-filter var(--transition-slow), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);display:grid}.label-inset,.label-outside,label.label-inset,label.label-outside{font-weight:var(--font-medium);color:var(--color-contrast-500);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast)}.label-inset,label.label-inset{font-size:var(--text-xs);line-height:var(--leading-tight);margin-bottom:2px}.label-outside,label.label-outside{font-size:var(--text-sm);line-height:var(--leading-none)}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}textarea{box-sizing:border-box;min-width:12rem;min-height:var(--_min-height);max-height:var(--_max-height);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--_theme-content);resize:vertical;background:0 0;border:none;outline:none;padding:0}textarea::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}textarea:focus-visible{outline:none}.counter{margin-top:var(--size-1);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);transition:color var(--transition-fast);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow));transform:translateY(-1px)}:host(:not([disabled])) .field:focus-within .label-inset,:host(:not([disabled])) .field:focus-within .label-outside{color:var(--_theme-focus)}:host([error]:not([error=""])) .field{border-color:var(--color-error)}:host([error]:not([error=""])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([error]:not([error=""])) .label-inset,:host([error]:not([error=""])) .label-outside{color:var(--color-error)}}@layer buildit.variants{:host(:not([variant])) .field,:host([variant=solid]) .field{background:var(--color-contrast-50);border-color:var(--color-contrast-300);box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .field:focus-within,:host([variant=solid]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]) .field{border-color:var(--_theme-border);box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .field:hover{background:color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));border-color:color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300))}:host([variant=flat]) .field:focus-within{background:color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));border-color:color-mix(in srgb, var(--_theme-focus) 60%, transparent);box-shadow:var(--_theme-shadow)}:host([variant=bordered]) .field{background:var(--_theme-backdrop);border-color:color-mix(in srgb, var(--_theme-focus) 70%, transparent)}:host([variant=bordered]) textarea{color:var(--_theme-content)}:host([variant=bordered][color=secondary]) textarea{color:var(--_theme-base)}:host([variant=bordered]) textarea::placeholder{color:color-mix(in srgb, var(--_theme-content) 45%, transparent)}:host([variant=bordered][color=secondary]) textarea::placeholder{color:color-mix(in srgb, var(--_theme-base) 45%, transparent)}:host([variant=bordered]) .field:hover{border-color:var(--_theme-focus)}:host([variant=outline]) .field{box-shadow:none;background:0 0}:host([variant=outline]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]) .field{box-shadow:none;background:0 0;border-color:#0000}:host([variant=ghost]) .field:hover{background:var(--color-contrast-100)}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}}@layer buildit.utilities{:host([auto-resize]) textarea{overflow:hidden}:host([fullwidth]){width:100%}}`;exports.default=e;
+//# sourceMappingURL=textarea.css?inline.cjs.map

package/dist/inputs/textarea/textarea.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.css?inline.cjs","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-slow),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label-inset,\n  .label-outside,\n  label.label-inset,\n  label.label-outside {\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  .label-inset,\n  label.label-inset {\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n  }\n\n  .label-outside,\n  label.label-outside {\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--_theme-content);\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n    transform: translateY(-1px);\n  }\n\n  :host(:not([disabled])) .field:focus-within .label-inset,\n  :host(:not([disabled])) .field:focus-within .label-outside {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label-inset,\n  :host([error]:not([error=''])) .label-outside {\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.variants {\n  /* Solid (Default) */\n  :host(:not([variant])) .field,\n  :host([variant='solid']) .field {\n    background: var(--color-contrast-50);\n    border-color: var(--color-contrast-300);\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .field:focus-within,\n  :host([variant='solid']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Flat */\n  :host([variant='flat']) .field {\n    border-color: var(--_theme-border);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .field:hover {\n    background: color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));\n    border-color: color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300));\n  }\n\n  :host([variant='flat']) .field:focus-within {\n    background: color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));\n    border-color: color-mix(in srgb, var(--_theme-focus) 60%, transparent);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) .field {\n    background: var(--_theme-backdrop);\n    border-color: color-mix(in srgb, var(--_theme-focus) 70%, transparent);\n  }\n\n  :host([variant='bordered']) textarea {\n    color: var(--_theme-content);\n  }\n\n  :host([variant='bordered'][color='secondary']) textarea {\n    color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) textarea::placeholder {\n    color: color-mix(in srgb, var(--_theme-content) 45%, transparent);\n  }\n\n  :host([variant='bordered'][color='secondary']) textarea::placeholder {\n    color: color-mix(in srgb, var(--_theme-base) 45%, transparent);\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--_theme-focus);\n  }\n\n  /* Outline */\n  :host([variant='outline']) .field {\n    background: transparent;\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) .field {\n    background: transparent;\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .field:hover {\n    background: var(--color-contrast-100);\n  }\n\n  :host([variant='ghost']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n}\n\n@layer buildit.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/textarea/textarea.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/textarea/textarea.css?inline
+var e = "@layer buildit.base{:host{--_font-size:var(--textarea-font-size,var(--text-sm));--_gap:var(--textarea-gap,var(--size-2));--_padding:var(--textarea-padding,var(--size-2) var(--size-3));--_radius:var(--textarea-radius,var(--rounded-lg));--_placeholder:var(--textarea-placeholder-color,var(--color-contrast-500));--_bg:var(--textarea-bg,var(--color-contrast-100));--_border-color:var(--textarea-border-color,var(--color-contrast-300));--_min-height:var(--textarea-min-height,var(--size-24));--_max-height:var(--textarea-max-height,none);--_resize:var(--textarea-resize,vertical);flex-direction:column;align-items:stretch;min-width:12rem;display:inline-flex}.textarea-wrapper{gap:var(--size-1-5);flex-direction:column;min-width:0;display:flex}.field{box-sizing:border-box;min-width:0;padding:var(--_padding);background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--shadow-2xs);transition:background var(--transition-fast), backdrop-filter var(--transition-slow), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);display:grid}.label-inset,.label-outside,label.label-inset,label.label-outside{font-weight:var(--font-medium);color:var(--color-contrast-500);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color var(--transition-fast)}.label-inset,label.label-inset{font-size:var(--text-xs);line-height:var(--leading-tight);margin-bottom:2px}.label-outside,label.label-outside{font-size:var(--text-sm);line-height:var(--leading-none)}.helper-text{font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-500);padding-left:2px;padding-right:2px}textarea{box-sizing:border-box;min-width:12rem;min-height:var(--_min-height);max-height:var(--_max-height);font:inherit;font-size:var(--_font-size);line-height:var(--leading-relaxed);color:var(--_theme-content);resize:vertical;background:0 0;border:none;outline:none;padding:0}textarea::placeholder{color:var(--_placeholder);transition:color var(--transition-fast)}textarea:focus-visible{outline:none}.counter{margin-top:var(--size-1);font-size:var(--text-xs);line-height:var(--leading-tight);color:var(--color-contrast-400);transition:color var(--transition-fast);align-self:flex-end;padding-left:2px;padding-right:2px}.counter.near-limit{color:var(--color-warning)}.counter.at-limit{color:var(--color-error)}:host(:not([disabled],[variant=bordered],[variant=flat])) .field:hover{border-color:var(--color-contrast-400)}:host(:not([disabled],[variant=text],[variant=flat])) .field:focus-within{background:var(--color-canvas);border-color:var(--_theme-focus);box-shadow:var(--_theme-shadow,var(--color-primary-focus-shadow));transform:translateY(-1px)}:host(:not([disabled])) .field:focus-within .label-inset,:host(:not([disabled])) .field:focus-within .label-outside{color:var(--_theme-focus)}:host([error]:not([error=\"\"])) .field{border-color:var(--color-error)}:host([error]:not([error=\"\"])) .field:focus-within{border-color:var(--color-error);box-shadow:var(--color-error-focus-shadow)}:host([error]:not([error=\"\"])) .label-inset,:host([error]:not([error=\"\"])) .label-outside{color:var(--color-error)}}@layer buildit.variants{:host(:not([variant])) .field,:host([variant=solid]) .field{background:var(--color-contrast-50);border-color:var(--color-contrast-300);box-shadow:var(--shadow-2xs)}:host(:not([variant],[disabled])) .field:focus-within,:host([variant=solid]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=flat]) .field{border-color:var(--_theme-border);box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) .field:hover{background:color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));border-color:color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300))}:host([variant=flat]) .field:focus-within{background:color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));border-color:color-mix(in srgb, var(--_theme-focus) 60%, transparent);box-shadow:var(--_theme-shadow)}:host([variant=bordered]) .field{background:var(--_theme-backdrop);border-color:color-mix(in srgb, var(--_theme-focus) 70%, transparent)}:host([variant=bordered]) textarea{color:var(--_theme-content)}:host([variant=bordered][color=secondary]) textarea{color:var(--_theme-base)}:host([variant=bordered]) textarea::placeholder{color:color-mix(in srgb, var(--_theme-content) 45%, transparent)}:host([variant=bordered][color=secondary]) textarea::placeholder{color:color-mix(in srgb, var(--_theme-base) 45%, transparent)}:host([variant=bordered]) .field:hover{border-color:var(--_theme-focus)}:host([variant=outline]) .field{box-shadow:none;background:0 0}:host([variant=outline]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}:host([variant=ghost]) .field{box-shadow:none;background:0 0;border-color:#0000}:host([variant=ghost]) .field:hover{background:var(--color-contrast-100)}:host([variant=ghost]:not([disabled])) .field:focus-within{box-shadow:var(--_theme-shadow)}}@layer buildit.utilities{:host([auto-resize]) textarea{overflow:hidden}:host([fullwidth]){width:100%}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=textarea.css?inline.js.map

package/dist/inputs/textarea/textarea.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.css?inline.js","names":[],"sources":["../../../src/inputs/textarea/textarea.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_font-size: var(--textarea-font-size, var(--text-sm));\n    --_gap: var(--textarea-gap, var(--size-2));\n    --_padding: var(--textarea-padding, var(--size-2) var(--size-3));\n    --_radius: var(--textarea-radius, var(--rounded-lg));\n    --_placeholder: var(--textarea-placeholder-color, var(--color-contrast-500));\n    --_bg: var(--textarea-bg, var(--color-contrast-100));\n    --_border-color: var(--textarea-border-color, var(--color-contrast-300));\n    --_min-height: var(--textarea-min-height, var(--size-24));\n    --_max-height: var(--textarea-max-height, none);\n    --_resize: var(--textarea-resize, vertical);\n\n    display: inline-flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 12rem;\n  }\n\n  .textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--size-1-5);\n    min-width: 0; /* Allow shrinking below content size */\n  }\n\n  .field {\n    box-sizing: border-box;\n    display: grid; /* Grid automatically sizes to content */\n    min-width: 0; /* Allow shrinking */\n    padding: var(--_padding);\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      backdrop-filter var(--transition-slow),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast),\n      transform var(--transition-fast);\n  }\n\n  /* ========================================\n       Label Styles\n       ======================================== */\n\n  .label-inset,\n  .label-outside,\n  label.label-inset,\n  label.label-outside {\n    font-weight: var(--font-medium);\n    color: var(--color-contrast-500);\n    cursor: pointer;\n    user-select: none;\n    transition: color var(--transition-fast);\n  }\n\n  .label-inset,\n  label.label-inset {\n    margin-bottom: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n  }\n\n  .label-outside,\n  label.label-outside {\n    font-size: var(--text-sm);\n    line-height: var(--leading-none);\n  }\n\n  /* ========================================\n       Helper / Error Text\n       ======================================== */\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-500);\n  }\n\n  /* ========================================\n       Textarea Element\n       ======================================== */\n\n  textarea {\n    box-sizing: border-box;\n    min-width: 12rem; /* Match :host min-width to prevent resize below minimum */\n    min-height: var(--_min-height);\n    max-height: var(--_max-height);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--_theme-content);\n    resize: vertical; /* Default resize, can be overridden by inline style */\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  textarea::placeholder {\n    color: var(--_placeholder);\n    transition: color var(--transition-fast);\n  }\n\n  textarea:focus-visible {\n    outline: none;\n  }\n\n  /* ========================================\n       Character Counter\n       ======================================== */\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    margin-top: var(--size-1);\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n    transition: color var(--transition-fast);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  /* ========================================\n       Hover & Focus States\n       ======================================== */\n\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .field:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host(:not([disabled], [variant='text'], [variant='flat'])) .field:focus-within {\n    background: var(--color-canvas);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow, var(--color-primary-focus-shadow));\n    transform: translateY(-1px);\n  }\n\n  :host(:not([disabled])) .field:focus-within .label-inset,\n  :host(:not([disabled])) .field:focus-within .label-outside {\n    color: var(--_theme-focus);\n  }\n\n  /* Error State */\n  :host([error]:not([error=''])) .field {\n    border-color: var(--color-error);\n  }\n\n  :host([error]:not([error=''])) .field:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([error]:not([error=''])) .label-inset,\n  :host([error]:not([error=''])) .label-outside {\n    color: var(--color-error);\n  }\n}\n\n@layer buildit.variants {\n  /* Solid (Default) */\n  :host(:not([variant])) .field,\n  :host([variant='solid']) .field {\n    background: var(--color-contrast-50);\n    border-color: var(--color-contrast-300);\n    box-shadow: var(--shadow-2xs);\n  }\n\n  :host(:not([variant], [disabled])) .field:focus-within,\n  :host([variant='solid']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Flat */\n  :host([variant='flat']) .field {\n    border-color: var(--_theme-border);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) .field:hover {\n    background: color-mix(in srgb, var(--_theme-base) 6%, var(--color-contrast-100));\n    border-color: color-mix(in srgb, var(--_theme-base) 35%, var(--color-contrast-300));\n  }\n\n  :host([variant='flat']) .field:focus-within {\n    background: color-mix(in srgb, var(--_theme-base) 8%, var(--color-canvas));\n    border-color: color-mix(in srgb, var(--_theme-focus) 60%, transparent);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']) .field {\n    background: var(--_theme-backdrop);\n    border-color: color-mix(in srgb, var(--_theme-focus) 70%, transparent);\n  }\n\n  :host([variant='bordered']) textarea {\n    color: var(--_theme-content);\n  }\n\n  :host([variant='bordered'][color='secondary']) textarea {\n    color: var(--_theme-base);\n  }\n\n  :host([variant='bordered']) textarea::placeholder {\n    color: color-mix(in srgb, var(--_theme-content) 45%, transparent);\n  }\n\n  :host([variant='bordered'][color='secondary']) textarea::placeholder {\n    color: color-mix(in srgb, var(--_theme-base) 45%, transparent);\n  }\n\n  :host([variant='bordered']) .field:hover {\n    border-color: var(--_theme-focus);\n  }\n\n  /* Outline */\n  :host([variant='outline']) .field {\n    background: transparent;\n    box-shadow: none;\n  }\n\n  :host([variant='outline']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']) .field {\n    background: transparent;\n    border-color: transparent;\n    box-shadow: none;\n  }\n\n  :host([variant='ghost']) .field:hover {\n    background: var(--color-contrast-100);\n  }\n\n  :host([variant='ghost']:not([disabled])) .field:focus-within {\n    box-shadow: var(--_theme-shadow);\n  }\n}\n\n@layer buildit.utilities {\n  /* Auto-resize hides overflow */\n  :host([auto-resize]) textarea {\n    overflow: hidden;\n  }\n\n  /* Full width */\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/inputs/textarea/textarea.d.ts

@@ -0,0 +1,57 @@
+import type { VisualVariant } from '../../types';
+import type { TextFieldProps } from '../shared/base-props';
+/** Textarea component properties */
+export type BitTextareaEvents = {
+    change: {
+        originalEvent: Event;
+        value: string;
+    };
+    input: {
+        originalEvent: Event;
+        value: string;
+    };
+};
+export type BitTextareaProps = TextFieldProps<Exclude<VisualVariant, 'glass' | 'frost' | 'text'>> & {
+    /** Allow auto-grow with content */
+    'auto-resize'?: boolean;
+    /** Maximum character count; shows a counter when set */
+    maxlength?: number;
+    /** Disable manual resize handle */
+    'no-resize'?: boolean;
+    /** Resize direction override */
+    resize?: 'none' | 'horizontal' | 'both' | 'vertical';
+    /** Number of visible text rows */
+    rows?: number;
+};
+/**
+ * A multi-line text input with label, helper text, character counter, and auto-resize.
+ *
+ * @element bit-textarea
+ *
+ * @attr {string} label - Label text
+ * @attr {string} label-placement - 'inset' | 'outside'
+ * @attr {string} value - Current value
+ * @attr {string} placeholder - Placeholder text
+ * @attr {string} name - Form field name
+ * @attr {number} rows - Visible row count
+ * @attr {number} maxlength - Max character count (shows counter)
+ * @attr {string} helper - Helper text below the textarea
+ * @attr {string} error - Error message
+ * @attr {boolean} disabled - Disable interaction
+ * @attr {boolean} readonly - Read-only mode
+ * @attr {boolean} required - Required field
+ * @attr {boolean} no-resize - Disable manual resize
+ * @attr {boolean} auto-resize - Grow with content
+ * @attr {string} resize - Resize direction: 'none' | 'horizontal' | 'both' | 'vertical'
+ * @attr {string} color - Theme color
+ * @attr {string} variant - Visual variant
+ * @attr {string} size - Component size
+ * @attr {string} rounded - Border radius
+ *
+ * @fires input - Fired on every keystroke with current value
+ * @fires change - Fired on blur with changed value
+ *
+ * @slot helper - Complex helper content
+ */
+export declare const TEXTAREA_TAG: string;
+//# sourceMappingURL=textarea.d.ts.map

package/dist/inputs/textarea/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/inputs/textarea/textarea.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAS3D,oCAAoC;AAEpC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,KAAK,EAAE;QAAE,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC,GAAG;IAClG,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,MAAM,GAAG,UAAU,CAAC;IACrD,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,YAAY,QA2IvB,CAAC"}

package/dist/layout/box/box.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_bg:var(--box-bg,var(--color-canvas));--_color:var(--box-color,var(--color-contrast-900));--_border-width:var(--box-border,var(--border));--_border-color:var(--box-border-color,var(--color-contrast-300));--_radius:var(--box-radius,var(--rounded-lg));--_padding:var(--box-padding,var(--size-4));--_shadow:var(--box-shadow,var(--shadow-sm));display:block;position:relative}.box{box-sizing:border-box;width:100%;height:100%;padding:var(--_padding);color:var(--_color);background:var(--_bg);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);transition:backdrop-filter var(--transition-slow), box-shadow var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);will-change:box-shadow;position:relative}}@layer buildit.variants{:host([color]){--_bg:var(--box-bg,var(--_theme-backdrop));--_border-color:var(--box-border-color,var(--_theme-border))}:host([variant=flat]){--_shadow:none}:host([variant=glass]:not([color])){--_bg:color-mix(in srgb, var(--color-secondary) 20%, transparent);--_border-color:color-mix(in srgb, var(--color-secondary-contrast) 15%, transparent)}:host([variant=glass][color]){--_bg:color-mix(in srgb, var(--_theme-base) 20%, transparent);--_border-color:color-mix(in srgb, var(--_theme-contrast) 15%, transparent);--_color:var(--_theme-content)}:host([variant=glass]) .box{box-shadow:var(--shadow-md), var(--inset-shadow-xs);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05);backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05)}:host([color]:not([variant=glass],[variant=frost]):hover){--_bg:color-mix(in srgb, var(--_theme-base) 16%, var(--color-contrast-50));--_border-color:var(--_theme-focus)}}@layer buildit.utilities{:host([fullwidth]){width:100%}}`;exports.default=e;
+//# sourceMappingURL=box.css?inline.cjs.map

package/dist/layout/box/box.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.css?inline.cjs","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--box-bg, var(--color-canvas));\n    --_color: var(--box-color, var(--color-contrast-900));\n    --_border-width: var(--box-border, var(--border));\n    --_border-color: var(--box-border-color, var(--color-contrast-300));\n    --_radius: var(--box-radius, var(--rounded-lg));\n    --_padding: var(--box-padding, var(--size-4));\n    --_shadow: var(--box-shadow, var(--shadow-sm));\n\n    position: relative;\n    display: block;\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: var(--_padding);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      backdrop-filter var(--transition-slow),\n      box-shadow var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n    will-change: box-shadow;\n  }\n}\n\n@layer buildit.variants {\n  /* Color theme integration — custom props still take priority */\n  :host([color]) {\n    --_bg: var(--box-bg, var(--_theme-backdrop));\n    --_border-color: var(--box-border-color, var(--_theme-border));\n  }\n\n  /* Flat - border only, no shadow */\n  :host([variant='flat']) {\n    --_shadow: none;\n  }\n\n  /* Glass */\n  :host([variant='glass']:not([color])) {\n    --_bg: color-mix(in srgb, var(--color-secondary) 20%, transparent);\n    --_border-color: color-mix(in srgb, var(--color-secondary-contrast) 15%, transparent);\n  }\n\n  :host([variant='glass'][color]) {\n    --_bg: color-mix(in srgb, var(--_theme-base) 20%, transparent);\n    --_border-color: color-mix(in srgb, var(--_theme-contrast) 15%, transparent);\n    --_color: var(--_theme-content);\n  }\n\n  :host([variant='glass']) .box {\n    box-shadow: var(--shadow-md), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  /* Subtle hover for solid/default + color (glass & frost manage their own hover) */\n  :host([color]:not([variant='glass'], [variant='frost']):hover) {\n    --_bg: color-mix(in srgb, var(--_theme-base) 16%, var(--color-contrast-50));\n    --_border-color: var(--_theme-focus);\n  }\n}\n\n@layer buildit.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/box/box.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/layout/box/box.css?inline
+var e = "@layer buildit.base{:host{--_bg:var(--box-bg,var(--color-canvas));--_color:var(--box-color,var(--color-contrast-900));--_border-width:var(--box-border,var(--border));--_border-color:var(--box-border-color,var(--color-contrast-300));--_radius:var(--box-radius,var(--rounded-lg));--_padding:var(--box-padding,var(--size-4));--_shadow:var(--box-shadow,var(--shadow-sm));display:block;position:relative}.box{box-sizing:border-box;width:100%;height:100%;padding:var(--_padding);color:var(--_color);background:var(--_bg);border:var(--_border-width) solid var(--_border-color);border-radius:var(--_radius);box-shadow:var(--_shadow);transition:backdrop-filter var(--transition-slow), box-shadow var(--transition-normal), background var(--transition-normal), border-color var(--transition-normal);will-change:box-shadow;position:relative}}@layer buildit.variants{:host([color]){--_bg:var(--box-bg,var(--_theme-backdrop));--_border-color:var(--box-border-color,var(--_theme-border))}:host([variant=flat]){--_shadow:none}:host([variant=glass]:not([color])){--_bg:color-mix(in srgb, var(--color-secondary) 20%, transparent);--_border-color:color-mix(in srgb, var(--color-secondary-contrast) 15%, transparent)}:host([variant=glass][color]){--_bg:color-mix(in srgb, var(--_theme-base) 20%, transparent);--_border-color:color-mix(in srgb, var(--_theme-contrast) 15%, transparent);--_color:var(--_theme-content)}:host([variant=glass]) .box{box-shadow:var(--shadow-md), var(--inset-shadow-xs);-webkit-backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05);backdrop-filter:blur(var(--blur-lg)) saturate(180%) brightness(1.05)}:host([color]:not([variant=glass],[variant=frost]):hover){--_bg:color-mix(in srgb, var(--_theme-base) 16%, var(--color-contrast-50));--_border-color:var(--_theme-focus)}}@layer buildit.utilities{:host([fullwidth]){width:100%}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=box.css?inline.js.map

package/dist/layout/box/box.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.css?inline.js","names":[],"sources":["../../../src/layout/box/box.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--box-bg, var(--color-canvas));\n    --_color: var(--box-color, var(--color-contrast-900));\n    --_border-width: var(--box-border, var(--border));\n    --_border-color: var(--box-border-color, var(--color-contrast-300));\n    --_radius: var(--box-radius, var(--rounded-lg));\n    --_padding: var(--box-padding, var(--size-4));\n    --_shadow: var(--box-shadow, var(--shadow-sm));\n\n    position: relative;\n    display: block;\n  }\n\n  .box {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    padding: var(--_padding);\n    color: var(--_color);\n    background: var(--_bg);\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--_shadow);\n    transition:\n      backdrop-filter var(--transition-slow),\n      box-shadow var(--transition-normal),\n      background var(--transition-normal),\n      border-color var(--transition-normal);\n    will-change: box-shadow;\n  }\n}\n\n@layer buildit.variants {\n  /* Color theme integration — custom props still take priority */\n  :host([color]) {\n    --_bg: var(--box-bg, var(--_theme-backdrop));\n    --_border-color: var(--box-border-color, var(--_theme-border));\n  }\n\n  /* Flat - border only, no shadow */\n  :host([variant='flat']) {\n    --_shadow: none;\n  }\n\n  /* Glass */\n  :host([variant='glass']:not([color])) {\n    --_bg: color-mix(in srgb, var(--color-secondary) 20%, transparent);\n    --_border-color: color-mix(in srgb, var(--color-secondary-contrast) 15%, transparent);\n  }\n\n  :host([variant='glass'][color]) {\n    --_bg: color-mix(in srgb, var(--_theme-base) 20%, transparent);\n    --_border-color: color-mix(in srgb, var(--_theme-contrast) 15%, transparent);\n    --_color: var(--_theme-content);\n  }\n\n  :host([variant='glass']) .box {\n    box-shadow: var(--shadow-md), var(--inset-shadow-xs);\n    backdrop-filter: blur(var(--blur-lg)) saturate(180%) brightness(1.05);\n  }\n\n  /* Subtle hover for solid/default + color (glass & frost manage their own hover) */\n  :host([color]:not([variant='glass'], [variant='frost']):hover) {\n    --_bg: color-mix(in srgb, var(--_theme-base) 16%, var(--color-contrast-50));\n    --_border-color: var(--_theme-focus);\n  }\n}\n\n@layer buildit.utilities {\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/box/box.d.ts

@@ -0,0 +1,52 @@
+import type { ElevationLevel, PaddingSize, RoundedSize, ThemeColor } from '../../types';
+/** Box component properties */
+export type BitBoxProps = {
+    /** Theme color */
+    color?: ThemeColor;
+    /** Shadow elevation level (0–5) */
+    elevation?: `${ElevationLevel}`;
+    /** Full width mode (100% of container) */
+    fullwidth?: boolean;
+    /** Internal padding size */
+    padding?: PaddingSize;
+    /** Enable animated rainbow border effect */
+    rainbow?: boolean;
+    /** Border radius size */
+    rounded?: RoundedSize;
+    /** Visual style variant */
+    variant?: 'solid' | 'flat' | 'glass' | 'frost';
+};
+/**
+ * bit-box — A foundational layout primitive with theming support.
+ *
+ * @element bit-box
+ *
+ * @attr {string} variant - Style variant: 'solid' | 'flat' | 'glass' | 'frost'
+ * @attr {string} color - Color theme: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} padding - Padding size: 'none' | 'sm' | 'md' | 'lg' | 'xl'
+ * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'
+ * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+ * @attr {boolean} rainbow - Enable animated rainbow border effect
+ * @attr {boolean} fullwidth - Expand to full width
+ *
+ * @slot - Default slot for content
+ *
+ * @part box - The inner box element
+ *
+ * @cssprop --box-bg - Background color
+ * @cssprop --box-color - Text color
+ * @cssprop --box-border - Border width
+ * @cssprop --box-border-color - Border color
+ * @cssprop --box-radius - Border radius
+ * @cssprop --box-padding - Inner padding
+ * @cssprop --box-shadow - Box shadow
+ *
+ * @example
+ * ```html
+ * <bit-box padding="lg" elevation="2">Simple content</bit-box>
+ * <bit-box variant="glass" color="primary">Glass effect</bit-box>
+ * <bit-box variant="frost" rainbow>Frosted glass</bit-box>
+ * ```
+ */
+export declare const BOX_TAG: string;
+//# sourceMappingURL=box.d.ts.map

package/dist/layout/box/box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/layout/box/box.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAKxF,+BAA+B;AAC/B,MAAM,MAAM,WAAW,GAAG;IACxB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,mCAAmC;IACnC,SAAS,CAAC,EAAE,GAAG,cAAc,EAAE,CAAC;IAChC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;CAChD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,OAAO,QAMlB,CAAC"}

package/dist/layout/grid/grid.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_cols:var(--grid-cols,repeat(auto-fit, minmax(250px, 1fr)));--_rows:var(--grid-rows,auto);--_gap:var(--grid-gap,var(--size-4));--_row-gap:var(--grid-row-gap,var(--_gap));--_col-gap:var(--grid-col-gap,var(--_gap));grid-template-rows:var(--_rows);grid-template-columns:var(--_cols);gap:var(--_row-gap) var(--_col-gap);grid-auto-flow:row;display:grid}:host([gap=none]){--_row-gap:0;--_col-gap:0}:host([gap=xs]){--_row-gap:var(--size-1);--_col-gap:var(--size-1)}:host([gap=sm]){--_row-gap:var(--size-2);--_col-gap:var(--size-2)}:host([gap=md]){--_row-gap:var(--size-4);--_col-gap:var(--size-4)}:host([gap=lg]){--_row-gap:var(--size-6);--_col-gap:var(--size-6)}:host([gap=xl]){--_row-gap:var(--size-8);--_col-gap:var(--size-8)}:host([gap="2xl"]){--_row-gap:var(--size-12);--_col-gap:var(--size-12)}:host([align=start]){align-items:start}:host([align=center]){align-items:center}:host([align=end]){align-items:end}:host([align=stretch]){align-items:stretch}:host([align=baseline]){align-items:baseline}:host([justify=start]){justify-items:start}:host([justify=center]){justify-items:center}:host([justify=end]){justify-items:end}:host([justify=stretch]){justify-items:stretch}:host([flow=row]){grid-auto-flow:row}:host([flow=column]){grid-auto-flow:column}:host([flow=row-dense]){grid-auto-flow:dense}:host([flow=column-dense]){grid-auto-flow:column dense}:host([fullwidth]){width:100%}}`;exports.default=e;
+//# sourceMappingURL=grid.css?inline.cjs.map

package/dist/layout/grid/grid.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.css?inline.cjs","names":[],"sources":["../../../src/layout/grid/grid.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_cols: var(--grid-cols, repeat(auto-fit, minmax(250px, 1fr)));\n    --_rows: var(--grid-rows, auto);\n    --_gap: var(--grid-gap, var(--size-4));\n    --_row-gap: var(--grid-row-gap, var(--_gap));\n    --_col-gap: var(--grid-col-gap, var(--_gap));\n\n    display: grid;\n    grid-template-rows: var(--_rows);\n    grid-template-columns: var(--_cols);\n    grid-auto-flow: row;\n    gap: var(--_row-gap) var(--_col-gap);\n  }\n\n  :host([gap='none']) {\n    --_row-gap: 0;\n    --_col-gap: 0;\n  }\n\n  :host([gap='xs']) {\n    --_row-gap: var(--size-1);\n    --_col-gap: var(--size-1);\n  }\n\n  :host([gap='sm']) {\n    --_row-gap: var(--size-2);\n    --_col-gap: var(--size-2);\n  }\n\n  :host([gap='md']) {\n    --_row-gap: var(--size-4);\n    --_col-gap: var(--size-4);\n  }\n\n  :host([gap='lg']) {\n    --_row-gap: var(--size-6);\n    --_col-gap: var(--size-6);\n  }\n\n  :host([gap='xl']) {\n    --_row-gap: var(--size-8);\n    --_col-gap: var(--size-8);\n  }\n\n  :host([gap='2xl']) {\n    --_row-gap: var(--size-12);\n    --_col-gap: var(--size-12);\n  }\n\n  :host([align='start']) {\n    align-items: start;\n  }\n\n  :host([align='center']) {\n    align-items: center;\n  }\n\n  :host([align='end']) {\n    align-items: end;\n  }\n\n  :host([align='stretch']) {\n    align-items: stretch;\n  }\n\n  :host([align='baseline']) {\n    align-items: baseline;\n  }\n\n  :host([justify='start']) {\n    justify-items: start;\n  }\n\n  :host([justify='center']) {\n    justify-items: center;\n  }\n\n  :host([justify='end']) {\n    justify-items: end;\n  }\n\n  :host([justify='stretch']) {\n    justify-items: stretch;\n  }\n\n  :host([flow='row']) {\n    grid-auto-flow: row;\n  }\n\n  :host([flow='column']) {\n    grid-auto-flow: column;\n  }\n\n  :host([flow='row-dense']) {\n    grid-auto-flow: row dense;\n  }\n\n  :host([flow='column-dense']) {\n    grid-auto-flow: column dense;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/grid/grid.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/layout/grid/grid.css?inline
+var e = "@layer buildit.base{:host{--_cols:var(--grid-cols,repeat(auto-fit, minmax(250px, 1fr)));--_rows:var(--grid-rows,auto);--_gap:var(--grid-gap,var(--size-4));--_row-gap:var(--grid-row-gap,var(--_gap));--_col-gap:var(--grid-col-gap,var(--_gap));grid-template-rows:var(--_rows);grid-template-columns:var(--_cols);gap:var(--_row-gap) var(--_col-gap);grid-auto-flow:row;display:grid}:host([gap=none]){--_row-gap:0;--_col-gap:0}:host([gap=xs]){--_row-gap:var(--size-1);--_col-gap:var(--size-1)}:host([gap=sm]){--_row-gap:var(--size-2);--_col-gap:var(--size-2)}:host([gap=md]){--_row-gap:var(--size-4);--_col-gap:var(--size-4)}:host([gap=lg]){--_row-gap:var(--size-6);--_col-gap:var(--size-6)}:host([gap=xl]){--_row-gap:var(--size-8);--_col-gap:var(--size-8)}:host([gap=\"2xl\"]){--_row-gap:var(--size-12);--_col-gap:var(--size-12)}:host([align=start]){align-items:start}:host([align=center]){align-items:center}:host([align=end]){align-items:end}:host([align=stretch]){align-items:stretch}:host([align=baseline]){align-items:baseline}:host([justify=start]){justify-items:start}:host([justify=center]){justify-items:center}:host([justify=end]){justify-items:end}:host([justify=stretch]){justify-items:stretch}:host([flow=row]){grid-auto-flow:row}:host([flow=column]){grid-auto-flow:column}:host([flow=row-dense]){grid-auto-flow:dense}:host([flow=column-dense]){grid-auto-flow:column dense}:host([fullwidth]){width:100%}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=grid.css?inline.js.map

package/dist/layout/grid/grid.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.css?inline.js","names":[],"sources":["../../../src/layout/grid/grid.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_cols: var(--grid-cols, repeat(auto-fit, minmax(250px, 1fr)));\n    --_rows: var(--grid-rows, auto);\n    --_gap: var(--grid-gap, var(--size-4));\n    --_row-gap: var(--grid-row-gap, var(--_gap));\n    --_col-gap: var(--grid-col-gap, var(--_gap));\n\n    display: grid;\n    grid-template-rows: var(--_rows);\n    grid-template-columns: var(--_cols);\n    grid-auto-flow: row;\n    gap: var(--_row-gap) var(--_col-gap);\n  }\n\n  :host([gap='none']) {\n    --_row-gap: 0;\n    --_col-gap: 0;\n  }\n\n  :host([gap='xs']) {\n    --_row-gap: var(--size-1);\n    --_col-gap: var(--size-1);\n  }\n\n  :host([gap='sm']) {\n    --_row-gap: var(--size-2);\n    --_col-gap: var(--size-2);\n  }\n\n  :host([gap='md']) {\n    --_row-gap: var(--size-4);\n    --_col-gap: var(--size-4);\n  }\n\n  :host([gap='lg']) {\n    --_row-gap: var(--size-6);\n    --_col-gap: var(--size-6);\n  }\n\n  :host([gap='xl']) {\n    --_row-gap: var(--size-8);\n    --_col-gap: var(--size-8);\n  }\n\n  :host([gap='2xl']) {\n    --_row-gap: var(--size-12);\n    --_col-gap: var(--size-12);\n  }\n\n  :host([align='start']) {\n    align-items: start;\n  }\n\n  :host([align='center']) {\n    align-items: center;\n  }\n\n  :host([align='end']) {\n    align-items: end;\n  }\n\n  :host([align='stretch']) {\n    align-items: stretch;\n  }\n\n  :host([align='baseline']) {\n    align-items: baseline;\n  }\n\n  :host([justify='start']) {\n    justify-items: start;\n  }\n\n  :host([justify='center']) {\n    justify-items: center;\n  }\n\n  :host([justify='end']) {\n    justify-items: end;\n  }\n\n  :host([justify='stretch']) {\n    justify-items: stretch;\n  }\n\n  :host([flow='row']) {\n    grid-auto-flow: row;\n  }\n\n  :host([flow='column']) {\n    grid-auto-flow: column;\n  }\n\n  :host([flow='row-dense']) {\n    grid-auto-flow: row dense;\n  }\n\n  :host([flow='column-dense']) {\n    grid-auto-flow: column dense;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n}\n"],"mappings":""}

package/dist/layout/grid/grid.d.ts

@@ -0,0 +1,105 @@
+type ColCount = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';
+/** Grid component properties */
+export type BitGridProps = {
+    /** Align items vertically */
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /** CSS grid-template-areas value */
+    areas?: string;
+    /** grid-template-areas at 2xl breakpoint (≥1536px) */
+    areas2xl?: string;
+    /** grid-template-areas at lg breakpoint (≥1024px) */
+    areasLg?: string;
+    /** grid-template-areas at md breakpoint (≥768px) */
+    areasMd?: string;
+    /** grid-template-areas at sm breakpoint (≥640px) */
+    areasSm?: string;
+    /** grid-template-areas at xl breakpoint (≥1280px) */
+    areasXl?: string;
+    /** Number of columns: '1'-'12' | 'auto' */
+    cols?: ColCount;
+    /** Columns at 2xl breakpoint (≥1536px) */
+    cols2xl?: ColCount;
+    /** Columns at lg breakpoint (≥1024px) */
+    colsLg?: ColCount;
+    /** Columns at md breakpoint (≥768px) */
+    colsMd?: ColCount;
+    /** Columns at sm breakpoint (≥640px) */
+    colsSm?: ColCount;
+    /** Columns at xl breakpoint (≥1280px) */
+    colsXl?: ColCount;
+    /** Grid auto flow direction */
+    flow?: 'row' | 'column' | 'row-dense' | 'column-dense';
+    /** Stretch the grid to fill its container's full width */
+    fullwidth?: boolean;
+    /** Gap between items */
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Justify items horizontally */
+    justify?: 'start' | 'center' | 'end' | 'stretch';
+    /** Minimum column width for responsive mode (default: 250px) */
+    minColWidth?: string;
+    /** Use auto-fit responsive columns */
+    responsive?: boolean;
+    /** Number of rows: '1'-'12' | 'auto' */
+    rows?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';
+};
+/**
+ * bit-grid — Flexible grid layout with responsive column control.
+ *
+ * Columns are computed in JS and applied as `--_cols` inline, so they respond
+ * to the element's own width via ResizeObserver. CSS custom properties
+ * `--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`
+ * are honoured as fallbacks when no attribute is set.
+ *
+ * @element bit-grid
+ *
+ * @attr {string} cols - Column count: '1'–'12' | 'auto'
+ * @attr {string} cols-sm - Columns when width ≥ 640px
+ * @attr {string} cols-md - Columns when width ≥ 768px
+ * @attr {string} cols-lg - Columns when width ≥ 1024px
+ * @attr {string} cols-xl - Columns when width ≥ 1280px
+ * @attr {string} cols-2xl - Columns when width ≥ 1536px
+ * @attr {string} rows - Row count: '1'–'12' | 'auto'
+ * @attr {string} gap - Gap token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+ * @attr {string} align - align-items: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
+ * @attr {string} justify - justify-items: 'start' | 'center' | 'end' | 'stretch'
+ * @attr {string} flow - grid-auto-flow: 'row' | 'column' | 'row-dense' | 'column-dense'
+ * @attr {boolean} responsive - Enables auto-fit columns without a fixed count
+ * @attr {string} min-col-width - Min column width for responsive mode (default: 250px)
+ * @attr {boolean} fullwidth - Stretch the grid to fill its container's full width
+ * @attr {string} areas - CSS grid-template-areas value (e.g. "'header header' 'nav main'")
+ * @attr {string} areas-sm - grid-template-areas when width ≥ 640px
+ * @attr {string} areas-md - grid-template-areas when width ≥ 768px
+ * @attr {string} areas-lg - grid-template-areas when width ≥ 1024px
+ * @attr {string} areas-xl - grid-template-areas when width ≥ 1280px
+ * @attr {string} areas-2xl - grid-template-areas when width ≥ 1536px
+ *
+ * @slot - Grid items
+ *
+ * @cssprop --grid-cols - Fallback column template (used when no cols attr is set)
+ * @cssprop --grid-rows - Fallback row template
+ * @cssprop --grid-gap - Fallback gap
+ * @cssprop --grid-row-gap - Fallback row gap
+ * @cssprop --grid-col-gap - Fallback column gap
+ *
+ * @example
+ * <bit-grid cols="1" cols-sm="2" cols-lg="4" gap="md">
+ *   <div>Item</div>
+ * </bit-grid>
+ *
+ * @example
+ * <!-- Responsive auto-fit -->
+ * <bit-grid responsive min-col-width="200px" gap="sm">
+ *   <div>Card</div>
+ * </bit-grid>
+ *
+ * @example
+ * <!-- Named grid areas -->
+ * <bit-grid cols="2" rows="2" areas="'header header' 'nav main'">
+ *   <header style="grid-area: header">Header</header>
+ *   <nav style="grid-area: nav">Nav</nav>
+ *   <main style="grid-area: main">Main</main>
+ * </bit-grid>
+ */
+export declare const GRID_TAG: string;
+export {};
+//# sourceMappingURL=grid.d.ts.map

package/dist/layout/grid/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/layout/grid/grid.ts"],"names":[],"mappings":"AAoCA,KAAK,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAElG,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,QAAQ,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,WAAW,GAAG,cAAc,CAAC;IACvD,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wCAAwC;IACxC,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;CAC1F,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,eAAO,MAAM,QAAQ,QAqHnB,CAAC"}

package/dist/layout/grid-item/grid-item.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{display:block}}@layer buildit.utilities{:host([align=start]){align-self:start}:host([align=center]){align-self:center}:host([align=end]){align-self:end}:host([align=stretch]){align-self:stretch}:host([justify=start]){justify-self:start}:host([justify=center]){justify-self:center}:host([justify=end]){justify-self:end}:host([justify=stretch]){justify-self:stretch}}`;exports.default=e;
+//# sourceMappingURL=grid-item.css?inline.cjs.map

package/dist/layout/grid-item/grid-item.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.css?inline.cjs","names":[],"sources":["../../../src/layout/grid-item/grid-item.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: block;\n  }\n}\n\n@layer buildit.utilities {\n  :host([align='start']) {\n    align-self: start;\n  }\n\n  :host([align='center']) {\n    align-self: center;\n  }\n\n  :host([align='end']) {\n    align-self: end;\n  }\n\n  :host([align='stretch']) {\n    align-self: stretch;\n  }\n\n  :host([justify='start']) {\n    justify-self: start;\n  }\n\n  :host([justify='center']) {\n    justify-self: center;\n  }\n\n  :host([justify='end']) {\n    justify-self: end;\n  }\n\n  :host([justify='stretch']) {\n    justify-self: stretch;\n  }\n}\n"],"mappings":""}

package/dist/layout/grid-item/grid-item.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/layout/grid-item/grid-item.css?inline
+var e = "@layer buildit.base{:host{display:block}}@layer buildit.utilities{:host([align=start]){align-self:start}:host([align=center]){align-self:center}:host([align=end]){align-self:end}:host([align=stretch]){align-self:stretch}:host([justify=start]){justify-self:start}:host([justify=center]){justify-self:center}:host([justify=end]){justify-self:end}:host([justify=stretch]){justify-self:stretch}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=grid-item.css?inline.js.map

package/dist/layout/grid-item/grid-item.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.css?inline.js","names":[],"sources":["../../../src/layout/grid-item/grid-item.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: block;\n  }\n}\n\n@layer buildit.utilities {\n  :host([align='start']) {\n    align-self: start;\n  }\n\n  :host([align='center']) {\n    align-self: center;\n  }\n\n  :host([align='end']) {\n    align-self: end;\n  }\n\n  :host([align='stretch']) {\n    align-self: stretch;\n  }\n\n  :host([justify='start']) {\n    justify-self: start;\n  }\n\n  :host([justify='center']) {\n    justify-self: center;\n  }\n\n  :host([justify='end']) {\n    justify-self: end;\n  }\n\n  :host([justify='stretch']) {\n    justify-self: stretch;\n  }\n}\n"],"mappings":""}