@vielzeug/buildit 2.0.0

package/dist/feedback/badge/badge.d.ts

@@ -0,0 +1,67 @@
+import type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';
+type BadgeVariant = Extract<VisualVariant, 'solid' | 'flat' | 'bordered' | 'outline' | 'frost'>;
+/** Badge component properties */
+export type BitBadgeProps = {
+    /**
+     * When set, switches to overlay mode: the host becomes `position:relative`
+     * and the badge pins to a corner over the slotted content.
+     * Value controls which corner: 'top-end' (default) | 'top-start' | 'bottom-end' | 'bottom-start'
+     */
+    anchor?: 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
+    /** Accessible label for assistive technology. Recommended for count-only and dot mode. */
+    ariaLabel?: string;
+    /** Theme color */
+    color?: ThemeColor;
+    /** Numeric count to display */
+    count?: number;
+    /** Render as a small dot with no label */
+    dot?: boolean;
+    /** Max count — displays "<max>+" when count exceeds this value */
+    max?: number;
+    /** Border radius override */
+    rounded?: RoundedSize;
+    /** Badge size */
+    size?: ComponentSize;
+    /** Visual style variant */
+    variant?: BadgeVariant;
+};
+/**
+ * A compact badge/chip for counts, statuses, and labels.
+ * Supports numeric counts with overflow, dot mode, and icon slots.
+ *
+ * @element bit-badge
+ *
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'frost'
+ * @attr {string} size - Component size: 'sm' | 'md' | 'lg'
+ * @attr {number} count - Numeric count to display
+ * @attr {number} max - Max count before showing "<max>+"
+ * @attr {boolean} dot - Render as a dot indicator (no text)
+ * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'full' etc.
+ *
+ * @slot - Badge label text
+ * @slot icon - Icon displayed before the label
+ * @slot target - Element the badge is anchored to (used with the anchor attribute)
+ *
+ * @cssprop --badge-bg - Badge background color
+ * @cssprop --badge-color - Badge text color
+ * @cssprop --badge-border-color - Badge border color
+ * @cssprop --badge-radius - Border radius
+ * @cssprop --badge-font-size - Font size
+ * @cssprop --badge-font-weight - Font weight
+ * @cssprop --badge-padding-x - Horizontal padding
+ * @cssprop --badge-padding-y - Vertical padding
+ * @cssprop --badge-gap - Gap between icon and label
+ *
+ * @example
+ * ```html
+ * <bit-badge color="primary">New</bit-badge>
+ * <bit-badge color="error" count="5"></bit-badge>
+ * <bit-badge color="error" count="120" max="99"></bit-badge>
+ * <bit-badge color="success" dot></bit-badge>
+ * <bit-badge color="warning" variant="flat">Beta</bit-badge>
+ * ```
+ */
+export declare const BADGE_TAG: string;
+export {};
+//# sourceMappingURL=badge.d.ts.map

package/dist/feedback/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/feedback/badge/badge.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKzF,KAAK,YAAY,GAAG,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;AAEhG,iCAAiC;AACjC,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,YAAY,GAAG,cAAc,CAAC;IACjE,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,kEAAkE;IAClE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,SAAS,QA2CpB,CAAC"}

package/dist/feedback/chip/chip.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_bg:var(--chip-bg,var(--color-contrast-150,var(--color-contrast-100)));--_color:var(--chip-color,var(--color-contrast-800));--_border-color:var(--chip-border-color,transparent);--_radius:var(--chip-radius,var(--rounded-full));--_font-size:var(--chip-font-size,var(--text-sm));--_font-weight:var(--chip-font-weight,var(--font-medium));--_padding-x:var(--chip-padding-x,var(--size-2-5));--_padding-y:var(--chip-padding-y,var(--size-0-5));--_gap:var(--chip-gap,var(--size-1));vertical-align:middle;align-items:center;max-width:100%;display:inline-flex}.chip{box-sizing:border-box;gap:var(--_gap);max-width:100%;padding:var(--_padding-y) var(--_padding-x);font-size:var(--_font-size);font-weight:var(--_font-weight);color:var(--_color);white-space:nowrap;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);align-items:center;line-height:1.2;display:inline-flex;position:relative}.label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.remove-btn{width:1.35em;height:1.35em;margin-inline:var(--size-0-5) calc(var(--size-2) * -1);color:inherit;cursor:pointer;background:color-mix(in srgb, currentcolor 12%, transparent);border-radius:var(--_radius);opacity:.7;transition:background var(--transition-fast), opacity var(--transition-fast);border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.remove-btn:hover{background:color-mix(in srgb, currentcolor 28%, transparent);opacity:1}.remove-btn:focus-visible{outline-offset:1px;opacity:1;outline:2px solid}::slotted([slot=icon]){flex-shrink:0;justify-content:center;align-items:center;width:1em;height:1em;display:inline-flex}.chip-btn{width:100%;font:inherit;color:inherit;text-align:inherit;cursor:pointer;background:0 0;border:none;margin:0;padding:0;display:inline-flex}.chip-btn:disabled{cursor:not-allowed}:host([mode=selectable][checked]) .chip{outline:var(--border-2) solid var(--_theme-base,currentColor);outline-offset:-2px}:host([mode=selectable]:not([disabled])) .chip,:host([mode=action]:not([disabled])) .chip{cursor:pointer}.chip-btn:focus-visible .chip{outline:2px solid var(--_theme-base,currentColor);outline-offset:2px}}@layer buildit.variants{:host(:not([variant])) .chip,:host([variant=solid]) .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-base,var(--color-contrast-700));border-color:#0000}:host([variant=flat]) .chip{color:var(--_theme-base,var(--color-contrast-800));background:color-mix(in srgb, var(--_theme-backdrop,var(--color-contrast-200)) 55%, transparent);border-color:#0000}:host([variant=bordered]) .chip{color:var(--_theme-base,var(--color-contrast-900));background:var(--_theme-backdrop,var(--color-contrast-50));border-color:var(--_theme-border,var(--color-contrast-300))}:host([variant=bordered]) .remove-btn{color:var(--_theme-backdrop,var(--color-contrast-50));background:var(--_theme-focus,var(--color-contrast-700));border:var(--border) solid var(--_theme-focus,var(--color-contrast-700))}:host([variant=bordered]) .remove-btn:hover{background:color-mix(in srgb, var(--_theme-focus,var(--color-contrast-700)) 80%, black);opacity:1}:host([variant=outline]) .chip{color:var(--_theme-base,var(--color-contrast-900));border-color:var(--_theme-base,var(--color-contrast-400));background:0 0}:host([variant=outline]) .remove-btn{color:var(--_theme-backdrop,var(--color-contrast-50));background:var(--_theme-focus,var(--color-contrast-700));border:var(--border) solid var(--_theme-focus,var(--color-contrast-700))}:host([variant=outline]) .remove-btn:hover{background:color-mix(in srgb, var(--_theme-focus,var(--color-contrast-700)) 80%, black);opacity:1}:host([variant=ghost]) .chip{color:var(--_theme-base,var(--color-contrast-900));background:0 0;border-color:#0000}:host([variant=ghost]) .remove-btn{border:var(--border) solid var(--_theme-focus,var(--color-contrast-400))}:host([variant=ghost]) .remove-btn:hover{background:color-mix(in srgb, currentcolor 15%, transparent)}:host(:not([variant]):is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip,:host([variant=solid]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip{background:var(--_theme-focus,var(--color-contrast-800))}:host(:not([variant]):is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip,:host([variant=solid]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip{background:var(--_theme-content,var(--color-contrast-900));box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-focus,var(--color-contrast-700))}:host([variant=flat]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-content,var(--color-contrast-900));box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-focus,var(--color-contrast-700));border-color:var(--_theme-focus,var(--color-contrast-700))}:host([variant=bordered]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-content,var(--color-contrast-900));box-shadow:var(--inset-shadow-sm)}:host([variant=outline]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip{background:var(--_theme-backdrop,var(--color-contrast-100));border-color:var(--_theme-focus,var(--color-contrast-700))}:host([variant=outline]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-base,var(--color-contrast-700));box-shadow:var(--inset-shadow-2xs)}:host([variant=ghost]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip{background:var(--_theme-backdrop,var(--color-contrast-100))}:host([variant=ghost]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-base,var(--color-contrast-700));box-shadow:var(--inset-shadow-2xs)}}`;exports.default=e;
+//# sourceMappingURL=chip.css?inline.cjs.map

