@vielzeug/buildit 2.0.0

package/dist/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","names":[],"sources":["../src/icons.ts"],"sourcesContent":["import { html } from '@vielzeug/craftit';\n\n// ─── Shared SVG icon utilities ────────────────────────────────────────────────\n// All icons use currentColor so they inherit whatever color the host applies.\n\nexport const closeIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </svg>\n`;\n\nexport const checkIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <path d=\"M20 6 9 17l-5-5\" />\n  </svg>\n`;\n\n/** Used inline as an innerHTML string (e.g. for imperatively built option lists). */\nexport const checkIconHTML =\n  '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg>';\n\nexport const chevronDownIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n`;\n\nexport const chevronLeftIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <polyline points=\"15 18 9 12 15 6\"></polyline>\n  </svg>\n`;\n\nexport const chevronRightIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <polyline points=\"9 18 15 12 9 6\"></polyline>\n  </svg>\n`;\n\nexport const eyeIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    width=\"14\"\n    height=\"14\"\n    aria-hidden=\"true\">\n    <path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\" />\n    <circle cx=\"12\" cy=\"12\" r=\"3\" />\n  </svg>\n`;\n\nexport const eyeOffIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    width=\"14\"\n    height=\"14\"\n    aria-hidden=\"true\">\n    <path d=\"M9.88 9.88a3 3 0 1 0 4.24 4.24\" />\n    <path d=\"M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68\" />\n    <path d=\"M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61\" />\n    <line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\" />\n  </svg>\n`;\n\nexport const clearIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"12\"\n    height=\"12\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </svg>\n`;\n\nexport const uploadIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"36\"\n    height=\"36\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <polyline points=\"16 16 12 12 8 16\" />\n    <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"21\" />\n    <path d=\"M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3\" />\n  </svg>\n`;\n\nexport const fileIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"18\"\n    height=\"18\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.75\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\">\n    <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\" />\n    <polyline points=\"14 2 14 8 20 8\" />\n  </svg>\n`;\n\nexport const minusIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    aria-hidden=\"true\">\n    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n  </svg>\n`;\n\nexport const plusIcon = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    aria-hidden=\"true\">\n    <line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\" />\n    <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n  </svg>\n`;\n"],"mappings":";;AAKA,IAAa,IAAY,CAAI;;;;;;;;;;;;;;GAgBhB,IAAY,CAAI;;;;;;;;;;;;;;GAiBhB,IACX,gPAEW,IAAkB,CAAI;;;;;;;;;;;;;;GAgBtB,IAAkB,CAAI;;;;;;;;;;;;;;GAgBtB,IAAmB,CAAI;;;;;;;;;;;;;;GAgBvB,IAAU,CAAI;;;;;;;;;;;;;;;GAiBd,IAAa,CAAI;;;;;;;;;;;;;;;;;GAmBjB,IAAY,CAAI;;;;;;;;;;;;;;GAgBhB,IAAa,CAAI;;;;;;;;;;;;;;;;GAkBjB,IAAW,CAAI;;;;;;;;;;;;;;;GAiBf,IAAY,CAAI;;;;;;;;;;;;;GAehB,IAAW,CAAI"}

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./avatar.cjs`),t=require(`./breadcrumb.cjs`),n=require(`./card.cjs`),r=require(`./button-group.cjs`),i=require(`./button.cjs`),a=require(`./pagination.cjs`),o=require(`./separator.cjs`),s=require(`./table.cjs`),c=require(`./text.cjs`);require(`./content/index.cjs`);const l=require(`./accordion.cjs`),u=require(`./tabs.cjs`),d=require(`./accordion-item.cjs`),f=require(`./tab-item.cjs`),p=require(`./tab-panel.cjs`);require(`./disclosure/index.cjs`);const m=require(`./icons.cjs`),h=require(`./alert.cjs`),g=require(`./badge.cjs`),_=require(`./chip.cjs`),v=require(`./progress.cjs`),y=require(`./skeleton.cjs`),b=require(`./toast.cjs`);require(`./feedback/index.cjs`);const x=require(`./inputs/shared/form-context.cjs`),S=require(`./checkbox-group.cjs`),C=require(`./checkbox.cjs`),w=require(`./combobox.cjs`),T=require(`./file-input.cjs`),E=require(`./form.cjs`),D=require(`./input.cjs`),O=require(`./number-input.cjs`),k=require(`./otp-input.cjs`),A=require(`./radio-group.cjs`),j=require(`./radio.cjs`),M=require(`./rating.cjs`),N=require(`./select.cjs`),P=require(`./slider.cjs`),F=require(`./switch.cjs`),I=require(`./textarea.cjs`);require(`./inputs/index.cjs`);const L=require(`./box.cjs`),R=require(`./grid-item.cjs`),z=require(`./grid.cjs`),B=require(`./sidebar.cjs`);require(`./layout/index.cjs`);const V=require(`./dialog.cjs`),H=require(`./drawer.cjs`),U=require(`./menu.cjs`),W=require(`./popover.cjs`),G=require(`./tooltip.cjs`);require(`./overlay/index.cjs`),exports.ACCORDION_CTX=l.ACCORDION_CTX,exports.ACCORDION_ITEM_TAG=d.ACCORDION_ITEM_TAG,exports.ACCORDION_TAG=l.ACCORDION_TAG,exports.ALERT_TAG=h.ALERT_TAG,exports.AVATAR_GROUP_TAG=e.AVATAR_GROUP_TAG,exports.AVATAR_TAG=e.AVATAR_TAG,exports.BADGE_TAG=g.BADGE_TAG,exports.BOX_TAG=L.BOX_TAG,exports.BREADCRUMB_ITEM_TAG=t.BREADCRUMB_ITEM_TAG,exports.BREADCRUMB_TAG=t.BREADCRUMB_TAG,exports.BUTTON_GROUP_CTX=r.BUTTON_GROUP_CTX,exports.BUTTON_GROUP_TAG=r.BUTTON_GROUP_TAG,exports.BUTTON_TAG=i.BUTTON_TAG,exports.CARD_TAG=n.CARD_TAG,exports.CHECKBOX_GROUP_CTX=S.CHECKBOX_GROUP_CTX,exports.CHECKBOX_GROUP_TAG=S.CHECKBOX_GROUP_TAG,exports.CHECKBOX_TAG=C.CHECKBOX_TAG,exports.CHIP_TAG=_.CHIP_TAG,exports.COMBOBOX_OPTION_TAG=w.COMBOBOX_OPTION_TAG,exports.COMBOBOX_TAG=w.COMBOBOX_TAG,exports.DIALOG_TAG=V.DIALOG_TAG,exports.DRAWER_TAG=H.DRAWER_TAG,exports.FILE_INPUT_TAG=T.FILE_INPUT_TAG,exports.FORM_CTX=x.FORM_CTX,exports.FORM_TAG=E.FORM_TAG,exports.GRID_ITEM_TAG=R.GRID_ITEM_TAG,exports.GRID_TAG=z.GRID_TAG,exports.INPUT_TAG=D.INPUT_TAG,exports.MENU_ITEM_TAG=U.MENU_ITEM_TAG,exports.MENU_TAG=U.MENU_TAG,exports.NUMBER_INPUT_TAG=O.NUMBER_INPUT_TAG,exports.OTP_INPUT_TAG=k.OTP_INPUT_TAG,exports.PAGINATION_TAG=a.PAGINATION_TAG,exports.POPOVER_TAG=W.POPOVER_TAG,exports.PROGRESS_TAG=v.PROGRESS_TAG,exports.RADIO_GROUP_CTX=A.RADIO_GROUP_CTX,exports.RADIO_GROUP_TAG=A.RADIO_GROUP_TAG,exports.RADIO_TAG=j.RADIO_TAG,exports.RATING_TAG=M.RATING_TAG,exports.SELECT_TAG=N.SELECT_TAG,exports.SEPARATOR_TAG=o.SEPARATOR_TAG,exports.SIDEBAR_CTX=B.SIDEBAR_CTX,exports.SIDEBAR_GROUP_TAG=B.SIDEBAR_GROUP_TAG,exports.SIDEBAR_ITEM_TAG=B.SIDEBAR_ITEM_TAG,exports.SIDEBAR_TAG=B.SIDEBAR_TAG,exports.SKELETON_TAG=y.SKELETON_TAG,exports.SLIDER_TAG=P.SLIDER_TAG,exports.SWITCH_TAG=F.SWITCH_TAG,exports.TABLE_TAG=s.TABLE_TAG,exports.TABS_CTX=u.TABS_CTX,exports.TABS_TAG=u.TABS_TAG,exports.TAB_ITEM_TAG=f.TAB_ITEM_TAG,exports.TAB_PANEL_TAG=p.TAB_PANEL_TAG,exports.TD_TAG=s.TD_TAG,exports.TEXTAREA_TAG=I.TEXTAREA_TAG,exports.TEXT_TAG=c.TEXT_TAG,exports.TH_TAG=s.TH_TAG,exports.TOAST_TAG=b.TOAST_TAG,exports.TOOLTIP_TAG=G.TOOLTIP_TAG,exports.TR_TAG=s.TR_TAG,exports.checkIcon=m.checkIcon,exports.checkIconHTML=m.checkIconHTML,exports.chevronDownIcon=m.chevronDownIcon,exports.chevronLeftIcon=m.chevronLeftIcon,exports.chevronRightIcon=m.chevronRightIcon,exports.clearIcon=m.clearIcon,exports.closeIcon=m.closeIcon,exports.eyeIcon=m.eyeIcon,exports.eyeOffIcon=m.eyeOffIcon,exports.fileIcon=m.fileIcon,exports.minusIcon=m.minusIcon,exports.plusIcon=m.plusIcon,exports.toast=b.toast,exports.uploadIcon=m.uploadIcon;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from './content';
+export * from './disclosure';
+export * from './feedback';
+export * from './icons';
+export * from './inputs';
+export * from './layout';
+export * from './overlay';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,53 @@
+import { AVATAR_GROUP_TAG as e, AVATAR_TAG as t } from "./avatar.js";
+import { BREADCRUMB_ITEM_TAG as n, BREADCRUMB_TAG as r } from "./breadcrumb.js";
+import { CARD_TAG as i } from "./card.js";
+import { BUTTON_GROUP_CTX as a, BUTTON_GROUP_TAG as o } from "./button-group.js";
+import { BUTTON_TAG as s } from "./button.js";
+import { PAGINATION_TAG as c } from "./pagination.js";
+import { SEPARATOR_TAG as l } from "./separator.js";
+import { TABLE_TAG as u, TD_TAG as d, TH_TAG as f, TR_TAG as p } from "./table.js";
+import { TEXT_TAG as m } from "./text.js";
+import "./content/index.js";
+import { ACCORDION_CTX as h, ACCORDION_TAG as g } from "./accordion.js";
+import { TABS_CTX as _, TABS_TAG as v } from "./tabs.js";
+import { ACCORDION_ITEM_TAG as y } from "./accordion-item.js";
+import { TAB_ITEM_TAG as b } from "./tab-item.js";
+import { TAB_PANEL_TAG as x } from "./tab-panel.js";
+import "./disclosure/index.js";
+import { checkIcon as S, checkIconHTML as C, chevronDownIcon as w, chevronLeftIcon as T, chevronRightIcon as E, clearIcon as D, closeIcon as O, eyeIcon as k, eyeOffIcon as A, fileIcon as j, minusIcon as M, plusIcon as N, uploadIcon as P } from "./icons.js";
+import { ALERT_TAG as F } from "./alert.js";
+import { BADGE_TAG as I } from "./badge.js";
+import { CHIP_TAG as L } from "./chip.js";
+import { PROGRESS_TAG as R } from "./progress.js";
+import { SKELETON_TAG as z } from "./skeleton.js";
+import { TOAST_TAG as B, toast as V } from "./toast.js";
+import "./feedback/index.js";
+import { FORM_CTX as H } from "./inputs/shared/form-context.js";
+import { CHECKBOX_GROUP_CTX as U, CHECKBOX_GROUP_TAG as W } from "./checkbox-group.js";
+import { CHECKBOX_TAG as G } from "./checkbox.js";
+import { COMBOBOX_OPTION_TAG as K, COMBOBOX_TAG as q } from "./combobox.js";
+import { FILE_INPUT_TAG as J } from "./file-input.js";
+import { FORM_TAG as Y } from "./form.js";
+import { INPUT_TAG as X } from "./input.js";
+import { NUMBER_INPUT_TAG as Z } from "./number-input.js";
+import { OTP_INPUT_TAG as Q } from "./otp-input.js";
+import { RADIO_GROUP_CTX as $, RADIO_GROUP_TAG as ee } from "./radio-group.js";
+import { RADIO_TAG as te } from "./radio.js";
+import { RATING_TAG as ne } from "./rating.js";
+import { SELECT_TAG as re } from "./select.js";
+import { SLIDER_TAG as ie } from "./slider.js";
+import { SWITCH_TAG as ae } from "./switch.js";
+import { TEXTAREA_TAG as oe } from "./textarea.js";
+import "./inputs/index.js";
+import { BOX_TAG as se } from "./box.js";
+import { GRID_ITEM_TAG as ce } from "./grid-item.js";
+import { GRID_TAG as le } from "./grid.js";
+import { SIDEBAR_CTX as ue, SIDEBAR_GROUP_TAG as de, SIDEBAR_ITEM_TAG as fe, SIDEBAR_TAG as pe } from "./sidebar.js";
+import "./layout/index.js";
+import { DIALOG_TAG as me } from "./dialog.js";
+import { DRAWER_TAG as he } from "./drawer.js";
+import { MENU_ITEM_TAG as ge, MENU_TAG as _e } from "./menu.js";
+import { POPOVER_TAG as ve } from "./popover.js";
+import { TOOLTIP_TAG as ye } from "./tooltip.js";
+import "./overlay/index.js";
+export { h as ACCORDION_CTX, y as ACCORDION_ITEM_TAG, g as ACCORDION_TAG, F as ALERT_TAG, e as AVATAR_GROUP_TAG, t as AVATAR_TAG, I as BADGE_TAG, se as BOX_TAG, n as BREADCRUMB_ITEM_TAG, r as BREADCRUMB_TAG, a as BUTTON_GROUP_CTX, o as BUTTON_GROUP_TAG, s as BUTTON_TAG, i as CARD_TAG, U as CHECKBOX_GROUP_CTX, W as CHECKBOX_GROUP_TAG, G as CHECKBOX_TAG, L as CHIP_TAG, K as COMBOBOX_OPTION_TAG, q as COMBOBOX_TAG, me as DIALOG_TAG, he as DRAWER_TAG, J as FILE_INPUT_TAG, H as FORM_CTX, Y as FORM_TAG, ce as GRID_ITEM_TAG, le as GRID_TAG, X as INPUT_TAG, ge as MENU_ITEM_TAG, _e as MENU_TAG, Z as NUMBER_INPUT_TAG, Q as OTP_INPUT_TAG, c as PAGINATION_TAG, ve as POPOVER_TAG, R as PROGRESS_TAG, $ as RADIO_GROUP_CTX, ee as RADIO_GROUP_TAG, te as RADIO_TAG, ne as RATING_TAG, re as SELECT_TAG, l as SEPARATOR_TAG, ue as SIDEBAR_CTX, de as SIDEBAR_GROUP_TAG, fe as SIDEBAR_ITEM_TAG, pe as SIDEBAR_TAG, z as SKELETON_TAG, ie as SLIDER_TAG, ae as SWITCH_TAG, u as TABLE_TAG, _ as TABS_CTX, v as TABS_TAG, b as TAB_ITEM_TAG, x as TAB_PANEL_TAG, d as TD_TAG, oe as TEXTAREA_TAG, m as TEXT_TAG, f as TH_TAG, B as TOAST_TAG, ye as TOOLTIP_TAG, p as TR_TAG, S as checkIcon, C as checkIconHTML, w as chevronDownIcon, T as chevronLeftIcon, E as chevronRightIcon, D as clearIcon, O as closeIcon, k as eyeIcon, A as eyeOffIcon, j as fileIcon, M as minusIcon, N as plusIcon, V as toast, P as uploadIcon };

package/dist/input.cjs

@@ -0,0 +1,48 @@
+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/attr.cjs`);require(`./craftit/dist/directives/index.cjs`);const a=require(`./icons.cjs`),o=require(`./inputs/shared/utils/field-values.cjs`),s=require(`./inputs/shared/dom-sync/field-sync.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const c=require(`./inputs/shared/composables/use-text-field.cjs`);require(`./inputs/shared/composables/index.cjs`);const l=require(`./inputs/shared/design-presets.cjs`),u=require(`./inputs/input/input.css?inline.cjs`);let d=require(`@vielzeug/craftit`);var f=[`text`,`email`,`password`,`search`,`url`,`tel`,`number`,`date`,`time`,`datetime-local`,`month`,`week`],p=e=>f.includes(e)?e:`text`,m=(0,d.defineComponent)({formAssociated:!0,props:{autocomplete:{default:void 0},clearable:{default:!1},color:{default:void 0},disabled:{default:!1},error:{default:``,omit:!0},fullwidth:{default:!1},helper:{default:``},inputmode:{default:void 0},label:{default:``},"label-placement":{default:`inset`},maxlength:{default:void 0},minlength:{default:void 0},name:{default:``},pattern:{default:void 0},placeholder:{default:``},readonly:{default:!1},required:{default:!1},rounded:{default:void 0},size:{default:void 0},type:{default:`text`},value:{default:``},variant:{default:void 0}},setup({emit:e,host:t,props:n}){let r=(0,d.signal)(!1),l=()=>n.type.value===`password`&&r.value?`text`:p(n.type.value),u=c.useTextField(n,`input`),{errorId:f,fieldId:m,helperId:h,labelInsetId:g,labelInsetRef:_,labelOutsideId:v,labelOutsideRef:y,valueSignal:b}=u,x=(0,d.ref)(),S=(0,d.ref)(),C=(0,d.ref)(),w=(0,d.ref)(),T=(0,d.ref)(),E=(e,t,n)=>{n==null||n===``?e.removeAttribute(t):e.setAttribute(t,n)};return(0,d.onMount)(()=>{let r=x.value;r&&(s.setupFieldEvents(r,{onBlur:()=>u.triggerValidation(`blur`),onChange:(t,n)=>{e(`change`,{originalEvent:t,value:n}),u.triggerValidation(`change`)},onInput:(t,n)=>e(`input`,{originalEvent:t,value:n})}),u.mountLabelSync(),(0,d.effect)(()=>{let e=o.parsePositiveNumber(n.maxlength.value);e==null?r.removeAttribute(`maxlength`):r.maxLength=e;let t=o.parsePositiveNumber(n.minlength.value);t==null?r.removeAttribute(`minlength`):r.minLength=t,E(r,`pattern`,n.pattern.value??null),E(r,`inputmode`,n.inputmode.value??null);let i=n.autocomplete.value;i==null||i===``?r.removeAttribute(`autocomplete`):r.autocomplete=i}),s.syncSplitAssistive({error:()=>n.error.value,errorRef:C,helper:()=>n.helper.value,helperRef:S}),s.syncCounter({count:()=>b.value.length,format:`split`,maxLength:()=>n.maxlength.value,ref:T}),(0,d.effect)(()=>{b.value?t.setAttribute(`has-value`,``):t.removeAttribute(`has-value`)}),import(`@vielzeug/craftit`).then(({aria:e})=>{e(r,{describedby:()=>n.error.value?f:h,errormessage:()=>n.error.value?f:null,invalid:()=>!!n.error.value})}),w.value&&(0,d.handle)(w.value,`click`,t=>{t.preventDefault(),b.value=``,e(`input`,{originalEvent:t,value:``}),e(`change`,{originalEvent:t,value:``}),u.triggerValidation(`change`),x.value?.focus()}))}),d.html`
+      <div class="input-wrapper" part="wrapper">
+        <label
+          class="label-outside"
+          for="${m}"
+          id="${v}"
+          part="label"
+          ref=${y}
+          hidden></label>
+        <div class="field" part="field">
+          <label
+            class="label-inset"
+            for="${m}"
+            id="${g}"
+            part="label"
+            ref=${_}
+            hidden></label>
+          <div class="input-row" part="input-row">
+            <slot name="prefix"></slot>
+            <input
+              part="input"
+              id="${m}"
+              ${i.t({disabled:n.disabled,name:n.name,placeholder:n.placeholder,readOnly:n.readonly,required:n.required,type:l,value:b})}
+              :aria-labelledby="${()=>n[`label-placement`].value===`outside`?v:g}"
+              aria-describedby="${h}"
+              ref=${x} />
+            <slot name="suffix"></slot>
+            <button
+              class="pwd-toggle-btn"
+              part="pwd-toggle"
+              type="button"
+              :aria-label="${()=>r.value?`Hide password`:`Show password`}"
+              :aria-pressed="${()=>String(r.value)}"
+              tabindex="-1"
+              @click="${()=>{r.value=!r.value,x.value?.focus()}}">
+              ${()=>r.value?a.eyeOffIcon:a.eyeIcon}
+            </button>
+            <button class="clear-btn" part="clear" type="button" aria-label="Clear" tabindex="-1" ref=${w}>
+              ${a.clearIcon}
+            </button>
+          </div>
+        </div>
+        <div class="helper-text" id="${h}" part="helper" ref=${S} hidden></div>
+        <div class="helper-text" id="${f}" role="alert" part="error" ref=${C} hidden></div>
+        <div class="char-counter" part="char-counter" ref=${T} hidden></div>
+      </div>
+    `},shadow:{delegatesFocus:!0},styles:[e.sizeVariantMixin(l.FIELD_SIZE_PRESET),...r.formFieldMixins,t.disabledLoadingMixin(),n.forcedColorsFocusMixin(`input`),u.default],tag:`bit-input`});exports.INPUT_TAG=m;
+//# sourceMappingURL=input.cjs.map

package/dist/input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.cjs","names":[],"sources":["../src/inputs/input/input.ts"],"sourcesContent":["import { defineComponent, effect, handle, html, onMount, ref, signal } from '@vielzeug/craftit';\nimport { attr } from '@vielzeug/craftit/directives';\n\nimport type { InputType, VisualVariant } from '../../types';\nimport type { TextFieldProps } from '../shared/base-props';\n\nimport { clearIcon, eyeIcon, eyeOffIcon } from '../../icons';\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { useTextField } from '../shared/composables';\nimport { FIELD_SIZE_PRESET } from '../shared/design-presets';\nimport { setupFieldEvents, syncCounter, syncSplitAssistive } from '../shared/dom-sync';\nimport { parsePositiveNumber } from '../shared/utils';\nimport componentStyles from './input.css?inline';\n\n/** Input component properties */\n\nexport type BitInputEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type BitInputProps = TextFieldProps<Exclude<VisualVariant, 'glass' | 'frost'>> & {\n  /** Autocomplete hint */\n  autocomplete?: string;\n  /** Show a clear (×) button when the field has a value */\n  clearable?: boolean;\n  /** Virtual keyboard hint for mobile devices */\n  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n  /** Maximum character length — shows a counter below the input */\n  maxlength?: number;\n  /** Minimum character length */\n  minlength?: number;\n  /** HTML pattern attribute for client-side validation */\n  pattern?: string;\n  /** HTML input type */\n  type?: InputType;\n};\n\nconst VALID_INPUT_TYPES = [\n  'text',\n  'email',\n  'password',\n  'search',\n  'url',\n  'tel',\n  'number',\n  'date',\n  'time',\n  'datetime-local',\n  'month',\n  'week',\n] as const;\n\nconst validateInputType = (type: string | null | undefined): string => {\n  return VALID_INPUT_TYPES.includes(type as (typeof VALID_INPUT_TYPES)[number]) ? type! : 'text';\n};\n\n/**\n * A customizable text input component with multiple variants, label placements, and form features.\n *\n * @element bit-input\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - Label placement: 'inset' | 'outside'\n * @attr {string} type - HTML input type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'\n * @attr {string} value - Current input value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {string} helper - Helper text displayed below the input\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {boolean} disabled - Disable input interaction\n * @attr {boolean} readonly - Make the input read-only\n * @attr {boolean} required - Mark the field as required\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'\n * @attr {string} size - Input size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Emitted when input value changes (on every keystroke)\n * @fires change - Emitted when input loses focus with changed value\n *\n * @slot prefix - Content before the input (e.g., icons)\n * @slot suffix - Content after the input (e.g., clear button, validation icon)\n * @slot helper - Complex helper content below the input\n *\n * @part wrapper - The input wrapper element\n * @part label - The label element (inset or outside)\n * @part field - The field container element\n * @part input-row - The input row container element\n * @part input - The input element\n * @part helper - The helper text element\n *\n * @cssprop --input-bg - Background color\n * @cssprop --input-color - Text color\n * @cssprop --input-border-color - Border color\n * @cssprop --input-focus - Focus border color\n * @cssprop --input-placeholder-color - Placeholder text color\n * @cssprop --input-radius - Border radius\n * @cssprop --input-padding - Inner padding (vertical horizontal)\n * @cssprop --input-gap - Gap between prefix/suffix and input\n * @cssprop --input-font-size - Font size\n *\n * @example\n * ```html\n * <bit-input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n * <bit-input label=\"Name\" variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const INPUT_TAG = defineComponent<BitInputProps, BitInputEvents>({\n  formAssociated: true,\n  props: {\n    autocomplete: { default: undefined },\n    clearable: { default: false },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '', omit: true },\n    fullwidth: { default: false },\n    helper: { default: '' },\n    inputmode: { default: undefined },\n    label: { default: '' },\n    'label-placement': { default: 'inset' },\n    maxlength: { default: undefined },\n    minlength: { default: undefined },\n    name: { default: '' },\n    pattern: { default: undefined },\n    placeholder: { default: '' },\n    readonly: { default: false },\n    required: { default: false },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    type: { default: 'text' },\n    value: { default: '' },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const showPassword = signal(false);\n\n    const resolvedInputType = (): string =>\n      props.type.value === 'password' && showPassword.value ? 'text' : validateInputType(props.type.value);\n\n    const tf = useTextField(props, 'input');\n    const {\n      errorId,\n      fieldId: inputId,\n      helperId,\n      labelInsetId,\n      labelInsetRef,\n      labelOutsideId,\n      labelOutsideRef,\n      valueSignal,\n    } = tf;\n\n    const inputRef = ref<HTMLInputElement>();\n    const helperRef = ref<HTMLDivElement>();\n    const errorRef = ref<HTMLDivElement>();\n    const clearBtnRef = ref<HTMLButtonElement>();\n    const charCounterRef = ref<HTMLDivElement>();\n\n    const syncOptionalAttr = (\n      inp: HTMLInputElement,\n      name: 'autocomplete' | 'inputmode' | 'pattern',\n      value: string | null | undefined,\n    ) => {\n      if (value == null || value === '') inp.removeAttribute(name);\n      else inp.setAttribute(name, value);\n    };\n\n    onMount(() => {\n      const inp = inputRef.value;\n\n      if (!inp) return;\n\n      setupFieldEvents(inp, {\n        onBlur: () => tf.triggerValidation('blur'),\n        onChange: (e, value) => {\n          emit('change', { originalEvent: e, value });\n          tf.triggerValidation('change');\n        },\n        onInput: (e, value) => emit('input', { originalEvent: e, value }),\n      });\n\n      tf.mountLabelSync();\n\n      effect(() => {\n        const maxLen = parsePositiveNumber(props.maxlength.value);\n\n        if (maxLen != null) inp.maxLength = maxLen;\n        else inp.removeAttribute('maxlength');\n\n        const minLen = parsePositiveNumber(props.minlength.value);\n\n        if (minLen != null) inp.minLength = minLen;\n        else inp.removeAttribute('minlength');\n\n        syncOptionalAttr(inp, 'pattern', props.pattern.value ?? null);\n        syncOptionalAttr(inp, 'inputmode', props.inputmode.value ?? null);\n\n        const autocomplete = props.autocomplete.value;\n\n        if (autocomplete == null || autocomplete === '') inp.removeAttribute('autocomplete');\n        else inp.autocomplete = autocomplete as AutoFill;\n      });\n\n      syncSplitAssistive({\n        error: () => props.error.value,\n        errorRef,\n        helper: () => props.helper.value,\n        helperRef,\n      });\n\n      syncCounter({\n        count: () => valueSignal.value.length,\n        format: 'split',\n        maxLength: () => props.maxlength.value,\n        ref: charCounterRef,\n      });\n\n      effect(() => {\n        if (valueSignal.value) host.setAttribute('has-value', '');\n        else host.removeAttribute('has-value');\n      });\n\n      // TODO: migrate aria() on inner elements to a future useA11yField() composable\n      // For now, keep the imperative aria() call inside onMount as-is\n      import('@vielzeug/craftit').then(({ aria }) => {\n        aria(inp, {\n          describedby: () => (props.error.value ? errorId : helperId),\n          errormessage: () => (props.error.value ? errorId : null),\n          invalid: () => !!props.error.value,\n        });\n      });\n\n      if (clearBtnRef.value) {\n        handle(clearBtnRef.value, 'click', (e: MouseEvent) => {\n          e.preventDefault();\n          valueSignal.value = '';\n          emit('input', { originalEvent: e, value: '' });\n          emit('change', { originalEvent: e, value: '' });\n          tf.triggerValidation('change');\n          inputRef.value?.focus();\n        });\n      }\n    });\n\n    return html`\n      <div class=\"input-wrapper\" part=\"wrapper\">\n        <label\n          class=\"label-outside\"\n          for=\"${inputId}\"\n          id=\"${labelOutsideId}\"\n          part=\"label\"\n          ref=${labelOutsideRef}\n          hidden></label>\n        <div class=\"field\" part=\"field\">\n          <label\n            class=\"label-inset\"\n            for=\"${inputId}\"\n            id=\"${labelInsetId}\"\n            part=\"label\"\n            ref=${labelInsetRef}\n            hidden></label>\n          <div class=\"input-row\" part=\"input-row\">\n            <slot name=\"prefix\"></slot>\n            <input\n              part=\"input\"\n              id=\"${inputId}\"\n              ${attr({\n                disabled: props.disabled,\n                name: props.name,\n                placeholder: props.placeholder,\n                readOnly: props.readonly,\n                required: props.required,\n                type: resolvedInputType,\n                value: valueSignal,\n              })}\n              :aria-labelledby=\"${() => (props['label-placement'].value === 'outside' ? labelOutsideId : labelInsetId)}\"\n              aria-describedby=\"${helperId}\"\n              ref=${inputRef} />\n            <slot name=\"suffix\"></slot>\n            <button\n              class=\"pwd-toggle-btn\"\n              part=\"pwd-toggle\"\n              type=\"button\"\n              :aria-label=\"${() => (showPassword.value ? 'Hide password' : 'Show password')}\"\n              :aria-pressed=\"${() => String(showPassword.value)}\"\n              tabindex=\"-1\"\n              @click=\"${() => {\n                showPassword.value = !showPassword.value;\n                inputRef.value?.focus();\n              }}\">\n              ${() => (showPassword.value ? eyeOffIcon : eyeIcon)}\n            </button>\n            <button class=\"clear-btn\" part=\"clear\" type=\"button\" aria-label=\"Clear\" tabindex=\"-1\" ref=${clearBtnRef}>\n              ${clearIcon}\n            </button>\n          </div>\n        </div>\n        <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ref=${helperRef} hidden></div>\n        <div class=\"helper-text\" id=\"${errorId}\" role=\"alert\" part=\"error\" ref=${errorRef} hidden></div>\n        <div class=\"char-counter\" part=\"char-counter\" ref=${charCounterRef} hidden></div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    sizeVariantMixin(FIELD_SIZE_PRESET),\n    ...formFieldMixins,\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('input'),\n    componentStyles,\n  ],\n  tag: 'bit-input',\n});\n"],"mappings":"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"}

