@recoui/style 0.0.0-stage → 0.1.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Minteea
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,15 @@
-# Temporary Holding Version
+# @recoui/style
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+RecoUI 的 CSS/SCSS 样式包，不包含框架运行时或组件导出。
+
+```ts
+import "@recoui/style/style.css";
+```
+
+```html
+<button class="ui-button" data-variant="filled">保存</button>
+```
+
+SCSS 入口：`@recoui/style/scss`。完整演示位于本包的 Storybook，仓库根目录运行 `pnpm storybook:style` 即可预览。
+
+`dev/components` 仅用于已有演示，不会随包发布。

package/dist/index.css

@@ -0,0 +1 @@
+@layer properties, theme, base, components, utilities;@layer theme{:root{--font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--radius-sm: 0.25rem;--radius: 0.5rem;--color-background: hsl(0 0% 100%);--color-background-hover: #f8f9fa;--color-foreground: hsl(240 10% 15%);--color-input-fill: #f1f3f5;--color-disabled: hsl(240 10% 55%);--color-primary: #228be6;--color-info: #228be6;--color-success: #40c057;--color-warning: #fab005;--color-error: #fa5252;--color-danger: #fa5252;--color-border: lab(90.952% 0 -0.0000119209);--color-white: #ffffff;--shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.06);--shadow: 0 20px 40px rgba(15, 23, 42, 0.08);--height-input: 2rem;--font-size-input: 0.875rem;--transition: 180ms ease}}@layer components.ui{:where(.ui-button,.ui-addon-button,.ui-checkbox,.ui-radio,.ui-switch,.ui-slider,.ui-tabs-list,.ui-tab,.ui-input,.ui-label),:where(.ui-button,.ui-addon-button,.ui-checkbox,.ui-radio,.ui-switch,.ui-slider,.ui-tabs-list,.ui-tab,.ui-input,.ui-label) *{box-sizing:border-box;font-family:inherit;appearance:none;position:relative;margin:0}:is(.ui-input,.ui-button)[data-radius]{--ui-radius: attr(data-radius type(*), var(--radius))}:is(.ui-input,.ui-button)[data-radius]:is([data-radius=default],[data-radius=""]){--ui-radius: var(--radius)}:is(.ui-input,.ui-button)[data-radius][data-radius=rounded]{--ui-radius: 9999px}:is(.ui-input,.ui-button,.ui-addon-button)[data-width]:not([data-width=default],[data-width=""],[type=hidden]){inline-size:attr(data-width type(*))}:is(.ui-input,.ui-button,.ui-addon-button)[data-width]:not([data-width=default],[data-width=""],[type=hidden])[data-width=block]{display:var(--ui-block-display, flex);inline-size:100%}:is(.ui-input,.ui-button,.ui-addon-button)[data-width]:not([data-width=default],[data-width=""],[type=hidden])[data-width=icon]{inline-size:var(--ui-height);block-size:var(--ui-height);min-block-size:var(--ui-height);padding:0;flex-shrink:0;text-align:center}:is(.ui-button,.ui-addon-button,.ui-input,.ui-radio,.ui-checkbox,.ui-switch,.ui-slider,.ui-tabs-list,.ui-tab,.ui-progress,.ui-meter,.ui-badge,.ui-pill)[data-color]{--ui-color: attr(data-color type(<color>))}:is(.ui-button,.ui-addon-button,.ui-input,.ui-radio,.ui-checkbox,.ui-switch,.ui-slider,.ui-tabs-list,.ui-tab,.ui-progress,.ui-meter,.ui-badge,.ui-pill)[data-color][data-color=neutral]{--ui-color: var(--color-foreground)}:is(.ui-button,.ui-addon-button,.ui-input,.ui-radio,.ui-checkbox,.ui-switch,.ui-slider,.ui-tabs-list,.ui-tab,.ui-progress,.ui-meter,.ui-badge,.ui-pill)[data-color][data-color=primary]{--ui-color: var(--color-primary)}:is(.ui-button,.ui-addon-button,.ui-input,.ui-radio,.ui-checkbox,.ui-switch,.ui-slider,.ui-tabs-list,.ui-tab,.ui-progress,.ui-meter,.ui-badge,.ui-pill)[data-color][data-color=success]{--ui-color: var(--color-success)}:is(.ui-button,.ui-addon-button,.ui-input,.ui-radio,.ui-checkbox,.ui-switch,.ui-slider,.ui-tabs-list,.ui-tab,.ui-progress,.ui-meter,.ui-badge,.ui-pill)[data-color][data-color=danger]{--ui-color: var(--color-danger)}:is(.ui-button,.ui-addon-button,.ui-input,.ui-radio,.ui-checkbox,.ui-switch,.ui-slider,.ui-tabs-list,.ui-tab,.ui-progress,.ui-meter,.ui-badge,.ui-pill)[data-color][data-color=error]{--ui-color: var(--color-error)}:is(.ui-button,.ui-addon-button,.ui-input,.ui-radio,.ui-checkbox,.ui-switch,.ui-slider,.ui-tabs-list,.ui-tab,.ui-progress,.ui-meter,.ui-badge,.ui-pill)[data-color][data-color=warning]{--ui-color: var(--color-warning)}:is(.ui-button,.ui-addon-button,.ui-input,.ui-radio,.ui-checkbox,.ui-switch,.ui-slider,.ui-tabs-list,.ui-tab,.ui-progress,.ui-meter,.ui-badge,.ui-pill)[data-color][data-color=info]{--ui-color: var(--color-info)}}@layer components.ui{.ui-input,.ui-button,.ui-addon-button{display:inline-flex;font-size:var(--font-size-input, 0.875rem);min-block-size:var(--ui-height);--ui-height: var(--height-input)}.ui-label{font-size:.875rem;line-height:1.25rem}.ui-input{--ui-padding-inline: 0.625rem;--ui-addon-height: max(0px, calc(var(--ui-height) - 0.5rem));align-items:center;inline-size:100%;min-inline-size:0;padding-inline:var(--ui-padding-inline);padding-block:0;border:1px solid var(--color-border, transparent);border-radius:var(--ui-radius, 0);--ui-display-color: var(--ui-color);outline:0 solid rgba(0,0,0,0);transition:border-color var(--transition),box-shadow var(--transition),background-color var(--transition),outline var(--transition)}.ui-input:is(:focus-visible,select:open,select:focus),.ui-input:has(>input:focus-visible),.ui-input:has(>.ui-pill .ui-pill-button:focus-visible){outline-width:4px;border-color:var(--ui-display-color);outline-color:oklch(from var(--ui-display-color) l c h/20%)}.ui-input>input:not([type=hidden]){flex:1 1 0%;align-self:stretch;inline-size:0;min-inline-size:0;min-block-size:0;padding-block:0;border:0;border-radius:inherit;outline:none;background:rgba(0,0,0,0);box-shadow:none;color:inherit;font:inherit;text-align:inherit;cursor:inherit}.ui-input[data-width=icon]{--ui-padding-inline: 0}.ui-input:has(>.ui-addon){column-gap:.5rem}.ui-input>.ui-addon{display:inline-flex;align-items:center;flex:0 0 auto;gap:.25rem;white-space:nowrap;cursor:default}.ui-input:is([aria-disabled=true],:has(>input:disabled))>.ui-addon{cursor:not-allowed}.ui-input:has(>.ui-pill){flex-wrap:wrap;gap:.25rem;padding-block:.125rem}.ui-input:has(>.ui-pill)>input:not([type=hidden]){flex:1 1 4rem;align-self:center;min-inline-size:min(4rem,100%);block-size:1.25rem}.ui-input:has(>.ui-pill)>.ui-addon:last-child{margin-inline-start:auto}textarea.ui-input{padding-block:.5rem;min-block-size:calc(var(--ui-height) + .5rem);resize:vertical}@supports(appearance: base-select){select.ui-input:not([multiple]):not([size]){appearance:base-select;align-items:center}select.ui-input::picker(select){appearance:base-select;border-radius:var(--ui-radius);border-color:var(--color-border);box-shadow:var(--shadow-sm);padding:.25rem}}.ui-input{--ui-color: var(--color-primary, grey);--ui-radius: var(--radius);background:var(--color-background, transparent);color:var(--color-foreground, currentColor)}.ui-input:is(:disabled,[aria-disabled=true],:has(>input:is(:disabled,[aria-disabled=true]))){color:var(--color-disabled);background:color-mix(in oklch, var(--color-foreground) 2%, var(--color-background));cursor:not-allowed}.ui-input:is(:invalid,[aria-invalid=true],[data-warning],:has(>input:is(:invalid,[aria-invalid=true],[data-warning]))){border-color:var(--ui-display-color)}.ui-input:is([data-warning],:has(>input[data-warning])){--ui-display-color: var(--color-warning)}.ui-input:is(:invalid,[aria-invalid=true],:has(>input:is(:invalid,[aria-invalid=true]))){--ui-display-color: var(--color-error)}.ui-input[data-variant=filled]{border-color:rgba(0,0,0,0);background:var(--color-input-fill)}.ui-input[data-variant=filled]:is(:invalid,[aria-invalid=true],[data-warning],:has(>input:is(:invalid,[aria-invalid=true],[data-warning]))){border-color:var(--ui-display-color)}.ui-input[data-variant=filled]:is(:disabled,[aria-disabled=true],:has(>input:is(:disabled,[aria-disabled=true]))){background:oklch(from var(--color-input-fill) l c h/50%)}.ui-input[data-variant=unstyled]{--ui-padding-inline: 0;padding-inline:0;border:0 none rgba(0,0,0,0);outline:0 none rgba(0,0,0,0);background:rgba(0,0,0,0)}.ui-input[data-variant=unstyled]:is(:invalid,[aria-invalid=true],[data-warning],:has(>input:is(:invalid,[aria-invalid=true],[data-warning]))){color:var(--ui-display-color)}.ui-input :where(input:not([type=hidden]),textarea,select){display:inline-flex;font-size:.875rem}}@layer components.ui{:is(input.ui-input,.ui-input>input)[type=number]::-webkit-inner-spin-button:hover,.ui-button[data-variant=ghost]:hover:not(:disabled,[aria-disabled=true]),.ui-addon-button:hover:not(:disabled,[aria-disabled=true]){background-color:oklch(from var(--ui-display-color) calc(l * 0.1 + 0.9) calc(c * 0.2) h/20%)}.ui-button,.ui-addon-button{align-items:center;justify-content:center;min-block-size:var(--ui-height);padding-block:0;padding-inline:1rem;cursor:pointer;border:1px solid rgba(0,0,0,0);background:rgba(0,0,0,0);border-radius:var(--ui-radius, 0);--ui-display-color: var(--ui-color);transition:border-color var(--transition),box-shadow var(--transition),background-color var(--transition),transform var(--transition),outline var(--transition)}.ui-button,.ui-addon-button{--ui-radius: var(--radius);--ui-color: var(--color-foreground, currentColor);outline:0 solid rgba(0,0,0,0)}.ui-button:focus-visible,.ui-addon-button:focus-visible{outline-width:4px;border-color:var(--ui-display-color);outline-color:oklch(from var(--ui-display-color) l c h/20%)}.ui-button:active:not(:disabled,[aria-disabled=true]){transform:translateY(1px)}.ui-button:is([data-variant=default],[data-variant=""],:not([data-variant])){border-color:var(--color-border);background:var(--color-background);color:var(--ui-display-color)}.ui-button:is([data-variant=default],[data-variant=""],:not([data-variant])):hover:not(:disabled,[aria-disabled=true]){background:color-mix(in oklch, oklch(from var(--color-foreground) calc(l * 0.1 + 0.9) calc(c * 0.2) h) 20%, var(--color-background))}.ui-button[data-variant=outline]{background:rgba(0,0,0,0);border-color:var(--ui-display-color);color:var(--ui-display-color)}.ui-button[data-variant=outline]:hover:not(:disabled,[aria-disabled=true]){background:oklch(from var(--ui-display-color) calc(l * 0.1 + 0.9) calc(c * 0.2) h/20%)}.ui-button[data-variant=filled]{background:var(--ui-display-color);border-color:rgba(0,0,0,0);color:var(--color-white, white)}.ui-button[data-variant=filled]:hover:not(:disabled,[aria-disabled=true]){background:oklch(from var(--ui-display-color) calc(l + 0.1) c h)}.ui-button[data-variant=filled]:focus-visible{border-color:var(--color-white, white);outline-color:oklch(from var(--ui-display-color) l c h/40%)}.ui-button[data-variant=light]{background:oklch(from var(--ui-display-color) calc(l * 0.05 + 0.95) calc(c * 0.1) h);border-color:rgba(0,0,0,0);color:var(--ui-display-color)}.ui-button[data-variant=light]:hover:not(:disabled,[aria-disabled=true]){background:oklch(from var(--ui-display-color) calc(l * 0.05 + 0.925) calc(c * 0.15) h)}.ui-button[data-variant=light]:focus-visible{border-color:var(--ui-display-color)}.ui-button[data-variant=ghost],.ui-addon-button{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);color:var(--ui-display-color)}.ui-button[data-variant=text]{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0);color:var(--ui-display-color)}:is(.ui-button,.ui-addon-button):is(:disabled,[aria-disabled=true]){border-color:var(--color-border);background:var(--color-input-fill);color:var(--color-disabled);cursor:not-allowed}.ui-addon-button{--ui-height: var(--ui-addon-height, max(0px, calc(var(--height-input) - 0.5rem)));--ui-radius: max(0px, calc(var(--radius) - 0.125rem));block-size:var(--ui-height);flex:0 0 auto;gap:.25rem;padding-inline:.5rem;font-size:.8125rem;white-space:nowrap}.ui-addon-button:focus-visible{outline-width:2px}.ui-addon-button:is(:disabled,[aria-disabled=true]){border-color:rgba(0,0,0,0);background:rgba(0,0,0,0)}}@layer components.ui{.ui-checkbox,.ui-radio{display:inline-flex;align-items:center;justify-content:center;inline-size:1.25rem;block-size:1.25rem;border-radius:var(--ui-radius, 0);border:1px solid var(--ui-border);background:var(--ui-fill);color:var(--color-white);cursor:pointer;transition:border-color var(--transition),background-color var(--transition),box-shadow var(--transition)}.ui-checkbox,.ui-radio{--ui-color: var(--color-primary, grey);--ui-border: var(--color-border);--ui-fill: var(--color-background);--ui-text: var(--color-foreground);--ui-fill-checked: var(--ui-color);--ui-ring: oklch(from var(--ui-color) l c h / 10%)}.ui-checkbox{--ui-radius: var(--radius-sm)}.ui-radio{--ui-radius: 1000px}.ui-radio::before,.ui-checkbox::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;opacity:0;transition:opacity var(--transition),transform var(--transition),background-color var(--transition);transform:scale(0.6)}.ui-radio::before{width:.4rem;height:.4rem;border-radius:50%;background-color:currentColor;color:var(--color-white)}.ui-checkbox::before{width:.875rem;height:.875rem;background-color:currentColor;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 4.5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 4.5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}.ui-checkbox:is(:checked,:indeterminate)::before,.ui-radio:checked::before{opacity:1;transform:scale(1)}.ui-checkbox:is(:checked,:indeterminate),.ui-radio:checked{background:var(--ui-fill-checked);border-color:var(--ui-fill-checked)}.ui-checkbox:indeterminate::before{mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8h8' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/></svg>") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8h8' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/></svg>") center/contain no-repeat}.ui-checkbox:focus-visible,.ui-radio:focus-visible{outline:none;border-color:var(--ui-color);box-shadow:0 0 0 4px var(--ui-ring)}:is(.ui-checkbox,.ui-radio):is(:disabled,[aria-disabled=true]){color:var(--color-disabled);border-color:var(--ui-border);background:color-mix(in oklch, var(--color-foreground) 2%, var(--color-background));cursor:not-allowed}}@layer components.ui{.ui-switch{--ui-color: var(--color-primary);--ui-switch-width: 2.25rem;--ui-switch-height: 1.25rem;--ui-switch-padding: 2px;--ui-switch-border: 1px;--ui-switch-thumb-size: calc( var(--ui-switch-height) - 2 * var(--ui-switch-border) - 2 * var(--ui-switch-padding) );--ui-switch-thumb-start: var(--ui-switch-padding);position:relative;display:inline-block;box-sizing:border-box;flex:0 0 auto;inline-size:var(--ui-switch-width);block-size:var(--ui-switch-height);margin:0;padding:var(--ui-switch-padding);appearance:none;vertical-align:middle;border:var(--ui-switch-border) solid var(--color-border);border-radius:9999px;outline:0 solid rgba(0,0,0,0);outline-offset:0;background:var(--color-border);color:var(--color-foreground);font:inherit;cursor:pointer;user-select:none;transition:background-color var(--transition),border-color var(--transition),box-shadow var(--transition),outline var(--transition)}.ui-switch:is(:checked,[aria-checked=true],[aria-pressed=true]):not(:has(input)),.ui-switch:has(input:checked){--ui-switch-thumb-start: calc(100% - var(--ui-switch-thumb-size) - var(--ui-switch-padding));border-color:var(--ui-color);background:var(--ui-color)}.ui-switch:focus-visible,.ui-switch:has(input:focus-visible){outline-width:4px;border-color:var(--ui-color);outline-color:oklch(from var(--ui-color) l c h/20%)}.ui-switch:is(:disabled,[aria-disabled=true],:has(input:is(:disabled,[aria-disabled=true]))){--ui-color: var(--color-disabled);opacity:.6;cursor:not-allowed}.ui-switch .ui-switch-thumb,.ui-switch:not(:has(.ui-switch-thumb))::after{position:absolute;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;inset-block-start:50%;inset-inline-start:var(--ui-switch-thumb-start);inline-size:var(--ui-switch-thumb-size);block-size:var(--ui-switch-thumb-size);border:0;border-radius:9999px;background:var(--color-white, white);pointer-events:none;transform:translateY(-50%);transition:inset-inline-start var(--transition)}.ui-switch:not(:has(.ui-switch-thumb))::after{content:""}.ui-switch :has(:is(input,.ui-switch-thumb)):not(.ui-switch-thumb){position:static}.ui-switch input{position:absolute;z-index:1;inset:0;box-sizing:border-box;inline-size:100%;block-size:100%;margin:0;padding:0;opacity:0;cursor:inherit}@media(prefers-reduced-motion: reduce){.ui-switch,.ui-switch .ui-switch-thumb,.ui-switch::after{transition:none}}}.ui-slider>.ui-slider-track{block-size:.375rem;border-radius:9999px;background:var(--color-input-fill)}.ui-slider-thumb{box-sizing:border-box;inline-size:var(--ui-thumb-width, 1rem);block-size:var(--ui-thumb-width, 1rem);padding:0;border:1px solid var(--color-border);border-radius:50%;outline:0 solid rgba(0,0,0,0);outline-offset:0;background:var(--color-background);transition:outline var(--transition),border var(--transition)}.ui-slider:focus-visible>.ui-slider-thumb,.ui-slider:has(>input:focus-visible)>.ui-slider-thumb{border-color:var(--ui-slider-color);outline-width:4px;outline-color:oklch(from var(--ui-slider-color) l c h/20%)}@layer components.ui{.ui-slider{--ui-color: var(--color-primary);--ui-slider-color: var(--ui-color);--ui-slider-progress: clamp(0%, var(--ui-slider-position, 0%), 100%);position:relative;display:flex;align-items:center;box-sizing:border-box;inline-size:100%;min-inline-size:var(--ui-thumb-width, 1rem);block-size:max(var(--height-input, 2rem),var(--ui-thumb-width, 1rem));padding:0;border:0;background:rgba(0,0,0,0);cursor:pointer;user-select:none}.ui-slider:is(:disabled,[aria-disabled=true],:has(>input:is(:disabled,[aria-disabled=true]))){--ui-slider-color: var(--color-disabled);opacity:.6;cursor:not-allowed}.ui-slider>.ui-slider-track{position:relative;flex:1 1 auto;min-inline-size:0;overflow:hidden;pointer-events:none}.ui-slider-range{inline-size:var(--ui-slider-progress);block-size:100%;border-radius:inherit;background:var(--ui-slider-color)}.ui-slider-thumb{position:absolute;display:inline-flex;align-items:center;justify-content:center;inset-block-start:50%;inset-inline-start:var(--ui-slider-progress);transform:translateX(calc(-1 * var(--ui-slider-progress))) translateY(-50%);pointer-events:auto}.ui-slider:not([aria-disabled=true],:has(>input:is(:disabled,[aria-disabled=true])))>.ui-slider-thumb:hover,.ui-slider:not([aria-disabled=true],:has(>input:is(:disabled,[aria-disabled=true]))):has(>input[type=range]:hover)>.ui-slider-thumb{border-color:var(--ui-slider-color)}.ui-slider:dir(rtl)>.ui-slider-thumb{transform:translateX(var(--ui-slider-progress)) translateY(-50%)}.ui-slider>input[type=range]{position:absolute;z-index:1;inset:0;inline-size:100%;block-size:100%;min-block-size:0;margin:0;padding:0;border:0;opacity:0;cursor:inherit}.ui-slider>input[type=range]::-webkit-slider-runnable-track{block-size:.375rem}.ui-slider>input[type=range]::-webkit-slider-thumb{appearance:none;inline-size:var(--ui-thumb-width, 1rem);block-size:var(--ui-thumb-width, 1rem);margin-block-start:calc((.375rem - var(--ui-thumb-width, 1rem))/2)}.ui-slider>input[type=range]::-moz-range-thumb{inline-size:var(--ui-thumb-width, 1rem);block-size:var(--ui-thumb-width, 1rem);border:0}.ui-slider>input:not([type=range]){display:none}input.ui-slider[type=range]{--ui-slider-direction: to right;display:block;appearance:none;outline:none}input.ui-slider[type=range]:dir(rtl){--ui-slider-direction: to left}input.ui-slider[type=range]::-webkit-slider-runnable-track{block-size:.375rem;border-radius:9999px;background:linear-gradient(var(--ui-slider-direction), var(--ui-slider-color) 0 var(--ui-slider-progress), var(--color-input-fill) var(--ui-slider-progress) 100%)}input.ui-slider[type=range]::-moz-range-track{block-size:.375rem;border-radius:9999px;background:linear-gradient(var(--ui-slider-direction), var(--ui-slider-color) 0 var(--ui-slider-progress), var(--color-input-fill) var(--ui-slider-progress) 100%)}input.ui-slider[type=range]::-webkit-slider-thumb{box-sizing:border-box;inline-size:var(--ui-thumb-width, 1rem);block-size:var(--ui-thumb-width, 1rem);padding:0;border:1px solid var(--color-border);border-radius:50%;outline:0 solid rgba(0,0,0,0);outline-offset:0;background:var(--color-background);transition:outline var(--transition),border var(--transition)}input.ui-slider[type=range]::-moz-range-thumb{box-sizing:border-box;inline-size:var(--ui-thumb-width, 1rem);block-size:var(--ui-thumb-width, 1rem);padding:0;border:1px solid var(--color-border);border-radius:50%;outline:0 solid rgba(0,0,0,0);outline-offset:0;background:var(--color-background);transition:outline var(--transition),border var(--transition)}input.ui-slider[type=range]::-webkit-slider-thumb{appearance:none;margin-block-start:calc((.375rem - var(--ui-thumb-width, 1rem))/2)}input.ui-slider[type=range]:hover:not(:disabled,[aria-disabled=true])::-webkit-slider-thumb{border-color:var(--ui-slider-color)}input.ui-slider[type=range]:hover:not(:disabled,[aria-disabled=true])::-moz-range-thumb{border-color:var(--ui-slider-color)}input.ui-slider[type=range]:focus-visible::-webkit-slider-thumb{border-color:var(--ui-slider-color);outline-width:4px;outline-color:oklch(from var(--ui-slider-color) l c h/20%)}input.ui-slider[type=range]:focus-visible::-moz-range-thumb{border-color:var(--ui-slider-color);outline-width:4px;outline-color:oklch(from var(--ui-slider-color) l c h/20%)}@media(prefers-reduced-motion: reduce){.ui-slider>.ui-slider-thumb{transition:none}input.ui-slider[type=range]::-webkit-slider-thumb{transition:none}input.ui-slider[type=range]::-moz-range-thumb{transition:none}}}@layer components.ui{:is(input.ui-input,.ui-input>input):is([type=number],[type=date],[type=time],[type=datetime-local],[type=month],[type=week]){appearance:auto;font-variant-numeric:tabular-nums}:is(input.ui-input,.ui-input>input)::-webkit-datetime-edit{padding-block:0}.ui-input[type=file]{display:block;padding:0;overflow:hidden;cursor:pointer}.ui-input:has(>input[type=file]){padding-inline:0;overflow:hidden}.ui-input>input[type=file]{padding:0;cursor:pointer}:is(input.ui-input,.ui-input>input)[type=file]::file-selector-button{box-sizing:border-box;min-block-size:calc(var(--ui-height) - 2px);margin-inline-end:.625rem;padding-block:0;padding-inline:1rem;border:0;border-inline-end:1px solid var(--color-border);background:var(--color-background);color:inherit;font:inherit;cursor:inherit;transition:background-color var(--transition)}:is(input.ui-input,.ui-input>input)[type=file]:is(:disabled,[aria-disabled=true])::file-selector-button{background:var(--color-input-fill)}input.ui-input[type=file]:not(:disabled,[aria-disabled=true],[data-variant=filled],[data-variant=unstyled])::file-selector-button:hover,.ui-input:not([aria-disabled=true],[data-variant=filled],[data-variant=unstyled])>input[type=file]:not(:disabled,[aria-disabled=true])::file-selector-button:hover{background:color-mix(in oklch, oklch(from var(--color-foreground) calc(l * 0.1 + 0.9) calc(c * 0.2) h) 20%, var(--color-background))}input.ui-input[type=file]:is([data-variant=filled],[data-variant=unstyled])::file-selector-button,.ui-input:is([data-variant=filled],[data-variant=unstyled])>input[type=file]::file-selector-button{border-inline-end:0;background:rgba(0,0,0,0)}input.ui-input[type=file][data-variant=unstyled]::file-selector-button,.ui-input[data-variant=unstyled]>input[type=file]::file-selector-button{min-block-size:var(--ui-height);padding-inline-start:0}.ui-input:is([type=color],:has(>input[type=color])){inline-size:4rem;padding:.25rem;cursor:pointer}.ui-input>input[type=color]{padding:0}:is(input.ui-input,.ui-input>input)[type=color]::-webkit-color-swatch-wrapper{padding:0}:is(input.ui-input,.ui-input>input)[type=color]::-webkit-color-swatch{border:0;border-radius:var(--radius-sm)}:is(input.ui-input,.ui-input>input)[type=color]::-moz-color-swatch{border:0;border-radius:var(--radius-sm)}.ui-input:is([type=color],:has(>input[type=color])):is(:disabled,[aria-disabled=true],:has(>input:is(:disabled,[aria-disabled=true]))){--ui-display-color: var(--color-disabled);opacity:.6}.ui-input:is(:disabled,[aria-disabled=true],:has(>input:is(:disabled,[aria-disabled=true]))),.ui-input>input:is(:disabled,[aria-disabled=true]){cursor:not-allowed}.ui-input[type=image]{inline-size:auto;max-inline-size:100%;min-block-size:0;padding:0;border:0;background:rgba(0,0,0,0);cursor:pointer}.ui-input[type=hidden]{display:none}select.ui-input:is([multiple],[size]){appearance:auto;display:block;padding-block:.25rem}}@layer components.ui{.ui-input{--ui-input-chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");--ui-input-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322222a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E")}.ui-input>input[list]{--ui-input-indicator-padding: 0px}:is(input.ui-input,.ui-input>input)[list]:is(:not([type]),[type=text],[type=search],[type=email],[type=url],[type=tel],[type=number]),select.ui-input:not([multiple]):not([size]){padding-inline-end:calc(var(--ui-input-indicator-padding, var(--ui-padding-inline)) + 1.5rem);background-image:var(--ui-input-chevron-image);background-repeat:no-repeat;background-size:1rem 1rem;background-position:right var(--ui-input-indicator-padding, var(--ui-padding-inline)) center}[list]:dir(rtl):is(input.ui-input,.ui-input>input):is(:not([type]),[type=text],[type=search],[type=email],[type=url],[type=tel],[type=number]),select.ui-input:dir(rtl):not([multiple]):not([size]){background-position:left var(--ui-input-indicator-padding, var(--ui-padding-inline)) center}[list]:is(:disabled,[aria-disabled=true]):is(input.ui-input,.ui-input>input):is(:not([type]),[type=text],[type=search],[type=email],[type=url],[type=tel],[type=number]),select.ui-input:is(:disabled,[aria-disabled=true]):not([multiple]):not([size]){--ui-input-chevron-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23818198' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E")}select.ui-input:not([multiple]):not([size]){appearance:none}:is(input.ui-input,.ui-input>input)[list]:is(:not([type]),[type=text],[type=search],[type=email],[type=url],[type=tel],[type=number])::-webkit-calendar-picker-indicator{display:block !important;flex:0 0 auto;box-sizing:content-box;inline-size:1rem;block-size:1rem !important;margin:0;margin-inline-start:.5rem;padding:0;border:0;list-style:none !important;background:currentColor;color:inherit;mask:var(--ui-input-chevron-mask) center/contain no-repeat;opacity:1;cursor:inherit}@supports selector(input::-webkit-calendar-picker-indicator){:is(input.ui-input,.ui-input>input)[list]:is(:not([type]),[type=text],[type=search],[type=email],[type=url],[type=tel],[type=number]){padding-inline-end:var(--ui-input-indicator-padding, var(--ui-padding-inline));background-image:none}:is(input.ui-input,.ui-input>input)[list]:is(:not([type]),[type=text],[type=search],[type=email],[type=url],[type=tel],[type=number]):disabled{padding-inline-end:calc(var(--ui-input-indicator-padding, var(--ui-padding-inline)) + 1.5rem);background-image:var(--ui-input-chevron-image)}}@supports(appearance: base-select){select.ui-input:not([multiple]):not([size]){appearance:base-select;column-gap:.5rem;padding-inline-end:var(--ui-padding-inline);background-image:none}select.ui-input:not([multiple]):not([size])::picker-icon{content:"";display:block;flex:0 0 auto;box-sizing:content-box;inline-size:1rem;block-size:1rem;margin:0;margin-inline-start:auto;padding:0;border:0;background:currentColor;color:inherit;mask:var(--ui-input-chevron-mask) center/contain no-repeat;opacity:1}}:is(input.ui-input,.ui-input>input)[type=search]::-webkit-search-cancel-button,:is(input.ui-input,.ui-input>input):is([type=date],[type=datetime-local],[type=month],[type=week],[type=time])::-webkit-calendar-picker-indicator{appearance:none;flex:0 0 auto;align-self:center;box-sizing:content-box;inline-size:1rem;block-size:1rem;margin:0;margin-inline-start:.5rem;padding:0;border:0;color:inherit;background:currentColor;mask:var(--ui-input-indicator-mask) center/contain no-repeat;cursor:pointer}@media(forced-colors: active){:is(input.ui-input,.ui-input>input)[type=search]::-webkit-search-cancel-button,:is(input.ui-input,.ui-input>input):is([type=date],[type=datetime-local],[type=month],[type=week],[type=time])::-webkit-calendar-picker-indicator{forced-color-adjust:none;background:ButtonText}}:is(input.ui-input,.ui-input>input):is([type=date],[type=datetime-local],[type=month],[type=week],[type=time]){display:inline-block;--ui-block-display: block}:is(input.ui-input,.ui-input>input):is([type=date],[type=datetime-local],[type=month],[type=week]){--ui-input-indicator-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12M16 3v4M8 3v4M4 11h16M7 14h.013M10.01 14h.005M13.01 14h.005M16.015 14h.005M13.015 17h.005M7.01 17h.005M10.01 17h.005'/%3E%3C/svg%3E")}:is(input.ui-input,.ui-input>input)[type=time]{--ui-input-indicator-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0M12 7v5l3 3'/%3E%3C/svg%3E")}:is(input.ui-input,.ui-input>input):is([type=date],[type=datetime-local],[type=month],[type=week],[type=time])::-webkit-calendar-picker-indicator{opacity:1}:is(input.ui-input,.ui-input>input)[type=number]::-webkit-inner-spin-button{appearance:none;flex:0 0 auto;align-self:center;box-sizing:border-box;inline-size:var(--ui-addon-height);block-size:var(--ui-addon-height);margin:0;margin-inline-start:.5rem;padding:0;border:1px solid rgba(0,0,0,0);border-radius:max(0px,var(--radius) - .125rem);color:inherit;--ui-display-color: var(--color-foreground, currentColor);cursor:pointer;background-color:rgba(0,0,0,0);background-image:linear-gradient(135deg, transparent calc(50% - 0.0416666667rem), currentColor calc(50% - 0.0416666667rem), currentColor calc(50% + 0.0416666667rem), transparent calc(50% + 0.0416666667rem)),linear-gradient(45deg, transparent calc(50% - 0.0416666667rem), currentColor calc(50% - 0.0416666667rem), currentColor calc(50% + 0.0416666667rem), transparent calc(50% + 0.0416666667rem)),linear-gradient(45deg, transparent calc(50% - 0.0416666667rem), currentColor calc(50% - 0.0416666667rem), currentColor calc(50% + 0.0416666667rem), transparent calc(50% + 0.0416666667rem)),linear-gradient(135deg, transparent calc(50% - 0.0416666667rem), currentColor calc(50% - 0.0416666667rem), currentColor calc(50% + 0.0416666667rem), transparent calc(50% + 0.0416666667rem));background-repeat:no-repeat;background-origin:border-box;background-size:.1875rem .1875rem;background-position:calc(50% - .09375rem) calc(25% - .046875rem),calc(50% + .09375rem) calc(25% - .046875rem),calc(50% - .09375rem) calc(75% + .046875rem),calc(50% + .09375rem) calc(75% + .046875rem);transition:background-color var(--transition)}@media(forced-colors: active){:is(input.ui-input,.ui-input>input)[type=number]::-webkit-inner-spin-button{forced-color-adjust:none;color:ButtonText}}:is(input.ui-input,.ui-input>input)[type=search]{--ui-input-indicator-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6l-12 12M6 6l12 12'/%3E%3C/svg%3E")}:is(input.ui-input,.ui-input>input)[type=password]::-ms-reveal{box-sizing:border-box;inline-size:1rem;block-size:1rem;margin:0;margin-inline-start:.5rem;padding:0;border:0;border-radius:var(--radius-sm);color:inherit;background-color:rgba(0,0,0,0);background-position:center;background-repeat:no-repeat;background-size:contain;cursor:pointer}:is(input.ui-input,.ui-input>input)[type=password]::-ms-reveal:hover{background-color:color-mix(in oklch, currentColor 10%, transparent)}}@layer components.ui{.ui-option,select.ui-input option{display:flex;align-items:center;gap:.5rem;box-sizing:border-box;min-inline-size:0;margin:0;padding:.375rem .5rem;border:0;border-radius:max(0px,var(--ui-radius, var(--radius)) - .125rem);outline:0 solid rgba(0,0,0,0);outline-offset:-2px;background:rgba(0,0,0,0);color:var(--color-foreground);font-family:inherit;font-size:inherit;font-weight:400;line-height:1.5;text-align:start;text-decoration:none;white-space:normal;overflow-wrap:anywhere;cursor:pointer}.ui-option:is(:hover,:focus-visible,[data-highlighted=true]):not(:disabled,[aria-disabled=true]),select.ui-input option:is(:hover,:focus-visible,[data-highlighted=true]):not(:disabled,[aria-disabled=true]){background:var(--color-background-hover, var(--color-input-fill))}.ui-option:is(:checked,[aria-selected=true],[aria-checked=true]),select.ui-input option:is(:checked,[aria-selected=true],[aria-checked=true]){background:var(--color-input-fill)}.ui-option:focus-visible,select.ui-input option:focus-visible{outline-width:2px;outline-color:var(--ui-color, var(--color-primary))}.ui-optgroup:is(:disabled,[aria-disabled=true]) .ui-option,select.ui-input optgroup:is(:disabled,[aria-disabled=true]) option,.ui-option:is(:disabled,[aria-disabled=true]),select.ui-input option:is(:disabled,[aria-disabled=true]){background:rgba(0,0,0,0);color:var(--color-disabled);cursor:not-allowed}.ui-optgroup,select.ui-input optgroup{display:block;box-sizing:border-box;min-inline-size:0;margin:0;padding:.25rem 0;border:0;font-family:inherit;font-size:inherit;font-weight:600;line-height:1.5}.ui-optgroup:is(:disabled,[aria-disabled=true]),select.ui-input optgroup:is(:disabled,[aria-disabled=true]){color:var(--color-disabled)}.ui-optgroup-legend,select.ui-input legend{display:block;box-sizing:border-box;inline-size:100%;margin:0;padding:.25rem .5rem;font-family:inherit;font-size:inherit;font-weight:600;line-height:1.5;overflow-wrap:anywhere}}@layer components.ui{.ui-label-wrapper{display:inline-flex;align-items:center;gap:.5rem;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;margin:0;vertical-align:middle;font-family:inherit;font-size:var(--font-size-input, 0.875rem);color:var(--color-foreground)}.ui-label-wrapper>:is(.ui-checkbox,.ui-radio,.ui-switch,input[type=checkbox],input[type=radio]){flex-shrink:0}.ui-label-wrapper>.ui-label{min-inline-size:0;font-family:inherit;font-size:inherit;line-height:1.5;color:inherit;overflow-wrap:anywhere}.ui-label-wrapper:has(>:not(.ui-label):is(:disabled,[aria-disabled=true]),>:not(.ui-label)>:is(input,select,textarea):is(:disabled,[aria-disabled=true]),>.ui-switch input:is(:disabled,[aria-disabled=true]))>.ui-label{color:var(--color-disabled)}}@layer components.ui{.ui-tabs-list{--ui-color: var(--color-primary);display:inline-flex;inline-size:fit-content;align-items:stretch;gap:.25rem;min-inline-size:0;max-inline-size:100%;padding:0;border:0;overflow-x:auto;font-size:var(--font-size-input, 0.875rem)}.ui-tabs-list[aria-orientation=vertical]{flex-direction:column;border-block-end:0;overflow-x:visible}.ui-tabs-list[aria-orientation=vertical]>.ui-tab{justify-content:flex-start;white-space:normal}.ui-tabs-list :not([aria-orientation=vertical]){flex-direction:row}.ui-tab{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:.375rem;min-block-size:var(--height-input, 2rem);padding-inline:.75rem;padding-block:.25rem;border:0;border-radius:var(--radius);outline:0 solid rgba(0,0,0,0);outline-offset:-2px;background:rgba(0,0,0,0);color:var(--color-foreground);font:inherit;font-size:var(--font-size-input, 0.875rem);text-align:start;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:color var(--transition),background-color var(--transition),outline var(--transition)}.ui-tab:focus-visible{outline-width:2px;outline-color:var(--ui-color, var(--color-primary))}.ui-tabs-list:not([aria-disabled=true])>.ui-tab:hover:not(:disabled,[aria-disabled=true],[aria-selected=true]){background:var(--color-background-hover)}.ui-tabs-list:is([data-variant=default],[data-variant=""],:not([data-variant]))>.ui-tab[aria-selected=true]{background:var(--color-input-fill)}.ui-tabs-list[data-variant=filled]>.ui-tab[aria-selected=true]{background:var(--ui-color, var(--color-primary));color:var(--color-white)}.ui-tabs-list[data-variant=filled]>.ui-tab[aria-selected=true]:is(:disabled,[aria-disabled=true]){background:var(--color-disabled)}.ui-tabs-list[data-variant=filled][aria-disabled=true]>.ui-tab[aria-selected=true]{background:var(--color-disabled)}.ui-tabs-list[data-variant=underline]:not([aria-orientation=vertical])>.ui-tab::after{inset-inline:.75rem;inset-block-end:0;block-size:2px}.ui-tabs-list[data-variant=underline][aria-orientation=vertical]>.ui-tab::after{inset-block:.375rem;inset-inline-start:auto;inset-inline-end:0;inline-size:2px;block-size:auto}.ui-tabs-list[data-variant=underline]>.ui-tab::after{content:"";position:absolute;border-radius:9999px;background:var(--ui-color, var(--color-primary));opacity:0;pointer-events:none;transition:opacity var(--transition)}.ui-tabs-list[data-variant=underline]>.ui-tab[aria-selected=true]::after{opacity:1}.ui-tabs-list[data-variant=underline]>.ui-tab:is(:disabled,[aria-disabled=true])::after{background:var(--color-disabled)}.ui-tabs-list[data-variant=underline][aria-disabled=true]>.ui-tab::after{background:var(--color-disabled)}.ui-tabs-list[data-variant=underline]:not([aria-disabled=true])>.ui-tab:hover:not(:disabled,[aria-disabled=true]){background:var(--color-background-hover)}.ui-tabs-list[data-variant=wrapped]{--ui-wrap-padding: 0.25rem;padding:var(--ui-wrap-padding);border-radius:var(--radius);background:var(--color-input-fill);gap:0}.ui-tabs-list[data-variant=wrapped]>.ui-tab{border-radius:calc(var(--radius) - var(--ui-wrap-padding));min-block-size:calc(var(--height-input, 2rem) - var(--ui-wrap-padding)*2);padding-block:.125rem}.ui-tabs-list[data-variant=wrapped]>.ui-tab[aria-selected=true]{background:var(--color-white)}.ui-tab:is(:disabled,[aria-disabled=true]),.ui-tabs-list[aria-disabled=true]>.ui-tab{background:rgba(0,0,0,0);color:var(--color-disabled);cursor:not-allowed}@media(prefers-reduced-motion: reduce){.ui-tab,.ui-tab::after{transition:none}}}@layer components.ui{.ui-pill,.ui-badge{--ui-color: var(--color-foreground);--ui-radius: var(--radius-sm);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:.25rem;box-sizing:border-box;inline-size:fit-content;min-block-size:1.25rem;margin:0;padding:.0625rem .5rem;border:1px solid rgba(0,0,0,0);border-radius:var(--ui-radius);background:oklch(from var(--ui-color) calc(l * 0.05 + 0.95) calc(c * 0.1) h);color:var(--ui-color);font-family:inherit;font-size:.75rem;font-weight:500;line-height:1rem;text-align:center;vertical-align:middle;white-space:nowrap}[data-radius].ui-pill,[data-radius].ui-badge{--ui-radius: attr(data-radius type(*), var(--radius-sm))}[data-radius].ui-pill:is([data-radius=default],[data-radius=""]),[data-radius].ui-badge:is([data-radius=default],[data-radius=""]){--ui-radius: var(--radius-sm)}[data-radius][data-radius=rounded].ui-pill,[data-radius][data-radius=rounded].ui-badge{--ui-radius: 9999px}[data-variant=filled].ui-pill,[data-variant=filled].ui-badge{background:var(--ui-color);color:var(--color-white, white)}[data-variant=outline].ui-pill,[data-variant=outline].ui-badge{border-color:var(--ui-color);background:rgba(0,0,0,0)}}@layer components.ui{.ui-pill{min-inline-size:0;max-inline-size:100%}.ui-pill>span{min-inline-size:0;overflow:hidden;text-overflow:ellipsis}.ui-pill-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex:0 0 auto;inline-size:1rem;block-size:1rem;margin:0;padding:0;appearance:none;border:0;border-radius:max(0px,var(--ui-radius, var(--radius-sm)) - 1px);outline:0 solid rgba(0,0,0,0);background:rgba(0,0,0,0);color:inherit;font:inherit;line-height:1;cursor:pointer;transition:background-color var(--transition),outline var(--transition)}.ui-pill-button:hover:not(:disabled,[aria-disabled=true]){background:color-mix(in oklch, currentColor 12%, transparent)}.ui-pill-button:focus-visible{outline:2px solid currentColor}.ui-pill[aria-disabled=true],.ui-input:is([aria-disabled=true],:has(>input:disabled))>.ui-pill{--ui-color: var(--color-disabled);cursor:not-allowed}.ui-pill-button:is(:disabled,[aria-disabled=true]),.ui-pill[aria-disabled=true]>.ui-pill-button,.ui-input:is([aria-disabled=true],:has(>input:disabled))>.ui-pill>.ui-pill-button{background:rgba(0,0,0,0);opacity:.5;cursor:not-allowed}@media(prefers-reduced-motion: reduce){.ui-pill-button{transition:none}}}@layer components.ui{.ui-tooltip-wrapper::after,.ui-tooltip{z-index:var(--ui-tooltip-z-index, 1100);box-sizing:border-box;inline-size:max-content;max-inline-size:min(var(--ui-tooltip-max-width, 20rem),100vw - 2rem);margin:0;padding:.375rem .5rem;border:0;border-radius:var(--radius-sm);background:var(--color-foreground);color:var(--color-background);box-shadow:var(--shadow-sm);font-family:var(--font-family, inherit);font-size:.75rem;font-weight:400;line-height:1.5;letter-spacing:normal;text-align:start;text-decoration:none;text-transform:none;white-space:normal;overflow-wrap:anywhere}.ui-tooltip{position:fixed;display:block;opacity:1;visibility:visible;transition:opacity var(--transition),visibility var(--transition),display var(--transition);transition-behavior:allow-discrete}.ui-tooltip[hidden]{display:none;opacity:0;visibility:hidden;pointer-events:none}@starting-style{.ui-tooltip{opacity:0}}.ui-tooltip-wrapper{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;inline-size:fit-content;vertical-align:middle}.ui-tooltip-wrapper::before,.ui-tooltip-wrapper::after{position:absolute;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--transition),visibility var(--transition)}.ui-tooltip-wrapper::after{content:attr(data-tooltip);bottom:calc(100% + var(--ui-tooltip-offset, 0.5rem));left:50%;transform:translateX(-50%)}.ui-tooltip-wrapper::before{content:"";z-index:var(--ui-tooltip-z-index, 1100);bottom:100%;left:0;inline-size:100%;block-size:var(--ui-tooltip-offset, 0.5rem)}.ui-tooltip-wrapper[data-side=bottom]::after{top:calc(100% + var(--ui-tooltip-offset, 0.5rem));bottom:auto}.ui-tooltip-wrapper[data-side=bottom]::before{top:100%;bottom:auto}.ui-tooltip-wrapper:is([data-side=left],[data-side=right])::after{top:50%;bottom:auto;transform:translateY(-50%)}.ui-tooltip-wrapper:is([data-side=left],[data-side=right])::before{top:0;bottom:auto;inline-size:var(--ui-tooltip-offset, 0.5rem);block-size:100%}.ui-tooltip-wrapper[data-side=left]::after{right:calc(100% + var(--ui-tooltip-offset, 0.5rem));left:auto}.ui-tooltip-wrapper[data-side=left]::before{right:100%;left:auto}.ui-tooltip-wrapper[data-side=right]::after{left:calc(100% + var(--ui-tooltip-offset, 0.5rem))}.ui-tooltip-wrapper[data-side=right]::before{left:100%}.ui-tooltip-wrapper:not([data-state=closed]):is(:hover,:focus-within,[data-state=open])::before,.ui-tooltip-wrapper:not([data-state=closed]):is(:hover,:focus-within,[data-state=open])::after{opacity:1;visibility:visible;pointer-events:auto}.ui-tooltip-wrapper:not([data-tooltip])::before,.ui-tooltip-wrapper:not([data-tooltip])::after,.ui-tooltip-wrapper[data-tooltip=""]::before,.ui-tooltip-wrapper[data-tooltip=""]::after{content:none}@media(prefers-reduced-motion: reduce){.ui-tooltip,.ui-tooltip-wrapper::before,.ui-tooltip-wrapper::after{transition:none}}}@layer components.ui{.ui-modal,.ui-box{box-sizing:border-box;background-color:var(--color-background);border-radius:var(--radius)}.ui-border{border:1px solid var(--color-border)}}@layer components.ui{.ui-modal{position:fixed;z-index:var(--ui-modal-z-index, 1000);inset:0;inline-size:min(var(--ui-modal-width, 32rem),100% - 2rem);max-inline-size:calc(100% - 2rem);block-size:fit-content;max-block-size:calc(100vh - 2rem);max-block-size:calc(100dvh - 2rem);margin:auto;padding:1.5rem;overflow:auto;overscroll-behavior:contain;border:0;color:var(--color-foreground);box-shadow:var(--shadow);font-family:inherit;font-size:var(--font-size-input, 0.875rem);opacity:1;transform:none;transition:opacity var(--transition),transform var(--transition),display var(--transition),overlay var(--transition);transition-behavior:allow-discrete}dialog.ui-modal::backdrop,.ui-modal-backdrop{background:var(--ui-modal-backdrop-color, rgba(0, 0, 0, 0.45));transition:background-color var(--transition),display var(--transition),overlay var(--transition);transition-behavior:allow-discrete}.ui-modal-backdrop{position:fixed;z-index:var(--ui-modal-z-index, 1000);inset:0}dialog.ui-modal:not([open]),.ui-modal[hidden]{display:none;opacity:0;transform:translateY(0.5rem) scale(0.98)}.ui-modal-backdrop[hidden]{display:none}dialog.ui-modal:not([open])::backdrop,.ui-modal-backdrop[hidden]{background-color:rgba(0,0,0,0)}.ui-modal-backdrop[hidden]>.ui-modal{opacity:0;transform:translateY(0.5rem) scale(0.98)}@starting-style{.ui-modal{opacity:0;transform:translateY(0.5rem) scale(0.98)}dialog.ui-modal[open]::backdrop,.ui-modal-backdrop{background-color:rgba(0,0,0,0)}}@media(prefers-reduced-motion: reduce){.ui-modal,dialog.ui-modal::backdrop,.ui-modal-backdrop{transition:none}}}@layer components.ui{.ui-dropdown{position:fixed;z-index:var(--ui-dropdown-z-index, 1050);display:block;box-sizing:border-box;inline-size:max-content;min-inline-size:min(12rem,100vw - 2rem);max-inline-size:calc(100vw - 2rem);max-block-size:min(var(--ui-dropdown-max-height, 20rem),100vh - 2rem);max-block-size:min(var(--ui-dropdown-max-height, 20rem),100dvh - 2rem);margin:0;padding:.25rem;overflow:auto;overscroll-behavior:contain;border:1px solid var(--color-border);border-radius:var(--ui-radius, var(--radius));outline:none;background:var(--color-background);color:var(--color-foreground);box-shadow:var(--shadow-sm);font-family:var(--font-family, inherit);font-size:var(--font-size-input, 0.875rem);line-height:1.5;opacity:1;visibility:visible;transition:opacity var(--transition),visibility var(--transition),display var(--transition);transition-behavior:allow-discrete}.ui-dropdown :where(.ui-option){inline-size:100%}.ui-dropdown :where(hr){margin:.25rem 0;border:0;border-block-start:1px solid var(--color-border)}.ui-dropdown[hidden]{display:none;opacity:0;visibility:hidden;pointer-events:none}.ui-dropdown-wrapper{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;inline-size:fit-content;max-inline-size:100%;vertical-align:middle}.ui-dropdown-wrapper>.ui-dropdown{position:absolute;inset-inline-start:0;inset-block-start:calc(100% + var(--ui-dropdown-offset, 0.25rem))}.ui-dropdown-wrapper:has(>.ui-input)>.ui-dropdown{inline-size:100%}.ui-dropdown-wrapper[data-side=top]>.ui-dropdown{inset-block-start:auto;inset-block-end:calc(100% + var(--ui-dropdown-offset, 0.25rem))}.ui-dropdown-wrapper[data-align=end]>.ui-dropdown{inset-inline-start:auto;inset-inline-end:0}@starting-style{.ui-dropdown{opacity:0}}@media(prefers-reduced-motion: reduce){.ui-dropdown{transition:none}}}@layer components.ui{:where(.ui-form,.ui-fieldset,.ui-legend,.ui-progress,.ui-meter){box-sizing:border-box;font-family:inherit;font-size:.875rem;color:var(--color-foreground)}.ui-form{display:grid;gap:1rem;min-inline-size:0;margin:0;text-align:start}.ui-fieldset{min-inline-size:0;margin:0;padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius)}.ui-fieldset:disabled{background:color-mix(in oklch, var(--color-foreground) 2%, var(--color-background))}.ui-fieldset:disabled :is(.ui-label,.ui-legend){color:var(--color-disabled)}.ui-legend{padding-inline:.375rem;font-weight:600;line-height:1.5}.ui-datalist{display:none}.ui-progress,.ui-meter{--ui-color: var(--color-primary);appearance:none;display:block;inline-size:100%;block-size:.5rem;overflow:hidden;border:0;border-radius:var(--radius);background:var(--color-input-fill);accent-color:var(--ui-color)}.ui-progress::-webkit-progress-bar{border-radius:inherit;background:var(--color-input-fill)}.ui-progress::-webkit-progress-value{border-radius:inherit;background:var(--ui-color)}.ui-progress::-moz-progress-bar{border-radius:inherit;background:var(--ui-color)}.ui-progress:indeterminate::-webkit-progress-bar{background:var(--ui-color);clip-path:inset(0 32.5% round var(--radius));animation:ui-progress-indeterminate 1.4s linear infinite}.ui-meter{--ui-color: var(--color-success)}.ui-meter::-webkit-meter-bar{block-size:.5rem;border:0;border-radius:inherit;background:var(--color-input-fill);box-shadow:none}.ui-meter::-webkit-meter-optimum-value{border-radius:inherit;background:var(--ui-color)}.ui-meter::-webkit-meter-suboptimum-value{border-radius:inherit;background:var(--color-warning)}.ui-meter::-webkit-meter-even-less-good-value{border-radius:inherit;background:var(--color-error)}.ui-meter:-moz-meter-optimum::-moz-meter-bar{background:var(--ui-color)}.ui-meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--color-warning)}.ui-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--color-error)}@keyframes ui-progress-indeterminate{from{clip-path:inset(0 100% 0 -35% round var(--radius))}to{clip-path:inset(0 -35% 0 100% round var(--radius))}}@media(prefers-reduced-motion: reduce){.ui-progress:indeterminate::-webkit-progress-bar{animation:none}}}@layer components.ui{.ui-field{display:flex;flex-direction:column;align-items:flex-start;gap:.375rem;box-sizing:border-box;inline-size:100%;min-inline-size:0;margin:0;font-family:inherit;font-size:var(--font-size-input, 0.875rem);color:var(--color-foreground)}.ui-field[data-orientation=horizontal]{flex-direction:row;gap:.5rem}.ui-field[data-orientation=horizontal]>:is(.ui-checkbox,.ui-radio,.ui-switch,input[type=checkbox],input[type=radio]){flex-shrink:0}.ui-field[data-orientation=horizontal]>:is(.ui-checkbox,.ui-radio,.ui-switch){margin-block-start:max(0px,(var(--font-size-input, 0.875rem)*1.5 - var(--ui-switch-height, 1.25rem))/2)}.ui-field[data-orientation=horizontal]>.ui-field-content{flex:1 1 auto}.ui-field-content{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;box-sizing:border-box;min-inline-size:0}:is(.ui-field,.ui-field>.ui-field-content)>.ui-field-label{display:inline-flex;align-items:center;gap:.25rem;max-inline-size:100%;margin:0;font-family:inherit;font-size:var(--font-size-input, 0.875rem);font-weight:500;line-height:1.5;color:inherit;overflow-wrap:anywhere}:is(.ui-field,.ui-field>.ui-field-content)>.ui-field-description{align-self:stretch;min-inline-size:0;margin:0;font-family:inherit;font-size:.75rem;line-height:1.5;color:var(--color-disabled);overflow-wrap:anywhere}:is(.ui-field,.ui-field>.ui-field-content)>.ui-field-description:empty{display:none}}@layer components.ui{.ui-group{display:flex;flex-direction:row;align-items:center;gap:1rem;box-sizing:border-box;min-inline-size:0}.ui-group[data-orientation=vertical]{flex-direction:column;align-items:flex-start}}@layer components.ui{.ui-join{display:inline-flex;align-items:stretch;gap:0;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;vertical-align:middle;isolation:isolate}.ui-join:has(>.ui-input:not([type=hidden])){inline-size:100%}.ui-join>:is(.ui-button,.ui-input):not([type=hidden]){position:relative;z-index:0;flex:0 0 auto;min-inline-size:0}.ui-join>:is(.ui-button,.ui-input):not([type=hidden]):not(:nth-child(1 of :is(.ui-button,.ui-input):not([type=hidden]))){margin-inline-start:-1px;border-start-start-radius:0;border-end-start-radius:0}.ui-join>:is(.ui-button,.ui-input):not([type=hidden]):not(:nth-last-child(1 of :is(.ui-button,.ui-input):not([type=hidden]))){border-start-end-radius:0;border-end-end-radius:0}.ui-join>:is(.ui-button,.ui-input):not([type=hidden]):is(:hover,:invalid,[aria-invalid=true],[data-warning],:has(>input:is(:invalid,[aria-invalid=true],[data-warning]))){z-index:1}.ui-join>:is(.ui-button,.ui-input):not([type=hidden]):is(:focus-visible,:focus-within){z-index:2}.ui-join>.ui-input:not([type=hidden]):is(:not([data-width]),[data-width=default],[data-width=""]){flex:1 1 0%;inline-size:0}.ui-join>.ui-button:active{transform:none}}

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@recoui/style",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-alpha.0",
+  "description": "Framework-independent RecoUI styles",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "style": "./dist/index.css",
+  "sass": "./src/index.scss",
+  "exports": {
+    ".": {
+      "sass": "./src/index.scss",
+      "style": "./dist/index.css",
+      "default": "./dist/index.css"
+    },
+    "./style.css": "./dist/index.css",
+    "./scss": "./src/index.scss",
+    "./scss/*": "./src/styles/*",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite serve dev",
+    "build": "sass src/index.scss dist/index.css --style=compressed --no-source-map",
+    "build:watch": "sass src/index.scss dist/index.css --style=compressed --no-source-map --watch",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 36006",
+    "build-storybook": "storybook build",
+    "prepack": "pnpm run build"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "10.4.2",
+    "@storybook/addon-docs": "10.4.2",
+    "@tabler/icons-solidjs": "3.50.0",
+    "clsx": "2.1.1",
+    "sass": "1.100.0",
+    "solid-js": "1.8.17",
+    "storybook": "10.4.2",
+    "storybook-solidjs-vite": "10.1.1",
+    "vite": "7.3.5",
+    "vite-plugin-solid": "2.11.9"
+  },
+  "gitHead": "68ffb8af6399fc0bf3ab0ca05f26daa70c456435"
+}

package/src/index.scss

@@ -0,0 +1 @@
+@forward "./styles/index";

package/src/styles/container/box.scss

@@ -0,0 +1,15 @@
+@layer components.ui {
+  %ui-box {
+    box-sizing: border-box;
+    background-color: var(--color-background);
+    border-radius: var(--radius);
+  }
+
+  .ui-box {
+    @extend %ui-box;
+  }
+
+  .ui-border {
+    border: 1px solid var(--color-border);
+  }
+}

package/src/styles/container/dropdown.scss

@@ -0,0 +1,93 @@
+@layer components.ui {
+  .ui-dropdown {
+    position: fixed;
+    z-index: var(--ui-dropdown-z-index, 1050);
+    display: block;
+    box-sizing: border-box;
+    inline-size: max-content;
+    min-inline-size: min(12rem, calc(100vw - 2rem));
+    max-inline-size: calc(100vw - 2rem);
+    max-block-size: min(var(--ui-dropdown-max-height, 20rem), calc(100vh - 2rem));
+    max-block-size: min(var(--ui-dropdown-max-height, 20rem), calc(100dvh - 2rem));
+    margin: 0;
+    padding: 0.25rem;
+    overflow: auto;
+    overscroll-behavior: contain;
+    border: 1px solid var(--color-border);
+    border-radius: var(--ui-radius, var(--radius));
+    outline: none;
+    background: var(--color-background);
+    color: var(--color-foreground);
+    box-shadow: var(--shadow-sm);
+    font-family: var(--font-family, inherit);
+    font-size: var(--font-size-input, 0.875rem);
+    line-height: 1.5;
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity var(--transition),
+      visibility var(--transition),
+      display var(--transition);
+    transition-behavior: allow-discrete;
+
+    // 按钮、链接及普通元素修饰的选项均占据菜单的可用宽度。
+    :where(.ui-option) {
+      inline-size: 100%;
+    }
+
+    :where(hr) {
+      margin: 0.25rem 0;
+      border: 0;
+      border-block-start: 1px solid var(--color-border);
+    }
+
+    &[hidden] {
+      display: none;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+
+  .ui-dropdown-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    inline-size: fit-content;
+    max-inline-size: 100%;
+    vertical-align: middle;
+
+    > .ui-dropdown {
+      position: absolute;
+      inset-inline-start: 0;
+      inset-block-start: calc(100% + var(--ui-dropdown-offset, 0.25rem));
+    }
+
+    &:has(> .ui-input) > .ui-dropdown {
+      inline-size: 100%;
+    }
+
+    &[data-side="top"] > .ui-dropdown {
+      inset-block-start: auto;
+      inset-block-end: calc(100% + var(--ui-dropdown-offset, 0.25rem));
+    }
+
+    &[data-align="end"] > .ui-dropdown {
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+  }
+
+  @starting-style {
+    .ui-dropdown {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-dropdown {
+      transition: none;
+    }
+  }
+}

package/src/styles/container/index.scss

@@ -0,0 +1,3 @@
+@use "./box";
+@use "./modal";
+@use "./dropdown";

package/src/styles/container/modal.scss

@@ -0,0 +1,91 @@
+@use "./box.scss";
+
+@layer components.ui {
+  .ui-modal {
+    @extend %ui-box;
+    position: fixed;
+    z-index: var(--ui-modal-z-index, 1000);
+    inset: 0;
+    inline-size: min(var(--ui-modal-width, 32rem), calc(100% - 2rem));
+    max-inline-size: calc(100% - 2rem);
+    block-size: fit-content;
+    max-block-size: calc(100vh - 2rem);
+    max-block-size: calc(100dvh - 2rem);
+    margin: auto;
+    padding: 1.5rem;
+    overflow: auto;
+    overscroll-behavior: contain;
+    border: 0;
+    color: var(--color-foreground);
+    box-shadow: var(--shadow);
+    font-family: inherit;
+    font-size: var(--font-size-input, 0.875rem);
+    opacity: 1;
+    transform: none;
+    transition:
+      opacity var(--transition),
+      transform var(--transition),
+      display var(--transition),
+      overlay var(--transition);
+    transition-behavior: allow-discrete;
+  }
+
+  dialog.ui-modal::backdrop,
+  .ui-modal-backdrop {
+    background: var(--ui-modal-backdrop-color, rgb(0 0 0 / 45%));
+    transition:
+      background-color var(--transition),
+      display var(--transition),
+      overlay var(--transition);
+    transition-behavior: allow-discrete;
+  }
+
+  // 普通元素通过外层遮罩覆盖页面；打开、关闭与焦点管理由使用方实现。
+  .ui-modal-backdrop {
+    position: fixed;
+    z-index: var(--ui-modal-z-index, 1000);
+    inset: 0;
+  }
+
+  dialog.ui-modal:not([open]),
+  .ui-modal[hidden] {
+    display: none;
+    opacity: 0;
+    transform: translateY(0.5rem) scale(0.98);
+  }
+
+  .ui-modal-backdrop[hidden] {
+    display: none;
+  }
+
+  dialog.ui-modal:not([open])::backdrop,
+  .ui-modal-backdrop[hidden] {
+    background-color: transparent;
+  }
+
+  // 遮罩隐藏时，内部面板同步退出；隐藏结束前保留节点才能完整播放过渡。
+  .ui-modal-backdrop[hidden] > .ui-modal {
+    opacity: 0;
+    transform: translateY(0.5rem) scale(0.98);
+  }
+
+  @starting-style {
+    .ui-modal {
+      opacity: 0;
+      transform: translateY(0.5rem) scale(0.98);
+    }
+
+    dialog.ui-modal[open]::backdrop,
+    .ui-modal-backdrop {
+      background-color: transparent;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-modal,
+    dialog.ui-modal::backdrop,
+    .ui-modal-backdrop {
+      transition: none;
+    }
+  }
+}

package/src/styles/display/badge.scss

@@ -0,0 +1,55 @@
+@layer components.ui {
+  %ui-badge {
+    --ui-color: var(--color-foreground);
+    --ui-radius: var(--radius-sm);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    gap: 0.25rem;
+    box-sizing: border-box;
+    inline-size: fit-content;
+    min-block-size: 1.25rem;
+    margin: 0;
+    padding: 0.0625rem 0.5rem;
+    border: 1px solid transparent;
+    border-radius: var(--ui-radius);
+    background: oklch(from var(--ui-color) calc(l * 0.05 + 0.95) calc(c * 0.1) h);
+    color: var(--ui-color);
+    font-family: inherit;
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1rem;
+    text-align: center;
+    vertical-align: middle;
+    white-space: nowrap;
+
+    &[data-radius] {
+      --ui-radius: attr(data-radius type(*), var(--radius-sm));
+
+      &:is([data-radius="default"], [data-radius=""]) {
+        --ui-radius: var(--radius-sm);
+      }
+
+      &[data-radius="rounded"] {
+        --ui-radius: 9999px;
+      }
+    }
+
+    // default / light 共用浅色外观，空值和未指定 variant 时同样适用。
+    &[data-variant="filled"] {
+      background: var(--ui-color);
+      color: var(--color-white, white);
+    }
+
+    &[data-variant="outline"] {
+      border-color: var(--ui-color);
+      background: transparent;
+    }
+  }
+
+  .ui-badge {
+    @extend %ui-badge;
+  }
+}

package/src/styles/display/index.scss

@@ -0,0 +1,3 @@
+@use "./badge";
+@use "./pill";
+@use "./tooltip";

package/src/styles/display/pill.scss

@@ -0,0 +1,67 @@
+@use "./badge";
+
+@layer components.ui {
+  .ui-pill {
+    @extend %ui-badge;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+
+    > span {
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .ui-pill-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin: 0;
+    padding: 0;
+    appearance: none;
+    border: 0;
+    border-radius: max(0px, calc(var(--ui-radius, var(--radius-sm)) - 1px));
+    outline: 0 solid transparent;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background-color var(--transition),
+      outline var(--transition);
+
+    &:hover:not(:disabled, [aria-disabled="true"]) {
+      background: color-mix(in oklch, currentColor 12%, transparent);
+    }
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+    }
+  }
+
+  .ui-pill[aria-disabled="true"],
+  .ui-input:is([aria-disabled="true"], :has(> input:disabled)) > .ui-pill {
+    --ui-color: var(--color-disabled);
+    cursor: not-allowed;
+  }
+
+  .ui-pill-button:is(:disabled, [aria-disabled="true"]),
+  .ui-pill[aria-disabled="true"] > .ui-pill-button,
+  .ui-input:is([aria-disabled="true"], :has(> input:disabled)) > .ui-pill > .ui-pill-button {
+    background: transparent;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-pill-button {
+      transition: none;
+    }
+  }
+}