@layer kui.tokens, kui.base, kui.components, kui.utilities; @layer kui.tokens { :root { color-scheme: light dark; --kui-font-sans: 'Poppins', 'Segoe UI', Arial, sans-serif; --kui-font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --kui-font-size-2xs: 0.625rem; --kui-font-size-xs: 0.75rem; --kui-font-size-sm: 0.875rem; --kui-font-size-md: 1rem; --kui-font-size-lg: 1.125rem; --kui-font-size-xl: 1.25rem; --kui-font-size-2xl: 1.4375rem; --kui-font-size-3xl: 1.8125rem; --kui-line-height-tight: 1.2; --kui-line-height: 1.5; --kui-line-height-title-lg: 1.31; --kui-line-height-title-md: 1.39; --kui-line-height-code: 1.6; --kui-font-size-code: 0.92em; --kui-letter-spacing-caps: 0.05em; --kui-letter-spacing-title: -0.02em; --kui-letter-spacing-title-sm: -0.015em; --kui-font-weight-regular: 400; --kui-font-weight-medium: 500; --kui-font-weight-semibold: 600; --kui-font-weight-bold: 700; --kui-space-2xs: 0.125rem; --kui-space-xs: 0.25rem; --kui-space-sm: 0.5rem; --kui-space-md: 1rem; --kui-space-lg: 1.5rem; --kui-space-xl: 2rem; --kui-space-2xl: 3rem; --kui-space-3xl: 4rem; --kui-radius-xs: 2px; --kui-radius-sm: 4px; --kui-radius-md: 8px; --kui-radius-lg: 16px; --kui-radius-full: 9999px; --kui-control-height-sm: 2rem; --kui-control-height: 2.5rem; --kui-control-height-lg: 3rem; --kui-row-height: 3.5rem; --kui-table-row-height: 2.75rem; --kui-table-header-height: 2.5rem; --kui-row-height-compact: 2.5rem; --kui-header-height: 4rem; --kui-sidebar-width: 16.375rem; --kui-content-max: 100rem; --kui-focus-width: 4px; --kui-icon-size-xs: 0.75rem; --kui-icon-size-sm: 1rem; --kui-icon-size-md: 1.25rem; --kui-icon-size: 1.5rem; --kui-icon-size-lg: 2rem; --kui-icon-size-xl: 3rem; --kui-indicator-width: 4px; --kui-z-raised: 3; --kui-z-sticky: 10; --kui-z-drawer: 900; --kui-z-dialog: 1000; --kui-z-toast: 1100; --kui-duration-fast: 120ms; --kui-duration: 200ms; --kui-easing: cubic-bezier(0.2, 0, 0, 1); --kui-palette-orange50: #fff0e6; --kui-palette-orange100: #ffcfb0; --kui-palette-orange200: #ffb88a; --kui-palette-orange300: #ff9754; --kui-palette-orange400: #ff8333; --kui-palette-orange500: #ff6400; --kui-palette-orange600: #e15500; --kui-palette-orange700: #b54700; --kui-palette-orange800: #8c3700; --kui-palette-orange900: #6b2a00; --kui-palette-white: #ffffff; --kui-palette-grey25: #fcfcfc; --kui-palette-grey50: #f5f5f5; --kui-palette-grey100: #e6e6e6; --kui-palette-grey200: #dadada; --kui-palette-grey300: #c9c9c9; --kui-palette-grey400: #bfbfbf; --kui-palette-grey500: #afafaf; --kui-palette-grey600: #9f9f9f; --kui-palette-grey700: #7c7c7c; --kui-palette-grey800: #646464; --kui-palette-grey900: #262626; --kui-palette-grey950: #1b1b1b; --kui-palette-pink50: #fff0f5; --kui-palette-pink100: #ffd1de; --kui-palette-pink200: #ffbacf; --kui-palette-pink300: #ff9bb9; --kui-palette-pink400: #ff87ab; --kui-palette-pink500: #ff6996; --kui-palette-pink600: #e86089; --kui-palette-pink700: #b54b6b; --kui-palette-pink800: #8c3a53; --kui-palette-pink900: #6b2c3f; --kui-palette-purple50: #fdf2ff; --kui-palette-purple100: #f9d7ff; --kui-palette-purple200: #f6c3ff; --kui-palette-purple300: #f2a8ff; --kui-palette-purple400: #ef97ff; --kui-palette-purple500: #eb7dff; --kui-palette-purple600: #d672e8; --kui-palette-purple700: #a759b5; --kui-palette-purple800: #81458c; --kui-palette-purple900: #63356b; --kui-palette-azure50: #f1f6ff; --kui-palette-azure100: #d4e3ff; --kui-palette-azure200: #bfd6ff; --kui-palette-azure300: #a1c3ff; --kui-palette-azure400: #8fb7ff; --kui-palette-azure500: #73a5ff; --kui-palette-azure600: #6996e8; --kui-palette-azure700: #5275b5; --kui-palette-azure800: #3f5b8c; --kui-palette-azure900: #30456b; --kui-palette-deepazure50: #e6ebf6; --kui-palette-deepazure100: #b0c2e2; --kui-palette-deepazure200: #8aa5d5; --kui-palette-deepazure300: #5480cd; --kui-palette-deepazure400: #3362b5; --kui-palette-deepazure500: #003ba3; --kui-palette-deepazure600: #003694; --kui-palette-deepazure700: #002a74; --kui-palette-deepazure800: #00205a; --kui-palette-deepazure900: #001944; --kui-palette-cyan50: #f0feff; --kui-palette-cyan100: #cffaff; --kui-palette-cyan200: #b8f8ff; --kui-palette-cyan300: #97f5ff; --kui-palette-cyan400: #83f3ff; --kui-palette-cyan500: #64f0ff; --kui-palette-cyan600: #5bdae8; --kui-palette-cyan700: #47aab5; --kui-palette-cyan800: #37848c; --kui-palette-cyan900: #2a656b; --kui-palette-green50: #e6fef6; --kui-palette-green100: #b0fce3; --kui-palette-green200: #8afad6; --kui-palette-green300: #54f8c3; --kui-palette-green400: #33f7b7; --kui-palette-green500: #00f5a5; --kui-palette-green600: #00df96; --kui-palette-green700: #00ae75; --kui-palette-green800: #00875b; --kui-palette-green900: #006745; --kui-palette-yellow50: #fef9e7; --kui-palette-yellow100: #fcecb3; --kui-palette-yellow200: #fbe38e; --kui-palette-yellow300: #f9d75b; --kui-palette-yellow400: #f8cf3b; --kui-palette-yellow500: #f6c30a; --kui-palette-yellow600: #e0b109; --kui-palette-yellow700: #af8a07; --kui-palette-yellow800: #876b06; --kui-palette-yellow900: #675204; --kui-palette-battery500: #30cc47; --kui-palette-power500: #3b7cef; --kui-palette-amber650: #9e7600; --kui-palette-red600: #d92d42; --kui-palette-red400: #ff596b; --kui-palette-orange650: #c24a00; --kui-palette-grey650: #888888; --kui-palette-grey750: #737373; --kui-palette-green750: #00a36e; --kui-palette-green850: #007b53; --kui-palette-pink750: #b14968; --kui-palette-black: #000000; --kui-palette-grey850: #333333; --kui-palette-grey925: #232323; --kui-palette-grey975: #121212; --kui-palette-green650: #66ccaa; --kui-palette-battery450: #39d150; --kui-palette-green950: #0d2a20; --kui-palette-yellow925: #5a4a16; --kui-palette-yellow950: #2b2410; --kui-palette-pink950: #36141f; --kui-palette-azure950: #13213f; --kui-palette-purple950: #2f1836; --kui-series-1: #3b7cef; --kui-series-2: #00a36e; --kui-series-3: #003ba3; --kui-series-4: #a759b5; --kui-series-5: #c24a00; --kui-series-6: #37848c; --kui-series-7: #b54b6b; --kui-series-8: #876b06; --kui-bg: #fcfcfc; --kui-surface: #ffffff; --kui-surface-hover: #f5f5f5; --kui-surface-active: #e6e6e6; --kui-surface-sunken: #f5f5f5; --kui-surface-inverse: #262626; --kui-text: #262626; --kui-text-muted: #646464; --kui-text-disabled: #afafaf; --kui-status-mark: #afafaf; --kui-text-placeholder: #737373; --kui-text-inverse: #ffffff; --kui-link: #262626; --kui-link-hover: #000000; --kui-border: #e6e6e6; --kui-border-strong: #888888; --kui-border-hover: #e15500; --kui-focus: #5275b5; --kui-brand: #ff6400; --kui-indicator: #e15500; --kui-accent: #c24a00; --kui-accent-hover: #b54700; --kui-accent-active: #8c3700; --kui-accent-tint: #e6e6e6; --kui-on-accent: #ffffff; --kui-ok: #007b53; --kui-ok-tint: #e6fef6; --kui-ok-border: #00a36e; --kui-warn: #675204; --kui-warn-fill: #9e7600; --kui-danger-fill: #d92d42; --kui-warn-tint: #fef9e7; --kui-warn-border: #af8a07; --kui-danger: #b14968; --kui-danger-tint: #fff0f5; --kui-danger-border: #e86089; --kui-danger-solid: #b54b6b; --kui-danger-solid-hover: #8c3a53; --kui-on-danger: #ffffff; --kui-danger-outline: #b54b6b; --kui-info: #3362b5; --kui-info-tint: #f1f6ff; --kui-info-border: #3b7cef; --kui-highlight: #81458c; --kui-highlight-tint: #fdf2ff; --kui-highlight-border: #eb7dff; --kui-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.3)); --kui-shadow-low: 0 0.5px 0.4px rgba(194, 194, 194, 0.4), 0 1.6px 1.3px -5px rgba(194, 194, 194, 0.13); --kui-shadow-medium: 0 0.5px 0.4px rgba(194, 194, 194, 0.4), 0 1.6px 1.3px -5px rgba(194, 194, 194, 0.13), 0 2.6px 7.9px 6.2px -5px rgba(194, 194, 194, 0.11); --kui-shadow-high: 0 0.5px 0.4px rgba(194, 194, 194, 0.4), 0 2.6px 7.9px -5px rgba(194, 194, 194, 0.2), 0 9.6px 29.7px 0 rgba(120, 120, 120, 0.18); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kui-series-1: #3b7cef; --kui-series-2: #39d150; --kui-series-3: #8fb7ff; --kui-series-4: #ef97ff; --kui-series-5: #ff8333; --kui-series-6: #64f0ff; --kui-series-7: #ff87ab; --kui-series-8: #f8cf3b; --kui-bg: #121212; --kui-surface: #1b1b1b; --kui-surface-hover: #262626; --kui-surface-active: #333333; --kui-surface-sunken: #232323; --kui-surface-inverse: #f5f5f5; --kui-text: #f5f5f5; --kui-text-muted: #bfbfbf; --kui-text-disabled: #646464; --kui-status-mark: #646464; --kui-text-placeholder: #9f9f9f; --kui-text-inverse: #1b1b1b; --kui-link: #f5f5f5; --kui-link-hover: #ffffff; --kui-border: #333333; --kui-border-strong: #737373; --kui-border-hover: #ff6400; --kui-focus: #73a5ff; --kui-brand: #ff6400; --kui-indicator: #ff6400; --kui-accent: #c24a00; --kui-accent-hover: #b54700; --kui-accent-active: #8c3700; --kui-accent-tint: #262626; --kui-on-accent: #ffffff; --kui-ok: #39d150; --kui-ok-tint: #0d2a20; --kui-ok-border: #30cc47; --kui-warn: #f9d75b; --kui-warn-fill: #f9d75b; --kui-danger-fill: #ff596b; --kui-warn-tint: #2b2410; --kui-warn-border: #af8a07; --kui-danger: #ff9bb9; --kui-danger-tint: #36141f; --kui-danger-border: #ff6996; --kui-danger-solid: #b54b6b; --kui-danger-solid-hover: #8c3a53; --kui-on-danger: #ffffff; --kui-danger-outline: #ff6996; --kui-info: #8fb7ff; --kui-info-tint: #13213f; --kui-info-border: #3b7cef; --kui-highlight: #f2a8ff; --kui-highlight-tint: #2f1836; --kui-highlight-border: #eb7dff; --kui-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.55)); --kui-shadow-low: 0 1px 2px rgba(0, 0, 0, 0.5); --kui-shadow-medium: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35); --kui-shadow-high: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { color-scheme: dark; --kui-series-1: #3b7cef; --kui-series-2: #39d150; --kui-series-3: #8fb7ff; --kui-series-4: #ef97ff; --kui-series-5: #ff8333; --kui-series-6: #64f0ff; --kui-series-7: #ff87ab; --kui-series-8: #f8cf3b; --kui-bg: #121212; --kui-surface: #1b1b1b; --kui-surface-hover: #262626; --kui-surface-active: #333333; --kui-surface-sunken: #232323; --kui-surface-inverse: #f5f5f5; --kui-text: #f5f5f5; --kui-text-muted: #bfbfbf; --kui-text-disabled: #646464; --kui-status-mark: #646464; --kui-text-placeholder: #9f9f9f; --kui-text-inverse: #1b1b1b; --kui-link: #f5f5f5; --kui-link-hover: #ffffff; --kui-border: #333333; --kui-border-strong: #737373; --kui-border-hover: #ff6400; --kui-focus: #73a5ff; --kui-brand: #ff6400; --kui-indicator: #ff6400; --kui-accent: #c24a00; --kui-accent-hover: #b54700; --kui-accent-active: #8c3700; --kui-accent-tint: #262626; --kui-on-accent: #ffffff; --kui-ok: #39d150; --kui-ok-tint: #0d2a20; --kui-ok-border: #30cc47; --kui-warn: #f9d75b; --kui-warn-fill: #f9d75b; --kui-danger-fill: #ff596b; --kui-warn-tint: #2b2410; --kui-warn-border: #af8a07; --kui-danger: #ff9bb9; --kui-danger-tint: #36141f; --kui-danger-border: #ff6996; --kui-danger-solid: #b54b6b; --kui-danger-solid-hover: #8c3a53; --kui-on-danger: #ffffff; --kui-danger-outline: #ff6996; --kui-info: #8fb7ff; --kui-info-tint: #13213f; --kui-info-border: #3b7cef; --kui-highlight: #f2a8ff; --kui-highlight-tint: #2f1836; --kui-highlight-border: #eb7dff; --kui-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.55)); --kui-shadow-low: 0 1px 2px rgba(0, 0, 0, 0.5); --kui-shadow-medium: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35); --kui-shadow-high: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.55); } :root[data-theme="light"] { color-scheme: light; } @media print { :root:root { color-scheme: light; --kui-series-1: #3b7cef; --kui-series-2: #00a36e; --kui-series-3: #003ba3; --kui-series-4: #a759b5; --kui-series-5: #c24a00; --kui-series-6: #37848c; --kui-series-7: #b54b6b; --kui-series-8: #876b06; --kui-bg: #fcfcfc; --kui-surface: #ffffff; --kui-surface-hover: #f5f5f5; --kui-surface-active: #e6e6e6; --kui-surface-sunken: #f5f5f5; --kui-surface-inverse: #262626; --kui-text: #262626; --kui-text-muted: #646464; --kui-text-disabled: #afafaf; --kui-status-mark: #afafaf; --kui-text-placeholder: #737373; --kui-text-inverse: #ffffff; --kui-link: #262626; --kui-link-hover: #000000; --kui-border: #e6e6e6; --kui-border-strong: #888888; --kui-border-hover: #e15500; --kui-focus: #5275b5; --kui-brand: #ff6400; --kui-indicator: #e15500; --kui-accent: #c24a00; --kui-accent-hover: #b54700; --kui-accent-active: #8c3700; --kui-accent-tint: #e6e6e6; --kui-on-accent: #ffffff; --kui-ok: #007b53; --kui-ok-tint: #e6fef6; --kui-ok-border: #00a36e; --kui-warn: #675204; --kui-warn-fill: #9e7600; --kui-danger-fill: #d92d42; --kui-warn-tint: #fef9e7; --kui-warn-border: #af8a07; --kui-danger: #b14968; --kui-danger-tint: #fff0f5; --kui-danger-border: #e86089; --kui-danger-solid: #b54b6b; --kui-danger-solid-hover: #8c3a53; --kui-on-danger: #ffffff; --kui-danger-outline: #b54b6b; --kui-info: #3362b5; --kui-info-tint: #f1f6ff; --kui-info-border: #3b7cef; --kui-highlight: #81458c; --kui-highlight-tint: #fdf2ff; --kui-highlight-border: #eb7dff; --kui-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.3)); --kui-shadow-low: 0 0.5px 0.4px rgba(194, 194, 194, 0.4), 0 1.6px 1.3px -5px rgba(194, 194, 194, 0.13); --kui-shadow-medium: 0 0.5px 0.4px rgba(194, 194, 194, 0.4), 0 1.6px 1.3px -5px rgba(194, 194, 194, 0.13), 0 2.6px 7.9px 6.2px -5px rgba(194, 194, 194, 0.11); --kui-shadow-high: 0 0.5px 0.4px rgba(194, 194, 194, 0.4), 0 2.6px 7.9px -5px rgba(194, 194, 194, 0.2), 0 9.6px 29.7px 0 rgba(120, 120, 120, 0.18); } } } @layer kui.base { *,
*::before,
*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } [data-react-aria-pressable] { touch-action: pan-x pan-y pinch-zoom; } body { margin: 0; background: var(--kui-bg); color: var(--kui-text); font-family: var(--kui-font-sans); font-size: var(--kui-font-size-sm); line-height: var(--kui-line-height); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1,
h2,
h3,
h4,
h5,
h6 { margin: 0; font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-tight); text-wrap: balance; } h1 { font-size: var(--kui-font-size-2xl); letter-spacing: var(--kui-letter-spacing-title); } h2 { font-size: var(--kui-font-size-xl); letter-spacing: var(--kui-letter-spacing-title-sm); } h3 { font-size: var(--kui-font-size-md); } h4,
h5,
h6 { font-size: var(--kui-font-size-sm); } p,
figure,
blockquote,
dl,
dd { margin: 0; } a { color: var(--kui-link); text-underline-offset: 0.15em; } a:hover { color: var(--kui-link-hover); } code,
kbd,
samp,
pre { font-family: var(--kui-font-mono); font-size: var(--kui-font-size-code); } button,
input,
select,
textarea { font: inherit; color: inherit; } img,
video { max-width: 100%; height: auto; } table { border-collapse: collapse; } ::selection { background: var(--kui-accent-tint); color: var(--kui-text); } :focus-visible { outline: var(--kui-focus-width) solid var(--kui-focus); outline-offset: 0; } [hidden] { display: none !important; } .kui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .kui-skip-link { position: absolute; inset-inline-start: var(--kui-space-md); top: var(--kui-space-sm); z-index: var(--kui-z-toast); padding: var(--kui-space-sm) var(--kui-space-md); border-radius: var(--kui-radius-sm); background: var(--kui-surface); color: var(--kui-text); transform: translateY(-200%); } .kui-skip-link:focus { transform: none; } @media (prefers-reduced-motion: reduce) { *,
    *::before,
    *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; } .kui-spinner,
    .kui-button[aria-busy='true']::before { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; } } } @layer kui.components { .kui-title-lg { font-size: var(--kui-font-size-3xl); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-title-lg); letter-spacing: var(--kui-letter-spacing-title); } .kui-title-md { font-size: var(--kui-font-size-2xl); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-title-md); letter-spacing: var(--kui-letter-spacing-title); } .kui-title-sm { font-size: var(--kui-font-size-xl); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height); letter-spacing: var(--kui-letter-spacing-title-sm); } .kui-title-xs { font-size: var(--kui-font-size-md); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height); letter-spacing: var(--kui-letter-spacing-title-sm); } .kui-body-xs { font-size: var(--kui-font-size-xs); } .kui-body-sm { font-size: var(--kui-font-size-sm); } .kui-body-md { font-size: var(--kui-font-size-md); } .kui-body-lg { font-size: var(--kui-font-size-lg); } .kui-label { font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-medium); color: var(--kui-text-muted); } .kui-eyebrow { font-size: var(--kui-font-size-xs); font-weight: var(--kui-font-weight-semibold); letter-spacing: var(--kui-letter-spacing-caps); text-transform: uppercase; color: var(--kui-text-muted); } .kui-prose { max-width: 65ch; overflow-wrap: break-word; } .kui-prose--fill { max-width: none; } .kui-prose :where(ul, ol):where(:not([class*='kui-'])) { margin-block: 0; padding-inline-start: var(--kui-space-lg); } .kui-prose :where(blockquote:not([class*='kui-'])) { padding-inline-start: var(--kui-space-md); border-inline-start: 3px solid var(--kui-border-strong); color: var(--kui-text-muted); } .kui-prose :where(hr:not([class*='kui-'])) { margin: 0; border: 0; border-block-start: 1px solid var(--kui-border); } .kui-prose :where(:not(pre) > code:not([class*='kui-'])) { padding: 0 var(--kui-space-xs); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-xs); background: var(--kui-surface-sunken); font-size: var(--kui-font-size-code); } .kui-prose :where(pre:not([class*='kui-'])) { margin: 0; padding: var(--kui-space-md); overflow: auto; border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface-sunken); color: var(--kui-text); font-size: var(--kui-font-size-xs); line-height: var(--kui-line-height-code); white-space: pre; } .kui-prose :where(pre:not([class*='kui-']) code) { font-size: inherit; } .kui-prose :where(table:not([class*='kui-'])) { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; color: inherit; font-variant-numeric: tabular-nums; } .kui-prose :where(table:not([class*='kui-']) :is(th, td)) { padding: var(--kui-space-sm) var(--kui-space-md); border: 1px solid var(--kui-border); color: inherit; vertical-align: top; } .kui-prose :where(table:not([class*='kui-']) th) { background: var(--kui-surface-sunken); font-weight: var(--kui-font-weight-semibold); } .kui-prose :where(table:not([class*='kui-']) th:not([align])) { text-align: start; } .kui-prose :where(:is(ul, ol):not([class*='kui-']) > li + li),
.kui-prose :where(:is(ul, ol):not([class*='kui-']) > li > * + *),
.kui-prose :where(:is(ul, ol):not([class*='kui-']) > li > :is(ul, ol)) { margin-top: var(--kui-space-xs); } .kui-prose :where(blockquote:not([class*='kui-']) > * + *),
.kui-prose > * + * { margin-top: var(--kui-space-sm); } .kui-prose > * + :is(pre, table, blockquote),
.kui-prose > :is(pre, table, blockquote) + * { margin-top: var(--kui-space-md); } .kui-prose > * + :is(h1, h2, h3, h4, h5, h6, hr),
.kui-prose > hr + * { margin-top: var(--kui-space-lg); } } @layer kui.components { .kui-container { width: 100%; max-width: calc(var(--kui-content-max) + 2 * var(--kui-space-xl)); margin-inline: auto; padding: var(--kui-space-lg) var(--kui-space-md) var(--kui-space-3xl); } @media (width >= 45em) { .kui-container { padding-inline: var(--kui-space-xl); } } .kui-container--narrow { max-width: 60rem; } .kui-container .kui-container { padding: 0; } .kui-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kui-space-md); margin-bottom: var(--kui-space-lg); } :where(.kui-stack, .kui-grid, .kui-section, .kui-card, .kui-form, .kui-dialog__body) > .kui-page-header { margin-bottom: 0; } .kui-page-header__heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-sm); min-width: 0; } .kui-page-header__status { display: inline-flex; align-items: center; } .kui-page-header__text { display: grid; gap: var(--kui-space-xs); min-width: 0; flex: 1 1 16rem; overflow-wrap: anywhere; } .kui-page-header__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-sm); font-size: var(--kui-font-size-2xl); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-title-md); letter-spacing: var(--kui-letter-spacing-title); } .kui-page-header__subtitle { max-width: 75ch; color: var(--kui-text-muted); } .kui-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-sm); } @media (width < 37.5em) { .kui-page-header__text { flex-basis: 100%; } } .kui-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kui-space-md); } .kui-section + .kui-section { margin-top: var(--kui-space-xl); } .kui-section__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--kui-space-sm) var(--kui-space-md); } .kui-section__header > .kui-section__text { flex-basis: 100%; max-width: none; padding-inline-end: max(0px, 100% - 75ch); } .kui-section__title { font-size: var(--kui-font-size-xl); font-weight: var(--kui-font-weight-semibold); letter-spacing: var(--kui-letter-spacing-title-sm); } .kui-section__text { max-width: 75ch; color: var(--kui-text-muted); } .kui-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-xs); margin: 0 0 var(--kui-space-sm); padding: 0; list-style: none; font-size: var(--kui-font-size-sm); color: var(--kui-text-muted); } .kui-breadcrumb li + li::before { content: '/'; margin-inline-end: var(--kui-space-xs); color: var(--kui-text-disabled); } .kui-breadcrumb a { color: var(--kui-text-muted); text-decoration: none; } .kui-breadcrumb a:hover { color: var(--kui-text); text-decoration: underline; } .kui-breadcrumb [aria-current]:not([aria-current='false'], [aria-current='']) { color: var(--kui-text); } .kui-divider { margin: var(--kui-space-md) 0; border: 0; border-top: 1px solid var(--kui-border); } :is(.kui-page-header__status, .kui-page-header__actions, .kui-page-header__subtitle):empty { display: none; } } @layer kui.components { @media (width >= 45em) { html:has(.kui-shell__header) { scroll-padding-block-start: calc(var(--kui-header-height) + var(--kui-space-md)); } } @media (45em <= width < 64em) { html:has(.kui-shell__header > .kui-topnav) { scroll-padding-block-start: 0; } } .kui-shell { display: grid; min-height: 100vh; min-height: 100dvh; grid-template-columns: var(--kui-sidebar-width) minmax(0, 1fr); grid-template-rows: var(--kui-header-height) minmax(0, 1fr); grid-template-areas:
        'header header'
        'nav main'; } @media (width >= 45em) { .kui-shell:not(.kui-shell--no-nav) { background: linear-gradient(
            to right,
            var(--kui-surface) calc(var(--kui-sidebar-width) - 1px),
            var(--kui-border) calc(var(--kui-sidebar-width) - 1px),
            var(--kui-border) var(--kui-sidebar-width),
            var(--kui-bg) var(--kui-sidebar-width)
        ); } .kui-shell:not(.kui-shell--no-nav):dir(rtl) { background: linear-gradient(
            to left,
            var(--kui-surface) calc(var(--kui-sidebar-width) - 1px),
            var(--kui-border) calc(var(--kui-sidebar-width) - 1px),
            var(--kui-border) var(--kui-sidebar-width),
            var(--kui-bg) var(--kui-sidebar-width)
        ); } } .kui-shell--no-nav { grid-template-columns: minmax(0, 1fr); grid-template-areas:
        'header'
        'main'; } .kui-shell__header { grid-area: header; position: sticky; top: 0; z-index: var(--kui-z-sticky); display: flex; align-items: center; gap: var(--kui-space-md); height: var(--kui-header-height); padding: 0 var(--kui-space-md); background: var(--kui-surface); border-bottom: 1px solid var(--kui-border); } .kui-shell__brand { display: flex; align-items: center; gap: var(--kui-space-md); min-width: 0; color: var(--kui-text); text-decoration: none; } .kui-shell__brand:hover { color: var(--kui-text); } .kui-shell__logo { flex: none; width: auto; height: 1.625rem; aspect-ratio: 170 / 32; fill: currentColor; } .kui-shell__app { font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); color: var(--kui-link); white-space: nowrap; } .kui-shell__header-end { display: flex; align-items: center; gap: var(--kui-space-sm); margin-inline-start: auto; min-width: 0; } .kui-shell__nav { grid-area: nav; position: sticky; top: var(--kui-header-height); display: flex; flex-direction: column; height: calc(100dvh - var(--kui-header-height)); overflow-y: auto; padding-block: var(--kui-space-sm); background: var(--kui-surface); border-inline-end: 1px solid var(--kui-border); } .kui-shell__nav-footer { margin-top: auto; padding-top: var(--kui-space-sm); border-top: 1px solid var(--kui-border); } .kui-shell__nav-action { display: flex; flex-direction: column; padding: var(--kui-space-xs) var(--kui-space-md) var(--kui-space-sm); } .kui-shell__main { grid-area: main; min-width: 0; width: 100%; } .kui-nav-group { display: flex; flex-direction: column; padding-block: var(--kui-space-xs); } .kui-nav-group + .kui-nav-group::before { content: ''; display: block; height: 1px; margin: 0 var(--kui-space-md) var(--kui-space-xs); background: var(--kui-border); } .kui-nav-label { padding: var(--kui-space-sm) var(--kui-space-md) var(--kui-space-xs); font-size: var(--kui-font-size-xs); font-weight: var(--kui-font-weight-semibold); letter-spacing: var(--kui-letter-spacing-caps); text-transform: uppercase; color: var(--kui-text-muted); } .kui-nav-item { position: relative; display: flex; align-items: center; gap: var(--kui-space-sm); min-height: var(--kui-control-height); padding: var(--kui-space-sm) var(--kui-space-md); border: 0; background: none; color: var(--kui-text); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-tight); text-align: start; text-decoration: none; cursor: pointer; } .kui-nav-item:hover { color: var(--kui-text); } .kui-nav-item:active { background: var(--kui-surface-active); } .kui-nav-item:focus-visible { outline-offset: calc(-1 * var(--kui-focus-width)); } .kui-nav-item[aria-current]:not([aria-current='false'], [aria-current='']) { background: var(--kui-surface-hover); } .kui-nav-item[aria-current]:not([aria-current='false'], [aria-current=''])::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--kui-indicator-width); background: var(--kui-indicator); } .kui-nav-item > .kui-icon { width: var(--kui-icon-size); height: var(--kui-icon-size); } .kui-nav-item > .kui-count,
