npm - @keenmate/pure-admin-core - Versions diffs - 1.0.0-rc01 - Mend

@keenmate/pure-admin-core 1.0.0-rc01

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 (167) hide show

package/LICENSE +21 -0
package/README.md +172 -0
package/dist/css/main.css +11542 -0
package/dist/fonts/Delivery/Delivery_W_Bd.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_BdIt.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_CdBlk.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_CdLt.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_It.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_Lt.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_LtIt.woff2 +0 -0
package/dist/fonts/Delivery/Delivery_W_Rg.woff2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2.1 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2.2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2.1 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2.2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8bH-o.woff2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8bH-o.woff2.1 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2.1 +0 -0
package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2.2 +0 -0
package/dist/fonts/google/6aez4K2oVqwIvtE2H68T.woff2 +0 -0
package/dist/fonts/google/6aez4K2oVqwIvtU2Hw.woff2 +0 -0
package/dist/fonts/google/6aez4K2oVqwIvtY2H68T.woff2 +0 -0
package/dist/fonts/google/6aez4K2oVqwIvtg2H68T.woff2 +0 -0
package/dist/fonts/google/6aez4K2oVqwIvto2H68T.woff2 +0 -0
package/dist/fonts/google/6aez4K2oVqwIvts2H68T.woff2 +0 -0
package/dist/fonts/google/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nejog.woff2 +0 -0
package/dist/fonts/google/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nijogp5.woff2 +0 -0
package/dist/fonts/google/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nmjogp5.woff2 +0 -0
package/dist/fonts/google/PN_xRfK9oXHga0XdZ8g_vT0.woff2 +0 -0
package/dist/fonts/google/PN_xRfK9oXHga0XdZsg_.woff2 +0 -0
package/dist/fonts/google/PN_xRfK9oXHga0XdaMg_vT0.woff2 +0 -0
package/dist/fonts/google/TK3tWkYFABsmjsphPho.woff2 +0 -0
package/dist/fonts/google/TK3tWkYFABsmjspuPho7vA.woff2 +0 -0
package/dist/fonts/google/TK3tWkYFABsmjspvPho7vA.woff2 +0 -0
package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjTYJwQj.woff2 +0 -0
package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjXYJwQj.woff2 +0 -0
package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6Vj_YJwQj.woff2 +0 -0
package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjbYJwQj.woff2 +0 -0
package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjvYJw.woff2 +0 -0
package/dist/fonts/google/fonts-tracklist.txt +48 -0
package/dist/fonts/google/vEFO2_JTCgwQ5ejvMV0O96D01E8J0tJXHKbBjM4.woff2 +0 -0
package/dist/fonts/google/vEFO2_JTCgwQ5ejvMV0O96D01E8J0tJXHKbOjM7sfA.woff2 +0 -0
package/dist/fonts/google/vEFO2_JTCgwQ5ejvMV0O96D01E8J0tJXHKbPjM7sfA.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfLtrftV.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfXtrftV.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfbtrQ.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfjtrftV.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfntrftV.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfrtrftV.woff2 +0 -0
package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfvtrftV.woff2 +0 -0
package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_B-bnBeA.woff2 +0 -0
package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_C-bk.woff2 +0 -0
package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_G-bnBeA.woff2 +0 -0
package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_M-bnBeA.woff2 +0 -0
package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_N-bnBeA.woff2 +0 -0
package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_P-bnBeA.woff2 +0 -0
package/package.json +60 -0
package/snippets/alerts.html +281 -0
package/snippets/badges.html +212 -0
package/snippets/buttons.html +287 -0
package/snippets/cards.html +393 -0
package/snippets/checkbox-lists.html +490 -0
package/snippets/code.html +225 -0
package/snippets/command-palette.html +210 -0
package/snippets/comparison.html +428 -0
package/snippets/customization.html +142 -0
package/snippets/forms.html +477 -0
package/snippets/grid.html +338 -0
package/snippets/layout.html +598 -0
package/snippets/lists.html +232 -0
package/snippets/loaders.html +183 -0
package/snippets/manifest.json +388 -0
package/snippets/modal-dialogs.html +411 -0
package/snippets/modals.html +310 -0
package/snippets/popconfirm.html +253 -0
package/snippets/profile.html +264 -0
package/snippets/tables.html +317 -0
package/snippets/tabs.html +930 -0
package/snippets/timeline.html +364 -0
package/snippets/toasts.html +154 -0
package/snippets/tooltips.html +411 -0
package/snippets/typography.html +101 -0
package/snippets/utilities.html +595 -0
package/snippets/virtual-scroll.html +322 -0
package/snippets/web-daterangepicker.html +634 -0
package/snippets/web-multiselect.html +362 -0
package/src/scss/.claude/settings.local.json +11 -0
package/src/scss/_base-css-variables.scss +348 -0
package/src/scss/_core.scss +99 -0
package/src/scss/_fonts.scss +67 -0
package/src/scss/_purecss-grid-responsive.scss +138 -0
package/src/scss/_purecss-grid.scss +58 -0
package/src/scss/_variables.scss +14 -0
package/src/scss/core-components/_alerts.scss +212 -0
package/src/scss/core-components/_badges.scss +16 -0
package/src/scss/core-components/_base.scss +124 -0
package/src/scss/core-components/_buttons.scss +473 -0
package/src/scss/core-components/_cards.scss +285 -0
package/src/scss/core-components/_checkbox-lists.scss +289 -0
package/src/scss/core-components/_code.scss +141 -0
package/src/scss/core-components/_command-palette.scss +518 -0
package/src/scss/core-components/_comparison.scss +172 -0
package/src/scss/core-components/_file-selector.scss +780 -0
package/src/scss/core-components/_forms.scss +16 -0
package/src/scss/core-components/_grid.scss +264 -0
package/src/scss/core-components/_layout.scss +15 -0
package/src/scss/core-components/_lists.scss +211 -0
package/src/scss/core-components/_loaders.scss +277 -0
package/src/scss/core-components/_logic-tree.scss +280 -0
package/src/scss/core-components/_modals.scss +209 -0
package/src/scss/core-components/_notifications.scss +253 -0
package/src/scss/core-components/_pagers.scss +141 -0
package/src/scss/core-components/_popconfirm.scss +170 -0
package/src/scss/core-components/_profile.scss +281 -0
package/src/scss/core-components/_settings-panel.scss +128 -0
package/src/scss/core-components/_statistics.scss +200 -0
package/src/scss/core-components/_tables.scss +555 -0
package/src/scss/core-components/_tabs.scss +438 -0
package/src/scss/core-components/_timeline.scss +589 -0
package/src/scss/core-components/_toasts.scss +281 -0
package/src/scss/core-components/_tooltips.scss +503 -0
package/src/scss/core-components/_utilities.scss +241 -0
package/src/scss/core-components/_web-components-theme.scss +294 -0
package/src/scss/core-components/badges/_badge-base.scss +131 -0
package/src/scss/core-components/badges/_badge-group.scss +25 -0
package/src/scss/core-components/badges/_composite-badge-variants.scss +396 -0
package/src/scss/core-components/badges/_composite-badge.scss +70 -0
package/src/scss/core-components/badges/_index.scss +10 -0
package/src/scss/core-components/badges/_labels.scss +155 -0
package/src/scss/core-components/forms/_checkboxes-radios.scss +205 -0
package/src/scss/core-components/forms/_form-inputs.scss +100 -0
package/src/scss/core-components/forms/_form-layout.scss +66 -0
package/src/scss/core-components/forms/_form-states.scss +89 -0
package/src/scss/core-components/forms/_index.scss +12 -0
package/src/scss/core-components/forms/_input-groups.scss +149 -0
package/src/scss/core-components/forms/_input-wrapper.scss +89 -0
package/src/scss/core-components/forms/_query-editor.scss +313 -0
package/src/scss/core-components/layout/_index.scss +11 -0
package/src/scss/core-components/layout/_layout-container.scss +105 -0
package/src/scss/core-components/layout/_layout-responsive.scss +100 -0
package/src/scss/core-components/layout/_navbar-elements.scss +238 -0
package/src/scss/core-components/layout/_navbar.scss +71 -0
package/src/scss/core-components/layout/_sidebar-states.scss +228 -0
package/src/scss/core-components/layout/_sidebar.scss +177 -0
package/src/scss/main.scss +7 -0
package/src/scss/themes/_dark-base.scss +207 -0
package/src/scss/themes/audi-light.scss +311 -0
package/src/scss/themes/audi.scss +288 -0
package/src/scss/themes/corporate.scss +203 -0
package/src/scss/themes/dark-blue.scss +152 -0
package/src/scss/themes/dark-green.scss +156 -0
package/src/scss/themes/dark-red.scss +160 -0
package/src/scss/themes/dark.scss +145 -0
package/src/scss/themes/express.scss +281 -0
package/src/scss/themes/minimal.scss +121 -0
package/src/scss/utilities.scss +481 -0
package/src/scss/variables/_base.scss +81 -0
package/src/scss/variables/_colors.scss +148 -0
package/src/scss/variables/_components.scss +509 -0
package/src/scss/variables/_index.scss +13 -0
package/src/scss/variables/_layout.scss +65 -0
package/src/scss/variables/_spacing.scss +66 -0
package/src/scss/variables/_system.scss +80 -0
package/src/scss/variables/_typography.scss +37 -0

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

