@keenmate/pure-css 1.0.0-rc03 → 1.0.0-rc05

package/src/scss/_fit-flyout.scss

@@ -0,0 +1,76 @@
+/* ========================================
+   Fit — Floating-menu sink (fit.js)
+   The self-contained relocation target for
+   data-pc-fit="relocate" data-pc-fit-target="floating-menu".
+   fit.js creates the trigger (pinned in the container) + panel (on <body>)
+   on demand and toggles --open; this styles them. No sidebar dependency.
+   Relocated from pure-admin-core: the fit engine (fit.js) + its flyout sink
+   now live in the foundation package.
+   ======================================== */
+@use 'variables/index' as *;
+
+// Trigger — a compact "•••" button fit pins at the end of the container. Hidden
+// (inline style) by the engine until at least one slot lives in the panel.
+.pc-fit-flyout__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 2.8rem;
+  height: 2.8rem;
+  padding: 0;
+  border: $border-width-base solid transparent;
+  border-radius: var(--pc-border-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+
+  &:hover { background: var(--pc-hover-bg, rgba(0, 0, 0, 0.05)); }
+  &:focus-visible { outline: 2px solid var(--pc-accent-color); outline-offset: 1px; }
+  &[aria-expanded='true'] { background: var(--pc-hover-bg, rgba(0, 0, 0, 0.08)); }
+}
+
+// The three dots, drawn so the sink needs no icon-font dependency.
+.pc-fit-flyout__dots {
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: 50%;
+  background: currentColor;
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 50%;
+    background: currentColor;
+  }
+  &::before { inset-inline-start: -0.7rem; }
+  &::after { inset-inline-start: 0.7rem; }
+}
+
+// Panel — appended to <body>, positioned by JS (fixed, near the trigger).
+.pc-fit-flyout__panel {
+  position: fixed;
+  z-index: $z-index-navbar + 10;
+  display: none;
+  min-width: 20rem;
+  max-width: 32rem;
+  padding: $spacing-sm;
+  background: var(--pc-card-bg);
+  border: $border-width-base solid var(--pc-border-color);
+  border-radius: var(--pc-border-radius);
+  box-shadow: $shadow-lg;
+
+  &--open { display: block; }
+}
+
+// Each relocated slot is wrapped in an item row inside the panel.
+.pc-fit-flyout__item {
+  padding: $spacing-xs $spacing-sm;
+
+  & + & { border-top: $border-width-base solid var(--pc-border-color); }
+}

package/src/scss/_fonts.scss