.kui-nav-item > .kui-badge { margin-inline-start: auto; } .kui-user { display: flex; align-items: center; gap: var(--kui-space-sm); min-width: 0; padding: var(--kui-space-sm) var(--kui-space-md); font-size: var(--kui-font-size-sm); } .kui-user__text { display: grid; min-width: 0; } .kui-user__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--kui-font-weight-medium); } .kui-user__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--kui-font-size-xs); color: var(--kui-text-muted); } .kui-topnav { display: flex; align-items: stretch; gap: var(--kui-space-xs); align-self: stretch; margin-inline-start: var(--kui-space-md); overflow-x: auto; scrollbar-width: none; } .kui-topnav__item { position: relative; display: inline-flex; align-items: center; gap: var(--kui-space-sm); padding: 0 var(--kui-space-sm); border: 0; background: none; color: var(--kui-text-muted); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); text-decoration: none; white-space: nowrap; cursor: pointer; } .kui-topnav__item:hover { color: var(--kui-text); background: var(--kui-surface-hover); } .kui-topnav__item:focus-visible { outline-offset: calc(-1 * var(--kui-focus-width)); } .kui-topnav__item[aria-current]:not([aria-current='false'], [aria-current='']) { color: var(--kui-text); } .kui-topnav__item[aria-current]:not([aria-current='false'], [aria-current=''])::after { content: ''; position: absolute; inset: auto 0 0 0; height: var(--kui-indicator-width); background: var(--kui-indicator); } @media (45em <= width < 64em) { .kui-shell:has(> .kui-shell__header > .kui-topnav) { grid-template-rows: auto minmax(0, 1fr); } .kui-shell__header:has(> .kui-topnav) { position: static; flex-wrap: wrap; height: auto; min-height: var(--kui-header-height); padding-block: var(--kui-space-sm) 0; } .kui-shell__header > .kui-topnav { order: 3; width: 100%; min-height: 2.75rem; margin-inline-start: 0; } } @media (width < 45em) { .kui-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas:
            'header'
            'nav'
            'main'; } .kui-shell__header { position: static; flex-wrap: wrap; height: auto; min-height: var(--kui-header-height); padding-block: var(--kui-space-sm); } .kui-shell__nav { position: static; flex-direction: column; height: auto; overflow-x: auto; padding: 0; border-inline-end: 0; border-bottom: 1px solid var(--kui-border); } .kui-nav-group { flex-direction: row; padding: 0; overflow-x: auto; flex-shrink: 0; } .kui-nav-group + .kui-nav-group::before,
    .kui-nav-label { display: none; } .kui-shell__nav-footer { display: flex; flex-wrap: wrap; align-items: center; margin-top: 0; } .kui-shell__nav-footer > .kui-user { flex: 1; } .kui-nav-item { white-space: nowrap; } .kui-nav-item[aria-current]:not([aria-current='false'], [aria-current=''])::before { inset: auto 0 0 0; width: auto; height: var(--kui-indicator-width); } .kui-shell__header:has(> .kui-topnav) { padding-block-end: 0; } .kui-topnav { order: 3; width: 100%; margin-inline-start: 0; min-height: 2.75rem; } } .kui-shell__main:focus { outline: none; } .kui-shell__header-end:not(:has(*)),
.kui-shell__nav-footer:not(:has(*)) { display: none; } } @layer kui.components { .kui-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--kui-space-sm); height: var(--kui-control-height-sm); padding: 0 var(--kui-space-md); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface-sunken); color: var(--kui-text); font-family: var(--kui-font-sans); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-tight); text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; } @media (prefers-reduced-motion: no-preference) { .kui-button { transition:
            background-color var(--kui-duration-fast) var(--kui-easing),
            border-color var(--kui-duration-fast) var(--kui-easing); } } .kui-button:hover { background: var(--kui-surface-active); color: var(--kui-text); } .kui-button:active { background: var(--kui-surface-active); } .kui-button--primary { border-color: transparent; background: var(--kui-accent); color: var(--kui-on-accent); } .kui-button--primary:hover { background: var(--kui-accent-hover); color: var(--kui-on-accent); } .kui-button--primary:active { background: var(--kui-accent-active); } .kui-button--outline { background: var(--kui-surface); border-color: var(--kui-border); box-shadow: var(--kui-shadow-low); } .kui-button--outline:hover { background: var(--kui-surface-hover); } .kui-button--outline:active { background: var(--kui-surface-active); } .kui-button--ghost { border-color: transparent; background: transparent; box-shadow: none; } .kui-page-header__subtitle .kui-button--ghost:not(.kui-button--icon) { min-width: var(--kui-control-height-sm); padding-inline: 0; } .kui-button--ghost:hover { background: var(--kui-surface-hover); } .kui-button--ghost:active { background: var(--kui-surface-active); } .kui-button--ghost:is([aria-current]:not([aria-current='false'], [aria-current=''])) { position: relative; border-start-start-radius: 0; border-end-start-radius: 0; background: var(--kui-surface-hover); } .kui-button--ghost:is([aria-current]:not([aria-current='false'], [aria-current='']))::after { content: ''; position: absolute; inset-block: -1px; inset-inline-start: -1px; width: var(--kui-indicator-width); background: var(--kui-indicator); } .kui-button--danger { border-color: transparent; background: var(--kui-danger-solid); color: var(--kui-on-danger); } .kui-button--danger:hover,