package/dist/input.js

@@ -0,0 +1,182 @@
+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 { t as i } from "./craftit/dist/directives/attr.js";
+import "./craftit/dist/directives/index.js";
+import { clearIcon as a, eyeIcon as o, eyeOffIcon as s } from "./icons.js";
+import { parsePositiveNumber as c } from "./inputs/shared/utils/field-values.js";
+import { setupFieldEvents as l, syncCounter as u, syncSplitAssistive as d } from "./inputs/shared/dom-sync/field-sync.js";
+import "./inputs/shared/dom-sync/index.js";
+import { useTextField as f } from "./inputs/shared/composables/use-text-field.js";
+import "./inputs/shared/composables/index.js";
+import { FIELD_SIZE_PRESET as p } from "./inputs/shared/design-presets.js";
+import m from "./inputs/input/input.css?inline.js";
+import { defineComponent as h, effect as g, handle as _, html as v, onMount as y, ref as b, signal as x } from "@vielzeug/craftit";
+//#region src/inputs/input/input.ts
+var S = [
+	"text",
+	"email",
+	"password",
+	"search",
+	"url",
+	"tel",
+	"number",
+	"date",
+	"time",
+	"datetime-local",
+	"month",
+	"week"
+], C = (e) => S.includes(e) ? e : "text", w = h({
+	formAssociated: !0,
+	props: {
+		autocomplete: { default: void 0 },
+		clearable: { default: !1 },
+		color: { default: void 0 },
+		disabled: { default: !1 },
+		error: {
+			default: "",
+			omit: !0
+		},
+		fullwidth: { default: !1 },
+		helper: { default: "" },
+		inputmode: { default: void 0 },
+		label: { default: "" },
+		"label-placement": { default: "inset" },
+		maxlength: { default: void 0 },
+		minlength: { default: void 0 },
+		name: { default: "" },
+		pattern: { default: void 0 },
+		placeholder: { default: "" },
+		readonly: { default: !1 },
+		required: { default: !1 },
+		rounded: { default: void 0 },
+		size: { default: void 0 },
+		type: { default: "text" },
+		value: { default: "" },
+		variant: { default: void 0 }
+	},
+	setup({ emit: e, host: t, props: n }) {
+		let r = x(!1), p = () => n.type.value === "password" && r.value ? "text" : C(n.type.value), m = f(n, "input"), { errorId: h, fieldId: S, helperId: w, labelInsetId: T, labelInsetRef: E, labelOutsideId: D, labelOutsideRef: O, valueSignal: k } = m, A = b(), j = b(), M = b(), N = b(), P = b(), F = (e, t, n) => {
+			n == null || n === "" ? e.removeAttribute(t) : e.setAttribute(t, n);
+		};
+		return y(() => {
+			let r = A.value;
+			r && (l(r, {
+				onBlur: () => m.triggerValidation("blur"),
+				onChange: (t, n) => {
+					e("change", {
+						originalEvent: t,
+						value: n
+					}), m.triggerValidation("change");
+				},
+				onInput: (t, n) => e("input", {
+					originalEvent: t,
+					value: n
+				})
+			}), m.mountLabelSync(), g(() => {
+				let e = c(n.maxlength.value);
+				e == null ? r.removeAttribute("maxlength") : r.maxLength = e;
+				let t = c(n.minlength.value);
+				t == null ? r.removeAttribute("minlength") : r.minLength = t, F(r, "pattern", n.pattern.value ?? null), F(r, "inputmode", n.inputmode.value ?? null);
+				let i = n.autocomplete.value;
+				i == null || i === "" ? r.removeAttribute("autocomplete") : r.autocomplete = i;
+			}), d({
+				error: () => n.error.value,
+				errorRef: M,
+				helper: () => n.helper.value,
+				helperRef: j
+			}), u({
+				count: () => k.value.length,
+				format: "split",
+				maxLength: () => n.maxlength.value,
+				ref: P
+			}), g(() => {
+				k.value ? t.setAttribute("has-value", "") : t.removeAttribute("has-value");
+			}), import("@vielzeug/craftit").then(({ aria: e }) => {
+				e(r, {
+					describedby: () => n.error.value ? h : w,
+					errormessage: () => n.error.value ? h : null,
+					invalid: () => !!n.error.value
+				});
+			}), N.value && _(N.value, "click", (t) => {
+				t.preventDefault(), k.value = "", e("input", {
+					originalEvent: t,
+					value: ""
+				}), e("change", {
+					originalEvent: t,
+					value: ""
+				}), m.triggerValidation("change"), A.value?.focus();
+			}));
+		}), v`
+      <div class="input-wrapper" part="wrapper">
+        <label
+          class="label-outside"
+          for="${S}"
+          id="${D}"
+          part="label"
+          ref=${O}
+          hidden></label>
+        <div class="field" part="field">
+          <label
+            class="label-inset"
+            for="${S}"
+            id="${T}"
+            part="label"
+            ref=${E}
+            hidden></label>
+          <div class="input-row" part="input-row">
+            <slot name="prefix"></slot>
+            <input
+              part="input"
+              id="${S}"
+              ${i({
+			disabled: n.disabled,
+			name: n.name,
+			placeholder: n.placeholder,
+			readOnly: n.readonly,
+			required: n.required,
+			type: p,
+			value: k
+		})}
+              :aria-labelledby="${() => n["label-placement"].value === "outside" ? D : T}"
+              aria-describedby="${w}"
+              ref=${A} />
+            <slot name="suffix"></slot>
+            <button
+              class="pwd-toggle-btn"
+              part="pwd-toggle"
+              type="button"
+              :aria-label="${() => r.value ? "Hide password" : "Show password"}"
+              :aria-pressed="${() => String(r.value)}"
+              tabindex="-1"
+              @click="${() => {
+			r.value = !r.value, A.value?.focus();
+		}}">
+              ${() => r.value ? s : o}
+            </button>
+            <button class="clear-btn" part="clear" type="button" aria-label="Clear" tabindex="-1" ref=${N}>
+              ${a}
+            </button>
+          </div>
+        </div>
+        <div class="helper-text" id="${w}" part="helper" ref=${j} hidden></div>
+        <div class="helper-text" id="${h}" role="alert" part="error" ref=${M} hidden></div>
+        <div class="char-counter" part="char-counter" ref=${P} hidden></div>
+      </div>
+    `;
+	},
+	shadow: { delegatesFocus: !0 },
+	styles: [
+		e(p),
+		...r,
+		t(),
+		n("input"),
+		m
+	],
+	tag: "bit-input"
+});
+//#endregion
+export { w as INPUT_TAG };
+
+//# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../src/inputs/input/input.ts"],"sourcesContent":["import { defineComponent, effect, handle, html, onMount, ref, signal } from '@vielzeug/craftit';\nimport { attr } from '@vielzeug/craftit/directives';\n\nimport type { InputType, VisualVariant } from '../../types';\nimport type { TextFieldProps } from '../shared/base-props';\n\nimport { clearIcon, eyeIcon, eyeOffIcon } from '../../icons';\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { useTextField } from '../shared/composables';\nimport { FIELD_SIZE_PRESET } from '../shared/design-presets';\nimport { setupFieldEvents, syncCounter, syncSplitAssistive } from '../shared/dom-sync';\nimport { parsePositiveNumber } from '../shared/utils';\nimport componentStyles from './input.css?inline';\n\n/** Input component properties */\n\nexport type BitInputEvents = {\n  change: { originalEvent: Event; value: string };\n  input: { originalEvent: Event; value: string };\n};\n\nexport type BitInputProps = TextFieldProps<Exclude<VisualVariant, 'glass' | 'frost'>> & {\n  /** Autocomplete hint */\n  autocomplete?: string;\n  /** Show a clear (×) button when the field has a value */\n  clearable?: boolean;\n  /** Virtual keyboard hint for mobile devices */\n  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n  /** Maximum character length — shows a counter below the input */\n  maxlength?: number;\n  /** Minimum character length */\n  minlength?: number;\n  /** HTML pattern attribute for client-side validation */\n  pattern?: string;\n  /** HTML input type */\n  type?: InputType;\n};\n\nconst VALID_INPUT_TYPES = [\n  'text',\n  'email',\n  'password',\n  'search',\n  'url',\n  'tel',\n  'number',\n  'date',\n  'time',\n  'datetime-local',\n  'month',\n  'week',\n] as const;\n\nconst validateInputType = (type: string | null | undefined): string => {\n  return VALID_INPUT_TYPES.includes(type as (typeof VALID_INPUT_TYPES)[number]) ? type! : 'text';\n};\n\n/**\n * A customizable text input component with multiple variants, label placements, and form features.\n *\n * @element bit-input\n *\n * @attr {string} label - Label text\n * @attr {string} label-placement - Label placement: 'inset' | 'outside'\n * @attr {string} type - HTML input type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'\n * @attr {string} value - Current input value\n * @attr {string} placeholder - Placeholder text\n * @attr {string} name - Form field name\n * @attr {string} helper - Helper text displayed below the input\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {boolean} disabled - Disable input interaction\n * @attr {boolean} readonly - Make the input read-only\n * @attr {boolean} required - Mark the field as required\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text'\n * @attr {string} size - Input size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n *\n * @fires input - Emitted when input value changes (on every keystroke)\n * @fires change - Emitted when input loses focus with changed value\n *\n * @slot prefix - Content before the input (e.g., icons)\n * @slot suffix - Content after the input (e.g., clear button, validation icon)\n * @slot helper - Complex helper content below the input\n *\n * @part wrapper - The input wrapper element\n * @part label - The label element (inset or outside)\n * @part field - The field container element\n * @part input-row - The input row container element\n * @part input - The input element\n * @part helper - The helper text element\n *\n * @cssprop --input-bg - Background color\n * @cssprop --input-color - Text color\n * @cssprop --input-border-color - Border color\n * @cssprop --input-focus - Focus border color\n * @cssprop --input-placeholder-color - Placeholder text color\n * @cssprop --input-radius - Border radius\n * @cssprop --input-padding - Inner padding (vertical horizontal)\n * @cssprop --input-gap - Gap between prefix/suffix and input\n * @cssprop --input-font-size - Font size\n *\n * @example\n * ```html\n * <bit-input type=\"email\" label=\"Email\" placeholder=\"you@example.com\" />\n * <bit-input label=\"Name\" variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const INPUT_TAG = defineComponent<BitInputProps, BitInputEvents>({\n  formAssociated: true,\n  props: {\n    autocomplete: { default: undefined },\n    clearable: { default: false },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '', omit: true },\n    fullwidth: { default: false },\n    helper: { default: '' },\n    inputmode: { default: undefined },\n    label: { default: '' },\n    'label-placement': { default: 'inset' },\n    maxlength: { default: undefined },\n    minlength: { default: undefined },\n    name: { default: '' },\n    pattern: { default: undefined },\n    placeholder: { default: '' },\n    readonly: { default: false },\n    required: { default: false },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    type: { default: 'text' },\n    value: { default: '' },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const showPassword = signal(false);\n\n    const resolvedInputType = (): string =>\n      props.type.value === 'password' && showPassword.value ? 'text' : validateInputType(props.type.value);\n\n    const tf = useTextField(props, 'input');\n    const {\n      errorId,\n      fieldId: inputId,\n      helperId,\n      labelInsetId,\n      labelInsetRef,\n      labelOutsideId,\n      labelOutsideRef,\n      valueSignal,\n    } = tf;\n\n    const inputRef = ref<HTMLInputElement>();\n    const helperRef = ref<HTMLDivElement>();\n    const errorRef = ref<HTMLDivElement>();\n    const clearBtnRef = ref<HTMLButtonElement>();\n    const charCounterRef = ref<HTMLDivElement>();\n\n    const syncOptionalAttr = (\n      inp: HTMLInputElement,\n      name: 'autocomplete' | 'inputmode' | 'pattern',\n      value: string | null | undefined,\n    ) => {\n      if (value == null || value === '') inp.removeAttribute(name);\n      else inp.setAttribute(name, value);\n    };\n\n    onMount(() => {\n      const inp = inputRef.value;\n\n      if (!inp) return;\n\n      setupFieldEvents(inp, {\n        onBlur: () => tf.triggerValidation('blur'),\n        onChange: (e, value) => {\n          emit('change', { originalEvent: e, value });\n          tf.triggerValidation('change');\n        },\n        onInput: (e, value) => emit('input', { originalEvent: e, value }),\n      });\n\n      tf.mountLabelSync();\n\n      effect(() => {\n        const maxLen = parsePositiveNumber(props.maxlength.value);\n\n        if (maxLen != null) inp.maxLength = maxLen;\n        else inp.removeAttribute('maxlength');\n\n        const minLen = parsePositiveNumber(props.minlength.value);\n\n        if (minLen != null) inp.minLength = minLen;\n        else inp.removeAttribute('minlength');\n\n        syncOptionalAttr(inp, 'pattern', props.pattern.value ?? null);\n        syncOptionalAttr(inp, 'inputmode', props.inputmode.value ?? null);\n\n        const autocomplete = props.autocomplete.value;\n\n        if (autocomplete == null || autocomplete === '') inp.removeAttribute('autocomplete');\n        else inp.autocomplete = autocomplete as AutoFill;\n      });\n\n      syncSplitAssistive({\n        error: () => props.error.value,\n        errorRef,\n        helper: () => props.helper.value,\n        helperRef,\n      });\n\n      syncCounter({\n        count: () => valueSignal.value.length,\n        format: 'split',\n        maxLength: () => props.maxlength.value,\n        ref: charCounterRef,\n      });\n\n      effect(() => {\n        if (valueSignal.value) host.setAttribute('has-value', '');\n        else host.removeAttribute('has-value');\n      });\n\n      // TODO: migrate aria() on inner elements to a future useA11yField() composable\n      // For now, keep the imperative aria() call inside onMount as-is\n      import('@vielzeug/craftit').then(({ aria }) => {\n        aria(inp, {\n          describedby: () => (props.error.value ? errorId : helperId),\n          errormessage: () => (props.error.value ? errorId : null),\n          invalid: () => !!props.error.value,\n        });\n      });\n\n      if (clearBtnRef.value) {\n        handle(clearBtnRef.value, 'click', (e: MouseEvent) => {\n          e.preventDefault();\n          valueSignal.value = '';\n          emit('input', { originalEvent: e, value: '' });\n          emit('change', { originalEvent: e, value: '' });\n          tf.triggerValidation('change');\n          inputRef.value?.focus();\n        });\n      }\n    });\n\n    return html`\n      <div class=\"input-wrapper\" part=\"wrapper\">\n        <label\n          class=\"label-outside\"\n          for=\"${inputId}\"\n          id=\"${labelOutsideId}\"\n          part=\"label\"\n          ref=${labelOutsideRef}\n          hidden></label>\n        <div class=\"field\" part=\"field\">\n          <label\n            class=\"label-inset\"\n            for=\"${inputId}\"\n            id=\"${labelInsetId}\"\n            part=\"label\"\n            ref=${labelInsetRef}\n            hidden></label>\n          <div class=\"input-row\" part=\"input-row\">\n            <slot name=\"prefix\"></slot>\n            <input\n              part=\"input\"\n              id=\"${inputId}\"\n              ${attr({\n                disabled: props.disabled,\n                name: props.name,\n                placeholder: props.placeholder,\n                readOnly: props.readonly,\n                required: props.required,\n                type: resolvedInputType,\n                value: valueSignal,\n              })}\n              :aria-labelledby=\"${() => (props['label-placement'].value === 'outside' ? labelOutsideId : labelInsetId)}\"\n              aria-describedby=\"${helperId}\"\n              ref=${inputRef} />\n            <slot name=\"suffix\"></slot>\n            <button\n              class=\"pwd-toggle-btn\"\n              part=\"pwd-toggle\"\n              type=\"button\"\n              :aria-label=\"${() => (showPassword.value ? 'Hide password' : 'Show password')}\"\n              :aria-pressed=\"${() => String(showPassword.value)}\"\n              tabindex=\"-1\"\n              @click=\"${() => {\n                showPassword.value = !showPassword.value;\n                inputRef.value?.focus();\n              }}\">\n              ${() => (showPassword.value ? eyeOffIcon : eyeIcon)}\n            </button>\n            <button class=\"clear-btn\" part=\"clear\" type=\"button\" aria-label=\"Clear\" tabindex=\"-1\" ref=${clearBtnRef}>\n              ${clearIcon}\n            </button>\n          </div>\n        </div>\n        <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ref=${helperRef} hidden></div>\n        <div class=\"helper-text\" id=\"${errorId}\" role=\"alert\" part=\"error\" ref=${errorRef} hidden></div>\n        <div class=\"char-counter\" part=\"char-counter\" ref=${charCounterRef} hidden></div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    sizeVariantMixin(FIELD_SIZE_PRESET),\n    ...formFieldMixins,\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('input'),\n    componentStyles,\n  ],\n  tag: 'bit-input',\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_bg:var(--button-bg,var(--color-contrast-50));--_color:var(--button-color,var(--color-contrast-900));--_border:var(--button-border,var(--border));--_border-color:var(--button-border-color,var(--color-contrast-200));--_radius:var(--button-radius,var(--rounded-lg));justify-content:center;align-items:center;display:inline-flex}:host([disabled]){cursor:not-allowed}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed;opacity:.5}:host([loading]) a{cursor:wait}button,a{box-sizing:border-box;gap:var(--_gap,var(--size-2));width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--_padding,var(--size-2) var(--size-4));font-size:var(--_font-size,var(--text-sm));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--_border) solid var(--_border-color);border-top-width:var(--button-border-top,var(--_border));border-bottom-width:var(--button-border-bottom,var(--_border));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), opacity var(--transition-normal), transform var(--transition-fast));justify-content:center;align-items:center;display:flex;position:relative}button: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))),a: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))){border-left-width:var(--button-border-start,var(--_border));border-right-width:var(--button-border-end,var(--_border))}button: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)),a: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)){border-right-width:var(--button-border-start,var(--_border));border-left-width:var(--button-border-end,var(--_border))}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:none}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer buildit.overrides{:host([fullwidth]){width:100%;display:flex}:host([rounded][icon-only]) :is(button,a){border-radius:50%}:host([loading]) .content{visibility:hidden}}@layer buildit.variants{:host([icon-only]) :is(button,a){aspect-ratio:1;padding:0}:host(:not([variant])) :is(button,a),:host([variant=solid]) :is(button,a){color:var(--_theme-contrast);background:var(--_theme-base);border-color:var(--_theme-base)}:host(:not([variant])) :is(button,a):hover,:host([variant=solid]) :is(button,a):hover{background:var(--_theme-focus)}:host(:not([variant])) :is(button,a):active,:host([variant=solid]) :is(button,a):active{background:var(--_theme-content);box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) :is(button,a){color:var(--_theme-base);background:color-mix(in srgb, var(--_theme-backdrop) 8%, var(--color-contrast-100));border-color:color-mix(in srgb, var(--_theme-focus) 20%, transparent);box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) :is(button,a):hover{color:var(--_theme-contrast);background:var(--_theme-focus);box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) :is(button,a):active{color:var(--_theme-contrast);background:var(--_theme-content);box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]) :is(button,a){color:var(--_theme-base);background:var(--_theme-backdrop);border-color:var(--_theme-border);box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) :is(button,a):hover{color:var(--_theme-contrast);background:var(--_theme-focus);border-color:var(--_theme-focus);box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) :is(button,a):active{color:var(--_theme-contrast);background:var(--_theme-content);box-shadow:var(--inset-shadow-sm)}:host([variant=outline]) :is(button,a){color:var(--_theme-base);border-color:var(--_theme-base);background:0 0}:host([variant=outline]) :is(button,a):hover{background:var(--_theme-backdrop);border-color:var(--_theme-focus)}:host([variant=outline]) :is(button,a):active{color:var(--_theme-contrast);background:var(--_theme-base);box-shadow:var(--inset-shadow-2xs)}:host([variant=ghost]) :is(button,a){color:var(--_theme-base);background:0 0;border-width:0;border-color:#0000}:host([variant=ghost]) :is(button,a):hover{background:var(--_theme-backdrop)}:host([variant=ghost]) :is(button,a):active{color:var(--_theme-contrast);background:var(--_theme-base);box-shadow:var(--inset-shadow-2xs)}:host([variant=text]) :is(button,a){color:var(--_theme-base);background:0 0;border-width:0;border-color:#0000}:host([variant=text]) :is(button,a):hover{color:var(--_theme-focus)}:host([variant=text]) :is(button,a):active{color:var(--_theme-content)}:host([variant=frost]:not([color])) :is(button,a):active{background:color-mix(in srgb, var(--color-canvas) 70%, transparent);border-color:color-mix(in srgb, var(--theme-focus) 40%, transparent)}:host([variant=frost][color]) :is(button,a):active{background:color-mix(in srgb, var(--_theme-backdrop) 50%, var(--_theme-base) 50%);border-color:color-mix(in srgb, var(--_theme-focus) 65%, transparent)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin .6s linear infinite);border-radius:50%;position:absolute}.loader: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))){border-right-color:#0000}.loader: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)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}button:hover,a:hover,button:focus-visible,a:focus-visible{box-shadow:var(--_theme-shadow);outline:none}:host([variant=text]) button:hover,:host([variant=text]) a:hover{box-shadow:none}`;exports.default=e;
+//# sourceMappingURL=button.css?inline.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.css?inline.cjs","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--button-bg, var(--color-contrast-50));\n    --_color: var(--button-color, var(--color-contrast-900));\n    --_border: var(--button-border, var(--border));\n    --_border-color: var(--button-border-color, var(--color-contrast-200));\n    --_radius: var(--button-radius, var(--rounded-lg));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  /* Link mode: mixin covers <button> but not <a> */\n  :host([disabled]) a,\n  :host([loading]) a {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  :host([loading]) a {\n    cursor: wait;\n  }\n\n  button,\n  a {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    min-width: 0;\n    height: var(--_height, var(--size-10));\n    min-height: var(--_touch-target);\n    padding: var(--_padding, var(--size-2) var(--size-4));\n    font-size: var(--_font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    line-height: var(--_line-height, var(--leading-normal));\n    color: var(--_color);\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--_border) solid var(--_border-color);\n    border-block-start-width: var(--button-border-top, var(--_border));\n    border-block-end-width: var(--button-border-bottom, var(--_border));\n    border-inline-start-width: var(--button-border-start, var(--_border));\n    border-inline-end-width: var(--button-border-end, var(--_border));\n    border-radius: var(--_radius);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal),\n      opacity var(--transition-normal),\n      transform var(--transition-fast)\n    );\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  button:focus-visible,\n  a:focus-visible {\n    outline: none;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='prefix']),\n  ::slotted([slot='suffix']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer buildit.overrides {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n}\n\n@layer buildit.variants {\n  :host([icon-only]) :is(button, a) {\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  /* Solid (Default) - Full theme color background */\n  :host(:not([variant])) :is(button, a),\n  :host([variant='solid']) :is(button, a) {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n  }\n\n  :host(:not([variant])) :is(button, a):hover,\n  :host([variant='solid']) :is(button, a):hover {\n    background: var(--_theme-focus);\n  }\n\n  :host(:not([variant])) :is(button, a):active,\n  :host([variant='solid']) :is(button, a):active {\n    background: var(--_theme-content);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  /* Flat - Subtle background with theme color text */\n  :host([variant='flat']) :is(button, a) {\n    color: var(--_theme-base);\n    background: color-mix(in srgb, var(--_theme-backdrop) 8%, var(--color-contrast-100));\n    border-color: color-mix(in srgb, var(--_theme-focus) 20%, transparent);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) :is(button, a):hover {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='flat']) :is(button, a):active {\n    color: var(--_theme-contrast);\n    background: var(--_theme-content);\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered - Outlined with filled background */\n  :host([variant='bordered']) :is(button, a) {\n    color: var(--_theme-base);\n    background: var(--_theme-backdrop);\n    border-color: var(--_theme-border);\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) :is(button, a):hover {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) :is(button, a):active {\n    color: var(--_theme-contrast);\n    background: var(--_theme-content);\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline - Transparent with colored border */\n  :host([variant='outline']) :is(button, a) {\n    color: var(--_theme-base);\n    background: transparent;\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='outline']) :is(button, a):hover {\n    background: var(--_theme-backdrop);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='outline']) :is(button, a):active {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  /* Ghost - Transparent until interaction */\n  :host([variant='ghost']) :is(button, a) {\n    color: var(--_theme-base);\n    background: transparent;\n    border-color: transparent;\n    border-width: 0;\n  }\n\n  :host([variant='ghost']) :is(button, a):hover {\n    background: var(--_theme-backdrop);\n  }\n\n  :host([variant='ghost']) :is(button, a):active {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  /* Text - Minimal styling, color on hover */\n  :host([variant='text']) :is(button, a) {\n    color: var(--_theme-base);\n    background: transparent;\n    border-color: transparent;\n    border-width: 0;\n  }\n\n  :host([variant='text']) :is(button, a):hover {\n    color: var(--_theme-focus);\n  }\n\n  :host([variant='text']) :is(button, a):active {\n    color: var(--_theme-content);\n  }\n\n  /* Additional button-specific frost active states */\n  :host([variant='frost']:not([color])) :is(button, a):active {\n    background: color-mix(in srgb, var(--color-canvas) 70%, transparent);\n    border-color: color-mix(in srgb, var(--theme-focus) 40%, transparent);\n  }\n\n  :host([variant='frost'][color]) :is(button, a):active {\n    background: color-mix(in srgb, var(--_theme-backdrop) 50%, var(--_theme-base) 50%);\n    border-color: color-mix(in srgb, var(--_theme-focus) 65%, transparent);\n  }\n}\n\n/* ========================================\n     Other Variants & States\n     ======================================== */\n\n@layer buildit.overrides {\n  /* Icon-only always uses perfect circle */\n  :host([rounded][icon-only]) :is(button, a) {\n    border-radius: 50%;\n  }\n\n  :host([loading]) .content {\n    visibility: hidden;\n  }\n}\n\n/* ========================================\n     Loading Spinner (unlayered for easy override)\n     ======================================== */\n\n.loader {\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  border: var(--border-2) solid currentcolor;\n  border-inline-end-color: transparent;\n  border-radius: 50%;\n  animation: var(--_motion-animation, spin 0.6s linear infinite);\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Focus ring & hover halo — unlayered so it wins over all @layer variant rules */\nbutton:focus-visible,\na:focus-visible,\nbutton:hover,\na:hover {\n  outline: none;\n  box-shadow: var(--_theme-shadow);\n}\n\n/* Text variant: no halo on hover or focus */\n:host([variant='text']) button:hover,\n:host([variant='text']) a:hover {\n  box-shadow: none;\n}\n"],"mappings":""}

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