@@ -1,37 +1,37 @@
-/* Pure Admin Visual Framework - Default Font Definitions */
-
-// Default framework fonts - themes can override these
-// Note: Font size classes for <html> are in _utilities.scss (use px values for correct rem scaling)
-
-// Font family classes with system defaults
-.font-family-system {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
-}
-
-.font-family-sans {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
-}
-
-.font-family-serif {
-  font-family: Georgia, "Times New Roman", Times, serif;
-
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
-}
-
-.font-family-mono {
-  font-family: "Courier New", Courier, monospace;
-
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
+/* Pure Admin Visual Framework - Default Font Definitions */
+
+// Default framework fonts - themes can override these
+// Note: Font size classes for <html> are in _utilities.scss (use px values for correct rem scaling)
+
+// Font family classes with system defaults
+.font-family-system {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-sans {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-serif {
+  font-family: Georgia, "Times New Roman", Times, serif;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+
+.font-family-mono {
+  font-family: "Courier New", Courier, monospace;
+
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
 }

package/src/scss/_layout-container.scss

@@ -0,0 +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-main-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);
+  border-top: $border-width-base solid var(--pc-footer-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/_layout-responsive.scss

@@ -0,0 +1,181 @@
+@use 'variables/index' as *;
+/* ========================================
+   Layout Responsive
+   Mobile and tablet media queries
+   ======================================== */
+
+// Config CSS variables — the JS-readable single source for values that also
+// exist as SCSS tokens (window.pureAdmin.config mirrors these; see
+// docs/config-shared-ui-baseline.md). Non-themeable structural constants, so
+// they're emitted here (not via a theme mixin) yet ship in both main.css and
+// every theme. The breakpoint is a clean px value (parseFloat-friendly); the
+// motion tokens are calc() expressions, so JS resolves them off a probe element
+// (getComputedStyle can't resolve calc in an unregistered custom property).
+// These also give CSS consumers named motion tokens as runtime vars.
+:root {
+  --pc-mobile-breakpoint: #{$mobile-breakpoint};
+  --pc-transition-fast: #{$transition-fast};
+  --pc-transition-normal: #{$transition-normal};
+  --pc-transition-medium: #{$transition-medium};
+  --pc-transition-slow: #{$transition-slow};
+  --pc-easing-snappy: #{$easing-snappy};
+}
+
+// Responsive Design - Mobile and Tablet
+@media (max-width: $mobile-breakpoint) {
+  // Mobile: the sidebar is an off-canvas drawer that SLIDES in/out, in sync with
+  // the profile panel (same $transition-medium / $easing-snappy). It's always
+  // position:fixed at the drawer size and translated off-canvas at the
+  // inline-start edge; `.sidebar-visible` slides it to translateX(0). This
+  // replaces the old snap between width:0 and a fixed overlay, which popped in
+  // with no animation. Content takes full width in both states because the
+  // drawer is out of flow (fixed).
+  .pc-layout__sidebar,
+  .pc-layout__sidebar--icon-collapse {
+    position: fixed;
+    top: $navbar-height;
+    inset-inline-start: 0; // RTL: flips to right
+    bottom: 0;
+    width: $mobile-sidebar-width;
+    z-index: 1050;
+    background-color: var(--pc-sidebar-bg);
+    opacity: 1;
+    overflow-y: auto;
+    overscroll-behavior: contain; // drawer's own scroll doesn't chain to the page
+    border-inline-end: none; // RTL: flips to left
+    transform: translateX(-100%); // off-canvas (slid out past the inline-start edge)
+    visibility: hidden; // inert + unfocusable while closed; flips visible on open
+
+    // Gate the transition on body.loaded like the sidebar links, so the drawer
+    // doesn't animate from off-canvas on first paint.
+    body.loaded & {
+      transition: transform $transition-medium $easing-snappy,
+                  visibility $transition-medium $easing-snappy;
+    }
+  }
+
+  // RTL: the drawer sits at the inline-start (right) edge, so it slides off to
+  // the right when closed.
+  [dir="rtl"] .pc-layout__sidebar,
+  [dir="rtl"] .pc-layout__sidebar--icon-collapse {
+    transform: translateX(100%);
+  }
+
+  // icon-collapse mode is a full overlay drawer on mobile — force labels visible.
+  .pc-layout__sidebar--icon-collapse .pc-sidebar__label {
+    opacity: 1 !important;
+    width: auto !important;
+    overflow: visible !important;
+    position: static !important;
+  }
+
+  // Backdrop scrim: an always-present fixed pseudo that FADES its opacity, so it
+  // eases in/out with the drawer (a pseudo that only existed while open couldn't
+  // fade out). Inert + invisible when closed. On body::before so it's positioned
+  // against the viewport (not a transformed ancestor) — the toggle class lives
+  // on body too.
+  body::before {
+    content: "";
+    position: fixed;
+    top: $navbar-height;
+    inset-inline: 0; // RTL: covers full width
+    bottom: 0;
+    background-color: $mobile-backdrop-bg;
+    z-index: 1040;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+
+    body.loaded & {
+      transition: opacity $transition-medium $easing-snappy,
+                  visibility $transition-medium $easing-snappy;
+    }
+  }
+
+  // Mobile: drawer open — slide it in, reveal the scrim, lock background scroll.
+  .sidebar-visible {
+    // Standard modal-drawer scroll-lock: while the drawer + scrim are open the
+    // page behind must not scroll (otherwise dragging the scrim strip scrolls
+    // the content under the fixed drawer, exposing that the drawer is only
+    // viewport-high). This covers desktop browsers + Android; iOS Safari ignores
+    // body{overflow:hidden} for touch scroll, so the mobile toggle also applies
+    // a position:fixed body lock in JS (demo layout.mustache). See
+    // docs/mobile-sidebar-overlay.md.
+    overflow: hidden;
+
+    .pc-layout__sidebar,
+    .pc-layout__sidebar--icon-collapse {
+      transform: translateX(0); // slide in (source order beats the RTL closed rule)
+      visibility: visible;
+    }
+
+    &::before {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto; // tap the scrim to dismiss
+    }
+  }
+
+  // Mobile overlay: the sidebar is a fixed 90vw sheet and resize is disabled in
+  // JS at this width (sidebar-resize.js MOBILE_MAX = $mobile-breakpoint). Hide
+  // the handle so the coarse-pointer grip pill / edge line don't render as a
+  // dead affordance riding the overlay's edge (where it also straddles the
+  // backdrop-dismiss tap zone). Touch resize still works in the tablet band
+  // above this breakpoint, where the coarse-pointer affordance is kept.
+  .pc-sidebar-resize {
+    display: none;
+  }
+
+  // Adjust navbar for mobile
+  .pc-navbar__inner {
+    gap: $spacing-sm;
+  }
+
+  // Legacy navs hard-hide on mobile (navigation is expected in the sidebar).
+  // A nav opted into progressive collapse (data-pc-fit-nav) manages its
+  // own width at every breakpoint, so it must stay visible here.
+  .pc-navmenu:not([data-pc-fit-nav]) {
+    display: none;
+  }
+
+  // Hide theme switcher label on mobile
+  .theme-switcher {
+    label {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: $tablet-breakpoint) and (min-width: $tablet-breakpoint-min) {
+  // Tablet: reduce the sidebar by default, but honour an explicit resize.
+  // The default (un-resized) width caps at $sidebar-width-tablet via min() so
+  // content gets room and the base $sidebar-width (28.8rem) doesn't dominate a
+  // tablet. The old `width: $sidebar-width-tablet` literal (specificity 0,1,0)
+  // overrode the var-based base rule outright and snapped every sidebar to 16rem.
+  .pc-layout__sidebar {
+    width: min(var(--pc-local-sidebar-width), #{$sidebar-width-tablet});
+
+    &__nav ul li a {
+      padding: $spacing-sm $spacing-md;
+      font-size: $font-size-sm;
+    }
+  }
+
+  // Once the user has actually drag-resized (sidebar-resize.js sets this class),
+  // honour their exact width here — WITHOUT the tablet cap. This is required for
+  // the resize handle to work at all in this band: the drag floor
+  // (--pc-local-sidebar-min-width, 18rem) is ABOVE the 16rem cap, so every width
+  // the drag can produce is clamped by min() and the sidebar never visibly moves
+  // — the handle looks dead. Gating on the explicit-resize class (not just
+  // --resizable) keeps the narrow tablet default until the user opts in.
+  //
+  // MUST exclude .sidebar-hidden: this selector (0,2,1) outweighs
+  // `.sidebar-hidden .pc-layout__sidebar { width: 0 }` (0,2,0), so once resized a
+  // sidebar stays full-width when the burger hides it and the content never
+  // reclaims the space — but ONLY in this tablet band (desktop has no such
+  // override). `:not(.sidebar-hidden)` yields to the hide rule while keeping the
+  // resized width whenever the sidebar is actually shown.
+  body.pc-sidebar-resized:not(.sidebar-hidden) .pc-layout__sidebar {
+    width: var(--pc-local-sidebar-width);
+  }
+}