@owodesign/owoui 0.1.4 → 0.1.6

package/README.md

@@ -9,7 +9,7 @@ import '@owodesign/owoui/style.css';
 import { Button, Dialog, Select } from '@owodesign/owoui';
 ```
 
-`style.css` ships the component bundle and defaults to the same token values as `theme-light + preset-default`.
+`style.css` is a compiled, publish-ready CSS asset. Consumers do not need Tailwind or a Tailwind PostCSS plugin to resolve it. It ships the component bundle together with `theme-light + preset-default`, so the full `ref -> sys -> cmp` token chain is present even when consumers only import one file.
 
 To opt into another combination:
 
@@ -19,6 +19,12 @@ import '@owodesign/owoui/theme-dark.css';
 import '@owodesign/owoui/preset-glass.css';
 ```
 
+Override order is intentional:
+
+- `style.css` establishes the default baseline (`theme-light + preset-default`)
+- later theme imports replace the theme layer
+- later preset imports replace the preset layer
+
 This package ships:
 
 - reusable React UI primitives
@@ -49,6 +55,8 @@ import { tokenGroups, semanticTokenKeys, themeNames, presetNames } from '@owodes
 - `@owodesign/owoui/theme-light.css`
 - `@owodesign/owoui/theme-dark.css`
 
+If you import `theme-light.css` after `style.css`, it is effectively a no-op because `style.css` already includes the same theme baseline.
+
 ## Presets
 
 - `@owodesign/owoui/preset-default.css`: Signature Look based on qblog's current default preset qualities
@@ -56,6 +64,8 @@ import { tokenGroups, semanticTokenKeys, themeNames, presetNames } from '@owodes
 - `@owodesign/owoui/preset-elevated.css`: stronger depth and larger radii
 - `@owodesign/owoui/preset-glass.css`: translucent surfaces with blur
 
+If you import `preset-default.css` after `style.css`, it is effectively a no-op because `style.css` already includes the default preset baseline.
+
 There is no backward-compat alias layer for the previous `dark.css` / `flat.css` / `elevated.css` / `glass.css` entrypoints.
 
 ## Storybook Artifact
@@ -79,25 +89,29 @@ It also builds a standalone static storybook site into `dist/storybook-static/`,
 For package-local development with HMR, run:
 
 ```bash
-npm -w packages/owoui run dev:storybook
+npm run dev:storybook
 ```
 
-The dev host lives inside `packages/owoui` itself (`vite.config.ts`, `postcss.config.mjs`, `index.html`) so the package can move into its own repo later without depending on qblog's app shell.
+The dev host lives inside this package itself (`vite.config.ts`, `postcss.config.mjs`, `index.html`) and does not depend on qblog's app shell.
 
 ## Specs
 
-- [form-control-boundaries.md](/home/qq/proj/qblog/packages/owoui/docs/spec/form-control-boundaries.md): design and architecture boundaries for `Field`, `Input`, `Textarea`, and `Select`
-- [token-layering-and-naming.md](/home/qq/proj/qblog/packages/owoui/docs/spec/token-layering-and-naming.md): raw / alias / semantic token layering and naming rules
-- [token-naming-upgrade-plan.md](/home/qq/proj/qblog/packages/owoui/docs/spec/token-naming-upgrade-plan.md): `--owo-ref-*` / `--owo-sys-*` / `--owo-cmp-*` naming migration plan
+- [form-control-boundaries.md](./docs/spec/form-control-boundaries.md): design and architecture boundaries for `Field`, `Input`, `Textarea`, and `Select`
+- [token-layering-and-naming.md](./docs/spec/token-layering-and-naming.md): raw / alias / semantic token layering and naming rules
+- [token-naming-upgrade-plan.md](./docs/spec/token-naming-upgrade-plan.md): `--owo-ref-*` / `--owo-sys-*` / `--owo-cmp-*` naming migration plan
+
+## Pitches
+
+- [future-data-density-plan.md](./docs/pitch/future-data-density-plan.md): phased proposal for control height tokens and future `data-density` support
 
 ## Release Checks
 
-From the repo root:
+From the package root:
 
 ```bash
-npm run release:owoui:check
+npm run release:check
 ```
 
 Publishing notes live in:
 
-- [PUBLISHING.md](/home/qq/proj/qblog/packages/owoui/PUBLISHING.md)
+- [PUBLISHING.md](./PUBLISHING.md)

package/dist/index.css