@@ -0,0 +1,6 @@
+//#region src/inputs/button/button.css?inline
+var e = "@layer buildit.base{:host{--_bg:var(--button-bg,var(--color-contrast-50));--_color:var(--button-color,var(--color-contrast-900));--_border:var(--button-border,var(--border));--_border-color:var(--button-border-color,var(--color-contrast-200));--_radius:var(--button-radius,var(--rounded-lg));justify-content:center;align-items:center;display:inline-flex}:host([disabled]){cursor:not-allowed}:host([disabled]) a,:host([loading]) a{pointer-events:none;cursor:not-allowed;opacity:.5}:host([loading]) a{cursor:wait}button,a{box-sizing:border-box;gap:var(--_gap,var(--size-2));width:100%;min-width:0;height:var(--_height,var(--size-10));min-height:var(--_touch-target);padding:var(--_padding,var(--size-2) var(--size-4));font-size:var(--_font-size,var(--text-sm));font-weight:var(--font-medium);line-height:var(--_line-height,var(--leading-normal));color:var(--_color);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--_border) solid var(--_border-color);border-top-width:var(--button-border-top,var(--_border));border-bottom-width:var(--button-border-bottom,var(--_border));border-radius:var(--_radius);transition:var(--_motion-transition,background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal), opacity var(--transition-normal), transform var(--transition-fast));justify-content:center;align-items:center;display:flex;position:relative}button: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))),a: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))){border-left-width:var(--button-border-start,var(--_border));border-right-width:var(--button-border-end,var(--_border))}button: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)),a: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)){border-right-width:var(--button-border-start,var(--_border));border-left-width:var(--button-border-end,var(--_border))}a{text-decoration:none}button:focus-visible,a:focus-visible{outline:none}.content{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;align-items:center;min-width:0;max-width:100%;display:inline-flex;overflow:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}::slotted(svg){width:var(--_icon-size,var(--leading-6));height:var(--_icon-size,var(--leading-6));flex-shrink:0}}@layer buildit.overrides{:host([fullwidth]){width:100%;display:flex}:host([rounded][icon-only]) :is(button,a){border-radius:50%}:host([loading]) .content{visibility:hidden}}@layer buildit.variants{:host([icon-only]) :is(button,a){aspect-ratio:1;padding:0}:host(:not([variant])) :is(button,a),:host([variant=solid]) :is(button,a){color:var(--_theme-contrast);background:var(--_theme-base);border-color:var(--_theme-base)}:host(:not([variant])) :is(button,a):hover,:host([variant=solid]) :is(button,a):hover{background:var(--_theme-focus)}:host(:not([variant])) :is(button,a):active,:host([variant=solid]) :is(button,a):active{background:var(--_theme-content);box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) :is(button,a){color:var(--_theme-base);background:color-mix(in srgb, var(--_theme-backdrop) 8%, var(--color-contrast-100));border-color:color-mix(in srgb, var(--_theme-focus) 20%, transparent);box-shadow:var(--inset-shadow-2xs)}:host([variant=flat]) :is(button,a):hover{color:var(--_theme-contrast);background:var(--_theme-focus);box-shadow:var(--inset-shadow-xs)}:host([variant=flat]) :is(button,a):active{color:var(--_theme-contrast);background:var(--_theme-content);box-shadow:var(--inset-shadow-sm)}:host([variant=bordered]) :is(button,a){color:var(--_theme-base);background:var(--_theme-backdrop);border-color:var(--_theme-border);box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) :is(button,a):hover{color:var(--_theme-contrast);background:var(--_theme-focus);border-color:var(--_theme-focus);box-shadow:var(--inset-shadow-xs)}:host([variant=bordered]) :is(button,a):active{color:var(--_theme-contrast);background:var(--_theme-content);box-shadow:var(--inset-shadow-sm)}:host([variant=outline]) :is(button,a){color:var(--_theme-base);border-color:var(--_theme-base);background:0 0}:host([variant=outline]) :is(button,a):hover{background:var(--_theme-backdrop);border-color:var(--_theme-focus)}:host([variant=outline]) :is(button,a):active{color:var(--_theme-contrast);background:var(--_theme-base);box-shadow:var(--inset-shadow-2xs)}:host([variant=ghost]) :is(button,a){color:var(--_theme-base);background:0 0;border-width:0;border-color:#0000}:host([variant=ghost]) :is(button,a):hover{background:var(--_theme-backdrop)}:host([variant=ghost]) :is(button,a):active{color:var(--_theme-contrast);background:var(--_theme-base);box-shadow:var(--inset-shadow-2xs)}:host([variant=text]) :is(button,a){color:var(--_theme-base);background:0 0;border-width:0;border-color:#0000}:host([variant=text]) :is(button,a):hover{color:var(--_theme-focus)}:host([variant=text]) :is(button,a):active{color:var(--_theme-content)}:host([variant=frost]:not([color])) :is(button,a):active{background:color-mix(in srgb, var(--color-canvas) 70%, transparent);border-color:color-mix(in srgb, var(--theme-focus) 40%, transparent)}:host([variant=frost][color]) :is(button,a):active{background:color-mix(in srgb, var(--_theme-backdrop) 50%, var(--_theme-base) 50%);border-color:color-mix(in srgb, var(--_theme-focus) 65%, transparent)}}.loader{border:var(--border-2) solid currentcolor;width:1em;height:1em;animation:var(--_motion-animation,spin .6s linear infinite);border-radius:50%;position:absolute}.loader: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))){border-right-color:#0000}.loader: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)){border-left-color:#0000}@keyframes spin{to{transform:rotate(360deg)}}button:hover,a:hover,button:focus-visible,a:focus-visible{box-shadow:var(--_theme-shadow);outline:none}:host([variant=text]) button:hover,:host([variant=text]) a:hover{box-shadow:none}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=button.css?inline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.css?inline.js","names":[],"sources":["../../../src/inputs/button/button.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--button-bg, var(--color-contrast-50));\n    --_color: var(--button-color, var(--color-contrast-900));\n    --_border: var(--button-border, var(--border));\n    --_border-color: var(--button-border-color, var(--color-contrast-200));\n    --_radius: var(--button-radius, var(--rounded-lg));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  /* Link mode: mixin covers <button> but not <a> */\n  :host([disabled]) a,\n  :host([loading]) a {\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  :host([loading]) a {\n    cursor: wait;\n  }\n\n  button,\n  a {\n    position: relative;\n    box-sizing: border-box;\n    display: flex;\n    gap: var(--_gap, var(--size-2));\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    min-width: 0;\n    height: var(--_height, var(--size-10));\n    min-height: var(--_touch-target);\n    padding: var(--_padding, var(--size-2) var(--size-4));\n    font-size: var(--_font-size, var(--text-sm));\n    font-weight: var(--font-medium);\n    line-height: var(--_line-height, var(--leading-normal));\n    color: var(--_color);\n    white-space: nowrap;\n    cursor: pointer;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--_border) solid var(--_border-color);\n    border-block-start-width: var(--button-border-top, var(--_border));\n    border-block-end-width: var(--button-border-bottom, var(--_border));\n    border-inline-start-width: var(--button-border-start, var(--_border));\n    border-inline-end-width: var(--button-border-end, var(--_border));\n    border-radius: var(--_radius);\n    transition: var(\n      --_motion-transition,\n      background var(--transition-normal),\n      border-color var(--transition-normal),\n      box-shadow var(--transition-normal),\n      color var(--transition-normal),\n      opacity var(--transition-normal),\n      transform var(--transition-fast)\n    );\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  button:focus-visible,\n  a:focus-visible {\n    outline: none;\n  }\n\n  .content {\n    display: inline-flex;\n    align-items: center;\n    min-width: 0;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n    white-space: nowrap;\n  }\n\n  ::slotted([slot='prefix']),\n  ::slotted([slot='suffix']) {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n  }\n\n  ::slotted(svg) {\n    flex-shrink: 0;\n    width: var(--_icon-size, var(--leading-6));\n    height: var(--_icon-size, var(--leading-6));\n  }\n}\n\n@layer buildit.overrides {\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n}\n\n@layer buildit.variants {\n  :host([icon-only]) :is(button, a) {\n    aspect-ratio: 1;\n    padding: 0;\n  }\n\n  /* Solid (Default) - Full theme color background */\n  :host(:not([variant])) :is(button, a),\n  :host([variant='solid']) :is(button, a) {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    border-color: var(--_theme-base);\n  }\n\n  :host(:not([variant])) :is(button, a):hover,\n  :host([variant='solid']) :is(button, a):hover {\n    background: var(--_theme-focus);\n  }\n\n  :host(:not([variant])) :is(button, a):active,\n  :host([variant='solid']) :is(button, a):active {\n    background: var(--_theme-content);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  /* Flat - Subtle background with theme color text */\n  :host([variant='flat']) :is(button, a) {\n    color: var(--_theme-base);\n    background: color-mix(in srgb, var(--_theme-backdrop) 8%, var(--color-contrast-100));\n    border-color: color-mix(in srgb, var(--_theme-focus) 20%, transparent);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  :host([variant='flat']) :is(button, a):hover {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='flat']) :is(button, a):active {\n    color: var(--_theme-contrast);\n    background: var(--_theme-content);\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Bordered - Outlined with filled background */\n  :host([variant='bordered']) :is(button, a) {\n    color: var(--_theme-base);\n    background: var(--_theme-backdrop);\n    border-color: var(--_theme-border);\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) :is(button, a):hover {\n    color: var(--_theme-contrast);\n    background: var(--_theme-focus);\n    border-color: var(--_theme-focus);\n    box-shadow: var(--inset-shadow-xs);\n  }\n\n  :host([variant='bordered']) :is(button, a):active {\n    color: var(--_theme-contrast);\n    background: var(--_theme-content);\n    box-shadow: var(--inset-shadow-sm);\n  }\n\n  /* Outline - Transparent with colored border */\n  :host([variant='outline']) :is(button, a) {\n    color: var(--_theme-base);\n    background: transparent;\n    border-color: var(--_theme-base);\n  }\n\n  :host([variant='outline']) :is(button, a):hover {\n    background: var(--_theme-backdrop);\n    border-color: var(--_theme-focus);\n  }\n\n  :host([variant='outline']) :is(button, a):active {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  /* Ghost - Transparent until interaction */\n  :host([variant='ghost']) :is(button, a) {\n    color: var(--_theme-base);\n    background: transparent;\n    border-color: transparent;\n    border-width: 0;\n  }\n\n  :host([variant='ghost']) :is(button, a):hover {\n    background: var(--_theme-backdrop);\n  }\n\n  :host([variant='ghost']) :is(button, a):active {\n    color: var(--_theme-contrast);\n    background: var(--_theme-base);\n    box-shadow: var(--inset-shadow-2xs);\n  }\n\n  /* Text - Minimal styling, color on hover */\n  :host([variant='text']) :is(button, a) {\n    color: var(--_theme-base);\n    background: transparent;\n    border-color: transparent;\n    border-width: 0;\n  }\n\n  :host([variant='text']) :is(button, a):hover {\n    color: var(--_theme-focus);\n  }\n\n  :host([variant='text']) :is(button, a):active {\n    color: var(--_theme-content);\n  }\n\n  /* Additional button-specific frost active states */\n  :host([variant='frost']:not([color])) :is(button, a):active {\n    background: color-mix(in srgb, var(--color-canvas) 70%, transparent);\n    border-color: color-mix(in srgb, var(--theme-focus) 40%, transparent);\n  }\n\n  :host([variant='frost'][color]) :is(button, a):active {\n    background: color-mix(in srgb, var(--_theme-backdrop) 50%, var(--_theme-base) 50%);\n    border-color: color-mix(in srgb, var(--_theme-focus) 65%, transparent);\n  }\n}\n\n/* ========================================\n     Other Variants & States\n     ======================================== */\n\n@layer buildit.overrides {\n  /* Icon-only always uses perfect circle */\n  :host([rounded][icon-only]) :is(button, a) {\n    border-radius: 50%;\n  }\n\n  :host([loading]) .content {\n    visibility: hidden;\n  }\n}\n\n/* ========================================\n     Loading Spinner (unlayered for easy override)\n     ======================================== */\n\n.loader {\n  position: absolute;\n  width: 1em;\n  height: 1em;\n  border: var(--border-2) solid currentcolor;\n  border-inline-end-color: transparent;\n  border-radius: 50%;\n  animation: var(--_motion-animation, spin 0.6s linear infinite);\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Focus ring & hover halo — unlayered so it wins over all @layer variant rules */\nbutton:focus-visible,\na:focus-visible,\nbutton:hover,\na:hover {\n  outline: none;\n  box-shadow: var(--_theme-shadow);\n}\n\n/* Text variant: no halo on hover or focus */\n:host([variant='text']) button:hover,\n:host([variant='text']) a:hover {\n  box-shadow: none;\n}\n"],"mappings":""}