@@ -0,0 +1,241 @@
+/* ========================================
+   Utility Components
+   Font utilities, compact mode, component showcase
+   ======================================== */
+@use '../variables' as *;
+// Font size classes - Apply to <html> element for proportional scaling of all rem units
+// Example: document.documentElement.classList.add('font-size-large');
+html.font-size-2xs {
+  font-size: $font-size-2xs;
+}
+html.font-size-xs {
+  font-size: $font-size-xs;
+}
+html.font-size-small {
+  font-size: $font-size-sm;
+}
+html.font-size-medium {
+  font-size: $font-size-md;
+}
+html.font-size-default {
+  font-size: $font-size-base;
+}
+html.font-size-large {
+  font-size: $font-size-lg;
+}
+html.font-size-xlarge {
+  font-size: $font-size-xl;
+}
+html.font-size-2xl {
+  font-size: $font-size-2xl;
+}
+html.font-size-3xl {
+  font-size: $font-size-3xl;
+}
+html.font-size-4xl {
+  font-size: $font-size-4xl;
+}
+// Font family utilities
+// Only for overriding the theme's default font
+.font-family-serif {
+  font-family: $font-stack-serif;
+}
+.font-family-mono {
+  font-family: $font-stack-mono;
+}
+// Compact mode
+.compact-mode {
+  .pa-card__body {
+    padding: $spacing-md;
+  }
+  .pa-table td,
+  .pa-table th {
+    padding: $btn-padding-v $btn-padding-h;
+  }
+  .pa-sidebar__nav ul li a {
+    padding: $sidebar-padding;
+  }
+  .pa-form-group {
+    margin-bottom: $form-group-margin-compact;
+  }
+}
+// Min-height utilities (rem-based)
+.min-h-2x { min-height: 2rem; }   // 32px
+.min-h-3x { min-height: 3rem; }   // 48px
+.min-h-5x { min-height: 5rem; }   // 80px
+.min-h-8x { min-height: 8rem; }   // 128px
+.min-h-10x { min-height: 10rem; } // 160px
+.min-h-12x { min-height: 12rem; } // 192px
+.min-h-15x { min-height: 15rem; } // 240px
+.min-h-20x { min-height: 20rem; } // 320px
+.min-h-25x { min-height: 25rem; } // 400px
+.min-h-30x { min-height: 30rem; } // 480px
+// Fixed height utilities (rem-based) - for scrollable containers
+.h-2x { height: 2rem; }   // 32px
+.h-3x { height: 3rem; }   // 48px
+.h-5x { height: 5rem; }   // 80px
+.h-8x { height: 8rem; }   // 128px
+.h-10x { height: 10rem; } // 160px
+.h-12x { height: 12rem; } // 192px
+.h-15x { height: 15rem; } // 240px
+.h-20x { height: 20rem; } // 320px
+.h-25x { height: 25rem; } // 400px
+.h-30x { height: 30rem; } // 480px
+.h-40x { height: 40rem; } // 640px
+.h-50x { height: 50rem; } // 800px
+// Max-height utilities (rem-based) - useful for limiting content height
+.max-h-5x { max-height: 5rem; }   // 80px
+.max-h-8x { max-height: 8rem; }   // 128px
+.max-h-10x { max-height: 10rem; } // 160px
+.max-h-12x { max-height: 12rem; } // 192px
+.max-h-15x { max-height: 15rem; } // 240px
+.max-h-20x { max-height: 20rem; } // 320px
+.max-h-25x { max-height: 25rem; } // 400px
+.max-h-30x { max-height: 30rem; } // 480px
+.max-h-40x { max-height: 40rem; } // 640px
+.max-h-50x { max-height: 50rem; } // 800px
+// Overflow utilities - pair with height/max-height for scrollable content
+.overflow-auto { overflow: auto; }
+.overflow-y-auto { overflow-y: auto; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-visible { overflow: visible; }
+// Cursor utilities
+.cursor-pointer { cursor: pointer; }
+.cursor-help { cursor: help; }
+.cursor-wait { cursor: wait; }
+.cursor-not-allowed { cursor: not-allowed; }
+.cursor-text { cursor: text; }
+.cursor-move { cursor: move; }
+.cursor-default { cursor: default; }
+.cursor-grab { cursor: grab; }
+.cursor-grabbing { cursor: grabbing; }
+.cursor-zoom-in { cursor: zoom-in; }
+.cursor-zoom-out { cursor: zoom-out; }
+// ========================================
+// Text Component (BEM pattern)
+// For paragraph typography across pages
+// ========================================
+.pa-text {
+  font-size: $font-size-sm;  // 1.4rem (14px) - default
+  color: var(--pa-text-primary);
+  // Size modifiers
+  &--xs {
+    font-size: $font-size-2xs;  // 1rem (10px)
+  }
+  &--sm {
+    font-size: $font-size-xs;   // 1.2rem (12px)
+  }
+  &--lg {
+    font-size: $font-size-base; // 1.6rem (16px)
+  }
+  &--xl {
+    font-size: $font-size-lg;   // 1.8rem (18px)
+  }
+  // Color modifiers
+  &--primary {
+    color: var(--pa-text-primary);
+  }
+  &--secondary {
+    color: var(--pa-text-secondary);
+  }
+  // Alignment modifiers
+  &--left {
+    text-align: left;
+  }
+  &--center {
+    text-align: center;
+  }
+  &--right {
+    text-align: right;
+  }
+  // Semantic variants (compound styles)
+  &--caption {
+    font-size: $font-size-xs;
+    color: var(--pa-text-secondary);
+    margin-bottom: $spacing-sm;
+  }
+  &--lead {
+    font-size: $font-size-base;
+    line-height: $line-height-relaxed;
+  }
+}
+// Component showcase styling
+.component-showcase {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $spacing-sm;
+  margin-bottom: $spacing-lg;
+}
+// Usage example styling
+.usage-example {
+  .user-item,
+  .project-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $spacing-md;
+    margin-bottom: $spacing-sm;
+    background-color: var(--pa-card-bg);
+    border: $border-width-base solid var(--pa-border-color);
+    border-radius: $border-radius;
+    .user-name {
+      font-weight: $font-weight-medium;
+    }
+    h5 {
+      margin: 0 0 $spacing-sm 0;
+      font-size: $font-size-base;
+      font-weight: $font-weight-semibold;
+    }
+    .project-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $spacing-xs;
+    }
+  }
+  .project-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

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