.kui-button--danger:active { background: var(--kui-danger-solid-hover); color: var(--kui-on-danger); } .kui-button--link { height: auto; min-height: 1.5rem; padding: 0; border-color: transparent; background: none; box-shadow: none; color: var(--kui-link); font-weight: var(--kui-font-weight-medium); text-decoration: underline; text-underline-offset: 0.15em; } .kui-button--link:hover,
.kui-button--link:active { background: none; color: var(--kui-link-hover); text-decoration-thickness: 2px; } .kui-button--md { height: var(--kui-control-height); } .kui-button--md.kui-button--icon { width: var(--kui-control-height); } .kui-button--lg,
.kui-button--large { height: var(--kui-control-height-lg); padding: 0 var(--kui-space-lg); font-size: var(--kui-font-size-md); } .kui-button--icon { width: var(--kui-control-height-sm); padding: 0; } .kui-button--lg.kui-button--icon,
.kui-button--large.kui-button--icon { width: var(--kui-control-height-lg); } .kui-button--block { width: 100%; } .kui-button .kui-icon { width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); } .kui-button[aria-pressed='true']:where(:not(.kui-button--primary, .kui-button--danger, .kui-button--link)) { background: var(--kui-surface-active); border-color: var(--kui-border-strong); box-shadow: inset 0 0 0 1px var(--kui-border-strong); } .kui-button:is(:disabled, [aria-disabled='true']) { background: var(--kui-surface-sunken); border-color: var(--kui-border); color: var(--kui-text-muted); box-shadow: none; cursor: not-allowed; } .kui-button--ghost:is(:disabled, [aria-disabled='true']),
.kui-button--link:is(:disabled, [aria-disabled='true']) { background: transparent; border-color: transparent; } .kui-button[aria-pressed='true']:is(:disabled, [aria-disabled='true']):where(:not(.kui-button--primary, .kui-button--danger, .kui-button--link)) { background: var(--kui-surface-active); } .kui-button[aria-busy='true'] { cursor: progress; } .kui-button[aria-busy='true']::before { content: ''; flex: none; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--kui-radius-full); animation: kui-spin 0.8s linear infinite; } .kui-button--icon[aria-busy='true'] > .kui-icon { display: none; } .kui-button-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-sm); } } @layer kui.components { .kui-badge { display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--kui-space-xs); max-width: 100%; padding: 0 var(--kui-space-xs); border-radius: var(--kui-radius-sm); background: var(--kui-surface-active); color: var(--kui-text-muted); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-medium); line-height: var(--kui-line-height); overflow-wrap: anywhere; vertical-align: middle; } .kui-table .kui-badge { white-space: nowrap; } .kui-badge--sm,
.kui-badge--small { font-size: var(--kui-font-size-xs); } .kui-badge--success,
.kui-badge--ok,
.kui-badge[data-kui-ocpp="Available"] { background: var(--kui-ok-tint); color: var(--kui-ok); } .kui-badge--info, .kui-badge[data-kui-ocpp="Preparing"], .kui-badge[data-kui-ocpp="Charging"], .kui-badge[data-kui-ocpp="Finishing"] { background: var(--kui-info-tint); color: var(--kui-info); } .kui-badge--warning,
.kui-badge--warn,
.kui-badge[data-kui-ocpp="SuspendedEV"],
.kui-badge[data-kui-ocpp="SuspendedEVSE"] { background: var(--kui-warn-tint); color: var(--kui-warn); } .kui-badge--error,
.kui-badge--danger,
.kui-badge[data-kui-ocpp="Faulted"] { background: var(--kui-danger-tint); color: var(--kui-danger); } .kui-badge--highlight { background: var(--kui-highlight-tint); color: var(--kui-highlight); } .kui-badge--brand { background: var(--kui-accent-tint); color: var(--kui-text); } .kui-badge--code { background: var(--kui-surface-sunken); color: var(--kui-text); font-family: var(--kui-font-mono); font-weight: var(--kui-font-weight-regular); font-size: var(--kui-font-size-xs); line-height: calc(var(--kui-font-size-sm) * var(--kui-line-height)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kui-badge--outline { padding-block: var(--kui-space-2xs); background: var(--kui-surface); border: 1px solid var(--kui-border); } .kui-badge .kui-icon { width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); } .kui-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem; border-radius: var(--kui-radius-full); background: var(--kui-accent); color: var(--kui-on-accent); font-size: var(--kui-font-size-xs); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-tight); font-variant-numeric: tabular-nums; } .kui-count--neutral { background: var(--kui-surface-active); color: var(--kui-text); } .kui-dot { display: inline-block; flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--kui-radius-full); background: currentColor; } .kui-dot--success,
.kui-dot--ok { color: var(--kui-ok-border); } .kui-dot--warning,
.kui-dot--warn { color: var(--kui-warn-fill); } .kui-dot--error,
.kui-dot--danger { color: var(--kui-danger-fill); } .kui-dot--info { color: var(--kui-info-border); } .kui-dot--neutral,
.kui-dot--muted { color: var(--kui-text-muted); } } @layer kui.components { .kui-icon { display: inline-block; flex: none; width: var(--kui-icon-size); height: var(--kui-icon-size); fill: currentColor; vertical-align: middle; } .kui-icon--xs { width: var(--kui-icon-size-xs); height: var(--kui-icon-size-xs); } .kui-icon--sm { width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); } .kui-icon--lg { width: var(--kui-icon-size-lg); height: var(--kui-icon-size-lg); } .kui-icon--xl { width: var(--kui-icon-size-xl); height: var(--kui-icon-size-xl); } .kui-icon--accent { fill: var(--kui-indicator); } } @layer kui.components { .kui-field { display: flex; flex-direction: column; gap: var(--kui-space-xs); min-width: 0; } .kui-field__label { font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-medium); color: var(--kui-text-muted); } .kui-field__optional { font-weight: var(--kui-font-weight-regular); color: var(--kui-text-muted); } .kui-field__required { color: var(--kui-danger); } .kui-field__hint { font-size: var(--kui-font-size-sm); color: var(--kui-text-muted); } .kui-field__error { display: flex; align-items: center; gap: var(--kui-space-xs); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-medium); color: var(--kui-danger); } .kui-field:has([aria-invalid='true']) > .kui-field__label { color: var(--kui-danger); } .kui-input { width: 100%; height: var(--kui-control-height); padding: 0 var(--kui-space-md); border: 1px solid var(--kui-border-strong); border-radius: var(--kui-radius-sm); background: var(--kui-surface); color: var(--kui-text); font-size: var(--kui-font-size-sm); line-height: var(--kui-line-height); } @media (prefers-reduced-motion: no-preference) { .kui-input { transition: border-color var(--kui-duration-fast) var(--kui-easing); } } textarea.kui-input { height: auto; min-height: 6rem; padding: var(--kui-space-sm) var(--kui-space-md); resize: vertical; } .kui-input::placeholder { color: var(--kui-text-placeholder); opacity: 1; } .kui-input:hover { border-color: var(--kui-border-hover); } .kui-input[aria-invalid='true'] { border-color: var(--kui-danger-outline); outline: 1px solid var(--kui-danger-outline); outline-offset: 0; } .kui-input:focus-visible { border-color: var(--kui-focus); outline: var(--kui-focus-width) solid var(--kui-focus); outline-offset: 0; } .kui-input[type='search']::-webkit-search-cancel-button,
.kui-input[type='number']::-webkit-inner-spin-button,
.kui-input[type='number']::-webkit-outer-spin-button { appearance: none; } .kui-input:disabled,
.kui-input[readonly] { border-color: var(--kui-border); background: var(--kui-surface-sunken); color: var(--kui-text-muted); } .kui-input[readonly]::placeholder { color: var(--kui-text-muted); } .kui-input:disabled { color: var(--kui-text-disabled); cursor: not-allowed; } .kui-input--sm,
.kui-input--small { height: var(--kui-control-height-sm); padding-inline: var(--kui-space-sm); } .kui-input--mono { font-family: var(--kui-font-mono); } .kui-select { position: relative; display: block; min-width: 0; } .kui-select--inline { display: inline-block; } .kui-select > select { appearance: none; padding-inline-end: 2.5rem; text-overflow: ellipsis; cursor: pointer; } .kui-select::after { content: ''; position: absolute; top: 50%; inset-inline-end: var(--kui-space-md); width: 0.45rem; height: 0.45rem; border-right: 1.5px solid var(--kui-text-muted); border-bottom: 1.5px solid var(--kui-text-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .kui-select:has(select:disabled)::after { border-color: var(--kui-text-disabled); } .kui-search { position: relative; display: block; min-width: 0; } .kui-search > .kui-icon { position: absolute; top: 50%; inset-inline-start: 0.75rem; width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); color: var(--kui-text-muted); transform: translateY(-50%); pointer-events: none; } .kui-search > .kui-input { padding-inline-start: 2.25rem; } .kui-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kui-space-md); } .kui-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--kui-space-md); } .kui-form__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--kui-space-md); } .kui-fieldset { display: grid; gap: var(--kui-space-md); min-width: 0; margin: 0; padding: var(--kui-space-md); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-md); } .kui-fieldset > legend { padding: 0 var(--kui-space-xs); font-size: var(--kui-font-size-xs); font-weight: var(--kui-font-weight-semibold); letter-spacing: var(--kui-letter-spacing-caps); text-transform: uppercase; color: var(--kui-text-muted); } .kui-fieldset--bare { gap: var(--kui-space-xs); justify-items: start; padding: 0; border: 0; border-radius: 0; } .kui-fieldset--bare > legend { padding: 0; margin-bottom: var(--kui-space-xs); font-size: var(--kui-font-size-sm); letter-spacing: normal; text-transform: none; } .kui-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--kui-space-sm); margin-bottom: var(--kui-space-md); } .kui-toolbar--center { align-items: center; } .kui-toolbar .kui-input,
.kui-toolbar .kui-button { height: var(--kui-control-height-sm); } .kui-toolbar .kui-input { padding-inline: var(--kui-space-sm); } .kui-toolbar .kui-search > .kui-input { padding-inline-start: 2.25rem; } .kui-toolbar .kui-select > .kui-input { padding-inline-end: 2.5rem; } .kui-toolbar .kui-field { min-width: 10rem; } .kui-form:where([data-kui-density='compact']),
[data-kui-density='compact'] :is(.kui-form, .kui-form__row, .kui-fieldset:not(.kui-fieldset--bare)):where(:not([data-kui-density='compact'] :is([data-kui-density='default'], [data-kui-density='comfortable']) *, :is([data-kui-density='default'], [data-kui-density='comfortable']))),
.kui-form--compact,
.kui-form--compact :is(.kui-form, .kui-form__row, .kui-fieldset:not(.kui-fieldset--bare)) { gap: var(--kui-space-sm); } [data-kui-density='compact'] .kui-fieldset:not(.kui-fieldset--bare):where(:not([data-kui-density='compact'] :is([data-kui-density='default'], [data-kui-density='comfortable']) *, :is([data-kui-density='default'], [data-kui-density='comfortable']))),
.kui-form--compact .kui-fieldset:not(.kui-fieldset--bare) { padding: var(--kui-space-sm) var(--kui-space-md); } [data-kui-density='compact'] .kui-input:where(:not(textarea)):where(:not([data-kui-density='compact'] :is([data-kui-density='default'], [data-kui-density='comfortable']) *, :is([data-kui-density='default'], [data-kui-density='comfortable']))),
.kui-form--compact .kui-input:where(:not(textarea)) { height: var(--kui-control-height-sm); } [data-kui-density='compact'] .kui-chips-input:where(:not([data-kui-density='compact'] :is([data-kui-density='default'], [data-kui-density='comfortable']) *, :is([data-kui-density='default'], [data-kui-density='comfortable']))),
.kui-form--compact .kui-chips-input { min-height: var(--kui-control-height-sm); padding-block: 1px; } .kui-input[type='number'] { appearance: textfield; } } @layer kui.components { .kui-input-group { display: flex; align-items: center; min-width: 0; height: var(--kui-control-height); border: 1px solid var(--kui-border-strong); border-radius: var(--kui-radius-sm); background: var(--kui-surface); color: var(--kui-text); } @media (prefers-reduced-motion: no-preference) { .kui-input-group { transition: border-color var(--kui-duration-fast) var(--kui-easing); } } .kui-input-group:has(> .kui-input--sm),
.kui-input-group:has(> .kui-input--small),
.kui-toolbar .kui-input-group,
[data-kui-density='compact'] .kui-input-group:where(:not([data-kui-density='compact'] :is([data-kui-density='default'], [data-kui-density='comfortable']) *, :is([data-kui-density='default'], [data-kui-density='comfortable']))),
.kui-form--compact .kui-input-group { height: var(--kui-control-height-sm); } .kui-input-group > .kui-input,
.kui-input-group > .kui-input:is(:hover, :focus, :focus-visible, :disabled, [readonly], [aria-invalid='true']) { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; border-radius: 0; outline: 0; background: transparent; } .kui-input-group > .kui-input:not(:first-child) { padding-inline-start: var(--kui-space-xs); } .kui-input-group > .kui-input:not(:last-child) { padding-inline-end: var(--kui-space-xs); } .kui-input-group:hover { border-color: var(--kui-border-hover); } .kui-input-group:has(> .kui-input[aria-invalid='true']) { border-color: var(--kui-danger-outline); outline: 1px solid var(--kui-danger-outline); outline-offset: 0; } .kui-input-group:has(> .kui-input:focus-visible) { border-color: var(--kui-focus); outline: var(--kui-focus-width) solid var(--kui-focus); outline-offset: 0; } .kui-input-group:has(> .kui-input:is(:disabled, [readonly])) { border-color: var(--kui-border); background: var(--kui-surface-sunken); } .kui-input-group:has(> .kui-input:disabled) { color: var(--kui-text-disabled); cursor: not-allowed; } .kui-input-group__affix { display: inline-flex; flex: none; align-items: center; gap: var(--kui-space-xs); padding-inline: var(--kui-space-xs); color: var(--kui-text-muted); font-size: var(--kui-font-size-sm); line-height: var(--kui-line-height-tight); white-space: nowrap; } .kui-input-group__affix:first-child { padding-inline-start: var(--kui-space-md); } .kui-input-group__affix:last-child { padding-inline-end: var(--kui-space-md); } .kui-input-group:has(> .kui-input:disabled) > .kui-input-group__affix { color: var(--kui-text-disabled); } .kui-input-group__affix > .kui-icon { width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); } .kui-input-group > .kui-button { flex: none; align-self: stretch; height: auto; margin: var(--kui-space-2xs); box-shadow: none; } .kui-input-group > .kui-button--icon { width: auto; aspect-ratio: 1; } } @layer kui.components { kui-option-list { display: block; } .kui-option-list { display: flex; flex-direction: column; justify-self: stretch; min-width: 0; max-height: 15rem; padding-block: var(--kui-space-xs); overflow-y: auto; border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface); } .kui-option-list > .kui-checkbox { display: flex; padding: var(--kui-space-sm) var(--kui-space-md); } .kui-option-list > .kui-checkbox:hover { background: var(--kui-surface-hover); } [data-kui-density='compact'] .kui-option-list:where(:not([data-kui-density='compact'] :is([data-kui-density='default'], [data-kui-density='comfortable']) *, :is([data-kui-density='default'], [data-kui-density='comfortable']))) > .kui-checkbox,
.kui-form--compact .kui-option-list > .kui-checkbox { padding-block: var(--kui-space-xs); } } @layer kui.components { .kui-multiselect { min-width: 0; } .kui-multiselect:not(.kui-field),
.kui-multiselect > .kui-dropdown { display: block; } .kui-toolbar .kui-multiselect { min-width: 12rem; } .kui-multiselect__trigger { display: flex; align-items: center; gap: var(--kui-space-sm); text-align: start; cursor: pointer; } .kui-multiselect__trigger:disabled { cursor: not-allowed; } .kui-multiselect__trigger[aria-disabled='true'],
.kui-multiselect__trigger[aria-disabled='true']:hover { border-color: var(--kui-border); background: var(--kui-surface-sunken); color: var(--kui-text-disabled); cursor: not-allowed; } .kui-multiselect__trigger::after { content: ''; flex: none; width: 0.45rem; height: 0.45rem; margin-inline: var(--kui-space-xs) 0.1rem; border-right: 1.5px solid var(--kui-text-muted); border-bottom: 1.5px solid var(--kui-text-muted); transform: translateY(-25%) rotate(45deg); } @media (prefers-reduced-motion: no-preference) { .kui-multiselect__trigger::after { transition: transform var(--kui-duration-fast) var(--kui-easing); } } .kui-multiselect__trigger[aria-expanded='true']::after { transform: translateY(25%) rotate(-135deg); } .kui-multiselect__trigger:is(:disabled, [aria-disabled='true'])::after { border-color: var(--kui-text-disabled); } .kui-multiselect__label { flex: none; color: var(--kui-text-muted); font-weight: var(--kui-font-weight-medium); } .kui-multiselect__summary { flex: 1 1 auto; width: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .kui-multiselect__summary:empty::before { content: attr(data-kui-placeholder); color: var(--kui-text-placeholder); } .kui-multiselect__trigger:is(:disabled, [aria-disabled='true']) > :is(.kui-multiselect__label, .kui-multiselect__summary),
.kui-multiselect__trigger:is(:disabled, [aria-disabled='true']) > .kui-multiselect__summary:empty::before { color: var(--kui-text-disabled); } .kui-multiselect .kui-popover__body { padding: 0; } .kui-multiselect__search { padding: var(--kui-space-sm) var(--kui-space-md); border-bottom: 1px solid var(--kui-border); } .kui-multiselect .kui-option-list { border: 0; border-radius: 0; } .kui-multiselect .kui-option-list:not(:has(> :not([hidden]))) { display: none; } .kui-multiselect__empty { margin: 0; padding: var(--kui-space-sm) var(--kui-space-md); color: var(--kui-text-muted); } .kui-multiselect .kui-popover__footer { gap: var(--kui-space-xs); } .kui-multiselect .kui-popover__footer > .kui-button--ghost { padding-inline: var(--kui-space-sm); } .kui-multiselect .kui-popover__footer > [data-kui-close] { margin-inline-start: auto; } } @layer kui.components { kui-date-range { display: block; } .kui-input:is([type='date'], [type='datetime-local'], [type='time']) { font-variant-numeric: tabular-nums; } .kui-input::-webkit-calendar-picker-indicator { padding: var(--kui-space-xs); margin-inline-end: calc(-1 * var(--kui-space-xs)); border-radius: var(--kui-radius-sm); cursor: pointer; } .kui-input:not(:disabled)::-webkit-calendar-picker-indicator:hover { background-color: var(--kui-surface-hover); } .kui-input:disabled::-webkit-calendar-picker-indicator { cursor: not-allowed; } .kui-input[readonly]::-webkit-calendar-picker-indicator { display: none; } .kui-input::-webkit-date-and-time-value { text-align: start; } .kui-date-range { gap: var(--kui-space-sm); } .kui-date-range__fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--kui-space-sm) var(--kui-space-md); justify-self: stretch; min-width: 0; } .kui-date-range__fields > .kui-field { flex: 1 1 11rem; max-width: 18rem; } .kui-date-range__fields > .kui-button { align-self: flex-end; } [data-kui-density='compact'] .kui-date-range__fields:where(:not([data-kui-density='compact'] :is([data-kui-density='default'], [data-kui-density='comfortable']) *, :is([data-kui-density='default'], [data-kui-density='comfortable']))),
.kui-form--compact .kui-date-range__fields,
.kui-toolbar .kui-date-range__fields { gap: var(--kui-space-sm); } } @layer kui.components { .kui-checkbox,
.kui-radio { display: inline-flex; align-items: flex-start; gap: var(--kui-space-sm); font-size: var(--kui-font-size-sm); line-height: 1.25rem; cursor: pointer; } .kui-checkbox > input,
.kui-radio > input,
input.kui-checkbox-input { appearance: none; display: inline-grid; place-content: center; flex: none; width: 1.5rem; height: 1.5rem; margin: -2px; border: 2px solid transparent; border-radius: calc(var(--kui-radius-sm) + 2px); background-color: var(--kui-surface); background-clip: padding-box; box-shadow: inset 0 0 0 2px var(--kui-border-strong); cursor: pointer; } @media (prefers-reduced-motion: no-preference) { .kui-checkbox > input,
    .kui-radio > input,
    input.kui-checkbox-input { transition:
            background-color var(--kui-duration-fast) var(--kui-easing),
            box-shadow var(--kui-duration-fast) var(--kui-easing); } } .kui-radio > input { border-radius: var(--kui-radius-full); } .kui-checkbox > input:focus-visible,
.kui-radio > input:focus-visible,
input.kui-checkbox-input:focus-visible,
.kui-choice-card > input:focus-visible { outline-offset: -2px; } .kui-checkbox > input:hover,
.kui-radio > input:hover,
input.kui-checkbox-input:hover { box-shadow: inset 0 0 0 2px var(--kui-border-hover); } .kui-checkbox > input:checked,
.kui-checkbox > input:indeterminate,
input.kui-checkbox-input:is(:checked, :indeterminate) { background-color: var(--kui-accent); box-shadow: inset 0 0 0 2px var(--kui-accent); } .kui-checkbox > input:checked::after,
input.kui-checkbox-input:checked::after { content: ''; width: 0.375rem; height: 0.6875rem; border: solid var(--kui-on-accent); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); } .kui-checkbox > input:indeterminate::after,
input.kui-checkbox-input:indeterminate::after { content: ''; width: 0.625rem; height: 2px; border: 0; background: var(--kui-on-accent); transform: none; } .kui-radio > input:checked { box-shadow: inset 0 0 0 2px var(--kui-accent); } .kui-radio > input:checked::after { content: ''; width: 0.625rem; height: 0.625rem; border-radius: var(--kui-radius-full); background: var(--kui-accent); } .kui-checkbox > input:disabled,
.kui-radio > input:disabled,
input.kui-checkbox-input:disabled { background-color: var(--kui-surface-sunken); box-shadow: inset 0 0 0 2px var(--kui-border); cursor: not-allowed; } .kui-checkbox > input:is(:checked, :indeterminate):disabled,
input.kui-checkbox-input:is(:checked, :indeterminate):disabled { background-color: var(--kui-text-disabled); box-shadow: inset 0 0 0 2px var(--kui-text-disabled); } .kui-checkbox:has(input:disabled),
.kui-radio:has(input:disabled) { color: var(--kui-text-disabled); cursor: not-allowed; } .kui-segmented { display: inline-flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; gap: var(--kui-space-2xs); padding: var(--kui-space-2xs); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface-sunken); } .kui-segmented > button,
.kui-segmented > label { position: relative; display: inline-flex; align-items: center; gap: var(--kui-space-xs); height: calc(var(--kui-control-height-sm) - 6px); padding: 0 var(--kui-space-md); border: 0; border-radius: var(--kui-radius-xs); background: transparent; color: var(--kui-text-muted); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-medium); white-space: nowrap; cursor: pointer; } .kui-segmented > :is(button, label) > .kui-icon { width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); } .kui-segmented > button:hover,
.kui-segmented > label:hover { color: var(--kui-text); } .kui-segmented > [aria-pressed='true'],
.kui-segmented > [aria-checked='true'],
.kui-segmented > label:has(input:checked) { background: var(--kui-surface); color: var(--kui-text); box-shadow: inset 0 0 0 1px var(--kui-border-strong); font-weight: var(--kui-font-weight-semibold); } .kui-segmented--block { display: flex; justify-self: stretch; } .kui-segmented--block > button,
.kui-segmented--block > label { flex: 1 1 0; justify-content: center; } .kui-segmented > label > input { position: absolute; opacity: 0; pointer-events: none; } .kui-segmented > label:focus-visible,
.kui-segmented > label:has(input:focus-visible:not([data-focus-visible='false'])) { outline: var(--kui-focus-width) solid var(--kui-focus); } .kui-segmented > button:is(:disabled, [aria-disabled='true']),
.kui-segmented > label:has(input:disabled) { color: var(--kui-text-disabled); cursor: not-allowed; } .kui-choice-card { position: relative; display: grid; gap: var(--kui-space-2xs); padding: var(--kui-space-md); padding-inline-start: 2.75rem; align-content: start; border: 1px solid var(--kui-border); border-radius: var(--kui-radius-md); background: var(--kui-surface); cursor: pointer; } .kui-choice-card:hover { border-color: var(--kui-border-hover); } .kui-choice-card > input { position: absolute; top: calc(var(--kui-space-md) - 2px); inset-inline-start: calc(var(--kui-space-md) - 2px); appearance: none; display: inline-grid; place-content: center; width: 1.5rem; height: 1.5rem; margin: 0; border: 2px solid transparent; border-radius: var(--kui-radius-full); background-color: var(--kui-surface); background-clip: padding-box; box-shadow: inset 0 0 0 2px var(--kui-border-strong); } .kui-choice-card > input[type='checkbox'] { border-radius: calc(var(--kui-radius-sm) + 2px); } .kui-choice-card > input:checked { box-shadow: inset 0 0 0 2px var(--kui-accent); } .kui-choice-card > input:checked::after { content: ''; width: 0.625rem; height: 0.625rem; border-radius: inherit; background: var(--kui-accent); } .kui-choice-card:has(input:checked) { border-color: var(--kui-indicator); box-shadow: inset 0 0 0 1px var(--kui-indicator); } .kui-choice-card:has(input:focus-visible) { outline: var(--kui-focus-width) solid var(--kui-focus); } .kui-choice-card:has(input:disabled) { background: var(--kui-surface-sunken); color: var(--kui-text-disabled); cursor: not-allowed; } .kui-choice-card__title { font-weight: var(--kui-font-weight-semibold); } .kui-choice-card__text { font-size: var(--kui-font-size-sm); color: var(--kui-text-muted); } .kui-choice-card:has(input:disabled) .kui-choice-card__text { color: var(--kui-text-disabled); } } @layer kui.components { .kui-switch { display: inline-flex; align-items: flex-start; gap: var(--kui-space-sm); font-size: var(--kui-font-size-sm); line-height: 1.25rem; cursor: pointer; } .kui-switch--block { display: flex; justify-content: space-between; gap: var(--kui-space-md); } .kui-switch > input,
input.kui-switch-input { appearance: none; display: inline-grid; align-items: center; flex: none; width: 2.75rem; height: 1.5rem; margin: -2px; border: 2px solid transparent; border-radius: var(--kui-radius-full); background-color: var(--kui-surface); background-clip: padding-box; box-shadow: inset 0 0 0 2px var(--kui-border-strong); cursor: pointer; } .kui-switch > input::before,
input.kui-switch-input::before { content: ''; width: 0.75rem; height: 0.75rem; margin-inline-start: var(--kui-space-xs); border-radius: var(--kui-radius-full); background-color: var(--kui-border-strong); } .kui-switch > input:focus-visible,
input.kui-switch-input:focus-visible { outline-offset: -2px; } .kui-switch > input:hover,
input.kui-switch-input:hover { box-shadow: inset 0 0 0 2px var(--kui-border-hover); } .kui-switch > input:checked,
input.kui-switch-input:checked { background-color: var(--kui-accent); box-shadow: inset 0 0 0 2px var(--kui-indicator); } .kui-switch > input:checked::before,
input.kui-switch-input:checked::before { margin-inline-start: calc(100% - 1rem); background-color: var(--kui-on-accent); } .kui-switch > input:checked:hover,
input.kui-switch-input:checked:hover { background-color: var(--kui-accent-hover); } .kui-switch > input[aria-invalid='true'],
input.kui-switch-input[aria-invalid='true'] { box-shadow: inset 0 0 0 2px var(--kui-danger-outline); } .kui-switch > input:disabled,
input.kui-switch-input:disabled { background-color: var(--kui-surface-sunken); box-shadow: inset 0 0 0 2px var(--kui-border); cursor: not-allowed; } .kui-switch > input:disabled::before,
input.kui-switch-input:disabled::before { background-color: var(--kui-text-disabled); } .kui-switch > input:checked:disabled,
input.kui-switch-input:checked:disabled { background-color: var(--kui-text-disabled); box-shadow: inset 0 0 0 2px var(--kui-text-disabled); } .kui-switch > input:checked:disabled::before,
input.kui-switch-input:checked:disabled::before { background-color: var(--kui-on-accent); } .kui-switch:has(input:disabled) { color: var(--kui-text-disabled); cursor: not-allowed; } @media (prefers-reduced-motion: no-preference) { .kui-switch > input,
    input.kui-switch-input { transition:
            background-color var(--kui-duration-fast) var(--kui-easing),
            box-shadow var(--kui-duration-fast) var(--kui-easing); } .kui-switch > input::before,
    input.kui-switch-input::before { transition:
            margin-inline-start var(--kui-duration-fast) var(--kui-easing),
            background-color var(--kui-duration-fast) var(--kui-easing); } } } @layer kui.components { .kui-slider { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; column-gap: var(--kui-space-md); } .kui-slider__value { grid-row: 1; grid-column: 2; min-width: 3rem; color: var(--kui-text); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; } .kui-slider-input { appearance: none; display: block; width: 100%; min-width: 0; height: 1.5rem; margin: 0; border-radius: var(--kui-radius-sm); background: transparent; cursor: pointer; } .kui-slider-input::-webkit-slider-runnable-track { height: 0.25rem; border-radius: var(--kui-radius-full); background: var(--kui-border-strong); } .kui-slider-input::-moz-range-track { height: 0.25rem; border-radius: var(--kui-radius-full); background: var(--kui-border-strong); } .kui-slider-input::-moz-range-progress { background: transparent; } .kui-slider-input::-webkit-slider-thumb { appearance: none; box-sizing: border-box; width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; border: 2px solid var(--kui-indicator); border-radius: var(--kui-radius-full); background: var(--kui-accent); } .kui-slider-input::-moz-range-thumb { box-sizing: border-box; width: 1.25rem; height: 1.25rem; border: 2px solid var(--kui-indicator); border-radius: var(--kui-radius-full); background: var(--kui-accent); } .kui-slider-input:hover::-webkit-slider-thumb { border-color: var(--kui-border-hover); background: var(--kui-accent-hover); } .kui-slider-input:hover::-moz-range-thumb { border-color: var(--kui-border-hover); background: var(--kui-accent-hover); } .kui-slider-input:disabled { cursor: not-allowed; } .kui-slider-input:disabled::-webkit-slider-runnable-track { background: var(--kui-border); } .kui-slider-input:disabled::-moz-range-track { background: var(--kui-border); } .kui-slider-input:disabled::-webkit-slider-thumb { border-color: var(--kui-text-disabled); background: var(--kui-text-disabled); } .kui-slider-input:disabled::-moz-range-thumb { border-color: var(--kui-text-disabled); background: var(--kui-text-disabled); } .kui-slider:has(> .kui-slider-input:disabled) > .kui-slider__value { color: var(--kui-text-muted); } .kui-slider__scale { display: flex; grid-column: 1; justify-content: space-between; padding-inline: 0.625rem; color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); font-variant-numeric: tabular-nums; } .kui-slider__scale > * { display: flex; flex-direction: column; align-items: center; width: 0; white-space: nowrap; } .kui-slider__scale > *::before { content: ''; width: 1px; height: 0.25rem; margin-bottom: var(--kui-space-2xs); background: var(--kui-border-strong); } } @layer kui.components { .kui-tabs { display: flex; gap: var(--kui-space-sm); overflow-x: auto; border-bottom: 1px solid var(--kui-border); scrollbar-width: thin; scrollbar-color: var(--kui-border-strong) var(--kui-surface-sunken); } .kui-row > .kui-tabs { flex: 1 1 auto; min-width: 0; } .kui-tabs > [role='tab'],
.kui-tabs > a,
.kui-tabs > button { position: relative; display: inline-flex; align-items: center; gap: var(--kui-space-sm); padding: var(--kui-space-sm); margin-bottom: var(--kui-space-xs); border: 0; border-radius: var(--kui-radius-sm); background: none; color: var(--kui-text-muted); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-medium); line-height: var(--kui-line-height-tight); text-decoration: none; white-space: nowrap; cursor: pointer; } .kui-tabs > :hover { background: var(--kui-surface-hover); color: var(--kui-text); } .kui-tabs > [aria-selected='true'],
.kui-tabs > [aria-current]:not([aria-current='false'], [aria-current='']),
.kui-tabs > [aria-pressed='true'] { color: var(--kui-text); } .kui-tabs > [aria-selected='true']::after,
.kui-tabs > [aria-current]:not([aria-current='false'], [aria-current=''])::after,
.kui-tabs > [aria-pressed='true']::after { content: ''; position: absolute; inset: auto 0 calc(-1 * var(--kui-space-xs) - 1px) 0; height: var(--kui-indicator-width); background: var(--kui-indicator); } .kui-tabs > * > .kui-icon { width: var(--kui-icon-size-md); height: var(--kui-icon-size-md); } .kui-tabs__count { padding: 0 0.375rem; border-radius: var(--kui-radius-full); background: var(--kui-surface-active); color: var(--kui-text); font-size: var(--kui-font-size-xs); line-height: var(--kui-line-height); font-variant-numeric: tabular-nums; } [aria-selected='true'] > .kui-tabs__count,
.kui-tabs > [aria-pressed='true'] > .kui-tabs__count,
[aria-current]:not([aria-current='false'], [aria-current='']) > .kui-tabs__count { background: var(--kui-surface-inverse); color: var(--kui-text-inverse); } .kui-tab-panel { padding-top: var(--kui-space-md); } :where(.kui-dialog, .kui-dialog > form, .kui-stack) > .kui-tabs { flex-shrink: 0; } .kui-tabs > :focus-visible { outline-offset: calc(-1 * var(--kui-focus-width)); } .kui-tabs > :disabled,
.kui-tabs > [aria-disabled='true'] { background: none; color: var(--kui-text-disabled); cursor: not-allowed; } .kui-tabs[aria-orientation='vertical'] { flex-direction: column; align-items: stretch; overflow: visible; border-bottom: 0; border-inline-start: 1px solid var(--kui-border); } .kui-tabs[aria-orientation='vertical'] > * { margin-bottom: 0; margin-inline-start: var(--kui-space-xs); } .kui-tabs[aria-orientation='vertical'] > [aria-selected='true']::after { inset-block: 0; inset-inline: calc(-1 * var(--kui-space-xs) - 1px) auto; width: var(--kui-indicator-width); height: auto; } } @layer kui.components { .kui-steps { display: flex; gap: var(--kui-space-sm); margin: 0; padding: 0; list-style: none; counter-reset: kui-step; font-size: var(--kui-font-size-sm); } .kui-steps > li { display: flex; flex: 1 1 0; align-items: center; gap: var(--kui-space-sm); min-width: 0; counter-increment: kui-step; color: var(--kui-text-muted); } .kui-steps > li:last-child { flex: 0 1 auto; } .kui-steps > li:not(:last-child)::after { content: ''; flex: 1 1 1rem; min-width: 1rem; height: 2px; border-radius: var(--kui-radius-full); background: var(--kui-border-strong); } .kui-steps__label { flex: 0 1 auto; overflow-wrap: break-word; } .kui-steps__marker { display: inline-grid; place-items: center; flex: none; box-sizing: border-box; width: 1.5rem; height: 1.5rem; border: 2px solid var(--kui-border-strong); border-radius: var(--kui-radius-full); background: var(--kui-surface); color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); font-weight: var(--kui-font-weight-semibold); font-variant-numeric: tabular-nums; line-height: var(--kui-line-height-tight); } .kui-steps__marker::before { content: counter(kui-step); } .kui-steps > [aria-current='step'] { color: var(--kui-text); } .kui-steps > [aria-current='step'] > .kui-steps__label { font-weight: var(--kui-font-weight-semibold); } .kui-steps > [aria-current='step'] > .kui-steps__marker { border-color: var(--kui-indicator); color: var(--kui-text); } .kui-steps > li:has(~ [aria-current='step']) { color: var(--kui-text); } .kui-steps > li:has(~ [aria-current='step'])::after { background: var(--kui-indicator); } .kui-steps > li:has(~ [aria-current='step']) > .kui-steps__marker { border-color: var(--kui-indicator); background: var(--kui-accent); } .kui-steps > li:has(~ [aria-current='step']) > .kui-steps__marker::before { content: ''; width: 0.3125rem; height: 0.5625rem; border: solid var(--kui-on-accent); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); } .kui-steps--vertical { flex-direction: column; gap: 0; } .kui-steps--vertical > li,
.kui-steps--vertical > li:last-child { position: relative; flex: none; align-items: flex-start; padding-block-end: var(--kui-space-md); } .kui-steps--vertical > li:last-child { padding-block-end: 0; } .kui-steps--vertical > li:not(:last-child)::after { position: absolute; inset-block: calc(1.5rem + var(--kui-space-2xs)) var(--kui-space-2xs); inset-inline-start: calc(0.75rem - 1px); width: 2px; height: auto; min-width: 0; } .kui-steps--vertical .kui-steps__label { padding-block: var(--kui-space-2xs); } @media (width < 37.5em) { .kui-steps { flex-direction: column; gap: 0; } .kui-steps > li,
    .kui-steps > li:last-child { position: relative; flex: none; align-items: flex-start; padding-block-end: var(--kui-space-md); } .kui-steps > li:last-child { padding-block-end: 0; } .kui-steps > li:not(:last-child)::after { position: absolute; inset-block: calc(1.5rem + var(--kui-space-2xs)) var(--kui-space-2xs); inset-inline-start: calc(0.75rem - 1px); width: 2px; height: auto; min-width: 0; } .kui-steps__label { padding-block: var(--kui-space-2xs); } } } @layer kui.components { kui-table{display: block;min-width: 0}.kui-table-box{position: relative;max-width: 100%;overflow-x: auto;border: 1px solid var(--kui-border);border-radius: var(--kui-radius-sm);background: var(--kui-surface)}.kui-table{width: 100%;border-collapse: separate;border-spacing: 0;font-size: var(--kui-font-size-sm);font-variant-numeric: tabular-nums}.kui-table caption{padding: var(--kui-space-md);caption-side: top;text-align: start;font-weight: var(--kui-font-weight-semibold)}.kui-table th{height: var(--kui-table-header-height);padding: 0 var(--kui-space-md);background: var(--kui-surface);color: var(--kui-text-muted);font-weight: var(--kui-font-weight-regular);text-align: start;white-space: nowrap;vertical-align: middle}.kui-table td{height: var(--kui-table-row-height);padding: var(--kui-space-xs) var(--kui-space-md);border-top: 1px solid var(--kui-border);color: var(--kui-text-muted);vertical-align: middle}.kui-table tbody tr:hover>td,.kui-table tbody tr[aria-selected=true]>td{background: var(--kui-surface-hover)}.kui-table tbody tr[aria-selected=true]>td:first-child{box-shadow: inset var(--kui-indicator-width) 0 0 var(--kui-indicator)}.kui-table tbody tr[aria-selected=true]>td:first-child:dir(rtl){box-shadow: inset calc(-1 * var(--kui-indicator-width)) 0 0 var(--kui-indicator)}.kui-table:where([data-kui-density=compact],[data-kui-density=compact] *):where(:not([data-kui-density=compact] :is([data-kui-density=default],[data-kui-density=comfortable]) *,:is([data-kui-density=default],[data-kui-density=comfortable]))) th,.kui-table:where([data-kui-density=compact],[data-kui-density=compact] *):where(:not([data-kui-density=compact] :is([data-kui-density=default],[data-kui-density=comfortable]) *,:is([data-kui-density=default],[data-kui-density=comfortable]))) td,.kui-table--compact th,.kui-table--compact td{height: var(--kui-row-height-compact)}.kui-table--static tbody tr:hover>td{background: none}.kui-table th.kui-num,.kui-table td.kui-num{text-align: end}.kui-table th.kui-table__mark,.kui-table td.kui-table__mark{text-align: center}.kui-table td.kui-truncate{max-width: 20rem}.kui-table .kui-mono,.kui-table time,.kui-table .kui-chip{white-space: nowrap;overflow-wrap: normal}.kui-table__select{width: 1%}.kui-table__actions{width: 1%;text-align: end;white-space: nowrap}.kui-table__primary{color: var(--kui-text);font-weight: var(--kui-font-weight-medium)}.kui-table a{color: var(--kui-text-muted);font-weight: var(--kui-font-weight-regular);text-decoration: none}.kui-table :is(.kui-table__primary a,a.kui-table__row-link){color: var(--kui-text);font-weight: var(--kui-font-weight-medium)}.kui-table a:hover{color: var(--kui-link-hover);text-decoration: underline}.kui-table__sub{display: block;font-size: var(--kui-font-size-xs);color: var(--kui-text-muted)}.kui-table__detail>td{padding: var(--kui-space-md);background: var(--kui-surface-sunken)}.kui-table tbody tr.kui-table__detail:hover>td{background: var(--kui-surface-sunken)}.kui-table__empty>td{padding: var(--kui-space-2xl) var(--kui-space-md);color: var(--kui-text-muted);text-align: center}@media(width<45em){.kui-table--stack,.kui-table--stack>caption,.kui-table--stack>tbody,.kui-table--stack>tbody>tr,.kui-table--stack>tbody>tr>td{display: block}.kui-table--stack>thead{display: none}.kui-table--stack>tbody>tr{padding: var(--kui-space-sm) var(--kui-space-md)}.kui-table--stack>tbody>tr+tr{border-top: 1px solid var(--kui-border)}.kui-table.kui-table--stack>tbody>tr>td{height: auto;padding: var(--kui-space-2xs) 0;border-top: 0;background: none;text-align: start}.kui-table.kui-table--stack>tbody>tr[aria-selected=true]>td:first-child:is(:dir(ltr),:dir(rtl)){box-shadow: none}.kui-table--stack>tbody>tr>td[data-label]::before{content: attr(data-label);display: block;color: var(--kui-text-muted);font-family: var(--kui-font-sans);font-size: var(--kui-font-size-xs);font-weight: var(--kui-font-weight-regular)}.kui-table--stack>tbody>tr>td:is(.kui-table__select,.kui-table__actions){width: auto;padding-top: var(--kui-space-xs)}.kui-table--stack>tbody>tr:is(:hover,[aria-selected=true]){background: var(--kui-surface-hover)}.kui-table--static.kui-table--stack>tbody>tr:hover:not([aria-selected=true]),.kui-table--stack>tbody>tr:is(.kui-table__detail,.kui-table__empty){background: none}.kui-table--stack>tbody>tr[aria-selected=true]{box-shadow: inset var(--kui-indicator-width) 0 0 var(--kui-indicator)}.kui-table--stack>tbody>tr[aria-selected=true]:dir(rtl){box-shadow: inset calc(-1 * var(--kui-indicator-width)) 0 0 var(--kui-indicator)}.kui-table--stack>tbody>tr.kui-table__detail{background: var(--kui-surface-sunken)}.kui-table.kui-table--stack>tbody>tr.kui-table__empty>td{padding: var(--kui-space-xl) 0;text-align: center}}.kui-sort{display: inline-flex;align-items: center;gap: var(--kui-space-xs);min-height: 1.5rem;padding: 0;border: 0;background: none;color: inherit;font: inherit;cursor: pointer}.kui-sort:hover{color: var(--kui-text)}.kui-sort::after{content: "";width: 0;height: 0;border-inline: 4px solid transparent;border-top: 5px solid currentColor;opacity: 0}.kui-sort:hover::after,.kui-sort:focus-visible::after{opacity: 0.35}[aria-sort=ascending]>.kui-sort::after{border-top: 0;border-bottom: 5px solid currentColor;opacity: 1}[aria-sort=descending]>.kui-sort::after{opacity: 1}.kui-table-box--sticky{max-block-size: 32rem;overflow: auto;scroll-padding-block-start: calc(var(--kui-table-header-height) + var(--kui-space-sm))}.kui-table-box--sticky>.kui-table>thead>tr>th{position: sticky;inset-block-start: 0;z-index: var(--kui-z-sticky)}.kui-table-box__sort{display: none;align-items: center;gap: var(--kui-space-sm);padding: var(--kui-space-md)}@media(width<45em){.kui-table-box__sort{display: flex}}.kui-table:where([data-kui-density=comfortable],[data-kui-density=comfortable] *):where(:not([data-kui-density=comfortable] :is([data-kui-density=default],[data-kui-density=compact]) *,:is([data-kui-density=default],[data-kui-density=compact]))) td{height: var(--kui-row-height)}.kui-table:where([data-kui-density=comfortable],[data-kui-density=comfortable] *):where(:not([data-kui-density=comfortable] :is([data-kui-density=default],[data-kui-density=compact]) *,:is([data-kui-density=default],[data-kui-density=compact]))) th{height: var(--kui-control-height-lg)}th:has(>.kui-data-table__resize){position: relative;padding-inline-end: 1.5rem}.kui-data-table__resize{position: absolute;inset-block: 0;inset-inline-end: 0;inline-size: 1.5rem;cursor: col-resize;touch-action: none;user-select: none;border-inline-end: 1px solid var(--kui-border);opacity: 0}.kui-data-table__resize:focus-visible{outline-offset: calc(-1 * var(--kui-focus-width))}thead:is(:hover,:focus-within) .kui-data-table__resize{opacity: 1} } @layer kui.components { .kui-table__row-link[href]{display:inline-flex;align-items:center;min-block-size:var(--kui-space-lg)}.kui-data-table__title a[href]{display:block;overflow:hidden;text-overflow:ellipsis;outline-offset:calc(-1 * var(--kui-focus-width))}.kui-table--row-links>tbody>tr:has(.kui-table__row-link[href]){position:relative;cursor:pointer}.kui-table--row-links>tbody>tr:has(.kui-table__row-link[href]):is(:hover,:focus-within),.kui-table--row-links>tbody>tr:has(.kui-table__row-link[href]):is(:hover,:focus-within)>td{background:var(--kui-surface-hover)}.kui-table--row-links td:has(.kui-table__row-link[href]){position:static}.kui-table--row-links .kui-table__row-link[href]::after{content:"";position:absolute;inset:0;z-index:1;cursor:pointer}.kui-table--row-links>tbody>tr:has(.kui-table__row-link[href]) :where(button,input,select,textarea,label,summary,a[href]:not(.kui-table__row-link),.kui-table__lift){position:relative;z-index:2}.kui-table--row-links .kui-table__lift{cursor:text;user-select:text}.kui-table--row-links .kui-dropdown>.kui-menu{z-index:var(--kui-z-raised)} } @layer kui.components { .kui-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-sm) var(--kui-space-md); padding-block: var(--kui-space-md); color: var(--kui-text-muted); font-size: var(--kui-font-size-sm); } .kui-pagination__status { margin: 0; margin-inline-end: auto; font-variant-numeric: tabular-nums; } .kui-pagination__size { display: inline-flex; align-items: center; gap: var(--kui-space-sm); white-space: nowrap; } .kui-pagination__buttons { display: flex; gap: var(--kui-space-sm); } @media (width < 37.5em) { .kui-pagination__buttons { flex-basis: 100%; } .kui-pagination__buttons > .kui-button { flex: 1; } } } @layer kui.components { .kui-facts { container-type: inline-size; display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: var(--kui-space-sm) var(--kui-space-lg); margin: 0; font-size: var(--kui-font-size-sm); } .kui-facts dt { color: var(--kui-text-muted); font-weight: var(--kui-font-weight-medium); } .kui-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; } .kui-facts--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--kui-space-md); } .kui-facts--grid > div { display: grid; gap: var(--kui-space-2xs); align-content: start; } .kui-facts--grid dd { font-weight: var(--kui-font-weight-medium); } @media (width < 37.5em) { .kui-facts:not(.kui-facts--grid) { grid-template-columns: minmax(0, 1fr); gap: 0; } .kui-facts:not(.kui-facts--grid) dd + dt { margin-top: var(--kui-space-sm); } } .kui-stat { display: grid; gap: var(--kui-space-xs); align-content: start; min-width: 0; overflow-wrap: anywhere; } .kui-stat__label { font-size: var(--kui-font-size-xs); font-weight: var(--kui-font-weight-semibold); letter-spacing: var(--kui-letter-spacing-caps); text-transform: uppercase; color: var(--kui-text-muted); } .kui-stat__value { font-size: var(--kui-font-size-2xl); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-tight); letter-spacing: var(--kui-letter-spacing-title); font-variant-numeric: tabular-nums; } .kui-stat__meta { font-size: var(--kui-font-size-sm); color: var(--kui-text-muted); } .kui-stat[aria-busy='true'] > :is(.kui-stat__label, .kui-stat__value, .kui-stat__meta):empty { display: block; box-sizing: border-box; height: 1lh; padding-block: 0.2lh; border-radius: var(--kui-radius-sm); background: var(--kui-surface-active); background-clip: content-box; } .kui-stat[aria-busy='true'] > .kui-stat__label:empty { width: 40%; } .kui-stat[aria-busy='true'] > .kui-stat__value:empty { width: 65%; } .kui-stat[aria-busy='true'] > .kui-stat__meta:empty { width: 50%; } @media (prefers-reduced-motion: no-preference) { .kui-stat[aria-busy='true'] > :is(.kui-stat__label, .kui-stat__value, .kui-stat__meta):empty { animation: kui-pulse 1s 300ms ease-in-out infinite alternate; } } @container (width < 24rem) { .kui-facts:not(.kui-facts--grid) > :is(dt, dd) { grid-column: 1 / -1; } .kui-facts:not(.kui-facts--grid) dd + dt { margin-top: var(--kui-space-sm); } } } @layer kui.components { .kui-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kui-space-md); align-content: start; min-width: 0; padding: var(--kui-space-md); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-md); background: var(--kui-surface); } @media (width >= 45em) { .kui-card--roomy { padding: var(--kui-space-lg); } } .kui-card--flush { padding: 0; overflow: hidden; } .kui-card--flush > .kui-card__header { padding: var(--kui-space-md) var(--kui-space-md) 0; } .kui-card--flush > .kui-card__footer { padding: var(--kui-space-md); } .kui-card--sunken { background: var(--kui-surface-sunken); } .kui-card--interactive { cursor: pointer; } @media (prefers-reduced-motion: no-preference) { .kui-card--interactive { transition: border-color var(--kui-duration-fast) var(--kui-easing); } } .kui-card--interactive:hover { border-color: var(--kui-border-strong); } .kui-card__header,
