@owodesign/owoui 0.1.5 → 0.1.7-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/dist/index.css +4 -0
- package/dist/index.d.ts +40 -20
- package/dist/index.min.js +1 -1
- package/dist/preset-default.css +5 -118
- package/dist/preset-elevated.css +12 -146
- package/dist/preset-flat.css +5 -119
- package/dist/preset-glass.css +15 -158
- package/dist/storybook/index.css +4 -0
- package/dist/storybook/index.min.js +87 -14
- package/dist/storybook-static/app.css +381 -3813
- package/dist/storybook-static/assets/main.css +1 -2
- package/dist/storybook-static/assets/main.js +93 -21
- package/dist/style.css +152 -2785
- package/dist/theme-dark.css +9 -152
- package/dist/theme-light.css +23 -152
- package/dist/tokens.css +105 -5
- package/dist/tokens.d.ts +2 -2
- package/dist/tokens.min.js +1 -1
- package/package.json +17 -7
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
@layer owoui.components {
|
|
2
|
+
.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 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)}.menuStage{display:flex;min-height:13rem;align-items:flex-start;justify-content:flex-start;padding-bottom:12rem}.pickerStage{display:flex;min-height:16rem;align-items:flex-end;padding-bottom:11rem}.triggerButton{border-radius:.5rem;border:1px solid var(--owo-cmp-surface-border);background:var(--owo-cmp-surface-bg);padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;color:var(--owo-cmp-text-primary)}.pickerTrigger{display:inline-flex;align-items:center;gap:.5rem;border-radius:.5rem;border:1px solid var(--owo-cmp-surface-border);background:var(--owo-cmp-surface-bg);padding:.5rem .75rem;font-size:.875rem;line-height:1.25rem;color:var(--owo-cmp-text-primary)}.pickerCaret{display:inline-flex;align-items:center;justify-content:center;color:var(--owo-cmp-text-muted);line-height:0}.pickerMenu{width:16rem}.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)}.maxXs{max-width:20rem}.maxSm{max-width:24rem}.max2xl{max-width:42rem}.rowWrapCenter{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}.switchLabel{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;line-height:1.25rem;color:var(--owo-ref-color-neutral-800)}.textareaGroup{display:flex;flex-direction:column;gap:.75rem}.stageBottomLarge{padding-bottom:11rem}.stageBottomMedium{padding-bottom:9rem}.collapsibleCard{max-width:32rem;text-align:left;--collapsible-inline-padding: .875rem}.collapsibleCardText{padding:.25rem var(--collapsible-inline-padding) 0;font-size:.875rem;line-height:1.5;color:var(--owo-cmp-text-secondary)}.collapsibleTrigger{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;border-radius:.75rem;padding:.625rem var(--collapsible-inline-padding);text-align:left;font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--owo-cmp-text-primary);transition:background-color .15s,color .15s}.collapsibleTrigger:hover{background:var(--owo-cmp-surface-bg-inset)}.collapsibleTrigger[data-state=open]{background:color-mix(in srgb,var(--owo-cmp-surface-bg-inset) 85%,var(--owo-cmp-surface-bg))}.collapsibleChevron{flex:0 0 auto;color:var(--owo-cmp-text-muted);transition:transform .15s,color .15s}.collapsibleTrigger[data-state=open] .collapsibleChevron{transform:rotate(180deg);color:var(--owo-cmp-text-secondary)}.collapsibleControlRow{margin-bottom:.5rem}.collapsibleTriggerCompact{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.5rem;border-radius:.5rem;padding:.5rem .625rem;text-align:left;font-size:.8125rem;line-height:1.25rem;font-weight:500;color:var(--owo-cmp-text-secondary);transition:background-color .15s,color .15s}.collapsibleTriggerCompact:hover{background:var(--owo-cmp-surface-bg-inset);color:var(--owo-cmp-text-primary)}.nestedChild{margin-top:.5rem;padding-left:.25rem;border-left:2px solid var(--owo-cmp-surface-border)}.themedCollapsible{max-width:32rem;border:1px solid color-mix(in srgb,var(--owo-cmp-info-border) 70%,var(--owo-cmp-surface-border));border-radius:1rem;overflow:hidden;background:color-mix(in srgb,var(--owo-cmp-info-bg) 40%,var(--owo-cmp-surface-bg));--collapsible-trigger-bg: color-mix(in srgb, var(--owo-cmp-info-bg) 82%, var(--owo-cmp-surface-bg));--collapsible-trigger-bg-hover: color-mix(in srgb, var(--owo-cmp-info-bg) 92%, var(--owo-cmp-surface-bg));--collapsible-trigger-bg-open: color-mix(in srgb, var(--owo-cmp-info-bg) 96%, var(--owo-cmp-surface-bg));--collapsible-content-bg: color-mix(in srgb, var(--owo-cmp-info-bg) 56%, var(--owo-cmp-surface-bg))}.themedTrigger{width:100%;padding:.875rem 1rem;text-align:left;font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--owo-cmp-info-text)}.themedTriggerIcon{color:color-mix(in srgb,var(--owo-cmp-info-text) 72%,var(--owo-cmp-text-muted))}.themedTriggerIndicator{color:color-mix(in srgb,var(--owo-cmp-info-text) 72%,var(--owo-cmp-text-muted));transition:transform .18s ease,color .18s ease}.themedTrigger[data-state=open] .themedTriggerIndicator{transform:rotate(180deg);color:var(--owo-cmp-info-text)}.themedContent{padding:0 1rem 1rem;font-size:.875rem;line-height:1.6;color:color-mix(in srgb,var(--owo-cmp-info-text) 82%,var(--owo-cmp-text-secondary))}.themedContentInner{padding-top:.125rem}.settingsCard{max-width:22rem;border-radius:.75rem;border:1px solid var(--owo-cmp-surface-border);background:var(--owo-cmp-surface-bg);overflow:hidden}.settingsTrigger{display:flex;width:100%;align-items:center;justify-content:space-between;gap:.75rem;padding:.625rem .875rem;text-align:left;font-size:.8125rem;line-height:1.25rem;font-weight:500;color:var(--owo-cmp-text-primary);transition:background-color .15s}.settingsTrigger:hover{background:color-mix(in srgb,var(--owo-cmp-surface-bg-inset) 50%,transparent)}.settingsLabel{display:flex;align-items:center;gap:.5rem}.settingsIcon{color:var(--owo-cmp-text-muted);flex:0 0 auto}.settingsChevron{flex:0 0 auto;color:var(--owo-cmp-text-muted);transition:transform .2s cubic-bezier(.4,0,.2,1)}.settingsTrigger[data-state=open] .settingsChevron{transform:rotate(90deg)}.settingsContent{padding:0 .875rem .625rem 2.25rem}.settingsRow{font-size:.75rem;line-height:1.5;color:var(--owo-cmp-text-muted)}.faqCard{max-width:40rem;border-radius:.875rem;border:1px solid var(--owo-cmp-surface-border);background:var(--owo-cmp-surface-bg);overflow:hidden;box-shadow:0 1px 3px color-mix(in srgb,var(--owo-cmp-surface-border) 40%,transparent)}.faqItem+.faqItem{border-top:1px solid color-mix(in srgb,var(--owo-cmp-surface-border) 60%,transparent)}.faqTrigger{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;padding:.875rem 1.25rem;text-align:left;font-size:.875rem;line-height:1.5;font-weight:600;letter-spacing:-.006em;color:var(--owo-cmp-text-primary);transition:background-color .15s,color .15s}.faqTrigger:hover{background:color-mix(in srgb,var(--owo-cmp-surface-bg-inset) 50%,transparent)}.faqTrigger[data-state=open]{color:var(--owo-cmp-text-primary)}.faqQuestion{flex:1 1 auto}.faqChevron{flex:0 0 auto;color:var(--owo-cmp-text-muted);transition:transform .2s cubic-bezier(.4,0,.2,1),color .15s}.faqTrigger[data-state=open] .faqChevron{transform:rotate(180deg);color:var(--owo-cmp-text-secondary)}.faqContent{padding:0 1.25rem 1rem;font-size:.8125rem;line-height:1.65;color:var(--owo-cmp-text-muted)}.tabsPanel{border-radius:.75rem;border:1px solid var(--owo-cmp-surface-border);background:var(--owo-cmp-surface-bg);padding:1rem;font-size:.875rem;line-height:1.5;color:var(--owo-cmp-text-secondary)}.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{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{--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{--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{min-height:calc(4.5em + 1rem);line-height:1.5}.root[data-auto-resize=true]{overflow-y:hidden}: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}.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{--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}.row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.stack{display:flex;flex-direction:column;gap:.75rem}.rowWrap{display:flex;flex-wrap:wrap;gap:.5rem}.rowEnd{display:flex;align-items:flex-end;gap:.75rem}.rowCenter{display:flex;align-items:center;gap:1rem}.rowCenterSm{display:flex;align-items:center;gap:.5rem}.rowStart{display:flex;align-items:flex-start;gap:.75rem}.columnGap3{display:flex;flex-direction:column;gap:.75rem}.columnGap4{display:flex;flex-direction:column;gap:1rem}.centerText{text-align:center}.toneLabel{margin-top:.25rem;font-size:.75rem;line-height:1rem;color:var(--owo-ref-color-neutral-500)}.mutedText{font-size:.875rem;line-height:1.25rem;color:var(--owo-ref-color-neutral-600)}.text2xl{font-size:1.5rem;line-height:2rem}.text11Muted{font-size:11px;line-height:1rem;color:var(--owo-ref-color-neutral-500)}.textXsMuted{font-size:.75rem;line-height:1rem;font-weight:500;color:var(--owo-ref-color-neutral-500)}.fontStrong{font-weight:600;color:var(--owo-ref-color-neutral-800)}.marginTop1{margin-top:.25rem}.marginTop2{margin-top:.5rem}.marginTop3{margin-top:.75rem}.stack2{display:flex;flex-direction:column;gap:.5rem}.placementColumn{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding-top:3rem;padding-bottom:3rem}.placementRow{display:flex;align-items:center;gap:.5rem}.placementSpacer{width:1.5rem}.centerRowLarge{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.5rem;padding-top:3rem;padding-bottom:3rem}.richTooltipTitle{font-weight:500}.richTooltipBody{margin-top:.25rem;opacity:.8}.spinnerVariantsRow{display:flex;flex-wrap:wrap;align-items:center;gap:2rem}.spinnerVariantCell{display:flex;flex-direction:column;align-items:center;gap:.5rem}.surfaceGrid{display:grid;gap:1rem}.surfaceCard{border-radius:.5rem;padding:1rem}.surfaceLabel{margin-bottom:.5rem;font-size:11px;line-height:1rem;font-weight:500;color:var(--owo-ref-color-neutral-500)}.cardPlaceholder{display:flex;flex-direction:column;gap:.75rem;max-width:24rem;border-radius:.5rem;border:1px solid var(--owo-ref-color-surface-border);padding:1rem}.actionsRow{display:flex;gap:.5rem;padding-top:.5rem}.avatarTextColumn{flex:1 1 auto;display:flex;flex-direction:column;gap:.5rem}.noteBox{border-radius:.5rem;border:1px solid var(--owo-ref-color-surface-border);background:var(--owo-ref-color-surface-subtle);padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;color:var(--owo-ref-color-neutral-600)}.dialogStatsCard{margin-top:.75rem;border-radius:.5rem;border:1px solid var(--owo-ref-color-surface-border);background:var(--owo-ref-color-surface-base);padding:.75rem;font-size:.875rem;line-height:1.25rem}.dialogStatsRow{display:flex;justify-content:space-between}.resultText{font-size:.875rem;line-height:1.25rem;color:var(--owo-ref-color-neutral-600)}.inlineCode{border-radius:.25rem;background:var(--owo-ref-color-surface-subtle);padding:.125rem .25rem;font-size:.75rem;line-height:1rem}.skeletonLineSm{height:.75rem;width:8rem}.skeletonLineMd{height:1rem;width:12rem}.skeletonLineLg{height:1rem;width:16rem}.skeletonLineFull{height:1rem;width:100%}.skeletonLineThreeQuarter{height:1rem;width:75%}.skeletonLineFiveSixths{height:1rem;width:83.3333%}.skeletonTitle{height:1.25rem;width:75%}.skeletonAvatar{height:2.5rem;width:2.5rem;border-radius:9999px}.skeletonButton{height:2rem;width:5rem;border-radius:.375rem}.surfaceStack2{display:flex;flex-direction:column;gap:.5rem}@media(min-width:640px){.surfaceGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}.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{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}}.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}}.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)}}.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)}.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)}}.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}.panelGrid,.panelGridLg{display:grid;gap:1rem}.panelTextSm{font-size:.875rem;line-height:1.25rem}.panelTextXsMuted{margin-top:.25rem;font-size:.75rem;line-height:1rem;color:var(--owo-ref-color-neutral-500)}.panelTitle{font-size:.875rem;line-height:1.25rem;font-weight:500}.panelHeading{font-size:.875rem;line-height:1.25rem;font-weight:600}.panelSurfaceCard{border-radius:.5rem;padding:1rem}.panelSurfaceLabel{margin-bottom:.5rem;font-size:11px;line-height:1rem;font-weight:500;color:var(--owo-ref-color-neutral-500)}.panelOuterSurface{border-radius:.75rem;background:var(--owo-ref-color-surface-subtle);padding:1.25rem}.panelMax{max-width:28rem}.panelFooterActions{display:flex;justify-content:flex-end;gap:.5rem}.panelStack{display:flex;flex-direction:column;gap:.75rem}.drawerFrame{position:relative;height:26rem;overflow:hidden;border-radius:.75rem;border:1px solid var(--owo-ref-color-surface-border);background:var(--owo-ref-color-surface-canvas)}.drawerCenter{display:flex;height:100%;align-items:center;justify-content:center}.drawerPanel{height:100%;width:20rem;max-width:100%;border-left:1px solid var(--owo-ref-color-surface-border)}.drawerColumn{display:flex;height:100%;flex-direction:column}.drawerHeader{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--owo-ref-color-surface-border);padding:.75rem 1rem}.drawerHeaderTitle{font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--owo-ref-color-neutral-800)}.drawerBody{flex:1 1 auto;overflow-y:auto;padding:1rem}.drawerBodyStack{display:flex;flex-direction:column;gap:.75rem}.drawerBodyText{font-size:.875rem;line-height:1.25rem;color:var(--owo-ref-color-neutral-600)}.drawerInnerCard{border-radius:.5rem;border:1px solid var(--owo-ref-color-surface-border);background:var(--owo-ref-color-surface-base);padding:.75rem;font-size:.875rem;line-height:1.25rem;color:var(--owo-ref-color-neutral-700)}.drawerFooter{display:flex;justify-content:flex-end;gap:.5rem;border-top:1px solid var(--owo-ref-color-surface-border);padding:.75rem 1rem}.drawerSurfaceStage{border-radius:.75rem;background:var(--owo-ref-color-surface-subtle);padding:1.25rem}.drawerSurfaceFrame{position:relative;height:20rem;overflow:hidden;border-radius:.75rem;border:1px solid var(--owo-ref-color-surface-border);background:var(--owo-ref-color-surface-canvas)}.drawerOverlay{position:absolute;inset:0;background:var(--owo-cmp-overlay-bg)}.drawerPanelDemo{position:absolute;inset-block:0;right:0;display:flex;width:20rem;max-width:100%;flex-direction:column;border-left:1px solid var(--owo-ref-color-surface-border)}.drawerSurfaceHeader{border-bottom:1px solid var(--owo-ref-color-surface-border);padding:.75rem 1rem;font-size:.875rem;line-height:1.25rem;font-weight:600;color:var(--owo-ref-color-neutral-800)}@media(min-width:640px){.panelGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(min-width:1024px){.panelGridLg{grid-template-columns:repeat(3,minmax(0,1fr))}}.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)}
|
|
3
|
+
|
|
4
|
+
}
|