@@ -0,0 +1,294 @@
+/* Pure Admin - Web Components Theme Integration
+ * 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 *;
+/*
+ */
+/* ========================================
+   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-primary);
+  --drp-text-secondary: var(--pa-text-secondary);
+  --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-primary);
+  --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-secondary);
+  --drp-input-disabled-background: var(--pa-input-bg);
+  --drp-input-disabled-color: var(--pa-text-secondary);
+  /* 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-secondary);
+  --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-primary);
+  --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-primary);
+  --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-secondary);
+  --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-primary);
+  --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-primary);
+  /* Focused state */
+  --drp-day-focused-outline: #{$accent-color};
+  /* Disabled state */
+  --drp-day-disabled-color: var(--pa-text-secondary);
+  --drp-day-disabled-opacity: #{$opacity-disabled};
+  /* Other month */
+  --drp-day-other-month-color: var(--pa-text-secondary);
+  --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-primary);
+  /* ===== SUMMARY BAR ===== */
+  --drp-summary-bg: #{$card-header-bg};
+  --drp-summary-border-color: #{$border-color};
+  --drp-summary-text-color: var(--pa-text-primary);
+  --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-primary);
+  --drp-unified-range-bg-hover: #{$accent-hover};
+  --drp-unified-range-bg-active: #{$accent-light};
+  /* Month/Year display */
+  --drp-unified-month-color: var(--pa-text-primary);
+  /* Rolling selector disabled state */
+  --drp-unified-rolling-disabled-color: var(--pa-text-secondary);
+  /* ===== 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-primary);
+  --drp-rolling-item-disabled-color: var(--pa-text-secondary);
+  /* ===== 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};
+}

package/src/scss/core-components/badges/_badge-base.scss ADDED Viewed

@@ -0,0 +1,131 @@
+/* ========================================
+   Badge Base
+   Core badge component with sizes, colors, and modifiers
+   ======================================== */
+@use '../../variables' as *;
+// Badge Components
+.pa-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
+  padding: $spacing-xs $spacing-sm;
+  background-color: var(--pa-btn-secondary-bg);
+  color: var(--pa-btn-secondary-text);
+  font-size: $font-size-xs;
+  font-weight: $font-weight-semibold;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: $border-radius;
+  border: $border-width-base solid transparent;
+  transition: all $transition-fast $easing-snappy;
+  &__icon {
+    font-size: $font-size-2xs;
+    line-height: 1;
+  }
+  // Size variations
+  &--xs {
+    padding: 0.2rem 0.4rem;
+    font-size: $font-size-2xs;  // 1rem (10px)
+  }
+  &--sm {
+    padding: 0.25rem 0.5rem;
+    font-size: $font-size-xs;   // 1.2rem (12px)
+  }
+  &--lg {
+    padding: 0.5rem 1rem;
+    font-size: $font-size-sm;   // 1.4rem (14px)
+  }
+  &--xl {
+    padding: 0.6rem 1.2rem;
+    font-size: $font-size-base; // 1.6rem (16px)
+  }
+  // Shape variations
+  &--pill {
+    border-radius: $badge-pill-radius;
+  }
+  // Color variations
+  &--primary {
+    background-color: var(--pa-btn-primary-bg);
+    color: var(--pa-btn-primary-text);
+    border-color: var(--pa-btn-primary-bg);
+  }
+  &--secondary {
+    background-color: var(--pa-btn-secondary-bg);
+    color: var(--pa-btn-secondary-text);
+    border-color: var(--pa-btn-secondary-bg);
+  }
+  &--success {
+    background-color: var(--pa-btn-success-bg);
+    color: var(--pa-btn-success-text);
+    border-color: var(--pa-btn-success-bg);
+  }
+  &--warning {
+    background-color: var(--pa-btn-warning-bg);
+    color: var(--pa-btn-warning-text);
+    border-color: var(--pa-btn-warning-bg);
+  }
+  &--danger {
+    background-color: var(--pa-btn-danger-bg);
+    color: var(--pa-btn-danger-text);
+    border-color: var(--pa-btn-danger-bg);
+  }
+  &--info {
+    background-color: var(--pa-btn-info-bg);
+    color: var(--pa-btn-info-text);
+    border-color: var(--pa-btn-info-bg);
+  }
+  &--light {
+    background-color: var(--pa-btn-light-bg);
+    color: var(--pa-btn-light-text);
+    border-color: var(--pa-btn-light-bg);
+  }
+  &--dark {
+    background-color: var(--pa-btn-dark-bg);
+    color: var(--pa-btn-dark-text);
+    border-color: var(--pa-btn-dark-bg);
+  }
+  // Fixed-width badges with ellipsis
+  &--w-1x { min-width: 1.6rem; max-width: 1.6rem; }
+  &--w-2x { min-width: 3.2rem; max-width: 3.2rem; }
+  &--w-3x { min-width: 4.8rem; max-width: 4.8rem; }
+  &--w-4x { min-width: 6.4rem; max-width: 6.4rem; }
+  &--w-5x { min-width: 8rem; max-width: 8rem; }
+  &--w-6x { min-width: 9.6rem; max-width: 9.6rem; }
+  &--w-7x { min-width: 11.2rem; max-width: 11.2rem; }
+  &--w-8x { min-width: 12.8rem; max-width: 12.8rem; }
+  &--w-9x { min-width: 14.4rem; max-width: 14.4rem; }
+  &--w-10x { min-width: 16rem; max-width: 16rem; }
+  // Apply ellipsis to fixed-width badges
+  &[class*="--w-"] {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+  // Left-side ellipsis for paths/hierarchies where end is important
+  &--ellipsis-left {
+    direction: rtl;
+    text-align: left;
+  }
+}

package/src/scss/core-components/badges/_badge-group.scss ADDED Viewed

@@ -0,0 +1,25 @@
+/* ========================================
+   Badge Group
+   Container for grouped badges with visibility limits
+   ======================================== */
+@use '../../variables' as *;
+// Badge Group - limits visible badges and shows "more" indicator
+.pa-badge-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $badge-group-gap;
+  // Hide badges beyond the limit
+  .pa-badge:nth-child(n+#{$badge-group-visible-limit + 1}):not(:last-child) {
+    display: none;
+  }
+  // Show all badges without limit
+  &--show-all {
+    .pa-badge:nth-child(n+#{$badge-group-visible-limit + 1}):not(:last-child) {
+      display: inline-flex;
+    }
+  }
+}