npm - @keenmate/pure-admin-core - Versions diffs - 1.1.1 → 1.1.2 - Mend

@keenmate/pure-admin-core 1.1.1 → 1.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/css/main.css +22 -228
package/package.json +1 -1
package/snippets/buttons.html +12 -0
package/src/scss/core-components/_utilities.scss +10 -0
package/src/scss/core-components/_web-components-theme.scss +14 -287

package/dist/css/main.css CHANGED Viewed

@@ -9295,235 +9295,21 @@ input:indeterminate + .pa-checkbox__box::after {
  * Maps Pure Admin SCSS variables to web component CSS custom properties
  *
  * @keenmate/web-multiselect: Uses --base-* variables from _base-css-variables.scss
- * @keenmate/web-daterangepicker: Uses --drp-* variables defined below
- */
-/*
+ * @keenmate/web-daterangepicker: Uses --base-* variables from _base-css-variables.scss
+ *
+ * NOTE: Both components use the --base-* CSS variable system with built-in fallback chains:
+ *   1. External override: --ms-accent-color: #custom
+ *   2. Theme base value: var(--base-accent-color)
+ *   3. Hardcoded default: #3b82f6
+ *
+ * This means Pure Admin only needs to set --base-* variables (via the
+ * output-base-css-variables mixin) and the components will automatically
+ * pick up the theme colors.
  */
-/* ========================================
-   Date Range Picker Variables (--drp-*)
-   v1.3.0+ Semantic Variable Architecture
-   NOTE: Variables set directly on web-daterangepicker
-   element to pierce shadow DOM (custom properties
-   cascade into shadow DOM when set on host element)
-   ======================================== */
-web-daterangepicker {
-  /* ===== BASE PRIMITIVES ===== */
-  /* Colors */
-  --drp-accent-color: #007bff;
-  --drp-primary-bg: #007bff;
-  --drp-primary-bg-hover: rgb(51, 149.4, 255);
-  --drp-text-primary: var(--pa-text-color-1);
-  --drp-text-secondary: var(--pa-text-color-2);
-  --drp-border-color: #e1e5e9;
-  --drp-card-bg: var(--pa-card-bg);
-  --drp-hover-bg: #f8f9fa;
-  /* Spacing */
-  --drp-spacing-xs: 0.4rem;
-  --drp-spacing-sm: 0.8rem;
-  --drp-spacing-md: 1.2rem;
-  --drp-spacing-base: 1.6rem;
-  --drp-spacing-lg: 2.4rem;
-  --drp-spacing-xl: 3.2rem;
-  /* Typography */
-  --drp-font-size-xs: 1.2rem;
-  --drp-font-size-sm: 1.4rem;
-  --drp-font-size-base: 1.6rem;
-  --drp-font-size-lg: 1.8rem;
-  --drp-font-weight-normal: 400;
-  --drp-font-weight-medium: 500;
-  --drp-font-weight-semibold: 600;
-  /* Animations */
-  --drp-transition-fast: 0.1s;
-  --drp-transition-normal: 0.15s;
-  --drp-easing-snappy: ease-out;
-  --drp-easing-smooth: ease;
-  /* Shadows */
-  --drp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --drp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
-  --drp-shadow-xl: 0 0 60px rgba(0, 0, 0, 0.12);
-  /* Border radius */
-  --drp-border-radius: 4px;
-  --drp-border-radius-sm: 2px;
-  --drp-border-radius-lg: 8px;
-  /* Border width */
-  --drp-border-width-base: 1px;
-  --drp-border-width-medium: 2px;
-  /* ===== INPUT FIELD SEMANTIC VARIABLES ===== */
-  /* Input colors */
-  --drp-input-background: var(--pa-input-bg);
-  --drp-input-color: var(--pa-text-color-1);
-  --drp-input-border-color: #ced4da;
-  --drp-input-border-color-hover: #007bff;
-  --drp-input-border-color-focus: #007bff;
-  --drp-input-placeholder-color: var(--pa-text-color-2);
-  --drp-input-disabled-background: var(--pa-input-bg);
-  --drp-input-disabled-color: var(--pa-text-color-2);
-  /* Input focus effects */
-  --drp-input-focus-shadow-color: rgba(0, 123, 255, 0.05);
-  --drp-input-focus-shadow-size: 3px;
-  /* Input icon */
-  --drp-input-icon-color: var(--pa-text-color-2);
-  --drp-input-icon-opacity: 1;
-  /* Input size variants - matched to Pure Admin .pa-input sizes (10px base)
-     Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px */
-  /* Extra Small (31px) */
-  --drp-input-size-xs-font: 1.2rem;
-  --drp-input-size-xs-padding-v: 0.8rem;
-  --drp-input-size-xs-padding-h: 0.8rem;
-  --drp-input-size-xs-height: 3.1rem; /* 31px (10px base) */
-  --drp-input-size-xs-icon-size: 1.2rem; /* 12px (10px base) */
-  /* Small (33px - same height as xs, slightly larger icon) */
-  --drp-input-size-sm-font: 1.2rem;
-  --drp-input-size-sm-padding-v: 0.8rem;
-  --drp-input-size-sm-padding-h: 0.8rem;
-  --drp-input-size-sm-height: 3.3rem; /* 33px (10px base) */
-  --drp-input-size-sm-icon-size: 1.4rem; /* 14px (10px base) */
-  /* Medium/Default (maps to pa-input: 35px) */
-  --drp-input-size-md-font: 1.4rem;
-  --drp-input-size-md-padding-v: 0.8rem;
-  --drp-input-size-md-padding-h: 0.8rem;
-  --drp-input-size-md-height: 3.5rem; /* 35px (10px base) */
-  --drp-input-size-md-icon-size: 1.6rem; /* 16px (10px base) */
-  /* Large (maps to pa-input--lg: 38px) */
-  --drp-input-size-lg-font: 1.6rem;
-  --drp-input-size-lg-padding-v: 0.8rem;
-  --drp-input-size-lg-padding-h: 0.8rem;
-  --drp-input-size-lg-height: 3.8rem; /* 38px (10px base) */
-  --drp-input-size-lg-icon-size: 1.8rem; /* 18px (10px base) */
-  /* Extra Large (maps to pa-input--xl: 41px) */
-  --drp-input-size-xl-font: 1.8rem;
-  --drp-input-size-xl-padding-v: 0.8rem;
-  --drp-input-size-xl-padding-h: 0.8rem;
-  --drp-input-size-xl-height: 4.1rem; /* 41px (10px base) */
-  --drp-input-size-xl-icon-size: 2rem; /* 20px (10px base) */
-  /* ===== CALENDAR CONTAINER ===== */
-  --drp-calendar-bg: var(--pa-card-bg);
-  --drp-calendar-border: #e1e5e9;
-  --drp-calendar-shadow: 0 0 60px rgba(0, 0, 0, 0.12);
-  --drp-calendar-border-radius: 4px;
-  --drp-calendar-padding: 1.6rem;
-  --drp-calendar-z-index: 1000;
-  /* ===== HEADER ===== */
-  --drp-header-padding: 0.8rem 1.2rem;
-  --drp-header-font-size: 1.6rem;
-  --drp-header-font-weight: 600;
-  --drp-header-text-color: var(--pa-text-color-1);
-  --drp-header-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-header-bg-active: rgba(0, 123, 255, 0.05);
-  /* ===== NAVIGATION ===== */
-  --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
-  --drp-nav-text-color: var(--pa-text-color-1);
-  --drp-nav-border-color: #e1e5e9;
-  --drp-nav-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-nav-bg-active: rgba(0, 123, 255, 0.05);
-  --drp-nav-border-hover: #007bff;
-  /* ===== WEEKDAY HEADER ===== */
-  --drp-weekday-font-size: 1.2rem;
-  --drp-weekday-font-weight: 600;
-  --drp-weekday-color: var(--pa-text-color-2);
-  --drp-weekday-padding: 0.4rem;
-  /* ===== CALENDAR GRID ===== */
-  --drp-day-size: 3.6rem; /* 36px (10px base) */
-  --drp-day-font-size: 1.4rem;
-  --drp-day-border-radius: 2px;
-  /* Day states */
-  --drp-day-text-color: var(--pa-text-color-1);
-  --drp-day-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-day-border-hover: transparent;
-  /* Today indicator */
-  --drp-day-today-border: #007bff;
-  /* Selected state */
-  --drp-day-selected-bg: #007bff;
-  --drp-day-selected-color: #ffffff;
-  /* Range state */
-  --drp-day-range-bg: rgba(0, 123, 255, 0.05);
-  --drp-day-range-text: var(--pa-text-color-1);
-  /* Focused state */
-  --drp-day-focused-outline: #007bff;
-  /* Disabled state */
-  --drp-day-disabled-color: var(--pa-text-color-2);
-  --drp-day-disabled-opacity: 0.65;
-  /* Other month */
-  --drp-day-other-month-color: var(--pa-text-color-2);
-  --drp-day-other-month-opacity: 0.5;
-  /* ===== BADGES ===== */
-  /* Dot badges (original style) */
-  --drp-badge-size: 0.6rem; /* 6px (10px base) */
-  --drp-badge-primary: #007bff;
-  --drp-badge-success: #28a745;
-  --drp-badge-warning: #ffc107;
-  --drp-badge-danger: #dc3545;
-  --drp-badge-info: #17a2b8;
-  /* Number badges */
-  --drp-badge-number-bg: #dc3545;
-  --drp-badge-number-color: #ffffff;
-  /* Count badges */
-  --drp-badge-count-bg: #007bff;
-  --drp-badge-count-color: #ffffff;
-  /* Text badges */
-  --drp-badge-text-bg: rgba(0, 123, 255, 0.05);
-  --drp-badge-text-color: var(--pa-text-color-1);
-  /* ===== SUMMARY BAR ===== */
-  --drp-summary-bg: #f8f9fa;
-  --drp-summary-border-color: #e1e5e9;
-  --drp-summary-text-color: var(--pa-text-color-1);
-  --drp-summary-count-color: #007bff;
-  --drp-summary-padding: 0.8rem 1.2rem;
-  --drp-summary-font-size: 1.4rem;
-  --drp-summary-font-weight: 500;
-  /* ===== BUTTONS ===== */
-  /* Today button */
-  --drp-button-today-bg: #6c757d;
-  --drp-button-today-bg-hover: #545b62;
-  --drp-button-today-color: #ffffff;
-  --drp-button-today-border: #e1e5e9;
-  /* Clear button */
-  --drp-button-clear-bg: #6c757d;
-  --drp-button-clear-bg-hover: #545b62;
-  --drp-button-clear-color: #ffffff;
-  --drp-button-clear-border: #e1e5e9;
-  /* Cancel button */
-  --drp-button-cancel-bg: #6c757d;
-  --drp-button-cancel-bg-hover: #545b62;
-  --drp-button-cancel-color: #ffffff;
-  --drp-button-cancel-border: #e1e5e9;
-  /* Apply button */
-  --drp-button-apply-bg: #007bff;
-  --drp-button-apply-bg-hover: rgb(51, 149.4, 255);
-  --drp-button-apply-color: #ffffff;
-  --drp-button-apply-border: #007bff;
-  /* Button sizing */
-  --drp-button-padding: 0.8rem 1rem;
-  --drp-button-font-size: 1.4rem;
-  --drp-button-border-radius: 4px;
-  --drp-button-gap: 0.8rem;
-  /* ===== UNIFIED NAVIGATION ===== */
-  /* Range selectors in unified nav */
-  --drp-unified-range-text-color: var(--pa-text-color-1);
-  --drp-unified-range-bg-hover: rgba(0, 123, 255, 0.12);
-  --drp-unified-range-bg-active: rgba(0, 123, 255, 0.05);
-  /* Month/Year display */
-  --drp-unified-month-color: var(--pa-text-color-1);
-  /* Rolling selector disabled state */
-  --drp-unified-rolling-disabled-color: var(--pa-text-color-2);
-  /* ===== ROLLING SELECTOR ===== */
-  --drp-rolling-bg: var(--pa-card-bg);
-  --drp-rolling-border: #e1e5e9;
-  --drp-rolling-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-rolling-item-hover-bg: rgba(0, 123, 255, 0.12);
-  --drp-rolling-item-selected-bg: #007bff;
-  --drp-rolling-item-selected-text: #ffffff;
-  --drp-rolling-font-size: 1.4rem;
-  --drp-rolling-item-text-color: var(--pa-text-color-1);
-  --drp-rolling-item-disabled-color: var(--pa-text-color-2);
-  /* ===== LOADING OVERLAY ===== */
-  --drp-loading-bg: rgba(255, 255, 255, 0.8);
-  --drp-loading-spinner-color: #007bff;
-  --drp-loading-spinner-size: 1.6rem;
-  /* ===== MULTIPLE MONTHS ===== */
-  --drp-months-gap: 2.4rem;
+/* Web Multiselect - Group label styling */
+web-multiselect {
+  --ms-group-label-color: var(--base-text-color-1);
+  --ms-group-label-font-weight: 600;
 }
 .pa-file-input {
@@ -13991,6 +13777,14 @@ html.font-size-4xl {
   white-space: nowrap;
 }
+.pa-link {
+  color: #007bff;
+  text-decoration: none;
+}
+.pa-link:hover {
+  text-decoration: underline;
+}
 .component-showcase {
   display: flex;
   flex-wrap: wrap;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/snippets/buttons.html CHANGED Viewed

@@ -248,6 +248,18 @@
   Continue
 </button>
+<!-- Fixed Width with Truncation -->
+<!-- Use minwr-* + maxwr-* to constrain width, text-truncate on inner span for ellipsis -->
+<button class="pa-btn pa-btn--primary minwr-10 maxwr-10">
+  <span class="pa-btn__icon">✓</span>
+  <span class="text-truncate">Save All Changes</span>
+</button>
+<button class="pa-btn pa-btn--secondary minwr-10 maxwr-10">
+  <span class="pa-btn__icon">×</span>
+  <span class="text-truncate">Cancel and Go Back</span>
+</button>
 <!-- BUTTON ALIGNMENT -->

package/src/scss/core-components/_utilities.scss CHANGED Viewed

@@ -260,6 +260,16 @@ html.font-size-4xl {
   white-space: nowrap;
 }
+// Link styling
+.pa-link {
+  color: $accent-color;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
 // Component showcase styling
 .component-showcase {
   display: flex;

package/src/scss/core-components/_web-components-theme.scss CHANGED Viewed

@@ -2,293 +2,20 @@
  * Maps Pure Admin SCSS variables to web component CSS custom properties
  *
  * @keenmate/web-multiselect: Uses --base-* variables from _base-css-variables.scss
- * @keenmate/web-daterangepicker: Uses --drp-* variables defined below
- */
-@use '../variables' as *;
-/*
+ * @keenmate/web-daterangepicker: Uses --base-* variables from _base-css-variables.scss
+ *
+ * NOTE: Both components use the --base-* CSS variable system with built-in fallback chains:
+ *   1. External override: --ms-accent-color: #custom
+ *   2. Theme base value: var(--base-accent-color)
+ *   3. Hardcoded default: #3b82f6
+ *
+ * This means Pure Admin only needs to set --base-* variables (via the
+ * output-base-css-variables mixin) and the components will automatically
+ * pick up the theme colors.
  */
-/* ========================================
-   Date Range Picker Variables (--drp-*)
-   v1.3.0+ Semantic Variable Architecture
-   NOTE: Variables set directly on web-daterangepicker
-   element to pierce shadow DOM (custom properties
-   cascade into shadow DOM when set on host element)
-   ======================================== */
-web-daterangepicker {
-  /* ===== BASE PRIMITIVES ===== */
-  /* Colors */
-  --drp-accent-color: #{$accent-color};
-  --drp-primary-bg: #{$btn-primary-bg};
-  --drp-primary-bg-hover: #{$btn-primary-bg-hover};
-  --drp-text-primary: var(--pa-text-color-1);
-  --drp-text-secondary: var(--pa-text-color-2);
-  --drp-border-color: #{$border-color};
-  --drp-card-bg: var(--pa-card-bg);
-  --drp-hover-bg: #{$table-hover-bg};
-  /* Spacing */
-  --drp-spacing-xs: #{$spacing-xs};
-  --drp-spacing-sm: #{$spacing-sm};
-  --drp-spacing-md: #{$spacing-md};
-  --drp-spacing-base: #{$spacing-base};
-  --drp-spacing-lg: #{$spacing-lg};
-  --drp-spacing-xl: #{$spacing-xl};
-  /* Typography */
-  --drp-font-size-xs: #{$font-size-xs};
-  --drp-font-size-sm: #{$font-size-sm};
-  --drp-font-size-base: #{$font-size-base};
-  --drp-font-size-lg: #{$font-size-lg};
-  --drp-font-weight-normal: #{$font-weight-normal};
-  --drp-font-weight-medium: #{$font-weight-medium};
-  --drp-font-weight-semibold: #{$font-weight-semibold};
-  /* Animations */
-  --drp-transition-fast: #{$transition-fast};
-  --drp-transition-normal: #{$transition-normal};
-  --drp-easing-snappy: #{$easing-snappy};
-  --drp-easing-smooth: #{$easing-smooth};
-  /* Shadows */
-  --drp-shadow-sm: #{$shadow-sm};
-  --drp-shadow-md: #{$shadow-md};
-  --drp-shadow-lg: #{$shadow-lg};
-  --drp-shadow-xl: #{$shadow-xl};
-  /* Border radius */
-  --drp-border-radius: #{$border-radius};
-  --drp-border-radius-sm: #{$border-radius-sm};
-  --drp-border-radius-lg: #{$border-radius-lg};
-  /* Border width */
-  --drp-border-width-base: #{$border-width-base};
-  --drp-border-width-medium: #{$border-width-medium};
-  /* ===== INPUT FIELD SEMANTIC VARIABLES ===== */
-  /* Input colors */
-  --drp-input-background: var(--pa-input-bg);
-  --drp-input-color: var(--pa-text-color-1);
-  --drp-input-border-color: #{$input-border};
-  --drp-input-border-color-hover: #{$accent-color};
-  --drp-input-border-color-focus: #{$accent-color};
-  --drp-input-placeholder-color: var(--pa-text-color-2);
-  --drp-input-disabled-background: var(--pa-input-bg);
-  --drp-input-disabled-color: var(--pa-text-color-2);
-  /* Input focus effects */
-  --drp-input-focus-shadow-color: #{$accent-light};
-  --drp-input-focus-shadow-size: #{$focus-ring-width};
-  /* Input icon */
-  --drp-input-icon-color: var(--pa-text-color-2);
-  --drp-input-icon-opacity: 1;
-  /* Input size variants - matched to Pure Admin .pa-input sizes (10px base)
-     Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px */
-  /* Extra Small (31px) */
-  --drp-input-size-xs-font: #{$font-size-xs};
-  --drp-input-size-xs-padding-v: #{$input-padding-v};
-  --drp-input-size-xs-padding-h: #{$input-padding-h};
-  --drp-input-size-xs-height: 3.1rem; /* 31px (10px base) */
-  --drp-input-size-xs-icon-size: 1.2rem; /* 12px (10px base) */
-  /* Small (33px - same height as xs, slightly larger icon) */
-  --drp-input-size-sm-font: #{$font-size-xs};
-  --drp-input-size-sm-padding-v: #{$input-padding-v};
-  --drp-input-size-sm-padding-h: #{$input-padding-h};
-  --drp-input-size-sm-height: 3.3rem; /* 33px (10px base) */
-  --drp-input-size-sm-icon-size: 1.4rem; /* 14px (10px base) */
-  /* Medium/Default (maps to pa-input: 35px) */
-  --drp-input-size-md-font: #{$font-size-sm};
-  --drp-input-size-md-padding-v: #{$input-padding-v};
-  --drp-input-size-md-padding-h: #{$input-padding-h};
-  --drp-input-size-md-height: 3.5rem; /* 35px (10px base) */
-  --drp-input-size-md-icon-size: 1.6rem; /* 16px (10px base) */
-  /* Large (maps to pa-input--lg: 38px) */
-  --drp-input-size-lg-font: #{$font-size-base};
-  --drp-input-size-lg-padding-v: #{$input-padding-v};
-  --drp-input-size-lg-padding-h: #{$input-padding-h};
-  --drp-input-size-lg-height: 3.8rem; /* 38px (10px base) */
-  --drp-input-size-lg-icon-size: 1.8rem; /* 18px (10px base) */
-  /* Extra Large (maps to pa-input--xl: 41px) */
-  --drp-input-size-xl-font: #{$font-size-lg};
-  --drp-input-size-xl-padding-v: #{$input-padding-v};
-  --drp-input-size-xl-padding-h: #{$input-padding-h};
-  --drp-input-size-xl-height: 4.1rem; /* 41px (10px base) */
-  --drp-input-size-xl-icon-size: 2rem; /* 20px (10px base) */
-  /* ===== CALENDAR CONTAINER ===== */
-  --drp-calendar-bg: var(--pa-card-bg);
-  --drp-calendar-border: #{$border-color};
-  --drp-calendar-shadow: #{$shadow-xl};
-  --drp-calendar-border-radius: #{$border-radius};
-  --drp-calendar-padding: #{$spacing-base};
-  --drp-calendar-z-index: #{$z-index-dropdown};
-  /* ===== HEADER ===== */
-  --drp-header-padding: #{$spacing-sm} #{$spacing-md};
-  --drp-header-font-size: #{$font-size-base};
-  --drp-header-font-weight: #{$font-weight-semibold};
-  --drp-header-text-color: var(--pa-text-color-1);
-  --drp-header-bg-hover: #{$accent-hover};
-  --drp-header-bg-active: #{$accent-light};
-  /* ===== NAVIGATION ===== */
-  --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
-  --drp-nav-text-color: var(--pa-text-color-1);
-  --drp-nav-border-color: #{$border-color};
-  --drp-nav-bg-hover: #{$accent-hover};
-  --drp-nav-bg-active: #{$accent-light};
-  --drp-nav-border-hover: #{$accent-color};
-  /* ===== WEEKDAY HEADER ===== */
-  --drp-weekday-font-size: #{$font-size-xs};
-  --drp-weekday-font-weight: #{$font-weight-semibold};
-  --drp-weekday-color: var(--pa-text-color-2);
-  --drp-weekday-padding: #{$spacing-xs};
-  /* ===== CALENDAR GRID ===== */
-  --drp-day-size: 3.6rem; /* 36px (10px base) */
-  --drp-day-font-size: #{$font-size-sm};
-  --drp-day-border-radius: #{$border-radius-sm};
-  /* Day states */
-  --drp-day-text-color: var(--pa-text-color-1);
-  --drp-day-bg-hover: #{$accent-hover};
-  --drp-day-border-hover: transparent;
-  /* Today indicator */
-  --drp-day-today-border: #{$accent-color};
-  /* Selected state */
-  --drp-day-selected-bg: #{$accent-color};
-  --drp-day-selected-color: #ffffff;
-  /* Range state */
-  --drp-day-range-bg: #{$accent-light};
-  --drp-day-range-text: var(--pa-text-color-1);
-  /* Focused state */
-  --drp-day-focused-outline: #{$accent-color};
-  /* Disabled state */
-  --drp-day-disabled-color: var(--pa-text-color-2);
-  --drp-day-disabled-opacity: #{$opacity-disabled};
-  /* Other month */
-  --drp-day-other-month-color: var(--pa-text-color-2);
-  --drp-day-other-month-opacity: #{$opacity-muted};
-  /* ===== BADGES ===== */
-  /* Dot badges (original style) */
-  --drp-badge-size: 0.6rem; /* 6px (10px base) */
-  --drp-badge-primary: #{$btn-primary-bg};
-  --drp-badge-success: #{$success-bg};
-  --drp-badge-warning: #{$warning-bg};
-  --drp-badge-danger: #{$danger-bg};
-  --drp-badge-info: #{$info-bg};
-  /* Number badges */
-  --drp-badge-number-bg: #{$danger-bg};
-  --drp-badge-number-color: #ffffff;
-  /* Count badges */
-  --drp-badge-count-bg: #{$accent-color};
-  --drp-badge-count-color: #ffffff;
-  /* Text badges */
-  --drp-badge-text-bg: #{$accent-light};
-  --drp-badge-text-color: var(--pa-text-color-1);
-  /* ===== SUMMARY BAR ===== */
-  --drp-summary-bg: #{$card-header-bg};
-  --drp-summary-border-color: #{$border-color};
-  --drp-summary-text-color: var(--pa-text-color-1);
-  --drp-summary-count-color: #{$accent-color};
-  --drp-summary-padding: #{$spacing-sm} #{$spacing-md};
-  --drp-summary-font-size: #{$font-size-sm};
-  --drp-summary-font-weight: #{$font-weight-medium};
-  /* ===== BUTTONS ===== */
-  /* Today button */
-  --drp-button-today-bg: #{$btn-secondary-bg};
-  --drp-button-today-bg-hover: #{$btn-secondary-bg-hover};
-  --drp-button-today-color: #{$btn-secondary-text};
-  --drp-button-today-border: #{$border-color};
-  /* Clear button */
-  --drp-button-clear-bg: #{$btn-secondary-bg};
-  --drp-button-clear-bg-hover: #{$btn-secondary-bg-hover};
-  --drp-button-clear-color: #{$btn-secondary-text};
-  --drp-button-clear-border: #{$border-color};
-  /* Cancel button */
-  --drp-button-cancel-bg: #{$btn-secondary-bg};
-  --drp-button-cancel-bg-hover: #{$btn-secondary-bg-hover};
-  --drp-button-cancel-color: #{$btn-secondary-text};
-  --drp-button-cancel-border: #{$border-color};
-  /* Apply button */
-  --drp-button-apply-bg: #{$btn-primary-bg};
-  --drp-button-apply-bg-hover: #{$btn-primary-bg-hover};
-  --drp-button-apply-color: #{$btn-primary-text};
-  --drp-button-apply-border: #{$btn-primary-bg};
-  /* Button sizing */
-  --drp-button-padding: #{$btn-padding-sm-v} #{$btn-padding-sm-h};
-  --drp-button-font-size: #{$font-size-sm};
-  --drp-button-border-radius: #{$border-radius};
-  --drp-button-gap: #{$spacing-sm};
-  /* ===== UNIFIED NAVIGATION ===== */
-  /* Range selectors in unified nav */
-  --drp-unified-range-text-color: var(--pa-text-color-1);
-  --drp-unified-range-bg-hover: #{$accent-hover};
-  --drp-unified-range-bg-active: #{$accent-light};
-  /* Month/Year display */
-  --drp-unified-month-color: var(--pa-text-color-1);
-  /* Rolling selector disabled state */
-  --drp-unified-rolling-disabled-color: var(--pa-text-color-2);
-  /* ===== ROLLING SELECTOR ===== */
-  --drp-rolling-bg: var(--pa-card-bg);
-  --drp-rolling-border: #{$border-color};
-  --drp-rolling-shadow: #{$shadow-md};
-  --drp-rolling-item-hover-bg: #{$accent-hover};
-  --drp-rolling-item-selected-bg: #{$accent-color};
-  --drp-rolling-item-selected-text: #ffffff;
-  --drp-rolling-font-size: #{$font-size-sm};
-  --drp-rolling-item-text-color: var(--pa-text-color-1);
-  --drp-rolling-item-disabled-color: var(--pa-text-color-2);
-  /* ===== LOADING OVERLAY ===== */
-  --drp-loading-bg: rgba(255, 255, 255, 0.8);
-  --drp-loading-spinner-color: #{$accent-color};
-  --drp-loading-spinner-size: #{$spinner-size};
-  /* ===== MULTIPLE MONTHS ===== */
-  --drp-months-gap: #{$spacing-lg};
+/* Web Multiselect - Group label styling */
+web-multiselect {
+  --ms-group-label-color: var(--base-text-color-1);
+  --ms-group-label-font-weight: 600;
 }