.kui-card__title,
.kui-card__actions,
.kui-card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-sm); } .kui-card__header:has(.kui-card__meta) { align-items: baseline; } .kui-card > :is(.kui-badge, .kui-button:not(.kui-button--block), a) { justify-self: start; } .kui-card__actions > :last-child.kui-button--ghost:not(.kui-button--icon) { margin-inline-end: calc(-1 * var(--kui-space-md)); } .kui-card__heading { display: grid; gap: var(--kui-space-2xs); min-width: 0; } .kui-card__title { font-size: var(--kui-font-size-md); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height); letter-spacing: var(--kui-letter-spacing-title-sm); } .kui-card__meta { font-size: var(--kui-font-size-sm); color: var(--kui-text-muted); } .kui-card__footer { justify-content: flex-end; padding-top: var(--kui-space-md); border-top: 1px solid var(--kui-border); } .kui-card__footer--start { justify-content: flex-start; } .kui-card__header,
.kui-card__footer--between { justify-content: space-between; } } @layer kui.components { .kui-accordion { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-md); background: var(--kui-surface); } .kui-accordion > * + * { border-top: 1px solid var(--kui-border); } .kui-expander { min-width: 0; } .kui-expander__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--kui-space-2xs) var(--kui-space-sm); min-height: var(--kui-control-height-sm); margin-inline: calc(-1 * var(--kui-space-sm)); padding: var(--kui-space-xs) var(--kui-space-sm); border-radius: var(--kui-radius-sm); color: var(--kui-text); font-size: var(--kui-font-size-sm); list-style: none; cursor: pointer; } .kui-expander__summary::-webkit-details-marker { display: none; } .kui-expander__summary:hover { background: var(--kui-surface-hover); } .kui-expander__title { display: flex; flex-wrap: wrap; grid-column: 1; align-items: center; gap: var(--kui-space-sm); min-width: 0; font-weight: var(--kui-font-weight-semibold); overflow-wrap: anywhere; } .kui-expander__description { grid-column: 1; min-width: 0; color: var(--kui-text-muted); overflow-wrap: anywhere; } .kui-expander__chevron { grid-row: 1; grid-column: 2; width: var(--kui-icon-size-md); height: var(--kui-icon-size-md); color: var(--kui-text-muted); } .kui-expander[open] > .kui-expander__summary > .kui-expander__chevron { transform: rotate(180deg); } @media (prefers-reduced-motion: no-preference) { .kui-expander__chevron { transition: transform var(--kui-duration) var(--kui-easing); } } .kui-expander__body { min-width: 0; padding-block: var(--kui-space-sm) var(--kui-space-md); } .kui-expander__summary[aria-disabled='true'] { color: var(--kui-text-disabled); cursor: not-allowed; } .kui-expander__summary[aria-disabled='true']:hover { background: none; } .kui-expander__summary[aria-disabled='true'][tabindex='-1'] { pointer-events: none; } .kui-expander__summary[aria-disabled='true'] > .kui-expander__chevron { color: var(--kui-text-disabled); } .kui-accordion > .kui-expander > .kui-expander__summary { min-height: var(--kui-control-height); margin-inline: 0; padding: var(--kui-space-sm) var(--kui-space-md); border-radius: 0; } .kui-accordion > .kui-expander > .kui-expander__summary:focus-visible { outline-offset: calc(-1 * var(--kui-focus-width)); } .kui-accordion > .kui-expander:first-child > .kui-expander__summary { border-start-start-radius: calc(var(--kui-radius-md) - 1px); border-start-end-radius: calc(var(--kui-radius-md) - 1px); } .kui-accordion > .kui-expander:last-child:not([open]) > .kui-expander__summary { border-end-start-radius: calc(var(--kui-radius-md) - 1px); border-end-end-radius: calc(var(--kui-radius-md) - 1px); } .kui-accordion > .kui-expander > .kui-expander__summary > .kui-expander__title { font-size: var(--kui-font-size-md); } .kui-accordion > .kui-expander > .kui-expander__body { padding: var(--kui-space-xs) var(--kui-space-md) var(--kui-space-md); } } @layer kui.components { .kui-tree,
.kui-tree__group { margin: 0; padding: 0; list-style: none; } .kui-tree { font-size: var(--kui-font-size-sm); } .kui-tree__group { margin-inline-start: calc(var(--kui-space-xs) + 0.625rem - 0.5px); padding-inline-start: calc(0.625rem + var(--kui-space-sm) - var(--kui-space-xs) - 0.5px); border-inline-start: 1px solid var(--kui-border); } .kui-tree__row { display: flex; align-items: center; gap: var(--kui-space-sm); min-height: var(--kui-control-height-sm); padding: var(--kui-space-2xs) var(--kui-space-xs); border-radius: var(--kui-radius-sm); color: var(--kui-text); overflow-wrap: anywhere; } div.kui-tree__row { padding-inline-start: calc(var(--kui-space-xs) + var(--kui-icon-size-md) + var(--kui-space-sm)); } summary.kui-tree__row { list-style: none; cursor: pointer; } summary.kui-tree__row::-webkit-details-marker { display: none; } summary.kui-tree__row:hover { background: var(--kui-surface-hover); } .kui-tree__chevron { flex: none; width: var(--kui-icon-size-md); height: var(--kui-icon-size-md); color: var(--kui-text-muted); transform: rotate(-90deg); } .kui-tree__chevron:dir(rtl) { transform: rotate(90deg); } .kui-tree__branch[open] > summary > .kui-tree__chevron { transform: none; } @media (prefers-reduced-motion: no-preference) { .kui-tree__chevron { transition: transform var(--kui-duration) var(--kui-easing); } } } @layer kui.components { .kui-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--kui-space-sm) var(--kui-space-md); padding: var(--kui-space-md); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface-sunken); color: var(--kui-text); font-size: var(--kui-font-size-sm); } .kui-banner > .kui-icon { width: var(--kui-icon-size); height: var(--kui-icon-size); } .kui-banner > :not(.kui-icon):first-child { grid-column: 1 / 3; } .kui-banner__title { display: block; margin-bottom: var(--kui-space-xs); font-weight: var(--kui-font-weight-semibold); } .kui-banner__actions { display: flex; flex-wrap: wrap; gap: var(--kui-space-sm); margin-top: var(--kui-space-sm); } .kui-banner__actions:not(:has(*)) { display: none; } .kui-banner ul { margin: var(--kui-space-xs) 0 0; padding-inline-start: var(--kui-space-lg); } .kui-banner .kui-button--ghost { color: inherit; } .kui-banner--info { background: var(--kui-info-tint); border-color: var(--kui-info-border); } .kui-banner--info > .kui-icon { color: var(--kui-info); } .kui-banner--success,
.kui-banner--ok { background: var(--kui-ok-tint); border-color: var(--kui-ok-border); } .kui-banner--success > .kui-icon,
.kui-banner--ok > .kui-icon { color: var(--kui-ok); } .kui-banner--warning,
.kui-banner--warn { background: var(--kui-warn-tint); border-color: var(--kui-warn-border); } .kui-banner--warning > .kui-icon,
.kui-banner--warn > .kui-icon { color: var(--kui-warn); } .kui-banner--error,
.kui-banner--danger { background: var(--kui-danger-tint); border-color: var(--kui-danger-border); } .kui-banner--error > .kui-icon,
.kui-banner--danger > .kui-icon { color: var(--kui-danger); } .kui-banner:where([data-kui-density='compact'], [data-kui-density='compact'] *):where(:not([data-kui-density='compact'] :is([data-kui-density='default'], [data-kui-density='comfortable']) *, :is([data-kui-density='default'], [data-kui-density='comfortable']))),
.kui-banner--compact { padding: var(--kui-space-sm) var(--kui-space-md); align-items: center; } .kui-banner:where([data-kui-density='compact'], [data-kui-density='compact'] *):where(:not([data-kui-density='compact'] :is([data-kui-density='default'], [data-kui-density='comfortable']) *, :is([data-kui-density='default'], [data-kui-density='comfortable']))) > .kui-icon,
.kui-banner--compact > .kui-icon { width: var(--kui-icon-size-md); height: var(--kui-icon-size-md); } .kui-banner:not(:has(.kui-banner__title, .kui-banner__actions > *, ul)) { align-items: center; } } @layer kui.components { .kui-action-bar:not([hidden]) { position: sticky; bottom: var(--kui-space-md); z-index: var(--kui-z-sticky); display: flex; flex-direction: column; gap: var(--kui-space-sm); min-width: 0; } .kui-action-bar__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-sm) var(--kui-space-md); box-sizing: border-box; min-width: 0; padding: var(--kui-space-sm) var(--kui-space-md); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-md); background: var(--kui-surface); color: var(--kui-text); box-shadow: var(--kui-shadow-high); } .kui-action-bar__count { display: inline-grid; place-items: center; flex: none; box-sizing: border-box; min-width: var(--kui-control-height-sm); height: var(--kui-control-height-sm); padding: 0 var(--kui-space-xs); border-radius: var(--kui-radius-full); background: var(--kui-accent); color: var(--kui-on-accent); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-tight); font-variant-numeric: tabular-nums; } .kui-action-bar__text { display: flex; flex: 1 1 14rem; flex-direction: column; gap: var(--kui-space-2xs); min-width: 0; } .kui-action-bar__title { margin: 0; color: var(--kui-text); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-tight); overflow-wrap: anywhere; } .kui-action-bar__description { margin: 0; color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); line-height: var(--kui-line-height); overflow-wrap: anywhere; } .kui-action-bar__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--kui-space-sm); margin-inline-start: auto; max-width: 100%; } .kui-action-bar__actions > .kui-button { flex: none; } html:has(.kui-action-bar:not([hidden]):not([data-kui-sticky='false'])) { scroll-padding-block-end: calc(var(--kui-control-height) + 2 * var(--kui-space-sm) + 2px + var(--kui-space-md) + var(--kui-space-sm)); } html:has(.kui-action-bar:not([hidden]):not([data-kui-sticky='false']) .kui-banner) { scroll-padding-block-end: calc(var(--kui-control-height) + 2 * var(--kui-space-sm) + 2px + var(--kui-space-md) + var(--kui-space-sm) + var(--kui-font-size-sm) * var(--kui-line-height) + 3 * var(--kui-space-sm) + 2px); } @media (width < 37.5em) { .kui-action-bar:not([hidden]) { bottom: var(--kui-space-sm); } .kui-action-bar__body { gap: var(--kui-space-sm); } .kui-action-bar__text { flex-basis: 0; } .kui-action-bar__actions { flex: 1 1 100%; } html:has(.kui-action-bar:not([hidden]):not([data-kui-sticky='false'])) { scroll-padding-block-end: calc(var(--kui-control-height) + var(--kui-control-height-sm) + 3 * var(--kui-space-sm) + 2px + var(--kui-space-sm) + var(--kui-space-sm)); } html:has(.kui-action-bar:not([hidden]):not([data-kui-sticky='false']) .kui-banner) { scroll-padding-block-end: calc(var(--kui-control-height) + var(--kui-control-height-sm) + 3 * var(--kui-space-sm) + 2px + var(--kui-space-sm) + var(--kui-space-sm) + 2 * var(--kui-font-size-sm) * var(--kui-line-height) + 3 * var(--kui-space-sm) + 2px); } } @media (max-height: 30rem) { .kui-action-bar:not([hidden]) { position: static; } html:has(.kui-action-bar:not([hidden]):not([data-kui-sticky='false'])),
    html:has(.kui-action-bar:not([hidden]):not([data-kui-sticky='false']) .kui-banner) { scroll-padding-block-end: auto; } } .kui-action-bar:not([hidden])[data-kui-sticky='false'] { position: static; } } @layer kui.components { .kui-error-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--kui-space-xs) var(--kui-space-md); padding: var(--kui-space-md); border: 1px solid var(--kui-danger-border); border-radius: var(--kui-radius-sm); background: var(--kui-danger-tint); color: var(--kui-text); font-size: var(--kui-font-size-sm); } .kui-error-summary[hidden] { display: none; } .kui-error-summary:focus { outline: var(--kui-focus-width) solid var(--kui-focus); outline-offset: 2px; } .kui-error-summary > .kui-icon { grid-row: span 2; width: var(--kui-icon-size); height: var(--kui-icon-size); color: var(--kui-danger); } .kui-error-summary__title { margin: 0; font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height); } .kui-error-summary__list { display: grid; gap: var(--kui-space-xs); margin: 0; padding: 0; list-style: none; } .kui-error-summary__list a { color: var(--kui-text); text-decoration: underline; text-underline-offset: 2px; }} @layer kui.components { .kui-dialog { width: min(35rem, calc(100vw - 2 * var(--kui-space-md))); margin-block: var(--kui-space-xl) auto; max-height: calc(100svh - 2 * var(--kui-space-xl)); overflow: visible; padding: 0; border: 1px solid var(--kui-border); border-radius: var(--kui-radius-md); background: var(--kui-surface); color: var(--kui-text); box-shadow: var(--kui-shadow-high); } .kui-dialog[open],
.kui-dialog--static { display: flex; flex-direction: column; } .kui-dialog--static { position: static; margin: 0; max-width: 100%; } .kui-dialog > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .kui-dialog::backdrop { background: var(--kui-scrim); } .kui-dialog--sm { width: min(22.5rem, calc(100vw - 2 * var(--kui-space-md))); } .kui-dialog--lg { width: min(50rem, calc(100vw - 2 * var(--kui-space-md))); } .kui-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kui-space-md); padding: var(--kui-space-lg); } .kui-dialog__title { font-size: var(--kui-font-size-2xl); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-title-md); letter-spacing: var(--kui-letter-spacing-title); } .kui-dialog__description { margin-top: var(--kui-space-sm); overflow-wrap: anywhere; color: var(--kui-text-muted); font-size: var(--kui-font-size-sm); } .kui-dialog__header > .kui-button { flex: none; margin-block: calc(-1 * var(--kui-space-xs)) 0; margin-inline: 0 calc(-1 * var(--kui-space-sm)); } .kui-dialog__body { display: grid; gap: var(--kui-space-md); align-content: start; flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow-y: auto; padding: var(--kui-focus-width) var(--kui-space-lg); margin-block: calc(-1 * var(--kui-focus-width)); font-size: var(--kui-font-size-sm); } .kui-dialog__body > :is([role='alert'], [role='status'], [aria-live]):empty { position: absolute; } .kui-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--kui-space-md); padding: var(--kui-space-lg); } .kui-dialog__actions:not(:has(*)) { padding-block-start: 0; } :is(.kui-dialog__header, .kui-dialog--drawer .kui-dialog__body) + .kui-dialog__actions:not(:has(*)) { display: none; } .kui-dialog__actions--between { justify-content: space-between; } .kui-dialog:not(.kui-dialog--drawer)
    :is(
        .kui-dialog__header,
        .kui-dialog__body:empty,
        .kui-dialog__body:has(> :is([role='alert'], [role='status'], [aria-live]):empty):not(
                :has(> :not(:is([role='alert'], [role='status'], [aria-live]):empty))
            )
    )
    + .kui-dialog__actions { padding-top: 0; } .kui-dialog--drawer { width: min(40rem, 100vw); height: 100dvh; max-width: 100vw; max-height: 100dvh; margin-block: 0; margin-inline: auto 0; border-width: 0; border-inline-start-width: 1px; border-radius: 0; } .kui-dialog--drawer.kui-dialog--lg { width: min(52rem, 100vw); } .kui-dialog--drawer > .kui-dialog__header { border-bottom: 1px solid var(--kui-border); } .kui-dialog--drawer > .kui-dialog__body { padding-block: var(--kui-space-lg); margin-block: 0; } .kui-dialog--drawer > .kui-dialog__actions { border-top: 1px solid var(--kui-border); } .kui-dialog--drawer.kui-dialog--static { height: auto; max-height: none; } @media (prefers-reduced-motion: no-preference) { .kui-dialog[open] { animation: kui-dialog-in var(--kui-duration) var(--kui-easing); } .kui-dialog--drawer[open] { animation-name: kui-drawer-in; } .kui-dialog--drawer[open]:dir(rtl) { animation-name: kui-drawer-in-rtl; } } @keyframes kui-dialog-in { from { opacity: 0; transform: translateY(0.5rem); } } @keyframes kui-drawer-in { from { transform: translateX(2rem); opacity: 0; } } @keyframes kui-drawer-in-rtl { from { transform: translateX(-2rem); opacity: 0; } } .kui-dialog :is(h1, h2, h3, h4, h5, h6)[tabindex='-1']:focus { outline: none; } } @layer kui.components { .kui-menu { min-width: 15rem; line-height: var(--kui-line-height); margin: 0; padding: var(--kui-space-sm) 0; list-style: none; border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface); color: var(--kui-text); box-shadow: var(--kui-shadow-high); } .kui-menu__item { display: flex; align-items: center; gap: var(--kui-space-sm); width: 100%; padding: var(--kui-space-sm) var(--kui-space-md); border: 0; background: none; color: var(--kui-text); font-size: var(--kui-font-size-sm); text-align: start; text-decoration: none; cursor: pointer; } .kui-menu__item:hover { background: var(--kui-surface-hover); color: var(--kui-text); } .kui-menu__item:disabled { color: var(--kui-text-disabled); cursor: not-allowed; } .kui-menu__item--danger,
.kui-menu__item--danger:hover { color: var(--kui-danger); } .kui-menu__item .kui-icon { width: var(--kui-icon-size-md); height: var(--kui-icon-size-md); } .kui-menu:has(> li > .kui-menu__item > .kui-icon) > li > .kui-menu__item:not(:has(> .kui-icon, > .kui-collection__menu-slot)) { padding-inline-start: calc(var(--kui-space-md) + var(--kui-icon-size-md) + var(--kui-space-sm)); } .kui-menu__separator { height: 1px; margin: var(--kui-space-sm) 0; background: var(--kui-border); } .kui-dropdown { position: relative; display: inline-block; } .kui-dropdown > summary { list-style: none; } .kui-dropdown > summary::-webkit-details-marker { display: none; } .kui-dropdown > .kui-menu { position: absolute; top: calc(100% + var(--kui-space-xs)); inset-inline-end: 0; z-index: var(--kui-z-dialog); } .kui-dropdown--start > .kui-menu { inset-inline: 0 auto; } .kui-menu[popover] { margin: var(--kui-space-xs) 0; } .kui-menu__item:focus-visible { outline-offset: calc(-1 * var(--kui-focus-width)); background: var(--kui-surface-hover); } .kui-menu__item[aria-disabled='true'] { color: var(--kui-text-disabled); cursor: not-allowed; } .kui-menu__item:is(:disabled, [aria-disabled='true']):hover { background: none; color: var(--kui-text-disabled); } .kui-menu__item[aria-haspopup='menu']::after { content: ''; flex: none; width: 0.45rem; height: 0.45rem; margin-inline: auto var(--kui-space-2xs); border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); } .kui-menu__item[aria-haspopup='menu']:dir(rtl)::after { transform: rotate(-135deg); } .kui-menu__item[aria-expanded='true'] { background: var(--kui-surface-hover); } .kui-menu .kui-menu[role='menu'] { margin: calc(-1 * (var(--kui-space-sm) + 1px)) 0; } .kui-menu .kui-menu:not([role='menu']) { min-width: 0; padding: 0; padding-inline-start: var(--kui-space-md); border: 0; box-shadow: none; } } @layer kui.components { .kui-account { display: flex; flex: none; align-items: center; min-width: 0; } .kui-account__trigger { position: relative; display: inline-flex; align-items: center; gap: var(--kui-space-sm); min-width: var(--kui-control-height-sm); height: var(--kui-control-height-sm); padding: 0 var(--kui-space-xs); border: 0; border-radius: var(--kui-radius-sm); background: none; color: var(--kui-text); font: inherit; font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-medium); cursor: pointer; } .kui-account__trigger:hover { background: var(--kui-surface-hover); } .kui-account:has(> .kui-account__panel:popover-open) > .kui-account__trigger { background: var(--kui-surface-active); } .kui-account__trigger[aria-expanded='true'] { background: var(--kui-surface-active); } .kui-account__trigger > .kui-icon { flex: none; color: var(--kui-text-muted); } .kui-account__name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kui-account__panel { position: fixed; inset-block: var(--kui-header-height) auto; inset-inline: auto var(--kui-space-md); width: min(20rem, calc(100vw - 2 * var(--kui-space-md))); max-height: calc(100dvh - var(--kui-header-height) - var(--kui-space-md)); margin: var(--kui-space-xs) 0 0; padding: 0; overflow-y: auto; border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface); color: var(--kui-text); box-shadow: var(--kui-shadow-high); font-size: var(--kui-font-size-sm); } .kui-account__panel > * + * { border-top: 1px solid var(--kui-border); } .kui-account__identity { padding: var(--kui-space-md); } .kui-account__items { display: grid; padding-block: var(--kui-space-xs); } .kui-account__section { padding: var(--kui-space-sm) var(--kui-space-md) var(--kui-space-md); } .kui-account__footer { padding: var(--kui-space-md); } @media (width < 45em) { .kui-account__name,
    .kui-account__trigger > .kui-icon { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } .kui-account__panel > ul.kui-menu.kui-account__items { min-width: 0; border-inline: 0; border-bottom: 0; border-radius: 0; box-shadow: none; } .kui-account__identity .kui-user__meta { white-space: normal; overflow-wrap: anywhere; } } @layer kui.components { .kui-toast-region { display: block; } .kui-toasts { position: fixed; inset-inline-end: var(--kui-space-lg); inset-block-start: calc(var(--kui-header-height) + var(--kui-space-md)); z-index: var(--kui-z-toast); display: flex; flex-direction: column; gap: var(--kui-space-sm); width: min(22.5rem, calc(100vw - 2 * var(--kui-space-md))); margin: 0; padding: 0; list-style: none; } @media (width < 37.5em) { .kui-toasts { inset-inline-end: var(--kui-space-md); } } .kui-toasts[popover] { inset-block-end: auto; inset-inline-start: auto; overflow: visible; border: 0; background: none; color: inherit; } .kui-toasts--static { position: static; z-index: auto; width: auto; max-width: 22.5rem; } .kui-toast { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--kui-space-sm); padding: var(--kui-space-md); border-radius: var(--kui-radius-sm); background: var(--kui-surface-inverse); color: var(--kui-text-inverse); box-shadow: var(--kui-shadow-high); font-size: var(--kui-font-size-sm); } .kui-toast:has(> .kui-spinner, > .kui-toast__icon) { grid-template-columns: auto minmax(0, 1fr) auto; } .kui-toast > .kui-spinner,