package/dist/feedback/chip/chip.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.css?inline.cjs","names":[],"sources":["../../../src/feedback/chip/chip.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--chip-bg, var(--color-contrast-150, var(--color-contrast-100)));\n    --_color: var(--chip-color, var(--color-contrast-800));\n    --_border-color: var(--chip-border-color, transparent);\n    --_radius: var(--chip-radius, var(--rounded-full));\n    --_font-size: var(--chip-font-size, var(--text-sm));\n    --_font-weight: var(--chip-font-weight, var(--font-medium));\n    --_padding-x: var(--chip-padding-x, var(--size-2-5));\n    --_padding-y: var(--chip-padding-y, var(--size-0-5));\n    --_gap: var(--chip-gap, var(--size-1));\n\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    vertical-align: middle;\n  }\n\n  .chip {\n    position: relative;\n    box-sizing: border-box;\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n    max-width: 100%;\n    padding: var(--_padding-y) var(--_padding-x);\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1.2;\n    color: var(--_color);\n    white-space: nowrap;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ========================================\n       Remove Button\n       ======================================== */\n\n  .remove-btn {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1.35em;\n    height: 1.35em;\n    padding: 0;\n    margin-inline: var(--size-0-5) calc(var(--size-2) * -1);\n    color: inherit;\n    cursor: pointer;\n    background: color-mix(in srgb, currentcolor 12%, transparent);\n    border: none;\n    border-radius: var(--_radius);\n    opacity: 0.7;\n    transition:\n      background var(--transition-fast),\n      opacity var(--transition-fast);\n  }\n\n  .remove-btn:hover {\n    background: color-mix(in srgb, currentcolor 28%, transparent);\n    opacity: 1;\n  }\n\n  .remove-btn:focus-visible {\n    outline: 2px solid currentcolor;\n    outline-offset: 1px;\n    opacity: 1;\n  }\n\n  /* ========================================\n       Icon slot\n       ======================================== */\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n  }\n\n  .chip-btn {\n    display: inline-flex;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    font: inherit;\n    color: inherit;\n    text-align: inherit;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .chip-btn:disabled {\n    cursor: not-allowed;\n  }\n\n  :host([mode='selectable'][checked]) .chip {\n    outline: var(--border-2) solid var(--_theme-base, currentColor);\n    outline-offset: -2px;\n  }\n\n  :host([mode='selectable']:not([disabled])) .chip,\n  :host([mode='action']:not([disabled])) .chip {\n    cursor: pointer;\n  }\n\n  .chip-btn:focus-visible .chip {\n    outline: 2px solid var(--_theme-base, currentColor);\n    outline-offset: 2px;\n  }\n}\n\n@layer buildit.variants {\n  /* Solid (Default) — full theme color fill */\n  :host(:not([variant])) .chip,\n  :host([variant='solid']) .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-base, var(--color-contrast-700));\n    border-color: transparent;\n  }\n\n  /* Flat — subtle tint */\n  :host([variant='flat']) .chip {\n    color: var(--_theme-base, var(--color-contrast-800));\n    background: color-mix(in srgb, var(--_theme-backdrop, var(--color-contrast-200)) 55%, transparent);\n    border-color: transparent;\n  }\n\n  /* Bordered — backdrop fill with themed border */\n  :host([variant='bordered']) .chip {\n    color: var(--_theme-base, var(--color-contrast-900));\n    background: var(--_theme-backdrop, var(--color-contrast-50));\n    border-color: var(--_theme-border, var(--color-contrast-300));\n  }\n\n  :host([variant='bordered']) .remove-btn {\n    color: var(--_theme-backdrop, var(--color-contrast-50));\n    background: var(--_theme-focus, var(--color-contrast-700));\n    border: var(--border) solid var(--_theme-focus, var(--color-contrast-700));\n  }\n\n  :host([variant='bordered']) .remove-btn:hover {\n    background: color-mix(in srgb, var(--_theme-focus, var(--color-contrast-700)) 80%, black);\n    opacity: 1;\n  }\n\n  /* Outline — transparent with colored border */\n  :host([variant='outline']) .chip {\n    color: var(--_theme-base, var(--color-contrast-900));\n    background: transparent;\n    border-color: var(--_theme-base, var(--color-contrast-400));\n  }\n\n  :host([variant='outline']) .remove-btn {\n    color: var(--_theme-backdrop, var(--color-contrast-50));\n    background: var(--_theme-focus, var(--color-contrast-700));\n    border: var(--border) solid var(--_theme-focus, var(--color-contrast-700));\n  }\n\n  :host([variant='outline']) .remove-btn:hover {\n    background: color-mix(in srgb, var(--_theme-focus, var(--color-contrast-700)) 80%, black);\n    opacity: 1;\n  }\n\n  /* Ghost — transparent, no border */\n  :host([variant='ghost']) .chip {\n    color: var(--_theme-base, var(--color-contrast-900));\n    background: transparent;\n    border-color: transparent;\n  }\n\n  :host([variant='ghost']) .remove-btn {\n    border: var(--border) solid var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([variant='ghost']) .remove-btn:hover {\n    background: color-mix(in srgb, currentcolor 15%, transparent);\n  }\n\n  /* ========================================\n     Hover / Active Feedback — interactive modes\n     ======================================== */\n\n  /* Solid (default) */\n  :host(:not([variant]):is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:hover .chip,\n  :host([variant='solid']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:hover .chip {\n    background: var(--_theme-focus, var(--color-contrast-800));\n  }\n\n  :host(:not([variant]):is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:active .chip,\n  :host([variant='solid']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:active .chip {\n    background: var(--_theme-content, var(--color-contrast-900));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  /* Flat */\n  :host([variant='flat']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:hover .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-focus, var(--color-contrast-700));\n  }\n\n  :host([variant='flat']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:active .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-content, var(--color-contrast-900));\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:hover .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-focus, var(--color-contrast-700));\n    border-color: var(--_theme-focus, var(--color-contrast-700));\n  }\n\n  :host([variant='bordered']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:active .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-content, var(--color-contrast-900));\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline */\n  :host([variant='outline']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:hover .chip {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n    border-color: var(--_theme-focus, var(--color-contrast-700));\n  }\n\n  :host([variant='outline']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:active .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-base, var(--color-contrast-700));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:hover .chip {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  :host([variant='ghost']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:active .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-base, var(--color-contrast-700));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n"],"mappings":""}

package/dist/feedback/chip/chip.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/feedback/chip/chip.css?inline
+var e = "@layer buildit.base{:host{--_bg:var(--chip-bg,var(--color-contrast-150,var(--color-contrast-100)));--_color:var(--chip-color,var(--color-contrast-800));--_border-color:var(--chip-border-color,transparent);--_radius:var(--chip-radius,var(--rounded-full));--_font-size:var(--chip-font-size,var(--text-sm));--_font-weight:var(--chip-font-weight,var(--font-medium));--_padding-x:var(--chip-padding-x,var(--size-2-5));--_padding-y:var(--chip-padding-y,var(--size-0-5));--_gap:var(--chip-gap,var(--size-1));vertical-align:middle;align-items:center;max-width:100%;display:inline-flex}.chip{box-sizing:border-box;gap:var(--_gap);max-width:100%;padding:var(--_padding-y) var(--_padding-x);font-size:var(--_font-size);font-weight:var(--_font-weight);color:var(--_color);white-space:nowrap;background:var(--_bg);border:var(--border) solid var(--_border-color);border-radius:var(--_radius);transition:background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);align-items:center;line-height:1.2;display:inline-flex;position:relative}.label{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.remove-btn{width:1.35em;height:1.35em;margin-inline:var(--size-0-5) calc(var(--size-2) * -1);color:inherit;cursor:pointer;background:color-mix(in srgb, currentcolor 12%, transparent);border-radius:var(--_radius);opacity:.7;transition:background var(--transition-fast), opacity var(--transition-fast);border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.remove-btn:hover{background:color-mix(in srgb, currentcolor 28%, transparent);opacity:1}.remove-btn:focus-visible{outline-offset:1px;opacity:1;outline:2px solid}::slotted([slot=icon]){flex-shrink:0;justify-content:center;align-items:center;width:1em;height:1em;display:inline-flex}.chip-btn{width:100%;font:inherit;color:inherit;text-align:inherit;cursor:pointer;background:0 0;border:none;margin:0;padding:0;display:inline-flex}.chip-btn:disabled{cursor:not-allowed}:host([mode=selectable][checked]) .chip{outline:var(--border-2) solid var(--_theme-base,currentColor);outline-offset:-2px}:host([mode=selectable]:not([disabled])) .chip,:host([mode=action]:not([disabled])) .chip{cursor:pointer}.chip-btn:focus-visible .chip{outline:2px solid var(--_theme-base,currentColor);outline-offset:2px}}@layer buildit.variants{:host(:not([variant])) .chip,:host([variant=solid]) .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-base,var(--color-contrast-700));border-color:#0000}:host([variant=flat]) .chip{color:var(--_theme-base,var(--color-contrast-800));background:color-mix(in srgb, var(--_theme-backdrop,var(--color-contrast-200)) 55%, transparent);border-color:#0000}:host([variant=bordered]) .chip{color:var(--_theme-base,var(--color-contrast-900));background:var(--_theme-backdrop,var(--color-contrast-50));border-color:var(--_theme-border,var(--color-contrast-300))}:host([variant=bordered]) .remove-btn{color:var(--_theme-backdrop,var(--color-contrast-50));background:var(--_theme-focus,var(--color-contrast-700));border:var(--border) solid var(--_theme-focus,var(--color-contrast-700))}:host([variant=bordered]) .remove-btn:hover{background:color-mix(in srgb, var(--_theme-focus,var(--color-contrast-700)) 80%, black);opacity:1}:host([variant=outline]) .chip{color:var(--_theme-base,var(--color-contrast-900));border-color:var(--_theme-base,var(--color-contrast-400));background:0 0}:host([variant=outline]) .remove-btn{color:var(--_theme-backdrop,var(--color-contrast-50));background:var(--_theme-focus,var(--color-contrast-700));border:var(--border) solid var(--_theme-focus,var(--color-contrast-700))}:host([variant=outline]) .remove-btn:hover{background:color-mix(in srgb, var(--_theme-focus,var(--color-contrast-700)) 80%, black);opacity:1}:host([variant=ghost]) .chip{color:var(--_theme-base,var(--color-contrast-900));background:0 0;border-color:#0000}:host([variant=ghost]) .remove-btn{border:var(--border) solid var(--_theme-focus,var(--color-contrast-400))}:host([variant=ghost]) .remove-btn:hover{background:color-mix(in srgb, currentcolor 15%, transparent)}:host(:not([variant]):is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip,:host([variant=solid]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip{background:var(--_theme-focus,var(--color-contrast-800))}:host(:not([variant]):is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip,:host([variant=solid]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip{background:var(--_theme-content,var(--color-contrast-900));box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-focus,var(--color-contrast-700))}:host([variant=flat]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-content,var(--color-contrast-900));box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-focus,var(--color-contrast-700));border-color:var(--_theme-focus,var(--color-contrast-700))}:host([variant=bordered]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-content,var(--color-contrast-900));box-shadow:var(--inset-shadow-sm)}:host([variant=outline]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip{background:var(--_theme-backdrop,var(--color-contrast-100));border-color:var(--_theme-focus,var(--color-contrast-700))}:host([variant=outline]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-base,var(--color-contrast-700));box-shadow:var(--inset-shadow-2xs)}:host([variant=ghost]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:hover .chip{background:var(--_theme-backdrop,var(--color-contrast-100))}:host([variant=ghost]:is([mode=selectable],[mode=action]):not([disabled])) .chip-btn:active .chip{color:var(--_theme-contrast,var(--color-contrast-50));background:var(--_theme-base,var(--color-contrast-700));box-shadow:var(--inset-shadow-2xs)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=chip.css?inline.js.map

package/dist/feedback/chip/chip.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.css?inline.js","names":[],"sources":["../../../src/feedback/chip/chip.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--chip-bg, var(--color-contrast-150, var(--color-contrast-100)));\n    --_color: var(--chip-color, var(--color-contrast-800));\n    --_border-color: var(--chip-border-color, transparent);\n    --_radius: var(--chip-radius, var(--rounded-full));\n    --_font-size: var(--chip-font-size, var(--text-sm));\n    --_font-weight: var(--chip-font-weight, var(--font-medium));\n    --_padding-x: var(--chip-padding-x, var(--size-2-5));\n    --_padding-y: var(--chip-padding-y, var(--size-0-5));\n    --_gap: var(--chip-gap, var(--size-1));\n\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    vertical-align: middle;\n  }\n\n  .chip {\n    position: relative;\n    box-sizing: border-box;\n    display: inline-flex;\n    gap: var(--_gap);\n    align-items: center;\n    max-width: 100%;\n    padding: var(--_padding-y) var(--_padding-x);\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1.2;\n    color: var(--_color);\n    white-space: nowrap;\n    background: var(--_bg);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast),\n      color var(--transition-fast);\n  }\n\n  .label {\n    flex: 1;\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ========================================\n       Remove Button\n       ======================================== */\n\n  .remove-btn {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1.35em;\n    height: 1.35em;\n    padding: 0;\n    margin-inline: var(--size-0-5) calc(var(--size-2) * -1);\n    color: inherit;\n    cursor: pointer;\n    background: color-mix(in srgb, currentcolor 12%, transparent);\n    border: none;\n    border-radius: var(--_radius);\n    opacity: 0.7;\n    transition:\n      background var(--transition-fast),\n      opacity var(--transition-fast);\n  }\n\n  .remove-btn:hover {\n    background: color-mix(in srgb, currentcolor 28%, transparent);\n    opacity: 1;\n  }\n\n  .remove-btn:focus-visible {\n    outline: 2px solid currentcolor;\n    outline-offset: 1px;\n    opacity: 1;\n  }\n\n  /* ========================================\n       Icon slot\n       ======================================== */\n\n  ::slotted([slot='icon']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n  }\n\n  .chip-btn {\n    display: inline-flex;\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    font: inherit;\n    color: inherit;\n    text-align: inherit;\n    cursor: pointer;\n    background: none;\n    border: none;\n  }\n\n  .chip-btn:disabled {\n    cursor: not-allowed;\n  }\n\n  :host([mode='selectable'][checked]) .chip {\n    outline: var(--border-2) solid var(--_theme-base, currentColor);\n    outline-offset: -2px;\n  }\n\n  :host([mode='selectable']:not([disabled])) .chip,\n  :host([mode='action']:not([disabled])) .chip {\n    cursor: pointer;\n  }\n\n  .chip-btn:focus-visible .chip {\n    outline: 2px solid var(--_theme-base, currentColor);\n    outline-offset: 2px;\n  }\n}\n\n@layer buildit.variants {\n  /* Solid (Default) — full theme color fill */\n  :host(:not([variant])) .chip,\n  :host([variant='solid']) .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-base, var(--color-contrast-700));\n    border-color: transparent;\n  }\n\n  /* Flat — subtle tint */\n  :host([variant='flat']) .chip {\n    color: var(--_theme-base, var(--color-contrast-800));\n    background: color-mix(in srgb, var(--_theme-backdrop, var(--color-contrast-200)) 55%, transparent);\n    border-color: transparent;\n  }\n\n  /* Bordered — backdrop fill with themed border */\n  :host([variant='bordered']) .chip {\n    color: var(--_theme-base, var(--color-contrast-900));\n    background: var(--_theme-backdrop, var(--color-contrast-50));\n    border-color: var(--_theme-border, var(--color-contrast-300));\n  }\n\n  :host([variant='bordered']) .remove-btn {\n    color: var(--_theme-backdrop, var(--color-contrast-50));\n    background: var(--_theme-focus, var(--color-contrast-700));\n    border: var(--border) solid var(--_theme-focus, var(--color-contrast-700));\n  }\n\n  :host([variant='bordered']) .remove-btn:hover {\n    background: color-mix(in srgb, var(--_theme-focus, var(--color-contrast-700)) 80%, black);\n    opacity: 1;\n  }\n\n  /* Outline — transparent with colored border */\n  :host([variant='outline']) .chip {\n    color: var(--_theme-base, var(--color-contrast-900));\n    background: transparent;\n    border-color: var(--_theme-base, var(--color-contrast-400));\n  }\n\n  :host([variant='outline']) .remove-btn {\n    color: var(--_theme-backdrop, var(--color-contrast-50));\n    background: var(--_theme-focus, var(--color-contrast-700));\n    border: var(--border) solid var(--_theme-focus, var(--color-contrast-700));\n  }\n\n  :host([variant='outline']) .remove-btn:hover {\n    background: color-mix(in srgb, var(--_theme-focus, var(--color-contrast-700)) 80%, black);\n    opacity: 1;\n  }\n\n  /* Ghost — transparent, no border */\n  :host([variant='ghost']) .chip {\n    color: var(--_theme-base, var(--color-contrast-900));\n    background: transparent;\n    border-color: transparent;\n  }\n\n  :host([variant='ghost']) .remove-btn {\n    border: var(--border) solid var(--_theme-focus, var(--color-contrast-400));\n  }\n\n  :host([variant='ghost']) .remove-btn:hover {\n    background: color-mix(in srgb, currentcolor 15%, transparent);\n  }\n\n  /* ========================================\n     Hover / Active Feedback — interactive modes\n     ======================================== */\n\n  /* Solid (default) */\n  :host(:not([variant]):is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:hover .chip,\n  :host([variant='solid']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:hover .chip {\n    background: var(--_theme-focus, var(--color-contrast-800));\n  }\n\n  :host(:not([variant]):is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:active .chip,\n  :host([variant='solid']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:active .chip {\n    background: var(--_theme-content, var(--color-contrast-900));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  /* Flat */\n  :host([variant='flat']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:hover .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-focus, var(--color-contrast-700));\n  }\n\n  :host([variant='flat']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:active .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-content, var(--color-contrast-900));\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered */\n  :host([variant='bordered']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:hover .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-focus, var(--color-contrast-700));\n    border-color: var(--_theme-focus, var(--color-contrast-700));\n  }\n\n  :host([variant='bordered']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:active .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-content, var(--color-contrast-900));\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline */\n  :host([variant='outline']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:hover .chip {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n    border-color: var(--_theme-focus, var(--color-contrast-700));\n  }\n\n  :host([variant='outline']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:active .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-base, var(--color-contrast-700));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  /* Ghost */\n  :host([variant='ghost']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:hover .chip {\n    background: var(--_theme-backdrop, var(--color-contrast-100));\n  }\n\n  :host([variant='ghost']:is([mode='selectable'], [mode='action']):not([disabled])) .chip-btn:active .chip {\n    color: var(--_theme-contrast, var(--color-contrast-50));\n    background: var(--_theme-base, var(--color-contrast-700));\n    box-shadow: var(--inset-shadow-2xs);\n  }\n}\n"],"mappings":""}

package/dist/feedback/chip/chip.d.ts

@@ -0,0 +1,124 @@
+import type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';
+/** Chip component properties */
+type ChipBaseProps = {
+    /** Accessible label (required for icon-only chips) */
+    'aria-label'?: string;
+    /** Theme color */
+    color?: ThemeColor;
+    /** Disable interactions */
+    disabled?: boolean;
+    /** Border radius override */
+    rounded?: RoundedSize | '';
+    /** Component size */
+    size?: ComponentSize;
+    /** Value associated with this chip — included in emitted event detail */
+    value?: string;
+    /** Visual style variant */
+    variant?: Exclude<VisualVariant, 'glass' | 'text' | 'frost'>;
+};
+type BitChipMode = 'static' | 'removable' | 'selectable' | 'action';
+/** Read-only presentation chip */
+type StaticChipProps = {
+    mode?: Extract<BitChipMode, 'static'>;
+};
+/** Removable chip mode */
+type RemovableChipProps = {
+    mode: Extract<BitChipMode, 'removable'>;
+};
+/** Selectable chip mode */
+type SelectableChipProps = {
+    /** Controlled checked state for `mode="selectable"` */
+    checked?: boolean | undefined;
+    /** Initial checked state for uncontrolled `mode="selectable"` */
+    'default-checked'?: boolean;
+    mode: Extract<BitChipMode, 'selectable'>;
+};
+/** Action chip mode — behaves like a button, fires a click event without maintaining state */
+type ActionChipProps = {
+    mode: Extract<BitChipMode, 'action'>;
+};
+export type BitChipEvents = {
+    change: {
+        checked: boolean;
+        originalEvent: Event;
+        value: string | undefined;
+    };
+    click: {
+        originalEvent: MouseEvent;
+        value: string | undefined;
+    };
+    remove: {
+        originalEvent: MouseEvent;
+        value: string | undefined;
+    };
+};
+export type BitChipProps = ChipBaseProps & (StaticChipProps | RemovableChipProps | SelectableChipProps | ActionChipProps);
+/**
+ * A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.
+ * Commonly used to represent tags, filters, or selected options in a multiselect field.
+ *
+ * @element bit-chip
+ *
+ * @attr {string}  aria-label - Accessible label (required for icon-only chips)
+ * @attr {string}  color     - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string}  variant   - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'
+ * @attr {string}  size      - Component size: 'sm' | 'md' | 'lg'
+ * @attr {string}  rounded   - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+ * @attr {string}  mode      - Interaction mode: 'static' | 'removable' | 'selectable' | 'action'
+ * @attr {boolean} disabled  - Disable the chip
+ * @attr {string}  value     - Value included in emitted event detail
+ * @attr {boolean} checked   - Controlled checked state for selectable chips
+ * @attr {boolean} default-checked - Initial checked state for uncontrolled selectable chips
+ *
+ * @slot         - Chip label text
+ * @slot icon    - Leading icon or decoration
+ *
+ * @event remove - Fired when the remove button is clicked, with `detail.value` and `detail.originalEvent`
+ * @event change - Fired when a selectable chip toggles, with `detail.checked`, `detail.value`, and `detail.originalEvent`
+ * @event click  - Fired when an action chip is clicked, with `detail.value` and `detail.originalEvent`
+ *
+ * @cssprop --chip-bg           - Background color
+ * @cssprop --chip-color        - Text color
+ * @cssprop --chip-border-color - Border color
+ * @cssprop --chip-radius       - Border radius
+ * @cssprop --chip-font-size    - Font size
+ * @cssprop --chip-font-weight  - Font weight
+ * @cssprop --chip-padding-x    - Horizontal padding
+ * @cssprop --chip-padding-y    - Vertical padding
+ * @cssprop --chip-gap          - Gap between icon, label and remove button
+ *
+ * @example
+ * ```html
+ * <!-- Static chip (read-only) -->
+ * <bit-chip color="primary">Design</bit-chip>
+ *
+ * <!-- Removable chip -->
+ * <bit-chip color="success" variant="flat" mode="removable" value="ts">
+ *   TypeScript
+ * </bit-chip>
+ *
+ * <!-- Selectable chip (controlled) -->
+ * <bit-chip color="info" variant="flat" mode="selectable" checked value="ui">
+ *   UI
+ * </bit-chip>
+ *
+ * <!-- Selectable chip (uncontrolled) -->
+ * <bit-chip color="info" variant="flat" mode="selectable" default-checked value="ui">
+ *   UI
+ * </bit-chip>
+ *
+ * <!-- Action chip (acts like a button) -->
+ * <bit-chip color="warning" mode="action" value="add">
+ *   <svg slot="icon" ...></svg>
+ *   Add Item
+ * </bit-chip>
+ *
+ * <!-- Icon-only chip -->
+ * <bit-chip color="error" mode="action" aria-label="Delete">
+ *   <svg slot="icon" ...></svg>
+ * </bit-chip>
+ * ```
+ */
+export declare const CHIP_TAG: string;
+export {};
+//# sourceMappingURL=chip.d.ts.map

package/dist/feedback/chip/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/feedback/chip/chip.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAuCzF,gCAAgC;AAChC,KAAK,aAAa,GAAG;IACnB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,qBAAqB;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;CAC9D,CAAC;AAEF,KAAK,WAAW,GAAG,QAAQ,GAAG,WAAW,GAAG,YAAY,GAAG,QAAQ,CAAC;AAEpE,kCAAkC;AAClC,KAAK,eAAe,GAAG;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;CACvC,CAAC;AAEF,0BAA0B;AAC1B,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;CACzC,CAAC;AAEF,2BAA2B;AAC3B,KAAK,mBAAmB,GAAG;IACzB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;CAC1C,CAAC;AAEF,8FAA8F;AAC9F,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;CACtC,CAAC;AAQF,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,aAAa,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IAC9E,KAAK,EAAE;QAAE,aAAa,EAAE,UAAU,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IAChE,MAAM,EAAE;QAAE,aAAa,EAAE,UAAU,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;CAClE,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,CAAC,eAAe,GAAG,kBAAkB,GAAG,mBAAmB,GAAG,eAAe,CAAC,CAAC;AAEjF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,eAAO,MAAM,QAAQ,QA8KnB,CAAC"}

package/dist/feedback/index.cjs

@@ -0,0 +1 @@
+require(`../alert.cjs`),require(`../badge.cjs`),require(`../chip.cjs`),require(`../progress.cjs`),require(`../skeleton.cjs`),require(`../toast.cjs`);

package/dist/feedback/index.d.ts

@@ -0,0 +1,13 @@
+export { ALERT_TAG } from './alert/alert';
+export type { BitAlertEvents, BitAlertProps } from './alert/alert';
+export { BADGE_TAG } from './badge/badge';
+export type { BitBadgeProps } from './badge/badge';
+export { CHIP_TAG } from './chip/chip';
+export type { BitChipEvents, BitChipProps } from './chip/chip';
+export { PROGRESS_TAG } from './progress/progress';
+export type { BitProgressProps } from './progress/progress';
+export { SKELETON_TAG } from './skeleton/skeleton';
+export type { BitSkeletonProps } from './skeleton/skeleton';
+export { toast, TOAST_TAG } from './toast/toast';
+export type { BitToastEvents, BitToastProps, ToastItem } from './toast/toast';
+//# sourceMappingURL=index.d.ts.map

package/dist/feedback/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/feedback/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACjD,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC"}

package/dist/feedback/index.js

@@ -0,0 +1,6 @@
+import "../alert.js";
+import "../badge.js";
+import "../chip.js";
+import "../progress.js";
+import "../skeleton.js";
+import "../toast.js";

package/dist/feedback/progress/progress.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_height:var(--progress-height,var(--size-2,.5rem));--_radius:var(--progress-radius,var(--rounded-full,9999px));--_circle-size:var(--progress-circle-size,6rem);--_circular-label-size:var(--progress-circular-label-size,var(--text-xl,1.25rem));--_circular-title-size:var(--progress-circular-title-size,var(--text-xs,.75rem));width:100%;display:block}.track{width:100%;height:var(--_height);background:var(--progress-track-bg,var(--color-contrast-300,#ddd));border-radius:var(--_radius);overflow:hidden}.fill{width:var(--_percent,0%);background:var(--progress-fill,var(--_theme-base,#3b82f6));border-radius:inherit;transform-origin:0;height:100%;transition:var(--_motion-transition,width var(--transition-normal))}:host(:dir(rtl)) .fill{transform-origin:100%}@keyframes bit-progress-slide{0%{transform:translate(-150%)scaleX(.6)}50%{transform:translate(50%)scaleX(1)}to{transform:translate(300%)scaleX(.6)}}:host([indeterminate]) .fill{width:40%;animation:var(--_motion-animation,bit-progress-slide 1.5s cubic-bezier(.4, 0, .2, 1) infinite)}:host(:dir(rtl)[indeterminate]) .fill{animation-direction:reverse}.wrapper{gap:var(--progress-label-gap,var(--space-1,.25rem));flex-direction:column;width:100%;display:flex}.header{gap:var(--space-2,.5rem);justify-content:space-between;align-items:baseline;display:none}:host([title]) .header{display:flex}.progress-title{font-size:var(--text-sm,.875rem);font-weight:var(--font-weight-medium,500);color:var(--progress-title-color,currentColor);line-height:1.25}.header-label{display:none}:host([title][label]) .header-label{display:inline}.bar-row{display:contents}:host([label]:not([title])) .bar-row{gap:var(--progress-label-gap,var(--space-2,.5rem));align-items:center;width:100%;display:flex}.track-outer{width:100%;position:relative}:host([label]:not([title])) .track-outer{flex:1;width:auto;min-width:0}.end-label{font-size:var(--text-sm,.875rem);color:var(--progress-label-color,currentColor);white-space:nowrap;flex-shrink:0;line-height:1.25}.row-label{display:none}:host([label]:not([title])) .row-label{display:inline}.floating-label{bottom:calc(100% + var(--space-1,.25rem));left:var(--_percent,0%);padding:var(--space-0-5,.125rem) var(--space-2,.5rem);font-size:var(--text-xs,.75rem);font-weight:var(--font-weight-medium,500);color:var(--color-white,#fff);white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;background:var(--progress-fill,var(--_theme-base,#3b82f6));border-radius:var(--rounded-md,.375rem);line-height:1;display:none;position:absolute;transform:translate(-50%)}:host([floating-label]:not([indeterminate])) .floating-label{display:block}:host([floating-label]:not([indeterminate])) .wrapper{padding-top:calc(var(--text-xs,.75rem) + var(--space-1,.25rem) * 3)}.circular-track{width:var(--_circle-size);height:var(--_circle-size);justify-content:center;align-items:center;display:inline-flex;position:relative}.circular-track svg{width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}.circular-inner{gap:var(--space-0-5,.125rem);padding:calc(8% + var(--_height));text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.circular-label{text-overflow:ellipsis;max-width:100%;font-size:var(--_circular-label-size);font-weight:var(--font-weight-semibold,600);color:var(--progress-label-color,currentColor);white-space:nowrap;line-height:1;overflow:hidden}.circular-title{text-overflow:ellipsis;max-width:100%;font-size:var(--_circular-title-size);color:var(--progress-title-color,var(--color-contrast-500,#6b7280));white-space:nowrap;line-height:1.25;overflow:hidden}.circular-label:empty,.circular-title:empty{display:none}.circle-bg{fill:none;stroke:var(--progress-track-bg,var(--color-contrast-300,#ddd));stroke-width:var(--progress-stroke-width,calc(var(--_height) * 1.2))}.circle-fill{fill:none;stroke:var(--progress-fill,var(--_theme-base,#3b82f6));stroke-width:var(--progress-stroke-width,calc(var(--_height) * 1.2));stroke-linecap:round;transition:var(--_motion-transition,stroke-dashoffset var(--transition-normal))}@keyframes bit-progress-spin{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@keyframes bit-progress-dash{0%{stroke-dasharray:1px var(--_circ);stroke-dashoffset:var(--_circ)}40%{stroke-dasharray:calc(var(--_circ) * .75) var(--_circ);stroke-dashoffset:calc(var(--_circ) * -.1)}60%{stroke-dasharray:calc(var(--_circ) * .75) var(--_circ);stroke-dashoffset:calc(var(--_circ) * -.1)}to{stroke-dasharray:1px var(--_circ);stroke-dashoffset:calc(var(--_circ) * -.9)}}:host([indeterminate]) .circular-track svg{animation:var(--_motion-animation,bit-progress-spin 1.4s linear infinite)}:host([indeterminate]) .circle-fill{animation:var(--_motion-animation,bit-progress-dash 1.4s ease-in-out infinite)}}@layer buildit.utilities{:host([size=sm]){--_height:var(--size-1,.25rem);--_circle-size:4rem;--_circular-label-size:var(--text-sm,.875rem);--_circular-title-size:var(--text-2xs,.625rem)}:host([size=md]){--_height:var(--size-2,.5rem);--_circle-size:6rem}:host([size=lg]){--_height:var(--size-3-5,.875rem);--_circle-size:9rem;--_circular-label-size:var(--text-3xl,1.875rem);--_circular-title-size:var(--text-sm,.875rem)}}@media (prefers-reduced-motion:reduce){:host([indeterminate]) .fill{opacity:.6;width:100%}:host([indeterminate]) .circle-fill{stroke-dasharray:none}}`;exports.default=e;
+//# sourceMappingURL=progress.css?inline.cjs.map

package/dist/feedback/progress/progress.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.css?inline.cjs","names":[],"sources":["../../../src/feedback/progress/progress.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_height: var(--progress-height, var(--size-2, 0.5rem));\n    --_radius: var(--progress-radius, var(--rounded-full, 9999px));\n    --_circle-size: var(--progress-circle-size, 6rem);\n    --_circular-label-size: var(--progress-circular-label-size, var(--text-xl, 1.25rem));\n    --_circular-title-size: var(--progress-circular-title-size, var(--text-xs, 0.75rem));\n\n    display: block;\n\n    /* Stretch to fill the parent container (matches native <progress> behaviour).\n         The host's width is set against its parent, so % widths inside shadow DOM\n         (.track, .fill) resolve correctly in any flex/grid/block context. */\n    width: 100%;\n  }\n\n  /* ========================================\n       Linear Bar\n       ======================================== */\n\n  .track {\n    width: 100%;\n    height: var(--_height);\n    overflow: hidden;\n\n    /* contrast-300 (88% lightness) gives a visible groove in light mode */\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n  }\n\n  .fill {\n    width: var(--_percent, 0%);\n    height: 100%;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: inherit;\n    transform-origin: left;\n    transition: var(--_motion-transition, width var(--transition-normal));\n  }\n\n  /* In RTL the fill grows from the inline-end (physical right) side */\n  :host(:dir(rtl)) .fill {\n    transform-origin: right;\n  }\n\n  /* Indeterminate: sliding bar */\n  @keyframes bit-progress-slide {\n    0% {\n      transform: translateX(-150%) scaleX(0.6);\n    }\n\n    50% {\n      transform: translateX(50%) scaleX(1);\n    }\n\n    100% {\n      transform: translateX(300%) scaleX(0.6);\n    }\n  }\n\n  :host([indeterminate]) .fill {\n    width: 40%;\n    animation: var(--_motion-animation, bit-progress-slide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite);\n  }\n\n  /* In RTL the indeterminate bar sweeps right-to-left */\n  :host(:dir(rtl)[indeterminate]) .fill {\n    animation-direction: reverse;\n  }\n\n  /* ========================================\n       Wrapper / Label / Title / Floating label\n       ======================================== */\n\n  /* Flex-column shell for the linear variant */\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: 100%;\n  }\n\n  /* Header row ─ visible only when [title] is present */\n  .header {\n    display: none;\n    gap: var(--space-2, 0.5rem);\n    align-items: baseline;\n    justify-content: space-between;\n  }\n\n  :host([title]) .header {\n    display: flex;\n  }\n\n  .progress-title {\n    font-size: var(--text-sm, 0.875rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1.25;\n    color: var(--progress-title-color, currentColor);\n  }\n\n  /* Label inside the header ─ only when both [title] and [label] are set */\n  .header-label {\n    display: none;\n  }\n\n  :host([title][label]) .header-label {\n    display: inline;\n  }\n\n  /* Bar row ─ transparent wrapper by default; becomes a flex row when\n       [label] is present without [title] so the label sits beside the bar */\n  .bar-row {\n    display: contents;\n  }\n\n  :host([label]:not([title])) .bar-row {\n    display: flex;\n    gap: var(--progress-label-gap, var(--space-2, 0.5rem));\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Outer track container ─ always position:relative for floating-label */\n  .track-outer {\n    position: relative;\n    width: 100%;\n  }\n\n  :host([label]:not([title])) .track-outer {\n    flex: 1 1 0%;\n    width: auto;\n    min-width: 0;\n  }\n\n  /* Shared label typography */\n  .end-label {\n    flex-shrink: 0;\n    font-size: var(--text-sm, 0.875rem);\n    line-height: 1.25;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  /* Trailing end label ─ shown only when [label] is present without [title] */\n  .row-label {\n    display: none;\n  }\n\n  :host([label]:not([title])) .row-label {\n    display: inline;\n  }\n\n  /* Floating label chip ─────────────────────────────────────────────────\n       Positioned above the fill endpoint.\n       Formula: left = X% (fill width) − Y (half chip width)\n       Implemented as: left: var(--_percent); transform: translateX(-50%)     */\n  .floating-label {\n    position: absolute;\n    bottom: calc(100% + var(--space-1, 0.25rem));\n    left: var(--_percent, 0%);\n    display: none;\n    padding: var(--space-0-5, 0.125rem) var(--space-2, 0.5rem);\n    font-size: var(--text-xs, 0.75rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1;\n    color: var(--color-white, #fff);\n    white-space: nowrap;\n    pointer-events: none;\n    user-select: none;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: var(--rounded-md, 0.375rem);\n    transform: translateX(-50%);\n  }\n\n  :host([floating-label]:not([indeterminate])) .floating-label {\n    display: block;\n  }\n\n  /* Reserve vertical space above the track so the chip does not clip */\n  :host([floating-label]:not([indeterminate])) .wrapper {\n    padding-top: calc(var(--text-xs, 0.75rem) + var(--space-1, 0.25rem) * 3);\n  }\n\n  /* ========================================\n       Circular variant\n       ======================================== */\n\n  .circular-track {\n    position: relative; /* anchor the inner text overlay */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_circle-size);\n    height: var(--_circle-size);\n  }\n\n  .circular-track svg {\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n    transform: rotate(-90deg);\n  }\n\n  /* Inner overlay — label + title stacked and centered inside the ring */\n  .circular-inner {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5, 0.125rem);\n    align-items: center;\n    justify-content: center;\n\n    /* Inset from the stroke edge so text stays clear of the ring */\n    padding: calc(8% + var(--_height));\n    overflow: hidden;\n    text-align: center;\n    pointer-events: none;\n  }\n\n  .circular-label {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-label-size);\n    font-weight: var(--font-weight-semibold, 600);\n    line-height: 1;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  .circular-title {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-title-size);\n    line-height: 1.25;\n    color: var(--progress-title-color, var(--color-contrast-500, #6b7280));\n    white-space: nowrap;\n  }\n\n  /* Hide empty inner text nodes so flexbox gap doesn't create phantom space */\n  .circular-label:empty,\n  .circular-title:empty {\n    display: none;\n  }\n\n  .circle-bg {\n    fill: none;\n    stroke: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n  }\n\n  .circle-fill {\n    fill: none;\n    stroke: var(--progress-fill, var(--_theme-base, #3b82f6));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n    stroke-linecap: round;\n    transition: var(--_motion-transition, stroke-dashoffset var(--transition-normal));\n  }\n\n  @keyframes bit-progress-spin {\n    from {\n      transform: rotate(-90deg);\n    }\n\n    to {\n      transform: rotate(270deg);\n    }\n  }\n\n  @keyframes bit-progress-dash {\n    0% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: var(--_circ);\n    }\n\n    40% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    60% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    100% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.9);\n    }\n  }\n\n  :host([indeterminate]) .circular-track svg {\n    animation: var(--_motion-animation, bit-progress-spin 1.4s linear infinite);\n  }\n\n  :host([indeterminate]) .circle-fill {\n    animation: var(--_motion-animation, bit-progress-dash 1.4s ease-in-out infinite);\n  }\n}\n\n@layer buildit.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-1, 0.25rem);\n    --_circle-size: 4rem;\n    --_circular-label-size: var(--text-sm, 0.875rem);\n    --_circular-title-size: var(--text-2xs, 0.625rem);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-2, 0.5rem);\n    --_circle-size: 6rem;\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-3-5, 0.875rem);\n    --_circle-size: 9rem;\n    --_circular-label-size: var(--text-3xl, 1.875rem);\n    --_circular-title-size: var(--text-sm, 0.875rem);\n  }\n}\n\n/* Extra indeterminate state overrides — cannot be expressed via CSS variables alone */\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .fill {\n    width: 100%;\n    opacity: 0.6;\n  }\n\n  :host([indeterminate]) .circle-fill {\n    stroke-dasharray: none;\n  }\n}\n"],"mappings":""}

package/dist/feedback/progress/progress.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/feedback/progress/progress.css?inline
+var e = "@layer buildit.base{:host{--_height:var(--progress-height,var(--size-2,.5rem));--_radius:var(--progress-radius,var(--rounded-full,9999px));--_circle-size:var(--progress-circle-size,6rem);--_circular-label-size:var(--progress-circular-label-size,var(--text-xl,1.25rem));--_circular-title-size:var(--progress-circular-title-size,var(--text-xs,.75rem));width:100%;display:block}.track{width:100%;height:var(--_height);background:var(--progress-track-bg,var(--color-contrast-300,#ddd));border-radius:var(--_radius);overflow:hidden}.fill{width:var(--_percent,0%);background:var(--progress-fill,var(--_theme-base,#3b82f6));border-radius:inherit;transform-origin:0;height:100%;transition:var(--_motion-transition,width var(--transition-normal))}:host(:dir(rtl)) .fill{transform-origin:100%}@keyframes bit-progress-slide{0%{transform:translate(-150%)scaleX(.6)}50%{transform:translate(50%)scaleX(1)}to{transform:translate(300%)scaleX(.6)}}:host([indeterminate]) .fill{width:40%;animation:var(--_motion-animation,bit-progress-slide 1.5s cubic-bezier(.4, 0, .2, 1) infinite)}:host(:dir(rtl)[indeterminate]) .fill{animation-direction:reverse}.wrapper{gap:var(--progress-label-gap,var(--space-1,.25rem));flex-direction:column;width:100%;display:flex}.header{gap:var(--space-2,.5rem);justify-content:space-between;align-items:baseline;display:none}:host([title]) .header{display:flex}.progress-title{font-size:var(--text-sm,.875rem);font-weight:var(--font-weight-medium,500);color:var(--progress-title-color,currentColor);line-height:1.25}.header-label{display:none}:host([title][label]) .header-label{display:inline}.bar-row{display:contents}:host([label]:not([title])) .bar-row{gap:var(--progress-label-gap,var(--space-2,.5rem));align-items:center;width:100%;display:flex}.track-outer{width:100%;position:relative}:host([label]:not([title])) .track-outer{flex:1;width:auto;min-width:0}.end-label{font-size:var(--text-sm,.875rem);color:var(--progress-label-color,currentColor);white-space:nowrap;flex-shrink:0;line-height:1.25}.row-label{display:none}:host([label]:not([title])) .row-label{display:inline}.floating-label{bottom:calc(100% + var(--space-1,.25rem));left:var(--_percent,0%);padding:var(--space-0-5,.125rem) var(--space-2,.5rem);font-size:var(--text-xs,.75rem);font-weight:var(--font-weight-medium,500);color:var(--color-white,#fff);white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;background:var(--progress-fill,var(--_theme-base,#3b82f6));border-radius:var(--rounded-md,.375rem);line-height:1;display:none;position:absolute;transform:translate(-50%)}:host([floating-label]:not([indeterminate])) .floating-label{display:block}:host([floating-label]:not([indeterminate])) .wrapper{padding-top:calc(var(--text-xs,.75rem) + var(--space-1,.25rem) * 3)}.circular-track{width:var(--_circle-size);height:var(--_circle-size);justify-content:center;align-items:center;display:inline-flex;position:relative}.circular-track svg{width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}.circular-inner{gap:var(--space-0-5,.125rem);padding:calc(8% + var(--_height));text-align:center;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.circular-label{text-overflow:ellipsis;max-width:100%;font-size:var(--_circular-label-size);font-weight:var(--font-weight-semibold,600);color:var(--progress-label-color,currentColor);white-space:nowrap;line-height:1;overflow:hidden}.circular-title{text-overflow:ellipsis;max-width:100%;font-size:var(--_circular-title-size);color:var(--progress-title-color,var(--color-contrast-500,#6b7280));white-space:nowrap;line-height:1.25;overflow:hidden}.circular-label:empty,.circular-title:empty{display:none}.circle-bg{fill:none;stroke:var(--progress-track-bg,var(--color-contrast-300,#ddd));stroke-width:var(--progress-stroke-width,calc(var(--_height) * 1.2))}.circle-fill{fill:none;stroke:var(--progress-fill,var(--_theme-base,#3b82f6));stroke-width:var(--progress-stroke-width,calc(var(--_height) * 1.2));stroke-linecap:round;transition:var(--_motion-transition,stroke-dashoffset var(--transition-normal))}@keyframes bit-progress-spin{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@keyframes bit-progress-dash{0%{stroke-dasharray:1px var(--_circ);stroke-dashoffset:var(--_circ)}40%{stroke-dasharray:calc(var(--_circ) * .75) var(--_circ);stroke-dashoffset:calc(var(--_circ) * -.1)}60%{stroke-dasharray:calc(var(--_circ) * .75) var(--_circ);stroke-dashoffset:calc(var(--_circ) * -.1)}to{stroke-dasharray:1px var(--_circ);stroke-dashoffset:calc(var(--_circ) * -.9)}}:host([indeterminate]) .circular-track svg{animation:var(--_motion-animation,bit-progress-spin 1.4s linear infinite)}:host([indeterminate]) .circle-fill{animation:var(--_motion-animation,bit-progress-dash 1.4s ease-in-out infinite)}}@layer buildit.utilities{:host([size=sm]){--_height:var(--size-1,.25rem);--_circle-size:4rem;--_circular-label-size:var(--text-sm,.875rem);--_circular-title-size:var(--text-2xs,.625rem)}:host([size=md]){--_height:var(--size-2,.5rem);--_circle-size:6rem}:host([size=lg]){--_height:var(--size-3-5,.875rem);--_circle-size:9rem;--_circular-label-size:var(--text-3xl,1.875rem);--_circular-title-size:var(--text-sm,.875rem)}}@media (prefers-reduced-motion:reduce){:host([indeterminate]) .fill{opacity:.6;width:100%}:host([indeterminate]) .circle-fill{stroke-dasharray:none}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=progress.css?inline.js.map

package/dist/feedback/progress/progress.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.css?inline.js","names":[],"sources":["../../../src/feedback/progress/progress.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_height: var(--progress-height, var(--size-2, 0.5rem));\n    --_radius: var(--progress-radius, var(--rounded-full, 9999px));\n    --_circle-size: var(--progress-circle-size, 6rem);\n    --_circular-label-size: var(--progress-circular-label-size, var(--text-xl, 1.25rem));\n    --_circular-title-size: var(--progress-circular-title-size, var(--text-xs, 0.75rem));\n\n    display: block;\n\n    /* Stretch to fill the parent container (matches native <progress> behaviour).\n         The host's width is set against its parent, so % widths inside shadow DOM\n         (.track, .fill) resolve correctly in any flex/grid/block context. */\n    width: 100%;\n  }\n\n  /* ========================================\n       Linear Bar\n       ======================================== */\n\n  .track {\n    width: 100%;\n    height: var(--_height);\n    overflow: hidden;\n\n    /* contrast-300 (88% lightness) gives a visible groove in light mode */\n    background: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    border-radius: var(--_radius);\n  }\n\n  .fill {\n    width: var(--_percent, 0%);\n    height: 100%;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: inherit;\n    transform-origin: left;\n    transition: var(--_motion-transition, width var(--transition-normal));\n  }\n\n  /* In RTL the fill grows from the inline-end (physical right) side */\n  :host(:dir(rtl)) .fill {\n    transform-origin: right;\n  }\n\n  /* Indeterminate: sliding bar */\n  @keyframes bit-progress-slide {\n    0% {\n      transform: translateX(-150%) scaleX(0.6);\n    }\n\n    50% {\n      transform: translateX(50%) scaleX(1);\n    }\n\n    100% {\n      transform: translateX(300%) scaleX(0.6);\n    }\n  }\n\n  :host([indeterminate]) .fill {\n    width: 40%;\n    animation: var(--_motion-animation, bit-progress-slide 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite);\n  }\n\n  /* In RTL the indeterminate bar sweeps right-to-left */\n  :host(:dir(rtl)[indeterminate]) .fill {\n    animation-direction: reverse;\n  }\n\n  /* ========================================\n       Wrapper / Label / Title / Floating label\n       ======================================== */\n\n  /* Flex-column shell for the linear variant */\n  .wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--progress-label-gap, var(--space-1, 0.25rem));\n    width: 100%;\n  }\n\n  /* Header row ─ visible only when [title] is present */\n  .header {\n    display: none;\n    gap: var(--space-2, 0.5rem);\n    align-items: baseline;\n    justify-content: space-between;\n  }\n\n  :host([title]) .header {\n    display: flex;\n  }\n\n  .progress-title {\n    font-size: var(--text-sm, 0.875rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1.25;\n    color: var(--progress-title-color, currentColor);\n  }\n\n  /* Label inside the header ─ only when both [title] and [label] are set */\n  .header-label {\n    display: none;\n  }\n\n  :host([title][label]) .header-label {\n    display: inline;\n  }\n\n  /* Bar row ─ transparent wrapper by default; becomes a flex row when\n       [label] is present without [title] so the label sits beside the bar */\n  .bar-row {\n    display: contents;\n  }\n\n  :host([label]:not([title])) .bar-row {\n    display: flex;\n    gap: var(--progress-label-gap, var(--space-2, 0.5rem));\n    align-items: center;\n    width: 100%;\n  }\n\n  /* Outer track container ─ always position:relative for floating-label */\n  .track-outer {\n    position: relative;\n    width: 100%;\n  }\n\n  :host([label]:not([title])) .track-outer {\n    flex: 1 1 0%;\n    width: auto;\n    min-width: 0;\n  }\n\n  /* Shared label typography */\n  .end-label {\n    flex-shrink: 0;\n    font-size: var(--text-sm, 0.875rem);\n    line-height: 1.25;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  /* Trailing end label ─ shown only when [label] is present without [title] */\n  .row-label {\n    display: none;\n  }\n\n  :host([label]:not([title])) .row-label {\n    display: inline;\n  }\n\n  /* Floating label chip ─────────────────────────────────────────────────\n       Positioned above the fill endpoint.\n       Formula: left = X% (fill width) − Y (half chip width)\n       Implemented as: left: var(--_percent); transform: translateX(-50%)     */\n  .floating-label {\n    position: absolute;\n    bottom: calc(100% + var(--space-1, 0.25rem));\n    left: var(--_percent, 0%);\n    display: none;\n    padding: var(--space-0-5, 0.125rem) var(--space-2, 0.5rem);\n    font-size: var(--text-xs, 0.75rem);\n    font-weight: var(--font-weight-medium, 500);\n    line-height: 1;\n    color: var(--color-white, #fff);\n    white-space: nowrap;\n    pointer-events: none;\n    user-select: none;\n    background: var(--progress-fill, var(--_theme-base, #3b82f6));\n    border-radius: var(--rounded-md, 0.375rem);\n    transform: translateX(-50%);\n  }\n\n  :host([floating-label]:not([indeterminate])) .floating-label {\n    display: block;\n  }\n\n  /* Reserve vertical space above the track so the chip does not clip */\n  :host([floating-label]:not([indeterminate])) .wrapper {\n    padding-top: calc(var(--text-xs, 0.75rem) + var(--space-1, 0.25rem) * 3);\n  }\n\n  /* ========================================\n       Circular variant\n       ======================================== */\n\n  .circular-track {\n    position: relative; /* anchor the inner text overlay */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_circle-size);\n    height: var(--_circle-size);\n  }\n\n  .circular-track svg {\n    width: 100%;\n    height: 100%;\n    overflow: visible;\n    transform: rotate(-90deg);\n  }\n\n  /* Inner overlay — label + title stacked and centered inside the ring */\n  .circular-inner {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--space-0-5, 0.125rem);\n    align-items: center;\n    justify-content: center;\n\n    /* Inset from the stroke edge so text stays clear of the ring */\n    padding: calc(8% + var(--_height));\n    overflow: hidden;\n    text-align: center;\n    pointer-events: none;\n  }\n\n  .circular-label {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-label-size);\n    font-weight: var(--font-weight-semibold, 600);\n    line-height: 1;\n    color: var(--progress-label-color, currentColor);\n    white-space: nowrap;\n  }\n\n  .circular-title {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: var(--_circular-title-size);\n    line-height: 1.25;\n    color: var(--progress-title-color, var(--color-contrast-500, #6b7280));\n    white-space: nowrap;\n  }\n\n  /* Hide empty inner text nodes so flexbox gap doesn't create phantom space */\n  .circular-label:empty,\n  .circular-title:empty {\n    display: none;\n  }\n\n  .circle-bg {\n    fill: none;\n    stroke: var(--progress-track-bg, var(--color-contrast-300, #ddd));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n  }\n\n  .circle-fill {\n    fill: none;\n    stroke: var(--progress-fill, var(--_theme-base, #3b82f6));\n    stroke-width: var(--progress-stroke-width, calc(var(--_height) * 1.2));\n    stroke-linecap: round;\n    transition: var(--_motion-transition, stroke-dashoffset var(--transition-normal));\n  }\n\n  @keyframes bit-progress-spin {\n    from {\n      transform: rotate(-90deg);\n    }\n\n    to {\n      transform: rotate(270deg);\n    }\n  }\n\n  @keyframes bit-progress-dash {\n    0% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: var(--_circ);\n    }\n\n    40% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    60% {\n      stroke-dasharray: calc(var(--_circ) * 0.75) var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.1);\n    }\n\n    100% {\n      stroke-dasharray: 1px var(--_circ);\n      stroke-dashoffset: calc(var(--_circ) * -0.9);\n    }\n  }\n\n  :host([indeterminate]) .circular-track svg {\n    animation: var(--_motion-animation, bit-progress-spin 1.4s linear infinite);\n  }\n\n  :host([indeterminate]) .circle-fill {\n    animation: var(--_motion-animation, bit-progress-dash 1.4s ease-in-out infinite);\n  }\n}\n\n@layer buildit.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-1, 0.25rem);\n    --_circle-size: 4rem;\n    --_circular-label-size: var(--text-sm, 0.875rem);\n    --_circular-title-size: var(--text-2xs, 0.625rem);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-2, 0.5rem);\n    --_circle-size: 6rem;\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-3-5, 0.875rem);\n    --_circle-size: 9rem;\n    --_circular-label-size: var(--text-3xl, 1.875rem);\n    --_circular-title-size: var(--text-sm, 0.875rem);\n  }\n}\n\n/* Extra indeterminate state overrides — cannot be expressed via CSS variables alone */\n@media (prefers-reduced-motion: reduce) {\n  :host([indeterminate]) .fill {\n    width: 100%;\n    opacity: 0.6;\n  }\n\n  :host([indeterminate]) .circle-fill {\n    stroke-dasharray: none;\n  }\n}\n"],"mappings":""}

package/dist/feedback/progress/progress.d.ts

@@ -0,0 +1,64 @@
+import type { ComponentSize, ThemeColor } from '../../types';
+/** Progress bar component properties */
+export type BitProgressProps = {
+    /** Theme color for the fill bar */
+    color?: ThemeColor;
+    /** Floating chip centered above the fill endpoint (linear only). Hidden in indeterminate mode. Position formula: left = fill% − half chip width (CSS: left:X%; transform:translateX(−50%)). */
+    'floating-label'?: string;
+    /** When true, shows an infinite animation — use when progress is unknown. */
+    indeterminate?: boolean;
+    /** Accessible name AND visible text label.
+     * - Linear without `title`: rendered at the end of the bar.
+     * - Linear with `title`: moved into the header row above the bar.
+     * - Circular: large text centered inside the ring. */
+    label?: string;
+    /** Maximum value. Defaults to 100. */
+    max?: number;
+    /** Size variant controlling bar height */
+    size?: ComponentSize;
+    /** Title text.
+     * - Linear: displayed as a header above the bar; moves `label` into the header row.
+     * - Circular: smaller text displayed below the `label` inside the ring. */
+    title?: string;
+    /** 'linear' (default) or 'circular' */
+    type?: 'linear' | 'circular';
+    /** Current progress value (0 to `max`). Ignored when `indeterminate`. */
+    value?: number;
+    /** Human-readable value text for screen readers (e.g. "Step 2 of 5", "75%"). Overrides the raw aria-valuenow when set. */
+    'value-text'?: string;
+};
+/**
+ * A linear progress bar for conveying operation progress.
+ * Supports determinate (known value) and indeterminate (unknown duration) modes.
+ *
+ * @element bit-progress
+ *
+ * @attr {number} value   - Current value (0–max). Defaults to 0.
+ * @attr {number} max     - Maximum value. Defaults to 100.
+ * @attr {boolean} indeterminate - Show infinite animation (ignores value/max).
+ * @attr {string} color   - Theme color: 'primary' | 'success' | 'warning' | 'error' | …
+ * @attr {string} size    - Bar height: 'sm' | 'md' | 'lg'
+ * @attr {string} label          - Visible text label + accessible name. Linear: at bar end (or header row with title). Circular: large text centered inside the ring.
+ * @attr {string} title          - Title text. Linear: header above the bar (moves label to header row). Circular: smaller text below the label inside the ring.
+ * @attr {string} floating-label - Floating chip centered above the fill endpoint (linear only); hidden when indeterminate.
+ *
+ * @cssprop --progress-height               - Bar height override
+ * @cssprop --progress-track-bg             - Track background color
+ * @cssprop --progress-fill                 - Fill bar color
+ * @cssprop --progress-radius               - Border radius
+ * @cssprop --progress-label-gap            - Gap between header/bar row and between bar and trailing label (default 0.25 rem)
+ * @cssprop --progress-title-color          - Title text color (defaults to currentColor)
+ * @cssprop --progress-label-color          - Label text color (defaults to currentColor)
+ * @cssprop --progress-circle-size          - Circular indicator diameter (default 6rem)
+ * @cssprop --progress-circular-label-size  - Font size of the label inside the ring (default --text-xl)
+ * @cssprop --progress-circular-title-size  - Font size of the title inside the ring (default --text-xs)
+ *
+ * @example
+ * ```html
+ * <bit-progress value="45"></bit-progress>
+ * <bit-progress value="75" max="100" color="success" size="lg"></bit-progress>
+ * <bit-progress indeterminate color="primary" label="Loading…"></bit-progress>
+ * ```
+ */
+export declare const PROGRESS_TAG: string;
+//# sourceMappingURL=progress.d.ts.map

package/dist/feedback/progress/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/feedback/progress/progress.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAK7D,wCAAwC;AACxC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mCAAmC;IACnC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,+LAA+L;IAC/L,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;0DAGsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;+EAE2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0HAA0H;IAC1H,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,YAAY,QAmGvB,CAAC"}

package/dist/feedback/skeleton/skeleton.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_bg:var(--skeleton-bg,var(--color-contrast-200));--_highlight:var(--skeleton-highlight,var(--color-contrast-100));--_radius:var(--skeleton-radius,var(--rounded-lg));--_circle-size:var(--skeleton-size,var(--size-10));--_width:var(--skeleton-width,100%);--_height:var(--skeleton-height,var(--size-4));--_line-gap:var(--skeleton-line-gap,var(--size-2));--_last-line-width:var(--skeleton-last-line-width,60%);--_duration:var(--skeleton-duration,1.6s);--_stripe-size:var(--skeleton-stripe-size,8px);width:var(--_width);height:var(--_height);display:inline-block}.stack{gap:var(--_line-gap);width:100%;height:100%;display:grid}.bone{background:var(--_bg);border-radius:var(--_radius);width:100%;height:100%;position:relative;overflow:hidden}.bone:after{content:"";background:linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);animation:var(--_motion-animation,bit-skeleton-shimmer var(--_duration) linear infinite);position:absolute;inset:0;transform:translate(-100%)}:host([data-animated=false]) .bone:after{display:none}:host([data-paused]) .bone:after{animation-play-state:paused}@keyframes bit-skeleton-shimmer{to{transform:translate(100%)}}:host(:dir(rtl)) .bone:after{animation-direction:reverse}}@layer buildit.variants{:host([variant=circle]){--_radius:var(--rounded-full);width:var(--skeleton-width,var(--_circle-size));height:var(--skeleton-height,var(--_circle-size));aspect-ratio:1}:host([variant=text]){--_height:var(--size-3);--_radius:var(--rounded-sm);height:auto}:host([variant=text]) .stack{height:auto}:host([variant=text]) .bone{height:var(--_height)}:host([variant=text]) .bone[data-last=true]{width:var(--_last-line-width)}}@layer buildit.striped{:host([striped]) .stack{width:99%}:host([striped]) .bone{--_stripe-color:var(--skeleton-stripe-color,var(--color-contrast-400));border:var(--border) dashed var(--_stripe-color);background-color:#0000}:host([striped]) .bone:before{--_stripe-color:var(--skeleton-stripe-color,var(--color-contrast-300));content:"";background-color:var(--_stripe-color);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E");-webkit-mask-size:var(--_stripe-size) var(--_stripe-size);-webkit-mask-size:var(--_stripe-size) var(--_stripe-size);mask-size:var(--_stripe-size) var(--_stripe-size);position:absolute;inset:0}:host([striped]) .bone:after{display:none}}@layer buildit.utilities{:host([size=sm]){--_height:var(--size-3);--_circle-size:var(--size-8)}:host([size=md]){--_height:var(--size-4);--_circle-size:var(--size-10)}:host([size=lg]){--_height:var(--size-6);--_circle-size:var(--size-14)}}@media (forced-colors:active){.bone{background:buttonface;border:1px solid buttontext}.bone:after{display:none}}`;exports.default=e;
+//# sourceMappingURL=skeleton.css?inline.cjs.map

package/dist/feedback/skeleton/skeleton.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.css?inline.cjs","names":[],"sources":["../../../src/feedback/skeleton/skeleton.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--skeleton-bg, var(--color-contrast-200));\n    --_highlight: var(--skeleton-highlight, var(--color-contrast-100));\n    --_radius: var(--skeleton-radius, var(--rounded-lg));\n    --_circle-size: var(--skeleton-size, var(--size-10));\n    --_width: var(--skeleton-width, 100%);\n    --_height: var(--skeleton-height, var(--size-4));\n    --_line-gap: var(--skeleton-line-gap, var(--size-2));\n    --_last-line-width: var(--skeleton-last-line-width, 60%);\n    --_duration: var(--skeleton-duration, 1.6s);\n    --_stripe-size: var(--skeleton-stripe-size, 8px);\n\n    display: inline-block;\n    width: var(--_width);\n    height: var(--_height);\n  }\n\n  .stack {\n    display: grid;\n    gap: var(--_line-gap);\n    width: 100%;\n    height: 100%;\n  }\n\n  .bone {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  .bone::after {\n    position: absolute;\n    inset: 0;\n    content: '';\n    background: linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);\n    transform: translateX(-100%);\n    animation: var(--_motion-animation, bit-skeleton-shimmer var(--_duration) linear infinite);\n  }\n\n  :host([data-animated='false']) .bone::after {\n    display: none;\n  }\n\n  /* Pause shimmer when scrolled out of the viewport — no visible effect, saves GPU */\n  :host([data-paused]) .bone::after {\n    animation-play-state: paused;\n  }\n\n  @keyframes bit-skeleton-shimmer {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  /* In RTL the shimmer should sweep right-to-left */\n  :host(:dir(rtl)) .bone::after {\n    animation-direction: reverse;\n  }\n}\n\n@layer buildit.variants {\n  /* Circle variant — avatars, icons */\n  :host([variant='circle']) {\n    --_radius: var(--rounded-full);\n\n    width: var(--skeleton-width, var(--_circle-size));\n    height: var(--skeleton-height, var(--_circle-size));\n    aspect-ratio: 1 / 1;\n  }\n\n  /* Text variant — thinner, for inline text lines */\n  :host([variant='text']) {\n    --_height: var(--size-3);\n    --_radius: var(--rounded-sm);\n\n    height: auto;\n  }\n\n  :host([variant='text']) .stack {\n    height: auto;\n  }\n\n  :host([variant='text']) .bone {\n    height: var(--_height);\n  }\n\n  :host([variant='text']) .bone[data-last='true'] {\n    width: var(--_last-line-width);\n  }\n}\n\n@layer buildit.striped {\n  :host([striped]) .stack {\n    width: 99%;\n  }\n\n  :host([striped]) .bone {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-400));\n\n    background-color: transparent;\n    border: var(--border) dashed var(--_stripe-color);\n  }\n\n  :host([striped]) .bone::before {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-300));\n\n    position: absolute;\n    inset: 0;\n    content: '';\n    background-color: var(--_stripe-color);\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E\");\n    mask-size: var(--_stripe-size) var(--_stripe-size);\n  }\n\n  :host([striped]) .bone::after {\n    display: none;\n  }\n}\n\n@layer buildit.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-3);\n    --_circle-size: var(--size-8);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-4);\n    --_circle-size: var(--size-10);\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-6);\n    --_circle-size: var(--size-14);\n  }\n}\n\n@media (forced-colors: active) {\n  .bone {\n    background: ButtonFace;\n    border: 1px solid ButtonText;\n  }\n\n  .bone::after {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/feedback/skeleton/skeleton.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/feedback/skeleton/skeleton.css?inline
+var e = "@layer buildit.base{:host{--_bg:var(--skeleton-bg,var(--color-contrast-200));--_highlight:var(--skeleton-highlight,var(--color-contrast-100));--_radius:var(--skeleton-radius,var(--rounded-lg));--_circle-size:var(--skeleton-size,var(--size-10));--_width:var(--skeleton-width,100%);--_height:var(--skeleton-height,var(--size-4));--_line-gap:var(--skeleton-line-gap,var(--size-2));--_last-line-width:var(--skeleton-last-line-width,60%);--_duration:var(--skeleton-duration,1.6s);--_stripe-size:var(--skeleton-stripe-size,8px);width:var(--_width);height:var(--_height);display:inline-block}.stack{gap:var(--_line-gap);width:100%;height:100%;display:grid}.bone{background:var(--_bg);border-radius:var(--_radius);width:100%;height:100%;position:relative;overflow:hidden}.bone:after{content:\"\";background:linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);animation:var(--_motion-animation,bit-skeleton-shimmer var(--_duration) linear infinite);position:absolute;inset:0;transform:translate(-100%)}:host([data-animated=false]) .bone:after{display:none}:host([data-paused]) .bone:after{animation-play-state:paused}@keyframes bit-skeleton-shimmer{to{transform:translate(100%)}}:host(:dir(rtl)) .bone:after{animation-direction:reverse}}@layer buildit.variants{:host([variant=circle]){--_radius:var(--rounded-full);width:var(--skeleton-width,var(--_circle-size));height:var(--skeleton-height,var(--_circle-size));aspect-ratio:1}:host([variant=text]){--_height:var(--size-3);--_radius:var(--rounded-sm);height:auto}:host([variant=text]) .stack{height:auto}:host([variant=text]) .bone{height:var(--_height)}:host([variant=text]) .bone[data-last=true]{width:var(--_last-line-width)}}@layer buildit.striped{:host([striped]) .stack{width:99%}:host([striped]) .bone{--_stripe-color:var(--skeleton-stripe-color,var(--color-contrast-400));border:var(--border) dashed var(--_stripe-color);background-color:#0000}:host([striped]) .bone:before{--_stripe-color:var(--skeleton-stripe-color,var(--color-contrast-300));content:\"\";background-color:var(--_stripe-color);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E\");-webkit-mask-size:var(--_stripe-size) var(--_stripe-size);-webkit-mask-size:var(--_stripe-size) var(--_stripe-size);mask-size:var(--_stripe-size) var(--_stripe-size);position:absolute;inset:0}:host([striped]) .bone:after{display:none}}@layer buildit.utilities{:host([size=sm]){--_height:var(--size-3);--_circle-size:var(--size-8)}:host([size=md]){--_height:var(--size-4);--_circle-size:var(--size-10)}:host([size=lg]){--_height:var(--size-6);--_circle-size:var(--size-14)}}@media (forced-colors:active){.bone{background:buttonface;border:1px solid buttontext}.bone:after{display:none}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=skeleton.css?inline.js.map

package/dist/feedback/skeleton/skeleton.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.css?inline.js","names":[],"sources":["../../../src/feedback/skeleton/skeleton.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--skeleton-bg, var(--color-contrast-200));\n    --_highlight: var(--skeleton-highlight, var(--color-contrast-100));\n    --_radius: var(--skeleton-radius, var(--rounded-lg));\n    --_circle-size: var(--skeleton-size, var(--size-10));\n    --_width: var(--skeleton-width, 100%);\n    --_height: var(--skeleton-height, var(--size-4));\n    --_line-gap: var(--skeleton-line-gap, var(--size-2));\n    --_last-line-width: var(--skeleton-last-line-width, 60%);\n    --_duration: var(--skeleton-duration, 1.6s);\n    --_stripe-size: var(--skeleton-stripe-size, 8px);\n\n    display: inline-block;\n    width: var(--_width);\n    height: var(--_height);\n  }\n\n  .stack {\n    display: grid;\n    gap: var(--_line-gap);\n    width: 100%;\n    height: 100%;\n  }\n\n  .bone {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background: var(--_bg);\n    border-radius: var(--_radius);\n  }\n\n  .bone::after {\n    position: absolute;\n    inset: 0;\n    content: '';\n    background: linear-gradient(90deg, var(--_bg) 0%, var(--_highlight) 50%, var(--_bg) 100%);\n    transform: translateX(-100%);\n    animation: var(--_motion-animation, bit-skeleton-shimmer var(--_duration) linear infinite);\n  }\n\n  :host([data-animated='false']) .bone::after {\n    display: none;\n  }\n\n  /* Pause shimmer when scrolled out of the viewport — no visible effect, saves GPU */\n  :host([data-paused]) .bone::after {\n    animation-play-state: paused;\n  }\n\n  @keyframes bit-skeleton-shimmer {\n    to {\n      transform: translateX(100%);\n    }\n  }\n\n  /* In RTL the shimmer should sweep right-to-left */\n  :host(:dir(rtl)) .bone::after {\n    animation-direction: reverse;\n  }\n}\n\n@layer buildit.variants {\n  /* Circle variant — avatars, icons */\n  :host([variant='circle']) {\n    --_radius: var(--rounded-full);\n\n    width: var(--skeleton-width, var(--_circle-size));\n    height: var(--skeleton-height, var(--_circle-size));\n    aspect-ratio: 1 / 1;\n  }\n\n  /* Text variant — thinner, for inline text lines */\n  :host([variant='text']) {\n    --_height: var(--size-3);\n    --_radius: var(--rounded-sm);\n\n    height: auto;\n  }\n\n  :host([variant='text']) .stack {\n    height: auto;\n  }\n\n  :host([variant='text']) .bone {\n    height: var(--_height);\n  }\n\n  :host([variant='text']) .bone[data-last='true'] {\n    width: var(--_last-line-width);\n  }\n}\n\n@layer buildit.striped {\n  :host([striped]) .stack {\n    width: 99%;\n  }\n\n  :host([striped]) .bone {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-400));\n\n    background-color: transparent;\n    border: var(--border) dashed var(--_stripe-color);\n  }\n\n  :host([striped]) .bone::before {\n    --_stripe-color: var(--skeleton-stripe-color, var(--color-contrast-300));\n\n    position: absolute;\n    inset: 0;\n    content: '';\n    background-color: var(--_stripe-color);\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cline x1='0' y1='8' x2='8' y2='0' stroke='white' stroke-width='1'/%3E%3C/svg%3E\");\n    mask-size: var(--_stripe-size) var(--_stripe-size);\n  }\n\n  :host([striped]) .bone::after {\n    display: none;\n  }\n}\n\n@layer buildit.utilities {\n  :host([size='sm']) {\n    --_height: var(--size-3);\n    --_circle-size: var(--size-8);\n  }\n\n  :host([size='md']) {\n    --_height: var(--size-4);\n    --_circle-size: var(--size-10);\n  }\n\n  :host([size='lg']) {\n    --_height: var(--size-6);\n    --_circle-size: var(--size-14);\n  }\n}\n\n@media (forced-colors: active) {\n  .bone {\n    background: ButtonFace;\n    border: 1px solid ButtonText;\n  }\n\n  .bone::after {\n    display: none;\n  }\n}\n"],"mappings":""}

package/dist/feedback/skeleton/skeleton.d.ts

@@ -0,0 +1,61 @@
+import type { ComponentSize } from '../../types';
+/** Skeleton loader component properties */
+export type BitSkeletonProps = {
+    /** Toggle shimmer animation */
+    animated?: boolean;
+    /** Height override (e.g. '1rem', '3rem') */
+    height?: string;
+    /** Number of text lines for `variant='text'` */
+    lines?: number;
+    /** Radius override (e.g. '9999px', 'var(--rounded-xl)') */
+    radius?: string;
+    /** Size preset controlling line height and circle size */
+    size?: ComponentSize;
+    /** Render diagonal stripes instead of the shimmer — useful as a design-mode placeholder */
+    striped?: boolean;
+    /** Visual variant: 'rect' (default), 'circle', or 'text' */
+    variant?: 'rect' | 'circle' | 'text';
+    /** Width override (e.g. '12rem', '70%') */
+    width?: string;
+};
+/**
+ * A shimmer placeholder that represents loading content.
+ * Control dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,
+ * or via `width` / `height` inline styles.
+ *
+ * @element bit-skeleton
+ *
+ * @attr {string}  variant  - Shape: 'rect' (default) | 'circle' | 'text'
+ * @attr {string}  size     - Height/circle preset: 'sm' | 'md' | 'lg'
+ * @attr {string}  width    - Width override (CSS length/percentage)
+ * @attr {string}  height   - Height override (CSS length)
+ * @attr {string}  radius   - Radius override
+ * @attr {boolean} animated - Disable with `animated="false"`
+ * @attr {number}  lines    - Text line count (only for `variant='text'`)
+ * @attr {boolean} striped  - Replace shimmer with diagonal stripes
+ *
+ * @cssprop --skeleton-bg          - Base shimmer color
+ * @cssprop --skeleton-highlight - Shimmer highlight color
+ * @cssprop --skeleton-radius    - Border radius
+ * @cssprop --skeleton-size      - Circle fallback size
+ * @cssprop --skeleton-width     - Width (default: 100%)
+ * @cssprop --skeleton-height    - Height (default: var(--size-4))
+ * @cssprop --skeleton-line-gap  - Vertical gap between text lines
+ * @cssprop --skeleton-last-line-width - Width of the final text line
+ * @cssprop --skeleton-duration    - Shimmer animation duration
+ * @cssprop --skeleton-stripe-size  - Width of each diagonal stripe (default: 6px)
+ *
+ * @example
+ * ```html
+ * <!-- Paragraph lines -->
+ * <bit-skeleton variant="text" lines="3" width="100%"></bit-skeleton>
+ *
+ * <!-- Avatar -->
+ * <bit-skeleton variant="circle" size="md"></bit-skeleton>
+ *
+ * <!-- Card image -->
+ * <bit-skeleton width="100%" height="10rem"></bit-skeleton>
+ * ```
+ */
+export declare const SKELETON_TAG: string;
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/feedback/skeleton/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/feedback/skeleton/skeleton.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAKjD,2CAA2C;AAC3C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACrC,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,YAAY,QAgEvB,CAAC"}

package/dist/feedback/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { TOAST_TAG, type ToastElement, type ToastItem, type BitToastProps, toast } from './toast';
+//# sourceMappingURL=index.d.ts.map

package/dist/feedback/toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/feedback/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}