@@ -0,0 +1,4 @@
+@layer owoui.components {
+.root{--avatar-bg: var(--owo-cmp-surface-bg-inset);--avatar-text: var(--owo-cmp-text-secondary);--avatar-border: transparent;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--owo-cmp-control-radius-full);font-weight:500;user-select:none;background:var(--avatar-bg);color:var(--avatar-text);border:1px solid var(--avatar-border)}.root[data-size=xs]{height:1.5rem;width:1.5rem;font-size:10px}.root[data-size=sm]{height:2rem;width:2rem;font-size:.75rem;line-height:1rem}.root[data-size=md]{height:2.5rem;width:2.5rem;font-size:.875rem;line-height:1.25rem}.root[data-size=lg]{height:3.5rem;width:3.5rem;font-size:1.125rem;line-height:1.75rem}.root>img{height:100%;width:100%;object-fit:cover}.root[data-tone=subtle]{--avatar-bg: var(--owo-cmp-surface-bg-subtle);--avatar-text: var(--owo-cmp-text-muted)}.root{--badge-bg: var(--owo-cmp-surface-bg-inset);--badge-text: var(--owo-cmp-text-secondary);--badge-border: transparent;display:inline-flex;align-items:center;border-radius:var(--owo-cmp-control-radius-full);border:1px solid var(--badge-border);color:var(--badge-text);background:var(--badge-bg)}.root[data-size=xs]{padding:.25rem .625rem;font-size:11px}.root[data-size=sm]{padding:.25rem .75rem;font-size:.75rem;line-height:1rem;font-weight:500}.root[data-variant=outline]{--badge-bg: transparent;--badge-border: var(--owo-cmp-surface-border)}.root[data-tone=info]{--badge-bg: var(--owo-cmp-info-bg);--badge-text: var(--owo-cmp-info-text);--badge-border: var(--owo-cmp-info-border)}.root[data-tone=info][data-variant=outline]{--badge-bg: transparent}.root[data-tone=success]{--badge-bg: var(--owo-cmp-success-bg);--badge-text: var(--owo-cmp-success-text);--badge-border: var(--owo-cmp-success-border)}.root[data-tone=success][data-variant=outline]{--badge-bg: transparent}.root[data-tone=warning]{--badge-bg: var(--owo-cmp-warning-bg);--badge-text: var(--owo-cmp-warning-text);--badge-border: var(--owo-cmp-warning-border)}.root[data-tone=warning][data-variant=outline]{--badge-bg: transparent}.root[data-tone=danger]{--badge-bg: var(--owo-cmp-danger-bg);--badge-text: var(--owo-cmp-danger-text);--badge-border: var(--owo-cmp-danger-border)}.root[data-tone=danger][data-variant=outline]{--badge-bg: transparent}.root{display:inline-flex}.root[data-animate=spin]{animation:owo-spin 1s linear infinite}@keyframes owo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.root[data-animate=spin]{animation:none}}.root{--button-bg: var(--owo-cmp-surface-bg);--button-bg-hover: var(--owo-cmp-surface-bg-inset);--button-bg-active: var(--owo-cmp-surface-bg-subtle);--button-text: var(--owo-cmp-text-primary);--button-border: var(--owo-cmp-surface-border);--button-ring: var(--owo-cmp-control-focus-ring);--button-disabled-opacity: .5;display:inline-flex;align-items:center;justify-content:center;padding:0;gap:.5rem;border-radius:var(--owo-cmp-control-radius-md);border:1px solid var(--button-border);font-weight:500;transition-property:color,background-color,border-color;transition-duration:.15s;appearance:none;background:var(--button-bg);color:var(--button-text)}.root[data-size=xs]{min-height:var(--owo-cmp-control-height-xs);padding-inline:.625rem;font-size:.6875rem;line-height:.875rem}.root[data-size=sm]{min-height:var(--owo-cmp-control-height-sm);padding-inline:.75rem;font-size:.75rem;line-height:1rem}.root[data-size=md]{min-height:var(--owo-cmp-control-height-md);padding-inline:1rem;font-size:.875rem;line-height:1.25rem}.root[data-size=lg]{min-height:var(--owo-cmp-control-height-lg);padding-inline:1.125rem;font-size:.9375rem;line-height:1.375rem}.root[data-size=xl]{min-height:var(--owo-cmp-control-height-xl);padding-inline:1.25rem;font-size:1rem;line-height:1.5rem}.root:focus-visible{box-shadow:inset 0 0 0 2px var(--button-ring);outline:none}.root:hover{background:var(--button-bg-hover)}.root:active{background:var(--button-bg-active)}.root:disabled{cursor:not-allowed;opacity:var(--button-disabled-opacity)}.root[data-loading=true]{pointer-events:none;cursor:wait}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.icon :global(svg){display:block}.label{display:inline-flex;align-items:center}.root[data-variant=primary]{--button-bg: var(--owo-cmp-accent-bg);--button-bg-hover: var(--owo-cmp-accent-bg-hover);--button-bg-active: color-mix(in srgb, var(--owo-cmp-accent-bg-hover) 88%, black);--button-text: var(--owo-cmp-accent-text);--button-border: transparent}.root[data-variant=ghost]{--button-bg: transparent;--button-bg-hover: var(--owo-cmp-surface-bg-inset);--button-bg-active: var(--owo-cmp-surface-bg-subtle);--button-text: var(--owo-cmp-text-secondary);--button-border: transparent}.root[data-variant=danger]{--button-bg: var(--owo-cmp-danger-bg);--button-bg-hover: color-mix(in srgb, var(--owo-cmp-danger-bg) 92%, var(--owo-cmp-danger-border));--button-bg-active: color-mix(in srgb, var(--owo-cmp-danger-bg) 84%, var(--owo-cmp-danger-border));--button-text: var(--owo-cmp-danger-text);--button-border: var(--owo-cmp-danger-border);--button-ring: var(--owo-cmp-danger-border)}:where(.root [data-part=trigger]){border:0;padding:0;appearance:none;background:var(--collapsible-trigger-bg, transparent);color:inherit;font:inherit;cursor:pointer;transition:background-color .18s ease,color .18s ease}:where(.root [data-part=trigger]:hover){background:var(--collapsible-trigger-bg-hover, var(--collapsible-trigger-bg, transparent))}:where(.root [data-part=trigger][data-state=open]){background:var(--collapsible-trigger-bg-open, var(--collapsible-trigger-bg-hover, var(--collapsible-trigger-bg, transparent)))}:where(.root [data-part=content]){height:auto;overflow:hidden;transition:height .18s ease;background:var(--collapsible-content-bg, transparent)}.triggerInner{display:flex;width:100%;align-items:center;gap:var(--collapsible-trigger-gap, .75rem)}.triggerIcon,.triggerIndicator{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;line-height:0;color:inherit}.triggerLabel{min-width:0;flex:1 1 auto;text-align:inherit}.contentInner{min-height:0}.overlay{position:fixed;inset:0;z-index:var(--owo-cmp-z-modal);display:flex;align-items:center;justify-content:center}.overlay [data-part=backdrop]{position:absolute;inset:0;padding:0;border:0;background:var(--owo-cmp-overlay-bg);animation:dialog-backdrop-in .2s var(--owo-cmp-motion-ease-standard)}.panel{position:relative;z-index:10;width:100%;border-radius:var(--owo-cmp-control-radius-xl);background:var(--owo-cmp-surface-bg-raised);border:1px solid var(--owo-cmp-surface-border);color:var(--owo-cmp-text-primary);box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;animation:dialog-in .2s var(--owo-cmp-motion-ease-standard)}.panel[data-size=sm]{max-width:26rem}.panel[data-size=md]{max-width:32rem}.overlay [data-part=header]{padding:1.25rem 1.25rem .25rem;font-size:1rem;line-height:1.5;font-weight:600;color:var(--owo-cmp-text-primary)}.overlay [data-part=body]{padding:.75rem 1.25rem;font-size:.875rem;line-height:1.25rem;color:var(--owo-cmp-text-secondary)}.overlay [data-part=footer]{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;padding:.75rem 1.25rem 1.25rem}.confirmDescription{white-space:pre-wrap}@keyframes dialog-in{0%{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes dialog-backdrop-in{0%{opacity:0}to{opacity:1}}.trigger{border:0;padding:0;appearance:none;background:transparent;color:inherit;font:inherit}.content{min-width:12rem;overflow-y:auto;border:1px solid var(--owo-cmp-surface-border);border-radius:var(--owo-cmp-control-radius-lg);background:var(--owo-cmp-surface-bg-raised);box-shadow:var(--_owo-dropdown-menu-shadow, var(--owo-cmp-surface-shadow-strong));padding:.375rem;color:var(--owo-cmp-text-primary);outline:none;z-index:var(--owo-cmp-z-dropdown);animation:owo-dropdown-menu-in var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard)}.content[data-side=top]{transform-origin:bottom center}.content[data-side=bottom]{transform-origin:top center}.content[data-side=left]{transform-origin:center right}.content[data-side=right]{transform-origin:center left}.content [data-part=group]+[data-part=group]{margin-top:.375rem;padding-top:.375rem;border-top:1px solid color-mix(in srgb,var(--owo-cmp-surface-border) 80%,transparent)}.content [data-part=label]{padding:.35rem .625rem .25rem;font-size:.675rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--owo-cmp-text-muted)}.content [data-part=separator]{margin:.375rem .25rem;border-top:1px solid color-mix(in srgb,var(--owo-cmp-surface-border) 82%,transparent)}.content [data-part=item],.subTrigger{display:flex;width:100%;align-items:center;gap:.75rem;border:0;border-radius:calc(var(--owo-cmp-control-radius-md) - .125rem);background:transparent;padding:.625rem .75rem;text-align:left;color:inherit;cursor:default;transition:background-color var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard),color var(--owo-cmp-motion-duration-fast) var(--owo-cmp-motion-ease-standard);appearance:none}.content [data-part=item]:hover,.content [data-part=item][data-highlighted],.subTrigger:hover,.subTrigger[data-highlighted]{background:var(--owo-cmp-surface-bg-inset)}.content [data-part=item][data-selected]{background:color-mix(in srgb,var(--owo-cmp-accent-bg) 10%,var(--owo-cmp-surface-bg-raised))}.content [data-part=item][data-selected] .itemMain{color:var(--owo-cmp-text-primary);font-weight:600}.content [data-part=item][data-disabled],.subTrigger[data-disabled]{opacity:.5;cursor:not-allowed}.content [data-part=item][data-destructive],.subTrigger[data-destructive]{color:var(--owo-cmp-danger-text)}.itemInset{padding-left:1rem}.itemMain{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shortcut,.indicator,.submenuIndicator{flex:0 0 auto;color:var(--owo-cmp-text-muted);font-size:.75rem}.indicator{min-width:1rem;text-align:center;color:var(--owo-cmp-accent-bg);font-weight:700}.subTrigger[data-state=open]{background:var(--owo-cmp-surface-bg-inset)}@keyframes owo-dropdown-menu-in{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}.panel{--drawer-surface: var(--owo-cmp-surface-bg-raised);--drawer-border: var(--owo-cmp-surface-border);--drawer-shadow: var(--owo-cmp-surface-shadow-strong);z-index:calc(var(--owo-cmp-z-modal) + 1);display:flex;max-width:100%;flex-direction:column;will-change:transform;transform:translate(0);transition:transform var(--owo-cmp-motion-duration-default) var(--owo-cmp-motion-ease-standard);background:var(--drawer-surface);border-color:var(--drawer-border);box-shadow:var(--drawer-shadow)}.panel[data-position=fixed]{position:fixed}.panel[data-position=absolute]{position:absolute}.panel[data-side=left]{left:0;top:0}.panel[data-side=right]{right:0;top:0}.panel[data-state=open]{pointer-events:auto;visibility:visible;transform:translate(0)}.panel[data-state=closed]{pointer-events:none;visibility:hidden}.panel[data-state=closed][data-side=left]{transform:translate(-100%)}.panel[data-state=closed][data-side=right]{transform:translate(100%)}.backdrop{--drawer-backdrop: var(--owo-cmp-overlay-bg);inset:0;z-index:var(--owo-cmp-z-modal);padding:0;border:0;background:var(--drawer-backdrop)}.backdrop[data-position=fixed]{position:fixed}.backdrop[data-position=absolute]{position:absolute}.root{--field-label: var(--owo-cmp-text-secondary);--field-help: var(--owo-cmp-text-muted);display:block}.root .label{display:block;margin-bottom:.25rem;font-size:.75rem;line-height:1rem;color:var(--field-label)}.root .help{display:block;margin-top:.25rem;font-size:.75rem;line-height:1rem;color:var(--field-help)}.root{--icon-button-bg: transparent;--icon-button-bg-hover: var(--owo-cmp-surface-bg-inset);--icon-button-bg-active: var(--owo-cmp-surface-bg-subtle);--icon-button-text: var(--owo-cmp-text-muted);--icon-button-ring: var(--owo-cmp-control-focus-ring);display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--owo-cmp-control-radius-md);transition-property:color,background-color;transition-duration:.15s;background:var(--icon-button-bg);color:var(--icon-button-text)}.root[data-size=xs]{height:var(--owo-cmp-control-height-xs);width:var(--owo-cmp-control-height-xs)}.root[data-size=sm]{height:var(--owo-cmp-control-height-sm);width:var(--owo-cmp-control-height-sm)}.root[data-size=md]{height:var(--owo-cmp-control-height-md);width:var(--owo-cmp-control-height-md)}.root[data-size=lg]{height:var(--owo-cmp-control-height-lg);width:var(--owo-cmp-control-height-lg)}.root[data-size=xl]{height:var(--owo-cmp-control-height-xl);width:var(--owo-cmp-control-height-xl)}.root:focus-visible{box-shadow:inset 0 0 0 2px var(--icon-button-ring);outline:none}.root:hover{background:var(--icon-button-bg-hover);color:var(--owo-cmp-text-primary)}.root:active{background:var(--icon-button-bg-active)}.root[data-variant=subtle]{--icon-button-bg: var(--owo-cmp-surface-bg-inset);--icon-button-bg-hover: var(--owo-cmp-surface-bg-subtle);--icon-button-bg-active: var(--owo-cmp-surface-bg-raised);--icon-button-text: var(--owo-cmp-text-primary)}.root{--field-bg: var(--owo-cmp-surface-bg);--field-border: var(--owo-cmp-surface-border);--field-text: var(--owo-cmp-text-primary);--field-placeholder: var(--owo-cmp-text-muted);--field-ring: var(--owo-cmp-control-focus-ring);background:var(--field-bg);border:1px solid var(--field-border);color:var(--field-text);width:100%;min-height:var(--owo-cmp-control-height-md);border-radius:var(--owo-cmp-control-radius-md);padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem}.root[data-size=xs]{min-height:var(--owo-cmp-control-height-xs);padding:.25rem .5rem;font-size:.6875rem;line-height:.875rem}.root[data-size=sm]{min-height:var(--owo-cmp-control-height-sm);padding:.375rem .625rem;font-size:.75rem;line-height:1rem}.root[data-size=lg]{min-height:var(--owo-cmp-control-height-lg);padding:.5625rem .875rem;font-size:.9375rem;line-height:1.375rem}.root[data-size=xl]{min-height:var(--owo-cmp-control-height-xl);padding:.75rem 1rem;font-size:1rem;line-height:1.5rem}.root::placeholder{color:var(--field-placeholder)}.root:hover:not(:disabled){--field-border: var(--owo-cmp-surface-border-strong)}.root:focus-visible{outline:none;--field-border: var(--field-ring);box-shadow:none}.root[data-tone=warning]{--field-border: var(--owo-cmp-warning-border);--field-ring: var(--owo-cmp-warning-border)}.root{--panel-bg: var(--owo-cmp-surface-bg);--panel-border: var(--owo-cmp-surface-border);--panel-section-border: var(--owo-cmp-surface-border);--panel-shadow: none;border-radius:var(--owo-cmp-control-radius-lg);border:1px solid var(--panel-border);background:var(--panel-bg);box-shadow:var(--panel-shadow)}.root[data-padding=sm]{padding:1rem}.root[data-padding=md]{padding:1.25rem}.root[data-padding=lg]{padding:1.5rem}.root [data-part=header]{border-bottom:1px solid var(--panel-section-border);padding:1.25rem 1.5rem}.root [data-part=body]{padding:1.25rem 1.5rem}.root [data-part=footer]{border-top:1px solid var(--panel-section-border);padding:1rem 1.5rem}.root[data-variant=subtle]{--panel-bg: var(--owo-cmp-surface-bg-subtle)}.root[data-variant=raised]{--panel-bg: var(--owo-cmp-surface-bg-raised);--panel-shadow: var(--owo-cmp-surface-shadow)}.root{--segmented-bg: var(--owo-cmp-surface-bg-inset);--segmented-border: var(--owo-cmp-surface-border);--segmented-item-text: var(--owo-cmp-text-muted);--segmented-item-hover-text: var(--owo-cmp-text-secondary);--segmented-item-active-bg: var(--owo-cmp-surface-bg-raised);--segmented-item-active-text: var(--owo-cmp-text-primary);--segmented-ring: var(--owo-cmp-control-focus-ring);display:inline-flex;border-radius:var(--owo-cmp-control-radius-md);padding:.125rem;background:var(--segmented-bg);box-shadow:0 0 0 1px var(--segmented-border)}.root[data-size=xs]{font-size:.6875rem;line-height:.875rem}.root[data-size=sm]{font-size:.75rem;line-height:1rem}.root[data-size=md]{font-size:.875rem;line-height:1.25rem}.root[data-size=lg]{font-size:.9375rem;line-height:1.375rem}.root[data-size=xl]{font-size:1rem;line-height:1.5rem}.item{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--owo-cmp-control-radius-sm);background:transparent;font-weight:500;transition:color .15s,background-color .15s;color:var(--segmented-item-text)}.item:focus{outline:none}.item:focus-visible{box-shadow:inset 0 0 0 1px var(--segmented-ring)}.item:disabled{cursor:not-allowed;opacity:.5}.item:hover{color:var(--segmented-item-hover-text)}.item[data-active=true]{background:var(--segmented-item-active-bg);color:var(--segmented-item-active-text)}.root[data-size=xs]>.item{min-height:calc(var(--owo-cmp-control-height-xs) - .25rem);padding:.125rem .5rem}.root[data-size=sm]>.item{min-height:calc(var(--owo-cmp-control-height-sm) - .25rem);padding:.25rem .625rem}.root[data-size=md]>.item{min-height:calc(var(--owo-cmp-control-height-md) - .25rem);padding:.375rem .75rem}.root[data-size=lg]>.item{min-height:calc(var(--owo-cmp-control-height-lg) - .25rem);padding:.5rem .875rem}.root[data-size=xl]>.item{min-height:calc(var(--owo-cmp-control-height-xl) - .25rem);padding:.625rem 1rem}.root{position:relative;display:inline-block}.root [data-part=trigger]{--select-bg: var(--owo-cmp-surface-bg);--select-border: var(--owo-cmp-surface-border);--select-text: var(--owo-cmp-text-primary);--select-ring: var(--owo-cmp-control-focus-ring);display:flex;width:100%;align-items:center;justify-content:space-between;padding:0;gap:.5rem;border-radius:var(--owo-cmp-control-radius-md);text-align:left;transition:color .15s,background-color .15s,border-color .15s;appearance:none;background:var(--select-bg);border:.5px solid var(--select-border);color:var(--select-text)}.root [data-part=trigger]:focus-visible{outline:none;--select-border: var(--select-ring);box-shadow:none}.root [data-part=trigger][data-size=xs]{height:var(--owo-cmp-control-height-xs);min-height:var(--owo-cmp-control-height-xs);padding:0 .5rem;font-size:.6875rem;line-height:.875rem}.root [data-part=trigger][data-size=sm]{height:var(--owo-cmp-control-height-sm);min-height:var(--owo-cmp-control-height-sm);padding:0 .5rem;font-size:.75rem;line-height:1rem}.root [data-part=trigger][data-size=md]{height:var(--owo-cmp-control-height-md);min-height:var(--owo-cmp-control-height-md);padding:0 .75rem;font-size:.875rem;line-height:1.25rem}.root [data-part=trigger][data-size=lg]{height:var(--owo-cmp-control-height-lg);min-height:var(--owo-cmp-control-height-lg);padding:0 .875rem;font-size:.9375rem;line-height:1.375rem}.root [data-part=trigger][data-size=xl]{height:var(--owo-cmp-control-height-xl);min-height:var(--owo-cmp-control-height-xl);padding:0 1rem;font-size:1rem;line-height:1.5rem}.root [data-part=trigger]:hover:not(:disabled){--select-border: var(--owo-cmp-surface-border-strong)}.root [data-part=trigger][data-state=open]{--select-border: var(--owo-cmp-surface-border-strong)}.root [data-part=trigger][data-tone=warning]{--select-border: var(--owo-cmp-warning-border);--select-ring: var(--owo-cmp-warning-border)}.valueText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.placeholder{color:var(--owo-cmp-text-muted)}.root [data-part=chevron]{width:.875rem;height:.875rem;flex-shrink:0;transition:transform .15s;color:var(--owo-cmp-text-muted)}.root [data-part=chevron][data-state=open]{transform:rotate(180deg)}.root [data-part=dropdown]{--select-dropdown-shadow: var(--owo-cmp-surface-shadow-strong);position:absolute;z-index:var(--owo-cmp-z-dropdown);margin-top:.25rem;max-height:15rem;width:100%;overflow:auto;border:1px solid var(--owo-cmp-surface-border);border-radius:var(--owo-cmp-control-radius-md);padding:.25rem 0;background:var(--owo-cmp-surface-bg-raised);box-shadow:var(--select-dropdown-shadow)}.root [data-part=dropdown][data-size=sm]{font-size:.75rem;line-height:1rem}.root [data-part=dropdown][data-size=md]{font-size:.875rem;line-height:1.25rem}.root [data-part=dropdown][data-size=xs]{font-size:.6875rem;line-height:.875rem}.root [data-part=dropdown][data-size=lg]{font-size:.9375rem;line-height:1.375rem}.root [data-part=dropdown][data-size=xl]{font-size:1rem;line-height:1.5rem}.root [data-part=option]{cursor:default;user-select:none;padding:.375rem .75rem;transition:background-color .15s}.root [data-part=option][data-disabled]{cursor:not-allowed;opacity:.5}.root [data-part=option][data-focused]{background:var(--owo-cmp-surface-bg-inset)}.root [data-part=option][data-selected]{color:var(--owo-cmp-accent-bg);font-weight:500}.root{border-radius:var(--owo-cmp-control-radius-sm);--_owo-skeleton-scan-duration: 3.6s;--skeleton-bg: linear-gradient( 180deg, color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 94%, white) 0%, color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 100%, var(--owo-cmp-surface-border)) 100% );--skeleton-bg-emphasis: linear-gradient( 180deg, color-mix(in srgb, var(--owo-cmp-surface-bg-subtle) 78%, var(--owo-ref-color-highlight-soft)) 0%, color-mix(in srgb, var(--owo-cmp-surface-bg-inset) 86%, var(--owo-cmp-surface-border)) 100% );--skeleton-sheen: linear-gradient( 100deg, transparent 0%, color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 28%, color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 40%, var(--owo-ref-color-highlight-sheen) 50%, color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 35%, transparent) 60%, color-mix(in srgb, var(--owo-ref-color-highlight-sheen) 10%, transparent) 72%, transparent 100% );--skeleton-top-highlight: var(--owo-ref-color-highlight-soft);position:relative;overflow:hidden;background:var(--skeleton-bg);box-shadow:inset 0 1px 0 var(--skeleton-top-highlight);transform:translateZ(0)}.root[data-tone=emphasis]{background:var(--skeleton-bg-emphasis)}.root:before{content:"";position:absolute;inset:0;background:inherit;opacity:.84}.root:after{content:"";position:absolute;inset:-35%;background:var(--skeleton-sheen);transform:translate(-140%) skew(-14deg);opacity:0;will-change:transform,opacity}.root[data-animation=pulse]:after{display:none}.root[data-animation=pulse]:before{animation:owo-skeleton-breathe 2.6s var(--owo-cmp-motion-ease-standard) infinite}.root[data-animation=scan]:before{opacity:1;filter:none}.root[data-animation=scan]:after{opacity:1;animation:owo-skeleton-scan var(--_owo-skeleton-scan-duration) cubic-bezier(.3,0,.2,1) infinite}@keyframes owo-skeleton-breathe{0%,to{opacity:.8;filter:saturate(.96) brightness(.98)}50%{opacity:1;filter:saturate(1.04) brightness(1.04)}}@keyframes owo-skeleton-scan{0%{transform:translate(-140%) skew(-14deg);opacity:0}18%{opacity:.82}52%{transform:translate(6%) skew(-14deg);opacity:1}82%{opacity:.82}to{transform:translate(140%) skew(-14deg);opacity:0}}@media(prefers-reduced-motion:reduce){.root:before{animation:none;opacity:.94;filter:none}.root:after{animation:none;opacity:0}}.root{--status-notice-bg: var(--owo-feedback-neutral-bg);--status-notice-border: var(--owo-feedback-neutral-border);--status-notice-text: var(--owo-feedback-neutral-text);--status-notice-icon: var(--owo-feedback-neutral-icon);border-radius:var(--owo-cmp-control-radius-md);border-width:1px;border-style:solid;padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;background:var(--status-notice-bg);border-color:var(--status-notice-border);color:var(--status-notice-text)}.withIcon{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem}.icon{color:var(--status-notice-icon)}.root:not([data-layout=vertical]) .icon{margin-top:.125rem;flex-shrink:0}.text{min-width:0}.title{font-weight:500;color:var(--owo-cmp-text-primary)}.root[data-layout=vertical]{border-radius:var(--owo-cmp-control-radius-lg)}.root[data-layout=vertical] .body{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1rem 0;text-align:center}.root[data-layout=vertical] .icon{font-size:1.125rem;line-height:1.75rem}.root[data-layout=vertical] .title{color:var(--status-notice-text)}.root[data-layout=vertical] .action{margin-top:.5rem}.root[data-tone=info]{--status-notice-bg: var(--owo-feedback-info-bg);--status-notice-border: var(--owo-feedback-info-border);--status-notice-text: var(--owo-feedback-info-text);--status-notice-icon: var(--owo-feedback-info-icon)}.root[data-tone=success]{--status-notice-bg: var(--owo-feedback-success-bg);--status-notice-border: var(--owo-feedback-success-border);--status-notice-text: var(--owo-feedback-success-text);--status-notice-icon: var(--owo-feedback-success-icon)}.root[data-tone=warning]{--status-notice-bg: var(--owo-feedback-warning-bg);--status-notice-border: var(--owo-feedback-warning-border);--status-notice-text: var(--owo-feedback-warning-text);--status-notice-icon: var(--owo-feedback-warning-icon)}.root[data-tone=danger]{--status-notice-bg: var(--owo-feedback-danger-bg);--status-notice-border: var(--owo-feedback-danger-border);--status-notice-text: var(--owo-feedback-danger-text);--status-notice-icon: var(--owo-feedback-danger-icon)}.root{--switch-track-width: calc(var(--owo-cmp-control-height-md) + .5rem);--switch-thumb-size: 1.125rem;--switch-thumb-offset: .125rem;position:relative;display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;padding:0;box-sizing:border-box;border-radius:var(--owo-cmp-control-radius-full);border:2px solid transparent;transition:background-color .15s,border-color .15s;background:var(--owo-cmp-surface-border-strong)}.root:focus{outline:none}.root:focus-visible{box-shadow:0 0 0 2px var(--owo-cmp-surface-bg),0 0 0 4px var(--owo-cmp-control-focus-ring)}.root:disabled{cursor:not-allowed;opacity:.5}.root[data-size=xs]{height:calc(var(--owo-cmp-control-height-xs) - .75rem);width:calc(var(--owo-cmp-control-height-xs) + .25rem);--switch-track-width: calc(var(--owo-cmp-control-height-xs) + .25rem);--switch-thumb-size: .625rem}.root[data-size=sm]{height:calc(var(--owo-cmp-control-height-sm) - .75rem);width:calc(var(--owo-cmp-control-height-sm) + .25rem);--switch-track-width: calc(var(--owo-cmp-control-height-sm) + .25rem);--switch-thumb-size: .875rem}.root[data-size=md]{height:calc(var(--owo-cmp-control-height-md) - .75rem);width:calc(var(--owo-cmp-control-height-md) + .5rem);--switch-track-width: calc(var(--owo-cmp-control-height-md) + .5rem);--switch-thumb-size: 1.125rem}.root[data-size=lg]{height:calc(var(--owo-cmp-control-height-lg) - .75rem);width:calc(var(--owo-cmp-control-height-lg) + .5rem);--switch-track-width: calc(var(--owo-cmp-control-height-lg) + .5rem);--switch-thumb-size: 1.375rem}.root[data-size=xl]{height:calc(var(--owo-cmp-control-height-xl) - .75rem);width:calc(var(--owo-cmp-control-height-xl) + .5rem);--switch-track-width: calc(var(--owo-cmp-control-height-xl) + .5rem);--switch-thumb-size: 1.875rem}.root[aria-checked=true]{background:var(--owo-cmp-accent-bg)}.root:hover:not(:disabled){background:color-mix(in srgb,var(--owo-cmp-surface-border-strong) 82%,var(--owo-cmp-text-muted))}.root[aria-checked=true]:hover:not(:disabled){background:var(--owo-cmp-accent-bg-hover)}.root .thumb{pointer-events:none;display:inline-block;border-radius:var(--owo-cmp-control-radius-full);background:#fff;box-shadow:0 1px 3px #00000026;transition:transform .15s;transform:translate(var(--switch-thumb-offset))}.root[data-size=xs]>.thumb{height:.625rem;width:.625rem}.root[data-size=sm]>.thumb{height:.875rem;width:.875rem}.root[data-size=md]>.thumb{height:1.125rem;width:1.125rem}.root[data-size=lg]>.thumb{height:1.375rem;width:1.375rem}.root[data-size=xl]>.thumb{height:1.875rem;width:1.875rem}.root[aria-checked=true]>.thumb{transform:translate(calc(var(--switch-track-width) - var(--switch-thumb-size) - var(--switch-thumb-offset)))}.root [data-part=list]{--tabs-border: var(--owo-cmp-surface-border);display:flex;align-items:flex-end;gap:.25rem;border-bottom-width:1px;border-bottom-style:solid;border-color:var(--tabs-border)}.root [data-part=trigger]{--tabs-text: var(--owo-cmp-text-muted);--tabs-hover-text: var(--owo-cmp-text-secondary);--tabs-active-text: var(--owo-cmp-text-primary);--tabs-active-border: var(--owo-cmp-accent-border);--tabs-active-bg: color-mix(in srgb, var(--owo-cmp-accent-bg-muted) 35%, transparent);--tabs-ring: var(--owo-cmp-control-focus-ring);position:relative;margin-bottom:-1px;display:inline-flex;min-height:var(--owo-cmp-control-height-md);align-items:center;justify-content:center;border:0;border-top-left-radius:var(--owo-cmp-control-radius-md);border-top-right-radius:var(--owo-cmp-control-radius-md);border-bottom:2px solid transparent;padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;transition:color .15s ease;appearance:none;background:transparent;color:var(--tabs-text)}.root [data-part=trigger]:focus{outline:none}.root [data-part=trigger]:focus-visible{box-shadow:inset 0 0 0 2px var(--tabs-ring)}.root [data-part=trigger]:disabled{cursor:not-allowed;opacity:.5}.root [data-part=trigger]:hover{color:var(--tabs-hover-text)}.root [data-part=trigger][data-state=active]{background:var(--tabs-active-bg);border-bottom-color:var(--tabs-active-border);color:var(--tabs-active-text)}.root [data-part=content]{padding-top:1rem;color:var(--owo-cmp-text-primary)}.root{min-height:calc(4.5em + 1rem);line-height:1.5}.root[data-auto-resize=true]{overflow-y:hidden}.container{pointer-events:none;position:fixed;bottom:1rem;right:1rem;z-index:var(--owo-cmp-z-toast);display:flex;flex-direction:column-reverse;gap:.5rem}.toast{--toast-bg: var(--owo-feedback-neutral-bg);--toast-border: var(--owo-feedback-neutral-border);--toast-text: var(--owo-feedback-neutral-text);--toast-icon: var(--owo-feedback-neutral-icon);--toast-shadow: var(--owo-cmp-surface-shadow-strong);pointer-events:auto;border-radius:var(--owo-cmp-control-radius-lg);border:1px solid var(--toast-border);font-size:.875rem;line-height:1.25rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:var(--toast-bg);color:var(--toast-text);box-shadow:var(--toast-shadow);animation:toast-in .25s var(--owo-cmp-motion-ease-standard)}.toastDefault{display:flex;align-items:flex-start;gap:.5rem;padding:.75rem 1rem}.toast [data-part=icon]{margin-top:.125rem;flex-shrink:0;color:var(--toast-icon)}.toast [data-part=content]{min-width:0;flex:1}.toast [data-part=title]{display:block;font-weight:500;color:inherit}.toast [data-part=message]{display:block}.toast [data-part=close]{margin-right:-.25rem;margin-top:-.125rem;flex-shrink:0;border-radius:var(--owo-cmp-control-radius-sm);padding:.125rem;color:currentColor;opacity:.5;transition:opacity .15s;background:transparent;border:0;cursor:pointer}.toast [data-part=close]:hover{opacity:1}.toast[data-tone=success]{--toast-bg: var(--owo-feedback-success-bg);--toast-border: var(--owo-feedback-success-border);--toast-text: var(--owo-feedback-success-text);--toast-icon: var(--owo-feedback-success-icon)}.toast[data-tone=warning]{--toast-bg: var(--owo-feedback-warning-bg);--toast-border: var(--owo-feedback-warning-border);--toast-text: var(--owo-feedback-warning-text);--toast-icon: var(--owo-feedback-warning-icon)}.toast[data-tone=danger]{--toast-bg: var(--owo-feedback-danger-bg);--toast-border: var(--owo-feedback-danger-border);--toast-text: var(--owo-feedback-danger-text);--toast-icon: var(--owo-feedback-danger-icon)}.toast[data-tone=info]{--toast-bg: var(--owo-feedback-info-bg);--toast-border: var(--owo-feedback-info-border);--toast-text: var(--owo-feedback-info-text);--toast-icon: var(--owo-feedback-info-icon)}@keyframes toast-in{0%{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.trigger{display:inline-flex}.content{--tooltip-bg: var(--owo-cmp-surface-bg-raised);--tooltip-border: var(--owo-cmp-surface-border);--tooltip-text: var(--owo-cmp-text-primary);--tooltip-shadow: var(--owo-cmp-surface-shadow-strong);--tooltip-arrow-color: var(--tooltip-bg);position:fixed;z-index:var(--owo-cmp-z-toast);border-radius:var(--owo-cmp-control-radius-lg);line-height:1.625;background:var(--tooltip-bg);color:var(--tooltip-text);border:1px solid var(--tooltip-border);box-shadow:var(--tooltip-shadow);backdrop-filter:blur(10px);animation:tooltip-in .15s var(--owo-cmp-motion-ease-standard)}.content[data-density=compact]{padding:.25rem .5rem;font-size:11px;max-width:200px}.content[data-density=default]{padding:.5rem .75rem;font-size:.75rem;line-height:1rem;max-width:20rem}.content [data-part=arrow]{position:absolute;color:var(--tooltip-arrow-color);filter:drop-shadow(0 1px 0 var(--tooltip-border))}@keyframes tooltip-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
+
+}

