@well-insight/ui 0.1.6 → 0.1.8

package/dist/drawer/style.css

@@ -0,0 +1,857 @@
+:root {
+    --wi-color-primary: #2563eb;
+    --wi-color-primary-hover: #1d4ed8;
+    --wi-color-surface: #ffffff;
+    --wi-color-text: #0f172a;
+    --wi-color-text-muted: #64748b;
+    --wi-color-border: #e2e8f0;
+    --wi-color-focus-ring: #2563eb;
+    /* Naive-inspired control sizing (tiny omitted; medium = default) */
+    --wi-control-height-small: 28px;
+    --wi-control-height-medium: 34px;
+    --wi-control-height-large: 40px;
+    --wi-control-font-small: 14px;
+    --wi-control-font-medium: 14px;
+    --wi-control-font-large: 15px;
+    --wi-control-padding-x-small: 10px;
+    --wi-control-padding-x-medium: 12px;
+    --wi-control-padding-x-large: 14px;
+    --wi-button-padding-x-small: 10px;
+    --wi-button-padding-x-medium: 14px;
+    --wi-button-padding-x-large: 18px;
+    --wi-radius-control: 3px;
+    --wi-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--wi-color-primary) 20%, transparent);
+    --wi-focus-shadow-danger: 0 0 0 2px color-mix(in srgb, var(--wi-color-danger) 20%, transparent);
+    --wi-color-success: #159570;
+    --wi-color-info: #2563eb;
+    --wi-color-warning: #d97706;
+    --wi-color-warn: var(--wi-color-warning);
+    --wi-color-help: #9333ea;
+    --wi-color-danger: #dc2626;
+    --wi-color-contrast: #0f172a;
+    --wi-color-contrast-fg: #ffffff;
+    --wi-color-contrast-hover: #1e293b;
+    --wi-color-contrast-active: #020617;
+    --wi-color-on-emphasis: #ffffff;
+    --wi-overlay-scrim: rgb(15 23 42 / 0.55);
+    --wi-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.25);
+    --wi-shadow-md: 0 0.75rem 2rem rgb(15 23 42 / 0.16);
+    --wi-shadow-lg: 0 1rem 3rem rgb(15 23 42 / 0.25);
+    --wi-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 6%, transparent);
+    --wi-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 6%, transparent);
+    --wi-terminal-bg: #111827;
+    --wi-terminal-fg: #e5e7eb;
+    --wi-terminal-prompt: #34d399;
+    --wi-terminal-border: color-mix(in srgb, #fff 12%, transparent);
+    /* Typography scale (component text, not control-height fonts) */
+    --wi-font-size-xs: 0.75rem;
+    --wi-font-size-sm: 0.8125rem;
+    --wi-font-size-md: 0.875rem;
+    --wi-font-size-lg: 1.125rem;
+    --wi-opacity-disabled: 0.55;
+    /* Layering: override --wi-z-base via ConfigProvider / createWellInsight */
+    --wi-z-base: 1000;
+    --wi-z-overlay: var(--wi-z-base);
+    --wi-z-overlay-raised: calc(var(--wi-z-base) + 1);
+    --wi-z-dropdown: calc(var(--wi-z-base) + 50);
+    --wi-z-toast: calc(var(--wi-z-base) + 100);
+    --wi-z-popper: 40;
+    --wi-menu-min-width: 10rem;
+    --wi-menu-min-width-lg: 12rem;
+    --wi-control-affix-size: 2rem;
+    --wi-control-affix-gap: 2.35rem;
+    --wi-control-affix-padding: 2.5rem;
+    --wi-space-1: 0.25rem;
+    --wi-space-2: 0.5rem;
+    --wi-space-3: 0.75rem;
+    --wi-space-4: 1rem;
+    --wi-space-6: 1.5rem;
+    --wi-space-8: 2rem;
+    --wi-radius-sm: 0.25rem;
+    --wi-radius-md: 0.5rem;
+    --wi-radius-lg: 0.75rem;
+    --wi-radius-full: 9999px;
+    --wi-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+    --wi-motion-fast: 150ms;
+    --wi-motion-normal: 250ms;
+    --wi-motion-ease: cubic-bezier(0.2, 0, 0, 1);
+    --wi-motion-enter: 180ms;
+    --wi-motion-exit: 130ms;
+    --wi-motion-distance: 0.5rem;
+}
+
+:root[data-wi-motion="reduced"] {
+    --wi-motion-fast: 80ms;
+    --wi-motion-normal: 120ms;
+    --wi-motion-enter: 100ms;
+    --wi-motion-exit: 80ms;
+    --wi-motion-distance: 0;
+}
+
+:root[data-wi-motion="none"] {
+    --wi-motion-fast: 0ms;
+    --wi-motion-normal: 0ms;
+    --wi-motion-enter: 0ms;
+    --wi-motion-exit: 0ms;
+    --wi-motion-distance: 0;
+}
+
+/* Global density: scales spacing + control heights (Vuetify-inspired, WD tokens) */
+:root,
+[data-wi-density="comfortable"] {
+    --wi-density-scale: 1;
+}
+
+[data-wi-density="compact"] {
+    --wi-space-1: 0.2rem;
+    --wi-space-2: 0.4rem;
+    --wi-space-3: 0.6rem;
+    --wi-space-4: 0.85rem;
+    --wi-space-6: 1.25rem;
+    --wi-space-8: 1.7rem;
+    --wi-control-height-small: 24px;
+    --wi-control-height-medium: 28px;
+    --wi-control-height-large: 34px;
+    --wi-control-font-small: 13px;
+    --wi-control-font-medium: 13px;
+    --wi-control-font-large: 14px;
+    --wi-control-padding-x-small: 8px;
+    --wi-control-padding-x-medium: 10px;
+    --wi-control-padding-x-large: 12px;
+    --wi-button-padding-x-small: 8px;
+    --wi-button-padding-x-medium: 12px;
+    --wi-button-padding-x-large: 16px;
+}
+
+[data-wi-density="spacious"] {
+    --wi-space-1: 0.3rem;
+    --wi-space-2: 0.6rem;
+    --wi-space-3: 0.9rem;
+    --wi-space-4: 1.15rem;
+    --wi-space-6: 1.75rem;
+    --wi-space-8: 2.35rem;
+    --wi-control-height-small: 32px;
+    --wi-control-height-medium: 40px;
+    --wi-control-height-large: 46px;
+    --wi-control-font-small: 14px;
+    --wi-control-font-medium: 15px;
+    --wi-control-font-large: 16px;
+    --wi-control-padding-x-small: 12px;
+    --wi-control-padding-x-medium: 14px;
+    --wi-control-padding-x-large: 16px;
+    --wi-button-padding-x-small: 12px;
+    --wi-button-padding-x-medium: 16px;
+    --wi-button-padding-x-large: 20px;
+}
+
+[data-theme="dark"] {
+    --wi-color-primary: #60a5fa;
+    --wi-color-primary-hover: #93c5fd;
+    --wi-color-surface: #0f172a;
+    --wi-color-text: #f8fafc;
+    --wi-color-text-muted: #94a3b8;
+    --wi-color-border: #334155;
+    --wi-color-focus-ring: #93c5fd;
+    --wi-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--wi-color-primary) 28%, transparent);
+    --wi-focus-shadow-danger: 0 0 0 2px color-mix(in srgb, var(--wi-color-danger) 28%, transparent);
+    --wi-color-success: #5eead4;
+    --wi-color-info: #93c5fd;
+    --wi-color-warning: #fbbf24;
+    --wi-color-warn: var(--wi-color-warning);
+    --wi-color-help: #c084fc;
+    --wi-color-danger: #fca5a5;
+    --wi-color-contrast: #f8fafc;
+    --wi-color-contrast-fg: #0f172a;
+    --wi-color-contrast-hover: #e2e8f0;
+    --wi-color-contrast-active: #cbd5e1;
+    --wi-overlay-scrim: rgb(2 6 23 / 0.72);
+    --wi-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45);
+    --wi-shadow-md: 0 0.75rem 2rem rgb(0 0 0 / 0.45);
+    --wi-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 0.55);
+    --wi-shadow-sticky: 4px 0 8px color-mix(in srgb, #000 35%, transparent);
+    --wi-shadow-sticky-end: -4px 0 8px color-mix(in srgb, #000 35%, transparent);
+    --wi-terminal-bg: #020617;
+    --wi-terminal-fg: #e2e8f0;
+    --wi-terminal-prompt: #5eead4;
+    --wi-terminal-border: color-mix(in srgb, #fff 14%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+    :root:not([data-wi-motion="full"]) {
+        --wi-motion-fast: 80ms;
+        --wi-motion-normal: 120ms;
+        --wi-motion-enter: 100ms;
+        --wi-motion-exit: 80ms;
+        --wi-motion-distance: 0;
+    }
+}
+
+/* Shared tokens consumption, type, focus, and mixed selectors. */
+
+.wi-button,
+.wi-input,
+.wi-card,
+.wi-dialog,
+.wi-drawer,
+.wi-popover,
+.wi-accordion,
+.wi-scrollbar,
+.wi-panel,
+.wi-fieldset,
+.wi-flex,
+.wi-space,
+.wi-grid,
+.wi-layout,
+.wi-layout-header,
+.wi-layout-footer,
+.wi-layout-sider,
+.wi-splitter,
+.wi-stepper,
+.wi-toolbar,
+.wi-menu,
+.wi-menubar,
+.wi-contextmenu,
+.wi-tieredmenu,
+.wi-datepicker,
+.wi-listbox,
+.wi-togglebutton,
+.wi-inputotp,
+.wi-knob,
+.wi-autocomplete,
+.wi-splitbutton,
+.wi-tree,
+.wi-timeline,
+.wi-dataview,
+.wi-confirmpopup,
+.wi-scrolltop,
+.wi-blockui,
+.wi-inplace,
+.wi-cascadeselect,
+.wi-treeselect,
+.wi-inputcolor,
+.wi-inputtags,
+.wi-label,
+.wi-speeddial,
+.wi-orderlist,
+.wi-picklist,
+.wi-virtualscroller,
+.wi-treetable,
+.wi-megamenu,
+.wi-dock,
+.wi-sidebar,
+.wi-commandmenu,
+.wi-fileupload,
+.wi-carousel,
+.wi-gallery,
+.wi-metergroup,
+.wi-fluid,
+.wi-terminal {
+    font-family: var(--wi-font-sans);
+}
+
+.wi-button:disabled,
+.wi-input:disabled {
+    cursor: not-allowed;
+    opacity: var(--wi-opacity-disabled);
+}
+
+.wi-input-field__meta,
+.wi-textarea-field__meta,
+.wi-password-field__meta {
+    align-items: baseline;
+    display: flex;
+    gap: var(--wi-space-2);
+    justify-content: space-between;
+}
+
+.wi-input-field__meta:not(:has(.wi-input-field__help)),
+.wi-textarea-field__meta:not(:has(.wi-textarea-field__help)),
+.wi-password-field__meta:not(:has(.wi-password__feedback)) {
+    justify-content: flex-end;
+}
+
+.wi-input-field__count,
+.wi-textarea-field__count,
+.wi-password-field__count {
+    color: var(--wi-color-text-muted);
+    flex: 0 0 auto;
+    font-size: var(--wi-font-size-xs);
+    margin-left: auto;
+}
+
+.wi-dropdown__item--parent,
+.wi-contextmenu__item--parent {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.wi-dropdown__icon,
+.wi-dropdown__caret,
+.wi-menu__icon,
+.wi-menubar__icon,
+.wi-contextmenu__icon,
+.wi-contextmenu__caret {
+    flex-shrink: 0;
+}
+
+.wi-dropdown__submenu-wrap,
+.wi-contextmenu__submenu-wrap {
+    position: relative;
+}
+
+.wi-dropdown__submenu,
+.wi-contextmenu__submenu {
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-md);
+    box-shadow: var(--wi-shadow-md);
+    left: 100%;
+    min-width: 10rem;
+    padding: var(--wi-space-1);
+    position: absolute;
+    top: 0;
+    z-index: 1;
+}
+
+.wi-fade-enter-active,
+.wi-fade-leave-active {
+    transition: opacity var(--wi-motion-exit) var(--wi-motion-ease);
+}
+
+.wi-fade-enter-from,
+.wi-fade-leave-to {
+    opacity: 0;
+}
+
+.wi-scale-fade-enter-active {
+    transition:
+        opacity var(--wi-motion-enter) var(--wi-motion-ease),
+        transform var(--wi-motion-enter) var(--wi-motion-ease);
+}
+
+.wi-scale-fade-leave-active {
+    transition:
+        opacity var(--wi-motion-exit) var(--wi-motion-ease),
+        transform var(--wi-motion-exit) var(--wi-motion-ease);
+}
+
+.wi-scale-fade-enter-from,
+.wi-scale-fade-leave-to {
+    opacity: 0;
+    transform: translateY(calc(var(--wi-motion-distance) * -1)) scale(0.98);
+}
+
+.wi-slide-fade-enter-active {
+    transition:
+        opacity var(--wi-motion-enter) var(--wi-motion-ease),
+        transform var(--wi-motion-enter) var(--wi-motion-ease);
+}
+
+.wi-slide-fade-leave-active {
+    transition:
+        opacity var(--wi-motion-exit) var(--wi-motion-ease),
+        transform var(--wi-motion-exit) var(--wi-motion-ease);
+}
+
+.wi-slide-fade-enter-from,
+.wi-slide-fade-leave-to {
+    opacity: 0;
+    transform: translateY(calc(var(--wi-motion-distance) * -1));
+}
+
+.wi-checkbox,
+.wi-radio,
+.wi-switch {
+    align-items: center;
+    color: var(--wi-color-text);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: var(--wi-font-sans);
+    gap: var(--wi-space-2);
+    /* 避免绝对定位 input 挂到上层 WiScrollbar，聚焦时把滚动容器拽回顶部 */
+    position: relative;
+}
+
+.wi-checkbox--disabled,
+.wi-radio--disabled,
+.wi-switch--disabled {
+    color: var(--wi-color-text-muted);
+    cursor: not-allowed;
+    opacity: var(--wi-opacity-disabled);
+}
+
+.wi-checkbox--invalid .wi-checkbox__control,
+.wi-radio--invalid .wi-radio__control {
+    border-color: var(--wi-color-danger);
+}
+
+.wi-checkbox__input,
+.wi-radio__input,
+.wi-switch__input {
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    opacity: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+.wi-checkbox__control,
+.wi-radio__control {
+    align-items: center;
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    display: inline-flex;
+    flex: 0 0 auto;
+    height: 1.125rem;
+    justify-content: center;
+    transition:
+        background-color var(--wi-motion-fast) var(--wi-motion-ease),
+        border-color var(--wi-motion-fast) var(--wi-motion-ease);
+    width: 1.125rem;
+}
+
+.wi-checkbox__input:checked + .wi-checkbox__control,
+.wi-radio__input:checked + .wi-radio__control {
+    background: var(--wi-color-primary);
+    border-color: var(--wi-color-primary);
+}
+
+.wi-checkbox__input:focus-visible + .wi-checkbox__control,
+.wi-radio__input:focus-visible + .wi-radio__control,
+.wi-switch__input:focus-visible + .wi-switch__track {
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
+}
+
+.wi-checkbox__label,
+.wi-radio__label,
+.wi-switch__label {
+    font-size: var(--wi-font-size-md);
+}
+
+.wi-textarea-field,
+.wi-select-field {
+    display: grid;
+    font-family: var(--wi-font-sans);
+    gap: var(--wi-space-2);
+    max-width: 100%;
+    min-width: var(--wi-menu-min-width);
+    position: relative;
+    width: fit-content;
+}
+
+.wi-textarea-field--fluid,
+.wi-select-field--fluid {
+    width: 100%;
+}
+
+.wi-textarea-field__label,
+.wi-select-field__label {
+    color: var(--wi-color-text);
+    font-size: var(--wi-font-size-md);
+    font-weight: 600;
+}
+
+.wi-textarea-field__help,
+.wi-select-field__help {
+    color: var(--wi-color-text-muted);
+    font-size: var(--wi-font-size-xs);
+}
+
+.wi-textarea-field__help--error,
+.wi-select-field__help--error {
+    color: var(--wi-color-danger);
+}
+
+.wi-textarea,
+.wi-select {
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-control);
+    color: var(--wi-color-text);
+    font: inherit;
+    transition:
+        border-color var(--wi-motion-fast) var(--wi-motion-ease),
+        box-shadow var(--wi-motion-fast) var(--wi-motion-ease),
+        background-color var(--wi-motion-fast) var(--wi-motion-ease);
+    width: 100%;
+}
+
+.wi-textarea--invalid:focus-visible,
+.wi-textarea--error:focus-visible,
+.wi-select--error.wi-select--open,
+.wi-select--error:focus-visible {
+    border-color: var(--wi-color-danger);
+    box-shadow: var(--wi-focus-shadow-danger);
+}
+
+.wi-textarea:disabled,
+.wi-select:disabled,
+.wi-select--disabled {
+    cursor: not-allowed;
+    opacity: var(--wi-opacity-disabled);
+}
+
+.wi-icon-field--left :is(.wi-input, .wi-password__input, .wi-inputnumber__input, input) {
+    padding-left: 2.5rem;
+}
+
+.wi-icon-field--right :is(.wi-input, .wi-password__input, .wi-inputnumber__input, input) {
+    padding-right: var(--wi-control-affix-padding);
+}
+
+.wi-inputgroup > .wi-input,
+.wi-inputgroup > .wi-input-field,
+.wi-inputgroup > .wi-password-field,
+.wi-inputgroup > .wi-inputnumber-field {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.wi-inputgroup > .wi-input-field,
+.wi-inputgroup > .wi-password-field,
+.wi-inputgroup > .wi-inputnumber-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+}
+
+.wi-inputgroup > .wi-input,
+.wi-inputgroup .wi-input,
+.wi-inputgroup .wi-password__input,
+.wi-inputgroup .wi-inputnumber__input {
+    border-radius: 0;
+    width: 100%;
+}
+
+.wi-inputgroup > :first-child.wi-input,
+.wi-inputgroup > :first-child .wi-input,
+.wi-inputgroup > :first-child .wi-password__input,
+.wi-inputgroup > :first-child .wi-inputnumber__input,
+.wi-inputgroup > :first-child.wi-inputgroup-addon {
+    border-bottom-left-radius: var(--wi-radius-control);
+    border-top-left-radius: var(--wi-radius-control);
+}
+
+.wi-inputgroup > :last-child.wi-input,
+.wi-inputgroup > :last-child .wi-input,
+.wi-inputgroup > :last-child .wi-password__input,
+.wi-inputgroup > :last-child .wi-inputnumber__input,
+.wi-inputgroup > :last-child.wi-inputgroup-addon {
+    border-bottom-right-radius: var(--wi-radius-control);
+    border-top-right-radius: var(--wi-radius-control);
+}
+
+.wi-inputgroup > .wi-inputgroup-addon + .wi-input,
+.wi-inputgroup > .wi-inputgroup-addon + .wi-input-field .wi-input,
+.wi-inputgroup > .wi-input + .wi-inputgroup-addon,
+.wi-inputgroup > .wi-input-field + .wi-inputgroup-addon {
+    margin-left: -1px;
+}
+
+.wi-layout__scrollbar > .wi-scrollbar__wrap {
+    height: 100%;
+    overflow-x: hidden;
+}
+
+.wi-layout-sider__scrollbar > .wi-scrollbar__wrap {
+    height: 100%;
+    overflow-x: hidden;
+}
+
+.wi-menu__item--selected,
+.wi-menubar__trigger--selected,
+.wi-menubar__subitem--selected {
+    background: color-mix(in srgb, var(--wi-color-primary) 12%, var(--wi-color-surface));
+    color: var(--wi-color-primary);
+}
+
+.wi-orderlist__btn,
+.wi-picklist__btn {
+    align-items: center;
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-sm);
+    color: var(--wi-color-text);
+    cursor: pointer;
+    display: inline-flex;
+    font: inherit;
+    gap: 0;
+    justify-content: center;
+    min-height: var(--wi-control-height-small, 1.75rem);
+    min-width: var(--wi-control-affix-size);
+    padding: var(--wi-space-1) var(--wi-space-2);
+}
+
+.wi-orderlist__btn:hover,
+.wi-picklist__btn:hover {
+    border-color: var(--wi-color-primary);
+    color: var(--wi-color-primary);
+}
+
+.wi-orderlist__btn:focus-visible,
+.wi-picklist__btn:focus-visible {
+    border-color: var(--wi-color-primary);
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
+}
+
+.wi-picklist__btn .wi-icon + .wi-icon {
+    margin-left: -0.35rem;
+}
+
+.wi-orderlist__list,
+.wi-picklist__list {
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-md);
+    flex: 1;
+    list-style: none;
+    margin: 0;
+    max-height: 16rem;
+    min-height: 12rem;
+    min-width: var(--wi-menu-min-width);
+    overflow: auto;
+    padding: var(--wi-space-1);
+}
+
+.wi-orderlist__item,
+.wi-picklist__item {
+    border-radius: var(--wi-radius-sm);
+    cursor: pointer;
+    padding: var(--wi-space-2) var(--wi-space-3);
+}
+
+.wi-orderlist__item:hover,
+.wi-picklist__item:hover {
+    background: color-mix(in srgb, var(--wi-color-primary) 8%, var(--wi-color-surface));
+}
+
+.wi-orderlist__item:focus-visible,
+.wi-picklist__item:focus-visible {
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
+}
+
+.wi-orderlist__item--selected,
+.wi-picklist__item--selected {
+    background: color-mix(in srgb, var(--wi-color-primary) 14%, var(--wi-color-surface));
+    color: var(--wi-color-primary);
+    font-weight: 600;
+}
+
+.wi-carousel__nav,
+.wi-gallery__nav {
+    background: var(--wi-color-surface);
+    border: 1px solid var(--wi-color-border);
+    border-radius: var(--wi-radius-full, 999px);
+    color: var(--wi-color-text);
+    cursor: pointer;
+    flex: 0 0 auto;
+    font: inherit;
+    height: var(--wi-control-affix-size);
+    width: var(--wi-control-affix-size);
+}
+
+.wi-carousel__nav:disabled,
+.wi-gallery__nav:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+}
+
+/* Shared Naive-like hover/focus for remaining form triggers */
+.wi-inputnumber__input:hover:not(:disabled):not(:focus),
+.wi-password__input:hover:not(:disabled):not(:focus),
+.wi-datepicker__input:hover:not(:disabled):not(:focus),
+.wi-inputotp__input:hover:not(:disabled):not(:focus),
+.wi-cascadeselect__trigger:hover:not(:disabled):not(:focus-visible),
+.wi-treeselect__trigger:hover:not(:disabled):not(:focus-visible),
+.wi-inputcolor__text:hover:not(:disabled):not(:focus),
+.wi-inputtags:hover:not(.wi-inputtags--disabled),
+.wi-togglebutton:hover:not(:disabled):not(.wi-togglebutton--checked),
+.wi-inplace__display:hover {
+    border-color: var(--wi-color-primary-hover);
+}
+
+.wi-inputnumber__input:focus-visible,
+.wi-password__input:focus-visible,
+.wi-datepicker__input:focus-visible,
+.wi-inputotp__input:focus-visible,
+.wi-cascadeselect__trigger:focus-visible,
+.wi-treeselect__trigger:focus-visible,
+.wi-inputcolor__text:focus-visible,
+.wi-inputtags:focus-within,
+.wi-togglebutton:focus-visible,
+.wi-selectbutton__button:focus-visible,
+.wi-splitbutton__main:focus-visible,
+.wi-splitbutton__trigger:focus-visible,
+.wi-inplace__display:focus-visible,
+.wi-pagination__button:focus-visible {
+    border-color: var(--wi-color-primary-hover);
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
+}
+
+.wi-inputnumber--invalid .wi-inputnumber__input:focus-visible,
+.wi-password--invalid .wi-password__input:focus-visible,
+.wi-datepicker--invalid .wi-datepicker__input:focus-visible {
+    border-color: var(--wi-color-danger);
+    box-shadow: var(--wi-focus-shadow-danger);
+}
+
+.wi-checkbox-group,
+.wi-radio-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--wi-space-3);
+}
+
+.wi-checkbox--small .wi-checkbox__control,
+.wi-radio--small .wi-radio__control {
+    height: 0.95rem;
+    width: 0.95rem;
+}
+
+.wi-checkbox--large .wi-checkbox__control,
+.wi-radio--large .wi-radio__control {
+    height: 1.35rem;
+    width: 1.35rem;
+}
+
+.wi-inputnumber__clear,
+.wi-autocomplete__clear {
+    background: transparent;
+    border: 0;
+    color: var(--wi-color-text-muted);
+    cursor: pointer;
+    font: inherit;
+    line-height: 1;
+}
+
+.wi-drawer-enter-active {
+    transition: opacity var(--wi-motion-enter) var(--wi-motion-ease);
+}
+
+.wi-drawer-leave-active {
+    transition: opacity var(--wi-motion-exit) var(--wi-motion-ease);
+}
+
+.wi-drawer-enter-active .wi-drawer,
+.wi-drawer-leave-active .wi-drawer {
+    transition: transform var(--wi-motion-enter) var(--wi-motion-ease);
+}
+
+.wi-drawer-leave-active .wi-drawer {
+    transition: transform var(--wi-motion-exit) var(--wi-motion-ease);
+}
+
+.wi-drawer-enter-from,
+.wi-drawer-leave-to {
+    opacity: 0;
+}
+
+.wi-drawer-enter-from .wi-drawer--left,
+.wi-drawer-leave-to .wi-drawer--left {
+    transform: translateX(-100%);
+}
+
+.wi-drawer-enter-from .wi-drawer--right,
+.wi-drawer-leave-to .wi-drawer--right {
+    transform: translateX(100%);
+}
+
+.wi-drawer-enter-from .wi-drawer--top,
+.wi-drawer-leave-to .wi-drawer--top {
+    transform: translateY(-100%);
+}
+
+.wi-drawer-enter-from .wi-drawer--bottom,
+.wi-drawer-leave-to .wi-drawer--bottom {
+    transform: translateY(100%);
+}
+
+.wi-drawer-backdrop {
+    inset: 0;
+    position: fixed;
+    z-index: var(--wi-z-overlay);
+}
+
+.wi-drawer-backdrop--modal {
+    background: var(--wi-overlay-scrim);
+}
+
+.wi-drawer {
+    background: var(--wi-color-surface);
+    box-shadow: var(--wi-shadow-lg);
+    color: var(--wi-color-text);
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    z-index: var(--wi-z-overlay-raised);
+}
+
+.wi-drawer--left {
+    bottom: 0;
+    left: 0;
+    top: 0;
+    width: min(20rem, 100vw);
+}
+
+.wi-drawer--right {
+    bottom: 0;
+    right: 0;
+    top: 0;
+    width: min(20rem, 100vw);
+}
+
+.wi-drawer--top {
+    left: 0;
+    right: 0;
+    top: 0;
+    max-height: min(40vh, 100%);
+}
+
+.wi-drawer--bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    max-height: min(40vh, 100%);
+}
+
+.wi-drawer__header {
+    align-items: center;
+    border-bottom: 1px solid var(--wi-color-border);
+    display: flex;
+    justify-content: space-between;
+    padding: var(--wi-space-4);
+}
+
+.wi-drawer__header h2 {
+    font-size: var(--wi-font-size-lg);
+    margin: 0;
+}
+
+.wi-drawer__close {
+    background: transparent;
+    border: 0;
+    color: var(--wi-color-text-muted);
+    cursor: pointer;
+    font-size: 1.25rem;
+}
+
+.wi-drawer__close:focus-visible {
+    box-shadow: var(--wi-focus-shadow);
+    outline: none;
+}
+
+.wi-drawer__body {
+    flex: 1;
+    overflow: auto;
+    padding: var(--wi-space-4);
+}