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

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;
+}

package/src/scss/reboot.scss

@@ -1,134 +1,134 @@
-// @keenmate/pure-css — reset & base element styling ("reboot")
-// ============================================================================
-// The foundation's reset layer. Establishes the 10px rem base that EVERY
-// pure-css rem value assumes (see variables/_typography.scss — `$font-size-base:
-// 1.6rem` is 16px only when the root is 10px), a border-box reset, and neutral
-// base styling for standard HTML elements (headings, paragraphs, links, lists,
-// blockquotes, rules, the body font/colour). Analogous to Bootstrap's Reboot.
-//
-// This lives in pure-css — not in a consuming app — because the 10px base is
-// part of the foundation's sizing contract: without it, a standalone consumer
-// inherits the browser's 16px root and every rem renders 1.6x too large. Link
-// it (or the full `pure-css.css` bundle) and the scale just works.
-//
-// App-specific base rules (the admin dashboard's decorative body background,
-// sidebar overflow handling) intentionally stay in pure-admin-core; a generic
-// foundation shouldn't impose them on every consumer.
-// ============================================================================
-
-@use 'variables/index' as *;
-
-// 10px rem base for intuitive sizing (1rem = 10px)
-// This makes calculations simple: 1.5rem = 15px, 3.5rem = 35px
-html {
-  font-size: 10px;
-}
-
-// Reset and base styles
-* {
-  box-sizing: border-box;
-}
-
-// Standard HTML element spacing (using framework variables)
-// Headings
-h1, h2, h3, h4, h5, h6 {
-  margin: $heading-margin-top 0 $heading-margin-bottom 0;
-  padding: 0;
-}
-
-// Paragraphs
-p {
-  margin: $paragraph-margin-top 0 $paragraph-margin-bottom 0;
-  padding: 0;
-}
-
-// Links — global default. Wrapped in :where() so specificity is 0,
-// letting component scopes (alerts, navbar, sidebar) override with even a
-// single class without fighting the pseudo-class specificity raise that
-// `a:hover` / `a:visited` would otherwise add (0,1,1 vs a class's 0,1,0).
-:where(a) {
-  color: var(--pc-link-color);
-  text-decoration: underline;
-}
-
-:where(a:hover) {
-  color: var(--pc-link-color-hover);
-}
-
-:where(a:visited) {
-  color: var(--pc-link-color-visited);
-}
-
-// Lists - styled lists (default browser styling)
-ul, ol {
-  margin: $list-margin-top 0 $list-margin-bottom 0;
-  padding: 0;
-  padding-inline-start: $list-padding-left; // RTL: flips to right
-
-  li {
-    margin-bottom: $list-item-margin-bottom;
-  }
-}
-
-// Lists - unstyled (for navigation, etc.)
-ul.unstyled, ol.unstyled {
-  list-style: none;
-  padding-inline-start: 0; // RTL: flips to right
-
-  li {
-    margin-bottom: 0;
-  }
-}
-
-// Definition lists
-dl {
-  margin: $list-margin-top 0 $list-margin-bottom 0;
-  padding: 0;
-}
-
-dd {
-  margin: 0;
-  padding: 0;
-}
-
-// Blockquote
-blockquote {
-  margin: $blockquote-margin-top 0 $blockquote-margin-bottom 0;
-  padding-inline-start: $blockquote-padding-left; // RTL: flips to right
-}
-
-// Pre/Code blocks
-pre {
-  overflow-x: auto;
-}
-
-// Horizontal rule
-hr {
-  margin: $hr-margin-top 0 $hr-margin-bottom 0;
-}
-
-// Figure
-figure {
-  margin: $figure-margin-top 0 $figure-margin-bottom 0;
-  padding: 0;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: var(--base-font-family);
-  font-size: 1.6rem; // 16px default text (with 10px rem base)
-  color: var(--pc-text-color-1);
-  background-color: var(--pc-page-bg);
-  line-height: $line-height-base;
-}
-
-// Ensure form elements and labels inherit theme font and size instead of browser defaults
-button,
-input,
-select,
-textarea,
-label {
-  font-family: inherit;
-  font-size: inherit;
-}
+// @keenmate/pure-css — reset & base element styling ("reboot")
+// ============================================================================
+// The foundation's reset layer. Establishes the 10px rem base that EVERY
+// pure-css rem value assumes (see variables/_typography.scss — `$font-size-base:
+// 1.6rem` is 16px only when the root is 10px), a border-box reset, and neutral
+// base styling for standard HTML elements (headings, paragraphs, links, lists,
+// blockquotes, rules, the body font/colour). Analogous to Bootstrap's Reboot.
+//
+// This lives in pure-css — not in a consuming app — because the 10px base is
+// part of the foundation's sizing contract: without it, a standalone consumer
+// inherits the browser's 16px root and every rem renders 1.6x too large. Link
+// it (or the full `pure-css.css` bundle) and the scale just works.
+//
+// App-specific base rules (the admin dashboard's decorative body background,
+// sidebar overflow handling) intentionally stay in pure-admin-core; a generic
+// foundation shouldn't impose them on every consumer.
+// ============================================================================
+
+@use 'variables/index' as *;
+
+// 10px rem base for intuitive sizing (1rem = 10px)
+// This makes calculations simple: 1.5rem = 15px, 3.5rem = 35px
+html {
+  font-size: 10px;
+}
+
+// Reset and base styles
+* {
+  box-sizing: border-box;
+}
+
+// Standard HTML element spacing (using framework variables)
+// Headings
+h1, h2, h3, h4, h5, h6 {
+  margin: $heading-margin-top 0 $heading-margin-bottom 0;
+  padding: 0;
+}
+
+// Paragraphs
+p {
+  margin: $paragraph-margin-top 0 $paragraph-margin-bottom 0;
+  padding: 0;
+}
+
+// Links — global default. Wrapped in :where() so specificity is 0,
+// letting component scopes (alerts, navbar, sidebar) override with even a
+// single class without fighting the pseudo-class specificity raise that
+// `a:hover` / `a:visited` would otherwise add (0,1,1 vs a class's 0,1,0).
+:where(a) {
+  color: var(--pc-link-color);
+  text-decoration: underline;
+}
+
+:where(a:hover) {
+  color: var(--pc-link-color-hover);
+}
+
+:where(a:visited) {
+  color: var(--pc-link-color-visited);
+}
+
+// Lists - styled lists (default browser styling)
+ul, ol {
+  margin: $list-margin-top 0 $list-margin-bottom 0;
+  padding: 0;
+  padding-inline-start: $list-padding-left; // RTL: flips to right
+
+  li {
+    margin-bottom: $list-item-margin-bottom;
+  }
+}
+
+// Lists - unstyled (for navigation, etc.)
+ul.unstyled, ol.unstyled {
+  list-style: none;
+  padding-inline-start: 0; // RTL: flips to right
+
+  li {
+    margin-bottom: 0;
+  }
+}
+
+// Definition lists
+dl {
+  margin: $list-margin-top 0 $list-margin-bottom 0;
+  padding: 0;
+}
+
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+// Blockquote
+blockquote {
+  margin: $blockquote-margin-top 0 $blockquote-margin-bottom 0;
+  padding-inline-start: $blockquote-padding-left; // RTL: flips to right
+}
+
+// Pre/Code blocks
+pre {
+  overflow-x: auto;
+}
+
+// Horizontal rule
+hr {
+  margin: $hr-margin-top 0 $hr-margin-bottom 0;
+}
+
+// Figure
+figure {
+  margin: $figure-margin-top 0 $figure-margin-bottom 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--base-font-family);
+  font-size: 1.6rem; // 16px default text (with 10px rem base)
+  color: var(--pc-text-color-1);
+  background-color: var(--pc-page-bg);
+  line-height: $line-height-base;
+}
+
+// Ensure form elements and labels inherit theme font and size instead of browser defaults
+button,
+input,
+select,
+textarea,
+label {
+  font-family: inherit;
+  font-size: inherit;
+}