package/dist/index.d.ts

@@ -25,7 +25,7 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
 declare function Badge({ tone, variant, size, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
-type ButtonSize = 'sm' | 'md';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type SharedProps$1 = {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -42,20 +42,25 @@ type LinkElementProps = SharedProps$1 & Omit<AnchorHTMLAttributes<HTMLAnchorElem
     href: string;
 };
 type ButtonProps = ButtonElementProps | LinkElementProps;
-declare function buttonClassName({ variant, size, loading, className, }: Pick<ButtonProps, 'variant' | 'size' | 'loading' | 'className'>): string;
+declare function buttonClassName({ className, }: Pick<ButtonProps, 'variant' | 'size' | 'loading' | 'className'>): string;
 declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
 
+type CollapsiblePart = 'trigger' | 'content' | 'triggerInner' | 'triggerIcon' | 'triggerLabel' | 'triggerIndicator' | 'contentInner';
 interface CollapsibleRootProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    classNames?: Partial<Record<CollapsiblePart, string>>;
 }
-declare function CollapsibleRoot({ children, open, defaultOpen, onOpenChange, className, ...props }: CollapsibleRootProps): react_jsx_runtime.JSX.Element;
+declare function CollapsibleRoot({ children, open, defaultOpen, onOpenChange, classNames, className, ...props }: CollapsibleRootProps): react_jsx_runtime.JSX.Element;
 interface CollapsibleTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     children: ReactNode;
+    icon?: ReactNode;
+    indicator?: ReactNode;
+    iconPosition?: 'start' | 'end';
 }
