/* ============================================================================== CSS CUSTOM PROPERTIES (:host level) ============================================================================== This file defines all CSS custom properties at the :host level, making them: - Inspectable in browser DevTools - Overridable from outside Shadow DOM - Self-documenting in compiled CSS Usage from outside Shadow DOM: multi-select { --ms-accent-color: #10b981; --ms-input-border-radius: 0.5rem; } ============================================================================== */ :host { /* Block layout — the wrapper-host pattern paints chrome via .ms__input, but :host still needs an explicit display so consumers placing the element in inline contexts see the expected layout. */ display: block; /* ========================================================================== COLOR SCHEME ========================================================================== `color-scheme` is INHERITED on this element — we deliberately do NOT declare it on `:host`. Reason: every hardcoded color fallback below is wrapped in `light-dark(, )`, which picks one of the two based on the host's used color-scheme. Declaring `color-scheme: light dark` here would *override* whatever the consumer's app declared on , , or an ancestor — flipping forced-dark apps back to "follow OS", and breaking visual coherence with the surrounding page. By letting it inherit: - dhl-style apps that set `body { color-scheme: dark }` propagate it into our shadow DOM unchanged, and `light-dark()` resolves to dark. - apps that set `html { color-scheme: light dark }` get OS-preference switching, end-to-end. - apps that declare nothing get the historical default (light), same as before this fallback set was introduced — no behavior change. Consumers who want explicit per-multiselect control can still set `style="color-scheme: dark"` on the element. ========================================================================== */ /* ========================================================================== BASE SIZING UNIT ========================================================================== All sizing values are based on this unit for consistent scaling. Bridges to the shared --base-rem knob so a theme scales every Keenmate component from one variable; falls back to 10px when no base layer is loaded. Default: 10px produces standard pixel values Pure Admin: Set --base-rem to 1rem (inherits from html { font-size: 10px }) Custom: Set --base-rem (or --ms-rem for this component only) to scale all sizes */ --ms-rem: var(--base-rem, 10px); /* ========================================================================== FONT FAMILY (set at :host so all shadow DOM content inherits) ========================================================================== */ font-family: var(--ms-font-family, var(--base-font-family, inherit)); /* ========================================================================== COLORS & THEME ========================================================================== Color variables follow this priority chain: 1. External override: --ms-accent-color: #custom 2. Base theme value: var(--base-accent-color) 3. Hardcoded default fallback */ /* Accent Colors */ --ms-accent-color: var(--base-accent-color, #3b82f6); --ms-accent-color-hover: var(--base-accent-color-hover, #2563eb); --ms-accent-color-active: var(--base-accent-color-active, #1d4ed8); /* Accent Color Light Variants (for backgrounds) Dark variants are muted dark-blue tints that read like "accent-tinted dark surface" rather than "near-white", keeping badge / +X more / popover-header backgrounds visible on a dark page. */ --ms-accent-color-light: var(--base-accent-color-light, light-dark(#eff6ff, #1e3a5f)); --ms-accent-color-light-hover: var(--base-accent-color-light-hover, light-dark(#e0f2fe, #264a73)); /* Text Color Levels (FluentUI-style hierarchy) Light mode = the original dark-on-light palette (#111827 → #a0a3a9). Dark mode = the same hierarchy inverted (#f5f5f5 → #737373) so heading/body/secondary/disabled keep the same relative contrast steps. text-color-on-accent stays white in both modes — the accent color is the same blue in both, and white-on-blue reads in both. */ --ms-text-color-1: var(--base-text-color-1, light-dark(#111827, #f5f5f5)); --ms-text-color-2: var(--base-text-color-2, light-dark(#353b47, #d4d4d4)); --ms-text-color-3: var(--base-text-color-3, light-dark(#6b7280, #a3a3a3)); --ms-text-color-4: var(--base-text-color-4, light-dark(#a0a3a9, #737373)); --ms-text-color-on-accent: var(--base-text-color-on-accent, #ffffff); /* Legacy aliases (for backward compatibility) */ --ms-text-primary: var(--ms-text-color-1); --ms-text-secondary: var(--ms-text-color-3); /* Background Colors --ms-primary-bg paints hover/focus states (option hover, action-button hover, counter hover, etc.); --ms-primary-bg-hover is one step stronger (selected-active, counter badge). The color-mix fallback keeps the hover visible on dark themes — a flat var(--base-main-bg) substrate used to make hover collapse onto the panel background. */ --ms-primary-bg: var(--base-hover-bg, color-mix(in srgb, var(--ms-text-color-1) 8%, var(--base-main-bg, light-dark(#ffffff, #1a1a1a)))); --ms-primary-bg-hover: var(--base-active-bg, color-mix(in srgb, var(--ms-text-color-1) 14%, var(--base-main-bg, light-dark(#ffffff, #1a1a1a)))); /* Border Base Variables */ /* Default border colour. The previous fallbacks (#e5e7eb light / #3a3a3a dark) were very low contrast against white / near-black surfaces — the 1px input/panel edge nearly vanished, especially on phones. Bumped to a clearly-visible gray on each side (still soft, not harsh). Consumers with `--base-border-color` set are unaffected. */ --ms-border-color: var(--base-border-color, light-dark(#cbd5e1, #52525b)); --ms-border: var(--base-border, 1px solid var(--ms-border-color)); /* ========================================================================== SEMANTIC VARIABLES - Component-Specific Theming ========================================================================== Pattern: --ms-{component}-{property}-{state} Example: --ms-input-bg, --ms-option-text-color-hover */ /* Input Component Semantic Variables */ --ms-input-bg: var(--base-input-bg, light-dark(#ffffff, #1a1a1a)); --ms-input-color: var(--base-input-color, var(--ms-text-color-1)); --ms-input-border: var(--base-input-border, 1px solid var(--ms-border-color)); --ms-input-border-hover: var(--base-input-border-hover, 1px solid var(--ms-accent-color)); --ms-input-border-focus: var(--base-input-border-focus, 1px solid var(--ms-accent-color)); --ms-input-placeholder-color: var(--base-input-placeholder-color, var(--ms-text-color-4)); --ms-input-bg-disabled: var(--base-input-bg-disabled, rgba(107, 114, 128, 0.05)); /* Toggle Icon Semantic Variables */ --ms-toggle-icon-color: var(--ms-text-color-3); --ms-toggle-icon-color-open: var(--ms-text-color-3); --ms-toggle-icon-size: calc(1.6 * var(--ms-rem)); /* Toggle chevron rotation, closed vs open. Defaults orient the directional right-pointing --base-icon-chevron (90° → points down when closed, -90° → up when open). Override BOTH when a theme supplies a PRE-ORIENTED chevron glyph: `0deg` / `0deg` for a static glyph, or `0deg` / `180deg` for a down-glyph that flips up on open. */ --ms-toggle-rotate-closed: 90deg; --ms-toggle-rotate-open: -90deg; /* Counter Badge (in Input) Semantic Variables */ --ms-counter-badge-bg: var(--ms-accent-color); --ms-counter-badge-bg-hover: var(--ms-accent-color-hover); --ms-counter-badge-color: var(--ms-text-color-on-accent); /* Floating Hint Semantic Variables */ --ms-hint-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a)); --ms-hint-color: var(--ms-text-color-4); --ms-hint-border-color: var(--ms-border-color); /* Dropdown Semantic Variables */ --ms-dropdown-bg: var(--base-dropdown-bg, var(--base-elevated-bg, light-dark(#ffffff, #1a1a1a))); --ms-dropdown-text-color: var(--ms-text-color-1); --ms-dropdown-border-color: var(--ms-border-color); --ms-dropdown-box-shadow-semantic: var(--base-dropdown-box-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)); /* Dropdown Actions Semantic Variables */ --ms-actions-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a)); --ms-actions-border-color: var(--ms-border-color); /* Action Button Semantic Variables */ --ms-action-button-bg: transparent; --ms-action-button-bg-hover: var(--ms-primary-bg); --ms-action-button-border-color: var(--ms-border-color); --ms-action-button-border-color-hover: var(--ms-accent-color); --ms-action-button-color: var(--ms-text-color-1); /* Group Semantic Variables */ --ms-group-border-color: var(--ms-border-color); --ms-group-label-color: var(--ms-text-color-3); /* Option Semantic Variables */ --ms-option-text-color: var(--ms-text-color-1); --ms-option-bg: transparent; --ms-option-bg-hover: var(--ms-primary-bg); --ms-option-color-hover: inherit; --ms-option-bg-focused: var(--ms-primary-bg); --ms-option-color-focused: inherit; --ms-option-outline-color-focused: var(--ms-accent-color); --ms-option-bg-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent); --ms-option-bg-matched: color-mix(in srgb, var(--ms-accent-color) 8%, transparent); --ms-option-color-matched: inherit; --ms-option-border-matched-color: color-mix(in srgb, var(--ms-accent-color) 40%, transparent); /* Option Content Semantic Variables */ --ms-option-title-color: var(--ms-text-color-1); --ms-option-subtitle-color: var(--ms-text-color-3); --ms-option-mark-bg: color-mix(in srgb, var(--ms-accent-color) 20%, transparent); --ms-option-mark-color: inherit; /* Empty/Loading State Semantic Variables */ --ms-empty-color: var(--ms-text-color-3); --ms-loading-color: var(--ms-text-color-3); /* Badge Semantic Variables */ --ms-badge-bg: var(--ms-accent-color-light); /* Hover DEEPENS the badge's OWN rest background toward its OWN text colour. Deliberately self-referential: NOT --base-hover-bg (a generic surface token → accent pill flipped near-white in dark/neon), and NOT --ms-accent-color-light-hover (a separate accent-tint token themes forget to set when they change the accent → a black brutalist pill fell back to the hardcoded blue tint on hover). Mixing 12% of the text colour into the rest bg is a subtle, always-readable nudge that follows whatever bg/text pair a theme sets. */ --ms-badge-bg-hover: color-mix(in srgb, var(--ms-badge-bg) 88%, var(--ms-badge-text-color) 12%); --ms-badge-bg-active: var(--ms-accent-color-light-hover); /* Badge Text Semantic Variables */ --ms-badge-text-bg: var(--ms-accent-color-light); --ms-badge-text-color: var(--ms-accent-color); --ms-badge-text-bg-hover: color-mix(in srgb, var(--ms-badge-text-bg) 88%, var(--ms-badge-text-color) 12%); --ms-badge-text-color-hover: var(--ms-badge-text-color); /* Badge Remove Button Semantic Variables */ --ms-badge-remove-bg: var(--ms-accent-color); --ms-badge-remove-bg-hover: var(--ms-accent-color-hover); --ms-badge-remove-color: var(--ms-text-color-on-accent); /* Badge Counter Variant Semantic Variables Neutral/gray styling to distinguish from accent-coloured selection badges. Self-contained: the pill is a translucent tint of the strong text colour, and text/glyph use the text-colour hierarchy — so contrast holds even when a theme omits --base-main-bg (the old --ms-primary-bg-hover chain collapsed to light-on-light there). The counter must NOT inherit the accent-coloured hover of regular badges — its text stays neutral; only the surface deepens. */ --ms-badge-counter-border-color: var(--ms-border-color); --ms-badge-counter-text-bg: color-mix(in srgb, var(--ms-text-color-1) 10%, transparent); --ms-badge-counter-text-bg-hover: color-mix(in srgb, var(--ms-text-color-1) 16%, transparent); --ms-badge-counter-text-color: var(--ms-text-color-1); --ms-badge-counter-text-color-hover: var(--ms-text-color-1); --ms-badge-counter-remove-bg: color-mix(in srgb, var(--ms-text-color-1) 10%, transparent); --ms-badge-counter-remove-bg-hover: color-mix(in srgb, var(--ms-text-color-1) 16%, transparent); /* Neutral glyph (text-3 at rest → text-1 on hover), NOT white-on-accent — the old on-accent glyph vanished once the hover bg became a light text colour. */ --ms-badge-counter-remove-color: var(--ms-text-color-3); --ms-badge-counter-remove-color-hover: var(--ms-text-color-1); /* Count Display Semantic Variables */ --ms-counter-wrapper-bg: transparent; --ms-counter-wrapper-bg-hover: var(--ms-primary-bg); --ms-counter-wrapper-border-color: var(--ms-border-color); --ms-counter-wrapper-border-color-hover: var(--ms-accent-color); --ms-count-text-color: var(--ms-text-color-1); --ms-count-clear-bg: transparent; --ms-count-clear-bg-hover: var(--ms-accent-color); --ms-count-clear-color: var(--ms-text-color-3); --ms-count-clear-color-hover: var(--ms-text-color-on-accent); /* Tooltip Semantic Variables Tooltips invert relative to the page: dark tooltip on light page, light tooltip on dark page. This keeps the tooltip distinct from its surrounding surface in both modes. */ --ms-tooltip-bg: var(--base-tooltip-bg, var(--base-inverse-bg, light-dark(#333333, #f5f5f5))); --ms-tooltip-text-color: var(--base-tooltip-text-color, light-dark(#ffffff, #1a1a1a)); /* Selected Popover Semantic Variables */ --ms-selected-popover-bg: var(--base-dropdown-bg, var(--base-elevated-bg, light-dark(#ffffff, #1a1a1a))); --ms-selected-popover-border-color: var(--ms-border-color); --ms-selected-popover-header-bg: color-mix(in srgb, var(--ms-accent-color) 10%, transparent); --ms-selected-popover-header-color: var(--ms-text-color-1); --ms-selected-popover-header-border-color: var(--ms-border-color); --ms-selected-popover-close-bg: transparent; --ms-selected-popover-close-bg-hover: var(--ms-accent-color); --ms-selected-popover-close-color: var(--ms-text-color-3); --ms-selected-popover-close-color-hover: var(--ms-text-color-on-accent); /* ========================================================================== INPUT COMPONENT ========================================================================== */ --ms-input-padding-h: calc(1.2 * var(--ms-rem)); /* field shell inline padding */ --ms-input-gap: calc(0.6 * var(--ms-rem)); /* gap between input + trailing decorations */ --ms-input-height: calc(var(--base-input-size-md-height, 3.5) * var(--ms-rem)); --ms-input-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem)); --ms-input-border-width: 1px; --ms-input-border-radius: var(--ms-border-radius-md); --ms-input-text: var(--ms-text-color-1); /* Prefers the shared --base token (light-dark aware, so it adapts on dark themes); the flat gray is the standalone fallback. */ --ms-input-bg-disabled: var(--base-input-bg-disabled, rgba(107, 114, 128, 0.05)); /* ========================================================================== INPUT SIZE VARIANTS — currently unused (commented out) ========================================================================== Preset size tiers (xs/sm/md/lg/xl) for the input. Read only by the .ms__input--* classes in controls.css, which nothing toggles (no `size` attribute), so this whole chain is inert. Commented out to drop dead theming surface — kept, not deleted, in case a future `size` attribute turns it into a named-preset API; no case has needed it yet. Size via --ms-rem (global) or the individual --ms-input-* vars (targeted) instead. Heights reference --base-input-size-*-height for cross-component consistency (px in parens): --ms-input-size-xs-font: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem)); --ms-input-size-xs-padding-v: calc(0.4 * var(--ms-rem)); --ms-input-size-xs-padding-h: calc(0.8 * var(--ms-rem)); --ms-input-size-xs-height: calc(var(--base-input-size-xs-height, 3.1) * var(--ms-rem)); (31px) --ms-input-size-sm-font: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem)); --ms-input-size-sm-padding-v: calc(0.5 * var(--ms-rem)); --ms-input-size-sm-padding-h: calc(1.0 * var(--ms-rem)); --ms-input-size-sm-height: calc(var(--base-input-size-sm-height, 3.3) * var(--ms-rem)); (33px) --ms-input-size-md-font: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem)); --ms-input-size-md-padding-v: calc(0.8 * var(--ms-rem)); --ms-input-size-md-padding-h: calc(1.2 * var(--ms-rem)); --ms-input-size-md-height: calc(var(--base-input-size-md-height, 3.5) * var(--ms-rem)); (35px) --ms-input-size-lg-font: calc(var(--base-font-size-base, 1.6) * var(--ms-rem)); --ms-input-size-lg-padding-v: calc(1.0 * var(--ms-rem)); --ms-input-size-lg-padding-h: calc(1.4 * var(--ms-rem)); --ms-input-size-lg-height: calc(var(--base-input-size-lg-height, 3.8) * var(--ms-rem)); (38px) --ms-input-size-xl-font: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem)); --ms-input-size-xl-padding-v: calc(1.2 * var(--ms-rem)); --ms-input-size-xl-padding-h: calc(1.6 * var(--ms-rem)); --ms-input-size-xl-height: calc(var(--base-input-size-xl-height, 4.1) * var(--ms-rem)); (41px) */ /* ========================================================================== TOGGLE ICON ========================================================================== */ --ms-toggle-color: var(--ms-text-color-3); --ms-transform-rotate-180: 180deg; /* ========================================================================== INPUT CLEAR (✕) ========================================================================== */ --ms-input-clear-size: calc(2.4 * var(--ms-rem)); --ms-input-clear-icon-size: calc(1.4 * var(--ms-rem)); --ms-input-clear-color: var(--base-input-clear-color, var(--ms-text-secondary)); --ms-input-clear-bg-hover: var(--base-input-clear-bg-hover, var(--ms-option-bg-matched, transparent)); --ms-input-clear-border-radius: var(--ms-border-radius); /* matches the input; square when radius is 0 */ /* ========================================================================== COUNT BADGE (in input) ========================================================================== */ --ms-counter-padding: calc(0.2 * var(--ms-rem)) calc(0.4 * var(--ms-rem)); --ms-counter-bg: var(--ms-accent-color); --ms-counter-color: var(--ms-text-color-on-accent); --ms-counter-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem)); --ms-counter-font-weight: var(--base-font-weight-semibold, 600); --ms-counter-border-radius: var(--ms-border-radius-sm); --ms-counter-bg-hover: var(--ms-accent-color-hover); --ms-transform-scale-hover: 1.1; /* ========================================================================== FLOATING HINT ========================================================================== */ --ms-hint-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem)); --ms-hint-border: 1px solid var(--ms-hint-border-color); --ms-hint-border-radius: var(--ms-border-radius-lg); --ms-hint-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --ms-hint-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem)); /* ========================================================================== DROPDOWN ========================================================================== */ --ms-dropdown-border: var(--base-dropdown-border, 1px solid var(--ms-dropdown-border-color)); --ms-dropdown-border-radius: var(--ms-border-radius-lg); /* Inner content clip radius — a hair tighter than the panel so a highlighted first/last row (or the sticky Select-All/Clear actions bar) follows the panel's rounded corners instead of its square background bleeding ~1px past the rounded border (the classic rounded-parent + bordered-box corner artifact). Assumes the default 1px --ms-dropdown-border; if you theme a thicker border, override this to match (panel radius − border width). Clamped at 0 so a squared panel stays square. */ --ms-dropdown-inner-border-radius: max(0px, calc(var(--ms-dropdown-border-radius) - 1px)); /* Prefers the shared --base token (light-dark aware — deepens on dark themes); the flat two-layer shadow is the standalone fallback. */ --ms-dropdown-box-shadow: var(--base-dropdown-box-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)); /* Live input width, published by JS each positioning frame. It's the only panel dimension CSS can't measure itself, so panels that "match the input" read it. */ --ms-input-current-width: auto; /* Options dropdown width. Defaults to the input width; override at app/theme level (web-multiselect { --ms-dropdown-width: 60rem }) or per-instance via the dropdown-width attribute. dropdown-min-width / dropdown-max-width still clamp it. */ --ms-dropdown-width: var(--ms-input-current-width); --ms-options-max-height: calc(32 * var(--ms-rem)); --ms-option-color: var(--ms-text-color-1); --ms-z-index-dropdown: 9999; --ms-z-index-sticky: 1; /* ========================================================================== FULLSCREEN OVERLAY (touch / phone presentation) Used when a panel is presented as a full-viewport overlay — the options dropdown (`.ms__dropdown--fullscreen`) AND the selected-items popover (`.ms__selected-popover--fullscreen`). Both share ONE header-bar + close- button treatment so the mobile view is consistent. Driven by the element's environmentChanged hook on phones. Everything defaults to the dropdown's own theming so a fullscreen panel looks like the same component. ========================================================================== */ --ms-z-index-fullscreen: 10001; /* above dropdown (9999) + popover/tooltip (10000) */ /* The truncated-label reveal is triggered from INSIDE the fullscreen overlay, so it must sit above it (the plain option tooltip at 10000 renders behind the 10001 panel). */ --ms-z-index-fullscreen-tooltip: 10002; /* Size of the phone view. Every size in the component is calc(N × --ms-rem), so the fullscreen panels override --ms-rem with this to scale rows, text, checkboxes, padding, header and search up together (~1.2× → comfortable ~44–48px touch rows). A plain length (not calc(1.2 × --ms-rem)) so assigning it to --ms-rem on the panel can't form a cyclic var() reference. Set it larger for chunkier touch targets. */ --ms-fullscreen-rem: 12px; /* These overlay-only vars are sized in --ms-fullscreen-rem (NOT --ms-rem): a custom property bakes its var() at its declaration site, so declaring them here against --ms-fullscreen-rem gives the enlarged phone-view sizes wherever they're consumed. */ --ms-fullscreen-bg: var(--ms-dropdown-bg); --ms-fullscreen-text-color: var(--ms-dropdown-text-color); --ms-fullscreen-header-bg: var(--ms-dropdown-bg); --ms-fullscreen-header-border: 1px solid var(--ms-dropdown-border-color); --ms-fullscreen-header-gap: calc(0.8 * var(--ms-fullscreen-rem)); /* Split into v/h so the close button can reclaim this exact padding with negative margins to reach the sheet's physical corner (see .ms__fullscreen-close). */ --ms-fullscreen-header-padding-v: calc(0.8 * var(--ms-fullscreen-rem)); --ms-fullscreen-header-padding-h: calc(1.2 * var(--ms-fullscreen-rem)); --ms-fullscreen-header-padding: var(--ms-fullscreen-header-padding-v) var(--ms-fullscreen-header-padding-h); --ms-fullscreen-header-min-height: calc(5.6 * var(--ms-fullscreen-rem)); /* consistent bar height: search vs title */ --ms-fullscreen-title-font-size: calc(1.7 * var(--ms-fullscreen-rem)); --ms-fullscreen-title-font-weight: var(--base-font-weight-semibold, 600); --ms-fullscreen-search-border: var(--ms-input-border); --ms-fullscreen-search-border-radius: var(--ms-input-border-radius); --ms-fullscreen-search-padding: calc(0.8 * var(--ms-fullscreen-rem)) calc(1.2 * var(--ms-fullscreen-rem)); --ms-fullscreen-search-font-size: calc(1.6 * var(--ms-fullscreen-rem)); /* Inline clear (✕) inside the fullscreen search field: a small round mask-icon button pinned to the trailing edge, shown only while there's a term. The gutter reserves trailing padding on the input so typed text never runs under it. */ --ms-fullscreen-search-clear-size: calc(2.8 * var(--ms-fullscreen-rem)); --ms-fullscreen-search-clear-icon-size: calc(1.4 * var(--ms-fullscreen-rem)); --ms-fullscreen-search-clear-inset: calc(0.4 * var(--ms-fullscreen-rem)); --ms-fullscreen-search-clear-gutter: calc(3.4 * var(--ms-fullscreen-rem)); --ms-fullscreen-search-clear-color: var(--ms-text-muted-color, var(--ms-dropdown-text-color)); --ms-fullscreen-search-clear-bg-hover: var(--ms-option-bg-matched, transparent); /* Leading search-mode toggle (opt-in): a small round mask-icon button at the field's leading edge, sized like the clear button. Icon swaps by mode (see the [data-mode] rules in floating.css). */ --ms-fullscreen-mode-toggle-size: calc(2.8 * var(--ms-fullscreen-rem)); --ms-fullscreen-mode-toggle-icon-size: calc(1.5 * var(--ms-fullscreen-rem)); /* Gap between the leading toggle and the search field. Defaults to the header gap so it matches the field↔close spacing on the trailing side (symmetric bar); override to decouple. */ --ms-fullscreen-mode-toggle-gap: var(--ms-fullscreen-header-gap); --ms-fullscreen-mode-toggle-color: var(--ms-text-muted-color, var(--ms-dropdown-text-color)); --ms-fullscreen-mode-toggle-bg: transparent; --ms-fullscreen-mode-toggle-bg-hover: var(--ms-option-bg-matched, transparent); --ms-fullscreen-close-size: calc(3.6 * var(--ms-fullscreen-rem)); --ms-fullscreen-close-icon-size: calc(1.6 * var(--ms-fullscreen-rem)); --ms-fullscreen-close-color: var(--ms-dropdown-text-color); /* Visible close chip. Defaults to a borderless, transparent, round hit-glyph (so it reads as a bare ✕), but these turn it into a bordered "button" like a command- palette close — e.g. --ms-fullscreen-close-border: 1px solid var(--ms-border-color); --ms-fullscreen-close-border-radius: calc(0.8 * var(--ms-fullscreen-rem)); --ms-fullscreen-close-bg: var(--ms-input-bg);. The tap target stays larger than the chip (see the ::after in floating.css), so bordering it doesn't shrink what's clickable. */ --ms-fullscreen-close-bg: transparent; --ms-fullscreen-close-border: none; --ms-fullscreen-close-border-radius: 50%; --ms-fullscreen-close-bg-hover: var(--ms-option-bg-matched, transparent); /* Corner tap target. The visible chip stays --close-size (so it never inflates the header height), but a transparent ::after extends the *hit* area into the sheet's top-trailing corner — the dead header padding around a centered button was the "tap here → nothing happens" zone, and the corner is the easiest place to hit. --edge-nudge is a negative inline-end margin that slides the whole button (and its glyph) that much closer to the physical edge. */ --ms-fullscreen-close-edge-nudge: calc(0.8 * var(--ms-fullscreen-rem)); /* Truncated-label info affordance (fullscreen only). A circled "i" revealed at the trailing edge of a row whose label is clipped, so the full label is one tap away on touch (where hover tooltips never fire). Sized in --ms-fullscreen-rem. */ --ms-fullscreen-info-size: calc(2.8 * var(--ms-fullscreen-rem)); --ms-fullscreen-info-icon-size: calc(1.8 * var(--ms-fullscreen-rem)); --ms-fullscreen-info-color: var(--ms-accent-color); --ms-fullscreen-info-bg-hover: var(--ms-option-bg-matched, transparent); /* Navigate-mode match navigator under the fullscreen search box: a muted result count plus round prev/next buttons that step through matches (the touch stand-in for desktop's Ctrl+Arrow). Sized in --ms-fullscreen-rem like the rest of the overlay. */ --ms-fullscreen-nav-gap: calc(0.6 * var(--ms-fullscreen-rem)); --ms-fullscreen-nav-padding-top: calc(0.6 * var(--ms-fullscreen-rem)); --ms-fullscreen-nav-count-font-size: calc(1.3 * var(--ms-fullscreen-rem)); --ms-fullscreen-nav-count-color: var(--ms-text-muted-color, var(--ms-dropdown-text-color)); --ms-fullscreen-nav-btn-size: calc(3.2 * var(--ms-fullscreen-rem)); --ms-fullscreen-nav-btn-icon-size: calc(1.6 * var(--ms-fullscreen-rem)); --ms-fullscreen-nav-btn-color: var(--ms-dropdown-text-color); --ms-fullscreen-nav-btn-bg: var(--ms-option-bg-matched, transparent); /* Hover = a stronger accent tint than the resting state (8%). A translucent color-mix of the accent adapts to any panel background — unlike --ms-accent-color-light, which is a fixed light-dark() pair that resolves to its pale light branch on dark themes that set --base-* colors but not color-scheme (e.g. the neon example), producing a jarring near-white chip. Stays fully themeable via this variable. */ --ms-fullscreen-nav-btn-bg-hover: color-mix(in srgb, var(--ms-accent-color) 22%, transparent); /* Pager match-navigator glyph (the prev/next ^ ⌄ buttons). Defaults to the shared --ms-icon-chevron, so it follows the base chevron out of the box. The pager rotates this source -90° (prev → up) / 90° (next → down), so it expects a RIGHT-pointing glyph — override it here if a theme points --base-icon-chevron somewhere else (e.g. a pre-oriented toggle caret) and you don't want that leaking into the pager. */ --ms-fullscreen-nav-btn-icon: var(--ms-icon-chevron); /* Chevron glyph — the dropdown toggle's affordance, and the default source for the pager (via --ms-fullscreen-nav-btn-icon above). Wired to the --base-icon contract (--base-icon-chevron, a Lucide angle that fills its viewBox, so it renders at full optical size — unlike the small solid caret) with an inline right-pointing chevron as the standalone fallback. It points RIGHT at rest; consumers rotate it into place (toggle: 90° closed → down, -90° open → up — themeable via --ms-toggle-rotate-*; pager: -90° → up, 90° → down). Override --ms-icon-chevron (or --base-icon-chevron globally) to re-skin both at once, or override --ms-fullscreen-nav-btn-icon alone to diverge the pager. */ --ms-icon-chevron: var(--base-icon-chevron, url("data:image/svg+xml;utf8,")); /* SVG "i-in-a-circle" glyph — rendered via mask so it inherits the info color via currentColor. Override with any mask-friendly url() SVG. */ --ms-icon-info: url("data:image/svg+xml;utf8,"); /* Tighter tree indent for the phone overlay so deep nodes leave room for the label. Sized in --ms-fullscreen-rem (like the rest of the overlay) so it scales with the phone view: at the 12px default this is ~8.4px base + ~14.4px/level, vs the floating default's real-rem 0.75rem/1.25rem (tree.css). Raise --ms-fullscreen-rem and the indent grows with the rows. */ --ms-fullscreen-tree-base-indent: calc(0.7 * var(--ms-fullscreen-rem)); --ms-fullscreen-tree-indent: calc(1.2 * var(--ms-fullscreen-rem)); /* ========================================================================== DROPDOWN ACTIONS ========================================================================== */ --ms-actions-gap: calc(0.4 * var(--ms-rem)); --ms-actions-padding: calc(0.8 * var(--ms-rem)); --ms-actions-border-bottom: 1px solid var(--ms-actions-border-color); /* Action Button */ --ms-action-btn-padding: calc(0.4 * var(--ms-rem)) calc(0.8 * var(--ms-rem)); --ms-action-btn-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem)); --ms-action-btn-border: var(--ms-border); --ms-action-btn-border-radius: var(--ms-border-radius-sm); --ms-action-btn-bg: transparent; --ms-action-btn-color: inherit; --ms-action-btn-bg-hover: var(--ms-primary-bg); --ms-action-btn-border-color-hover: var(--ms-accent-color); --ms-transform-scale-active: 0.98; /* ========================================================================== OPTIONS CONTAINER & GROUPS ========================================================================== */ --ms-options-padding: 0; /* Group */ --ms-group-border-top: 1px solid var(--ms-group-border-color); --ms-group-margin-top: calc(0.4 * var(--ms-rem)); --ms-group-padding-top: calc(0.4 * var(--ms-rem)); /* Group Label */ --ms-group-label-padding: calc(0.4 * var(--ms-rem)) calc(1.2 * var(--ms-rem)); --ms-group-label-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem)); --ms-group-label-font-weight: var(--base-font-weight-semibold, 600); --ms-group-label-color: var(--ms-text-color-3); --ms-group-label-transform: uppercase; --ms-group-label-letter-spacing: 0.05em; /* ========================================================================== INDIVIDUAL OPTIONS ========================================================================== Per-component theming colors live in the SEMANTIC VARIABLES block above (--ms-option-bg, --ms-option-bg-hover, --ms-option-bg-focused, --ms-option-bg-matched, --ms-option-bg-selected, --ms-option-outline-color-focused, --ms-option-border-matched-color). This block holds layout-only sizing. */ --ms-option-gap: calc(0.8 * var(--ms-rem)); --ms-option-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem)); --ms-option-padding-h: calc(1.2 * var(--ms-rem)); /* Adjustable row height for non-virtual rows (flat + tree). Default `auto` = content-driven (padding + line-height), matching web-treeview's node rows. Set a length for a consistent minimum row height; rows still grow if their content is taller (unless you also truncate the title, below). Virtual-scroll rows use the fixed `--ms-option-height` instead. */ --ms-option-min-height: auto; --ms-option-outline-focused: 2px solid var(--ms-option-outline-color-focused); --ms-option-focus-outline-offset: -2px; --ms-option-border-matched: 3px solid var(--ms-option-border-matched-color); /* Option State Combinations */ --ms-option-bg-focused-hover: var(--ms-primary-bg); --ms-option-bg-matched-hover: color-mix(in srgb, var(--ms-accent-color) 12%, transparent); --ms-option-bg-selected-focused: color-mix(in srgb, var(--ms-accent-color) 15%, transparent); --ms-option-bg-selected-matched: color-mix(in srgb, var(--ms-accent-color) 15%, transparent); --ms-option-disabled-bg: var(--base-disabled-bg, transparent); --ms-option-bg-disabled-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent); --ms-disabled-opacity: 0.5; /* ========================================================================== OPTION CONTENT ========================================================================== */ --ms-option-content-gap: calc(0.8 * var(--ms-rem)); /* Option Icon */ --ms-option-icon-size: calc(2 * var(--ms-rem)); --ms-option-icon-font-size: calc(var(--base-font-size-base, 1.6) * var(--ms-rem)); /* Option Title (--ms-option-mark-bg / --ms-option-mark-color live in the SEMANTIC VARIABLES block above) */ --ms-option-title-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem)); --ms-option-mark-font-weight: var(--base-font-weight-semibold, 600); /* Long-title handling. Default = wrap (multi-line), matching the treeview packages, which leave `.wtv__node-label` / `.stv__node-label` unstyled. To truncate to a single line with an ellipsis, flip all three (a length is only needed if you didn't already fix the row height): --ms-option-title-white-space: nowrap; --ms-option-title-overflow: hidden; --ms-option-title-text-overflow: ellipsis; `.ms__option-title` is the label hook (analogous to `.wtv__node-label`); its flex ancestors already set `min-width: 0`, so ellipsis works without extra CSS. Pair with `enable-option-tooltips` to reveal the full text on hover. */ --ms-option-title-white-space: normal; --ms-option-title-overflow: visible; --ms-option-title-text-overflow: clip; /* Option Subtitle */ --ms-option-subtitle-margin-top: calc(0.4 * var(--ms-rem)); --ms-option-subtitle-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem)); --ms-option-subtitle-line-height: var(--base-line-height-tight, 1.25); /* Checkbox */ /* Zero by default: the row centers the checkbox via `align-items: center`, so any top margin would decenter it (the checkbox sat ~1px low against the label — most visible in fullscreen where --ms-rem is larger). The small top nudge is only meaningful when the checkbox aligns to the top of a wrapping label; it's applied there via [data-checkbox-align="top"] in options.css. */ --ms-checkbox-margin-top: 0; --ms-checkbox-margin-right: 0; --ms-checkbox-margin-bottom: 0; --ms-checkbox-margin-left: 0; --ms-checkbox-size: calc(1.6 * var(--ms-rem)); --ms-checkbox-scale: 1; --ms-checkbox-align: center; /* Checkbox Styling */ --ms-checkbox-bg: var(--ms-input-bg); /* Unchecked border — deliberately stronger than the faint generic --ms-border so the box reads as a real, clickable control. Tune weight/colour with these two. */ --ms-checkbox-border-width: 1px; --ms-checkbox-border-color: var(--base-checkbox-border-color, #8f8f8f); --ms-checkbox-border: var(--ms-checkbox-border-width) solid var(--ms-checkbox-border-color); --ms-checkbox-border-radius: calc(0.3 * var(--ms-rem)); /* Checkmark stroke width — bump for a bolder tick. */ --ms-checkbox-checkmark-thickness: 2.5px; --ms-checkbox-checked-bg: var(--ms-accent-color); --ms-checkbox-checked-border: var(--ms-checkbox-border-width) solid var(--ms-accent-color); --ms-checkbox-checkmark-color: var(--ms-text-color-on-accent); --ms-checkbox-hover-border-color: var(--ms-accent-color); --ms-checkbox-disabled-bg: var(--ms-primary-bg); --ms-checkbox-disabled-border: var(--ms-checkbox-border-width) solid var(--ms-border-color); /* Checkbox State Combinations */ --ms-checkbox-checked-bg-hover: var(--ms-accent-color-hover); --ms-checkbox-checked-border-color-hover: var(--ms-accent-color-hover); /* ========================================================================== EMPTY & LOADING STATES ========================================================================== */ /* Shared footprint so the dropdown doesn't jump when swapping the empty ("No data") block for the loader (spinner + text) during async search. Sized to contain a small spinner + gap + one text line; override if a consumer's loader is taller. */ --ms-state-min-height: calc(8 * var(--ms-rem)); --ms-empty-padding: calc(1.6 * var(--ms-rem)) calc(1.2 * var(--ms-rem)); --ms-empty-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem)); --ms-empty-color: var(--ms-text-color-3); /* "Add new" prompt (empty state when isAddNewAllowed + typed text). A clickable row keyed off the accent so it reads as an action, not a dead message. */ --ms-add-new-padding: var(--ms-option-padding); --ms-add-new-gap: var(--ms-option-gap); --ms-add-new-font-size: var(--ms-empty-font-size); --ms-add-new-color: var(--ms-accent-color); --ms-add-new-color-hover: var(--ms-accent-color); --ms-add-new-bg-hover: var(--ms-option-bg-hover); --ms-add-new-icon-size: calc(1.6 * var(--ms-rem)); /* Loader */ --ms-loader-padding: calc(1.6 * var(--ms-rem)) calc(1.2 * var(--ms-rem)); --ms-loader-gap: calc(0.8 * var(--ms-rem)); /* Loading Text */ --ms-loading-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem)); --ms-loading-text-color: var(--ms-text-color-3); /* ========================================================================== BADGES DISPLAY ========================================================================== */ --ms-badges-gap: calc(0.8 * var(--ms-rem)); --ms-badges-margin-bottom: calc(0.8 * var(--ms-rem)); --ms-badges-margin-top: calc(0.8 * var(--ms-rem)); --ms-badges-margin-left: calc(0.4 * var(--ms-rem)); --ms-badges-margin-right: calc(0.4 * var(--ms-rem)); /* Vertical alignment for inline (left/right) badge positioning */ /* Options: center (default), flex-start (top), flex-end (bottom) */ --ms-inline-align: center; /* Individual Badge (--ms-badge-bg / --ms-badge-bg-hover / --ms-badge-bg-active live in the SEMANTIC VARIABLES block above) */ --ms-badge-gap: calc(0.8 * var(--ms-rem)); --ms-badge-height: calc(2.7 * var(--ms-rem)); --ms-badge-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem)); --ms-badge-font-weight: var(--base-font-weight-semibold, 600); --ms-badge-border-radius: var(--ms-border-radius-sm); --ms-order-first: -1; /* ========================================================================== BADGE TEXT & REMOVE BUTTON ========================================================================== */ /* Badge Text */ --ms-badge-text-padding: 0 calc(0.8 * var(--ms-rem)); --ms-badge-text-bg: var(--ms-accent-color-light); --ms-badge-text-color: var(--ms-accent-color); --ms-badge-text-border: none; /* Badge Remove Button */ --ms-badge-remove-width: calc(2.7 * var(--ms-rem)); --ms-badge-remove-bg: var(--ms-accent-color); --ms-badge-remove-color: var(--ms-text-color-on-accent); --ms-badge-remove-border: none; --ms-badge-remove-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem)); --ms-badge-remove-bg-hover: var(--ms-accent-color-hover); --ms-badge-remove-box-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--ms-accent-color) 50%, transparent); /* Matches the input-clear / count-clear ✕ glyphs (also 1.4×rem) so all three read at the same size; the old 1.0×rem was fine for the default stroke `x` but rendered a filled custom --base-icon-remove glyph (square-with-x) too small inside the mask box. */ --ms-badge-remove-icon-size: calc(1.4 * var(--ms-rem)); /* SVG X glyph (Lucide `x`) — rendered via mask so it inherits --ms-badge-remove-color via currentColor. Drives the badge remove (×) and the fullscreen/popover close (✕). Follows the shared --base-icon contract: prefers --base-icon-remove, then --base-icon-close, so a theme re-skinning its close/remove glyph re-skins these too; the inline Lucide `x` is the standalone fallback (no base layer loaded). Override --ms-icon-remove to diverge from the base contract. */ --ms-icon-remove: var(--base-icon-remove, var(--base-icon-close, url("data:image/svg+xml;utf8,"))); /* SVG "clear search" glyph (Lucide `search-x`: a magnifier with an x) used by the fullscreen search field's clear button. Deliberately NOT the bare X of --ms-icon-remove so it doesn't read as a second close button beside the overlay ✕. Rendered via mask, so it inherits its color via currentColor; override with any mask-friendly SVG url(). */ --ms-icon-search-clear: url("data:image/svg+xml;utf8,"); /* Mode-toggle glyphs for the fullscreen search-mode switch. The button shows the CURRENT mode: a plain magnifier (Lucide `search`) for navigate, a funnel (Lucide `filter`) for filter. Rendered via mask (inherit color via currentColor); override with any mask-friendly SVG url(). */ --ms-icon-search: var(--base-icon-search, url("data:image/svg+xml;utf8,")); --ms-icon-filter: var(--base-icon-filter, url("data:image/svg+xml;utf8,")); /* Checkbox glyphs — the checkmark (checked) and dash (indeterminate/tri-state), rendered as masks so they inherit --ms-checkbox-checkmark-color and follow the shared --base-icon-* contract. Override either to diverge from the base. */ --ms-icon-check: var(--base-icon-check, url("data:image/svg+xml;utf8,")); --ms-icon-indeterminate: var(--base-icon-indeterminate, url("data:image/svg+xml;utf8,")); /* mask-size for the checkmark/dash glyph inside the checkbox box. Defaults to the shared --base-icon-check-size (the SAME knob pure-admin's .pa-checkbox reads), so a theme rescales the mark once for both; override --ms-icon-check-size to diverge just this component. 68% assumes a Lucide-style glyph that fills its viewBox edge-to-edge. */ --ms-icon-check-size: var(--base-icon-check-size, 68%); /* "Add new" glyph (empty-state create prompt) — a plus, rendered as a mask so it inherits the row's currentColor. Follows the shared --base-icon-* contract: prefers --base-icon-plus, then --base-icon-add, then an inline "+" fallback. */ --ms-icon-add-new: var(--base-icon-plus, var(--base-icon-add, url("data:image/svg+xml;utf8,"))); /* Badge Counter Indicator (layout-only properties, colors come from semantic section) */ --ms-badge-counter-bg: transparent; --ms-badge-counter-border: 1px solid var(--ms-badge-counter-border-color); --ms-badge-counter-border-radius: var(--ms-border-radius-sm); /* ========================================================================== "+X MORE" BADGE ========================================================================== */ --ms-more-badge-bg: var(--ms-accent-color-light); --ms-more-badge-hover-bg: var(--ms-badge-bg-hover); --ms-more-badge-active-bg: var(--ms-accent-color-light-hover); /* ========================================================================== COUNT DISPLAY MODE ========================================================================== */ --ms-count-display-margin-bottom: calc(0.8 * var(--ms-rem)); --ms-count-display-margin-top: calc(0.8 * var(--ms-rem)); --ms-count-display-margin-left: calc(0.8 * var(--ms-rem)); --ms-count-display-margin-right: calc(0.8 * var(--ms-rem)); /* Count Badge Wrapper */ --ms-counter-wrapper-bg: transparent; --ms-counter-wrapper-border: var(--ms-border); --ms-counter-wrapper-border-radius: var(--ms-border-radius-sm); --ms-counter-wrapper-padding: calc(0.4 * var(--ms-rem)) calc(0.8 * var(--ms-rem)); --ms-counter-wrapper-gap: calc(0.4 * var(--ms-rem)); --ms-counter-wrapper-bg-hover: var(--ms-primary-bg); --ms-counter-wrapper-border-color-hover: var(--ms-accent-color); /* ========================================================================== COUNT TEXT & CLEAR BUTTON ========================================================================== */ /* Count Text */ --ms-count-text-bg: transparent; --ms-count-text-border: none; --ms-count-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem)); --ms-count-text-color: var(--ms-text-color-1); /* Count Clear Button */ --ms-count-clear-size: calc(1.6 * var(--ms-rem)); --ms-count-clear-bg: transparent; --ms-count-clear-color: var(--ms-text-color-3); --ms-count-clear-font-size: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem)); --ms-count-clear-border-radius: var(--ms-border-radius-sm); /* Hover fills with SOLID accent and flips the glyph to text-on-accent — mirrors .ms__badge-remove. The old "accent-tint bg + accent glyph" was same-hue: the ✕ melted into its own hover background (invisible on near-white accents like minimal-dark, low-contrast blue-on-blue everywhere else). */ --ms-count-clear-bg-hover: var(--ms-accent-color); --ms-count-clear-color-hover: var(--ms-text-color-on-accent); --ms-count-clear-icon-size: calc(1.4 * var(--ms-rem)); /* Field-clear ✕ (input clear + count clear). Its own knob in the --base-icon contract: prefers --base-icon-clear so a theme can diverge field-clear from close/remove, then falls through to --ms-icon-remove (which itself resolves --base-icon-remove → --base-icon-close → inline ✕). Same glyph as remove by default; override --base-icon-clear alone to split them. */ --ms-icon-clear: var(--base-icon-clear, var(--ms-icon-remove)); /* ========================================================================== TOOLTIPS ========================================================================== */ --ms-tooltip-color: var(--ms-tooltip-text-color); --ms-tooltip-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem)); --ms-tooltip-border-radius: var(--ms-border-radius-lg); --ms-tooltip-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem)); --ms-tooltip-max-width: calc(32 * var(--ms-rem)); --ms-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); --ms-tooltip-z-index: 10000; /* Option (dropdown row) tooltip — per-feature hooks default to the shared tooltip surface, so option tooltips look identical until you override one of these independently. */ --ms-option-tooltip-bg: var(--ms-tooltip-bg); --ms-option-tooltip-text-color: var(--ms-tooltip-text-color); --ms-option-tooltip-padding: var(--ms-tooltip-padding); --ms-option-tooltip-border-radius: var(--ms-tooltip-border-radius); --ms-option-tooltip-font-size: var(--ms-tooltip-font-size); --ms-option-tooltip-max-width: var(--ms-tooltip-max-width); --ms-option-tooltip-shadow: var(--ms-tooltip-shadow); --ms-option-tooltip-z-index: var(--ms-tooltip-z-index); /* ========================================================================== TRANSIENT MESSAGE / TOAST (showMessage) Surfaced on top of the component so a veto reason (or any consumer feedback) is visible even in the fullscreen overlay, where page UI is covered. Sizing is --ms-rem-based (a fullscreen override rescales it below at :host); per-variant colours default to sensible tones and are theme-overridable via --base-*. ========================================================================== */ --ms-message-bg: var(--ms-message-info-bg); --ms-message-color: var(--ms-message-info-color); --ms-message-border: 1px solid transparent; --ms-message-border-radius: var(--ms-border-radius-lg); --ms-message-padding: calc(1.0 * var(--ms-rem)) calc(1.4 * var(--ms-rem)); --ms-message-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem)); --ms-message-font-weight: var(--base-font-weight-medium, 500); --ms-message-max-width: calc(40 * var(--ms-rem)); --ms-message-shadow: 0 4px 16px rgb(0 0 0 / 0.18); /* Gap from the bottom edge of the viewport in the fullscreen overlay. */ --ms-message-fullscreen-offset: calc(2.4 * var(--ms-fullscreen-rem)); --ms-message-z-index: var(--ms-z-index-fullscreen-tooltip); /* Variants (bg + text). Info reuses the tooltip surface; the rest are status tones. */ --ms-message-info-bg: var(--ms-tooltip-bg); --ms-message-info-color: var(--ms-tooltip-text-color); --ms-message-warning-bg: var(--base-warning-bg, #f59e0b); --ms-message-warning-color: var(--base-warning-color, #1a1a1a); --ms-message-error-bg: var(--base-danger-bg, #ef4444); --ms-message-error-color: var(--base-danger-color, #ffffff); --ms-message-success-bg: var(--base-success-bg, #10b981); --ms-message-success-color: var(--base-success-color, #ffffff); /* ========================================================================== SELECTED POPOVER ========================================================================== */ --ms-z-index-popover: 10000; /* Selected-items ("badges") popover width — tracks the live field width by default (same as the dropdown, so the two panels line up under the control). Override at app/theme level or per-instance via the selected-popover-width attribute — e.g. a fixed calc(32 * var(--ms-rem)) for a constant width independent of the field. */ --ms-selected-popover-width: var(--ms-input-current-width); --ms-selected-popover-max-height: calc(32 * var(--ms-rem)); --ms-selected-popover-border: 1px solid var(--ms-selected-popover-border-color); --ms-selected-popover-border-radius: var(--ms-border-radius-lg); --ms-selected-popover-box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); /* Popover Header */ --ms-selected-popover-header-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem)); --ms-selected-popover-header-bg: color-mix(in srgb, var(--ms-accent-color) 10%, transparent); --ms-selected-popover-header-border-bottom: 1px solid var(--ms-selected-popover-header-border-color); --ms-selected-popover-header-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem)); --ms-selected-popover-header-font-weight: var(--base-font-weight-semibold, 600); --ms-selected-popover-header-color: var(--ms-text-color-1); /* ========================================================================== POPOVER CLOSE BUTTON ========================================================================== */ --ms-popover-close-size: calc(2.4 * var(--ms-rem)); --ms-selected-popover-close-bg: transparent; --ms-selected-popover-close-color: var(--ms-text-color-3); --ms-selected-popover-close-font-size: calc(var(--base-font-size-xl, 2) * var(--ms-rem)); --ms-selected-popover-close-border-radius: var(--ms-border-radius-sm); /* Solid accent fill + on-accent glyph (see .ms__count-clear note) — avoids the same-hue "accent glyph on accent-tint" melt on hover. */ --ms-selected-popover-close-bg-hover: var(--ms-accent-color); --ms-selected-popover-close-color-hover: var(--ms-text-color-on-accent); --ms-selected-popover-close-icon-size: calc(1.4 * var(--ms-rem)); /* ========================================================================== POPOVER BODY ========================================================================== */ --ms-selected-popover-body-gap: calc(0.4 * var(--ms-rem)); --ms-selected-popover-body-padding: calc(0.8 * var(--ms-rem)); --ms-selected-popover-body-max-height: calc(28.8 * var(--ms-rem)); /* ========================================================================== TYPOGRAPHY SCALE ========================================================================== */ /* Font Sizes (unitless multipliers × --ms-rem) */ --ms-font-size-2xs: calc(var(--base-font-size-2xs, 1) * var(--ms-rem)); --ms-font-size-xs: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem)); --ms-font-size-sm: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem)); --ms-font-size-base: calc(var(--base-font-size-base, 1.6) * var(--ms-rem)); --ms-font-size-lg: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem)); /* Font Weights */ --ms-font-weight-normal: var(--base-font-weight-normal, 400); --ms-font-weight-medium: var(--base-font-weight-medium, 500); --ms-font-weight-semibold: var(--base-font-weight-semibold, 600); /* Line Heights */ --ms-line-height-none: 1; --ms-line-height-tight: var(--base-line-height-tight, 1.25); --ms-line-height-normal: var(--base-line-height-normal, 1.5); --ms-line-height-relaxed: var(--base-line-height-relaxed, 1.75); /* ========================================================================== BORDER RADIUS SCALE ========================================================================== */ --ms-border-radius-sm: calc(var(--base-border-radius-sm, 0.4) * var(--ms-rem)); --ms-border-radius-md: calc(var(--base-border-radius-md, 0.6) * var(--ms-rem)); --ms-border-radius-lg: calc(var(--base-border-radius-lg, 0.8) * var(--ms-rem)); --ms-border-radius: var(--ms-border-radius-md); /* ========================================================================== SPACING & SIZING ========================================================================== */ --ms-spacing-xs: calc(0.4 * var(--ms-rem)); --ms-spacing-sm: calc(0.8 * var(--ms-rem)); --ms-spacing-md: calc(1.2 * var(--ms-rem)); --ms-spacing-lg: calc(1.6 * var(--ms-rem)); /* ========================================================================== TRANSITIONS & EFFECTS ========================================================================== */ /* Durations stay local: the --ms scale (150/200ms) doesn't line up with --base-duration-* (fast 100ms / normal 150ms / medium 250ms), so wiring would silently change timings. */ --ms-transition-fast: 150ms; --ms-transition-normal: 200ms; /* Easing is an exact match for --base-ease-standard, so it flows from the shared token. */ --ms-easing-snappy: var(--base-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)); /* ========================================================================== OPACITY VALUES ========================================================================== */ --ms-placeholder-opacity: 0.6; --ms-disabled-input-opacity: 0.6; /* ========================================================================== SCROLLBAR ========================================================================== */ --ms-scrollbar-width: 8px; --ms-scrollbar-track-bg: transparent; --ms-scrollbar-thumb-bg: var(--ms-border-color); --ms-scrollbar-thumb-bg-hover: var(--ms-text-color-3); --ms-scrollbar-thumb-border-radius: 4px; /* ========================================================================== DEBUG PANEL (dev-only) ========================================================================== */ --ms-debug-bg: var(--base-elevated-bg, light-dark(#f9fafb, #2b2b2b)); --ms-debug-border-color: var(--ms-border-color); --ms-debug-text-color: var(--ms-text-color-1); --ms-debug-border-radius: var(--ms-border-radius-md); --ms-debug-summary-color: var(--ms-accent-color); --ms-debug-summary-bg-hover: var(--ms-primary-bg); --ms-debug-summary-outline-color: var(--ms-accent-color); --ms-debug-summary-border-radius: var(--ms-border-radius-sm); --ms-debug-stats-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a)); --ms-debug-stats-border-radius: var(--ms-border-radius-sm); --ms-debug-bullet-color: var(--ms-accent-color); }