.kui-toast > .kui-toast__icon { margin-top: calc((1lh - 1rem) / 2); } .kui-toast__icon { width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); } .kui-toast__title { display: block; font-weight: var(--kui-font-weight-semibold); } .kui-toast__actions { display: flex; flex-wrap: wrap; gap: var(--kui-space-sm); grid-row: 2; grid-column: 1 / -2; } .kui-toast:has(> .kui-spinner, > .kui-toast__icon) > .kui-toast__actions { grid-column: 2 / -2; } .kui-toast__action { min-width: 1.5rem; min-height: 1.5rem; margin-inline-start: calc(-1 * var(--kui-space-xs)); padding: 0 var(--kui-space-xs); border: 0; border-radius: var(--kui-radius-xs); background: none; color: inherit; font: inherit; font-weight: var(--kui-font-weight-semibold); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; } .kui-toast__action:hover { text-decoration-thickness: 2px; } .kui-toast :focus-visible { outline-color: currentColor; outline-offset: -2px; } .kui-toast--error { background: var(--kui-danger-solid); color: var(--kui-on-danger); } .kui-toast__dismiss,
.kui-toast__close { grid-row: 1; grid-column: -2; display: inline-grid; place-content: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: var(--kui-radius-xs); background: none; color: inherit; cursor: pointer; opacity: 0.8; } .kui-toast__dismiss:hover,
.kui-toast__close:hover,
.kui-toast__dismiss:focus-visible,
.kui-toast__close:focus-visible { opacity: 1; } .kui-toast__dismiss .kui-icon,
.kui-toast__close .kui-icon { width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); } @media (prefers-reduced-motion: no-preference) { .kui-toast { animation: kui-toast-in var(--kui-duration) var(--kui-easing); } } @keyframes kui-toast-in { from { opacity: 0; transform: translateY(0.75rem); } } } @layer kui.components { .kui-empty { display: flex; flex-direction: column; align-items: center; gap: var(--kui-space-sm); padding: var(--kui-space-3xl) var(--kui-space-xl); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-md); background: var(--kui-surface); text-align: center; } .kui-empty--bare,
.kui-empty--compact { padding: var(--kui-space-xl) var(--kui-space-md); border: 0; background: none; } .kui-empty--bare.kui-empty--bordered,
.kui-empty--compact.kui-empty--bordered { border: 1px solid var(--kui-border); background: var(--kui-surface); } .kui-empty__art { display: grid; place-content: center; width: 4rem; height: 4rem; margin-bottom: var(--kui-space-sm); border-radius: var(--kui-radius-md); background: var(--kui-surface-sunken); color: var(--kui-text-muted); } .kui-empty__art .kui-icon { width: var(--kui-icon-size-lg); height: var(--kui-icon-size-lg); } .kui-empty__title { font-size: var(--kui-font-size-xl); font-weight: var(--kui-font-weight-semibold); letter-spacing: var(--kui-letter-spacing-title-sm); color: var(--kui-text); } .kui-empty--bare .kui-empty__title,
.kui-empty--compact .kui-empty__title { font-size: var(--kui-font-size-md); font-weight: var(--kui-font-weight-semibold); } .kui-empty__text { max-width: 30rem; color: var(--kui-text-muted); } .kui-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kui-space-sm); margin-top: var(--kui-space-sm); } .kui-empty__art:not(:has(*)),
.kui-empty__actions:not(:has(*)) { display: none; } } @layer kui.components { .kui-signin { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: var(--kui-space-lg); box-sizing: border-box; min-height: 100vh; min-height: 100dvh; padding: var(--kui-space-xl) var(--kui-space-md) var(--kui-space-lg); background: var(--kui-bg); } .kui-signin__card { display: grid; grid-template-columns: minmax(0, 1fr); align-self: center; justify-items: center; gap: var(--kui-space-sm); width: min(24rem, 100%); text-align: center; overflow-wrap: anywhere; } .kui-signin__app { font-size: var(--kui-font-size-2xl); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-tight); letter-spacing: var(--kui-letter-spacing-title); } .kui-signin__description { font-size: var(--kui-font-size-md); color: var(--kui-text-muted); } :is(.kui-signin__app:not(:has(+ .kui-signin__description)), .kui-signin__description):has(
        + :is(.kui-signin__title, .kui-signin__account, .kui-signin__steps, .kui-signin__text)
    )::after { content: ''; display: block; height: var(--kui-space-lg); } .kui-signin__title { font-size: var(--kui-font-size-lg); font-weight: var(--kui-font-weight-semibold); letter-spacing: var(--kui-letter-spacing-title-sm); } .kui-signin__text { color: var(--kui-text-muted); } .kui-signin__account { font-size: var(--kui-font-size-sm); } .kui-signin__account strong { font-weight: var(--kui-font-weight-semibold); } .kui-signin__reason { display: flex; align-items: flex-start; gap: var(--kui-space-xs); font-size: var(--kui-font-size-sm); text-align: start; } .kui-signin__reason > .kui-icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 1px; color: var(--kui-danger); } .kui-signin__steps { display: grid; gap: var(--kui-space-xs); margin: 0; padding: 0; list-style: none; font-size: var(--kui-font-size-sm); text-align: start; color: var(--kui-text-muted); } .kui-signin__steps > li { display: flex; align-items: center; gap: var(--kui-space-sm); } .kui-signin__steps > li::before { content: ''; flex: none; box-sizing: border-box; width: 0.5rem; height: 0.5rem; border: 2px solid var(--kui-border-strong); border-radius: var(--kui-radius-full); } .kui-signin__steps > li:has(~ [aria-current='step'])::before { width: 0.3125rem; height: 0.5625rem; margin-inline: 0.09375rem; border-width: 0 2px 2px 0; border-color: var(--kui-ok); border-radius: 0; transform: translateY(-1px) rotate(45deg); } .kui-signin__steps > [aria-current='step'] { color: var(--kui-text); } .kui-signin__steps > [aria-current='step']::before { border-color: var(--kui-indicator); background: var(--kui-indicator); } .kui-signin__card > :is([role='alert'], [role='status'], [aria-live]):empty { position: absolute; } .kui-signin__actions { display: grid; justify-items: center; gap: var(--kui-space-sm); justify-self: stretch; margin-top: var(--kui-space-md); } .kui-signin__actions > .kui-button--primary { min-width: 12rem; } .kui-signin__actions:not(:has(*)) { display: none; } .kui-signin__foot { display: flex; justify-content: center; color: var(--kui-text); } .kui-signin__logo { width: auto; height: 0.875rem; aspect-ratio: 170 / 32; fill: currentColor; } .kui-signin:focus,