package/dist/inputs/button/button.d.ts

@@ -0,0 +1,73 @@
+import type { ButtonType, DisablableProps, RoundedSize, SizableProps, ThemableProps, VisualVariant } from '../../types';
+/** Button component properties */
+export type BitButtonProps = ThemableProps & SizableProps & DisablableProps & {
+    /** Full width button (100% of container) */
+    fullwidth?: boolean;
+    /** When set, renders an `<a>` instead of `<button>` */
+    href?: string;
+    /** Icon-only mode (square aspect ratio, no padding) */
+    iconOnly?: boolean;
+    /** Accessible label for the inner button — required for icon-only buttons */
+    label?: string;
+    /** Show loading state with spinner */
+    loading?: boolean;
+    /** Enable animated rainbow border effect */
+    rainbow?: boolean;
+    /** Link rel attribute (requires href) */
+    rel?: string;
+    /** Border radius size */
+    rounded?: RoundedSize;
+    /** Link target (requires href) */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /** HTML button type attribute */
+    type?: ButtonType;
+    /** Visual style variant */
+    variant?: Exclude<VisualVariant, 'glass'>;
+};
+/**
+ * A customizable button component with multiple variants, sizes, and states.
+ * Supports icons, loading states, and special effects like frost and rainbow.
+ *
+ * @element bit-button
+ *
+ * @attr {string} type - HTML button type: 'button' | 'submit' | 'reset'
+ * @attr {boolean} disabled - Disable button interaction
+ * @attr {boolean} loading - Show loading state with spinner
+ * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
+ * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'
+ * @attr {string} size - Button size: 'sm' | 'md' | 'lg'
+ * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'
+ * @attr {boolean} rainbow - Enable animated rainbow border effect
+ * @attr {boolean} icon-only - Icon-only mode (square aspect ratio, no padding)
+ * @attr {boolean} fullwidth - Full width button (100% of container)
+ *
+ * @fires click - Emitted when button is clicked (unless disabled/loading)
+ *
+ * @slot - Button content (text, icons, etc.)
+ * @slot prefix - Content before the button text (e.g., icons)
+ * @slot suffix - Content after the button text (e.g., icons, badges)
+ *
+ * @part button - The button element
+ * @part loader - The loading spinner element
+ * @part content - The button content wrapper
+ *
+ * @cssprop --button-bg - Background color
+ * @cssprop --button-color - Text color
+ * @cssprop --button-hover-bg - Hover background
+ * @cssprop --button-active-bg - Active/pressed background
+ * @cssprop --button-border - Border width
+ * @cssprop --button-border-color - Border color
+ * @cssprop --button-radius - Border radius
+ * @cssprop --button-padding - Inner padding
+ * @cssprop --button-gap - Gap between icon and text
+ * @cssprop --button-font-size - Font size
+ *
+ * @example
+ * ```html
+ * <bit-button variant="solid" color="primary">Click me</bit-button>
+ * <bit-button loading color="success">Processing...</bit-button>
+ * <bit-button variant="frost" rainbow>Special Button</bit-button>
+ * ```
+ */
+export declare const BUTTON_TAG: string;
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/inputs/button/button.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAaxH,kCAAkC;AAClC,MAAM,MAAM,cAAc,GAAG,aAAa,GACxC,YAAY,GACZ,eAAe,GAAG;IAChB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,kCAAkC;IAClC,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACjD,iCAAiC;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;CAC3C,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,UAAU,QA6HrB,CAAC"}

