@keenmate/pure-css 1.0.0-rc07 → 1.0.0-rc09

package/src/scss/_fit-flyout.scss

@@ -60,7 +60,7 @@
   min-width: 20rem;
   max-width: 32rem;
   padding: $spacing-sm;
-  background: var(--pc-card-bg, var(--base-main-bg));
+  background: var(--base-main-bg);
   border: $border-width-base solid var(--pc-border-color);
   border-radius: var(--pc-border-radius);
   box-shadow: $shadow-lg;

package/src/scss/_layout-container.scss

@@ -1,168 +1,168 @@
-@use 'variables/index' as *;
-/* ========================================
-   Layout Container
-   Main layout wrapper, content areas, sticky/scroll modes
-   ======================================== */
-
-// Layout wrapper - applied to body for mode-specific classes
-body.pc-layout--sticky {
-  height: 100vh;
-  overflow: hidden;
-}
-
-// Layout Container - centered, starts below navbar
-.pc-layout {
-  max-width: 100%;
-  margin: $navbar-height auto 0;
-  background-color: var(--pc-page-bg);
-  overflow: visible; // Allow tooltips to escape
-  display: flex;
-  flex-direction: column;
-}
-
-// Constrained widths - controlled by body class
-body.pc-container-sm .pc-layout {
-  max-width: $layout-container-sm;
-  box-shadow: $shadow-2xl;
-  border-left: $border-width-base solid var(--pc-border-color);
-  border-right: $border-width-base solid var(--pc-border-color);
-}
-
-body.pc-container-md .pc-layout {
-  max-width: $layout-container-md;
-  box-shadow: $shadow-2xl;
-  border-left: $border-width-base solid var(--pc-border-color);
-  border-right: $border-width-base solid var(--pc-border-color);
-}
-
-body.pc-container-lg .pc-layout {
-  max-width: $layout-container-lg;
-  box-shadow: $shadow-2xl;
-  border-left: $border-width-base solid var(--pc-border-color);
-  border-right: $border-width-base solid var(--pc-border-color);
-}
-
-body.pc-container-xl .pc-layout {
-  max-width: $layout-container-xl;
-  box-shadow: $shadow-xl;
-  border-left: $border-width-base solid var(--pc-border-color);
-  border-right: $border-width-base solid var(--pc-border-color);
-}
-
-body.pc-container-2xl .pc-layout {
-  max-width: $layout-container-2xl;
-  box-shadow: $shadow-xl;
-  border-left: $border-width-base solid var(--pc-border-color);
-  border-right: $border-width-base solid var(--pc-border-color);
-}
-
-// Sticky mode - fixed height
-body.pc-layout--sticky .pc-layout {
-  height: calc(100vh - #{$navbar-height}); // Full viewport minus top margin
-}
-
-// Scroll mode - minimum height
-body:not(.pc-layout--sticky) .pc-layout {
-  min-height: calc(100vh - #{$navbar-height}); // Ensure footer reaches bottom
-}
-
-// Layout inner container - flex wrapper for sidebar + content
-.pc-layout__inner {
-  display: flex;
-  width: 100%;
-  flex: 1; // Take available space, pushing footer to bottom
-}
-
-// Sticky mode - inner container takes full height minus footer
-body.pc-layout--sticky .pc-layout__inner {
-  flex: 1;
-  overflow: hidden; // Prevent overflow, let content wrapper scroll
-}
-
-// Content wrapper - wraps main content only
-.pc-layout__content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto; // Always scrollable
-}
-
-// Main content area
-.pc-layout__main {
-  flex: 1;
-  padding: $spacing-base;
-  container-type: inline-size;
-}
-
-// Footer - outside inner, sibling to inner
-.pc-layout__footer {
-  min-height: $footer-height;
-  background-color: var(--pc-footer-bg, var(--base-main-bg));
-  border-top: $border-width-base solid var(--pc-footer-border-color, var(--base-border-color));
-  display: flex;
-  align-items: center;
-  padding: $spacing-xs $spacing-base;
-  flex-shrink: 0; // Don't shrink footer
-  gap: $spacing-base;
-}
-
-// Footer sections - Start/Center/End layout (mirrors navbar structure)
-.pc-footer__start {
-  display: flex;
-  align-items: center;
-  gap: $spacing-base;
-  flex-shrink: 0;
-}
-
-.pc-footer__center {
-  flex: 1;
-  min-width: 0; // Allow shrinking for ellipsis
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pc-footer__end {
-  display: flex;
-  align-items: center;
-  gap: $spacing-base;
-  flex-shrink: 0;
-
-  &--vertical {
-    flex-direction: column;
-    align-items: flex-end;
-    gap: $spacing-xs;
-  }
-}
-
-// Responsive footer - stack sections on mobile
-@media (max-width: $mobile-breakpoint) {
-  .pc-layout__footer {
-    flex-wrap: wrap;
-    min-height: auto;
-    padding: $spacing-sm $spacing-base;
-  }
-
-  .pc-footer__start,
-  .pc-footer__center,
-  .pc-footer__end {
-    flex-shrink: 1;
-    min-width: 0;
-  }
-
-  .pc-footer__start {
-    flex: 1 1 auto;
-  }
-
-  .pc-footer__center {
-    display: none; // Hide empty center on mobile
-  }
-
-  .pc-footer__end {
-    flex: 0 1 auto;
-
-    &--vertical {
-      align-items: flex-end;
-    }
-  }
-}
+@use 'variables/index' as *;
+/* ========================================
+   Layout Container
+   Main layout wrapper, content areas, sticky/scroll modes
+   ======================================== */
+
+// Layout wrapper - applied to body for mode-specific classes
+body.pc-layout--sticky {
+  height: 100vh;
+  overflow: hidden;
+}
+
+// Layout Container - centered, starts below navbar
+.pc-layout {
+  max-width: 100%;
+  margin: $navbar-height auto 0;
+  background-color: var(--pc-page-bg);
+  overflow: visible; // Allow tooltips to escape
+  display: flex;
+  flex-direction: column;
+}
+
+// Constrained widths - controlled by body class
+body.pc-container-sm .pc-layout {
+  max-width: $layout-container-sm;
+  box-shadow: $shadow-2xl;
+  border-left: $border-width-base solid var(--pc-border-color);
+  border-right: $border-width-base solid var(--pc-border-color);
+}
+
+body.pc-container-md .pc-layout {
+  max-width: $layout-container-md;
+  box-shadow: $shadow-2xl;
+  border-left: $border-width-base solid var(--pc-border-color);
+  border-right: $border-width-base solid var(--pc-border-color);
+}
+
+body.pc-container-lg .pc-layout {
+  max-width: $layout-container-lg;
+  box-shadow: $shadow-2xl;
+  border-left: $border-width-base solid var(--pc-border-color);
+  border-right: $border-width-base solid var(--pc-border-color);
+}
+
+body.pc-container-xl .pc-layout {
+  max-width: $layout-container-xl;
+  box-shadow: $shadow-xl;
+  border-left: $border-width-base solid var(--pc-border-color);
+  border-right: $border-width-base solid var(--pc-border-color);
+}
+
+body.pc-container-2xl .pc-layout {
+  max-width: $layout-container-2xl;
+  box-shadow: $shadow-xl;
+  border-left: $border-width-base solid var(--pc-border-color);
+  border-right: $border-width-base solid var(--pc-border-color);
+}
+
+// Sticky mode - fixed height
+body.pc-layout--sticky .pc-layout {
+  height: calc(100vh - #{$navbar-height}); // Full viewport minus top margin
+}
+
+// Scroll mode - minimum height
+body:not(.pc-layout--sticky) .pc-layout {
+  min-height: calc(100vh - #{$navbar-height}); // Ensure footer reaches bottom
+}
+
+// Layout inner container - flex wrapper for sidebar + content
+.pc-layout__inner {
+  display: flex;
+  width: 100%;
+  flex: 1; // Take available space, pushing footer to bottom
+}
+
+// Sticky mode - inner container takes full height minus footer
+body.pc-layout--sticky .pc-layout__inner {
+  flex: 1;
+  overflow: hidden; // Prevent overflow, let content wrapper scroll
+}
+
+// Content wrapper - wraps main content only
+.pc-layout__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto; // Always scrollable
+}
+
+// Main content area
+.pc-layout__main {
+  flex: 1;
+  padding: $spacing-base;
+  container-type: inline-size;
+}
+
+// Footer - outside inner, sibling to inner
+.pc-layout__footer {
+  min-height: $footer-height;
+  background-color: var(--pc-footer-bg, var(--base-main-bg));
+  border-top: $border-width-base solid var(--pc-footer-border-color, var(--base-border-color));
+  display: flex;
+  align-items: center;
+  padding: $spacing-xs $spacing-base;
+  flex-shrink: 0; // Don't shrink footer
+  gap: $spacing-base;
+}
+
+// Footer sections - Start/Center/End layout (mirrors navbar structure)
+.pc-footer__start {
+  display: flex;
+  align-items: center;
+  gap: $spacing-base;
+  flex-shrink: 0;
+}
+
+.pc-footer__center {
+  flex: 1;
+  min-width: 0; // Allow shrinking for ellipsis
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pc-footer__end {
+  display: flex;
+  align-items: center;
+  gap: $spacing-base;
+  flex-shrink: 0;
+
+  &--vertical {
+    flex-direction: column;
+    align-items: flex-end;
+    gap: $spacing-xs;
+  }
+}
+
+// Responsive footer - stack sections on mobile
+@media (max-width: $mobile-breakpoint) {
+  .pc-layout__footer {
+    flex-wrap: wrap;
+    min-height: auto;
+    padding: $spacing-sm $spacing-base;
+  }
+
+  .pc-footer__start,
+  .pc-footer__center,
+  .pc-footer__end {
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  .pc-footer__start {
+    flex: 1 1 auto;
+  }
+
+  .pc-footer__center {
+    display: none; // Hide empty center on mobile
+  }
+
+  .pc-footer__end {
+    flex: 0 1 auto;
+
+    &--vertical {
+      align-items: flex-end;
+    }
+  }
+}

package/src/scss/_navbar-elements.scss

@@ -142,7 +142,7 @@
     top: 100%;
     inset-inline-start: 0; // RTL: flips to right: 0
     min-width: 19.2rem;
-    background-color: var(--pc-card-bg, var(--base-main-bg));
+    background-color: var(--base-main-bg);
     border: $border-width-base solid var(--pc-border-color);
     border-radius: var(--pc-border-radius);
     box-shadow: $shadow-lg;
@@ -256,10 +256,19 @@
     position: relative;
   }
 
+  // SVG mask chevron (was a "›" text glyph). Shares --base-icon-chevron with the
+  // sidebar + components; --pa-icon-chevron (core) overrides, #{$base-icon-chevron} is
+  // the standalone fallback. `font-size: 0` hides any legacy "›" in old markup.
   &__more-chevron {
     display: inline-block;
     margin-inline-start: $spacing-xs;
-    font-size: $font-size-xs;
+    inline-size: 1.4rem;
+    block-size: 1.4rem;
+    flex-shrink: 0;
+    font-size: 0;
+    background-color: currentColor;
+    -webkit-mask: var(--base-icon-chevron, #{$base-icon-chevron}) center / 1.1rem no-repeat;
+            mask: var(--base-icon-chevron, #{$base-icon-chevron}) center / 1.1rem no-repeat;
     transition: transform $transition-fast $easing-snappy;
   }
 

package/src/scss/_resize-handle.scss

@@ -46,7 +46,7 @@ $resize-knob-radius-lg: 6px !default;
   // themes (radius 0) stay square via min(). High-contrast fill / border / shadow
   // so the knob stands out on both light and dark surfaces.
   border-radius: min(var(--pc-border-radius-lg), #{$resize-knob-radius});
-  background-color: var(--pc-card-bg, var(--base-main-bg));
+  background-color: var(--base-main-bg);
   border: $border-width-medium solid var(--pc-border-color);
   color: var(--pc-text-color-2);
   font-size: $font-size-lg;

package/src/scss/_sidebar-states.scss

@@ -120,11 +120,11 @@
         width: 100%;
 
         &:hover {
-          background-color: var(--pc-sidebar-submenu-hover-bg, var(--base-subtle-bg));
+          background-color: var(--pc-sidebar-submenu-hover-bg, var(--base-hover-bg));
         }
 
         &--active {
-          background-color: var(--pc-sidebar-submenu-active-bg, var(--base-subtle-bg));
+          background-color: var(--pc-sidebar-submenu-active-bg, var(--base-active-bg));
           color: var(--pc-sidebar-submenu-active-text, var(--base-text-color-1));
         }
       }

package/src/scss/_sidebar.scss

@@ -199,7 +199,7 @@ body.pc-layout--sticky .pc-layout__sidebar {
     height: #{$base-input-size-md-height}rem;
     padding: 0 $spacing-base 0 $spacing-sm;
     color: var(--pc-text-color-2);
-    background-color: var(--pc-input-bg, var(--base-input-bg));
+    background-color: var(--base-input-bg);
     border: $border-width-base solid var(--pc-border-color);
     border-radius: var(--pc-border-radius);
     text-align: start; // RTL: flips to right
@@ -217,7 +217,10 @@ body.pc-layout--sticky .pc-layout__sidebar {
     }
 
     &:hover {
-      border-color: $input-focus-border-color;
+      // $accent-color (foundation) — was $input-focus-border-color, an exact
+      // alias; inlined so the shell no longer depends on the component layer
+      // (variables/_components.scss now lives in pure-admin-core).
+      border-color: $accent-color;
       color: var(--pc-sidebar-text, var(--base-text-color-1));
     }
 
@@ -376,11 +379,11 @@ body.pc-layout--sticky .pc-layout__sidebar {
     border-inline-end: $border-width-medium solid transparent; // RTL: flips to border-left
 
     &:hover {
-      background-color: var(--pc-sidebar-submenu-hover-bg, var(--base-subtle-bg));
+      background-color: var(--pc-sidebar-submenu-hover-bg, var(--base-hover-bg));
     }
 
     &--active {
-      background-color: var(--pc-sidebar-submenu-active-bg, var(--base-subtle-bg));
+      background-color: var(--pc-sidebar-submenu-active-bg, var(--base-active-bg));
       color: var(--pc-sidebar-submenu-active-text, var(--base-text-color-1));
       border-inline-end-color: var(--pc-accent); // RTL: flips to border-left-color
     }
@@ -403,10 +406,22 @@ body.pc-layout--sticky .pc-layout__sidebar {
     }
   }
 
-  // Chevron icon for toggle buttons
+  // Chevron icon for toggle buttons. Rendered as an SVG mask painted in
+  // currentColor (was a bare "›" text glyph, which rendered inconsistently
+  // across platforms/fonts). Reads the shared --base-icon-chevron so it aligns
+  // with pure-admin + the web components; --pa-icon-chevron (core) lets pure-admin
+  // override, and #{$base-icon-chevron} is the standalone literal fallback.
+  // `font-size: 0` collapses any legacy "›" still present in older markup so it
+  // never double-renders alongside the mask.
   &__chevron {
     margin-inline-start: auto; // RTL: flips to margin-right: auto
-    font-size: $font-size-xs;
+    inline-size: 1.6rem;
+    block-size: 1.6rem;
+    flex-shrink: 0;
+    font-size: 0;
+    background-color: currentColor;
+    -webkit-mask: var(--base-icon-chevron, #{$base-icon-chevron}) center / 1.2rem no-repeat;
+            mask: var(--base-icon-chevron, #{$base-icon-chevron}) center / 1.2rem no-repeat;
 
     body.loaded & {
       transition: transform $transition-fast $easing-snappy;

package/src/scss/component-reset.scss

@@ -0,0 +1,65 @@
+// @keenmate/pure-css — component reset (the Shadow-DOM counterpart to "reboot")
+// ============================================================================
+// reboot.scss normalises a whole DOCUMENT: it anchors on `html` (the 10px rem
+// base), `body` (font / colour / line-height) and bare element selectors. NONE
+// of that reaches inside a Shadow-DOM web component — there is no `html`/`body`
+// in a shadow root, and the shadow boundary blocks selector-based styling.
+//
+// What the boundary does NOT block is inheritance: `font-family`, `line-height`,
+// `letter-spacing`, `color`, `text-transform`, … inherit from the host page
+// straight through into the component's shadow tree. This layer is the piece a
+// component adopts INTO its own shadow root (import with `?inline`, wrap in a
+// constructable stylesheet / Lit `css`) to:
+//   1. normalise box-sizing, and
+//   2. pin the inherited typography on `:host`, so an arbitrary host page can't
+//      bleed its font / spacing / colour into the component.
+//
+// It deliberately does NOT restyle p / ul / table / … — a component owns its own
+// content styling; this only neutralises what crosses the boundary. Pair it with
+// `base` (the --base-* token layer) which the tokens below resolve against.
+//
+// It sets NO `rem` base on purpose: `rem` is always root-relative (resolved
+// against the document `<html>`, never the shadow host), so a component that must
+// be independent of the host's root font-size should scale off its own token
+// (e.g. --cm-rem in campaign-modal-lit), not `rem`.
+// ============================================================================
+
+@use 'variables/index' as *;
+
+:host {
+  box-sizing: border-box;
+
+  // Inherited properties that would otherwise cross the shadow boundary from the host
+  // page. Each is pinned to its initial/neutral value (or the foundation token), so the
+  // component starts from a known baseline no matter what the host set on <body>.
+  color: var(--base-text-color-1);
+  font-family: var(--base-font-family);
+  font-size: medium; // host-independent 16px baseline; components set their own scale
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: $line-height-base;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-align: start;
+  text-indent: 0;
+  text-transform: none;
+  text-shadow: none;
+  white-space: normal;
+  word-break: normal;
+  overflow-wrap: normal;
+  writing-mode: horizontal-tb; // a host's vertical writing-mode would wreck the layout
+  accent-color: auto; // don't let the host tint the component's checkboxes / radios
+
+  // Deliberately LEFT inheriting from the host (resetting them would do harm):
+  //   direction     — respect the host's locale / RTL
+  //   color-scheme  — components' light-dark() tokens key off it (dark-mode support)
+  // And NOT pinned here because a component owns them as content styling, not chrome:
+  //   list-style, tab-size, quotes, cursor, hyphens, caret-color, font-stretch
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}