.kui-signin__title:focus,
.kui-signin__app:focus { outline: none; } } @layer kui.components { .kui-skeleton { display: block; min-height: 1rem; border-radius: var(--kui-radius-sm); background: var(--kui-surface-active); } .kui-skeleton--text { width: 60%; height: 1em; } .kui-skeleton--block { height: 6rem; } @media (prefers-reduced-motion: no-preference) { .kui-skeleton { animation: kui-pulse 1s 300ms ease-in-out infinite alternate; } } @keyframes kui-pulse { to { background-color: var(--kui-surface-hover); } } } @layer kui.components { .kui-spinner { display: inline-block; flex: none; width: 1.5rem; height: 1.5rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--kui-radius-full); vertical-align: middle; animation: kui-spin 0.8s linear infinite; } .kui-spinner--sm { width: 1rem; height: 1rem; } .kui-spinner--lg { width: 2rem; height: 2rem; border-width: 3px; } @keyframes kui-spin { to { transform: rotate(360deg); } } } @layer kui.components { .kui-async { display: block; position: relative; } .kui-async > [data-kui-async='refreshing'] { position: absolute; inset-block-start: var(--kui-space-sm); inset-inline-end: var(--kui-space-sm); z-index: var(--kui-z-raised); display: inline-grid; place-content: center; padding: var(--kui-space-xs); border-radius: var(--kui-radius-full); background: var(--kui-surface); color: var(--kui-text); box-shadow: var(--kui-shadow-low); } .kui-async > [data-kui-async='error']:not([hidden]) ~ [data-kui-async='content']:not([hidden]) { margin-top: var(--kui-space-md); } .kui-async[tabindex='-1']:focus { outline: none; } } @layer kui.components { kui-chips { display: block; } .kui-chips { display: flex; flex-wrap: wrap; gap: var(--kui-space-xs); margin: 0; padding: 0; list-style: none; } .kui-chip { display: inline-flex; align-items: center; gap: var(--kui-space-2xs); max-width: 100%; min-height: 1.5rem; padding: 0 var(--kui-space-sm); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface-sunken); color: var(--kui-text); font-size: var(--kui-font-size-xs); line-height: var(--kui-line-height); overflow-wrap: anywhere; } .kui-chip--code { font-family: var(--kui-font-mono); } .kui-chip:has(.kui-chip__remove) { padding-inline-end: var(--kui-space-2xs); } .kui-chip__remove { display: inline-grid; place-content: center; flex: none; width: 1.5rem; height: 1.5rem; margin-block: -2px; margin-inline: 0 -2px; padding: 2px; border: 0; border-radius: calc(var(--kui-radius-xs) + 2px); background-color: transparent; background-clip: content-box; color: var(--kui-text-muted); cursor: pointer; } .kui-chip__remove:hover { background-color: var(--kui-surface-active); color: var(--kui-text); } .kui-chip__remove .kui-icon { width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); } .kui-chip--action { background: var(--kui-surface); border-style: dashed; color: var(--kui-text-muted); cursor: pointer; } .kui-chip--action:hover { border-style: solid; border-color: var(--kui-border-hover); color: var(--kui-text); } .kui-chip[aria-pressed] { justify-content: center; min-width: 1.5rem; background: var(--kui-surface); color: var(--kui-text); cursor: pointer; } .kui-chip[aria-pressed]:hover { border-color: var(--kui-border-strong); background: var(--kui-surface-hover); } .kui-chip[aria-pressed='true'],
.kui-chip[aria-pressed='true']:hover { border-color: var(--kui-border-strong); background: var(--kui-surface-active); box-shadow: inset 0 0 0 1px var(--kui-border-strong); } .kui-chip[aria-pressed]:is(:disabled, [aria-disabled='true']) { border-color: var(--kui-border); opacity: 0.55; cursor: not-allowed; } .kui-chip[aria-pressed='false']:is(:disabled, [aria-disabled='true']) { background: var(--kui-surface); } .kui-chip[aria-pressed='true']:is(:disabled, [aria-disabled='true']) { background: var(--kui-surface-active); } .kui-chips-input { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-xs); min-height: var(--kui-control-height); padding: var(--kui-space-xs) var(--kui-space-sm); border: 1px solid var(--kui-border-strong); border-radius: var(--kui-radius-sm); background: var(--kui-surface); cursor: text; } .kui-chips-input:hover { border-color: var(--kui-border-hover); } .kui-chips-input:has(> input:focus-visible) { border-color: var(--kui-focus); outline: var(--kui-focus-width) solid var(--kui-focus); outline-offset: 0; } .kui-chips-input > input { flex: 1 1 8rem; min-width: 8rem; height: 1.75rem; padding: 0 var(--kui-space-xs); border: 0; outline: 0; background: transparent; color: var(--kui-text); font-size: var(--kui-font-size-sm); } .kui-chips-input > input::placeholder { color: var(--kui-text-placeholder); } .kui-chips-input > .kui-chips:has(> .kui-chip) ~ input::placeholder { color: transparent; } } @layer kui.components { .kui-avatar { display: inline-grid; place-content: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: var(--kui-radius-sm); background: var(--kui-surface-active); color: var(--kui-text); font-size: var(--kui-font-size-xs); font-weight: var(--kui-font-weight-semibold); text-transform: uppercase; } .kui-avatar--lg { width: 2.5rem; height: 2.5rem; font-size: var(--kui-font-size-md); } } @layer kui.components { .kui-progress { appearance: none; display: block; width: 100%; height: 0.375rem; border: 0; border-radius: var(--kui-radius-full); background: var(--kui-surface-active); overflow: hidden; } .kui-progress::-webkit-progress-bar { background: var(--kui-surface-active); } .kui-progress::-webkit-progress-value { border-radius: var(--kui-radius-full); background: var(--kui-accent); } .kui-progress::-moz-progress-bar { border-radius: var(--kui-radius-full); background: var(--kui-accent); } .kui-progress--info::-webkit-progress-value { background: var(--kui-info-border); } .kui-progress--info::-moz-progress-bar { background: var(--kui-info-border); } .kui-progress--success::-webkit-progress-value,
.kui-progress--ok::-webkit-progress-value { background: var(--kui-ok-border); } .kui-progress--success::-moz-progress-bar,
.kui-progress--ok::-moz-progress-bar { background: var(--kui-ok-border); } .kui-progress--sm,
.kui-progress--thin { height: 0.25rem; } .kui-progress:indeterminate { background-color: var(--kui-surface-active); background-image: linear-gradient(var(--kui-accent), var(--kui-accent)); background-size: 40% 100%; background-repeat: no-repeat; background-position: -67% 0; } .kui-progress--info:indeterminate { background-image: linear-gradient(var(--kui-info-border), var(--kui-info-border)); } .kui-progress--success:indeterminate,
.kui-progress--ok:indeterminate { background-image: linear-gradient(var(--kui-ok-border), var(--kui-ok-border)); } .kui-progress:indeterminate::-webkit-progress-bar { background: transparent; } .kui-progress:indeterminate::-moz-progress-bar { background: transparent; } @media (prefers-reduced-motion: no-preference) { .kui-progress:indeterminate { animation: kui-progress-slide 1.4s var(--kui-easing) infinite; } } @media (prefers-reduced-motion: reduce) { .kui-progress:indeterminate { background-image: repeating-linear-gradient(-45deg, var(--kui-accent) 0 0.375rem, transparent 0.375rem 0.75rem); background-size: auto; } .kui-progress--info:indeterminate { background-image: repeating-linear-gradient(-45deg, var(--kui-info-border) 0 0.375rem, transparent 0.375rem 0.75rem); } .kui-progress--success:indeterminate,
    .kui-progress--ok:indeterminate { background-image: repeating-linear-gradient(-45deg, var(--kui-ok-border) 0 0.375rem, transparent 0.375rem 0.75rem); } } @keyframes kui-progress-slide { to { background-position: 167% 0; } } } @layer kui.components { .kui-meter { display: flex; gap: var(--kui-space-2xs); height: 0.5rem; overflow: hidden; border-radius: var(--kui-radius-full); background: var(--kui-surface-active); } .kui-meter__segment { flex: 1 1 0; min-width: 2px; background: var(--kui-text-disabled); } .kui-meter__segment--success,
.kui-meter__segment--ok { background: var(--kui-ok-border); } .kui-meter__segment--warning,
.kui-meter__segment--warn { background: var(--kui-warn-fill); } .kui-meter__segment--error,
.kui-meter__segment--danger { background: var(--kui-danger-fill); } .kui-meter__segment--info { background: var(--kui-info-border); } .kui-meter__segment--accent { background: var(--kui-accent); } } @layer kui.components { .kui-status { display: inline-flex; align-items: center; gap: var(--kui-space-xs); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-medium); white-space: nowrap; } .kui-status::before { content: ''; flex: none; width: 0.5rem; height: 0.5rem; border-radius: var(--kui-radius-full); background: var(--kui-status-mark); } .kui-status--success,
.kui-status--ok,
.kui-status[data-kui-ocpp="Available"] { --kui-status-mark: var(--kui-ok-border); color: var(--kui-ok); } .kui-status--warning,
.kui-status--warn,
.kui-status[data-kui-ocpp="SuspendedEV"],
.kui-status[data-kui-ocpp="SuspendedEVSE"] { --kui-status-mark: var(--kui-warn-fill); color: var(--kui-warn); } .kui-status--error,
.kui-status--danger,
.kui-status[data-kui-ocpp="Faulted"] { --kui-status-mark: var(--kui-danger-fill); color: var(--kui-danger); } .kui-status--info, .kui-status[data-kui-ocpp="Preparing"], .kui-status[data-kui-ocpp="Charging"], .kui-status[data-kui-ocpp="Finishing"] { --kui-status-mark: var(--kui-info-border); color: var(--kui-info); } .kui-status--neutral,
.kui-status--muted,
.kui-status[data-kui-ocpp="Reserved"],
.kui-status[data-kui-ocpp="Unavailable"] { --kui-status-mark: var(--kui-text-disabled); color: var(--kui-text-muted); } } @layer kui.components { .kui-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface); font-size: var(--kui-font-size-sm); } .kui-list__item { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--kui-space-xs) var(--kui-space-md); min-height: var(--kui-row-height-compact); padding: var(--kui-space-xs) var(--kui-space-md); } .kui-list__item + .kui-list__item { border-top: 1px solid var(--kui-border); } .kui-list__meta { flex: none; font-family: var(--kui-font-mono); font-size: var(--kui-font-size-xs); color: var(--kui-text-muted); font-variant-numeric: tabular-nums; } .kui-list--flush { border: 0; border-radius: 0; background: none; } .kui-list__item > :not(.kui-list__meta) { min-width: 0; overflow-wrap: anywhere; } } @layer kui.components { .kui-legend,
.kui-legend > li { display: flex; flex-wrap: wrap; min-width: 0; } .kui-legend { gap: var(--kui-space-xs) var(--kui-space-md); margin: 0; padding: 0; list-style: none; font-size: var(--kui-font-size-xs); color: var(--kui-text-muted); } .kui-legend > li { align-items: center; gap: var(--kui-space-xs); } .kui-legend--nowrap { flex-wrap: nowrap; overflow-x: auto; } .kui-legend--nowrap > li { flex: none; } } @layer kui.components { .kui-connector-strip,
.kui-connector-strip__group { display: inline-flex; align-items: center; gap: var(--kui-space-sm); white-space: nowrap; } .kui-connector-strip { position: relative; z-index: 2; min-inline-size: 0; max-inline-size: min(100%, 16rem); flex-wrap: wrap; gap: var(--kui-space-sm); vertical-align: middle; color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); font-variant-numeric: tabular-nums; } .kui-connector-strip__group { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; } .kui-connector-strip__group > :not(.kui-connector-strip__marks) { flex: none; } .kui-connector-strip__marks { display: flex; flex: 0 1 auto; min-inline-size: 0; } .kui-connector-strip__slot { display: flex; flex: 0 1 0.875rem; align-items: center; justify-content: center; inline-size: 0.875rem; min-inline-size: 0; container: kui-connector / inline-size; } .kui-connector-strip__mark { flex: none; inline-size: 0.625rem; block-size: 0.625rem; padding: 0; border: 1px solid currentColor; border-radius: var(--kui-radius-full); background: currentColor; } .kui-connector-strip__mark::before { display: none; } .kui-connector-strip--compact .kui-connector-strip__mark { inline-size: 0.5rem; block-size: 0.5rem; } .kui-connector-strip--blocks .kui-connector-strip__mark { inline-size: 0.4375rem; block-size: 1rem; border-radius: var(--kui-radius-xs); } .kui-connector-strip--blocks.kui-connector-strip--compact .kui-connector-strip__mark { inline-size: 0.3125rem; block-size: 0.75rem; } @container kui-connector (width < 0.875rem) { .kui-connector-strip .kui-connector-strip__mark { inline-size: 0.5rem; block-size: 0.5rem; } .kui-connector-strip--blocks .kui-connector-strip__mark { inline-size: 0.3125rem; block-size: 0.75rem; } } .kui-connector-strip [data-kui-bar] .kui-connector-strip__mark { inline-size: 100%; block-size: 0.5rem; border-inline: 0; border-radius: 0; } @container kui-connector (width < 0.625rem) { .kui-connector-strip .kui-connector-strip__slot .kui-connector-strip__mark { inline-size: 100%; block-size: 0.5rem; border-inline: 0; border-radius: 0; } } } @layer kui.components { .kui-code-block { max-height: 20rem; margin: 0; padding: var(--kui-space-md); overflow: auto; border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface-sunken); color: var(--kui-text); font-family: var(--kui-font-mono); font-size: var(--kui-font-size-xs); line-height: var(--kui-line-height-code); white-space: pre; } } @layer kui.components { .kui-kbd { padding: 0 var(--kui-space-xs); border: 1px solid var(--kui-border); border-bottom-width: 2px; border-radius: var(--kui-radius-xs); background: var(--kui-surface); font-family: var(--kui-font-mono); font-size: var(--kui-font-size-xs); } } @layer kui.components { .kui-diff { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kui-space-sm); } .kui-diff__changed { font-size: var(--kui-font-size-sm); color: var(--kui-text-muted); } .kui-mark-added { background: var(--kui-ok-tint); color: var(--kui-ok); } .kui-mark-removed { background: var(--kui-danger-tint); color: var(--kui-danger); text-decoration: line-through; } } @layer kui.components { .kui-link-muted { color: var(--kui-text-muted); text-decoration: none; } .kui-link-muted:hover { color: var(--kui-text); text-decoration: underline; } } @layer kui.components { .kui-status-icon { display: inline-grid; place-items: center; flex: none; width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); color: var(--kui-text-muted); vertical-align: -0.1875rem; } .kui-status-icon > svg { width: 100%; height: 100%; fill: currentColor; } .kui-status-icon--success,
.kui-status-icon--ok { color: var(--kui-ok); } .kui-status-icon--pending { color: var(--kui-info); } .kui-status-icon--warning,
.kui-status-icon--warn { color: var(--kui-warn); } .kui-status-icon--error,
.kui-status-icon--danger { color: var(--kui-danger); } .kui-status-icon--unknown { color: var(--kui-text-muted); } .kui-status-icon--md { width: var(--kui-icon-size); height: var(--kui-icon-size); vertical-align: -0.375rem; } .kui-status-icon--lg { width: var(--kui-icon-size-lg); height: var(--kui-icon-size-lg); vertical-align: -0.5625rem; } } @layer kui.components { .kui-tooltip { position: fixed; inset: auto; width: max-content; max-width: min(20rem, calc(100vw - 2 * var(--kui-space-md))); margin: 0; padding: var(--kui-space-xs) var(--kui-space-sm); overflow: visible; border: 0; border-radius: var(--kui-radius-sm); background: var(--kui-surface-inverse); color: var(--kui-text-inverse); font-size: var(--kui-font-size-xs); line-height: var(--kui-line-height); overflow-wrap: anywhere; } @media (prefers-reduced-motion: no-preference) { .kui-tooltip:popover-open { animation: kui-tooltip-in var(--kui-duration-fast) var(--kui-easing); } } @keyframes kui-tooltip-in { from { opacity: 0; } } .kui-toggletip { display: inline; } .kui-toggletip__button { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; margin: calc(-1 * var(--kui-space-xs)) 0; padding: 0; border: 0; border-radius: var(--kui-radius-sm); background: none; color: var(--kui-text-muted); vertical-align: middle; cursor: pointer; } .kui-toggletip__button:hover { background: var(--kui-surface-hover); color: var(--kui-text); } .kui-toggletip:has(> .kui-toggletip__panel:popover-open) > .kui-toggletip__button { background: var(--kui-surface-active); color: var(--kui-text); } .kui-toggletip__button[aria-expanded='true'] { background: var(--kui-surface-active); color: var(--kui-text); } .kui-toggletip__button > .kui-icon { width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); } .kui-toggletip__panel { position: fixed; inset: auto; width: max-content; max-width: min(24rem, calc(100vw - 2 * var(--kui-space-md))); margin: var(--kui-space-xs) 0; padding: var(--kui-space-sm) var(--kui-space-md); border: 0; border-radius: var(--kui-radius-sm); background: var(--kui-surface-inverse); color: var(--kui-text-inverse); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-regular); line-height: var(--kui-line-height); text-align: start; white-space: normal; } .kui-toggletip__panel:popover-open { display: block; } .kui-toggletip__panel:not([popover]):not([hidden]) { display: block; } .kui-toggletip__panel a { color: inherit; text-decoration: underline; } .kui-toggletip__panel :focus-visible { outline-color: currentColor; } } @layer kui.components { .kui-popover { position: fixed; line-height: var(--kui-line-height); inset: auto; display: none; flex-direction: column; width: min(20rem, calc(100vw - 2 * var(--kui-space-md))); max-height: min(32rem, calc(100dvh - 2 * var(--kui-space-md))); margin: var(--kui-space-xs) 0; padding: 0; overflow: hidden; border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface); color: var(--kui-text); box-shadow: var(--kui-shadow-high); font-size: var(--kui-font-size-sm); } .kui-popover:popover-open { display: flex; } .kui-popover:not([popover]):not([hidden]) { display: flex; } .kui-popover--sm { width: min(15rem, calc(100vw - 2 * var(--kui-space-md))); } .kui-popover--lg { width: min(28rem, calc(100vw - 2 * var(--kui-space-md))); } .kui-popover > * + * { border-top: 1px solid var(--kui-border); } .kui-popover__header { flex: none; padding: var(--kui-space-sm) var(--kui-space-md); } .kui-popover__title { margin: 0; font-size: var(--kui-font-size-md); font-weight: var(--kui-font-weight-semibold); } .kui-popover__body { display: block; flex: 1 1 auto; min-height: 0; padding: var(--kui-space-md); overflow-y: auto; scrollbar-gutter: stable; scrollbar-width: thin; } .kui-popover__footer { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: var(--kui-space-sm); padding: var(--kui-space-sm) var(--kui-space-md); } .kui-popover:focus:not(:focus-visible) { outline: none; } } @layer kui.components { .kui-combobox { position: relative; display: block; min-width: 0; } .kui-combobox__popup { position: fixed; inset: auto; display: none; flex-direction: column; box-sizing: border-box; width: max-content; min-width: 12rem; max-width: min(32rem, calc(100vw - 2 * var(--kui-space-md))); max-height: min(20rem, calc(100dvh - 2 * var(--kui-space-md))); margin: var(--kui-space-xs) 0; padding: 0; overflow: hidden; border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface); color: var(--kui-text); box-shadow: var(--kui-shadow-high); font-size: var(--kui-font-size-sm); } .kui-combobox__popup:popover-open { display: flex; } .kui-combobox__popup:not([popover]):not([hidden]) { display: flex; } .kui-listbox { flex: 1 1 auto; min-height: 0; margin: 0; padding: var(--kui-space-xs) 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; } .kui-listbox__group { display: block; } .kui-listbox__group-label { display: block; padding: var(--kui-space-sm) var(--kui-space-md) var(--kui-space-2xs); color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); font-weight: var(--kui-font-weight-semibold); letter-spacing: var(--kui-letter-spacing-caps); text-transform: uppercase; } .kui-listbox__group-list { margin: 0; padding: 0; list-style: none; } .kui-listbox:not(:has(> :not([hidden]))) { padding: 0; } .kui-listbox__option { display: block; padding: var(--kui-space-sm) var(--kui-space-md); color: var(--kui-text); line-height: var(--kui-line-height-tight); overflow-wrap: anywhere; cursor: pointer; } .kui-listbox__option:hover { background: var(--kui-surface-hover); } .kui-listbox__option[aria-selected='true'] { background: var(--kui-surface-hover); box-shadow: inset var(--kui-indicator-width) 0 0 var(--kui-indicator); } .kui-listbox__option[aria-selected='true']:dir(rtl) { box-shadow: inset calc(-1 * var(--kui-indicator-width)) 0 0 var(--kui-indicator); } .kui-listbox__option[aria-disabled='true'] { color: var(--kui-text-disabled); cursor: not-allowed; } .kui-listbox__option[aria-disabled='true']:hover { background: none; } .kui-listbox__description { display: block; margin-top: var(--kui-space-2xs); color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); } .kui-listbox__option[aria-disabled='true'] > .kui-listbox__description { color: var(--kui-text-disabled); } .kui-combobox__loading,
.kui-combobox__empty { display: flex; flex: none; align-items: center; gap: var(--kui-space-sm); margin: 0; padding: var(--kui-space-sm) var(--kui-space-md); color: var(--kui-text-muted); } .kui-listbox:has(> :not([hidden])) ~ :is(.kui-combobox__loading, .kui-combobox__empty) { border-top: 1px solid var(--kui-border); } } @layer kui.components { .kui-data-table{display:flex;flex-direction:column;min-width:0;block-size:32rem;max-block-size:32rem}.kui-data-table>.kui-async{display:flex;flex:1 1 auto;flex-direction:column;min-block-size:0}.kui-data-table>.kui-async>[data-kui-async=content]{flex:1 1 auto;min-block-size:0}.kui-data-table__grid{display:block;block-size:100%}.kui-data-table [role=row][aria-selected=true] .kui-badge:not([data-kui-ocpp=Available],[data-kui-ocpp=Preparing],[data-kui-ocpp=Charging],[data-kui-ocpp=SuspendedEV],[data-kui-ocpp=SuspendedEVSE],[data-kui-ocpp=Finishing],[data-kui-ocpp=Faulted],.kui-badge--success,.kui-badge--ok,.kui-badge--info,.kui-badge--warning,.kui-badge--warn,.kui-badge--error,.kui-badge--danger,.kui-badge--highlight,.kui-badge--code){background:var(--kui-surface)}.kui-data-table__cell{display:flex;align-items:center;gap:var(--kui-space-sm);block-size:100%;min-width:0;line-height:var(--kui-line-height)}.kui-data-table__cell>a{color:inherit;font-weight:inherit}.kui-data-table__item{display:flex;flex-direction:column;justify-content:center;gap:var(--kui-space-2xs);min-width:0;line-height:var(--kui-line-height-tight)}.kui-data-table__title,.kui-data-table__detail,.kui-data-table__label,.kui-data-table__field-id{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kui-data-table__title{color:var(--kui-text);font-weight:var(--kui-font-weight-medium)}.kui-data-table__title a{color:inherit;text-decoration:none}.kui-data-table__title a:hover{text-decoration:underline}.kui-data-table__detail{color:var(--kui-text-muted);font-size:var(--kui-font-size-xs)}.kui-data-table[data-kui-density=compact] .kui-data-table__item{flex-direction:row;align-items:baseline;justify-content:flex-start;gap:0;overflow:hidden;white-space:nowrap}.kui-data-table[data-kui-density=compact] .kui-data-table__title{flex:0 1 auto;min-width:0}.kui-data-table[data-kui-density=compact] .kui-data-table__detail{flex:1 1 0;min-width:0;padding-inline-start:var(--kui-space-xs)}.kui-data-table[data-kui-density=compact] .kui-data-table__detail::before{content:"\b7" / "";margin-inline-end:var(--kui-space-xs)}.kui-data-table__item:has(>.kui-data-table__leading,>.kui-data-table__labels){display:grid;grid-template-columns:auto minmax(0,max-content) minmax(0,1fr);align-content:center;align-items:center;column-gap:0}.kui-data-table__leading{display:inline-flex;grid-row:1;grid-column:1;align-items:center;gap:var(--kui-space-2xs);margin-inline-end:var(--kui-space-sm)}.kui-data-table__item:has(>.kui-data-table__detail)>.kui-data-table__leading{grid-row:1 / span 2}.kui-data-table__item>.kui-data-table__title{grid-row:1;grid-column:2}.kui-data-table__labels{display:flex;grid-row:1;grid-column:3;align-items:center;gap:var(--kui-space-2xs);min-width:0;overflow:hidden;white-space:nowrap}.kui-data-table__labels:has(>*){padding-inline-start:var(--kui-space-xs)}.kui-data-table__labels>*{flex:none}.kui-data-table__item>.kui-data-table__detail{grid-column:2 / -1}.kui-data-table[data-kui-density=compact] .kui-data-table__item:has(>.kui-data-table__leading,>.kui-data-table__labels){display:grid;grid-template-columns:auto minmax(0,max-content) minmax(0,max-content) minmax(0,1fr);align-items:center}.kui-data-table[data-kui-density=compact] .kui-data-table__item>.kui-data-table__detail{grid-row:1;grid-column:4}.kui-data-table[data-kui-density=compact] .kui-data-table__item>.kui-data-table__leading{grid-row:1}.kui-data-table[data-kui-uniform] td [data-kui-list-slot=status]{min-width:5rem}.kui-data-table[data-kui-uniform] td [data-kui-list-slot=trailing]{min-width:4rem}.kui-data-table[data-kui-modality=keyboard] td:focus-within::after,.kui-data-table[data-kui-modality=keyboard][data-kui-view=table] [role=gridcell]:focus-within::after,.kui-data-table[data-kui-modality=keyboard][data-kui-view=list] [role=row][row-id]:focus-within::before{content:"";position:absolute;inset:0;z-index:var(--kui-z-raised);outline:var(--kui-focus-width) solid var(--kui-focus);outline-offset:calc(-1 * var(--kui-focus-width));pointer-events:none}.kui-data-table__header{display:flex;flex:1 1 auto;align-items:center;gap:var(--kui-space-2xs);min-width:0;inline-size:100%;block-size:100%;line-height:var(--kui-line-height-tight)}.kui-data-table__heading{display:inline-flex;align-items:center;gap:var(--kui-space-2xs);min-width:0;min-block-size:1.5rem;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start}[role=columnheader][aria-sort] .kui-data-table__header>.kui-data-table__heading,button.kui-data-table__heading{cursor:pointer}[role=columnheader][aria-sort] .kui-data-table__header>.kui-data-table__heading:hover,button.kui-data-table__heading:hover{color:var(--kui-text)}.kui-data-table__name{display:flex;flex-direction:column;min-width:0}.kui-data-table__label{min-width:0}.kui-data-table__field-id{font-family:var(--kui-font-mono);font-size:var(--kui-font-size-xs);font-weight:var(--kui-font-weight-regular)}.kui-data-table__sorted.kui-icon,.kui-data-table__filtered.kui-icon{flex:none;width:var(--kui-icon-size-sm);height:var(--kui-icon-size-sm)}.kui-data-table__filtered.kui-icon{color:var(--kui-text)}.kui-data-table__menu,.kui-data-table__filter{flex:none}.kui-data-table__menu>.kui-button--icon,.kui-data-table__filter>.kui-button--icon{width:1.5rem;height:1.5rem;color:inherit}.kui-data-table__filter>.kui-button--icon>.kui-icon{width:var(--kui-icon-size-sm);height:var(--kui-icon-size-sm)}@media(hover:hover){:is(thead,[role=row]):not(:hover,:focus-within) .kui-data-table__filter>.kui-button--icon:not(:has(.kui-icon--accent),[aria-expanded=true]){opacity:0}}.kui-data-table__filter>.kui-popover{font-weight:var(--kui-font-weight-regular);text-align:start;white-space:normal;cursor:auto}.kui-data-table__header:not(.kui-data-table__header--end)>.kui-data-table__menu:last-child,.kui-data-table__header--end>.kui-data-table__heading{margin-inline-start:auto}.kui-data-table__header:has(>.kui-data-table__strip){container:kui-data-table-title / inline-size}.kui-data-table__strip{display:flex;flex:1 1 0;align-items:center;gap:var(--kui-space-md);min-width:0;margin-inline-start:var(--kui-space-md);padding:var(--kui-focus-width);overflow:hidden}.kui-data-table__strip-item{display:inline-flex;flex:none;align-items:center;gap:var(--kui-space-2xs)}@container kui-data-table-title (width < 20rem){.kui-data-table__strip{display:none}}.kui-data-table[data-kui-header=hidden] [role=columnheader]{clip-path:inset(50%)}.kui-data-table[data-kui-header=covered] [role=columnheader]>*{visibility:hidden}.kui-data-table--row-links>.kui-table>tbody>tr:has(.kui-data-table__title a[href]){position:relative;cursor:pointer}.kui-data-table--row-links>.kui-table>tbody>tr:has(.kui-data-table__title a[href]):is(:hover,:focus-within)>td{background:var(--kui-surface-hover)}.kui-data-table--row-links .kui-data-table__title a[href]::after{content:"";position:absolute;inset:0;z-index:1;cursor:pointer}.kui-data-table--row-links>.kui-table>tbody>tr:has(.kui-data-table__title a[href]) :where(button,input,select,textarea,label,summary,a[href]:not(.kui-data-table__title a),.kui-data-table__lift){position:relative;z-index:2}.kui-data-table--row-links .kui-data-table__lift{cursor:text;user-select:text}.kui-data-table--row-links .kui-dropdown>.kui-menu{z-index:var(--kui-z-raised)}.kui-data-table[data-kui-view=list]>.kui-table{table-layout:fixed;padding-block-start:1px}.kui-table kui-data-table-select.kui-data-table__cell{flex:0 0 3.5rem}.kui-data-table [role=row]:is(:hover,:focus-within){--ag-header-column-resize-handle-color: var(--kui-border)} } @layer kui.components { .kui-collection { display: flex; flex-direction: column; gap: var(--kui-space-md); min-width: 0; } .kui-collection__top { position: relative; display: flex; align-items: center; gap: var(--kui-space-md); min-width: 0; } .kui-collection__top > :not(.kui-collection__field) { flex: none; } .kui-collection__layout.kui-segmented { flex-wrap: nowrap; align-items: stretch; height: var(--kui-control-height-lg); } .kui-collection__layout.kui-segmented > button { justify-content: center; width: calc(var(--kui-control-height-lg) - 6px); height: auto; padding: 0; } .kui-collection__top [data-kui-view-button] { height: var(--kui-control-height-lg); padding-inline: var(--kui-space-md); } @media (width < 37.5em) { .kui-collection__top [data-kui-view-button] { width: var(--kui-control-height-lg); padding: 0; } } .kui-collection__sheet { gap: var(--kui-space-sm); display: flex; flex-direction: column; } .kui-collection__section { display: flex; flex-direction: column; gap: var(--kui-space-sm); min-width: 0; padding-block: var(--kui-space-md); } .kui-collection__section:first-child { padding-block-start: 0; } .kui-collection__section:last-child { padding-block-end: 0; } .kui-collection__section + .kui-collection__section { border-top: 1px solid var(--kui-border); } .kui-collection__section-title { margin: 0; padding: 0; color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); font-weight: var(--kui-font-weight-semibold); letter-spacing: var(--kui-letter-spacing-caps); text-transform: uppercase; } .kui-collection__section > .kui-button { align-self: flex-start; } .kui-collection__note { margin: 0; color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); } .kui-collection__main { position: relative; display: flex; flex-direction: column; min-width: 0; } .kui-collection__bar { display: flex; align-items: center; gap: var(--kui-space-sm); min-width: 0; min-height: var(--kui-control-height-lg); padding: var(--kui-space-xs) var(--kui-space-sm) var(--kui-space-xs) var(--kui-space-md); border: 1px solid var(--kui-border); border-bottom: 0; border-radius: var(--kui-radius-sm) var(--kui-radius-sm) 0 0; background: var(--kui-surface-sunken); color: var(--kui-text); font-size: var(--kui-font-size-sm); } .kui-collection__bar[data-kui-view='table'] { position: absolute; inset: 0 0 auto; z-index: var(--kui-z-sticky); height: calc(var(--kui-table-header-height) + 2px); min-height: 0; border-bottom: 1px solid var(--kui-border); } .kui-collection__bar[data-kui-view='table'][data-kui-density='compact'] { height: calc(var(--kui-row-height-compact) + 2px); } .kui-collection__bar[data-kui-view='table'][data-kui-density='comfortable'] { height: calc(4rem + 2px); } .kui-collection__all { flex: none; margin: 0; } .kui-collection__bar > .kui-field:has(> .kui-collection__all) { flex: none; } .kui-collection__pins { display: flex; align-items: center; gap: var(--kui-space-2xs); min-width: 0; } .kui-collection__pin { position: relative; display: inline-flex; align-items: center; gap: var(--kui-space-xs); min-width: 0; min-height: var(--kui-control-height-sm); padding: 0 var(--kui-space-sm); border: 0; border-radius: var(--kui-radius-sm); background: none; color: var(--kui-text-muted); font: inherit; white-space: nowrap; cursor: pointer; } .kui-collection__pin:hover,
.kui-collection__pin:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true']) { background: var(--kui-surface-hover); color: var(--kui-text); } .kui-collection__pin:where([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true'])::before { content: ''; position: absolute; inset: 0; width: var(--kui-indicator-width); background: var(--kui-indicator); } .kui-collection .kui-collection__pin::before { inset: auto var(--kui-space-sm) 0; width: auto; height: var(--kui-indicator-width); } .kui-collection .kui-collection__pins > .kui-collection__pin.kui-button--ghost::after { content: none; } .kui-collection__pin-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .kui-collection__pin > .kui-count { flex: none; font-weight: var(--kui-font-weight-regular); } @media (width < 37.5em) { .kui-collection__pins { flex-wrap: wrap; gap: 0; max-width: 100%; } .kui-collection__pin { max-width: 100%; gap: var(--kui-space-2xs); padding-inline: var(--kui-space-xs); } } .kui-collection__bulk:not([hidden]),
.kui-collection__tools { display: contents; } .kui-collection__count { margin-inline-end: var(--kui-space-xs); font-weight: var(--kui-font-weight-semibold); white-space: nowrap; } .kui-collection__spacer { flex: 1 1 auto; } .kui-collection__bar .kui-button { flex: none; } @media (width < 37.5em) { .kui-collection__bar { flex-wrap: wrap; gap: var(--kui-space-xs); padding-inline-end: var(--kui-space-xs); } } .kui-collection__actions:not([hidden]) { display: flex; align-items: center; gap: var(--kui-space-sm); } .kui-collection__bar:has(> .kui-collection__bulk:not([hidden])) { flex-wrap: nowrap; } .kui-collection__bar .kui-collection__actions { flex: 0 1 auto; min-width: 0; } .kui-collection__main > .kui-collection__actions:not([hidden]) { position: sticky; bottom: var(--kui-space-md); z-index: var(--kui-z-sticky); flex-wrap: wrap; align-self: center; max-width: 100%; margin-block-start: var(--kui-space-sm); padding: var(--kui-space-sm) var(--kui-space-md); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-md); background: var(--kui-surface); color: var(--kui-text); box-shadow: var(--kui-shadow-high); } .kui-collection__actions > .kui-button { flex: none; } .kui-collection__actions > [data-kui-moved] { display: none !important; } html:has(.kui-collection__main > .kui-collection__actions:not([hidden])) { scroll-padding-block-end: calc(var(--kui-control-height-sm) + 2 * var(--kui-space-sm) + 2px + var(--kui-space-md) + var(--kui-space-sm)); } .kui-collection[data-kui-fill] { scroll-margin-block-start: var(--kui-space-md); } .kui-collection__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--kui-space-sm) var(--kui-space-md); padding-block: var(--kui-space-md); color: var(--kui-text-muted); font-size: var(--kui-font-size-sm); } .kui-collection__more-count { color: var(--kui-text-muted); } .kui-collection__more-error { color: var(--kui-text); } .kui-collection[data-kui-grow] > .kui-collection__body > .kui-collection__main > .kui-collection__bar { position: sticky; top: 0; z-index: var(--kui-z-sticky); } .kui-collection[data-kui-grow] > .kui-collection__body > .kui-collection__main > .kui-collection__bar[data-kui-view='table'] { inset: auto; margin-block-end: calc(-1 * var(--kui-table-header-height) - 2px); } .kui-collection[data-kui-grow] > .kui-collection__body > .kui-collection__main > .kui-collection__bar[data-kui-view='table'][data-kui-density='compact'] { margin-block-end: calc(-1 * var(--kui-row-height-compact) - 2px); } .kui-collection[data-kui-grow] > .kui-collection__body > .kui-collection__main > .kui-collection__bar[data-kui-view='table'][data-kui-density='comfortable'] { margin-block-end: calc(-4rem - 2px); } @media (width < 37.5em) { .kui-collection__main > .kui-collection__actions:not([hidden]) { bottom: var(--kui-space-sm); flex-wrap: nowrap; align-self: stretch; } html:has(.kui-collection__main > .kui-collection__actions:not([hidden])) { scroll-padding-block-end: calc(var(--kui-control-height-sm) + 2 * var(--kui-space-sm) + 2px + var(--kui-space-sm) + var(--kui-space-sm)); } } .kui-collection__tools > .kui-dropdown { display: flex; min-width: 0; } .kui-collection__facet { display: inline-flex; align-items: center; gap: var(--kui-space-2xs); min-width: 0; max-width: 20rem; min-height: var(--kui-control-height-sm); padding: 0 var(--kui-space-xs) 0 var(--kui-space-sm); border: 0; border-radius: var(--kui-radius-sm); background: none; color: var(--kui-text-muted); font: inherit; white-space: nowrap; cursor: pointer; } .kui-collection__facet:is(:hover, [aria-expanded='true']) { background: var(--kui-surface-hover); color: var(--kui-text); } .kui-collection__facet:has(> .kui-collection__facet-mark) { color: var(--kui-text); font-weight: var(--kui-font-weight-medium); } .kui-collection__facet-mark { flex: none; width: 0.375rem; height: 0.375rem; margin-inline-end: var(--kui-space-2xs); border-radius: var(--kui-radius-full); background: var(--kui-indicator); } .kui-collection__facet-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .kui-collection__facet-value { font-weight: var(--kui-font-weight-regular); } .kui-collection__facet > .kui-icon { flex: none; width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); } .kui-collection__facet > .kui-collection__caret { width: 0.75rem; height: 0.75rem; } .kui-collection__facet > .kui-count { margin-inline-start: var(--kui-space-2xs); } .kui-collection__tools > .kui-dropdown:last-child { flex: none; } .kui-collection__sort-groups { display: flex; flex-direction: column; gap: var(--kui-space-md); } .kui-collection__picks { display: flex; flex-direction: column; margin: calc(-1 * var(--kui-space-xs)) 0; padding: 0; list-style: none; } .kui-collection__pick { display: flex; align-items: center; gap: var(--kui-space-sm); width: 100%; min-height: var(--kui-control-height); padding: 0 var(--kui-space-xs); border: 0; border-radius: var(--kui-radius-sm); background: none; color: var(--kui-text); font: inherit; text-align: start; cursor: pointer; } .kui-collection__pick:hover { background: var(--kui-surface-hover); } .kui-collection__pick > .kui-icon { flex: none; width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); color: var(--kui-text-muted); } .kui-collection__pick-label { flex: none; } .kui-collection__pick > .kui-collection__facet-value { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--kui-text-muted); text-overflow: ellipsis; white-space: nowrap; } .kui-collection__back { align-self: flex-start; margin-inline-start: calc(-1 * var(--kui-space-sm)); } .kui-collection__body { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--kui-space-md); min-width: 0; } @media (width >= 37.5em) { .kui-collection__body:has(> .kui-collection-dev:not(.kui-collection-dev--sheet)) { grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem); } } .kui-collection__keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-xs) var(--kui-space-md); color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); } .kui-collection__keys-hints { display: flex; flex-wrap: wrap; gap: var(--kui-space-xs) var(--kui-space-md); } .kui-collection__keys-help { margin-inline-start: auto; font-size: inherit; } .kui-collection__help { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--kui-space-lg); } .kui-collection__help-group { display: flex; flex-direction: column; gap: var(--kui-space-sm); min-width: 0; } .kui-collection__help-list { display: grid; grid-template-columns: fit-content(55%) minmax(0, 1fr); gap: var(--kui-space-xs) var(--kui-space-md); margin: 0; font-size: var(--kui-font-size-sm); } .kui-collection__help-list dt { overflow-wrap: anywhere; } .kui-collection__help-list dd { margin: 0; } .kui-collection .kui-table > thead[inert] { visibility: hidden; } .kui-collection .kui-data-table td { -webkit-font-smoothing: auto; position: relative; } .kui-data-table.kui-table-box { display: block; block-size: auto; } .kui-collection .kui-data-table .kui-table [aria-selected='true'] > td { background: var(--kui-accent-tint); box-shadow: none; } .kui-data-table [data-kui-list-slot] { flex: 1; align-self: stretch; padding-inline: var(--kui-space-md); } .kui-data-table [data-kui-list-slot='status'] { min-width: 7rem; max-width: 8rem; } .kui-data-table [data-kui-list-slot='trailing'] { min-width: 4.5rem; max-width: 6rem; } .kui-table[data-kui-react] td { padding: 0; border-top: 0; border-bottom: 1px solid var(--kui-border); } .kui-table[data-kui-react] td > .kui-data-table__cell { gap: 0; } .kui-data-table [data-kui-list-slot='title'] { flex: 3; min-width: 6rem; } .kui-data-table .kui-table[data-kui-react] td:focus-within::after { inset: 0 0 -1px; } .kui-collection__bar:not(:has(.kui-collection__bulk:not([hidden]))) { background: transparent; } .kui-collection__word { white-space: nowrap; } .kui-data-table[data-kui-view='list'] .kui-table td { height: var(--kui-row-height); } .kui-data-table[data-kui-view] .kui-table:where([data-kui-density='comfortable'], [data-kui-density='comfortable'] *):where(:not([data-kui-density='comfortable'] :is([data-kui-density='default'], [data-kui-density='compact']) *, :is([data-kui-density='default'], [data-kui-density='compact']))) td,
.kui-data-table[data-kui-view] .kui-table:where([data-kui-density='comfortable'], [data-kui-density='comfortable'] *):where(:not([data-kui-density='comfortable'] :is([data-kui-density='default'], [data-kui-density='compact']) *, :is([data-kui-density='default'], [data-kui-density='compact']))) th { height: 4rem; } .kui-data-table[data-kui-view='list'] .kui-table:where([data-kui-density='compact'], [data-kui-density='compact'] *):where(:not([data-kui-density='compact'] :is([data-kui-density='default'], [data-kui-density='comfortable']) *, :is([data-kui-density='default'], [data-kui-density='comfortable']))) td { height: var(--kui-row-height-compact); } .kui-data-table[data-kui-uniform] { container: kui-list / inline-size; } .kui-data-table[data-kui-uniform] td > .kui-data-table__cell { height: calc(var(--kui-row-height) - 1px); overflow: hidden; } .kui-data-table[data-kui-uniform] td [data-kui-list-slot] { padding-inline: var(--kui-space-sm); } kui-data-table[data-kui-uniform] [role='gridcell']:has(.kui-data-table__item),
.kui-data-table[data-kui-uniform] td [data-kui-list-slot='title'] { padding-inline-start: var(--kui-space-lg); } .kui-data-table[data-kui-uniform] .kui-data-table__item { display: grid; grid-template-columns: auto minmax(min(50%, 4rem), 1fr) fit-content(50%); grid-template-rows: 1.25rem 1rem; inline-size: 100%; } [data-kui-uniform] .kui-data-table__labels > :not([data-kui-label-overflow]),
[data-kui-uniform] .kui-data-table__labels > span > .kui-badge,
[data-kui-uniform] .kui-data-table__cell > .kui-badge { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-kui-uniform] .kui-data-table__labels > :not([data-kui-label-overflow]) { flex: 0 1 auto; } [data-kui-label-overflow='1'] { display: none; } @container kui-list (width < 37.5em) { [data-kui-uniform] .kui-data-table__labels > :nth-child(2),
    [data-kui-label-overflow='2'] { display: none; } [data-kui-label-overflow='1'] { display: inline; } } .kui-collection__bar[data-kui-tabs],
[data-kui-tabs] .kui-collection__pins { flex-wrap: wrap; } [data-kui-tabs] .kui-collection__tools { display: flex; align-items: center; gap: var(--kui-space-sm); margin-inline-start: auto; } [data-kui-tabs] .kui-collection__layout.kui-segmented { height: var(--kui-control-height-sm); } .kui-collection__field { position: relative; display: flex; flex: 1 1 0%; flex-wrap: nowrap; align-items: center; gap: var(--kui-space-sm); box-sizing: border-box; min-width: 0; min-height: var(--kui-control-height-lg); padding-inline-end: var(--kui-space-xs); border: 1px solid var(--kui-border-strong); border-radius: var(--kui-radius-sm); background: var(--kui-surface); cursor: text; } .kui-collection__field:hover { border-color: var(--kui-border-hover); } .kui-collection__field:has(.kui-combobox > .kui-input[aria-invalid='true']) { border-color: var(--kui-danger-outline); outline: 1px solid var(--kui-danger-outline); } .kui-collection__field:has(.kui-combobox > .kui-input:focus-visible) { border-color: var(--kui-focus); outline: var(--kui-focus-width) solid var(--kui-focus); outline-offset: 0; } .kui-collection__field > kui-collection-picker { display: flex; flex: none; align-self: stretch; border-inline-end: 1px solid var(--kui-border); cursor: default; } .kui-collection__field > kui-collection-picker > .kui-dropdown { display: flex; } .kui-collection__picker { justify-content: flex-start; gap: var(--kui-space-xs); width: auto; max-width: 22rem; height: auto; padding-inline: var(--kui-space-md) var(--kui-space-sm); border-radius: 0; border-start-start-radius: var(--kui-radius-sm); border-end-start-radius: var(--kui-radius-sm); } .kui-collection__picker > .kui-icon { flex: none; } .kui-collection__picker > .kui-icon:last-child { margin-inline-start: auto; color: var(--kui-text-muted); } .kui-collection__picker-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .kui-collection__picker-edited { flex: none; color: var(--kui-text-muted); font-weight: var(--kui-font-weight-regular); } .kui-collection__picker-menu { min-width: 17rem; } .kui-collection__menu-slot { flex: none; width: var(--kui-icon-size-md); } .kui-collection__view-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kui-collection__picker-menu .kui-count { margin-inline-start: var(--kui-space-md); font-variant-numeric: tabular-nums; } .kui-collection__total { flex: none; padding-inline: var(--kui-space-sm); color: var(--kui-text-muted); font-size: var(--kui-font-size-sm); font-variant-numeric: tabular-nums; white-space: nowrap; } .kui-collection__field > kui-collection-query-line > .kui-button,
.kui-collection__unsaved { flex: none; height: var(--kui-control-height-sm); box-shadow: none; } .kui-collection__unsaved { color: var(--kui-warn); } @media (width < 37.5em) { .kui-collection__top { gap: var(--kui-space-sm); } .kui-collection__field { flex-wrap: wrap; } .kui-collection__field > kui-collection-picker { flex: 1 1 100%; min-width: 0; height: calc(var(--kui-control-height-lg) - 2px); border-inline-end: 0; border-bottom: 1px solid var(--kui-border); } .kui-collection__picker { max-width: 100%; padding-inline: var(--kui-space-sm) var(--kui-space-xs); } .kui-collection__field:has(kui-collection-chips > *) { row-gap: var(--kui-space-xs); padding-block-end: var(--kui-space-2xs); } .kui-collection__field:has(kui-collection-chips > *) > kui-collection-query-line > kui-collection-chips { order: 1; flex: 1 1 calc(100% - 5rem); min-height: var(--kui-control-height-sm); padding-inline-start: var(--kui-space-xs); } .kui-collection__field:has(kui-collection-chips > *) > kui-collection-query-line > .kui-collection__clear,
    .kui-collection__field:has(kui-collection-chips > *) > .kui-collection__unsaved { order: 2; } .kui-collection__field > kui-collection-query-line > .kui-combobox { min-width: 3rem; } } kui-collection-query-line { display: contents; } kui-collection-query-line > .kui-icon { flex: none; width: var(--kui-icon-size); height: var(--kui-icon-size); margin-inline-start: var(--kui-space-md); color: var(--kui-text-muted); } kui-collection-query-line > .kui-combobox { flex: 1 1 0%; align-self: stretch; min-width: 6rem; } kui-collection-query-line .kui-input,