-declare function CollapsibleTrigger({ children, className, onClick, ...props }: CollapsibleTriggerProps): react_jsx_runtime.JSX.Element;
+declare function CollapsibleTrigger({ children, icon, indicator, iconPosition, className, onClick, ...props }: CollapsibleTriggerProps): react_jsx_runtime.JSX.Element;
 interface CollapsibleContentProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
@@ -81,6 +86,7 @@ declare function ConfirmProvider({ children }: {
 }): react_jsx_runtime.JSX.Element;
 
 type DialogSize = 'sm' | 'md';
+type DialogPart = 'overlay' | 'backdrop' | 'header' | 'body' | 'footer';
 interface DialogProps extends HTMLAttributes<HTMLDivElement> {
     open: boolean;
     onClose: () => void;
@@ -88,11 +94,12 @@ interface DialogProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     overlayClassName?: string;
     panelClassName?: string;
+    classNames?: Partial<Record<DialogPart, string>>;
 }
 declare function DialogHeader({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare function DialogBody({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare function DialogFooter({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
-declare function Dialog({ open, onClose, size, children, className, overlayClassName, panelClassName, ...props }: DialogProps): react_jsx_runtime.JSX.Element | null;
+declare function Dialog({ open, onClose, size, children, className, overlayClassName, panelClassName, classNames, ...props }: DialogProps): react_jsx_runtime.JSX.Element | null;
 declare namespace Dialog {
     var Header: typeof DialogHeader;
     var Body: typeof DialogBody;
@@ -102,6 +109,7 @@ declare namespace Dialog {
 type DropdownMenuSide = 'top' | 'bottom' | 'left' | 'right';
 type DropdownMenuAlign = 'start' | 'center' | 'end';
 type DropdownMenuRole = 'menu' | 'listbox';
+type DropdownMenuPart = 'trigger' | 'content' | 'group' | 'label' | 'item' | 'separator';
 interface DropdownMenuProps {
     open?: boolean;
     defaultOpen?: boolean;
@@ -113,6 +121,7 @@ interface DropdownMenuProps {
     collisionPadding?: number;
     portal?: boolean;
     contentRole?: DropdownMenuRole;
+    classNames?: Partial<Record<DropdownMenuPart, string>>;
     children: ReactNode;
 }
 interface DropdownMenuTriggerProps {
@@ -149,7 +158,7 @@ interface DropdownSubmenuProps extends Omit<DropdownMenuProps, 'contentRole'> {
 }
 interface DropdownSubTriggerProps extends Omit<DropdownMenuItemProps, 'indicator' | 'selected' | 'closeOnSelect'> {
 }
-declare function DropdownMenuRoot({ open, defaultOpen, onOpenChange, side, align, sideOffset, alignOffset, collisionPadding, portal, contentRole, children, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRoot({ open, defaultOpen, onOpenChange, side, align, sideOffset, alignOffset, collisionPadding, portal, contentRole, classNames, children, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuTrigger({ asChild, disabled, className, children, }: DropdownMenuTriggerProps): react_jsx_runtime.JSX.Element;
 declare function DropdownMenuContent({ className, children, style, matchTriggerWidth, maxHeight, ...props }: DropdownMenuContentProps): react_jsx_runtime.JSX.Element | null;
 declare function DropdownMenuGroup({ className, children, ...props }: DropdownMenuGroupProps): react_jsx_runtime.JSX.Element;
@@ -171,6 +180,7 @@ declare const DropdownMenu: typeof DropdownMenuRoot & {
 
 type DrawerSide = 'left' | 'right';
 type DrawerPosition = 'fixed' | 'absolute';
+type DrawerPart = 'backdrop' | 'panel';
 interface DrawerProps extends HTMLAttributes<HTMLElement> {
     as?: ElementType;
     open: boolean;
@@ -181,8 +191,9 @@ interface DrawerProps extends HTMLAttributes<HTMLElement> {
     onClose?: () => void;
     closeLabel?: string;
     backdropClassName?: string;
+    classNames?: Partial<Record<DrawerPart, string>>;
 }
-declare function Drawer({ as: Component, open, children, side, position, showBackdrop, onClose, closeLabel, backdropClassName, className, ...props }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function Drawer({ as: Component, open, children, side, position, showBackdrop, onClose, closeLabel, backdropClassName, className, classNames, ...props }: DrawerProps): react_jsx_runtime.JSX.Element;
 
 interface FieldProps extends HTMLAttributes<HTMLDivElement> {
     label: ReactNode;
@@ -193,7 +204,7 @@ interface FieldProps extends HTMLAttributes<HTMLDivElement> {
 declare function Field({ label, help, htmlFor, children, className, ...props }: FieldProps): react_jsx_runtime.JSX.Element;
 
 type IconButtonVariant = 'ghost' | 'subtle';
-type IconButtonSize = 'sm' | 'md';
+type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type SharedProps = {
     variant?: IconButtonVariant;
     size?: IconButtonSize;
@@ -213,15 +224,17 @@ declare function IconButton({ variant, size, label, icon, className, ...props }:
 type InputBaseProps = {
     className?: string;
     tone?: 'default' | 'warning';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 };
-type TextInputProps = InputBaseProps & InputHTMLAttributes<HTMLInputElement> & {
+type TextInputProps = InputBaseProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
     as?: 'input';
 };
-type TextareaProps$1 = InputBaseProps & TextareaHTMLAttributes<HTMLTextAreaElement> & {
+type TextareaProps$1 = InputBaseProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & {
     as: 'textarea';
 };
 type InputProps = TextInputProps | TextareaProps$1;
-declare function Input(props: InputProps): react_jsx_runtime.JSX.Element;
+declare function Input(props: TextInputProps): React.JSX.Element;
+declare function Input(props: TextareaProps$1): React.JSX.Element;
 
 type PanelVariant = 'default' | 'subtle' | 'raised';
 type PanelPadding = 'none' | 'sm' | 'md' | 'lg';
@@ -248,7 +261,7 @@ interface SegmentedControlProps<T extends string> {
     value: T;
     onChange: (value: T) => void;
     options: Array<SegmentedOption<T>>;
-    size?: 'sm' | 'md';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     className?: string;
     ariaLabel: string;
 }
@@ -270,24 +283,26 @@ interface SelectRenderOptionArgs<T extends string> {
     selected: boolean;
     highlighted: boolean;
 }
+type SelectPart = 'trigger' | 'chevron' | 'dropdown' | 'option';
 interface SelectProps<T extends string> {
     value: T | '';
     onChange: (value: T) => void;
     options: Array<SelectOption<T>>;
     placeholder?: string;
-    size?: 'sm' | 'md';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     tone?: 'default' | 'warning';
     disabled?: boolean;
     className?: string;
     ariaLabel: string;
     renderValue?: (args: SelectRenderValueArgs<T>) => ReactNode;
     renderOption?: (args: SelectRenderOptionArgs<T>) => ReactNode;
+    classNames?: Partial<Record<SelectPart, string>>;
 }
-declare function Select<T extends string>({ value, onChange, options, placeholder, size, tone, disabled, className, ariaLabel, renderValue, renderOption, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function Select<T extends string>({ value, onChange, options, placeholder, size, tone, disabled, className, ariaLabel, renderValue, renderOption, classNames, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
 
 type SkeletonAnimation = 'pulse' | 'scan';
 type SkeletonTone = 'default' | 'emphasis' | 'warm';
-type SkeletonSpeed = 'slow' | 'default' | 'fast';
+type SkeletonSpeed = 'slow' | 'medium' | 'fast';
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     animation?: SkeletonAnimation;
     tone?: SkeletonTone;
@@ -318,7 +333,7 @@ interface StatusNoticeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
 }
 declare function StatusNotice({ tone, layout, icon, title, description, action, className, children, ...props }: StatusNoticeProps): react_jsx_runtime.JSX.Element;
 
-type SwitchSize = 'sm' | 'md';
+type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 interface SwitchProps {
     checked: boolean;
     onChange: (checked: boolean) => void;
@@ -361,12 +376,14 @@ declare const Tabs: typeof TabsRoot & {
 interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
     className?: string;
     tone?: 'default' | 'warning';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     resize?: 'none' | 'vertical' | 'both';
     autoResize?: boolean;
 }
-declare function Textarea({ className, tone, resize, autoResize, style, onInput, rows, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
+declare function Textarea({ className, tone, size, resize, autoResize, style, onInput, rows, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
 
 type ToastTone = 'success' | 'warning' | 'danger' | 'info';
+type ToastPart = 'container' | 'toast' | 'icon' | 'content' | 'title' | 'message' | 'close';
 interface ToastInput {
     title?: string;
     message: string;
@@ -391,13 +408,15 @@ interface ToastRenderArgs {
     icon: ReactNode;
 }
 declare function useToast(): ToastAPI;
-declare function ToastProvider({ children, renderToast, }: {
+declare function ToastProvider({ children, renderToast, classNames, }: {
     children: ReactNode;
     renderToast?: (args: ToastRenderArgs) => ReactNode;
+    classNames?: Partial<Record<ToastPart, string>>;
 }): react_jsx_runtime.JSX.Element;
 
 type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 type TooltipDensity = 'compact' | 'default';
+type TooltipPart = 'trigger' | 'content' | 'arrow';
 interface TooltipProps {
     content: ReactNode;
     placement?: TooltipPlacement;
@@ -410,7 +429,8 @@ interface TooltipProps {
     }) => ReactNode;
     className?: string;
     children: ReactNode;
+    classNames?: Partial<Record<TooltipPart, string>>;
 }
-declare function Tooltip({ content, placement: preferredPlacement, density, showDelay, hideDelay, arrow, renderArrow, className, children, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ content, placement: preferredPlacement, density, showDelay, hideDelay, arrow, renderArrow, className, children, classNames, }: TooltipProps): react_jsx_runtime.JSX.Element;
 
-export { Avatar, Badge, type BadgeProps, Button, type ButtonProps, Collapsible, CollapsibleContent, type CollapsibleContentProps, CollapsibleRoot, type CollapsibleRootProps, CollapsibleTrigger, type CollapsibleTriggerProps, ConfirmProvider, Dialog, Drawer, DropdownMenu, type DropdownMenuAlign, type DropdownMenuContentProps, type DropdownMenuItemProps, type DropdownMenuProps, type DropdownMenuRole, type DropdownMenuSide, type DropdownMenuTriggerProps, Field, IconButton, type IconButtonProps, Input, type InputProps, Panel, PanelBody, PanelFooter, PanelHeader, SegmentedControl, type SegmentedOption, Select, type SelectOption, type SelectRenderOptionArgs, type SelectRenderValueArgs, Skeleton, type SkeletonAnimation, type SkeletonSpeed, type SkeletonTone, Spinner, StatusNotice, type StatusNoticeProps, Switch, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsRoot, type TabsRootProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastInput, ToastProvider, type ToastRenderArgs, Tooltip, buttonClassName, useConfirm, useToast };
+export { Avatar, Badge, type BadgeProps, Button, type ButtonProps, Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsiblePart, CollapsibleRoot, type CollapsibleRootProps, CollapsibleTrigger, type CollapsibleTriggerProps, ConfirmProvider, Dialog, Drawer, DropdownMenu, type DropdownMenuAlign, type DropdownMenuContentProps, type DropdownMenuItemProps, type DropdownMenuProps, type DropdownMenuRole, type DropdownMenuSide, type DropdownMenuTriggerProps, Field, IconButton, type IconButtonProps, Input, type InputProps, Panel, PanelBody, PanelFooter, PanelHeader, SegmentedControl, type SegmentedOption, Select, type SelectOption, type SelectRenderOptionArgs, type SelectRenderValueArgs, Skeleton, type SkeletonAnimation, type SkeletonSpeed, type SkeletonTone, Spinner, StatusNotice, type StatusNoticeProps, Switch, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsRoot, type TabsRootProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastInput, ToastProvider, type ToastRenderArgs, Tooltip, buttonClassName, useConfirm, useToast };