package/src/scss/scrollbars.scss

@@ -1,48 +1,48 @@
-// @keenmate/pure-css — global scrollbar styling
-// ============================================================================
-// Themed, consistent scrollbars across browsers (WebKit `::-webkit-scrollbar`
-// pseudo-elements + the Firefox `scrollbar-width` / `scrollbar-color`
-// properties). Global `*` chrome — part of the foundation's "consistent
-// appearance" promise, so a standalone pure-css page gets the same thin themed
-// scrollbars as a full pure-admin app rather than native browser ones.
-//
-// Colours come from the emitted `--pc-*` cascade, so scrollbars re-theme at
-// runtime with everything else.
-// ============================================================================
-
-@use 'variables/index' as *;
-
-/* Webkit browsers (Chrome, Safari, Edge) */
-*::-webkit-scrollbar {
-  width: $scrollbar-width;
-  height: $scrollbar-width;
-}
-
-*::-webkit-scrollbar-track {
-  background: var(--pc-page-bg);
-  border-radius: var(--pc-border-radius-sm);
-}
-
-*::-webkit-scrollbar-thumb {
-  background: var(--pc-border-color);
-  border-radius: var(--pc-border-radius-sm);
-  border: $border-width-base solid var(--pc-page-bg);
-
-  &:hover {
-    background: var(--pc-accent);
-  }
-
-  &:active {
-    background: var(--pc-accent-hover);
-  }
-}
-
-*::-webkit-scrollbar-corner {
-  background: var(--pc-page-bg);
-}
-
-/* Firefox */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--pc-border-color) var(--pc-page-bg);
-}
+// @keenmate/pure-css — global scrollbar styling
+// ============================================================================
+// Themed, consistent scrollbars across browsers (WebKit `::-webkit-scrollbar`
+// pseudo-elements + the Firefox `scrollbar-width` / `scrollbar-color`
+// properties). Global `*` chrome — part of the foundation's "consistent
+// appearance" promise, so a standalone pure-css page gets the same thin themed
+// scrollbars as a full pure-admin app rather than native browser ones.
+//
+// Colours come from the emitted `--pc-*` cascade, so scrollbars re-theme at
+// runtime with everything else.
+// ============================================================================
+
+@use 'variables/index' as *;
+
+/* Webkit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+  width: $scrollbar-width;
+  height: $scrollbar-width;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--pc-page-bg);
+  border-radius: var(--pc-border-radius-sm);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--pc-border-color);
+  border-radius: var(--pc-border-radius-sm);
+  border: $border-width-base solid var(--pc-page-bg);
+
+  &:hover {
+    background: var(--pc-accent);
+  }
+
+  &:active {
+    background: var(--pc-accent-hover);
+  }
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--pc-page-bg);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--pc-border-color) var(--pc-page-bg);
+}