kui-collection-query-line .kui-input:is(:hover, :focus, :focus-visible, [aria-invalid='true']) { height: 100%; min-height: calc(var(--kui-control-height-lg) - 2px); padding-inline: 0 var(--kui-space-xs); border: 0; border-radius: 0; outline: 0; background: transparent; } .kui-collection__clear { margin-inline-start: calc(-1 * var(--kui-space-2xs)); } .kui-collection__suggest-anchor { position: absolute; inset-block: -1px; inset-inline-start: -1px; width: 0; overflow: hidden; pointer-events: none; } .kui-collection__suggest-mirror { visibility: hidden; white-space: pre; } .kui-collection__suggest { width: min(24rem, calc(100vw - 2 * var(--kui-space-md))); max-width: min(24rem, calc(100vw - 2 * var(--kui-space-md))); max-height: min(24rem, calc(100dvh - 2 * var(--kui-space-md))); } @media (width < 37.5em) { .kui-collection__suggest { width: min(36rem, calc(100vw - 2 * var(--kui-space-md))); max-width: min(36rem, calc(100vw - 2 * var(--kui-space-md))); } } .kui-collection__suggest-message { display: flex; align-items: flex-start; gap: var(--kui-space-xs); margin: 0; padding: var(--kui-space-sm) var(--kui-space-md); border-bottom: 1px solid var(--kui-border); color: var(--kui-danger); font-size: var(--kui-font-size-sm); } .kui-collection__suggest-message > .kui-icon { flex: none; width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); margin-top: var(--kui-space-2xs); } .kui-collection__suggestion { display: flex; flex-wrap: nowrap; align-items: center; column-gap: var(--kui-space-sm); box-sizing: border-box; min-height: var(--kui-control-height-sm); padding-block: var(--kui-space-xs); overflow-wrap: normal; white-space: nowrap; } .kui-collection__suggestion-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .kui-collection__suggestion-icon { flex: none; width: var(--kui-icon-size-sm); height: var(--kui-icon-size-sm); color: var(--kui-text-muted); } .kui-collection__suggestion-token { flex: none; order: 1; margin-inline-start: auto; color: var(--kui-text-muted); font-family: var(--kui-font-mono); font-size: var(--kui-font-size-xs); } .kui-collection__suggestion > .kui-count { flex: none; order: 1; margin-inline-start: auto; } .kui-collection__suggestion-token ~ .kui-count { margin-inline-start: 0; } .kui-collection__suggestion > .kui-listbox__description { flex: 1 1 0%; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; } .kui-collection__chips { display: flex; flex: 0 1 auto; align-items: center; gap: var(--kui-space-xs); min-width: 0; cursor: default; } .kui-collection__chips:empty { display: none; } .kui-collection__chip-list { flex: 0 1 auto; flex-wrap: nowrap; gap: var(--kui-space-sm); min-width: 0; margin: calc(-1 * var(--kui-space-2xs)) 0; padding: var(--kui-space-2xs); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .kui-collection__chip { flex: none; min-height: var(--kui-control-height-sm); font-size: var(--kui-font-size-sm); white-space: nowrap; } .kui-collection__chip:has(> .kui-dropdown) { padding-inline-start: 0; } .kui-collection__chip > .kui-dropdown { display: inline-flex; } .kui-collection__chip--not { border-style: dashed; } .kui-collection__chip[aria-current='true'] { border-color: var(--kui-indicator); box-shadow: 0 0 0 1px var(--kui-indicator); } .kui-collection__chip-edit { display: inline-flex; align-items: center; min-height: calc(var(--kui-control-height-sm) - 2px); margin-block: -1px; padding: 0 var(--kui-space-2xs) 0 var(--kui-space-sm); border: 0; border-radius: var(--kui-radius-sm); background: none; color: inherit; white-space: nowrap; cursor: pointer; } .kui-collection__chip-edit:hover { background-color: var(--kui-surface-active); } .kui-collection__hint { position: absolute; top: calc(100% + var(--kui-space-xs)); inset-inline-end: 0; z-index: var(--kui-z-drawer); display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-xs) var(--kui-space-sm); width: max-content; max-width: min(36rem, 100%); box-sizing: border-box; padding: var(--kui-space-xs) var(--kui-space-xs) var(--kui-space-xs) var(--kui-space-md); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface); color: var(--kui-text); box-shadow: var(--kui-shadow-high); font-size: var(--kui-font-size-sm); white-space: normal; } .kui-collection__hint > .kui-icon { flex: none; width: var(--kui-icon-size-md); height: var(--kui-icon-size-md); color: var(--kui-text-muted); } .kui-collection__hint > p { flex: 1 1 auto; margin: 0; } .kui-collection__hint-actions { display: flex; flex-wrap: wrap; gap: var(--kui-space-xs); } .kui-collection__editor { display: flex; flex-direction: column; gap: var(--kui-space-md); } .kui-collection__editor > .kui-field__hint { margin: 0; } .kui-collection__editor :is(.kui-checkbox, .kui-radio):has(> .kui-collection__option-count) { display: flex; } .kui-collection__option-count { margin-inline-start: auto; padding-inline-start: var(--kui-space-sm); color: var(--kui-text-muted); font-variant-numeric: tabular-nums; } .kui-collection__editor > .kui-button { align-self: flex-start; } .kui-collection__suggest { border-color: var(--kui-border-strong); box-shadow: var(--kui-shadow-high); } .kui-collection-dev { position: sticky; top: var(--kui-space-md); display: flex; flex-direction: column; min-width: 0; max-height: calc(100dvh - 2 * var(--kui-space-md)); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-md); background: var(--kui-surface); color: var(--kui-text); box-shadow: var(--kui-shadow-low); } .kui-collection-dev__head { display: flex; align-items: center; gap: var(--kui-space-xs); padding: var(--kui-space-xs) var(--kui-space-xs) 0 var(--kui-space-md); } .kui-collection-dev__title { display: inline-flex; align-items: center; gap: var(--kui-space-xs); margin: 0; font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); } .kui-collection-dev__head > .kui-button { margin-inline-start: auto; } .kui-collection-dev__tabs { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .kui-collection-dev__tabs > .kui-tabs { flex-shrink: 0; padding-inline: var(--kui-space-sm); } .kui-collection-dev__tabs > .kui-tab-panel { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--kui-space-sm) var(--kui-space-md) var(--kui-space-md); } .kui-collection-dev .kui-code-block { max-height: 22rem; padding: var(--kui-space-sm); } .kui-collection-dev__wrap.kui-code-block { white-space: pre-wrap; overflow-wrap: anywhere; } .kui-collection-dev__heading { margin: var(--kui-space-md) 0 var(--kui-space-xs); color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); font-weight: var(--kui-font-weight-semibold); letter-spacing: var(--kui-letter-spacing-caps); text-transform: uppercase; } .kui-collection-dev__heading:first-child { margin-top: 0; } .kui-collection-dev__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-xs); margin: var(--kui-space-xs) 0; } .kui-collection-dev__id { margin-inline-end: auto; font-family: var(--kui-font-mono); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); } .kui-collection-dev__meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--kui-space-2xs) var(--kui-space-md); margin: 0; font-size: var(--kui-font-size-xs); } .kui-collection-dev__meta dt { color: var(--kui-text-muted); } .kui-collection-dev__meta dd { margin: 0; font-family: var(--kui-font-mono); overflow-wrap: anywhere; } .kui-collection-dev__status-code { display: inline-flex; align-items: center; gap: var(--kui-space-2xs); } .kui-collection-dev__note,
.kui-collection-dev__empty { margin: var(--kui-space-sm) 0 0; color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); } .kui-collection-dev__empty { margin: 0; padding-block: var(--kui-space-sm) 0; font-size: var(--kui-font-size-sm); } .kui-collection-dev__table { width: 100%; border-collapse: collapse; font-size: var(--kui-font-size-xs); font-variant-numeric: tabular-nums; } .kui-collection-dev__table th,
.kui-collection-dev__table td { padding: var(--kui-space-2xs) var(--kui-space-xs); border-bottom: 1px solid var(--kui-border); text-align: start; white-space: nowrap; } .kui-collection-dev__table th { color: var(--kui-text-muted); font-weight: var(--kui-font-weight-semibold); } .kui-collection-dev__table td:first-child,
.kui-collection-dev__url { font-family: var(--kui-font-mono); } .kui-collection-dev__url { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kui-collection-dev__modules { margin: 0; padding: 0; list-style: none; font-family: var(--kui-font-mono); font-size: var(--kui-font-size-xs); } .kui-collection-dev__modules > li { padding: var(--kui-space-2xs) 0; border-bottom: 1px solid var(--kui-border); } .kui-collection-dev__status { flex-shrink: 0; margin: 0; padding: 0 var(--kui-space-md); color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); } .kui-collection-dev__status:not(:empty) { padding-block: var(--kui-space-xs); border-top: 1px solid var(--kui-border); } .kui-collection-dev--sheet { position: fixed; inset: auto 0 0; z-index: var(--kui-z-drawer); max-height: 55dvh; border-width: 1px 0 0; border-radius: var(--kui-radius-md) var(--kui-radius-md) 0 0; box-shadow: var(--kui-shadow-high); } @media (width < 37.5em) { .kui-collection-dev { position: fixed; inset: auto 0 0; z-index: var(--kui-z-drawer); max-height: 55dvh; border-width: 1px 0 0; border-radius: var(--kui-radius-md) var(--kui-radius-md) 0 0; box-shadow: var(--kui-shadow-high); } } } @layer kui.components { .kui-workspace { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 220px); height: 100%; min-height: 0; min-width: 0; overflow: hidden; background: var(--kui-surface); } .kui-workspace__body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; overflow: hidden; } .kui-workspace__body:has(> .kui-workspace__inspector:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); } .kui-workspace__main,
.kui-workspace__inspector { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--kui-space-md); } .kui-workspace__inspector { border-inline-start: 1px solid var(--kui-border); } .kui-workspace__inspector[hidden] { display: none; } .kui-workspace__separator { display: grid; place-items: center; min-height: 24px; touch-action: none; user-select: none; background: var(--kui-surface); border-block-start: 1px solid var(--kui-border); } .kui-workspace__separator::before { content: ''; width: 2.5rem; height: 3px; border-radius: var(--kui-radius-sm); background: var(--kui-text-muted); } .kui-workspace__separator[role='separator'] { cursor: ns-resize; } .kui-workspace__separator[role='separator']:hover { background: var(--kui-surface-hover); } .kui-workspace__separator:focus-visible { outline: var(--kui-focus-width) solid var(--kui-focus); outline-offset: calc(-1 * var(--kui-focus-width)); } .kui-workspace__dock { min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: var(--kui-space-sm) var(--kui-space-md); } @media (width < 45em) { .kui-workspace__body,
    .kui-workspace__body:has(> .kui-workspace__inspector:not([hidden])) { display: block; overflow: auto; overscroll-behavior: contain; } .kui-workspace__main,
    .kui-workspace__inspector { overflow: visible; } .kui-workspace__inspector { border-inline-start: 0; border-block-start: 1px solid var(--kui-border); } } @media (forced-colors: active) { .kui-workspace__separator::before { background: ButtonText; } .kui-workspace__separator:focus-visible { outline-color: Highlight; } } } @layer kui.components { .kui-history { direction: ltr; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(2rem, 1fr) auto auto; gap: var(--kui-space-2xs) var(--kui-space-lg); min-width: 0; min-height: 0; height: 100%; padding-inline-end: .625rem; font-size: var(--kui-font-size-xs); font-variant-numeric: tabular-nums; } .kui-history:has(.kui-history__lanes:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 25%); } .kui-history__chart, .kui-history__lane { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--kui-space-sm); min-height: 0; } .kui-history__chart { grid-area: 1 / 1; } .kui-history__scale, .kui-history__axis { display: flex; justify-content: space-between; color: var(--kui-text-muted); } .kui-history__scale { flex-direction: column; text-align: end; } .kui-history__plot { width: 100%; height: 100%; min-height: 0; overflow: visible; cursor: crosshair; border-bottom: 1px solid var(--kui-border); } .kui-history__gap, .kui-history__line, .kui-history__cursor, .kui-history__marker { vector-effect: non-scaling-stroke; } .kui-history__line, .kui-history__cursor, .kui-history__marker { stroke-width: 2; } .kui-history__gap { fill: var(--kui-surface-sunken); stroke: var(--kui-border); stroke-dasharray: 3 3; } .kui-history__line { fill: none; stroke: var(--kui-info); } .kui-history__cursor { stroke: var(--kui-indicator); } .kui-history__marker { fill: var(--kui-surface); stroke: var(--kui-indicator); } .kui-history__lanes { grid-area: 1 / 2 / 4; min-height: 0; overflow: auto; } .kui-history__lane { align-items: center; min-height: 1.5rem; } .kui-history__label { display: block; padding: 0; border: 0; background: none; color: var(--kui-text); font: inherit; text-align: end; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } button.kui-history__label { min-height: 1.5rem; cursor: pointer; border-radius: var(--kui-radius-xs); } .kui-history__track { position: relative; min-height: 1.5rem; cursor: crosshair; } .kui-history__lane-cursor { position: absolute; inset-block: calc(-1 * var(--kui-space-2xs)); width: 2px; transform: translateX(-50%); background: var(--kui-indicator); outline: 2px solid var(--kui-surface); pointer-events: none; } .kui-history__interval { position: absolute; inset-block: 0; overflow: hidden; padding: 0; border: 0; border-radius: 0; font: inherit; font-size: 0; white-space: nowrap; color: var(--kui-text-muted); background: currentColor; } .kui-history__interval[data-kui-tone='info'] { color: var(--kui-info); } .kui-history__interval[data-kui-tone='success'] { color: var(--kui-ok); } .kui-history__interval[data-kui-tone='warning'] { color: var(--kui-warn); } .kui-history__interval[data-kui-tone='error'] { color: var(--kui-danger); } .kui-history:not([data-kui-density='comfortable']):where(:not([data-kui-density='comfortable'] :not([data-kui-density]))) .kui-history__interval:is([data-kui-tone='neutral'], :not([data-kui-tone])) { background: none; box-shadow: inset 0 0 0 1px currentColor; } .kui-history:not([data-kui-density='comfortable']):where(:not([data-kui-density='comfortable'] :not([data-kui-density]))) .kui-history__interval[data-kui-tone='success'] { background: repeating-linear-gradient(90deg, currentColor 0 .5rem, transparent .5rem .625rem); } .kui-history:not([data-kui-density='comfortable']):where(:not([data-kui-density='comfortable'] :not([data-kui-density]))) .kui-history__interval[data-kui-tone='warning'] { background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); } .kui-history:not([data-kui-density='comfortable']):where(:not([data-kui-density='comfortable'] :not([data-kui-density]))) .kui-history__interval[data-kui-tone='error'] { background: repeating-linear-gradient(45deg, currentColor 0 3px, transparent 3px 5px); } .kui-history__range { grid-area: 2 / 1; margin-inline-start: calc(5rem + var(--kui-space-sm) - .625rem); } .kui-history__range:focus { outline: none; } .kui-history__range::-moz-focus-outer { border: 0; } .kui-history:has(.kui-history__range[data-kui-focus='keyboard']:focus) .kui-history__plot { outline: var(--kui-focus-width) solid var(--kui-focus); } .kui-history__axis { margin-inline-start: calc(5rem + var(--kui-space-sm)); grid-area: 3 / 1; } :is(button, [tabindex]).kui-history__interval { inset-block: 50% auto; min-height: 1.5rem; transform: translateY(-50%); border-block: .625rem solid var(--kui-surface); cursor: pointer; } button.kui-history__interval:hover,
button.kui-history__interval:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true']) { border-block-color: var(--kui-surface-hover); } .kui-history:not([data-kui-density='comfortable']):where(:not([data-kui-density='comfortable'] :not([data-kui-density]))) .kui-history__interval:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true']) { overflow: visible; } .kui-history:not([data-kui-density='comfortable']):where(:not([data-kui-density='comfortable'] :not([data-kui-density]))) .kui-history__interval:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true'])::before { content: ''; position: absolute; inset-block: -.625rem; inset-inline-start: 0; width: var(--kui-indicator-width); background: var(--kui-indicator); } .kui-history__interval:focus-visible, .kui-history__label:focus-visible,
.kui-history__track:focus-visible, .kui-history__track:focus-visible > [data-kui-active] { z-index: var(--kui-z-raised); outline: var(--kui-focus-width) solid var(--kui-focus); outline-offset: calc(-1 * var(--kui-focus-width)); } .kui-history[data-kui-layout='stacked']:has(.kui-history__lanes:not([hidden])) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(2rem, .7fr) auto auto minmax(0, 1fr); } .kui-history[data-kui-layout='stacked'] .kui-history__lanes { grid-area: 4 / 1; scrollbar-gutter: stable; } .kui-history.kui-history--sparkline { padding-inline: .625rem; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0; } .kui-history--sparkline .kui-history__chart { grid-template-columns: minmax(0, 1fr); } .kui-history--sparkline .kui-history__scale { display: none; } .kui-history--sparkline .kui-history__range { grid-area: 1 / 1; align-self: center; } .kui-history--sparkline .kui-history__axis { margin-inline-start: 0; grid-row: 2; line-height: var(--kui-line-height); font-size: var(--kui-font-size-2xs); } .kui-history:not([data-kui-density='comfortable']):where(:not([data-kui-density='comfortable'] :not([data-kui-density]))) .kui-history__lane-cursor { inset-block: .125rem; } .kui-history:is([data-kui-density='comfortable'], [data-kui-density='comfortable'] :where(:not([data-kui-density]))) .kui-history__lane { min-height: 2.25rem; } .kui-history:is([data-kui-density='comfortable'], [data-kui-density='comfortable'] :where(:not([data-kui-density]))) .kui-history__track { height: 1.75rem; background: var(--kui-surface-sunken); } .kui-history:is([data-kui-density='comfortable'], [data-kui-density='comfortable'] :where(:not([data-kui-density]))) .kui-history__interval { inset-block: 0; min-height: 0; transform: none; border: 0; box-shadow: inset 3px 0 var(--kui-text-muted); background: var(--kui-surface-sunken); background-position: 3px 0; color: var(--kui-text); font-size: var(--kui-font-size-xs); text-align: start; line-height: 1.75rem; font-weight: var(--kui-font-weight-medium); } .kui-history:is([data-kui-density='comfortable'], [data-kui-density='comfortable'] :where(:not([data-kui-density]))) .kui-history__interval[data-kui-tone='info'] { box-shadow: inset 3px 0 currentColor; background: var(--kui-info-tint); color: var(--kui-info); } .kui-history:is([data-kui-density='comfortable'], [data-kui-density='comfortable'] :where(:not([data-kui-density]))) .kui-history__interval[data-kui-tone='success'] { box-shadow: inset 3px 0 currentColor; background: var(--kui-ok-tint); color: var(--kui-ok); } .kui-history:is([data-kui-density='comfortable'], [data-kui-density='comfortable'] :where(:not([data-kui-density]))) .kui-history__interval[data-kui-tone='warning'] { box-shadow: inset 3px 0 currentColor; background: var(--kui-warn-tint); color: var(--kui-warn); } .kui-history:is([data-kui-density='comfortable'], [data-kui-density='comfortable'] :where(:not([data-kui-density]))) .kui-history__interval[data-kui-tone='error'] { box-shadow: inset 3px 0 currentColor; background: var(--kui-danger-tint); color: var(--kui-danger); } .kui-history:is([data-kui-density='comfortable'], [data-kui-density='comfortable'] :where(:not([data-kui-density]))) .kui-history__interval:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true']) { box-shadow: inset var(--kui-indicator-width) 0 var(--kui-indicator); background: var(--kui-surface-hover); color: var(--kui-text); } @media (width < 37.5em) { .kui-history:has(.kui-history__lanes:not([hidden])) { grid-template-columns: minmax(0, 1fr); } .kui-history:not([data-kui-layout='stacked']) .kui-history__lanes { display: none; } } .kui-history__gap-label { fill: var(--kui-text-muted); text-anchor: middle; font-size: var(--kui-font-size-sm); } .kui-history[data-kui-variant='lanes'] > :not(.kui-history__lanes) { display: none; } .kui-history[data-kui-variant='lanes']:has(.kui-history__lanes:not([hidden])) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } .kui-history[data-kui-variant='lanes'] .kui-history__lanes:not([hidden]) { grid-area: 1 / 1; display: block; } .kui-history__legend,
.kui-history__legend > span { display: flex; align-items: center; gap: var(--kui-space-xs); } .kui-history__legend { overflow-x: auto; } .kui-history__legend > span { flex: none; } .kui-history__legend .kui-history__interval { position: static; width: 1rem; height: .25rem; } .kui-history:is([data-kui-density='comfortable'], [data-kui-density='comfortable'] :where(:not([data-kui-density]))) .kui-history__legend .kui-history__interval { box-shadow: none; background: currentColor; } .kui-history__interval[role='option'] { pointer-events: none; } .kui-history__interval > span { display: block; overflow: hidden; text-overflow: ellipsis; margin-inline: calc(3px + var(--kui-space-2xs)) var(--kui-space-2xs); } .kui-history__interval:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true']) > span { margin-inline-start: calc(var(--kui-indicator-width) + var(--kui-space-2xs)); } } @layer kui.components { .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(3rem, 1fr) minmax(0, max-content) auto; gap: 0; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline) .kui-history__lanes { grid-area: 2 / 1; max-height: 15rem; scrollbar-gutter: stable; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline) .kui-history__lanes:not([hidden]) { display: block; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline) .kui-history__range { grid-area: 1 / 1; z-index: var(--kui-z-raised); height: 100%; margin-inline-start: calc(5rem + var(--kui-space-sm)); } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline) .kui-history__range::-webkit-slider-runnable-track { background: transparent; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline) .kui-history__range::-moz-range-track { background: transparent; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline) .kui-history__range::-webkit-slider-thumb { width: 0; border: 0; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline) .kui-history__range::-moz-range-thumb { width: 0; border: 0; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline) :is(.kui-history__marker, .kui-history__lane-cursor) { display: none; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline)[data-kui-density='compact'] .kui-history__track { height: 2px; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline)[data-kui-density='compact'] .kui-history__interval { border-block-width: 11px; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline)[data-kui-density='compact'] .kui-history__interval[data-kui-tone='success'] { background: currentColor; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline)[data-kui-density='compact'] .kui-history__interval[data-kui-tone='info'] { background: repeating-linear-gradient(90deg, currentColor 0 .5rem, transparent .5rem .625rem); } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline)[data-kui-density='compact'] .kui-history__interval[data-kui-tone='neutral'] { border-block-width: 10px; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline) .kui-history__interval[data-kui-coverage='missing'] { background-image: repeating-linear-gradient(90deg, var(--kui-border-strong) 0 1px, var(--kui-surface-sunken) 1px 4px); } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline):not([data-kui-density='comfortable']):where(:not([data-kui-density='comfortable'] :not([data-kui-density]))) .kui-history__interval[data-kui-coverage='missing'] { box-shadow: none; } .kui-history[data-kui-layout='combined']:not(.kui-history--sparkline) .kui-history__plot { z-index: var(--kui-z-raised); pointer-events: none; } .kui-history[data-kui-layout='combined'] .kui-history__interval { container-type: inline-size; text-overflow: clip; } .kui-history[data-kui-layout='combined'] .kui-history__interval > span { display: block; overflow: hidden; text-overflow: ellipsis; } @container (width < 4em) { .kui-history[data-kui-layout='combined'] .kui-history__interval > span { visibility: hidden; } } } @layer kui.components { .kui-status-list { display: block; container-type: inline-size; min-width: 0; border: 1px solid var(--kui-border); border-radius: var(--kui-radius-md); background: var(--kui-surface); color: var(--kui-text); } .kui-status-list__group { display: grid; grid-template-columns: 10rem minmax(0, 1fr); min-width: 0; } .kui-status-list__group + .kui-status-list__group { border-block-start: 1px solid var(--kui-border); } .kui-status-list__label { display: flex; flex-wrap: nowrap; align-content: start; align-items: center; gap: var(--kui-space-xs); min-width: 0; margin: 0; padding: var(--kui-space-md); font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); overflow-wrap: anywhere; } .kui-status-list__rows { min-width: 0; } .kui-status-list__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; grid-template-areas: 'leading content status value meter trailing'; align-items: center; gap: var(--kui-space-sm); box-sizing: border-box; width: 100%; min-height: var(--kui-control-height-lg); padding: var(--kui-space-sm); border: 0; border-inline-start: var(--kui-indicator-width) solid transparent; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: var(--kui-font-size-sm); text-align: start; text-decoration: none; cursor: pointer; } .kui-status-list__row + .kui-status-list__row { border-block-start: 1px solid var(--kui-border); } .kui-status-list__row:hover:not(:disabled, [aria-disabled='true']) { background: var(--kui-surface-hover); } .kui-status-list__row:where([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true']) { border-inline-start-color: var(--kui-indicator); background: var(--kui-surface-hover); } .kui-status-list__row:focus-visible { outline-offset: -3px; } .kui-status-list__row:is(:disabled, [aria-disabled='true']) { color: var(--kui-text-disabled); cursor: not-allowed; } .kui-status-list__leading { grid-area: leading; min-width: 2rem; font-weight: var(--kui-font-weight-semibold); } .kui-status-list__content { grid-area: content; display: grid; min-width: 0; overflow-wrap: anywhere; } .kui-status-list__content > small { color: var(--kui-text-muted); font-size: var(--kui-font-size-xs); } .kui-status-list__status { grid-area: status; min-width: 0; overflow-wrap: anywhere; } .kui-status-list__value { grid-area: value; min-width: 4rem; font-weight: var(--kui-font-weight-semibold); font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; } .kui-status-list__meter { grid-area: meter; width: 6rem; display: flex; align-items: center; gap: var(--kui-space-xs); min-width: 0; font-variant-numeric: tabular-nums; text-align: end; } .kui-status-list__meter > .kui-progress { flex: 1 1 0; min-width: 0; width: auto; } .kui-status-list__trailing { grid-area: trailing; display: flex; justify-content: end; min-width: 0; color: var(--kui-text-muted); } @container (max-width: 48rem) { .kui-status-list__group { grid-template-columns: minmax(0, 1fr); } .kui-status-list__label { padding: var(--kui-space-xs) var(--kui-space-sm); background: var(--kui-surface-sunken); } .kui-status-list__leading { min-width: 1.5rem; } .kui-status-list__row { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 'leading content value trailing' '. status meter .'; gap: var(--kui-space-2xs) var(--kui-space-sm); } } .kui-status-list__label > div { min-width: 0; } .kui-status-list:where([data-kui-density='compact'], [data-kui-density='compact'] *):where(:not([data-kui-density='compact'] :is([data-kui-density='default'], [data-kui-density='comfortable']) *, :is([data-kui-density='default'], [data-kui-density='comfortable']))) .kui-status-list__row,
.kui-status-list--compact .kui-status-list__row { min-height: var(--kui-row-height-compact); padding-block: var(--kui-space-xs); } .kui-status-list__row[data-kui-tone='danger'] { border-inline-start-color: var(--kui-danger-fill); } .kui-status-list__row[data-kui-tone='warning'] { border-inline-start-color: var(--kui-warn-fill); } .kui-status-list__row[data-kui-tone='info'] { border-inline-start-color: var(--kui-info-border); } .kui-status-list__row[data-kui-tone='success'] { border-inline-start-color: var(--kui-ok-border); } .kui-status-list__row[data-kui-tone='neutral'] { border-inline-start-color: var(--kui-text-muted); } @container (width < 30rem) { .kui-status-list__row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'leading content' '. status' '. value' '. meter' '. trailing'; } .kui-status-list__value,
    .kui-status-list__meter,
    .kui-status-list__trailing { justify-content: start; text-align: start; min-width: 0; } } } @layer kui.components { .kui-channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 4rem), 1fr)); align-items: start; gap: var(--kui-space-xs); min-width: 0; } .kui-channel-grid__module { display: grid; gap: var(--kui-space-xs); min-width: 0; padding: var(--kui-space-xs); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-sm); background: var(--kui-surface-sunken); color: var(--kui-text); } .kui-channel-grid__label { margin: 0; color: var(--kui-text-muted); font-size: var(--kui-font-size-2xs); font-weight: var(--kui-font-weight-medium); text-align: center; overflow-wrap: anywhere; } .kui-channel-grid__channel { position: relative; display: grid; justify-items: center; align-content: center; gap: var(--kui-space-2xs); box-sizing: border-box; width: 100%; min-height: var(--kui-control-height-lg); padding: var(--kui-space-xs) var(--kui-space-2xs); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-xs); background: var(--kui-surface); color: var(--kui-text); font: inherit; font-size: var(--kui-font-size-xs); text-align: center; cursor: pointer; } .kui-channel-grid__channel:hover:not(:disabled, [aria-disabled='true']),
