@vielzeug/buildit 2.0.0

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

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_position:var(--toast-position,fixed);--_inset-top:var(--toast-inset-top,auto);--_inset-bottom:var(--toast-inset-bottom,1rem);--_inset-right:var(--toast-inset-right,1rem);--_inset-left:var(--toast-inset-left,auto);--_z-index:var(--toast-z-index,9999);--_max-width:var(--toast-max-width,400px);--_gap:var(--toast-gap,.5rem);position:var(--_position);inset:var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);z-index:var(--_z-index);gap:var(--_gap);max-width:var(--_max-width);pointer-events:none;flex-direction:column;display:flex}:host([position=top-left]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-left:1rem;--_inset-right:auto}:host([position=top-center]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-left:50%;--_inset-right:auto;transform:translate(-50%)}:host([position=top-right]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-right:1rem;--_inset-left:auto}:host([position=bottom-left]){--_inset-bottom:1rem;--_inset-left:1rem;--_inset-right:auto;--_inset-top:auto}:host([position=bottom-center]){--_inset-bottom:1rem;--_inset-left:50%;--_inset-right:auto;--_inset-top:auto;transform:translate(-50%)}:host([position=bottom-right]){--_inset-bottom:1rem;--_inset-right:1rem;--_inset-left:auto;--_inset-top:auto}.toast-container{perspective:1200px;perspective-origin:50%;transition:var(--_motion-transition,row-gap var(--transition-normal,.35s) ease);grid-template-rows:1fr;grid-template-columns:1fr;row-gap:0;display:grid}.toast-live-region{display:contents}:host(.hovered) .toast-container{row-gap:var(--_gap)}:host(:not(.hovered)) .toast-wrapper{grid-area:1/1;align-self:end}:host([position^=top]:not(.hovered)) .toast-wrapper{align-self:start}.toast-wrapper{pointer-events:auto;transform-origin:bottom;transition:var(--_motion-transition,transform .5s cubic-bezier(.34, 1.1, .64, 1), opacity .5s cubic-bezier(.34, 1.1, .64, 1), filter .5s cubic-bezier(.34, 1.1, .64, 1));will-change:transform, opacity, filter;position:relative}@starting-style{.toast-wrapper{opacity:0;transform:translateY(1.5rem)scale(.92)}:host([position^=top]) .toast-wrapper{transform:translateY(-1.5rem)scale(.92)}}.toast-wrapper.exiting{pointer-events:none;animation:var(--_motion-animation,toast-exit .3s ease-out forwards);z-index:-1!important;transition:none!important}@keyframes toast-exit{to{opacity:0;transform:scale(.7)}}:host(:not(.hovered)) .toast-wrapper:last-child{z-index:3;opacity:1;filter:brightness();transform:translateY(0)scale(1)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(2){z-index:2;pointer-events:none;opacity:.85;filter:brightness(.95);transform:translateY(-8px)scale(.95)rotateX(3deg)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(3){z-index:1;pointer-events:none;opacity:.7;filter:brightness(.9);transform:translateY(-14px)scale(.9)rotateX(5deg)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(n+4){pointer-events:none;opacity:0}:host(.hovered) .toast-wrapper{grid-area:auto/1;align-self:stretch;z-index:auto!important;pointer-events:auto!important;opacity:1!important;filter:brightness()!important;transform:none!important}:host(.hovered) .toast-wrapper:nth-last-child(2){transition-delay:50ms}:host(.hovered) .toast-wrapper:nth-last-child(3){transition-delay:.1s}:host(.hovered) .toast-wrapper:nth-last-child(n+4){transition-delay:.15s}:host([position^=top]) .toast-wrapper{transform-origin:top}:host([position^=top]:not(.hovered)) .toast-wrapper:nth-last-child(2){transform:translateY(8px)scale(.95)rotateX(-3deg)}:host([position^=top]:not(.hovered)) .toast-wrapper:nth-last-child(3){transform:translateY(14px)scale(.9)rotateX(-5deg)}::slotted(bit-alert){width:100%;box-shadow:var(--shadow-lg);margin:0}.toast-wrapper.exiting ::slotted(bit-alert){transition:none!important}.toast-actions{gap:var(--size-4);justify-content:flex-end;display:flex}@media (width<=480px){:host{--_max-width:calc(100vw - var(--size-4));--_inset-right:var(--size-2);--_inset-left:var(--size-2)}:host([position=top-center]){--_inset-left:var(--size-2);transform:none}:host([position=top-center]):not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-2)}:host([position=top-center]):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}:host([position=bottom-center]){--_inset-left:var(--size-2);transform:none}:host([position=bottom-center]):not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-2)}:host([position=bottom-center]):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}}}`;exports.default=e;
+//# sourceMappingURL=toast.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.css?inline.cjs","names":[],"sources":["../../../src/feedback/toast/toast.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_position: var(--toast-position, fixed);\n    --_inset-top: var(--toast-inset-top, auto);\n    --_inset-bottom: var(--toast-inset-bottom, 1rem);\n    --_inset-right: var(--toast-inset-right, 1rem);\n    --_inset-left: var(--toast-inset-left, auto);\n    --_z-index: var(--toast-z-index, 9999);\n    --_max-width: var(--toast-max-width, 400px);\n    --_gap: var(--toast-gap, 0.5rem);\n\n    position: var(--_position);\n    inset: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);\n    z-index: var(--_z-index);\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    max-width: var(--_max-width);\n    pointer-events: none;\n  }\n\n  /* Position variants */\n  :host([position='top-left']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-left: 1rem;\n    --_inset-right: auto;\n  }\n\n  :host([position='top-center']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='top-right']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-right: 1rem;\n    --_inset-left: auto;\n  }\n\n  :host([position='bottom-left']) {\n    --_inset-bottom: 1rem;\n    --_inset-left: 1rem;\n    --_inset-right: auto;\n    --_inset-top: auto;\n  }\n\n  :host([position='bottom-center']) {\n    --_inset-bottom: 1rem;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n    --_inset-top: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='bottom-right']) {\n    --_inset-bottom: 1rem;\n    --_inset-right: 1rem;\n    --_inset-left: auto;\n    --_inset-top: auto;\n  }\n\n  .toast-container {\n    display: grid;\n    grid-template-rows: 1fr;\n    grid-template-columns: 1fr;\n    row-gap: 0;\n    perspective: 1200px;\n    perspective-origin: center center;\n    transition: var(--_motion-transition, row-gap var(--transition-normal, 0.35s) ease);\n  }\n\n  /* Keep ARIA live regions without affecting stacking layout geometry. */\n  .toast-live-region {\n    display: contents;\n  }\n\n  :host(.hovered) .toast-container {\n    row-gap: var(--_gap);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper {\n    grid-row: 1;\n    grid-column: 1;\n    align-self: end;\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper {\n    align-self: start;\n  }\n\n  .toast-wrapper {\n    position: relative;\n    pointer-events: auto;\n    transform-origin: center bottom;\n    transition: var(\n      --_motion-transition,\n      transform 0.5s cubic-bezier(0.34, 1.1, 0.64, 1),\n      opacity 0.5s cubic-bezier(0.34, 1.1, 0.64, 1),\n      filter 0.5s cubic-bezier(0.34, 1.1, 0.64, 1)\n    );\n    will-change: transform, opacity, filter;\n  }\n\n  /* Enter animation via @starting-style — no JS class needed */\n  @starting-style {\n    .toast-wrapper {\n      opacity: 0;\n      transform: translateY(1.5rem) scale(0.92);\n    }\n\n    :host([position^='top']) .toast-wrapper {\n      transform: translateY(-1.5rem) scale(0.92);\n    }\n  }\n\n  /* Exit animation */\n  .toast-wrapper.exiting {\n    z-index: -1 !important;\n    pointer-events: none;\n    transition: none !important;\n    animation: var(--_motion-animation, toast-exit 0.3s ease-out forwards);\n  }\n\n  @keyframes toast-exit {\n    to {\n      opacity: 0;\n      transform: scale(0.7);\n    }\n  }\n\n  /* Stacking (collapsed) */\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(1) {\n    z-index: 3;\n    opacity: 1;\n    filter: brightness(1);\n    transform: translateY(0) scale(1);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(2) {\n    z-index: 2;\n    pointer-events: none;\n    opacity: 0.85;\n    filter: brightness(0.95);\n    transform: translateY(-8px) scale(0.95) rotateX(3deg);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(3) {\n    z-index: 1;\n    pointer-events: none;\n    opacity: 0.7;\n    filter: brightness(0.9);\n    transform: translateY(-14px) scale(0.9) rotateX(5deg);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(n + 4) {\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  /* Expanded (hovered) */\n  :host(.hovered) .toast-wrapper {\n    z-index: auto !important;\n    grid-row: auto;\n    grid-column: 1;\n    align-self: stretch;\n    pointer-events: auto !important;\n    opacity: 1 !important;\n    filter: brightness(1) !important;\n    transform: none !important;\n  }\n\n  /* Staggered expand delays */\n  :host(.hovered) .toast-wrapper:nth-last-child(2) {\n    transition-delay: 0.05s;\n  }\n\n  :host(.hovered) .toast-wrapper:nth-last-child(3) {\n    transition-delay: 0.1s;\n  }\n\n  :host(.hovered) .toast-wrapper:nth-last-child(n + 4) {\n    transition-delay: 0.15s;\n  }\n\n  /* Top positions: reverse stacking direction */\n  :host([position^='top']) .toast-wrapper {\n    transform-origin: center top;\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper:nth-last-child(2) {\n    transform: translateY(8px) scale(0.95) rotateX(-3deg);\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper:nth-last-child(3) {\n    transform: translateY(14px) scale(0.9) rotateX(-5deg);\n  }\n\n  ::slotted(bit-alert) {\n    width: 100%;\n    margin: 0;\n    box-shadow: var(--shadow-lg);\n  }\n\n  .toast-wrapper.exiting ::slotted(bit-alert) {\n    transition: none !important;\n  }\n\n  .toast-actions {\n    display: flex;\n    gap: var(--size-4);\n    justify-content: flex-end;\n  }\n\n  /* ========================================\n       Responsive: small screens\n       ======================================== */\n\n  @media (width <= 480px) {\n    :host {\n      --_max-width: calc(100vw - var(--size-4));\n      --_inset-right: var(--size-2);\n      --_inset-left: var(--size-2);\n    }\n\n    :host([position='top-center']),\n    :host([position='bottom-center']) {\n      --_inset-left: var(--size-2);\n\n      inset-inline-start: var(--size-2);\n      transform: none;\n    }\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/feedback/toast/toast.css?inline
+var e = "@layer buildit.base{:host{--_position:var(--toast-position,fixed);--_inset-top:var(--toast-inset-top,auto);--_inset-bottom:var(--toast-inset-bottom,1rem);--_inset-right:var(--toast-inset-right,1rem);--_inset-left:var(--toast-inset-left,auto);--_z-index:var(--toast-z-index,9999);--_max-width:var(--toast-max-width,400px);--_gap:var(--toast-gap,.5rem);position:var(--_position);inset:var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);z-index:var(--_z-index);gap:var(--_gap);max-width:var(--_max-width);pointer-events:none;flex-direction:column;display:flex}:host([position=top-left]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-left:1rem;--_inset-right:auto}:host([position=top-center]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-left:50%;--_inset-right:auto;transform:translate(-50%)}:host([position=top-right]){--_inset-top:1rem;--_inset-bottom:auto;--_inset-right:1rem;--_inset-left:auto}:host([position=bottom-left]){--_inset-bottom:1rem;--_inset-left:1rem;--_inset-right:auto;--_inset-top:auto}:host([position=bottom-center]){--_inset-bottom:1rem;--_inset-left:50%;--_inset-right:auto;--_inset-top:auto;transform:translate(-50%)}:host([position=bottom-right]){--_inset-bottom:1rem;--_inset-right:1rem;--_inset-left:auto;--_inset-top:auto}.toast-container{perspective:1200px;perspective-origin:50%;transition:var(--_motion-transition,row-gap var(--transition-normal,.35s) ease);grid-template-rows:1fr;grid-template-columns:1fr;row-gap:0;display:grid}.toast-live-region{display:contents}:host(.hovered) .toast-container{row-gap:var(--_gap)}:host(:not(.hovered)) .toast-wrapper{grid-area:1/1;align-self:end}:host([position^=top]:not(.hovered)) .toast-wrapper{align-self:start}.toast-wrapper{pointer-events:auto;transform-origin:bottom;transition:var(--_motion-transition,transform .5s cubic-bezier(.34, 1.1, .64, 1), opacity .5s cubic-bezier(.34, 1.1, .64, 1), filter .5s cubic-bezier(.34, 1.1, .64, 1));will-change:transform, opacity, filter;position:relative}@starting-style{.toast-wrapper{opacity:0;transform:translateY(1.5rem)scale(.92)}:host([position^=top]) .toast-wrapper{transform:translateY(-1.5rem)scale(.92)}}.toast-wrapper.exiting{pointer-events:none;animation:var(--_motion-animation,toast-exit .3s ease-out forwards);z-index:-1!important;transition:none!important}@keyframes toast-exit{to{opacity:0;transform:scale(.7)}}:host(:not(.hovered)) .toast-wrapper:last-child{z-index:3;opacity:1;filter:brightness();transform:translateY(0)scale(1)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(2){z-index:2;pointer-events:none;opacity:.85;filter:brightness(.95);transform:translateY(-8px)scale(.95)rotateX(3deg)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(3){z-index:1;pointer-events:none;opacity:.7;filter:brightness(.9);transform:translateY(-14px)scale(.9)rotateX(5deg)}:host(:not(.hovered)) .toast-wrapper:nth-last-child(n+4){pointer-events:none;opacity:0}:host(.hovered) .toast-wrapper{grid-area:auto/1;align-self:stretch;z-index:auto!important;pointer-events:auto!important;opacity:1!important;filter:brightness()!important;transform:none!important}:host(.hovered) .toast-wrapper:nth-last-child(2){transition-delay:50ms}:host(.hovered) .toast-wrapper:nth-last-child(3){transition-delay:.1s}:host(.hovered) .toast-wrapper:nth-last-child(n+4){transition-delay:.15s}:host([position^=top]) .toast-wrapper{transform-origin:top}:host([position^=top]:not(.hovered)) .toast-wrapper:nth-last-child(2){transform:translateY(8px)scale(.95)rotateX(-3deg)}:host([position^=top]:not(.hovered)) .toast-wrapper:nth-last-child(3){transform:translateY(14px)scale(.9)rotateX(-5deg)}::slotted(bit-alert){width:100%;box-shadow:var(--shadow-lg);margin:0}.toast-wrapper.exiting ::slotted(bit-alert){transition:none!important}.toast-actions{gap:var(--size-4);justify-content:flex-end;display:flex}@media (width<=480px){:host{--_max-width:calc(100vw - var(--size-4));--_inset-right:var(--size-2);--_inset-left:var(--size-2)}:host([position=top-center]){--_inset-left:var(--size-2);transform:none}:host([position=top-center]):not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-2)}:host([position=top-center]):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}:host([position=bottom-center]){--_inset-left:var(--size-2);transform:none}:host([position=bottom-center]):not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){left:var(--size-2)}:host([position=bottom-center]):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){right:var(--size-2)}}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=toast.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.css?inline.js","names":[],"sources":["../../../src/feedback/toast/toast.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_position: var(--toast-position, fixed);\n    --_inset-top: var(--toast-inset-top, auto);\n    --_inset-bottom: var(--toast-inset-bottom, 1rem);\n    --_inset-right: var(--toast-inset-right, 1rem);\n    --_inset-left: var(--toast-inset-left, auto);\n    --_z-index: var(--toast-z-index, 9999);\n    --_max-width: var(--toast-max-width, 400px);\n    --_gap: var(--toast-gap, 0.5rem);\n\n    position: var(--_position);\n    inset: var(--_inset-top) var(--_inset-right) var(--_inset-bottom) var(--_inset-left);\n    z-index: var(--_z-index);\n    display: flex;\n    flex-direction: column;\n    gap: var(--_gap);\n    max-width: var(--_max-width);\n    pointer-events: none;\n  }\n\n  /* Position variants */\n  :host([position='top-left']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-left: 1rem;\n    --_inset-right: auto;\n  }\n\n  :host([position='top-center']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='top-right']) {\n    --_inset-top: 1rem;\n    --_inset-bottom: auto;\n    --_inset-right: 1rem;\n    --_inset-left: auto;\n  }\n\n  :host([position='bottom-left']) {\n    --_inset-bottom: 1rem;\n    --_inset-left: 1rem;\n    --_inset-right: auto;\n    --_inset-top: auto;\n  }\n\n  :host([position='bottom-center']) {\n    --_inset-bottom: 1rem;\n    --_inset-left: 50%;\n    --_inset-right: auto;\n    --_inset-top: auto;\n\n    transform: translateX(-50%);\n  }\n\n  :host([position='bottom-right']) {\n    --_inset-bottom: 1rem;\n    --_inset-right: 1rem;\n    --_inset-left: auto;\n    --_inset-top: auto;\n  }\n\n  .toast-container {\n    display: grid;\n    grid-template-rows: 1fr;\n    grid-template-columns: 1fr;\n    row-gap: 0;\n    perspective: 1200px;\n    perspective-origin: center center;\n    transition: var(--_motion-transition, row-gap var(--transition-normal, 0.35s) ease);\n  }\n\n  /* Keep ARIA live regions without affecting stacking layout geometry. */\n  .toast-live-region {\n    display: contents;\n  }\n\n  :host(.hovered) .toast-container {\n    row-gap: var(--_gap);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper {\n    grid-row: 1;\n    grid-column: 1;\n    align-self: end;\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper {\n    align-self: start;\n  }\n\n  .toast-wrapper {\n    position: relative;\n    pointer-events: auto;\n    transform-origin: center bottom;\n    transition: var(\n      --_motion-transition,\n      transform 0.5s cubic-bezier(0.34, 1.1, 0.64, 1),\n      opacity 0.5s cubic-bezier(0.34, 1.1, 0.64, 1),\n      filter 0.5s cubic-bezier(0.34, 1.1, 0.64, 1)\n    );\n    will-change: transform, opacity, filter;\n  }\n\n  /* Enter animation via @starting-style — no JS class needed */\n  @starting-style {\n    .toast-wrapper {\n      opacity: 0;\n      transform: translateY(1.5rem) scale(0.92);\n    }\n\n    :host([position^='top']) .toast-wrapper {\n      transform: translateY(-1.5rem) scale(0.92);\n    }\n  }\n\n  /* Exit animation */\n  .toast-wrapper.exiting {\n    z-index: -1 !important;\n    pointer-events: none;\n    transition: none !important;\n    animation: var(--_motion-animation, toast-exit 0.3s ease-out forwards);\n  }\n\n  @keyframes toast-exit {\n    to {\n      opacity: 0;\n      transform: scale(0.7);\n    }\n  }\n\n  /* Stacking (collapsed) */\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(1) {\n    z-index: 3;\n    opacity: 1;\n    filter: brightness(1);\n    transform: translateY(0) scale(1);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(2) {\n    z-index: 2;\n    pointer-events: none;\n    opacity: 0.85;\n    filter: brightness(0.95);\n    transform: translateY(-8px) scale(0.95) rotateX(3deg);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(3) {\n    z-index: 1;\n    pointer-events: none;\n    opacity: 0.7;\n    filter: brightness(0.9);\n    transform: translateY(-14px) scale(0.9) rotateX(5deg);\n  }\n\n  :host(:not(.hovered)) .toast-wrapper:nth-last-child(n + 4) {\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  /* Expanded (hovered) */\n  :host(.hovered) .toast-wrapper {\n    z-index: auto !important;\n    grid-row: auto;\n    grid-column: 1;\n    align-self: stretch;\n    pointer-events: auto !important;\n    opacity: 1 !important;\n    filter: brightness(1) !important;\n    transform: none !important;\n  }\n\n  /* Staggered expand delays */\n  :host(.hovered) .toast-wrapper:nth-last-child(2) {\n    transition-delay: 0.05s;\n  }\n\n  :host(.hovered) .toast-wrapper:nth-last-child(3) {\n    transition-delay: 0.1s;\n  }\n\n  :host(.hovered) .toast-wrapper:nth-last-child(n + 4) {\n    transition-delay: 0.15s;\n  }\n\n  /* Top positions: reverse stacking direction */\n  :host([position^='top']) .toast-wrapper {\n    transform-origin: center top;\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper:nth-last-child(2) {\n    transform: translateY(8px) scale(0.95) rotateX(-3deg);\n  }\n\n  :host([position^='top']:not(.hovered)) .toast-wrapper:nth-last-child(3) {\n    transform: translateY(14px) scale(0.9) rotateX(-5deg);\n  }\n\n  ::slotted(bit-alert) {\n    width: 100%;\n    margin: 0;\n    box-shadow: var(--shadow-lg);\n  }\n\n  .toast-wrapper.exiting ::slotted(bit-alert) {\n    transition: none !important;\n  }\n\n  .toast-actions {\n    display: flex;\n    gap: var(--size-4);\n    justify-content: flex-end;\n  }\n\n  /* ========================================\n       Responsive: small screens\n       ======================================== */\n\n  @media (width <= 480px) {\n    :host {\n      --_max-width: calc(100vw - var(--size-4));\n      --_inset-right: var(--size-2);\n      --_inset-left: var(--size-2);\n    }\n\n    :host([position='top-center']),\n    :host([position='bottom-center']) {\n      --_inset-left: var(--size-2);\n\n      inset-inline-start: var(--size-2);\n      transform: none;\n    }\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,95 @@
+import type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';
+/** Toast container properties */
+export type BitToastEvents = {
+    add: {
+        id: string;
+    };
+    dismiss: {
+        id: string;
+    };
+};
+export type BitToastProps = {
+    max?: number;
+    position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+};
+/** Individual toast notification */
+export type ToastItem = {
+    actions?: Array<{
+        color?: ThemeColor;
+        label: string;
+        onClick?: () => void;
+        variant?: VisualVariant;
+    }>;
+    color?: ThemeColor;
+    dismissible?: boolean;
+    /** Auto-dismiss delay in ms. Set to 0 for persistent toasts (default: 5000) */
+    duration?: number;
+    heading?: string;
+    /** Show message and actions side-by-side (horizontal layout) */
+    horizontal?: boolean;
+    /** Auto-generated via crypto.randomUUID() if omitted */
+    id?: string;
+    message: string;
+    /** Metadata text (e.g. timestamp) shown in the alert meta slot */
+    meta?: string;
+    /** Called after the toast is fully dismissed and removed */
+    onDismiss?: () => void;
+    rounded?: RoundedSize | '';
+    size?: ComponentSize;
+    /**
+     * Urgency level for screen readers.
+     * - `'polite'` (default): uses `aria-live="polite"` — announced after the user finishes their current action.
+     * - `'assertive'`: uses `aria-live="assertive"` — interrupts the user immediately. Use only for critical errors.
+     */
+    urgency?: 'polite' | 'assertive';
+    variant?: 'solid' | 'flat' | 'bordered';
+};
+/** Public API of the bit-toast element */
+export interface ToastElement extends HTMLElement {
+    add: (toast: ToastItem) => string;
+    update: (id: string, updates: Partial<ToastItem>) => void;
+    dismiss: (id: string) => void;
+    clear: () => void;
+}
+export declare const TOAST_TAG: string;
+/**
+ * Singleton service for triggering toasts without direct DOM references.
+ *
+ * @example
+ * ```ts
+ * import { toast } from '@vielzeug/buildit';
+ *
+ * toast.add({ message: 'Saved!', color: 'success' });
+ *
+ * const id = toast.add({ message: 'Uploading…', duration: 0, dismissible: false });
+ * toast.update(id, { message: 'Done!', color: 'success', duration: 3000, dismissible: true });
+ *
+ * await toast.promise(uploadFile(), {
+ *   loading: 'Uploading…',
+ *   success: (url) => `Uploaded to ${url}`,
+ *   error: 'Upload failed',
+ * });
+ * ```
+ */
+export declare const toast: {
+    /** Add a toast and return its id */
+    add(item: ToastItem): string;
+    /** Dismiss all toasts (animated) */
+    clear(): void;
+    /** Configure the auto-created container. Call before the first `add()` if the defaults need to change. */
+    configure(config: BitToastProps): void;
+    /**
+     * Shows a loading toast tied to a promise.
+     * Updates to success/error when the promise settles.
+     */
+    promise<T>(promise: Promise<T>, messages: {
+        error: string | ((err: unknown) => string);
+        loading: string;
+        success: string | ((data: T) => string);
+    }): Promise<T>;
+    /** Dismiss a toast by id */
+    remove(id: string): void;
+    /** Update an existing toast in-place */
+    update(id: string, updates: Partial<ToastItem>): void;
+};
+//# sourceMappingURL=toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/feedback/toast/toast.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAMzF,iCAAiC;AAEjC,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IACpB,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,CAAC;CACvG,CAAC;AAEF,oCAAoC;AACpC,MAAM,MAAM,SAAS,GAAG;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,KAAK,CAAC,EAAE,UAAU,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;QACrB,OAAO,CAAC,EAAE,aAAa,CAAC;KACzB,CAAC,CAAC;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wDAAwD;IACxD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,WAAW,GAAG,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;CACzC,CAAC;AAIF,0CAA0C;AAC1C,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,GAAG,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC;IAClC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IAC1D,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AA6DD,eAAO,MAAM,SAAS,QAmPpB,CAAC;AAeH;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,KAAK;IAChB,oCAAoC;cAC1B,SAAS,GAAG,MAAM;IAI5B,oCAAoC;aAC3B,IAAI;IAGb,0GAA0G;sBACxF,aAAa,GAAG,IAAI;IAQtC;;;OAGG;YACW,CAAC,WACJ,OAAO,CAAC,CAAC,CAAC,YACT;QACR,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,CAAC,CAAC;QAC3C,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;KACzC,GACA,OAAO,CAAC,CAAC,CAAC;IAyBb,4BAA4B;eACjB,MAAM,GAAG,IAAI;IAIxB,wCAAwC;eAC7B,MAAM,WAAW,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI;CAGtD,CAAC"}

package/dist/file-input.cjs

@@ -0,0 +1,66 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/mixins/states.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`),r=require(`./styles/index.cjs`),i=require(`./craftit/dist/directives/each.cjs`);require(`./craftit/dist/directives/index.cjs`);const a=require(`./icons.cjs`),o=require(`./inputs/shared/design-presets.cjs`),s=require(`./inputs/file-input/file-input.css?inline.cjs`);let c=require(`@vielzeug/craftit`),l=require(`@vielzeug/dragit`);function u(e){if(e===0)return`0 B`;let t=[`B`,`KB`,`MB`,`GB`],n=1024,r=Math.min(Math.floor(Math.log(e)/Math.log(n)),t.length-1);return`${Number.parseFloat((e/n**r).toFixed(1))} ${t[r]}`}function d(e,t){return t?t.split(`,`).map(e=>e.trim()).some(t=>t.startsWith(`.`)?e.name.toLowerCase().endsWith(t.toLowerCase()):t.endsWith(`/*`)?e.type.startsWith(t.slice(0,-1)):e.type===t):!0}function f(e,t){return!t||d(e,t)}function p(e,t){return t==null?!0:t===0||e.size<=t}var m=(0,c.defineComponent)({formAssociated:!0,props:{accept:{default:``},color:{default:void 0},disabled:{default:!1},error:{default:``,omit:!0},fullwidth:{default:!1},helper:{default:``},label:{default:``},"max-files":{default:0,type:Number},"max-size":{default:0,type:Number},multiple:{default:!1},name:{default:``},required:{default:!1},rounded:{default:void 0},size:{default:void 0},variant:{default:void 0}},setup({emit:e,host:t,props:n}){let r=(0,c.signal)([]),o=(0,c.signal)(!1);(0,c.defineField)({disabled:(0,c.computed)(()=>!!n.disabled.value),toFormValue:e=>{if(e.length===0)return null;let t=n.name.value||`file`,r=new FormData;for(let n of e)r.append(t,n);return r},value:r},{onReset:()=>{r.value=[]}});let s=(0,c.computed)(()=>!!n.error.value);(0,c.effect)(()=>{s.value?t.setAttribute(`invalid`,``):t.removeAttribute(`invalid`)}),(0,c.effect)(()=>{o.value?t.setAttribute(`drag-over`,``):t.removeAttribute(`drag-over`)});let d=(0,c.createId)(`file-input`),m=`label-${d}`,h=`helper-${d}`,g=`error-${d}`,_=(0,c.ref)(),v=(0,c.ref)(),y=(0,c.computed)(()=>{let e=[];n.accept.value&&e.push(n.accept.value.split(`,`).map(e=>e.trim()).join(`, `));let t=n[`max-size`].value??0;t>0&&e.push(`max ${u(t)}`);let r=n[`max-files`].value??0;return r>0&&e.push(`up to ${r} file${r===1?``:`s`}`),e.join(` · `)});function b(t,i){if(n.disabled.value)return;let a=n[`max-files`].value??0,o=n[`max-size`].value??0,s=n.accept.value,c=!!n.multiple.value,l=Array.from(t);c||(l=l.slice(0,1)),l=l.filter(e=>f(e,s)&&p(e,o));let u=c?[...r.value]:[];for(let e of l)u.includes(e)||u.push(e);a>0&&u.length>a&&(u=u.slice(0,a)),r.value=u,e(`change`,{files:r.value,originalEvent:i,value:r.value})}function x(t,n){r.value=r.value.filter(e=>e!==t),e(`remove`,{file:t,files:r.value,originalEvent:n,value:r.value}),e(`change`,{files:r.value,originalEvent:n,value:r.value})}return(0,c.onMount)(()=>{let e=v.value,t=_.value;(0,c.handle)(e,`change`,e=>{let t=e.target;t.files?.length&&b(Array.from(t.files),e),t.value=``}),(0,c.handle)(t,`click`,()=>{n.disabled.value||e.click()}),(0,c.handle)(t,`keydown`,t=>{(t.key===`Enter`||t.key===` `)&&!n.disabled.value&&(t.preventDefault(),e.click())});let r=(0,l.createDropZone)({disabled:()=>!!n.disabled.value,element:t,onDrop:(e,t)=>b(e,t),onHoverChange:e=>{o.value=e}});(0,c.onCleanup)(()=>r.destroy())}),c.html`
+      <div class="file-input-wrapper" part="wrapper">
+        <label class="label-outside" id="${m}" part="label" ?hidden=${()=>!n.label.value}
+          >${()=>n.label.value}</label
+        >
+        <div
+          class="dropzone"
+          part="dropzone"
+          ref=${_}
+          role="button"
+          :tabindex=${()=>n.disabled.value?`-1`:`0`}
+          :aria-disabled=${()=>String(n.disabled.value)}
+          :aria-label=${()=>n.label.value?null:`File upload drop zone`}
+          :aria-labelledby=${()=>n.label.value?m:null}
+          aria-describedby="${h}">
+          <input
+            type="file"
+            ref=${v}
+            part="input"
+            id="${d}"
+            :accept=${()=>n.accept.value}
+            ?multiple=${()=>n.multiple.value}
+            ?required=${()=>n.required.value}
+            ?disabled=${()=>n.disabled.value}
+            :name=${()=>n.name.value}
+            hidden
+            inert
+            tabindex="-1" />
+          <div class="dropzone-content">
+            <span class="dropzone-icon" aria-hidden="true"> ${a.uploadIcon} </span>
+            <span class="dropzone-title">Drop files here or <u>click to browse</u></span>
+            <span class="dropzone-hint" ?hidden=${()=>!y.value}>${y}</span>
+          </div>
+        </div>
+        <ul class="file-list" role="list" aria-label="Selected files" ?hidden=${()=>r.value.length===0}>
+          ${i.d(r,e=>c.html`
+              <li class="file-item">
+                <span class="file-icon" aria-hidden="true"> ${a.fileIcon} </span>
+                <span class="file-meta">
+                  <span class="file-name" title="${e.name}">${e.name}</span>
+                  <span class="file-size">${u(e.size)}</span>
+                </span>
+                <button
+                  class="file-remove"
+                  type="button"
+                  aria-label="${`Remove ${e.name}`}"
+                  @click=${t=>x(e,t)}>
+                  ${a.clearIcon}
+                </button>
+              </li>
+            `,void 0,{key:e=>`${e.name}:${e.size}:${e.lastModified}`})}
+        </ul>
+        <div class="helper-text" id="${h}" part="helper" ?hidden=${()=>s.value||!n.helper.value}>
+          ${()=>n.helper.value}
+        </div>
+        <div
+          class="helper-text helper-text-error"
+          id="${g}"
+          role="alert"
+          part="error"
+          ?hidden=${()=>!s.value}>
+          ${()=>n.error.value}
+        </div>
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[...r.formFieldMixins,e.sizeVariantMixin(o.FILE_INPUT_SIZE_PRESET),t.disabledLoadingMixin(),n.forcedColorsFocusMixin(`.dropzone`),s.default],tag:`bit-file-input`});exports.FILE_INPUT_TAG=m;
+//# sourceMappingURL=file-input.cjs.map

package/dist/file-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.cjs","names":[],"sources":["../src/inputs/file-input/file-input.ts"],"sourcesContent":["import {\n  computed,\n  createId,\n  defineComponent,\n  defineField,\n  effect,\n  handle,\n  html,\n  onCleanup,\n  onMount,\n  ref,\n  signal,\n} from '@vielzeug/craftit';\nimport { each } from '@vielzeug/craftit/directives';\nimport { createDropZone } from '@vielzeug/dragit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { clearIcon, fileIcon, uploadIcon } from '../../icons';\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { FILE_INPUT_SIZE_PRESET } from '../shared/design-presets';\n\n// ============================================\n// Helpers\n// ============================================\n\nfunction formatBytes(bytes: number): string {\n  if (bytes === 0) return '0 B';\n\n  const units = ['B', 'KB', 'MB', 'GB'] as const;\n  const k = 1024;\n  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), units.length - 1);\n\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${units[i]}`;\n}\n\nfunction matchesAccept(file: File, accept: string | undefined): boolean {\n  if (!accept) return true;\n\n  return accept\n    .split(',')\n    .map((s) => s.trim())\n    .some((pattern) => {\n      if (pattern.startsWith('.')) return file.name.toLowerCase().endsWith(pattern.toLowerCase());\n\n      if (pattern.endsWith('/*')) return file.type.startsWith(pattern.slice(0, -1));\n\n      return file.type === pattern;\n    });\n}\n\nfunction isFileAccepted(file: File, accept: string | undefined): boolean {\n  return !accept || matchesAccept(file, accept);\n}\n\nfunction isFileSizeAllowed(file: File, maxBytes: number | undefined): boolean {\n  if (maxBytes == null) return true;\n\n  return maxBytes === 0 || file.size <= maxBytes;\n}\n\n// ============================================\n// Component Styles\n// ============================================\n\nimport componentStyles from './file-input.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\n/** FileInput component properties */\n\nexport type BitFileInputEvents = {\n  change: { files: File[]; originalEvent?: Event; value: File[] };\n  remove: { file: File; files: File[]; originalEvent?: Event; value: File[] };\n};\n\nexport type BitFileInputProps = {\n  /** Accepted file types (MIME types or extensions, comma-separated) */\n  accept?: string;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Full width mode */\n  fullwidth?: boolean;\n  /** Helper text */\n  helper?: string;\n  /** Label text */\n  label?: string;\n  /** Maximum number of files (0 = unlimited) */\n  'max-files'?: number;\n  /** Maximum file size in bytes (0 = unlimited) */\n  'max-size'?: number;\n  /** Allow multiple file selection */\n  multiple?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Mark as required */\n  required?: boolean;\n  /** Border radius */\n  rounded?: Exclude<RoundedSize, 'full'>;\n  /** Component size */\n  size?: ComponentSize;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'glass' | 'text' | 'frost'>;\n};\n\n// ============================================\n// Component Definition\n// ============================================\n\n/**\n * A file upload component with drag-and-drop support, file list management,\n * and full form integration.\n *\n * @element bit-file-input\n *\n * @attr {string} accept - Accepted file types (MIME types or extensions, e.g. \"image/*,.pdf\")\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} disabled - Disable all interaction\n * @attr {string} error - Error message\n * @attr {boolean} fullwidth - Full width mode\n * @attr {string} helper - Helper text below the dropzone\n * @attr {string} label - Label text displayed above the dropzone\n * @attr {number} max-files - Maximum number of files (0 = unlimited)\n * @attr {number} max-size - Maximum file size in bytes (0 = unlimited)\n * @attr {boolean} multiple - Allow selecting multiple files\n * @attr {string} name - Form field name\n * @attr {boolean} required - Mark as required\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n *\n * @fires change - Emitted when the file selection changes. detail: { value: File[], files: File[], originalEvent?: Event }\n * @fires remove - Emitted when a file is removed from the list. detail: { value: File[], file: File, files: File[], originalEvent?: Event }\n *\n * @part wrapper - The outer wrapper div\n * @part label - The label element\n * @part dropzone - The drag-and-drop zone\n * @part input - The hidden native file input\n * @part helper - The helper text element\n * @part error - The error text element\n *\n * @cssprop --file-input-bg - Dropzone background color\n * @cssprop --file-input-border-color - Dropzone border color\n * @cssprop --file-input-radius - Border radius\n * @cssprop --file-input-min-height - Minimum dropzone height\n * @cssprop --file-input-font-size - Font size\n *\n * @example\n * ```html\n * <bit-file-input label=\"Upload files\" accept=\"image/*\" multiple />\n * <bit-file-input label=\"Resume\" accept=\".pdf,.doc,.docx\" max-size=\"5242880\" />\n * <bit-file-input variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const FILE_INPUT_TAG = defineComponent<BitFileInputProps, BitFileInputEvents>({\n  formAssociated: true,\n  props: {\n    accept: { default: '' },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '', omit: true },\n    fullwidth: { default: false },\n    helper: { default: '' },\n    label: { default: '' },\n    'max-files': { default: 0, type: Number },\n    'max-size': { default: 0, type: Number },\n    multiple: { default: false },\n    name: { default: '' },\n    required: { default: false },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    // ============================================\n    // State\n    // ============================================\n    const files = signal<File[]>([]);\n    const isDragging = signal(false);\n\n    // ============================================\n    // Form Integration\n    // ============================================\n    defineField(\n      {\n        disabled: computed(() => Boolean(props.disabled.value)),\n        toFormValue: (fi: File[]) => {\n          if (fi.length === 0) return null;\n\n          const name = props.name.value || 'file';\n          const fd = new FormData();\n\n          for (const file of fi) fd.append(name, file);\n\n          return fd;\n        },\n        value: files,\n      },\n      {\n        onReset: () => {\n          files.value = [];\n        },\n      },\n    );\n\n    // Sync host attributes for CSS selectors\n    const isInvalid = computed(() => Boolean(props.error.value));\n\n    effect(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      isInvalid.value ? host.setAttribute('invalid', '') : host.removeAttribute('invalid');\n    });\n    effect(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      isDragging.value ? host.setAttribute('drag-over', '') : host.removeAttribute('drag-over');\n    });\n\n    // ============================================\n    // IDs\n    // ============================================\n    const fileInputId = createId('file-input');\n    const labelId = `label-${fileInputId}`;\n    const helperId = `helper-${fileInputId}`;\n    const errorId = `error-${fileInputId}`;\n    // ============================================\n    // Refs\n    // ============================================\n    const dropzoneRef = ref<HTMLDivElement>();\n    const inputRef = ref<HTMLInputElement>();\n    const hintText = computed(() => {\n      const parts: string[] = [];\n\n      if (props.accept.value) {\n        parts.push(\n          props.accept.value\n            .split(',')\n            .map((s: string) => s.trim())\n            .join(', '),\n        );\n      }\n\n      const maxSize = props['max-size'].value ?? 0;\n\n      if (maxSize > 0) parts.push(`max ${formatBytes(maxSize)}`);\n\n      const maxFiles = props['max-files'].value ?? 0;\n\n      if (maxFiles > 0) parts.push(`up to ${maxFiles} file${maxFiles !== 1 ? 's' : ''}`);\n\n      return parts.join(' · ');\n    });\n\n    // ============================================\n    // File Management\n    // ============================================\n    function addFiles(newFiles: File[], originalEvent?: Event): void {\n      if (props.disabled.value) return;\n\n      const maxFilesLimit = props['max-files'].value ?? 0;\n      const maxSizeLimit = props['max-size'].value ?? 0;\n      const acceptVal = props.accept.value;\n      const isMultiple = Boolean(props.multiple.value);\n      let incoming = Array.from(newFiles);\n\n      if (!isMultiple) incoming = incoming.slice(0, 1);\n\n      incoming = incoming.filter((f) => isFileAccepted(f, acceptVal) && isFileSizeAllowed(f, maxSizeLimit));\n\n      let updated: File[] = isMultiple ? [...files.value] : [];\n\n      for (const f of incoming) {\n        if (!updated.includes(f)) updated.push(f);\n      }\n\n      if (maxFilesLimit > 0 && updated.length > maxFilesLimit) {\n        updated = updated.slice(0, maxFilesLimit);\n      }\n\n      files.value = updated;\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n    function removeFile(file: File, originalEvent?: Event): void {\n      files.value = files.value.filter((f) => f !== file);\n      emit('remove', { file, files: files.value, originalEvent, value: files.value });\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n    // ============================================\n    // Mount\n    // ============================================\n    onMount(() => {\n      const inp = inputRef.value!;\n      const dz = dropzoneRef.value!;\n\n      // Native input → add files\n      handle(inp, 'change', (e: Event) => {\n        const input = e.target as HTMLInputElement;\n\n        if (input.files?.length) addFiles(Array.from(input.files), e);\n\n        input.value = ''; // reset so the same file triggers change again\n      });\n      // Click dropzone → open file picker\n      handle(dz, 'click', () => {\n        if (!props.disabled.value) inp.click();\n      });\n      // Keyboard: Enter / Space → open picker\n      handle(dz, 'keydown', (e: KeyboardEvent) => {\n        if ((e.key === 'Enter' || e.key === ' ') && !props.disabled.value) {\n          e.preventDefault();\n          inp.click();\n        }\n      });\n\n      const dropZone = createDropZone({\n        disabled: () => Boolean(props.disabled.value),\n        element: dz,\n        onDrop: (droppedFiles, e) => addFiles(droppedFiles, e),\n        onHoverChange: (hovered) => {\n          isDragging.value = hovered;\n        },\n      });\n\n      onCleanup(() => dropZone.destroy());\n    });\n\n    // ============================================\n    // Template\n    // ============================================\n    return html`\n      <div class=\"file-input-wrapper\" part=\"wrapper\">\n        <label class=\"label-outside\" id=\"${labelId}\" part=\"label\" ?hidden=${() => !props.label.value}\n          >${() => props.label.value}</label\n        >\n        <div\n          class=\"dropzone\"\n          part=\"dropzone\"\n          ref=${dropzoneRef}\n          role=\"button\"\n          :tabindex=${() => (props.disabled.value ? '-1' : '0')}\n          :aria-disabled=${() => String(props.disabled.value)}\n          :aria-label=${() => (!props.label.value ? 'File upload drop zone' : null)}\n          :aria-labelledby=${() => (props.label.value ? labelId : null)}\n          aria-describedby=\"${helperId}\">\n          <input\n            type=\"file\"\n            ref=${inputRef}\n            part=\"input\"\n            id=\"${fileInputId}\"\n            :accept=${() => props.accept.value}\n            ?multiple=${() => props.multiple.value}\n            ?required=${() => props.required.value}\n            ?disabled=${() => props.disabled.value}\n            :name=${() => props.name.value}\n            hidden\n            inert\n            tabindex=\"-1\" />\n          <div class=\"dropzone-content\">\n            <span class=\"dropzone-icon\" aria-hidden=\"true\"> ${uploadIcon} </span>\n            <span class=\"dropzone-title\">Drop files here or <u>click to browse</u></span>\n            <span class=\"dropzone-hint\" ?hidden=${() => !hintText.value}>${hintText}</span>\n          </div>\n        </div>\n        <ul class=\"file-list\" role=\"list\" aria-label=\"Selected files\" ?hidden=${() => files.value.length === 0}>\n          ${each(\n            files,\n            (file: File) => html`\n              <li class=\"file-item\">\n                <span class=\"file-icon\" aria-hidden=\"true\"> ${fileIcon} </span>\n                <span class=\"file-meta\">\n                  <span class=\"file-name\" title=\"${file.name}\">${file.name}</span>\n                  <span class=\"file-size\">${formatBytes(file.size)}</span>\n                </span>\n                <button\n                  class=\"file-remove\"\n                  type=\"button\"\n                  aria-label=\"${`Remove ${file.name}`}\"\n                  @click=${(e: Event) => removeFile(file, e)}>\n                  ${clearIcon}\n                </button>\n              </li>\n            `,\n            undefined,\n            {\n              key: (file: File) => `${file.name}:${file.size}:${file.lastModified}`,\n            },\n          )}\n        </ul>\n        <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ?hidden=${() => isInvalid.value || !props.helper.value}>\n          ${() => props.helper.value}\n        </div>\n        <div\n          class=\"helper-text helper-text-error\"\n          id=\"${errorId}\"\n          role=\"alert\"\n          part=\"error\"\n          ?hidden=${() => !isInvalid.value}>\n          ${() => props.error.value}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...formFieldMixins,\n    sizeVariantMixin(FILE_INPUT_SIZE_PRESET),\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('.dropzone'),\n    componentStyles,\n  ],\n  tag: 'bit-file-input',\n});\n"],"mappings":"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"}

package/dist/file-input.js

@@ -0,0 +1,210 @@
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as t } from "./styles/mixins/states.css.js";
+import { forcedColorsFocusMixin as n } from "./styles/mixins/theme.css.js";
+import { formFieldMixins as r } from "./styles/index.js";
+import { d as i } from "./craftit/dist/directives/each.js";
+import "./craftit/dist/directives/index.js";
+import { clearIcon as a, fileIcon as o, uploadIcon as s } from "./icons.js";
+import { FILE_INPUT_SIZE_PRESET as c } from "./inputs/shared/design-presets.js";
+import l from "./inputs/file-input/file-input.css?inline.js";
+import { computed as u, createId as d, defineComponent as f, defineField as p, effect as m, handle as h, html as g, onCleanup as _, onMount as v, ref as y, signal as b } from "@vielzeug/craftit";
+import { createDropZone as x } from "@vielzeug/dragit";
+//#region src/inputs/file-input/file-input.ts
+function S(e) {
+	if (e === 0) return "0 B";
+	let t = [
+		"B",
+		"KB",
+		"MB",
+		"GB"
+	], n = 1024, r = Math.min(Math.floor(Math.log(e) / Math.log(n)), t.length - 1);
+	return `${Number.parseFloat((e / n ** r).toFixed(1))} ${t[r]}`;
+}
+function C(e, t) {
+	return t ? t.split(",").map((e) => e.trim()).some((t) => t.startsWith(".") ? e.name.toLowerCase().endsWith(t.toLowerCase()) : t.endsWith("/*") ? e.type.startsWith(t.slice(0, -1)) : e.type === t) : !0;
+}
+function w(e, t) {
+	return !t || C(e, t);
+}
+function T(e, t) {
+	return t == null ? !0 : t === 0 || e.size <= t;
+}
+var E = f({
+	formAssociated: !0,
+	props: {
+		accept: { default: "" },
+		color: { default: void 0 },
+		disabled: { default: !1 },
+		error: {
+			default: "",
+			omit: !0
+		},
+		fullwidth: { default: !1 },
+		helper: { default: "" },
+		label: { default: "" },
+		"max-files": {
+			default: 0,
+			type: Number
+		},
+		"max-size": {
+			default: 0,
+			type: Number
+		},
+		multiple: { default: !1 },
+		name: { default: "" },
+		required: { default: !1 },
+		rounded: { default: void 0 },
+		size: { default: void 0 },
+		variant: { default: void 0 }
+	},
+	setup({ emit: e, host: t, props: n }) {
+		let r = b([]), c = b(!1);
+		p({
+			disabled: u(() => !!n.disabled.value),
+			toFormValue: (e) => {
+				if (e.length === 0) return null;
+				let t = n.name.value || "file", r = new FormData();
+				for (let n of e) r.append(t, n);
+				return r;
+			},
+			value: r
+		}, { onReset: () => {
+			r.value = [];
+		} });
+		let l = u(() => !!n.error.value);
+		m(() => {
+			l.value ? t.setAttribute("invalid", "") : t.removeAttribute("invalid");
+		}), m(() => {
+			c.value ? t.setAttribute("drag-over", "") : t.removeAttribute("drag-over");
+		});
+		let f = d("file-input"), C = `label-${f}`, E = `helper-${f}`, D = `error-${f}`, O = y(), k = y(), A = u(() => {
+			let e = [];
+			n.accept.value && e.push(n.accept.value.split(",").map((e) => e.trim()).join(", "));
+			let t = n["max-size"].value ?? 0;
+			t > 0 && e.push(`max ${S(t)}`);
+			let r = n["max-files"].value ?? 0;
+			return r > 0 && e.push(`up to ${r} file${r === 1 ? "" : "s"}`), e.join(" · ");
+		});
+		function j(t, i) {
+			if (n.disabled.value) return;
+			let a = n["max-files"].value ?? 0, o = n["max-size"].value ?? 0, s = n.accept.value, c = !!n.multiple.value, l = Array.from(t);
+			c || (l = l.slice(0, 1)), l = l.filter((e) => w(e, s) && T(e, o));
+			let u = c ? [...r.value] : [];
+			for (let e of l) u.includes(e) || u.push(e);
+			a > 0 && u.length > a && (u = u.slice(0, a)), r.value = u, e("change", {
+				files: r.value,
+				originalEvent: i,
+				value: r.value
+			});
+		}
+		function M(t, n) {
+			r.value = r.value.filter((e) => e !== t), e("remove", {
+				file: t,
+				files: r.value,
+				originalEvent: n,
+				value: r.value
+			}), e("change", {
+				files: r.value,
+				originalEvent: n,
+				value: r.value
+			});
+		}
+		return v(() => {
+			let e = k.value, t = O.value;
+			h(e, "change", (e) => {
+				let t = e.target;
+				t.files?.length && j(Array.from(t.files), e), t.value = "";
+			}), h(t, "click", () => {
+				n.disabled.value || e.click();
+			}), h(t, "keydown", (t) => {
+				(t.key === "Enter" || t.key === " ") && !n.disabled.value && (t.preventDefault(), e.click());
+			});
+			let r = x({
+				disabled: () => !!n.disabled.value,
+				element: t,
+				onDrop: (e, t) => j(e, t),
+				onHoverChange: (e) => {
+					c.value = e;
+				}
+			});
+			_(() => r.destroy());
+		}), g`
+      <div class="file-input-wrapper" part="wrapper">
+        <label class="label-outside" id="${C}" part="label" ?hidden=${() => !n.label.value}
+          >${() => n.label.value}</label
+        >
+        <div
+          class="dropzone"
+          part="dropzone"
+          ref=${O}
+          role="button"
+          :tabindex=${() => n.disabled.value ? "-1" : "0"}
+          :aria-disabled=${() => String(n.disabled.value)}
+          :aria-label=${() => n.label.value ? null : "File upload drop zone"}
+          :aria-labelledby=${() => n.label.value ? C : null}
+          aria-describedby="${E}">
+          <input
+            type="file"
+            ref=${k}
+            part="input"
+            id="${f}"
+            :accept=${() => n.accept.value}
+            ?multiple=${() => n.multiple.value}
+            ?required=${() => n.required.value}
+            ?disabled=${() => n.disabled.value}
+            :name=${() => n.name.value}
+            hidden
+            inert
+            tabindex="-1" />
+          <div class="dropzone-content">
+            <span class="dropzone-icon" aria-hidden="true"> ${s} </span>
+            <span class="dropzone-title">Drop files here or <u>click to browse</u></span>
+            <span class="dropzone-hint" ?hidden=${() => !A.value}>${A}</span>
+          </div>
+        </div>
+        <ul class="file-list" role="list" aria-label="Selected files" ?hidden=${() => r.value.length === 0}>
+          ${i(r, (e) => g`
+              <li class="file-item">
+                <span class="file-icon" aria-hidden="true"> ${o} </span>
+                <span class="file-meta">
+                  <span class="file-name" title="${e.name}">${e.name}</span>
+                  <span class="file-size">${S(e.size)}</span>
+                </span>
+                <button
+                  class="file-remove"
+                  type="button"
+                  aria-label="${`Remove ${e.name}`}"
+                  @click=${(t) => M(e, t)}>
+                  ${a}
+                </button>
+              </li>
+            `, void 0, { key: (e) => `${e.name}:${e.size}:${e.lastModified}` })}
+        </ul>
+        <div class="helper-text" id="${E}" part="helper" ?hidden=${() => l.value || !n.helper.value}>
+          ${() => n.helper.value}
+        </div>
+        <div
+          class="helper-text helper-text-error"
+          id="${D}"
+          role="alert"
+          part="error"
+          ?hidden=${() => !l.value}>
+          ${() => n.error.value}
+        </div>
+      </div>
+    `;
+	},
+	shadow: { delegatesFocus: !0 },
+	styles: [
+		...r,
+		e(c),
+		t(),
+		n(".dropzone"),
+		l
+	],
+	tag: "bit-file-input"
+});
+//#endregion
+export { E as FILE_INPUT_TAG };
+
+//# sourceMappingURL=file-input.js.map

package/dist/file-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.js","names":[],"sources":["../src/inputs/file-input/file-input.ts"],"sourcesContent":["import {\n  computed,\n  createId,\n  defineComponent,\n  defineField,\n  effect,\n  handle,\n  html,\n  onCleanup,\n  onMount,\n  ref,\n  signal,\n} from '@vielzeug/craftit';\nimport { each } from '@vielzeug/craftit/directives';\nimport { createDropZone } from '@vielzeug/dragit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { clearIcon, fileIcon, uploadIcon } from '../../icons';\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { FILE_INPUT_SIZE_PRESET } from '../shared/design-presets';\n\n// ============================================\n// Helpers\n// ============================================\n\nfunction formatBytes(bytes: number): string {\n  if (bytes === 0) return '0 B';\n\n  const units = ['B', 'KB', 'MB', 'GB'] as const;\n  const k = 1024;\n  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), units.length - 1);\n\n  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${units[i]}`;\n}\n\nfunction matchesAccept(file: File, accept: string | undefined): boolean {\n  if (!accept) return true;\n\n  return accept\n    .split(',')\n    .map((s) => s.trim())\n    .some((pattern) => {\n      if (pattern.startsWith('.')) return file.name.toLowerCase().endsWith(pattern.toLowerCase());\n\n      if (pattern.endsWith('/*')) return file.type.startsWith(pattern.slice(0, -1));\n\n      return file.type === pattern;\n    });\n}\n\nfunction isFileAccepted(file: File, accept: string | undefined): boolean {\n  return !accept || matchesAccept(file, accept);\n}\n\nfunction isFileSizeAllowed(file: File, maxBytes: number | undefined): boolean {\n  if (maxBytes == null) return true;\n\n  return maxBytes === 0 || file.size <= maxBytes;\n}\n\n// ============================================\n// Component Styles\n// ============================================\n\nimport componentStyles from './file-input.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\n/** FileInput component properties */\n\nexport type BitFileInputEvents = {\n  change: { files: File[]; originalEvent?: Event; value: File[] };\n  remove: { file: File; files: File[]; originalEvent?: Event; value: File[] };\n};\n\nexport type BitFileInputProps = {\n  /** Accepted file types (MIME types or extensions, comma-separated) */\n  accept?: string;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Full width mode */\n  fullwidth?: boolean;\n  /** Helper text */\n  helper?: string;\n  /** Label text */\n  label?: string;\n  /** Maximum number of files (0 = unlimited) */\n  'max-files'?: number;\n  /** Maximum file size in bytes (0 = unlimited) */\n  'max-size'?: number;\n  /** Allow multiple file selection */\n  multiple?: boolean;\n  /** Form field name */\n  name?: string;\n  /** Mark as required */\n  required?: boolean;\n  /** Border radius */\n  rounded?: Exclude<RoundedSize, 'full'>;\n  /** Component size */\n  size?: ComponentSize;\n  /** Visual variant */\n  variant?: Exclude<VisualVariant, 'glass' | 'text' | 'frost'>;\n};\n\n// ============================================\n// Component Definition\n// ============================================\n\n/**\n * A file upload component with drag-and-drop support, file list management,\n * and full form integration.\n *\n * @element bit-file-input\n *\n * @attr {string} accept - Accepted file types (MIME types or extensions, e.g. \"image/*,.pdf\")\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} disabled - Disable all interaction\n * @attr {string} error - Error message\n * @attr {boolean} fullwidth - Full width mode\n * @attr {string} helper - Helper text below the dropzone\n * @attr {string} label - Label text displayed above the dropzone\n * @attr {number} max-files - Maximum number of files (0 = unlimited)\n * @attr {number} max-size - Maximum file size in bytes (0 = unlimited)\n * @attr {boolean} multiple - Allow selecting multiple files\n * @attr {string} name - Form field name\n * @attr {boolean} required - Mark as required\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n *\n * @fires change - Emitted when the file selection changes. detail: { value: File[], files: File[], originalEvent?: Event }\n * @fires remove - Emitted when a file is removed from the list. detail: { value: File[], file: File, files: File[], originalEvent?: Event }\n *\n * @part wrapper - The outer wrapper div\n * @part label - The label element\n * @part dropzone - The drag-and-drop zone\n * @part input - The hidden native file input\n * @part helper - The helper text element\n * @part error - The error text element\n *\n * @cssprop --file-input-bg - Dropzone background color\n * @cssprop --file-input-border-color - Dropzone border color\n * @cssprop --file-input-radius - Border radius\n * @cssprop --file-input-min-height - Minimum dropzone height\n * @cssprop --file-input-font-size - Font size\n *\n * @example\n * ```html\n * <bit-file-input label=\"Upload files\" accept=\"image/*\" multiple />\n * <bit-file-input label=\"Resume\" accept=\".pdf,.doc,.docx\" max-size=\"5242880\" />\n * <bit-file-input variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const FILE_INPUT_TAG = defineComponent<BitFileInputProps, BitFileInputEvents>({\n  formAssociated: true,\n  props: {\n    accept: { default: '' },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '', omit: true },\n    fullwidth: { default: false },\n    helper: { default: '' },\n    label: { default: '' },\n    'max-files': { default: 0, type: Number },\n    'max-size': { default: 0, type: Number },\n    multiple: { default: false },\n    name: { default: '' },\n    required: { default: false },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    // ============================================\n    // State\n    // ============================================\n    const files = signal<File[]>([]);\n    const isDragging = signal(false);\n\n    // ============================================\n    // Form Integration\n    // ============================================\n    defineField(\n      {\n        disabled: computed(() => Boolean(props.disabled.value)),\n        toFormValue: (fi: File[]) => {\n          if (fi.length === 0) return null;\n\n          const name = props.name.value || 'file';\n          const fd = new FormData();\n\n          for (const file of fi) fd.append(name, file);\n\n          return fd;\n        },\n        value: files,\n      },\n      {\n        onReset: () => {\n          files.value = [];\n        },\n      },\n    );\n\n    // Sync host attributes for CSS selectors\n    const isInvalid = computed(() => Boolean(props.error.value));\n\n    effect(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      isInvalid.value ? host.setAttribute('invalid', '') : host.removeAttribute('invalid');\n    });\n    effect(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n      isDragging.value ? host.setAttribute('drag-over', '') : host.removeAttribute('drag-over');\n    });\n\n    // ============================================\n    // IDs\n    // ============================================\n    const fileInputId = createId('file-input');\n    const labelId = `label-${fileInputId}`;\n    const helperId = `helper-${fileInputId}`;\n    const errorId = `error-${fileInputId}`;\n    // ============================================\n    // Refs\n    // ============================================\n    const dropzoneRef = ref<HTMLDivElement>();\n    const inputRef = ref<HTMLInputElement>();\n    const hintText = computed(() => {\n      const parts: string[] = [];\n\n      if (props.accept.value) {\n        parts.push(\n          props.accept.value\n            .split(',')\n            .map((s: string) => s.trim())\n            .join(', '),\n        );\n      }\n\n      const maxSize = props['max-size'].value ?? 0;\n\n      if (maxSize > 0) parts.push(`max ${formatBytes(maxSize)}`);\n\n      const maxFiles = props['max-files'].value ?? 0;\n\n      if (maxFiles > 0) parts.push(`up to ${maxFiles} file${maxFiles !== 1 ? 's' : ''}`);\n\n      return parts.join(' · ');\n    });\n\n    // ============================================\n    // File Management\n    // ============================================\n    function addFiles(newFiles: File[], originalEvent?: Event): void {\n      if (props.disabled.value) return;\n\n      const maxFilesLimit = props['max-files'].value ?? 0;\n      const maxSizeLimit = props['max-size'].value ?? 0;\n      const acceptVal = props.accept.value;\n      const isMultiple = Boolean(props.multiple.value);\n      let incoming = Array.from(newFiles);\n\n      if (!isMultiple) incoming = incoming.slice(0, 1);\n\n      incoming = incoming.filter((f) => isFileAccepted(f, acceptVal) && isFileSizeAllowed(f, maxSizeLimit));\n\n      let updated: File[] = isMultiple ? [...files.value] : [];\n\n      for (const f of incoming) {\n        if (!updated.includes(f)) updated.push(f);\n      }\n\n      if (maxFilesLimit > 0 && updated.length > maxFilesLimit) {\n        updated = updated.slice(0, maxFilesLimit);\n      }\n\n      files.value = updated;\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n    function removeFile(file: File, originalEvent?: Event): void {\n      files.value = files.value.filter((f) => f !== file);\n      emit('remove', { file, files: files.value, originalEvent, value: files.value });\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n    // ============================================\n    // Mount\n    // ============================================\n    onMount(() => {\n      const inp = inputRef.value!;\n      const dz = dropzoneRef.value!;\n\n      // Native input → add files\n      handle(inp, 'change', (e: Event) => {\n        const input = e.target as HTMLInputElement;\n\n        if (input.files?.length) addFiles(Array.from(input.files), e);\n\n        input.value = ''; // reset so the same file triggers change again\n      });\n      // Click dropzone → open file picker\n      handle(dz, 'click', () => {\n        if (!props.disabled.value) inp.click();\n      });\n      // Keyboard: Enter / Space → open picker\n      handle(dz, 'keydown', (e: KeyboardEvent) => {\n        if ((e.key === 'Enter' || e.key === ' ') && !props.disabled.value) {\n          e.preventDefault();\n          inp.click();\n        }\n      });\n\n      const dropZone = createDropZone({\n        disabled: () => Boolean(props.disabled.value),\n        element: dz,\n        onDrop: (droppedFiles, e) => addFiles(droppedFiles, e),\n        onHoverChange: (hovered) => {\n          isDragging.value = hovered;\n        },\n      });\n\n      onCleanup(() => dropZone.destroy());\n    });\n\n    // ============================================\n    // Template\n    // ============================================\n    return html`\n      <div class=\"file-input-wrapper\" part=\"wrapper\">\n        <label class=\"label-outside\" id=\"${labelId}\" part=\"label\" ?hidden=${() => !props.label.value}\n          >${() => props.label.value}</label\n        >\n        <div\n          class=\"dropzone\"\n          part=\"dropzone\"\n          ref=${dropzoneRef}\n          role=\"button\"\n          :tabindex=${() => (props.disabled.value ? '-1' : '0')}\n          :aria-disabled=${() => String(props.disabled.value)}\n          :aria-label=${() => (!props.label.value ? 'File upload drop zone' : null)}\n          :aria-labelledby=${() => (props.label.value ? labelId : null)}\n          aria-describedby=\"${helperId}\">\n          <input\n            type=\"file\"\n            ref=${inputRef}\n            part=\"input\"\n            id=\"${fileInputId}\"\n            :accept=${() => props.accept.value}\n            ?multiple=${() => props.multiple.value}\n            ?required=${() => props.required.value}\n            ?disabled=${() => props.disabled.value}\n            :name=${() => props.name.value}\n            hidden\n            inert\n            tabindex=\"-1\" />\n          <div class=\"dropzone-content\">\n            <span class=\"dropzone-icon\" aria-hidden=\"true\"> ${uploadIcon} </span>\n            <span class=\"dropzone-title\">Drop files here or <u>click to browse</u></span>\n            <span class=\"dropzone-hint\" ?hidden=${() => !hintText.value}>${hintText}</span>\n          </div>\n        </div>\n        <ul class=\"file-list\" role=\"list\" aria-label=\"Selected files\" ?hidden=${() => files.value.length === 0}>\n          ${each(\n            files,\n            (file: File) => html`\n              <li class=\"file-item\">\n                <span class=\"file-icon\" aria-hidden=\"true\"> ${fileIcon} </span>\n                <span class=\"file-meta\">\n                  <span class=\"file-name\" title=\"${file.name}\">${file.name}</span>\n                  <span class=\"file-size\">${formatBytes(file.size)}</span>\n                </span>\n                <button\n                  class=\"file-remove\"\n                  type=\"button\"\n                  aria-label=\"${`Remove ${file.name}`}\"\n                  @click=${(e: Event) => removeFile(file, e)}>\n                  ${clearIcon}\n                </button>\n              </li>\n            `,\n            undefined,\n            {\n              key: (file: File) => `${file.name}:${file.size}:${file.lastModified}`,\n            },\n          )}\n        </ul>\n        <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ?hidden=${() => isInvalid.value || !props.helper.value}>\n          ${() => props.helper.value}\n        </div>\n        <div\n          class=\"helper-text helper-text-error\"\n          id=\"${errorId}\"\n          role=\"alert\"\n          part=\"error\"\n          ?hidden=${() => !isInvalid.value}>\n          ${() => props.error.value}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...formFieldMixins,\n    sizeVariantMixin(FILE_INPUT_SIZE_PRESET),\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('.dropzone'),\n    componentStyles,\n  ],\n  tag: 'bit-file-input',\n});\n"],"mappings":"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"}

package/dist/form.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/form-context.cjs`),t=require(`./inputs/form/form.css?inline.cjs`);let n=require(`@vielzeug/craftit`);var r=(0,n.defineComponent)({props:{disabled:(0,n.typed)(!1),novalidate:(0,n.typed)(!1),orientation:(0,n.typed)(`vertical`),size:(0,n.typed)(void 0),validateOn:(0,n.typed)(void 0),variant:(0,n.typed)(void 0)},setup({emit:t,host:r,props:i}){(0,n.provide)(e.FORM_CTX,{disabled:(0,n.computed)(()=>!!i.disabled.value),size:i.size,validateOn:(0,n.computed)(()=>i.validateOn.value??`submit`),variant:i.variant});function a(e){let n=e,i=r.shadowRoot?.querySelector(`form`);i&&(e.preventDefault(),t(`submit`,{formData:new FormData(i),originalEvent:n}))}function o(e){t(`reset`,{originalEvent:e})}return n.html`
+      <form
+        part="form"
+        :novalidate="${()=>i.novalidate.value||null}"
+        :aria-disabled="${()=>i.disabled.value?`true`:null}"
+        @submit="${a}"
+        @reset="${o}">
+        <slot></slot>
+      </form>
+    `},shadow:{delegatesFocus:!1},styles:[t.default],tag:`bit-form`});exports.FORM_TAG=r;
+//# sourceMappingURL=form.cjs.map

package/dist/form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.cjs","names":[],"sources":["../src/inputs/form/form.ts"],"sourcesContent":["import { computed, defineComponent, html, typed, provide } from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { FORM_CTX } from '../shared/form-context';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './form.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\nexport type BitFormEvents = {\n  reset: { originalEvent: Event };\n  submit: { formData: FormData; originalEvent: SubmitEvent };\n};\n\nexport type BitFormProps = {\n  /** Disable all child form fields */\n  disabled?: boolean;\n  /** Native form novalidate */\n  novalidate?: boolean;\n  /** Form layout orientation */\n  orientation?: 'vertical' | 'horizontal';\n  /** Default size for all child fields */\n  size?: ComponentSize;\n  /**\n   * When to validate child form controls.\n   * - `'submit'` (default): validate only when the form is submitted\n   * - `'blur'`: validate each field as it loses focus\n   * - `'change'`: validate on every value change (most immediate feedback)\n   */\n  validateOn?: 'submit' | 'blur' | 'change';\n  /** Default variant for all child fields */\n  variant?: Exclude<VisualVariant, 'glass' | 'frost' | 'text'>;\n};\n\n/**\n * `bit-form` — Native `<form>` wrapper that propagates `disabled`, `size`, and `variant`\n * context to all child `bit-*` form fields. Intercepts submit/reset events.\n *\n * @element bit-form\n *\n * @attr {boolean} disabled - Disable all child form fields\n * @attr {string} size - Default size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Default visual variant for child fields\n * @attr {string} orientation - Layout direction: 'vertical' | 'horizontal'\n * @attr {boolean} novalidate - Skip native browser validation\n *\n * @fires submit - Fired on form submit; detail contains `formData` and `originalEvent`\n * @fires reset  - Fired on form reset; detail contains `originalEvent`\n *\n * @slot - Form content (bit-input, bit-select, etc.)\n *\n * @cssprop --form-gap - Spacing between child form controls\n *\n * @example\n * ```html\n * <bit-form id=\"my-form\" size=\"sm\" variant=\"flat\">\n *   <bit-input name=\"email\" label=\"Email\" type=\"email\"></bit-input>\n *   <bit-select name=\"role\" label=\"Role\">\n *     <option value=\"admin\">Admin</option>\n *   </bit-select>\n *   <bit-button type=\"submit\">Submit</bit-button>\n * </bit-form>\n * ```\n */\nexport const FORM_TAG = defineComponent<BitFormProps, BitFormEvents>({\n  props: {\n    disabled: typed<boolean>(false),\n    novalidate: typed<boolean>(false),\n    orientation: typed<BitFormProps['orientation']>('vertical'),\n    size: typed<BitFormProps['size']>(undefined),\n    validateOn: typed<BitFormProps['validateOn']>(undefined),\n    variant: typed<BitFormProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    // Provide context to all child bit-* form fields\n    provide(FORM_CTX, {\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      validateOn: computed(() => props.validateOn.value ?? 'submit'),\n      variant: props.variant,\n    });\n    // ── Event handlers ────────────────────────────────────────────────────────\n    function handleSubmit(e: Event) {\n      const submitEvent = e as SubmitEvent;\n      const formEl = host.shadowRoot?.querySelector('form');\n\n      if (!formEl) return;\n\n      e.preventDefault();\n\n      const formData = new FormData(formEl);\n\n      emit('submit', { formData, originalEvent: submitEvent });\n    }\n    function handleReset(e: Event) {\n      emit('reset', { originalEvent: e });\n    }\n\n    return html`\n      <form\n        part=\"form\"\n        :novalidate=\"${() => props.novalidate.value || null}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        @submit=\"${handleSubmit}\"\n        @reset=\"${handleReset}\">\n        <slot></slot>\n      </form>\n    `;\n  },\n  shadow: { delegatesFocus: false },\n  styles: [componentStyles],\n  tag: 'bit-form',\n});\n"],"mappings":"yMAqEA,IAAa,GAAA,EAAA,EAAA,iBAAwD,CACnE,MAAO,CACL,UAAA,EAAA,EAAA,OAAyB,GAAM,CAC/B,YAAA,EAAA,EAAA,OAA2B,GAAM,CACjC,aAAA,EAAA,EAAA,OAAgD,WAAW,CAC3D,MAAA,EAAA,EAAA,OAAkC,IAAA,GAAU,CAC5C,YAAA,EAAA,EAAA,OAA8C,IAAA,GAAU,CACxD,SAAA,EAAA,EAAA,OAAwC,IAAA,GAAU,CACnD,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,EAE3B,EAAA,EAAA,SAAQ,EAAA,SAAU,CAChB,UAAA,EAAA,EAAA,cAAyB,EAAQ,EAAM,SAAS,MAAO,CACvD,KAAM,EAAM,KACZ,YAAA,EAAA,EAAA,cAA2B,EAAM,WAAW,OAAS,SAAS,CAC9D,QAAS,EAAM,QAChB,CAAC,CAEF,SAAS,EAAa,EAAU,CAC9B,IAAM,EAAc,EACd,EAAS,EAAK,YAAY,cAAc,OAAO,CAEhD,IAEL,EAAE,gBAAgB,CAIlB,EAAK,SAAU,CAAE,SAFA,IAAI,SAAS,EAAO,CAEV,cAAe,EAAa,CAAC,EAE1D,SAAS,EAAY,EAAU,CAC7B,EAAK,QAAS,CAAE,cAAe,EAAG,CAAC,CAGrC,MAAO,GAAA,IAAI;;;2BAGc,EAAM,WAAW,OAAS,KAAK;8BAC3B,EAAM,SAAS,MAAQ,OAAS,KAAM;mBACpD,EAAa;kBACd,EAAY;;;OAK5B,OAAQ,CAAE,eAAgB,GAAO,CACjC,OAAQ,CAAC,EAAA,QAAgB,CACzB,IAAK,WACN,CAAC"}

