@cfasim-ui/components 0.3.5 → 0.3.7

package/dist/NumberInput/NumberInput.d.ts

@@ -10,6 +10,8 @@ type __VLS_Props = {
     slider?: boolean;
     live?: boolean;
     numberType?: "integer" | "float";
+    required?: boolean;
+    decimals?: number;
 };
 type __VLS_PublicProps = {
     modelValue?: number;

package/dist/index.css

@@ -1,2 +1,2 @@
-.box[data-v-d7342c02]{font-size:var(--font-size-sm);border-radius:.375em;padding:.75em 1.25em}.box-info[data-v-d7342c02]{background-color:var(--color-box-info-bg);color:var(--color-box-info-text)}.box-success[data-v-d7342c02]{background-color:var(--color-box-success-bg);color:var(--color-box-success-text)}.box-warning[data-v-d7342c02]{background-color:var(--color-box-warning-bg);color:var(--color-box-warning-text)}.box-error[data-v-d7342c02]{background-color:var(--color-box-error-bg);color:var(--color-box-error-text)}.button[data-v-250eab18]{min-height:2.5em;font-size:var(--font-size-sm);background-color:var(--color-primary);color:var(--color-text-on-primary);border:none;border-radius:.375em;flex-shrink:0;justify-content:center;align-self:flex-start;align-items:center;padding:0 1em;font-weight:500;display:inline-flex}.button[data-v-250eab18]:hover{cursor:pointer;background-color:var(--color-primary-hover)}.button[data-v-250eab18]:active{background-color:var(--color-primary-active)}.button[data-v-250eab18]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.button[data-v-250eab18]:disabled{opacity:.5;cursor:not-allowed}.button[data-variant=secondary][data-v-250eab18]{color:var(--color-primary);border:1px solid var(--color-primary);background-color:#0000}.button[data-variant=secondary][data-v-250eab18]:hover{background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}.button[data-variant=secondary][data-v-250eab18]:active{background-color:color-mix(in srgb, var(--color-primary) 15%, transparent)}.expander-trigger[data-v-39e4acd0]{cursor:pointer;width:100%;font:inherit;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);background:0 0;border:none;align-items:center;gap:.5em;padding:.5em 0;font-weight:600;display:flex}.expander-trigger[data-v-39e4acd0]:hover{color:var(--color-text)}.expander-caret[data-v-39e4acd0]{border-top:.3em solid #0000;border-bottom:.3em solid #0000;border-left:.35em solid;width:0;height:0;transition:transform .15s;display:inline-block}.expander-caret.open[data-v-39e4acd0]{transform:rotate(90deg)}.expander-content[data-v-39e4acd0]{flex-direction:column;gap:.75em;display:flex;overflow:hidden}.expander-content[data-state=open][data-v-39e4acd0]{animation:.2s ease-out slideDown-39e4acd0}.expander-content[data-state=closed][data-v-39e4acd0]{animation:.2s ease-out slideUp-39e4acd0}@keyframes slideDown-39e4acd0{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes slideUp-39e4acd0{0%{height:var(--reka-collapsible-content-height)}to{height:0}}.Icon{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" var(--icon-fill,0), "wght" var(--icon-weight,400), "GRAD" var(--icon-grade,0), "opsz" var(--icon-opsz,24);color:inherit;direction:ltr;font-family:Material Symbols Outlined,sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}.Icon[data-size=sm]{--icon-opsz:20;font-size:20px}.Icon[data-size=md]{--icon-opsz:24;font-size:24px}.Icon[data-size=lg]{--icon-opsz:28;font-size:28px}.Icon[data-size=xl]{--icon-opsz:32;font-size:32px}.Icon[data-fill=true]{--icon-fill:1}.Icon[data-inline=true]{font-size:inherit;vertical-align:middle;transform-origin:50%;transform:scale(1.2)translateY(-.05em)}.HintTrigger[data-v-9dbf1c25]{width:1.25em;height:1.25em;color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.HintTrigger[data-v-9dbf1c25]:hover{color:var(--color-text)}.HintTrigger[data-v-9dbf1c25]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.HintContent{max-width:15rem;font-size:var(--font-size-xs);color:var(--color-bg-0);background-color:var(--color-text);box-shadow:var(--shadow-md);z-index:100;border-radius:.25em;padding:.5em .75em;line-height:1.4}.HintArrow{fill:var(--color-text)}.light-dark-toggle[data-v-4c423498]{border:1px solid var(--color-border);background:var(--color-bg-0);width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);border-radius:.25em;justify-content:center;align-items:center;display:flex}.light-dark-toggle[data-v-4c423498]:hover{color:var(--color-text);background:var(--color-bg-1)}.input-label[data-v-c7d72595]{flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-c7d72595]{justify-content:space-between;align-items:center;display:flex}.input-wrapper[data-v-c7d72595]{align-items:center;gap:.25em;display:flex}.input-wrapper input[data-v-c7d72595]{flex:1;min-width:0}input[data-v-c7d72595]{width:100%;height:2.5em;font-size:inherit;background-color:var(--color-bg-0);color:var(--color-text);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;padding:0 .75em;display:block}input[data-v-c7d72595]:hover{border-color:var(--color-border-hover)}input[data-v-c7d72595]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[aria-invalid=true][data-v-c7d72595]{border-color:var(--color-error)}input[aria-invalid=true][data-v-c7d72595]:focus{border-color:var(--color-error);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent)}input[data-v-c7d72595]::placeholder{color:var(--color-text-tertiary)}.input-suffix[data-v-c7d72595]{color:var(--color-text-secondary);font-size:var(--font-size-sm);flex-shrink:0}.input-error[data-v-c7d72595]{color:var(--color-error);font-size:var(--font-size-xs)}.slider-container[data-v-c7d72595]{flex-direction:column;gap:.25em;padding-top:1.5em;display:flex}.slider-current[data-v-c7d72595]{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;pointer-events:none;margin-bottom:1px;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.slider-root[data-v-c7d72595]{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;width:100%;height:1.5em;display:flex;position:relative}.slider-track[data-v-c7d72595]{background-color:var(--color-bg-3);border-radius:var(--radius-full);flex-grow:1;height:3px;position:relative}.slider-range[data-v-c7d72595]{background-color:var(--color-primary);border-radius:var(--radius-full);height:100%;position:absolute}.slider-thumb[data-v-c7d72595]{background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;width:1em;height:1em;display:block;position:relative}.slider-thumb[data-v-c7d72595]:hover{background-color:var(--color-primary-hover)}.slider-thumb[data-v-c7d72595]:active,.slider-thumb[data-v-c7d72595]:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);outline:none}.slider-labels[data-v-c7d72595]{font-size:var(--font-size-xs);color:var(--color-text-secondary);justify-content:space-between;margin-top:-.5em;display:flex}.select-box[data-v-63876437]{flex-direction:column;gap:.25em;display:flex}.select-label[data-v-63876437]{font-size:var(--font-size-sm)}.select-trigger[data-v-63876437]{font-size:var(--font-size-sm);border:1px solid var(--color-border);background:var(--color-bg-0);cursor:pointer;width:auto;height:2.5em;color:inherit;border-radius:.375em;justify-content:space-between;align-items:center;gap:.5em;padding:0 .75em;font-family:inherit;line-height:1.4;display:inline-flex}.select-trigger[data-v-63876437]:hover{border-color:var(--color-border-hover)}.select-trigger[data-v-63876437]:focus-visible{outline:2px solid var(--color-primary);outline-offset:-1px}.select-trigger[data-placeholder][data-v-63876437]{color:var(--color-text-secondary)}.select-icon[data-v-63876437]{flex-shrink:0;align-items:center;display:flex}.select-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);min-width:var(--reka-select-trigger-width);max-height:var(--reka-select-content-available-height);border-radius:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.select-viewport{padding:.25em}.select-item{font-size:var(--font-size-sm);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.25em;outline:none;justify-content:space-between;align-items:center;gap:.5em;padding:.25em .5em;display:flex}.select-item[data-highlighted]{background:var(--color-primary);color:#fff}.select-item[data-state=checked]{font-weight:600}.select-indicator{flex-shrink:0;align-items:center;display:flex}.SidebarLayout[data-v-b7035d57]{--bar-height:3rem;background-color:var(--color-bg-0);height:100dvh;color:var(--color-text);font-family:var(--font-family);display:flex;position:relative}.SidebarRail[data-v-b7035d57]{width:var(--sidebar-width);height:100%;transition:width var(--transition-normal);flex-shrink:0;position:relative;overflow:hidden}@media (width>=768px){.SidebarLayout[data-collapsed=true] .SidebarRail[data-v-b7035d57]{width:var(--toggle-size);background-color:var(--color-bg-1);border-right:1px solid var(--color-border);box-shadow:var(--shadow-sm)}}.Sidebar[data-v-b7035d57]{font-size:var(--font-size-sm);width:var(--sidebar-width);height:100%;transition:transform var(--transition-normal);display:flex;transform:translate(0)}.SidebarLayout[data-collapsed=true] .Sidebar[data-v-b7035d57]{transform:translate(-100%)}.SidebarScroll[data-v-b7035d57]{min-width:0;padding:var(--space-4);background-color:var(--color-bg-1);border-right:1px solid var(--color-border);box-shadow:var(--shadow-sm);scrollbar-width:thin;scrollbar-color:transparent transparent;gap:var(--space-3);flex-direction:column;flex:1;display:flex;overflow-y:auto}.SidebarScroll[data-v-b7035d57]:hover{scrollbar-color:var(--color-border) transparent}.SidebarScroll[data-v-b7035d57] h2{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);margin:var(--space-4) 0 var(--space-2);font-weight:600}.SidebarScroll[data-v-b7035d57]>h2:first-child{margin-top:0}.Toggle[data-v-b7035d57]{width:var(--toggle-size);height:var(--toggle-size);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.Toggle[data-v-b7035d57]:hover{color:var(--color-text);background-color:var(--color-bg-2)}.Toggle[data-v-b7035d57]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.SidebarHeader[data-v-b7035d57]{margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) calc(-1 * var(--space-3));justify-content:flex-end;display:flex}.Toggle--expand[data-v-b7035d57]{opacity:0;pointer-events:none;transition:opacity var(--transition-fast);position:absolute;top:0;left:50%;transform:translate(-50%)}.SidebarLayout[data-collapsed=true] .Toggle--expand[data-v-b7035d57]{opacity:1;pointer-events:auto}.Main[data-v-b7035d57]{background-color:var(--color-bg-0);min-width:0;font-size:var(--font-size-md);flex-direction:column;flex:1;display:flex;overflow:hidden}.Topbar[data-v-b7035d57]{min-height:var(--bar-height);padding:0 var(--space-4);flex-shrink:0;align-items:center;display:flex}.TopbarEnd[data-v-b7035d57]{align-items:center;gap:var(--space-1);margin-left:auto;display:flex}@media (width>=768px){.Topbar[data-v-b7035d57]{padding:0 var(--space-4) 0 var(--space-20)}}.MainScroll[data-v-b7035d57]{min-height:0;padding:var(--space-6) 0;scrollbar-width:thin;scrollbar-color:transparent transparent;flex:1;overflow:hidden auto}.MainScroll[data-v-b7035d57]:hover{scrollbar-color:var(--color-border) transparent}.MainContent[data-v-b7035d57]{max-width:1024px;padding:0 var(--space-4)}@media (width>=768px){.MainContent[data-v-b7035d57]{padding:0 var(--space-4) 0 var(--space-20)}}@media (width<=767px){.SidebarLayout[data-v-b7035d57]{transition:transform var(--transition-normal)}.SidebarLayout[data-collapsed=true][data-v-b7035d57]{transform:translateX(calc(-1 * var(--sidebar-width)))}.SidebarLayout[data-collapsed=true] .Sidebar[data-v-b7035d57]{transform:translate(0)}.SidebarRail[data-v-b7035d57]{min-width:var(--sidebar-width)}.Main[data-v-b7035d57]{min-width:100vw}.Toggle--expand[data-v-b7035d57]{display:none}}.TabsLayout[data-v-b7035d57]{flex-direction:column;flex:1;min-height:0;display:flex}.TabsBar[data-v-b7035d57]{min-height:var(--bar-height);border-bottom:1px solid var(--color-border);padding:0 var(--space-4);flex-shrink:0;align-items:center;display:flex}.TabsBarEnd[data-v-b7035d57]{align-items:center;gap:var(--space-1);margin-left:auto;display:flex}.TabsList[data-v-b7035d57]{gap:var(--space-1);align-self:stretch;display:flex;position:relative}.TabsTrigger[data-v-b7035d57]{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);border-radius:var(--radius-md) var(--radius-md) 0 0;background:0 0;border:none;font-family:inherit;font-weight:500;position:relative}.TabsTrigger[data-v-b7035d57]:hover{color:var(--color-text);background-color:var(--color-bg-1)}.TabsTrigger[data-state=active][data-v-b7035d57]{color:var(--color-text)}.TabsTrigger[data-v-b7035d57]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.TabsIndicator[data-v-b7035d57]{background-color:var(--color-text);height:2px;transition:width var(--transition-fast), left var(--transition-fast);position:absolute;bottom:0}.Spinner{vertical-align:middle;border:2px solid;border-top-color:#0000;border-radius:50%;animation:.6s linear infinite cfa-spin;display:inline-block}.Spinner[data-size=sm]{width:14px;height:14px}.Spinner[data-size=md]{width:20px;height:20px}.Spinner[data-size=lg]{border-width:3px;width:28px;height:28px}@keyframes cfa-spin{to{transform:rotate(360deg)}}.input-label[data-v-3f3d20cc]{font-size:var(--font-size-sm);flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-3f3d20cc]{justify-content:space-between;align-items:center;display:flex}input[data-v-3f3d20cc]{width:100%;height:2.5em;font-size:inherit;background-color:var(--color-bg-0);color:var(--color-text);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;padding:0 .75em;display:block}input[data-v-3f3d20cc]:hover{border-color:var(--color-border-hover)}input[data-v-3f3d20cc]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[data-v-3f3d20cc]::placeholder{color:var(--color-text-tertiary)}.toggle[data-v-9916c71e]{align-items:center;gap:.5em;display:flex}.toggle label[data-v-9916c71e]{-webkit-user-select:none;user-select:none}.switch[data-v-9916c71e]{--switch-w:2.25em;--switch-h:1.25em;--thumb-size:1em;--thumb-offset:.125em;width:var(--switch-w);height:var(--switch-h);background:var(--color-border-hover);border-radius:var(--switch-h);cursor:pointer;border:none;flex-shrink:0;padding:0;transition:background .15s;position:relative}.switch[data-state=checked][data-v-9916c71e]{background:var(--color-primary)}.switch[data-disabled][data-v-9916c71e]{opacity:.5;cursor:not-allowed}.thumb[data-v-9916c71e]{width:var(--thumb-size);height:var(--thumb-size);top:var(--thumb-offset);left:var(--thumb-offset);background:#fff;border-radius:50%;transition:transform .15s;display:block;position:absolute}.switch[data-state=checked] .thumb[data-v-9916c71e]{transform:translateX(calc(var(--switch-w) - var(--thumb-size) - var(--thumb-offset) * 2))}
+.box[data-v-d7342c02]{font-size:var(--font-size-sm);border-radius:.375em;padding:.75em 1.25em}.box-info[data-v-d7342c02]{background-color:var(--color-box-info-bg);color:var(--color-box-info-text)}.box-success[data-v-d7342c02]{background-color:var(--color-box-success-bg);color:var(--color-box-success-text)}.box-warning[data-v-d7342c02]{background-color:var(--color-box-warning-bg);color:var(--color-box-warning-text)}.box-error[data-v-d7342c02]{background-color:var(--color-box-error-bg);color:var(--color-box-error-text)}.button[data-v-250eab18]{min-height:2.5em;font-size:var(--font-size-sm);background-color:var(--color-primary);color:var(--color-text-on-primary);border:none;border-radius:.375em;flex-shrink:0;justify-content:center;align-self:flex-start;align-items:center;padding:0 1em;font-weight:500;display:inline-flex}.button[data-v-250eab18]:hover{cursor:pointer;background-color:var(--color-primary-hover)}.button[data-v-250eab18]:active{background-color:var(--color-primary-active)}.button[data-v-250eab18]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.button[data-v-250eab18]:disabled{opacity:.5;cursor:not-allowed}.button[data-variant=secondary][data-v-250eab18]{color:var(--color-primary);border:1px solid var(--color-primary);background-color:#0000}.button[data-variant=secondary][data-v-250eab18]:hover{background-color:color-mix(in srgb, var(--color-primary) 10%, transparent)}.button[data-variant=secondary][data-v-250eab18]:active{background-color:color-mix(in srgb, var(--color-primary) 15%, transparent)}.expander-trigger[data-v-39e4acd0]{cursor:pointer;width:100%;font:inherit;font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);background:0 0;border:none;align-items:center;gap:.5em;padding:.5em 0;font-weight:600;display:flex}.expander-trigger[data-v-39e4acd0]:hover{color:var(--color-text)}.expander-caret[data-v-39e4acd0]{border-top:.3em solid #0000;border-bottom:.3em solid #0000;border-left:.35em solid;width:0;height:0;transition:transform .15s;display:inline-block}.expander-caret.open[data-v-39e4acd0]{transform:rotate(90deg)}.expander-content[data-v-39e4acd0]{flex-direction:column;gap:.75em;display:flex;overflow:hidden}.expander-content[data-state=open][data-v-39e4acd0]{animation:.2s ease-out slideDown-39e4acd0}.expander-content[data-state=closed][data-v-39e4acd0]{animation:.2s ease-out slideUp-39e4acd0}@keyframes slideDown-39e4acd0{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes slideUp-39e4acd0{0%{height:var(--reka-collapsible-content-height)}to{height:0}}.Icon{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;font-feature-settings:"liga";-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" var(--icon-fill,0), "wght" var(--icon-weight,400), "GRAD" var(--icon-grade,0), "opsz" var(--icon-opsz,24);color:inherit;direction:ltr;font-family:Material Symbols Outlined,sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}.Icon[data-size=sm]{--icon-opsz:20;font-size:20px}.Icon[data-size=md]{--icon-opsz:24;font-size:24px}.Icon[data-size=lg]{--icon-opsz:28;font-size:28px}.Icon[data-size=xl]{--icon-opsz:32;font-size:32px}.Icon[data-fill=true]{--icon-fill:1}.Icon[data-inline=true]{font-size:inherit;vertical-align:middle;transform-origin:50%;transform:scale(1.2)translateY(-.05em)}.HintTrigger[data-v-9dbf1c25]{width:1.25em;height:1.25em;color:var(--color-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.HintTrigger[data-v-9dbf1c25]:hover{color:var(--color-text)}.HintTrigger[data-v-9dbf1c25]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.HintContent{max-width:15rem;font-size:var(--font-size-xs);color:var(--color-bg-0);background-color:var(--color-text);box-shadow:var(--shadow-md);z-index:100;border-radius:.25em;padding:.5em .75em;line-height:1.4}.HintArrow{fill:var(--color-text)}.light-dark-toggle[data-v-4c423498]{border:1px solid var(--color-border);background:var(--color-bg-0);width:32px;height:32px;color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);border-radius:.25em;justify-content:center;align-items:center;display:flex}.light-dark-toggle[data-v-4c423498]:hover{color:var(--color-text);background:var(--color-bg-1)}.input-label[data-v-10b86a5d]{flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-10b86a5d]{justify-content:space-between;align-items:center;display:flex}.input-wrapper[data-v-10b86a5d]{align-items:center;gap:.25em;display:flex}.input-wrapper input[data-v-10b86a5d]{flex:1;min-width:0}input[data-v-10b86a5d]{width:100%;height:2.5em;font-size:inherit;background-color:var(--color-bg-0);color:var(--color-text);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;padding:0 .75em;display:block}input[data-v-10b86a5d]:hover{border-color:var(--color-border-hover)}input[data-v-10b86a5d]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[aria-invalid=true][data-v-10b86a5d]{border-color:var(--color-error)}input[aria-invalid=true][data-v-10b86a5d]:focus{border-color:var(--color-error);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent)}input[data-v-10b86a5d]::placeholder{color:var(--color-text-tertiary)}.input-suffix[data-v-10b86a5d]{color:var(--color-text-secondary);font-size:var(--font-size-sm);flex-shrink:0}.input-error[data-v-10b86a5d]{color:var(--color-error);font-size:var(--font-size-xs)}.slider-container[data-v-10b86a5d]{flex-direction:column;gap:.25em;padding-top:1.5em;display:flex}.slider-current[data-v-10b86a5d]{font-size:var(--font-size-xs);color:var(--color-text-secondary);white-space:nowrap;pointer-events:none;margin-bottom:1px;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.slider-root[data-v-10b86a5d]{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;width:100%;height:1.5em;display:flex;position:relative}.slider-track[data-v-10b86a5d]{background-color:var(--color-bg-3);border-radius:var(--radius-full);flex-grow:1;height:3px;position:relative}.slider-range[data-v-10b86a5d]{background-color:var(--color-primary);border-radius:var(--radius-full);height:100%;position:absolute}.slider-thumb[data-v-10b86a5d]{background-color:var(--color-primary);border-radius:var(--radius-full);cursor:pointer;width:1em;height:1em;display:block;position:relative}.slider-thumb[data-v-10b86a5d]:hover{background-color:var(--color-primary-hover)}.slider-thumb[data-v-10b86a5d]:active,.slider-thumb[data-v-10b86a5d]:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 25%, transparent);outline:none}.slider-labels[data-v-10b86a5d]{font-size:var(--font-size-xs);color:var(--color-text-secondary);justify-content:space-between;margin-top:-.5em;display:flex}.select-box[data-v-63876437]{flex-direction:column;gap:.25em;display:flex}.select-label[data-v-63876437]{font-size:var(--font-size-sm)}.select-trigger[data-v-63876437]{font-size:var(--font-size-sm);border:1px solid var(--color-border);background:var(--color-bg-0);cursor:pointer;width:auto;height:2.5em;color:inherit;border-radius:.375em;justify-content:space-between;align-items:center;gap:.5em;padding:0 .75em;font-family:inherit;line-height:1.4;display:inline-flex}.select-trigger[data-v-63876437]:hover{border-color:var(--color-border-hover)}.select-trigger[data-v-63876437]:focus-visible{outline:2px solid var(--color-primary);outline-offset:-1px}.select-trigger[data-placeholder][data-v-63876437]{color:var(--color-text-secondary)}.select-icon[data-v-63876437]{flex-shrink:0;align-items:center;display:flex}.select-content{z-index:100;background:var(--color-bg-0);border:1px solid var(--color-border);min-width:var(--reka-select-trigger-width);max-height:var(--reka-select-content-available-height);border-radius:.25em;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.select-viewport{padding:.25em}.select-item{font-size:var(--font-size-sm);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:.25em;outline:none;justify-content:space-between;align-items:center;gap:.5em;padding:.25em .5em;display:flex}.select-item[data-highlighted]{background:var(--color-primary);color:#fff}.select-item[data-state=checked]{font-weight:600}.select-indicator{flex-shrink:0;align-items:center;display:flex}.SidebarLayout[data-v-e0ed7a62]{--bar-height:3rem;background-color:var(--color-bg-0);height:100dvh;color:var(--color-text);font-family:var(--font-family);display:flex;position:relative}.SidebarRail[data-v-e0ed7a62]{width:var(--sidebar-width);height:100%;transition:width var(--transition-normal);flex-shrink:0;position:relative;overflow:hidden}@media (width>=768px){.SidebarLayout[data-collapsed=true] .SidebarRail[data-v-e0ed7a62]{width:var(--toggle-size);background-color:var(--color-bg-1);border-right:1px solid var(--color-border);box-shadow:var(--shadow-sm)}}.Sidebar[data-v-e0ed7a62]{font-size:var(--font-size-sm);width:var(--sidebar-width);height:100%;transition:transform var(--transition-normal);display:flex;transform:translate(0)}.SidebarLayout[data-collapsed=true] .Sidebar[data-v-e0ed7a62]{transform:translate(-100%)}.SidebarScroll[data-v-e0ed7a62]{min-width:0;padding:var(--space-4);background-color:var(--color-bg-1);border-right:1px solid var(--color-border);box-shadow:var(--shadow-sm);scrollbar-width:thin;scrollbar-color:transparent transparent;gap:var(--space-3);flex-direction:column;flex:1;display:flex;overflow-y:auto}.SidebarScroll[data-v-e0ed7a62]:hover{scrollbar-color:var(--color-border) transparent}.SidebarScroll[data-v-e0ed7a62] h2{font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);margin:var(--space-4) 0 var(--space-2);font-weight:600}.SidebarScroll[data-v-e0ed7a62]>h2:first-child{margin-top:0}.Toggle[data-v-e0ed7a62]{width:var(--toggle-size);height:var(--toggle-size);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.Toggle[data-v-e0ed7a62]:hover{color:var(--color-text);background-color:var(--color-bg-2)}.Toggle[data-v-e0ed7a62]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.SidebarHeader[data-v-e0ed7a62]{margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) calc(-1 * var(--space-3));justify-content:flex-end;display:flex}.Toggle--expand[data-v-e0ed7a62]{opacity:0;pointer-events:none;transition:opacity var(--transition-fast);position:absolute;top:0;left:50%;transform:translate(-50%)}.SidebarLayout[data-collapsed=true] .Toggle--expand[data-v-e0ed7a62]{opacity:1;pointer-events:auto}.Main[data-v-e0ed7a62]{background-color:var(--color-bg-0);min-width:0;font-size:var(--font-size-md);flex-direction:column;flex:1;display:flex;overflow:hidden;container-type:inline-size}.Topbar[data-v-e0ed7a62]{min-height:var(--bar-height);padding:0 var(--space-4);flex-shrink:0;align-items:center;display:flex}.TopbarEnd[data-v-e0ed7a62]{align-items:center;gap:var(--space-1);margin-left:auto;display:flex}@container (width>=768px){.Topbar[data-v-e0ed7a62]{padding:0 var(--space-4) 0 var(--space-20)}}.MainScroll[data-v-e0ed7a62]{min-height:0;padding:var(--space-6) 0;scrollbar-width:thin;scrollbar-color:transparent transparent;flex:1;overflow:hidden auto}.MainScroll[data-v-e0ed7a62]:hover{scrollbar-color:var(--color-border) transparent}.MainContent[data-v-e0ed7a62]{max-width:1024px;padding:0 var(--space-4)}@container (width>=768px){.MainContent[data-v-e0ed7a62]{padding:0 var(--space-4) 0 var(--space-20)}}@media (width<=767px){.SidebarLayout[data-v-e0ed7a62]{transition:transform var(--transition-normal)}.SidebarLayout[data-collapsed=true][data-v-e0ed7a62]{transform:translateX(calc(-1 * var(--sidebar-width)))}.SidebarLayout[data-collapsed=true] .Sidebar[data-v-e0ed7a62]{transform:translate(0)}.SidebarRail[data-v-e0ed7a62]{min-width:var(--sidebar-width)}.Main[data-v-e0ed7a62]{min-width:100vw}.Toggle--expand[data-v-e0ed7a62]{display:none}}.TabsLayout[data-v-e0ed7a62]{flex-direction:column;flex:1;min-height:0;display:flex}.TabsBar[data-v-e0ed7a62]{min-height:var(--bar-height);border-bottom:1px solid var(--color-border);padding:0 var(--space-4);flex-shrink:0;align-items:center;display:flex}.TabsBarEnd[data-v-e0ed7a62]{align-items:center;gap:var(--space-1);margin-left:auto;display:flex}.TabsList[data-v-e0ed7a62]{gap:var(--space-1);align-self:stretch;display:flex;position:relative}.TabsTrigger[data-v-e0ed7a62]{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);color:var(--color-text-secondary);cursor:pointer;transition:color var(--transition-fast), background-color var(--transition-fast);border-radius:var(--radius-md) var(--radius-md) 0 0;background:0 0;border:none;font-family:inherit;font-weight:500;position:relative}.TabsTrigger[data-v-e0ed7a62]:hover{color:var(--color-text);background-color:var(--color-bg-1)}.TabsTrigger[data-state=active][data-v-e0ed7a62]{color:var(--color-text)}.TabsTrigger[data-v-e0ed7a62]:focus-visible{box-shadow:var(--shadow-focus);outline:none}.TabsIndicator[data-v-e0ed7a62]{background-color:var(--color-text);height:2px;transition:width var(--transition-fast), left var(--transition-fast);position:absolute;bottom:0}.Spinner{vertical-align:middle;border:2px solid;border-top-color:#0000;border-radius:50%;animation:.6s linear infinite cfa-spin;display:inline-block}.Spinner[data-size=sm]{width:14px;height:14px}.Spinner[data-size=md]{width:20px;height:20px}.Spinner[data-size=lg]{border-width:3px;width:28px;height:28px}@keyframes cfa-spin{to{transform:rotate(360deg)}}.input-label[data-v-3f3d20cc]{font-size:var(--font-size-sm);flex-direction:column;gap:.25em;display:flex}.input-label-row[data-v-3f3d20cc]{justify-content:space-between;align-items:center;display:flex}input[data-v-3f3d20cc]{width:100%;height:2.5em;font-size:inherit;background-color:var(--color-bg-0);color:var(--color-text);border:1px solid var(--color-border);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);border-radius:.375em;padding:0 .75em;display:block}input[data-v-3f3d20cc]:hover{border-color:var(--color-border-hover)}input[data-v-3f3d20cc]:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus);outline:none}input[data-v-3f3d20cc]::placeholder{color:var(--color-text-tertiary)}.toggle[data-v-9916c71e]{align-items:center;gap:.5em;display:flex}.toggle label[data-v-9916c71e]{-webkit-user-select:none;user-select:none}.switch[data-v-9916c71e]{--switch-w:2.25em;--switch-h:1.25em;--thumb-size:1em;--thumb-offset:.125em;width:var(--switch-w);height:var(--switch-h);background:var(--color-border-hover);border-radius:var(--switch-h);cursor:pointer;border:none;flex-shrink:0;padding:0;transition:background .15s;position:relative}.switch[data-state=checked][data-v-9916c71e]{background:var(--color-primary)}.switch[data-disabled][data-v-9916c71e]{opacity:.5;cursor:not-allowed}.thumb[data-v-9916c71e]{width:var(--thumb-size);height:var(--thumb-size);top:var(--thumb-offset);left:var(--thumb-offset);background:#fff;border-radius:50%;transition:transform .15s;display:block;position:absolute}.switch[data-state=checked] .thumb[data-v-9916c71e]{transform:translateX(calc(var(--switch-w) - var(--thumb-size) - var(--thumb-offset) * 2))}
 /*$vite$:1*/

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, getCurrentInstance as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, onMounted as p, onUnmounted as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useModel as x, vModelText as S, watch as C, withCtx as w, withDirectives as T, withKeys as E, withModifiers as D } from "vue";
-import { CollapsibleContent as O, CollapsibleRoot as k, CollapsibleTrigger as A, Primitive as j, SelectContent as M, SelectItem as N, SelectItemIndicator as P, SelectItemText as F, SelectPortal as I, SelectRoot as L, SelectTrigger as R, SelectValue as z, SelectViewport as B, SliderRange as V, SliderRoot as H, SliderThumb as U, SliderTrack as ee, SwitchRoot as W, SwitchThumb as G, TabsIndicator as K, TabsList as te, TabsRoot as q, TabsTrigger as J, TooltipArrow as Y, TooltipContent as ne, TooltipPortal as re, TooltipProvider as ie, TooltipRoot as ae, TooltipTrigger as oe, useId as se } from "reka-ui";
+import { CollapsibleContent as O, CollapsibleRoot as k, CollapsibleTrigger as A, Primitive as j, SelectContent as M, SelectItem as N, SelectItemIndicator as P, SelectItemText as F, SelectPortal as I, SelectRoot as L, SelectTrigger as R, SelectValue as z, SelectViewport as ee, SliderRange as te, SliderRoot as ne, SliderThumb as re, SliderTrack as ie, SwitchRoot as B, SwitchThumb as V, TabsIndicator as H, TabsList as U, TabsRoot as W, TabsTrigger as G, TooltipArrow as K, TooltipContent as q, TooltipPortal as J, TooltipProvider as Y, TooltipRoot as ae, TooltipTrigger as oe, useId as se } from "reka-ui";
 //#region src/Box/Box.vue?vue&type=script&setup=true&lang.ts
 var ce = ["role"], le = /* @__PURE__ */ c({
 	__name: "Box",
@@ -123,7 +123,7 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 	__name: "Hint",
 	props: { text: {} },
 	setup(e) {
-		return (t, r) => (h(), n(b(ie), null, {
+		return (t, r) => (h(), n(b(Y), null, {
 			default: w(() => [s(b(ae), {
 				"delay-duration": 0,
 				"disable-closing-trigger": ""
@@ -139,13 +139,13 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 						size: 16
 					})], 32)]),
 					_: 1
-				}), s(b(re), null, {
-					default: w(() => [s(b(ne), {
+				}), s(b(J), null, {
+					default: w(() => [s(b(q), {
 						class: "HintContent",
 						side: "top",
 						"side-offset": 4
 					}, {
-						default: w(() => [o(y(e.text) + " ", 1), s(b(Y), {
+						default: w(() => [o(y(e.text) + " ", 1), s(b(K), {
 							class: "HintArrow",
 							width: 10,
 							height: 5
@@ -185,7 +185,9 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 }, _e = [
 	"inputmode",
 	"placeholder",
-	"aria-invalid"
+	"aria-invalid",
+	"aria-required",
+	"required"
 ], ve = {
 	key: 0,
 	class: "input-suffix"
@@ -202,7 +204,9 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 }, Te = [
 	"inputmode",
 	"placeholder",
-	"aria-invalid"
+	"aria-invalid",
+	"aria-required",
+	"required"
 ], Ee = {
 	key: 0,
 	class: "input-suffix"
@@ -226,7 +230,9 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 		percent: { type: Boolean },
 		slider: { type: Boolean },
 		live: { type: Boolean },
-		numberType: {}
+		numberType: {},
+		required: { type: Boolean },
+		decimals: {}
 	}, {
 		modelValue: {},
 		modelModifiers: {}
@@ -235,43 +241,66 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 	setup(e) {
 		let c = x(e, "modelValue"), l = e, u = t(() => l.min ?? (l.percent, 0)), f = t(() => l.max ?? (l.percent ? 1 : 100)), p = t(() => l.step ?? (l.percent ? .01 : 1));
 		function m(e) {
-			return e == null ? "" : l.percent ? (e * 100).toFixed(0) + "%" : e.toLocaleString("en-US");
+			if (!Number.isFinite(e) || Number.isInteger(e)) return 0;
+			let t = parseFloat(Math.abs(e).toPrecision(12)).toString(), n = t.indexOf(".");
+			if (n !== -1) return t.length - n - 1;
+			let r = t.indexOf("e-");
+			return r === -1 ? 0 : Number(t.slice(r + 2));
 		}
-		function _(e) {
-			return e == null ? e : l.percent ? Math.round(e * 1e4) / 100 : e;
+		let _ = t(() => l.step == null ? 1 : l.percent ? l.step * 100 : l.step), v = t(() => l.min == null ? l.percent ? 0 : void 0 : l.percent ? l.min * 100 : l.min), D = t(() => l.max == null ? l.percent ? 100 : void 0 : l.percent ? l.max * 100 : l.max), O = t(() => l.numberType === "integer" ? 0 : l.decimals == null ? m(_.value) : Math.max(0, l.decimals));
+		function k(e, t) {
+			let n = 10 ** t;
+			return Math.round(e * n) / n;
 		}
-		function v(e) {
+		function A(e) {
+			if (e == null) return "";
+			let t = O.value;
+			return l.percent ? (e * 100).toFixed(t) + "%" : e.toLocaleString("en-US", {
+				minimumFractionDigits: t,
+				maximumFractionDigits: t
+			});
+		}
+		function j(e) {
+			return e == null || !l.percent ? e : k(e * 100, O.value);
+		}
+		function M(e) {
 			return l.percent ? e / 100 : e;
 		}
-		function D(e) {
+		function N(e) {
 			if (l.numberType !== "integer") return e;
-			let t = _(e);
-			return t == null ? e : v(Math.trunc(t));
+			let t = j(e);
+			return t == null ? e : M(Math.trunc(t));
 		}
-		function O(e) {
+		function P(e) {
 			return e == null ? "" : e.toLocaleString("en-US");
 		}
-		function k(e) {
-			let t = O(e);
-			return l.numberType === "float" && e != null && Number.isInteger(e) ? t + ".0" : t;
+		function F(e) {
+			if (e == null) return "";
+			let t = O.value;
+			if (t > 0) return e.toLocaleString("en-US", {
+				minimumFractionDigits: t,
+				maximumFractionDigits: t
+			});
+			let n = P(e);
+			return l.numberType === "float" && Number.isInteger(e) ? n + ".0" : n;
 		}
-		function A(e) {
+		function I(e) {
 			return e.replace(/,/g, "");
 		}
-		let j = g(k(_(c.value))), M = g(c.value), N = g();
+		let L = g(F(j(c.value))), R = g(c.value), z = g();
 		C(c, (e) => {
-			j.value = k(_(e)), M.value = e;
+			L.value = F(j(e)), R.value = e, z.value = G(e);
 		});
-		let P = /[^0-9,.\-+eE]/g;
-		function F(e) {
-			let t = e.target, n = A(t.value);
+		let ee = /[^0-9,.\-+eE]/g;
+		function B(e) {
+			let t = e.target, n = I(t.value);
 			if (n === "" || n === "-" || n.endsWith(".") || n.includes(".") && n.endsWith("0")) return;
 			let r = Number(n);
 			if (Number.isNaN(r)) return;
-			let i = O(r);
+			let i = P(r);
 			if (i === t.value) return;
 			let a = t.selectionStart ?? 0, o = (t.value.slice(0, a).match(/,/g) || []).length;
-			j.value = i, requestAnimationFrame(() => {
+			L.value = i, requestAnimationFrame(() => {
 				let e = a - o, n = 0, r = 0;
 				for (let t = 0; t < i.length; t++) if (i[t] !== "," && r++, r >= e) {
 					n = t + 1;
@@ -280,47 +309,54 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 				r < e && (n = i.length), t.setSelectionRange(n, n);
 			});
 		}
-		function I() {
-			W();
-			let e = Number(A(j.value));
-			Number.isNaN(e) || (j.value = k(e));
+		function V() {
+			if (K(), L.value.trim() === "") return;
+			let e = Number(I(L.value));
+			Number.isNaN(e) || (L.value = F(e));
 		}
-		let L = null;
-		function R() {
-			!l.live || l.slider || (L && clearTimeout(L), L = setTimeout(W, 300));
+		let H = null;
+		function U() {
+			!l.live || l.slider || (H && clearTimeout(H), H = setTimeout(K, 300));
 		}
-		function z() {
-			!l.live || l.slider || (L && clearTimeout(L), W());
+		function W() {
+			!l.live || l.slider || (H && clearTimeout(H), K());
 		}
-		function B(e) {
-			if (J.value != null && e < J.value) return `Min ${J.value}${l.percent ? "%" : ""}`;
-			if (Y.value != null && e > Y.value) return `Max ${Y.value}${l.percent ? "%" : ""}`;
+		function G(e) {
+			if (e == null) return l.required ? "Required" : void 0;
+			let t = j(e);
+			if (v.value != null && t < v.value) return `Min ${v.value}${l.percent ? "%" : ""}`;
+			if (D.value != null && t > D.value) return `Max ${D.value}${l.percent ? "%" : ""}`;
 		}
-		function W() {
-			let e = j.value.replace(P, "");
-			if (!/\d/.test(e)) return;
-			e !== j.value && (j.value = e);
-			let t = Number(A(e));
+		function K() {
+			if (L.value.trim() === "") {
+				c.value = void 0, R.value = void 0, z.value = G(void 0);
+				return;
+			}
+			let e = L.value.replace(ee, "");
+			if (!/\d/.test(e)) {
+				L.value = F(j(c.value)), z.value = G(c.value);
+				return;
+			}
+			e !== L.value && (L.value = e);
+			let t = Number(I(e));
 			if (Number.isNaN(t)) return;
-			l.numberType === "integer" && (t = Math.trunc(t), j.value = k(t));
-			let n = B(t);
-			N.value = n, !n && (c.value = v(t), M.value = c.value);
+			l.numberType === "integer" && (t = Math.trunc(t), L.value = F(t));
+			let n = M(t), r = G(n);
+			z.value = r, !r && (c.value = n, R.value = c.value);
 		}
-		function G(e) {
+		function q(e) {
 			if (!e) return;
-			let t = D(e[0]);
-			M.value = t, j.value = k(_(t)), l.live && (c.value = t);
+			let t = N(e[0]);
+			R.value = t, L.value = F(j(t)), l.live && (c.value = t);
 		}
-		function K(e) {
-			e && (c.value = D(e[0]));
+		function J(e) {
+			e && (c.value = N(e[0]));
 		}
-		let te = t(() => l.step == null ? 1 : l.percent ? l.step * 100 : l.step);
-		function q(e, t) {
+		function Y(e, t) {
 			e.preventDefault();
-			let n = Number(A(j.value)), r = (Number.isNaN(n) ? 0 : n) + te.value * (e.shiftKey ? 10 : 1) * t;
-			l.numberType === "integer" && (r = Math.trunc(r)), J.value != null && (r = Math.max(r, J.value)), Y.value != null && (r = Math.min(r, Y.value)), j.value = k(r), N.value = void 0, c.value = v(r), M.value = c.value;
+			let n = Number(I(L.value)), r = (Number.isNaN(n) ? 0 : n) + _.value * (e.shiftKey ? 10 : 1) * t;
+			l.numberType === "integer" && (r = Math.trunc(r)), v.value != null && (r = Math.max(r, v.value)), D.value != null && (r = Math.min(r, D.value)), L.value = F(r), c.value = M(r), R.value = c.value;
 		}
-		let J = t(() => l.min == null ? l.percent ? 0 : void 0 : l.percent ? l.min * 100 : l.min), Y = t(() => l.max == null ? l.percent ? 100 : void 0 : l.percent ? l.max * 100 : l.max);
 		return (e, t) => l.label ? (h(), i("label", he, [
 			a("span", { class: d(["input-label-row", { "visually-hidden": l.hideLabel }]) }, [o(y(l.label) + " ", 1), l.hint && !l.hideLabel ? (h(), n(Q, {
 				key: 0,
@@ -329,38 +365,40 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 			l.slider ? r("", !0) : (h(), i("span", ge, [T(a("input", {
 				type: "text",
 				inputmode: l.numberType === "integer" ? "numeric" : "decimal",
-				"onUpdate:modelValue": t[0] ||= (e) => j.value = e,
+				"onUpdate:modelValue": t[0] ||= (e) => L.value = e,
 				placeholder: l.placeholder,
-				"aria-invalid": !!N.value,
-				onBlur: I,
+				"aria-invalid": !!z.value,
+				"aria-required": l.required || void 0,
+				required: l.required,
+				onBlur: V,
 				onKeydown: [
-					E(W, ["enter"]),
-					t[1] ||= E((e) => q(e, 1), ["up"]),
-					t[2] ||= E((e) => q(e, -1), ["down"])
+					E(K, ["enter"]),
+					t[1] ||= E((e) => Y(e, 1), ["up"]),
+					t[2] ||= E((e) => Y(e, -1), ["down"])
 				],
 				onInput: t[3] ||= (e) => {
-					F(e), R();
+					B(e), U();
 				},
-				onChange: z
-			}, null, 40, _e), [[S, j.value]]), l.percent ? (h(), i("span", ve, "%")) : r("", !0)])),
-			N.value ? (h(), i("span", ye, y(N.value), 1)) : r("", !0),
-			l.slider ? (h(), i("div", be, [s(b(H), {
+				onChange: W
+			}, null, 40, _e), [[S, L.value]]), l.percent ? (h(), i("span", ve, "%")) : r("", !0)])),
+			z.value ? (h(), i("span", ye, y(z.value), 1)) : r("", !0),
+			l.slider ? (h(), i("div", be, [s(b(ne), {
 				class: "slider-root",
-				"model-value": M.value == null ? [u.value] : [M.value],
+				"model-value": R.value == null ? [u.value] : [R.value],
 				min: u.value,
 				max: f.value,
 				step: p.value,
-				"onUpdate:modelValue": G,
-				onValueCommit: K
+				"onUpdate:modelValue": q,
+				onValueCommit: J
 			}, {
-				default: w(() => [s(b(ee), { class: "slider-track" }, {
-					default: w(() => [s(b(V), { class: "slider-range" })]),
+				default: w(() => [s(b(ie), { class: "slider-track" }, {
+					default: w(() => [s(b(te), { class: "slider-range" })]),
 					_: 1
-				}), s(b(U), {
+				}), s(b(re), {
 					class: "slider-thumb",
 					"aria-label": l.label
 				}, {
-					default: w(() => [a("span", xe, y(m(M.value)), 1)]),
+					default: w(() => [a("span", xe, y(A(R.value)), 1)]),
 					_: 1
 				}, 8, ["aria-label"])]),
 				_: 1
@@ -369,43 +407,45 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 				"min",
 				"max",
 				"step"
-			]), a("div", Se, [a("span", null, y(m(u.value)), 1), a("span", null, y(m(f.value)), 1)])])) : r("", !0)
+			]), a("div", Se, [a("span", null, y(A(u.value)), 1), a("span", null, y(A(f.value)), 1)])])) : r("", !0)
 		])) : (h(), i("div", Ce, [
 			l.slider ? r("", !0) : (h(), i("span", we, [T(a("input", {
 				type: "text",
 				inputmode: l.numberType === "integer" ? "numeric" : "decimal",
-				"onUpdate:modelValue": t[4] ||= (e) => j.value = e,
+				"onUpdate:modelValue": t[4] ||= (e) => L.value = e,
 				placeholder: l.placeholder,
-				"aria-invalid": !!N.value,
-				onBlur: I,
+				"aria-invalid": !!z.value,
+				"aria-required": l.required || void 0,
+				required: l.required,
+				onBlur: V,
 				onKeydown: [
-					E(W, ["enter"]),
-					t[5] ||= E((e) => q(e, 1), ["up"]),
-					t[6] ||= E((e) => q(e, -1), ["down"])
+					E(K, ["enter"]),
+					t[5] ||= E((e) => Y(e, 1), ["up"]),
+					t[6] ||= E((e) => Y(e, -1), ["down"])
 				],
 				onInput: t[7] ||= (e) => {
-					F(e), R();
+					B(e), U();
 				},
-				onChange: z
-			}, null, 40, Te), [[S, j.value]]), l.percent ? (h(), i("span", Ee, "%")) : r("", !0)])),
-			N.value ? (h(), i("span", De, y(N.value), 1)) : r("", !0),
-			l.slider ? (h(), i("div", Oe, [s(b(H), {
+				onChange: W
+			}, null, 40, Te), [[S, L.value]]), l.percent ? (h(), i("span", Ee, "%")) : r("", !0)])),
+			z.value ? (h(), i("span", De, y(z.value), 1)) : r("", !0),
+			l.slider ? (h(), i("div", Oe, [s(b(ne), {
 				class: "slider-root",
-				"model-value": M.value == null ? [u.value] : [M.value],
+				"model-value": R.value == null ? [u.value] : [R.value],
 				min: u.value,
 				max: f.value,
 				step: p.value,
-				"onUpdate:modelValue": G,
-				onValueCommit: K
+				"onUpdate:modelValue": q,
+				onValueCommit: J
 			}, {
-				default: w(() => [s(b(ee), { class: "slider-track" }, {
-					default: w(() => [s(b(V), { class: "slider-range" })]),
+				default: w(() => [s(b(ie), { class: "slider-track" }, {
+					default: w(() => [s(b(te), { class: "slider-range" })]),
 					_: 1
-				}), s(b(U), {
+				}), s(b(re), {
 					class: "slider-thumb",
 					"aria-label": l.label
 				}, {
-					default: w(() => [a("span", ke, y(m(M.value)), 1)]),
+					default: w(() => [a("span", ke, y(A(R.value)), 1)]),
 					_: 1
 				}, 8, ["aria-label"])]),
 				_: 1
@@ -414,10 +454,10 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 				"min",
 				"max",
 				"step"
-			]), a("div", Ae, [a("span", null, y(m(u.value)), 1), a("span", null, y(m(f.value)), 1)])])) : r("", !0)
+			]), a("div", Ae, [a("span", null, y(A(u.value)), 1), a("span", null, y(A(f.value)), 1)])])) : r("", !0)
 		]));
 	}
-}), [["__scopeId", "data-v-c7d72595"]]), Me = { class: "select-box" }, Ne = ["id"], Pe = /* @__PURE__ */ X(/* @__PURE__ */ c({
+}), [["__scopeId", "data-v-10b86a5d"]]), Me = { class: "select-box" }, Ne = ["id"], Pe = /* @__PURE__ */ X(/* @__PURE__ */ c({
 	__name: "SelectBox",
 	props: /* @__PURE__ */ u({
 		label: {},
@@ -466,7 +506,7 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 					"side-offset": 4,
 					"body-lock": !1
 				}, {
-					default: w(() => [s(b(B), { class: "select-viewport" }, {
+					default: w(() => [s(b(ee), { class: "select-viewport" }, {
 						default: w(() => [(h(!0), i(e, null, _(t.options, (e) => (h(), n(b(N), {
 							key: e.value,
 							value: e.value,
@@ -559,7 +599,7 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 		}, [s(Z, {
 			icon: "keyboard_double_arrow_right",
 			size: "sm"
-		})])]), a("main", Be, [c.tabs?.length ? (h(), n(b(q), {
+		})])]), a("main", Be, [c.tabs?.length ? (h(), n(b(W), {
 			key: 0,
 			"model-value": M.value,
 			class: "TabsLayout",
@@ -577,18 +617,18 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 					icon: "keyboard_double_arrow_right",
 					size: "sm"
 				})])) : r("", !0),
-				s(b(te), {
+				s(b(U), {
 					class: "TabsList",
 					"aria-label": "Tabs"
 				}, {
-					default: w(() => [(h(!0), i(e, null, _(c.tabs, (e) => (h(), n(b(J), {
+					default: w(() => [(h(!0), i(e, null, _(c.tabs, (e) => (h(), n(b(G), {
 						key: e.value,
 						value: e.value,
 						class: "TabsTrigger"
 					}, {
 						default: w(() => [o(y(e.label), 1)]),
 						_: 2
-					}, 1032, ["value"]))), 128)), s(b(K), {
+					}, 1032, ["value"]))), 128)), s(b(H), {
 						class: "TabsIndicator",
 						style: {
 							width: "var(--reka-tabs-indicator-size)",
@@ -612,7 +652,7 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 			size: "sm"
 		})])) : r("", !0), a("div", Ke, [v(t.$slots, "topbar", {}, void 0, !0), c.hideTopbar ? r("", !0) : (h(), n($, { key: 0 }))])]), a("div", qe, [a("div", Je, [v(t.$slots, "default", {}, void 0, !0)])])], 64))])], 8, Fe));
 	}
-}), [["__scopeId", "data-v-b7035d57"]]), Xe = ["data-size", "aria-label"], Ze = /* @__PURE__ */ c({
+}), [["__scopeId", "data-v-e0ed7a62"]]), Xe = ["data-size", "aria-label"], Ze = /* @__PURE__ */ c({
 	__name: "Spinner",
 	props: {
 		size: { default: "sm" },
@@ -686,14 +726,14 @@ var ce = ["role"], le = /* @__PURE__ */ c({
 				key: 0,
 				text: o.hint
 			}, null, 8, ["text"])) : r("", !0),
-			s(b(W), {
+			s(b(B), {
 				id: b(c),
 				modelValue: t.value,
 				"onUpdate:modelValue": u[0] ||= (e) => t.value = e,
 				disabled: e.disabled,
 				class: "switch"
 			}, {
-				default: w(() => [s(b(G), { class: "thumb" })]),
+				default: w(() => [s(b(V), { class: "thumb" })]),
 				_: 1
 			}, 8, [
 				"id",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfasim-ui/components",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "type": "module",
   "description": "Vue 3 UI components for cfasim-ui",
   "license": "Apache-2.0",