.kui-channel-grid__channel:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true']) { background: var(--kui-surface-hover); } .kui-channel-grid__channel:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true'])::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--kui-indicator-width); background: var(--kui-indicator); } .kui-channel-grid__channel:focus-visible { outline: var(--kui-focus-width) solid var(--kui-focus); outline-offset: 2px; } .kui-channel-grid__channel:is(:disabled, [aria-disabled='true']) { color: var(--kui-text-disabled); cursor: not-allowed; } .kui-channel-grid__name { display: inline-flex; align-items: center; justify-content: center; gap: var(--kui-space-2xs); font-weight: var(--kui-font-weight-semibold); overflow-wrap: anywhere; } .kui-channel-grid__reading { font-size: var(--kui-font-size-2xs); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } } @layer kui.components { .kui-charging-chart { margin: 0; min-width: 0; color: var(--kui-text); background: var(--kui-surface); } .kui-charging-chart__legend { display: flex; flex-wrap: wrap; gap: var(--kui-space-md); list-style: none; padding: 0; } .kui-charging-chart__plot { display: block; overflow: hidden; } .kui-charging-chart text { fill: var(--kui-text); font-size: var(--kui-font-size-xs); } .kui-charging-chart__power { fill: none; stroke: var(--kui-series-1); stroke-width: 2; } .kui-charging-chart__soc { fill: none; stroke: var(--kui-series-2); stroke-width: 2; stroke-dasharray: 6 4; } .kui-charging-chart__axis { fill: none; stroke: var(--kui-border); } .kui-charging-chart__data { max-width: 100%; overflow-x: auto; } .kui-charging-chart th, .kui-charging-chart td { padding: var(--kui-space-sm); text-align: start; } .kui-charging-chart__date { overflow-wrap: anywhere; } .kui-charging-chart__time-tick { font-variant-numeric: tabular-nums; } @media print { .kui-charging-chart__power,
    .kui-charging-chart__soc { stroke: var(--kui-text); } .kui-charging-chart__data { overflow: visible; } } .kui-charging-chart__plot circle { stroke-dasharray: none; } } @layer kui.components { .kui-board { container: kui-board / inline-size; overflow: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; padding-block-end: var(--kui-space-xs); } .kui-board:focus-visible { outline: var(--kui-focus-width) solid var(--kui-focus); outline-offset: 2px; border-radius: var(--kui-radius-md); } .kui-board[data-dragging] { scroll-snap-type: none; user-select: none; cursor: grabbing; } .kui-board__grid { display: flex; flex-direction: column; gap: var(--kui-space-2xs); inline-size: min-content; min-inline-size: 100%; } .kui-board__row { display: grid; grid-auto-columns: minmax(16rem, 1fr); grid-auto-flow: column; gap: var(--kui-space-sm); } @container kui-board (max-width: 40rem) { .kui-board__row { grid-auto-columns: calc(100cqi - var(--kui-space-lg)); } .kui-board__column,
    .kui-board__cell { scroll-snap-align: start; } } .kui-board__column { padding: var(--kui-space-sm) var(--kui-space-sm) var(--kui-space-xs); border-radius: var(--kui-radius-md) var(--kui-radius-md) 0 0; background: var(--kui-surface-sunken); } .kui-board__heading { display: flex; align-items: center; gap: var(--kui-space-sm); margin: 0; font-size: var(--kui-font-size-xs); font-weight: var(--kui-font-weight-semibold); letter-spacing: var(--kui-letter-spacing-caps); text-transform: uppercase; color: var(--kui-text-muted); } .kui-board__heading > .kui-count { margin-inline-start: auto; } .kui-board__description { margin: var(--kui-space-2xs) 0 0; font-size: var(--kui-font-size-xs); color: var(--kui-text-muted); } .kui-board__lane { margin: var(--kui-space-sm) 0 0; font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); } .kui-board__lane > button { position: sticky; inset-inline-start: 0; display: inline-flex; align-items: center; gap: var(--kui-space-xs); min-block-size: 24px; padding: var(--kui-space-2xs) var(--kui-space-xs); border: 0; border-radius: var(--kui-radius-sm); background: none; color: var(--kui-text); font: inherit; cursor: pointer; } .kui-board__lane > button:hover { background: var(--kui-surface-hover); } .kui-board__lane > button:focus-visible { outline: var(--kui-focus-width) solid var(--kui-focus); outline-offset: calc(-1 * var(--kui-focus-width)); } .kui-board__chevron { flex: none; color: var(--kui-text-muted); } .kui-board__lane > [aria-expanded='false'] > .kui-board__chevron { transform: rotate(-90deg); } .kui-board__lane > [aria-expanded='false'] > .kui-board__chevron:dir(rtl) { transform: rotate(90deg); } @media (prefers-reduced-motion: no-preference) { .kui-board__chevron { transition: transform var(--kui-duration-fast) var(--kui-easing); } } .kui-board__lane-count { font-weight: var(--kui-font-weight-regular); color: var(--kui-text-muted); } .kui-board__cell { display: flex; flex-direction: column; gap: var(--kui-space-xs); min-block-size: 6rem; margin: 0; padding: var(--kui-space-xs); list-style: none; border: 2px dashed transparent; background: var(--kui-surface-sunken); } .kui-board__row:last-child > .kui-board__cell { border-end-start-radius: var(--kui-radius-md); border-end-end-radius: var(--kui-radius-md); } @media (prefers-reduced-motion: no-preference) { .kui-board__cell { transition: border-color var(--kui-duration-fast) var(--kui-easing), background-color var(--kui-duration-fast) var(--kui-easing); } } .kui-board__cell[data-drop='open'] { border-color: var(--kui-border-strong); } .kui-board__cell[data-drop='open'][data-drop-over] { border-style: solid; border-color: var(--kui-text-muted); background: var(--kui-accent-tint); } .kui-board__cell[data-drop='blocked'] { cursor: not-allowed; } .kui-board__cell[data-drop='blocked'][data-drop-over] { border-color: var(--kui-warn); } .kui-board__cell[data-drop='blocked'][data-drop-reason]::after { content: attr(data-drop-reason); padding: var(--kui-space-sm); font-size: var(--kui-font-size-xs); text-align: center; color: var(--kui-text-muted); } .kui-board__cell[data-drop='blocked'][data-drop-reason][data-drop-over]::after { color: var(--kui-text); } .kui-board__card { display: flex; flex-direction: column; gap: var(--kui-space-xs); min-inline-size: 0; padding: var(--kui-space-sm); border: 1px solid var(--kui-border); border-radius: var(--kui-radius-md); background: var(--kui-surface); color: var(--kui-text); box-shadow: var(--kui-shadow-low); overflow-wrap: anywhere; } [data-kui-behavior='board'] .kui-board__card:not([data-locked]) { cursor: grab; } [data-kui-behavior='board'][data-locked] .kui-board__card,
[data-kui-behavior='board'] [data-locked] .kui-board__card { cursor: auto; } .kui-board__card[data-staged] { outline: 2px dashed var(--kui-info-border); outline-offset: -2px; } .kui-board__card[data-dragging] { border-style: dashed; border-color: var(--kui-border-strong); background: transparent; box-shadow: none; } .kui-board__card[data-dragging] > * { visibility: hidden; } .kui-board__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kui-space-xs); } .kui-board__title { margin: 0; font-size: var(--kui-font-size-sm); font-weight: var(--kui-font-weight-semibold); line-height: var(--kui-line-height-tight); } .kui-board__title a { color: var(--kui-text); text-decoration: none; } .kui-board__title a:hover { color: var(--kui-link-hover); text-decoration: underline; } .kui-board__meta { display: flex; flex-wrap: wrap; gap: var(--kui-space-2xs) var(--kui-space-sm); margin: 0; font-size: var(--kui-font-size-xs); color: var(--kui-text-muted); } .kui-board__card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-2xs) var(--kui-space-sm); padding-block-start: var(--kui-space-xs); border-block-start: 1px solid var(--kui-border); font-size: var(--kui-font-size-xs); color: var(--kui-text-muted); } .kui-board__preview { position: fixed; inset: auto; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; pointer-events: none; } .kui-board__preview > .kui-board__card { block-size: 100%; box-shadow: var(--kui-shadow-high); cursor: grabbing; rotate: 2deg; } @media (prefers-reduced-motion: reduce) { .kui-board__preview > .kui-board__card { rotate: none; } } } @layer kui.components { @media (prefers-contrast: more) { :root { --kui-text-muted: var(--kui-text); --kui-border: var(--kui-border-strong); --kui-focus-width: 6px; } } } @layer kui.components { @media print { .kui-shell__header,
    .kui-shell__nav,
    .kui-toast-region,
    .kui-toasts,
    .kui-skip-link { display: none; } .kui-shell,
    .kui-shell:not(.kui-shell--no-nav),
    .kui-shell:not(.kui-shell--no-nav):dir(rtl) { display: block; min-height: 0; background: none; } .kui-dialog::backdrop { background: none; } .kui-table-box { overflow: visible; } .kui-table thead { display: table-header-group; } .kui-table tr { break-inside: avoid; } .kui-prose :where(h1, h2, h3, h4, h5, h6) { break-after: avoid; } .kui-prose :where(p, li) { orphans: 2; widows: 2; } .kui-charging-chart,
    .kui-prose :where(pre, blockquote, table, figure) { break-inside: avoid; } } } @layer kui.components { @media (forced-colors: active) { .kui-icon--accent { fill: currentColor; } :focus-visible,
    .kui-data-table[data-kui-modality='keyboard'][data-kui-view='table'] [role='gridcell']:focus-within::after,
    .kui-data-table[data-kui-modality='keyboard'][data-kui-view='list'] [role='row'][row-id]:focus-within::before { outline-color: Highlight; } .kui-input[aria-invalid='true']:focus-visible,
    .kui-chips-input:has(> input:focus-visible),
    .kui-input-group:has(> .kui-input:focus-visible),
    .kui-collection__field:has(.kui-combobox > .kui-input:focus-visible) { outline-color: Highlight; } .kui-checkbox > input,
    .kui-radio > input,
    input.kui-checkbox-input,
    .kui-choice-card > input { forced-color-adjust: none; border-color: transparent; background-color: Canvas; box-shadow: inset 0 0 0 2px CanvasText; } .kui-checkbox > input:hover,
    .kui-radio > input:hover,
    input.kui-checkbox-input:hover { box-shadow: inset 0 0 0 2px Highlight; } .kui-checkbox > input:checked,
    .kui-checkbox > input:indeterminate,
    input.kui-checkbox-input:is(:checked, :indeterminate) { background-color: Highlight; box-shadow: inset 0 0 0 2px Highlight; } .kui-checkbox > input:checked::after,
    input.kui-checkbox-input:checked::after { border-color: HighlightText; } .kui-checkbox > input:indeterminate::after,
    input.kui-checkbox-input:indeterminate::after { background: HighlightText; } .kui-radio > input:checked,
    .kui-choice-card > input:checked { box-shadow: inset 0 0 0 2px Highlight; } .kui-radio > input:checked::after,
    .kui-choice-card > input:checked::after { background: Highlight; } .kui-checkbox > input:disabled,
    .kui-radio > input:disabled,
    input.kui-checkbox-input:disabled,
    .kui-choice-card > input:disabled { background-color: Canvas; box-shadow: inset 0 0 0 2px GrayText; } .kui-checkbox > input:is(:checked, :indeterminate):disabled,
    input.kui-checkbox-input:is(:checked, :indeterminate):disabled { background-color: GrayText; } .kui-choice-card:has(input:checked) { border-color: Highlight; outline: 2px solid Highlight; outline-offset: -2px; } .kui-switch > input,
    input.kui-switch-input { forced-color-adjust: none; border-color: transparent; background-color: Canvas; box-shadow: inset 0 0 0 2px CanvasText; } .kui-switch > input::before,
    input.kui-switch-input::before { background-color: CanvasText; } .kui-switch > input:hover,
    input.kui-switch-input:hover { box-shadow: inset 0 0 0 2px Highlight; } .kui-switch > input:checked,
    input.kui-switch-input:checked { background-color: Highlight; box-shadow: inset 0 0 0 2px Highlight; } .kui-switch > input:checked::before,
    input.kui-switch-input:checked::before { background-color: HighlightText; } .kui-switch > input:disabled,
    input.kui-switch-input:disabled { background-color: Canvas; box-shadow: inset 0 0 0 2px GrayText; } .kui-switch > input:disabled::before,
    input.kui-switch-input:disabled::before,
    .kui-switch > input:checked:disabled,
    input.kui-switch-input:checked:disabled { background-color: GrayText; } .kui-switch > input:checked:disabled::before,
    input.kui-switch-input:checked:disabled::before { background-color: Canvas; } .kui-slider-input { forced-color-adjust: none; } .kui-slider-input::-webkit-slider-runnable-track { background-color: CanvasText; } .kui-slider-input::-moz-range-track { background-color: CanvasText; } .kui-slider-input::-webkit-slider-thumb { border-color: Canvas; background-color: Highlight; } .kui-slider-input::-moz-range-thumb { border-color: Canvas; background-color: Highlight; } .kui-slider-input:disabled::-webkit-slider-runnable-track,
    .kui-slider-input:disabled::-webkit-slider-thumb { background-color: GrayText; } .kui-slider-input:disabled::-moz-range-track,
    .kui-slider-input:disabled::-moz-range-thumb { background-color: GrayText; } .kui-slider__scale > *::before,
    .kui-steps > li:not(:last-child)::after { background-color: CanvasText; } .kui-steps > [aria-current='step'] > .kui-steps__marker { border-color: Highlight; } .kui-steps > li:has(~ [aria-current='step']) > .kui-steps__marker { forced-color-adjust: none; border-color: Highlight; background-color: Highlight; } .kui-steps > li:has(~ [aria-current='step']) > .kui-steps__marker::before { border-color: HighlightText; } .kui-signin__steps > [aria-current='step']::before { forced-color-adjust: none; background-color: Highlight; } .kui-button:disabled,
    .kui-button[aria-disabled='true'],
    .kui-chip[aria-disabled='true'],
    .kui-menu__item:disabled,
    .kui-menu__item[aria-disabled='true'],
    .kui-tabs > [aria-disabled='true'],
    .kui-input:disabled,
    .kui-multiselect__trigger:is(:disabled, [aria-disabled='true']),
    .kui-multiselect__trigger:is(:disabled, [aria-disabled='true'])::after,
    .kui-input-group:has(> .kui-input:disabled),
    .kui-input-group:has(> .kui-input:disabled) > .kui-input-group__affix,
    .kui-checkbox:has(input:disabled),
    .kui-radio:has(input:disabled),
    .kui-choice-card:has(input:disabled),
    .kui-switch:has(input:disabled),
    .kui-slider:has(> .kui-slider-input:disabled) > .kui-slider__value,
    .kui-expander__summary[aria-disabled='true'],
    .kui-expander__summary[aria-disabled='true'] > .kui-expander__chevron,
    .kui-channel-grid__channel:is(:disabled, [aria-disabled='true']) { border-color: GrayText; color: GrayText; } .kui-status-list__row:is(:disabled, [aria-disabled='true']) { color: GrayText; } .kui-button:disabled,
    .kui-button[aria-disabled='true'],
    .kui-chip[aria-pressed]:is(:disabled, [aria-disabled='true']) { opacity: 1; } .kui-input[readonly]:not(:disabled),
    .kui-input-group:has(> .kui-input[readonly]:not(:disabled)) { border-style: dashed; } .kui-nav-item[aria-current]:not([aria-current='false'], [aria-current=''])::before,
    .kui-topnav__item[aria-current]:not([aria-current='false'], [aria-current=''])::after,
    .kui-tabs > [aria-selected='true']::after,
    .kui-tabs > [aria-pressed='true']::after,
    .kui-tabs > [aria-current]:not([aria-current='false'], [aria-current=''])::after { background-color: Highlight; } .kui-segmented > button:is(:disabled, [aria-disabled='true']),
    .kui-segmented > label:has(input:disabled) { color: GrayText; } .kui-segmented > [aria-pressed='true'],
    .kui-segmented > [aria-checked='true'],
    .kui-segmented > label:has(input:checked) { forced-color-adjust: none; background-color: Highlight; color: HighlightText; } .kui-button[aria-pressed='true']:where(:not(.kui-button--primary, .kui-button--danger, .kui-button--link, :disabled, [aria-disabled='true'])),
    .kui-chip[aria-pressed='true']:where(:not(:disabled, [aria-disabled='true'])) { forced-color-adjust: none; border-color: Highlight; background-color: Highlight; color: HighlightText; } .kui-button[aria-pressed='true']:is(:disabled, [aria-disabled='true']):where(:not(.kui-button--primary, .kui-button--danger, .kui-button--link)),
    .kui-chip[aria-pressed='true']:is(:disabled, [aria-disabled='true']) { forced-color-adjust: none; border-color: GrayText; background-color: GrayText; color: Canvas; } .kui-collection__chip[aria-current='true'] { border-color: Highlight; outline: 1px solid Highlight; } .kui-status-list__row,
    .kui-status-list__row[data-kui-tone] { border-inline-start-color: Canvas; } .kui-status-list__row:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true']) { border-inline-start-color: Highlight; } .kui-channel-grid__channel:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true']) { border-color: Highlight; } .kui-channel-grid__channel:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true'])::before,
    .kui-collection__pin:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true'])::before,
    .kui-button--ghost:is([aria-current]:not([aria-current='false'], [aria-current='']))::after { background-color: Highlight; } .kui-table tbody tr[aria-selected='true'] { outline: 2px solid Highlight; outline-offset: -2px; } .kui-account:has(> .kui-account__panel:popover-open) > .kui-account__trigger { outline: 2px solid Highlight; outline-offset: -2px; } .kui-account__trigger[aria-expanded='true'] { outline: 2px solid Highlight; outline-offset: -2px; } .kui-menu__item[aria-expanded='true'] { forced-color-adjust: none; background-color: Highlight; color: HighlightText; } .kui-menu__item[aria-expanded='true']:focus-visible { outline-color: HighlightText; } .kui-nav-group + .kui-nav-group::before,
    .kui-menu__separator { background-color: CanvasText; } .kui-progress { forced-color-adjust: none; border: 1px solid CanvasText; background-color: Canvas; } .kui-progress::-webkit-progress-bar { background-color: Canvas; } .kui-progress::-webkit-progress-value { background-color: Highlight; } .kui-progress::-moz-progress-bar { background-color: Highlight; } .kui-progress:indeterminate { background-image: linear-gradient(Highlight, Highlight); } @media (prefers-reduced-motion: reduce) { .kui-progress:indeterminate { background-image: repeating-linear-gradient(-45deg, Highlight 0 0.375rem, transparent 0.375rem 0.75rem); } } .kui-meter { forced-color-adjust: none; border: 1px solid CanvasText; background-color: Canvas; } .kui-meter__segment { background-color: CanvasText; } .kui-dot,
    .kui-status::before { forced-color-adjust: none; background-color: CanvasText; } .kui-badge,
    .kui-count,
    .kui-toast,
    .kui-tooltip,
    .kui-toggletip__panel { outline: 1px solid CanvasText; outline-offset: -1px; } .kui-account__panel,
    .kui-account__panel > * + *,
    .kui-popover,
    .kui-popover > * + *,
    .kui-combobox__popup,
    .kui-combobox__loading,
    .kui-combobox__empty { border-color: CanvasText; } .kui-listbox__option[aria-selected='true'] { forced-color-adjust: none; background-color: Highlight; color: HighlightText; box-shadow: none; } .kui-listbox__option[aria-selected='true'] > .kui-listbox__description { color: HighlightText; } .kui-listbox__option[aria-disabled='true'],
    .kui-listbox__option[aria-disabled='true'] > .kui-listbox__description { color: GrayText; } .kui-toggletip__button[aria-expanded='true'] { outline: 2px solid Highlight; outline-offset: -2px; } .kui-skeleton,
    .kui-stat[aria-busy='true'] > :is(.kui-stat__label, .kui-stat__value, .kui-stat__meta):empty { background-color: GrayText; } .kui-mark-added { text-decoration: underline; } .kui-board__cell:not([data-drop]),
    .kui-board__cell[data-drop='none'] { border-color: Canvas; } .kui-board__cell[data-drop='open'][data-drop-over] { border-color: Highlight; } .kui-board__cell[data-drop='blocked'] { border-color: GrayText; } .kui-board__preview > .kui-board__card { border-color: Highlight; } .kui-charging-chart { color: CanvasText; background: Canvas; } .kui-charging-chart text { fill: CanvasText; } .kui-charging-chart__power,
    .kui-charging-chart__soc,
    .kui-charging-chart__axis,
    .kui-history__line,
    .kui-history__cursor,
    .kui-history__marker { stroke: CanvasText; } .kui-history__lane-cursor { forced-color-adjust: none; background: CanvasText; outline-color: Canvas; } .kui-history:not([data-kui-density='comfortable']):where(:not([data-kui-density='comfortable'] :not([data-kui-density]))) .kui-history__interval { forced-color-adjust: none; border-color: Canvas; color: CanvasText; } .kui-history:not([data-kui-density='comfortable']):where(:not([data-kui-density='comfortable'] :not([data-kui-density]))) .kui-history__interval:focus-visible { outline-color: Highlight; } .kui-history:not([data-kui-density='comfortable']):where(:not([data-kui-density='comfortable'] :not([data-kui-density]))) button.kui-history__interval:is(:hover, [aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true']) { border-block-color: Canvas; } .kui-history:not([data-kui-density='comfortable']):where(:not([data-kui-density='comfortable'] :not([data-kui-density]))) .kui-history__interval:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true'])::before { background: Highlight; } .kui-history:is([data-kui-density='comfortable'], [data-kui-density='comfortable'] :where(:not([data-kui-density]))) .kui-history__interval { forced-color-adjust: none; box-shadow: inset 3px 0 CanvasText; background: Canvas; color: CanvasText; } .kui-history:is([data-kui-density='comfortable'], [data-kui-density='comfortable'] :where(:not([data-kui-density]))) .kui-history__interval:is([aria-current]:not([aria-current='false'], [aria-current='']), [aria-pressed='true']) { box-shadow: inset var(--kui-indicator-width) 0 Highlight; } .kui-sort::after,
    .kui-button[aria-busy='true']::before,
    .kui-spinner { forced-color-adjust: none; } .kui-spinner { color: CanvasText; } .kui-button[aria-busy='true']::before { color: ButtonText; } } } @layer kui.utilities { .kui-stack { display: flex; flex-direction: column; gap: var(--kui-space-md); } .kui-stack--xs { gap: var(--kui-space-xs); } .kui-stack--sm { gap: var(--kui-space-sm); } .kui-stack--lg { gap: var(--kui-space-lg); } .kui-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-space-sm); } .kui-row--md { gap: var(--kui-space-md); } .kui-row--between { justify-content: space-between; } .kui-row--end { justify-content: flex-end; } .kui-row--nowrap { flex-wrap: nowrap; } .kui-push { margin-inline-start: auto; } .kui-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--kui-space-md); } .kui-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); } .kui-grid--narrow { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); } .kui-mono,
.kui-code { font-family: var(--kui-font-mono); } .kui-code { font-size: var(--kui-font-size-code); padding: 0 var(--kui-space-xs); border-radius: var(--kui-radius-xs); background: var(--kui-surface-sunken); } .kui-muted { color: var(--kui-text-muted); } .kui-strong { font-weight: var(--kui-font-weight-semibold); } .kui-num { font-variant-numeric: tabular-nums; } .kui-block { display: block; } .kui-nowrap { white-space: nowrap; } .kui-break { min-width: 0; white-space: normal; overflow-wrap: anywhere; } .kui-parts > * { display: inline-block; white-space: nowrap; } .kui-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kui-text-success,
.kui-text-ok { color: var(--kui-ok); } .kui-text-warning,
.kui-text-warn { color: var(--kui-warn); } .kui-text-error,
.kui-text-danger { color: var(--kui-danger); } .kui-text-info { color: var(--kui-info); } .kui-mt-xs { margin-top: var(--kui-space-xs); } .kui-mt-sm { margin-top: var(--kui-space-sm); } .kui-mt-md { margin-top: var(--kui-space-md); } .kui-mt-lg { margin-top: var(--kui-space-lg); } .kui-mt-xl { margin-top: var(--kui-space-xl); } .kui-mt-2xl { margin-top: var(--kui-space-2xl); } .kui-mb-xs { margin-bottom: var(--kui-space-xs); } .kui-mb-sm { margin-bottom: var(--kui-space-sm); } .kui-mb-md { margin-bottom: var(--kui-space-md); } .kui-mb-lg { margin-bottom: var(--kui-space-lg); } .kui-mb-xl { margin-bottom: var(--kui-space-xl); } .kui-mb-2xl { margin-bottom: var(--kui-space-2xl); } .kui-m-0 { margin: 0; } @media (width < 45em) { .kui-hide-below-md { display: none !important; } } @media (width < 64em) { .kui-hide-below-lg { display: none !important; } } .kui-live:empty,
[data-kui-positioned] { position: absolute; } [data-kui-autofocus='pointer'] .kui-input:focus-visible { outline: 0; border-color: var(--kui-border-strong); } }