package/dist/form.js

@@ -0,0 +1,49 @@
+import { FORM_CTX as e } from "./inputs/shared/form-context.js";
+import t from "./inputs/form/form.css?inline.js";
+import { computed as n, defineComponent as r, html as i, provide as a, typed as o } from "@vielzeug/craftit";
+//#region src/inputs/form/form.ts
+var s = r({
+	props: {
+		disabled: o(!1),
+		novalidate: o(!1),
+		orientation: o("vertical"),
+		size: o(void 0),
+		validateOn: o(void 0),
+		variant: o(void 0)
+	},
+	setup({ emit: t, host: r, props: o }) {
+		a(e, {
+			disabled: n(() => !!o.disabled.value),
+			size: o.size,
+			validateOn: n(() => o.validateOn.value ?? "submit"),
+			variant: o.variant
+		});
+		function s(e) {
+			let n = e, i = r.shadowRoot?.querySelector("form");
+			i && (e.preventDefault(), t("submit", {
+				formData: new FormData(i),
+				originalEvent: n
+			}));
+		}
+		function c(e) {
+			t("reset", { originalEvent: e });
+		}
+		return i`
+      <form
+        part="form"
+        :novalidate="${() => o.novalidate.value || null}"
+        :aria-disabled="${() => o.disabled.value ? "true" : null}"
+        @submit="${s}"
+        @reset="${c}">
+        <slot></slot>
+      </form>
+    `;
+	},
+	shadow: { delegatesFocus: !1 },
+	styles: [t],
+	tag: "bit-form"
+});
+//#endregion
+export { s as FORM_TAG };
+
+//# sourceMappingURL=form.js.map