@keenmate/web-multiselect 1.5.1 → 1.6.1

package/src/scss/_css-variables.scss

@@ -1,612 +0,0 @@
-// ==============================================================================
-// 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
-//
-// All variables use SCSS variable fallbacks for reliability.
-// External overrides will take precedence over these defaults.
-//
-// Usage from outside Shadow DOM:
-//   multi-select {
-//     --ms-accent-color: #10b981;
-//     --ms-input-border-radius: 0.5rem;
-//   }
-// ==============================================================================
-
-@use 'variables' as *;
-
-:host {
-  // ==========================================================================
-  // BASE SIZING UNIT
-  // ==========================================================================
-  // All sizing values are based on this unit for consistent scaling.
-  // Default: 10px produces standard pixel values
-  // Pure Admin: Set to 1rem (inherits from html { font-size: 10px })
-  // Custom: Set to any value to scale all sizes proportionally
-  --ms-rem: 10px;
-
-  // ==========================================================================
-  // FONT FAMILY (set at :host so all shadow DOM content inherits)
-  // ==========================================================================
-  // Dropdown/popover are siblings of [data-multiselect], so we set font here
-  font-family: var(--ms-font-family, var(--base-font-family, #{$ms-font-family}));
-
-  // ==========================================================================
-  // COLORS & THEME
-  // ==========================================================================
-
-  // Accent Colors
-  --ms-accent-color: #{$ms-accent-color};
-  --ms-accent-color-hover: #{$ms-accent-color-hover};
-  --ms-accent-color-active: #{$ms-accent-color-active};
-
-  // Text Colors
-  --ms-text-primary: #{$ms-text-primary};
-  --ms-text-secondary: #{$ms-text-secondary};
-  --ms-text-on-accent: #{$ms-text-on-accent};
-
-  // Background Colors
-  --ms-primary-bg: #{$ms-primary-bg};
-  --ms-primary-bg-hover: #{$ms-primary-bg-hover};
-  --ms-border-color: #{$ms-border-color};
-
-  // ==========================================================================
-  // SEMANTIC VARIABLES - Component-Specific Theming
-  // ==========================================================================
-  // These provide an intermediate layer between base colors and components,
-  // allowing independent customization of each component without affecting others.
-  // Users can override these to customize specific components while keeping
-  // the base theme intact.
-  //
-  // Pattern: --ms-{component}-{property}-{state}
-  // Example: --ms-input-background, --ms-option-text-color-hover
-  // ==========================================================================
-
-  // Input Component Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-input-background: var(--ms-input-bg);
-  --ms-input-color: var(--ms-text-primary);
-  --ms-input-border-color: var(--ms-border-color);
-  --ms-input-border-color-hover: var(--ms-text-secondary);
-  --ms-input-border-color-focus: var(--ms-accent-color);
-  --ms-input-placeholder-color: var(--ms-text-secondary);
-  --ms-input-background-disabled: var(--ms-input-bg-disabled);
-
-  // Toggle Icon Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-toggle-icon-color: var(--ms-text-secondary);
-  --ms-toggle-icon-color-open: var(--ms-text-secondary);
-
-  // Counter Badge (in Input) Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-counter-badge-background: var(--ms-accent-color);
-  --ms-counter-badge-background-hover: var(--ms-accent-color-hover);
-  --ms-counter-badge-color: var(--ms-text-on-accent);
-
-  // Floating Hint Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-hint-background: var(--ms-hint-bg);
-  --ms-hint-color: var(--ms-text-secondary);
-  --ms-hint-border-color: var(--ms-border-color);
-
-  // Dropdown Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-dropdown-background: var(--ms-dropdown-bg);
-  --ms-dropdown-text-color: var(--ms-text-primary);
-  --ms-dropdown-border-color: var(--ms-border-color);
-
-  // Dropdown Actions Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-actions-background: var(--ms-dropdown-bg);
-  --ms-actions-border-color: var(--ms-border-color);
-
-  // Action Button Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-action-button-background: transparent;
-  --ms-action-button-background-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-primary);
-
-  // Group Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-group-border-color: var(--ms-border-color);
-  --ms-group-label-color: var(--ms-text-secondary);
-
-  // Option Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-option-text-color: var(--ms-text-primary);
-  --ms-option-background: transparent;
-  --ms-option-background-hover: var(--ms-primary-bg);
-  --ms-option-color-hover: inherit;
-  --ms-option-background-focused: var(--ms-primary-bg);
-  --ms-option-color-focused: inherit;
-  --ms-option-outline-color-focused: var(--ms-accent-color);
-  --ms-option-background-selected: var(--ms-option-bg-selected);
-  --ms-option-color-selected: inherit;
-  --ms-option-color-selected-hover: var(--ms-option-color-selected);
-  --ms-option-background-matched: var(--ms-option-bg-matched);
-  --ms-option-color-matched: inherit;
-  --ms-option-border-matched-color: var(--ms-option-border-matched);
-
-  // Option Content Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-option-title-color: var(--ms-text-primary);
-  --ms-option-subtitle-color: var(--ms-text-secondary);
-  --ms-option-mark-background: var(--ms-option-mark-bg);
-  --ms-option-mark-color: inherit;
-
-  // Empty/Loading State Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-empty-color: var(--ms-text-secondary);
-  --ms-loading-color: var(--ms-text-secondary);
-
-  // Badge Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-badge-background: var(--ms-badge-bg);
-  --ms-badge-background-hover: var(--ms-badge-bg-hover);
-  --ms-badge-background-active: var(--ms-badge-bg-active);
-
-  // Badge Text Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-badge-text-background: var(--ms-badge-text-bg);
-  --ms-badge-text-color: var(--ms-accent-color);
-  --ms-badge-text-background-hover: var(--ms-badge-bg-hover);
-  --ms-badge-text-color-hover: var(--ms-badge-text-color);
-
-  // Badge Remove Button Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-badge-remove-background: var(--ms-accent-color);
-  --ms-badge-remove-background-hover: var(--ms-accent-color-hover);
-  --ms-badge-remove-color: var(--ms-text-on-accent);
-
-  // Badge Counter Variant Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-badge-counter-border-color: var(--ms-border-color);
-  --ms-badge-counter-text-background: var(--ms-badge-counter-text-bg);
-  --ms-badge-counter-text-color: var(--ms-text-secondary);
-  --ms-badge-counter-remove-background: var(--ms-badge-counter-remove-bg);
-  --ms-badge-counter-remove-background-hover: var(--ms-badge-counter-remove-bg-hover);
-  --ms-badge-counter-remove-color: var(--ms-badge-counter-remove-color);
-
-  // Count Display Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-counter-wrapper-background: transparent;
-  --ms-counter-wrapper-background-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-primary);
-  --ms-count-clear-background: transparent;
-  --ms-count-clear-background-hover: var(--ms-accent-color);
-  --ms-count-clear-color: var(--ms-text-secondary);
-  --ms-count-clear-color-hover: var(--ms-accent-color);
-
-  // Tooltip Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-tooltip-background: var(--ms-tooltip-bg);
-  --ms-tooltip-text-color: var(--ms-tooltip-color);
-
-  // Selected Popover Semantic Variables
-  // --------------------------------------------------------------------------
-  --ms-selected-popover-background: var(--ms-dropdown-bg);
-  --ms-selected-popover-border-color: var(--ms-border-color);
-  --ms-selected-popover-header-background: var(--ms-selected-popover-header-bg);
-  --ms-selected-popover-header-color: var(--ms-text-primary);
-  --ms-selected-popover-header-border-color: var(--ms-border-color);
-  --ms-selected-popover-close-background: transparent;
-  --ms-selected-popover-close-background-hover: var(--ms-accent-color);
-  --ms-selected-popover-close-color: var(--ms-text-secondary);
-  --ms-selected-popover-close-color-hover: var(--ms-accent-color);
-
-  // ==========================================================================
-  // INPUT COMPONENT
-  // ==========================================================================
-
-  --ms-input-padding: #{$ms-input-padding};
-  --ms-input-padding-right: #{$ms-input-padding-right};
-  --ms-input-height: #{$ms-input-height};
-  --ms-input-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-input-border-style: #{$ms-input-border-style};
-  --ms-input-border-radius: #{$ms-input-border-radius};
-  --ms-input-bg: #{$ms-input-bg};
-  --ms-input-text: #{$ms-input-text};
-  --ms-input-focus-border-color: #{$ms-input-focus-border-color};
-  --ms-input-placeholder-color: #{$ms-input-placeholder-color};
-  --ms-input-bg-disabled: #{$ms-input-bg-disabled};
-
-  // ==========================================================================
-  // TOGGLE ICON
-  // ==========================================================================
-
-  --ms-toggle-right: #{$ms-toggle-right};
-  --ms-toggle-color: #{$ms-toggle-color};
-  --ms-transform-center-y: #{$ms-transform-center-y};
-  --ms-transform-rotate-180: #{$ms-transform-rotate-180};
-
-  // ==========================================================================
-  // COUNT BADGE (in input)
-  // ==========================================================================
-
-  --ms-counter-offset: #{$ms-counter-offset};
-  --ms-counter-padding: #{$ms-counter-padding};
-  --ms-counter-bg: #{$ms-counter-bg};
-  --ms-counter-color: #{$ms-counter-color};
-  --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: #{$ms-counter-border-radius};
-  --ms-counter-bg-hover: #{$ms-counter-bg-hover};
-  --ms-transform-scale-hover: #{$ms-transform-scale-hover};
-
-  // ==========================================================================
-  // FLOATING HINT
-  // ==========================================================================
-
-  --ms-hint-padding: #{$ms-hint-padding};
-  --ms-hint-bg: #{$ms-hint-bg};
-  --ms-hint-border: #{$ms-hint-border};
-  --ms-hint-border-radius: #{$ms-hint-border-radius};
-  --ms-hint-box-shadow: #{$ms-hint-box-shadow};
-  --ms-hint-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  --ms-hint-color: #{$ms-hint-color};
-
-  // ==========================================================================
-  // DROPDOWN
-  // ==========================================================================
-
-  --ms-dropdown-bg: #{$ms-dropdown-bg};
-  --ms-dropdown-border: #{$ms-dropdown-border};
-  --ms-dropdown-border-radius: #{$ms-dropdown-border-radius};
-  --ms-dropdown-box-shadow: #{$ms-dropdown-box-shadow};
-  --ms-options-max-height: #{$ms-options-max-height};
-  --ms-option-color: #{$ms-option-color};
-  --ms-z-index-dropdown: #{$ms-z-index-dropdown};
-  --ms-z-index-sticky: #{$ms-z-index-sticky};
-
-  // ==========================================================================
-  // DROPDOWN ACTIONS
-  // ==========================================================================
-
-  --ms-actions-gap: #{$ms-actions-gap};
-  --ms-actions-padding: #{$ms-actions-padding};
-  --ms-actions-border-bottom: #{$ms-actions-border-bottom};
-  --ms-actions-bg: #{$ms-actions-bg};
-
-  // Action Button
-  --ms-action-btn-padding: #{$ms-action-btn-padding};
-  --ms-action-btn-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  --ms-action-btn-border: #{$ms-action-btn-border};
-  --ms-action-btn-border-radius: #{$ms-action-btn-border-radius};
-  --ms-action-btn-bg: #{$ms-action-btn-bg};
-  --ms-action-btn-color: #{$ms-action-btn-color};
-  --ms-action-btn-bg-hover: #{$ms-action-btn-bg-hover};
-  --ms-action-btn-border-color-hover: #{$ms-action-btn-border-color-hover};
-  --ms-transform-scale-active: #{$ms-transform-scale-active};
-
-  // ==========================================================================
-  // OPTIONS CONTAINER & GROUPS
-  // ==========================================================================
-
-  --ms-options-padding: #{$ms-options-padding};
-
-  // Group
-  --ms-group-border-top: #{$ms-group-border-top};
-  --ms-group-margin-top: #{$ms-group-margin-top};
-  --ms-group-padding-top: #{$ms-group-padding-top};
-
-  // Group Label
-  --ms-group-label-padding: #{$ms-group-label-padding};
-  --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: #{$ms-group-label-color};
-  --ms-group-label-transform: #{$ms-group-label-transform};
-  --ms-group-label-letter-spacing: #{$ms-group-label-letter-spacing};
-
-  // ==========================================================================
-  // INDIVIDUAL OPTIONS
-  // ==========================================================================
-
-  --ms-option-gap: #{$ms-option-gap};
-  --ms-option-padding: #{$ms-option-padding};
-  --ms-option-padding-h: #{$ms-option-padding-h};
-  --ms-option-bg: #{$ms-option-bg};
-  --ms-option-bg-hover: #{$ms-option-bg-hover};
-  --ms-option-bg-focused: #{$ms-option-bg-focused};
-  --ms-option-outline-focused: #{$ms-option-outline-focused};
-  --ms-option-focus-outline-offset: #{$ms-option-focus-outline-offset};
-  --ms-option-bg-matched: #{$ms-option-bg-matched};
-  --ms-option-border-matched: #{$ms-option-border-matched};
-  --ms-option-bg-selected: #{$ms-option-bg-selected};
-
-  // Option State Combinations (background only - colors use fallback chains)
-  --ms-option-bg-focused-hover: #{$ms-option-bg-focused-hover};
-  --ms-option-bg-matched-hover: #{$ms-option-bg-matched-hover};
-  --ms-option-bg-selected-focused: #{$ms-option-bg-selected-focused};
-  --ms-option-bg-selected-matched: #{$ms-option-bg-selected-matched};
-  --ms-option-bg-disabled-selected: #{$ms-option-bg-disabled-selected};
-
-  --ms-disabled-opacity: #{$ms-disabled-opacity};
-
-  // ==========================================================================
-  // OPTION CONTENT
-  // ==========================================================================
-
-  --ms-option-content-gap: #{$ms-option-content-gap};
-
-  // Option Icon
-  --ms-option-icon-size: #{$ms-option-icon-size};
-  --ms-option-icon-font-size: calc(var(--base-font-size-base, 1.6) * var(--ms-rem));
-
-  // Option Title
-  --ms-option-title-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-option-title-color: #{$ms-option-title-color};
-  --ms-option-mark-bg: #{$ms-option-mark-bg};
-  --ms-option-mark-color: #{$ms-option-mark-color};
-  --ms-option-mark-font-weight: var(--base-font-weight-semibold, 600);
-
-  // Option Subtitle
-  --ms-option-subtitle-margin-top: #{$ms-option-subtitle-margin-top};
-  --ms-option-subtitle-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  --ms-option-subtitle-color: #{$ms-option-subtitle-color};
-  --ms-option-subtitle-line-height: var(--base-line-height-tight, 1.25);
-
-  // Checkbox
-  --ms-checkbox-margin-top: #{$ms-checkbox-margin-top};
-  --ms-checkbox-margin-right: #{$ms-checkbox-margin-right};
-  --ms-checkbox-margin-bottom: #{$ms-checkbox-margin-bottom};
-  --ms-checkbox-margin-left: #{$ms-checkbox-margin-left};
-  --ms-checkbox-size: #{$ms-checkbox-size};
-  --ms-checkbox-scale: #{$ms-checkbox-scale};
-  --ms-checkbox-align: center; // flex-start (top), center (default), flex-end (bottom)
-
-  // Checkbox Styling (custom appearance)
-  --ms-checkbox-bg: #{$ms-checkbox-bg};
-  --ms-checkbox-border: #{$ms-checkbox-border};
-  --ms-checkbox-border-radius: #{$ms-checkbox-border-radius};
-  --ms-checkbox-checked-bg: #{$ms-checkbox-checked-bg};
-  --ms-checkbox-checked-border: #{$ms-checkbox-checked-border};
-  --ms-checkbox-checkmark-color: #{$ms-checkbox-checkmark-color};
-  --ms-checkbox-hover-border-color: #{$ms-checkbox-hover-border-color};
-  --ms-checkbox-disabled-bg: #{$ms-checkbox-disabled-bg};
-  --ms-checkbox-disabled-border: #{$ms-checkbox-disabled-border};
-
-  // Checkbox State Combinations
-  --ms-checkbox-checked-bg-hover: #{$ms-checkbox-checked-bg-hover};
-  --ms-checkbox-checked-border-color-hover: #{$ms-checkbox-checked-border-color-hover};
-
-  // ==========================================================================
-  // EMPTY & LOADING STATES
-  // ==========================================================================
-
-  // Empty State
-  --ms-empty-padding: #{$ms-empty-padding};
-  --ms-empty-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-empty-color: #{$ms-empty-color};
-
-  // Loader
-  --ms-loader-padding: #{$ms-loader-padding};
-  --ms-loader-gap: #{$ms-loader-gap};
-
-  // Loading Text
-  --ms-loading-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-loading-text-color: #{$ms-loading-text-color};
-
-  // ==========================================================================
-  // BADGES DISPLAY
-  // ==========================================================================
-
-  --ms-badges-gap: #{$ms-badges-gap};
-  --ms-badges-margin-bottom: #{$ms-badges-margin-bottom};
-  --ms-badges-margin-top: #{$ms-badges-margin-top};
-  --ms-badges-margin-left: #{$ms-badges-margin-left};
-  --ms-badges-margin-right: #{$ms-badges-margin-right};
-
-  // Individual Badge
-  --ms-badge-gap: #{$ms-badge-gap};
-  --ms-badge-height: #{$ms-badge-height};
-  --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: #{$ms-badge-border-radius};
-  --ms-badge-bg: #{$ms-badge-bg};
-  --ms-badge-bg-hover: #{$ms-badge-bg-hover};
-  --ms-badge-bg-active: #{$ms-badge-bg-active};
-  --ms-order-first: #{$ms-order-first};
-
-  // ==========================================================================
-  // BADGE TEXT & REMOVE BUTTON
-  // ==========================================================================
-
-  // Badge Text
-  --ms-badge-text-padding: #{$ms-badge-text-padding};
-  --ms-badge-text-bg: #{$ms-badge-text-bg};
-  --ms-badge-text-color: #{$ms-badge-text-color};
-  --ms-badge-text-border: #{$ms-badge-text-border};
-
-  // Badge Remove Button
-  --ms-badge-remove-width: #{$ms-badge-remove-width};
-  --ms-badge-remove-bg: #{$ms-badge-remove-bg};
-  --ms-badge-remove-color: #{$ms-badge-remove-color};
-  --ms-badge-remove-border: #{$ms-badge-remove-border};
-  --ms-badge-remove-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  --ms-badge-remove-bg-hover: #{$ms-badge-remove-bg-hover};
-  --ms-badge-remove-box-shadow-focus: #{$ms-badge-remove-box-shadow-focus};
-  --ms-icon-remove: "#{$ms-icon-remove}";
-
-  // Badge Indicator (for "+ X more", "3 selected", compact mode)
-  --ms-badge-counter-bg: #{$ms-badge-counter-bg};
-  --ms-badge-counter-border: #{$ms-badge-counter-border};
-  --ms-badge-counter-border-radius: #{$ms-badge-counter-border-radius};
-  --ms-badge-counter-text-color: #{$ms-badge-counter-text-color};
-  --ms-badge-counter-text-bg: #{$ms-badge-counter-text-bg};
-  --ms-badge-counter-remove-bg: #{$ms-badge-counter-remove-bg};
-  --ms-badge-counter-remove-color: #{$ms-badge-counter-remove-color};
-  --ms-badge-counter-remove-bg-hover: #{$ms-badge-counter-remove-bg-hover};
-
-  // ==========================================================================
-  // "+X MORE" BADGE
-  // ==========================================================================
-
-  --ms-more-badge-bg: #{$ms-more-badge-bg};
-  --ms-more-badge-hover-bg: #{$ms-more-badge-hover-bg};
-  --ms-more-badge-active-bg: #{$ms-more-badge-active-bg};
-
-  // ==========================================================================
-  // COUNT DISPLAY MODE
-  // ==========================================================================
-
-  --ms-count-display-margin-bottom: #{$ms-count-display-margin-bottom};
-  --ms-count-display-margin-top: #{$ms-count-display-margin-top};
-  --ms-count-display-margin-left: #{$ms-count-display-margin-left};
-  --ms-count-display-margin-right: #{$ms-count-display-margin-right};
-
-  // Count Badge Wrapper
-  --ms-counter-wrapper-bg: #{$ms-counter-wrapper-bg};
-  --ms-counter-wrapper-border: #{$ms-counter-wrapper-border};
-  --ms-counter-wrapper-border-radius: #{$ms-counter-wrapper-border-radius};
-  --ms-counter-wrapper-padding: #{$ms-counter-wrapper-padding};
-  --ms-counter-wrapper-gap: #{$ms-counter-wrapper-gap};
-  --ms-counter-wrapper-bg-hover: #{$ms-counter-wrapper-bg-hover};
-  --ms-counter-wrapper-border-color-hover: #{$ms-counter-wrapper-border-color-hover};
-
-  // ==========================================================================
-  // COUNT TEXT & CLEAR BUTTON
-  // ==========================================================================
-
-  // Count Text
-  --ms-count-text-bg: #{$ms-count-text-bg};
-  --ms-count-text-border: #{$ms-count-text-border};
-  --ms-count-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-count-text-color: #{$ms-count-text-color};
-
-  // Count Clear Button
-  --ms-count-clear-size: #{$ms-count-clear-size};
-  --ms-count-clear-bg: #{$ms-count-clear-bg};
-  --ms-count-clear-color: #{$ms-count-clear-color};
-  --ms-count-clear-font-size: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));
-  --ms-count-clear-border-radius: #{$ms-count-clear-border-radius};
-  --ms-count-clear-bg-hover: #{$ms-count-clear-bg-hover};
-  --ms-count-clear-color-hover: #{$ms-count-clear-color-hover};
-  --ms-icon-clear: "#{$ms-icon-clear}";
-
-  // ==========================================================================
-  // TOOLTIPS
-  // ==========================================================================
-
-  --ms-tooltip-bg: #{$ms-tooltip-bg};
-  --ms-tooltip-color: #{$ms-tooltip-color};
-  --ms-tooltip-padding: #{$ms-tooltip-padding};
-  --ms-tooltip-border-radius: #{$ms-tooltip-border-radius};
-  --ms-tooltip-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-tooltip-max-width: #{$ms-tooltip-max-width};
-  --ms-tooltip-shadow: #{$ms-tooltip-shadow};
-  --ms-tooltip-z-index: #{$ms-tooltip-z-index};
-
-  // ==========================================================================
-  // SELECTED POPOVER
-  // ==========================================================================
-
-  --ms-z-index-popover: #{$ms-z-index-popover};
-  --ms-selected-popover-width: #{$ms-selected-popover-width};
-  --ms-selected-popover-max-height: #{$ms-selected-popover-max-height};
-  --ms-selected-popover-bg: #{$ms-selected-popover-bg};
-  --ms-selected-popover-border: #{$ms-selected-popover-border};
-  --ms-selected-popover-border-radius: #{$ms-selected-popover-border-radius};
-  --ms-selected-popover-box-shadow: #{$ms-selected-popover-box-shadow};
-
-  // Popover Header
-  --ms-selected-popover-header-padding: #{$ms-selected-popover-header-padding};
-  --ms-selected-popover-header-bg: #{$ms-selected-popover-header-bg};
-  --ms-selected-popover-header-border-bottom: #{$ms-selected-popover-header-border-bottom};
-  --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: #{$ms-selected-popover-header-color};
-
-  // ==========================================================================
-  // POPOVER CLOSE BUTTON
-  // ==========================================================================
-
-  --ms-popover-close-size: #{$ms-popover-close-size};
-  --ms-selected-popover-close-bg: #{$ms-selected-popover-close-bg};
-  --ms-selected-popover-close-color: #{$ms-selected-popover-close-color};
-  --ms-selected-popover-close-font-size: calc(var(--base-font-size-xl, 2) * var(--ms-rem));
-  --ms-selected-popover-close-border-radius: #{$ms-selected-popover-close-border-radius};
-  --ms-selected-popover-close-bg-hover: #{$ms-selected-popover-close-bg-hover};
-  --ms-selected-popover-close-color-hover: #{$ms-selected-popover-close-color-hover};
-
-  // ==========================================================================
-  // POPOVER BODY
-  // ==========================================================================
-
-  --ms-selected-popover-body-gap: #{$ms-selected-popover-body-gap};
-  --ms-selected-popover-body-padding: #{$ms-selected-popover-body-padding};
-  --ms-selected-popover-body-max-height: #{$ms-selected-popover-body-max-height};
-
-  // ==========================================================================
-  // TYPOGRAPHY SCALE
-  // ==========================================================================
-  // Typography variables follow this priority chain:
-  //   1. --ms-* (component-specific override)
-  //   2. --base-* (shared theme-designer value)
-  //   3. Unitless default multiplied by --ms-rem
-  //
-  // Note: --ms-font-family is set directly on :host above (not as a variable)
-  // because it needs to be applied, not just defined.
-  //
-  // Font sizes use unitless multipliers from theme-designer:
-  //   Theme-designer outputs: --base-font-size-sm: 1.4 (unitless)
-  //   Component computes: calc(1.4 * var(--ms-rem)) = 14px
-
-  // Font Sizes (unitless multipliers × --ms-rem)
-  --ms-font-size-2xs: calc(var(--base-font-size-2xs, 1) * var(--ms-rem));     // 10px
-  --ms-font-size-xs: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));     // 12px
-  --ms-font-size-sm: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));     // 14px
-  --ms-font-size-base: calc(var(--base-font-size-base, 1.6) * var(--ms-rem)); // 16px
-  --ms-font-size-lg: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));     // 18px
-
-  // Font Weights
-  --ms-font-weight-normal: var(--base-font-weight-normal, #{$ms-font-weight-normal});
-  --ms-font-weight-medium: var(--base-font-weight-medium, #{$ms-font-weight-medium});
-  --ms-font-weight-semibold: var(--base-font-weight-semibold, #{$ms-font-weight-semibold});
-
-  // Line Heights
-  --ms-line-height-none: #{$ms-line-height-none};
-  --ms-line-height-tight: var(--base-line-height-tight, #{$ms-line-height-tight});
-  --ms-line-height-normal: var(--base-line-height-normal, #{$ms-line-height-normal});
-  --ms-line-height-relaxed: var(--base-line-height-relaxed, #{$ms-line-height-relaxed});
-
-  // ==========================================================================
-  // SPACING & SIZING
-  // ==========================================================================
-
-  --ms-spacing-xs: #{$ms-spacing-xs};
-  --ms-spacing-sm: #{$ms-spacing-sm};
-  --ms-spacing-md: #{$ms-spacing-md};
-  --ms-spacing-lg: #{$ms-spacing-lg};
-
-  // ==========================================================================
-  // TRANSITIONS & EFFECTS
-  // ==========================================================================
-
-  --ms-transition-fast: #{$ms-transition-fast};
-  --ms-transition-normal: #{$ms-transition-normal};
-  --ms-easing-snappy: #{$ms-easing-snappy};
-
-  // ==========================================================================
-  // OPACITY VALUES
-  // ==========================================================================
-
-  --ms-placeholder-opacity: #{$ms-placeholder-opacity};
-  --ms-disabled-input-opacity: #{$ms-disabled-input-opacity};
-
-  // ==========================================================================
-  // SCROLLBAR
-  // ==========================================================================
-
-  --ms-scrollbar-width: #{$ms-scrollbar-width};
-  --ms-scrollbar-track-bg: #{$ms-scrollbar-track-bg};
-  --ms-scrollbar-thumb-bg: #{$ms-scrollbar-thumb-bg};
-  --ms-scrollbar-thumb-bg-hover: #{$ms-scrollbar-thumb-bg-hover};
-  --ms-scrollbar-thumb-border-radius: #{$ms-scrollbar-thumb-border-radius};
-}

package/src/scss/_debug.scss

@@ -1,60 +0,0 @@
-// ==============================================================================
-// DEBUG INFO PANEL
-// ==============================================================================
-// Debug information display for development and troubleshooting
-
-@use 'variables' as *;
-
-.ms-debug-info {
-    margin-top: $ms-spacing-xs;
-    padding: $ms-spacing-xs;
-    background-color: $ms-color-neutral-lightest;
-    border: 1px solid $ms-color-neutral-light;
-    border-radius: $ms-border-radius;
-    font-size: $ms-font-size-xs;
-    color: $ms-color-neutral-darkest;
-
-    details {
-        summary {
-            cursor: pointer;
-            font-weight: $ms-font-weight-semibold;
-            color: $ms-color-accent-dark;
-            user-select: none;
-            padding: $ms-spacing-xs;
-            border-radius: $ms-border-radius-sm;
-
-            &:hover {
-                background-color: $ms-color-neutral-lighter;
-            }
-
-            &:focus {
-                outline: 2px solid $ms-color-accent-base;
-                outline-offset: 2px;
-            }
-        }
-    }
-
-    .ms-debug-stats {
-        display: flex;
-        flex-direction: column;
-        gap: $ms-spacing-xs;
-        margin-top: $ms-spacing-xs;
-        padding: $ms-spacing-xs;
-        background-color: $ms-color-white;
-        border-radius: $ms-border-radius-sm;
-
-        span {
-            display: flex;
-            justify-content: space-between;
-            padding: 2px 4px;
-            font-family: monospace;
-            font-size: $ms-font-size-2xs;
-
-            &::before {
-                content: '•';
-                margin-right: $ms-spacing-xs;
-                color: $ms-color-accent-base;
-            }
-        }
-    }
-}