package/dist/inputs/button-group/button-group.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--group-gap:var(--size-2);--group-radius:var(--rounded-lg);display:inline-flex}.button-group{gap:var(--group-gap);flex-direction:row;display:flex}}@layer buildit.variants{:host([orientation=vertical]) .button-group{flex-direction:column}}@layer buildit.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullwidth]) .button-group{width:100%}:host([fullwidth]) ::slotted(bit-button){flex:1}:host([attached]) .button-group{gap:0}:host([attached]) ::slotted(bit-button:hover),:host([attached]) ::slotted(bit-button:focus-within){z-index:1;position:relative}:host([attached]:not([orientation=vertical])) ::slotted(bit-button){--button-radius:0}:host([attached]:not([orientation=vertical])) ::slotted(bit-button:not(:first-child)){--button-border-start:0}:host([attached]:not([orientation=vertical])) ::slotted(bit-button:first-child){--button-radius:var(--group-radius) 0 0 var(--group-radius)}:host([attached]:not([orientation=vertical])) ::slotted(bit-button:last-child){--button-radius:0 var(--group-radius) var(--group-radius) 0}:host([attached][orientation=vertical]) ::slotted(bit-button){--button-radius:0}:host([attached][orientation=vertical]) ::slotted(bit-button:not(:first-child)){--button-border-top:0}:host([attached][orientation=vertical]) ::slotted(bit-button:first-child){--button-radius:var(--group-radius) var(--group-radius) 0 0}:host([attached][orientation=vertical]) ::slotted(bit-button:last-child){--button-radius:0 0 var(--group-radius) var(--group-radius)}}`;exports.default=e;
+//# sourceMappingURL=button-group.css?inline.cjs.map

package/dist/inputs/button-group/button-group.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.css?inline.cjs","names":[],"sources":["../../../src/inputs/button-group/button-group.css?inline"],"sourcesContent":["@layer buildit.base {\n  /* ========================================\n       Base Styles\n       ======================================== */\n\n  :host {\n    display: inline-flex;\n\n    --group-gap: var(--size-2);\n    --group-radius: var(--rounded-lg);\n  }\n\n  .button-group {\n    display: flex;\n    flex-direction: row;\n    gap: var(--group-gap);\n  }\n}\n\n@layer buildit.variants {\n  /* ========================================\n       Orientation\n       ======================================== */\n\n  :host([orientation='vertical']) .button-group {\n    flex-direction: column;\n  }\n}\n\n@layer buildit.overrides {\n  /* ========================================\n       Full Width\n       ======================================== */\n\n  :host([fullwidth]) {\n    display: flex;\n    width: 100%;\n  }\n\n  :host([fullwidth]) .button-group {\n    width: 100%;\n  }\n\n  :host([fullwidth]) ::slotted(bit-button) {\n    flex: 1;\n  }\n\n  /* ========================================\n       Attached Mode\n       ======================================== */\n\n  :host([attached]) .button-group {\n    gap: 0;\n  }\n\n  /* Ensure attached buttons have proper z-index on hover/focus */\n  :host([attached]) ::slotted(bit-button:hover),\n  :host([attached]) ::slotted(bit-button:focus-within) {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* Horizontal attached - remove inner borders and round corners */\n  :host([attached]:not([orientation='vertical'])) ::slotted(bit-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(bit-button:not(:first-child)) {\n    --button-border-start: 0;\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(bit-button:first-child) {\n    --button-radius: var(--group-radius) 0 0 var(--group-radius);\n  }\n\n  :host([attached]:not([orientation='vertical'])) ::slotted(bit-button:last-child) {\n    --button-radius: 0 var(--group-radius) var(--group-radius) 0;\n  }\n\n  /* Vertical attached - remove inner borders and round corners */\n  :host([attached][orientation='vertical']) ::slotted(bit-button) {\n    --button-radius: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(bit-button:not(:first-child)) {\n    --button-border-top: 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(bit-button:first-child) {\n    --button-radius: var(--group-radius) var(--group-radius) 0 0;\n  }\n\n  :host([attached][orientation='vertical']) ::slotted(bit-button:last-child) {\n    --button-radius: 0 0 var(--group-radius) var(--group-radius);\n  }\n}\n"],"mappings":""}

package/dist/inputs/button-group/button-group.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/inputs/button-group/button-group.css?inline
+var e = "@layer buildit.base{:host{--group-gap:var(--size-2);--group-radius:var(--rounded-lg);display:inline-flex}.button-group{gap:var(--group-gap);flex-direction:row;display:flex}}@layer buildit.variants{:host([orientation=vertical]) .button-group{flex-direction:column}}@layer buildit.overrides{:host([fullwidth]){width:100%;display:flex}:host([fullwidth]) .button-group{width:100%}:host([fullwidth]) ::slotted(bit-button){flex:1}:host([attached]) .button-group{gap:0}:host([attached]) ::slotted(bit-button:hover),:host([attached]) ::slotted(bit-button:focus-within){z-index:1;position:relative}:host([attached]:not([orientation=vertical])) ::slotted(bit-button){--button-radius:0}:host([attached]:not([orientation=vertical])) ::slotted(bit-button:not(:first-child)){--button-border-start:0}:host([attached]:not([orientation=vertical])) ::slotted(bit-button:first-child){--button-radius:var(--group-radius) 0 0 var(--group-radius)}:host([attached]:not([orientation=vertical])) ::slotted(bit-button:last-child){--button-radius:0 var(--group-radius) var(--group-radius) 0}:host([attached][orientation=vertical]) ::slotted(bit-button){--button-radius:0}:host([attached][orientation=vertical]) ::slotted(bit-button:not(:first-child)){--button-border-top:0}:host([attached][orientation=vertical]) ::slotted(bit-button:first-child){--button-radius:var(--group-radius) var(--group-radius) 0 0}:host([attached][orientation=vertical]) ::slotted(bit-button:last-child){--button-radius:0 0 var(--group-radius) var(--group-radius)}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=button-group.css?inline.js.map