@kubex/zinc 1.1.102 → 1.1.103

package/docs/pages/components/remarkd-editor.md

@@ -180,7 +180,7 @@ a folded toolbar group is never actually out of reach.
 
 ### Inline Formatting
 
-Inline actions — Strong, Emphasis, Code, Underline, Strikethrough, Highlight, and the
+Inline actions — Strong, Emphasis, Code, Underline, Strikethrough, and the
 rest of the Inline group — apply to the current selection inside the block being edited,
 so they only make sense while a block is open: the toolbar disables them until one is
 (the slash menu lists them regardless, since it can only ever open inside a block in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.102",
+  "version": "1.1.103",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/_root.scss

@@ -2,6 +2,7 @@
 @use "sass:color";
 @use "sass:meta";
 @use "variables";
+@use "themes/modes";
 
 :root {
   --zn-base-px: 8px;
@@ -16,7 +17,7 @@
   --zn-font-family-mono: 'Roboto Mono', monospace;
 }
 
-:root, [t="light"], .theme-light {
+#{modes.$light} {
   --zn-backdrop-color: rgba(0, 0, 0, 0.5);
 
   --zn-color-text: 33, 33, 33;
@@ -39,7 +40,7 @@
   --zn-color-disabled: 181, 181, 181;
 }
 
-[t="dark"], .theme-dark {
+#{modes.$dark} {
   --zn-backdrop-color: rgba(0, 0, 0, 0.85);
 
   --zn-color-text: 215, 215, 215;
@@ -147,7 +148,7 @@
   font-size: var(--zn-font-size-x-large);
 }
 
-:root, [t="light"], .theme-light, [t="dark"], .theme-dark {
+#{modes.$light}, #{modes.$dark} {
   --zn-body: var(--zn-color-body);
 
   --zn-text: var(--zn-color-text);
@@ -160,8 +161,8 @@
   --zn-input-bg: var(--zn-color-body);
 }
 
-[t="light"], .theme-light {
-  // Theme Light
+#{modes.$light} {
+  // Light mode
   --zn-panel-opacity: 1;
   --zn-shadow: 236, 235, 249;
 
@@ -179,8 +180,8 @@
   }
 }
 
-[t="dark"], .theme-dark {
-  // Theme Dark
+#{modes.$dark} {
+  // Dark mode
   --zn-shadow: 10, 10, 10;
   --zn-panel-secondary: 27, 27, 30;
   --zn-panel-opacity: 1;
@@ -328,7 +329,13 @@ ul.square {
 // Only the source colour tokens and the theme-specific leaf tokens are set;
 // derived tokens (--zn-body, --zn-text, --zn-panel ...) reference these via
 // var() and follow automatically.
-[t="aura"], .theme-aura {
+//
+// Aura ships both palettes: this block is the light one, and the
+// `html[t="aura"][m="dark"]` block below re-points every token in it for dark. The
+// two must stay token-for-token in step — a token set here and missed there
+// leaks a light value into dark mode, because this block is mode-agnostic and
+// so applies in both.
+html[t="aura"], body[t="aura"], html.theme-aura, body.theme-aura {
   --zn-backdrop-color: rgba(30, 27, 60, 0.45);
 
   --zn-color-text: 42, 32, 89;
@@ -375,7 +382,113 @@ ul.square {
   --navbar-page-inactive-tab-background: rgba(255, 255, 255, 0.5);
   --navbar-page-inactive-tab-filter: none;
 
+  // Aurora gradient behind the zn-page header, plus the weight of the wave
+  // artwork layered on top of it (components/page/page.scss). Held still — see
+  // the PERF note there before reintroducing any drift.
+  --zn-page-header-aurora: linear-gradient(225deg, rgba(233, 227, 255, 1) 0%, rgba(214, 246, 245, 1) 40%, rgba(233, 227, 255, 1) 100%), linear-gradient(180deg, rgba(129, 153, 217, 0) 0%, rgba(0, 0, 0, 1) 100%);
+  --zn-page-header-wave-opacity: 0.04;
+
   .zn-primary {
     color: rgb(var(--zn-color-primary));
   }
 }
+
+// Aura dark — the same violet identity drawn over the dark primitives, on a
+// deep navy canvas rather than a bespoke hue.
+//
+// The canvas colour is deliberate: `--zn-color-body` is the exact navy the
+// rubix shell chrome paints itself (`--rx-shell-header-bg: 19, 29, 45`, set in
+// the aura-dark block of static/src/scss/shell/_header.scss — deeper than the
+// 40, 55, 80 aura light mode uses), so the top bar, the app navigation and the
+// page body read as one continuous surface with panels lifted above it.
+//
+// Specificity note: the selectors are deliberately `html[…]`/`body[…]` (a type
+// selector plus attributes) rather than `:root[…]`. That keeps the ordering the
+// bare selectors used to have: `html[t="aura"][m="dark"]` (0,2,1) outranks both
+// `:root[m="dark"]` (0,2,0) from `#{modes.$dark}` and the mode-agnostic
+// `html[t="aura"]` (0,1,1), which in turn still loses to `:root[m="dark"]` the
+// way `[t="aura"]` (0,1,0) did. `:root[t="aura"]` would have been (0,2,0) and
+// silently started beating the dark block. This one stays last in the file.
+html[t="aura"][m="dark"], body[t="aura"][m="dark"],
+html.theme-aura.theme-dark, body.theme-aura.theme-dark {
+  --zn-backdrop-color: rgba(8, 12, 24, 0.65);
+
+  --zn-color-text: 226, 228, 242;
+  --zn-color-muted-text: 154, 163, 190;
+
+  --zn-color-base: 30, 41, 61;
+  // Matches --rx-shell-header-bg in the rubix shell (its aura-dark block in
+  // static/src/scss/shell/_header.scss) — change both together.
+  --zn-color-body: 19, 29, 45;
+  --zn-color-navigation: var(--zn-color-base);
+  --zn-color-navigation-hightlight: 35, 47, 70;
+  --zn-color-border: 64, 82, 113;
+  --zn-color-border-active: 92, 111, 145;
+  --zn-color-tab: 33, 45, 66;
+  // A few points of lift reads as an outline rather than a surface, so the
+  // panel steps well clear of the body. #223555 — the top of the ladder:
+  // body 19,29,45 -> page canvas 31,45,70 -> panel 34,53,85.
+  --zn-color-panel: 34, 53, 85;
+
+  --zn-color-primary: 163, 140, 250;
+  --zn-color-info: 96, 148, 232;
+  --zn-color-success: 116, 199, 140;
+  --zn-color-warning: 245, 183, 105;
+  --zn-color-error: 244, 106, 126;
+  --zn-color-disabled: 118, 130, 152;
+
+  // Theme-specific leaf tokens — the mirror of the light block above.
+  --zn-panel-opacity: 1;
+  --zn-shadow: 12, 18, 32;
+  --zn-panel-secondary: 46 61 88;
+  --zn-panel-highlight: 66, 86, 120;
+  // NOT the classic dark 0.1: on a lifted palette a 10% wash leaves hover and
+  // selected rows indistinguishable from the panel they sit on.
+  --zn-panel-highlight-opacity: 1;
+  --zn-input-bg-accent: 34, 46, 68;
+  --zn-bright-bg: 52, 69, 99;
+  --zn-light-text: 168, 176, 201;
+  --zn-dark-text: 226, 228, 242;
+  --zn-purple-text: 178, 158, 252;
+  --zn-accent: 96, 196, 220;
+
+  // #{modes.$dark} hardcodes the base dark theme's own accent here; aura owns
+  // its accent in both modes, so re-point both this and .zn-primary below.
+  //
+  // Deliberately NOT var(--zn-color-primary): aura dark's *interactive* accent is
+  // a cyan, while its identity accent stays violet. --zn-primary is what buttons,
+  // the navbar, tabs, toggles, radios, progress bars, steppers and pagination
+  // read; --zn-color-primary (still violet above) is what inputs, checkboxes,
+  // selects, dialogs and the .zn-primary text utility read.
+  --zn-primary: 126, 238, 255;
+  // A fill this light is unreadable under the default white ink (1.35:1), so the
+  // paired ink drops to the shell navy — 12.6:1 on the cyan. zn-button declares
+  // the pair as --btn-color / --btn-ink for exactly this case.
+  --zn-color-on-primary: 19, 29, 45;
+
+  --base: 0, 0, 0;
+  --inverse-base: 255, 255, 255;
+
+  // Frosted-glass inactive tabs — see the light block for why there is no
+  // backdrop-filter. Inverted against the light block: on the deep aurora an
+  // inactive tab recedes by being *darker* than the gradient, not lighter.
+  --navbar-page-inactive-tab-background: rgba(0, 0, 0, 0.30);
+  --navbar-page-inactive-tab-filter: none;
+
+  // The page canvas sits a step above the navy shell surface, so the page reads
+  // as a sheet laid on the chrome rather than a hole in it (components/page/page.scss).
+  --zn-page-canvas: 31, 45, 70;
+
+  // The dark aurora: the light gradient's violet -> teal -> violet sweep taken
+  // down to full-strength indigo/teal so the page title's light ink reads on it.
+  --zn-page-header-aurora: linear-gradient(225deg, rgb(76 42 202) 0%, rgb(0 100 150) 40%, rgb(56 40 115) 100%), linear-gradient(180deg, rgb(31 50 103 / 0%) 0%, rgb(0, 0, 0) 100%);
+  // The violet wave artwork lifts rather than darkens here, so it can carry
+  // more weight than the 0.04 the pale light gradient tolerates.
+  --zn-page-header-wave-opacity: 0.10;
+
+  .zn-primary {
+    // !important to beat #{modes.$dark}'s own `.zn-primary { ... !important }`,
+    // which ties on specificity.
+    color: rgb(var(--zn-color-primary)) !important;
+  }
+}

package/scss/shared/_base.scss

@@ -1,3 +1,5 @@
+@use "../themes/modes";
+
 /**
 Apply default styles to the document, and shadow documents
  */
@@ -117,10 +119,14 @@ kbd {
   color: rgba(0, 0, 0, 0.5);
 }
 
-[t="dark"] kbd {
-  background-color: rgb(25, 25, 25);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 0 rgba(110, 110, 110, .5) inset;
-  color: #eee;
+// Interpolating a comma list into a descendant selector would not distribute,
+// so the mode selector is nested instead.
+#{modes.$dark} {
+  kbd {
+    background-color: rgb(25, 25, 25);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 0 rgba(110, 110, 110, .5) inset;
+    color: #eee;
+  }
 }
 
 [tab] {

package/scss/shared/_button-mixin.scss

@@ -0,0 +1,29 @@
+@mixin button {
+  // Buttons take their own radius token so a theme can make controls pills
+  // without reshaping panels, inputs and dialogs at the same time.
+  border-radius: var(--zn-button-border-radius, var(--zn-border-radius));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--zn-base-px);// calc(var(--zn-base-px) + var(--zn-button-gutter));
+  margin: auto;
+  width: fit-content;
+  background-color: rgb(var(--zn-primary));
+  color: rgba(var(--zn-color-on-primary, 255, 255, 255), 0.9);
+  font-size: var(--zn-text-button-label-font-size);
+  font-weight: var(--zn-text-button-label-font-weight);
+  line-height: var(--zn-text-button-label-line-height);
+  text-transform: var(--zn-text-button-label-transform);
+  cursor: pointer;
+  vertical-align: middle;
+  border-color: transparent;
+  white-space: nowrap;
+
+  max-height: 36px;
+  height: 36px;
+  min-height: 36px;
+
+  &:hover:not([disabled]) {
+    background-color: rgba(var(--zn-primary), 0.8);
+  }
+}

package/scss/shared/_button.scss

@@ -1,36 +1,6 @@
-@use '../mixins';
-@use '../variables';
-
-@mixin button {
-  // Buttons take their own radius token so a theme can make controls pills
-  // without reshaping panels, inputs and dialogs at the same time.
-  border-radius: var(--zn-button-border-radius, var(--zn-border-radius));
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--zn-base-px);// calc(var(--zn-base-px) + var(--zn-button-gutter));
-  margin: auto;
-  width: fit-content;
-  background-color: rgb(var(--zn-primary));
-  color: rgba(var(--zn-color-on-primary, 255, 255, 255), 0.9);
-  font-size: var(--zn-text-button-label-font-size);
-  font-weight: var(--zn-text-button-label-font-weight);
-  line-height: var(--zn-text-button-label-line-height);
-  text-transform: var(--zn-text-button-label-transform);
-  cursor: pointer;
-  vertical-align: middle;
-  border-color: transparent;
-  white-space: nowrap;
-
-  max-height: 36px;
-  height: 36px;
-  min-height: 36px;
-
-  &:hover:not([disabled]) {
-    background-color: rgba(var(--zn-primary), 0.8);
-  }
-}
+@use 'button-mixin';
+@forward 'button-mixin';
 
 button, .zn-button {
-  @include button;
+  @include button-mixin.button;
 }

package/scss/themes/_aura.scss

@@ -1,9 +1,28 @@
-// Aura — a soft, light-based theme with a pastel violet identity.
-// It inherits the light theme primitives (defined on :root) and only
-// re-points the primary ramp to a softer, more pastel violet so the
-// whole UI takes on the "aura" glow without redefining every token.
-[t="aura"],
-.theme-aura {
+// Aura — a soft violet identity drawn over either mode's primitives.
+//
+// Light inherits the light primitives (defined on :root) and only re-points the
+// primary ramp to a softer, more pastel violet so the whole UI takes on the
+// "aura" glow without redefining every token. Dark does the same over the dark
+// primitives, with the ramp inverted (50 darkest -> 900 lightest) the way
+// themes/_dark.scss inverts every other ramp.
+//
+// The selectors are root-qualified (`html[t="aura"]` / `body[t="aura"]`) and must
+// stay that way. ZincElement reflects `t`/`m` onto EVERY component, so a bare
+// `[t="aura"]` matched each of them individually and re-declared these tokens
+// with literal values, wiping out contextual overrides from an ancestor — that
+// is what painted the rubix aura header's buttons violet instead of white.
+// Worse, a consumer on an older ZincElement reflects `t` but not `m`: the bare
+// light block then matched it, poured light tokens over its whole subtree, and
+// anything in a shadow tree below could not recover (document stylesheets do not
+// match inside shadow roots), which is what painted shell dropdowns white in
+// aura dark. Root-qualified, non-root elements simply inherit.
+//
+// Only *source* tokens (--zn-color-*) and theme-owned leaf tokens belong here.
+// Never set a derived token (--zn-border-color, --zn-text*, --zn-panel,
+// --zn-body, --zn-input-bg) — those are mapped off the source tokens in
+// scss/_root.scss and will not follow if pinned here.
+html[t="aura"], body[t="aura"],
+html.theme-aura, body.theme-aura {
   color-scheme: light;
 
   /**************************************************************
@@ -28,8 +47,68 @@
   --zn-shadow-large: 0 6px 20px rgba(60, 44, 110, 0.14);
   --zn-shadow-x-large: 0 6px 20px rgba(60, 44, 110, 0.22);
 
-  --zn-border-color: 218, 212, 246;
-
   /* Focus ring follows the softer primary */
   --zn-input-focus-ring-color: hsl(255 82% 68% / 40%);
 }
+
+// Aura dark — the same violet identity over the dark primitives.
+//
+// html[t="aura"][m="dark"] (0,2,1) outranks themes/_dark.scss's :root[m="dark"]
+// (0,2,0), but this block should still stay AFTER _dark.scss in themes/_index.scss
+// so the ordering reads the way it resolves. See the specificity note in
+// scss/_root.scss for why these are html/body rather than :root.
+html[t="aura"][m="dark"], body[t="aura"][m="dark"],
+html.theme-aura.theme-dark, body.theme-aura.theme-dark {
+  color-scheme: dark;
+
+  /**************************************************************
+   * Theme Tokens — soft violet primary, inverted for dark
+   *************************************************************/
+
+  --zn-color-primary-50: hsl(257, 45%, 25%);
+  --zn-color-primary-100: hsl(257, 50%, 34%);
+  --zn-color-primary-200: hsl(257, 55%, 41%);
+  --zn-color-primary-300: hsl(257, 62%, 50%);
+  --zn-color-primary-400: hsl(256, 75%, 60%);
+  --zn-color-primary-500: hsl(255, 88%, 68%);
+  --zn-color-primary-600: hsl(253, 95%, 75%);
+  --zn-color-primary-700: hsl(251, 100%, 83%);
+  --zn-color-primary-800: hsl(249, 100%, 90%);
+  --zn-color-primary-900: hsl(250, 100%, 94%);
+
+  /* Elevations read as depth against the navy canvas, not violet haze */
+  --zn-shadow-x-small: 0 1px 4px rgba(6, 10, 20, 0.30);
+  --zn-shadow-small: 0 3px 9px rgba(6, 10, 20, 0.38);
+  --zn-shadow-medium: 0 6px 18px rgba(6, 10, 20, 0.38);
+  --zn-shadow-large: 0 6px 20px rgba(6, 10, 20, 0.42);
+  --zn-shadow-x-large: 0 6px 20px rgba(6, 10, 20, 0.52);
+
+  --zn-input-focus-ring-color: hsl(255 88% 68% / 45%);
+
+  /* _dark.scss's gray-100 is a muddy violet-grey (hsl(262, 12%, 35%)) that reads
+     brown over aura's navy canvas. It is the hover/secondary surface for a wide
+     spread of components — every `--zn-color-neutral-100` consumer aliases it
+     (zn-tile hover, zn-button hover, the markdown/remarkd editors,
+     schedule-builder, the droparea checker) plus zn-alert directly — so
+     re-pointing it here fixes them all at once. */
+  --zn-color-gray-100: hsl(221.6, 41.21%, 27.22%);
+
+  /* The neighbouring steps come along for the ride: _dark.scss aliases
+     --zn-color-neutral-50/-200 onto these, so leaving them on the muddy violet
+     ramp would put that colour back on `color="secondary"` button fills, input
+     surfaces and every panel border. Values chosen to land on aura dark's
+     existing navy tokens — 50 meets --zn-input-bg-accent (34,46,68) and 200
+     meets --zn-color-border (64,82,113). */
+  --zn-color-gray-50: hsl(220, 33%, 20%);
+  --zn-color-gray-200: hsl(220, 28%, 35%);
+
+  /* _dark.scss pins these to near-black literals, which read as holes punched
+     in aura's navy canvas — re-point them to the navy family. */
+  --zn-input-background-color-focus: rgb(35, 47, 70);
+  --zn-input-background-color-disabled: rgb(33, 44, 65);
+
+  --zn-tooltip-background-color: rgb(24, 33, 50);
+
+  /* tables */
+  --zn-table-header-background-color: 46, 61, 88;
+}

package/scss/themes/_dark.scss

@@ -1,5 +1,8 @@
-[t="dark"],
-.theme-dark {
+@use "modes";
+
+// Dark mode primitives — see themes/_modes.scss for the `m` / `t` split, and
+// for why light-only themes are excluded from this selector.
+#{modes.$dark} {
   color-scheme: dark;
 
   /**************************************************************
@@ -245,6 +248,15 @@
   --zn-color-neutral-0: hsl(0, 0%, 0%);
   --zn-color-neutral-1000: hsl(0, 0%, 100%);
 
+  /* Neutral 50 and 200 are the two steps _light.scss pins to literal hsl() values
+     instead of aliasing to --zn-color-gray-*. Every other step aliases the gray
+     ramp and so follows the dark ramp above for free; these two do not, and left
+     undefined here they stay near-white in dark mode (L=0.98 / L=0.94).
+     That is what paints a white pill for `color="secondary"` buttons and a white
+     border on every panel. Alias them so they track the ramp like the rest. */
+  --zn-color-neutral-50: var(--zn-color-gray-50);
+  --zn-color-neutral-200: var(--zn-color-gray-200);
+
   /* Elevations */
   --zn-shadow-x-small: 0 1px 4px rgba(0, 0, 0, 0.18);
   --zn-shadow-small: 0 3px 9px rgba(0, 0, 0, 0.24);

package/scss/themes/_light.scss

@@ -1,6 +1,7 @@
-:root,
-[t="light"],
-.theme-light {
+@use "modes";
+
+// Light mode primitives — see themes/_modes.scss for the `m` / `t` split.
+#{modes.$light} {
   color-scheme: light;
 
   /**************************************************************

package/scss/themes/_modes.scss

@@ -0,0 +1,32 @@
+// Light / dark mode selectors.
+//
+// Theming has two independent dimensions on the root element:
+//   `t` — the theme (base, aura, ...), carrying the identity and palette.
+//   `m` — the mode ('light' | 'dark') that theme is currently drawn in.
+//
+// **The `m` hooks are deliberately scoped with `:root`.** ZincElement reflects
+// both `t` and `m` onto every component, so a *bare* `[m="dark"]` selector
+// matches every zinc element in the tree — not just the document root. Any token
+// block written that way re-declares itself on each component and so wipes out
+// contextual overrides set by an ancestor: e.g. the rubix shell header sets
+// `--zn-text: 255,255,255` for its dark chrome, and every zn-button inside it
+// would reset `--zn-text` back to the theme default and render dark-on-dark.
+// Never write a bare `[m="..."]` (or `[t="..."]`) rule that sets a token.
+//
+// `[t="light"]` / `[t="dark"]` / `.theme-light` / `.theme-dark` are kept as
+// legacy aliases, so a standalone consumer that sets only `t` still resolves to a
+// full palette. They carry the same hazard, which is why light mode is expressed
+// as plain `:root` — light is the default palette, so it needs no `m` hook.
+//
+// A theme that ships a light palette *only* must be excluded from $dark, or
+// `t="<theme>" m="dark"` layers its tokens over the dark primitives and renders
+// a hybrid. Themes are dark-capable by default; add an exclusion here only while
+// a theme has no dark palette, and drop it when it gains one. Every theme
+// currently ships both palettes, so the list is empty:
+//
+//   $light-only: '[t="newtheme"]';
+//   $dark: ':root[m="dark"]:not(#{$light-only}), ...';
+$light-only: null;
+
+$light: ':root, [t="light"], .theme-light';
+$dark: ':root[m="dark"], [t="dark"], .theme-dark';

package/src/components/animated-button/animated-button.component.ts

@@ -4,12 +4,13 @@ import {property, state} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from '../icon/icon.component';
 
+import sharedStyles from '../../../scss/shared/index.scss';
 import styles from './animated-button.scss';
 
 type AnimatedButtonState = 'idle' | 'processing' | 'success' | 'failure';
 
 export default class ZnAnimatedButton extends ZincElement {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(sharedStyles), unsafeCSS(styles)];
 
   static dependencies = {
     'zn-icon': ZnIcon

package/src/components/animated-button/animated-button.scss

@@ -1,4 +1,4 @@
-@use "../../../scss/shared";
+@use "../../../scss/shared/button-mixin" as shared;
 
 :host {
   display: inline-block;

package/src/components/bulk-actions/bulk-actions.component.ts

@@ -11,6 +11,7 @@ import ZnSelect from "../select";
 import type {ZnChangeEvent} from "../../events/zn-change";
 import type {ZnInputEvent} from "../../events/zn-input";
 
+import formElementStyles from '../../../scss/shared/_form-elements.scss';
 import styles from './bulk-actions.scss';
 
 export interface CreatedRule {
@@ -51,7 +52,7 @@ export interface BulkActionItem {
  * @cssproperty --example - An example CSS custom property.
  */
 export default class ZnBulkActions extends ZincElement {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formElementStyles), unsafeCSS(styles)];
   static dependencies = {
     'zn-button': ZnButton,
     'zn-input': ZnInput,

package/src/components/bulk-actions/bulk-actions.scss

@@ -1,5 +1,4 @@
 @use "../../wc";
-@use "../../../scss/shared/form-elements";
 
 :host {
   display: contents;

package/src/components/button/button.component.ts

@@ -14,6 +14,7 @@ import ZnTooltip from "../tooltip";
 import type {IconColor, IconLibrary} from "../icon";
 import type {ZincFormControl} from '../../internal/zinc-element';
 
+import sharedStyles from '../../../scss/shared/index.scss';
 import styles from './button.scss';
 
 /**
@@ -42,7 +43,7 @@ import styles from './button.scss';
  * @csspart spinner - The spinner that shows when the button is in the loading state.
  */
 export default class ZnButton extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(sharedStyles), unsafeCSS(styles)];
   static dependencies = {
     'zn-tooltip': ZnTooltip,
     'zn-icon': ZnIcon
@@ -260,6 +261,10 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
     if (this.type === 'submit') {
       this.formControlController.submit();
     }
+
+    if (this.type === 'reset') {
+      this.formControlController.reset();
+    }
   }
 
   private _isLink() {

package/src/components/button/button.scss

@@ -1,4 +1,4 @@
-@use "../../../scss/shared";
+@use "../../../scss/shared/button-mixin" as shared;
 @use "../../wc";
 
 :host {

package/src/components/chart/chart.component.ts

@@ -106,6 +106,10 @@ export default class ZnChart extends ZincElement {
   }
 
   private getTheme(): 'light' | 'dark' {
+    // `m` is the rendered mode; `t` is the theme family. Fall back to `t` for
+    // hosts that still only set the legacy `t="dark"`.
+    if (this.getAttribute('m') === 'dark') return 'dark';
+    if (this.getAttribute('m') === 'light') return 'light';
     return this.getAttribute('t') === 'dark' ? 'dark' : 'light';
   }
 

package/src/components/checkbox/checkbox.component.ts

@@ -12,6 +12,8 @@ import ZnIcon from "../icon";
 import type {SelectionCardControlPosition, SelectionCardImagePosition} from '../../internal/selection-card';
 import type {ZincFormControl} from '../../internal/zinc-element';
 
+import formControlStyles from '../../form-control.scss';
+import selectionCardStyles from '../../selection-card.scss';
 import styles from './checkbox.scss';
 
 type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent';
@@ -60,7 +62,7 @@ type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'suc
  * @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.
  */
 export default class ZnCheckbox extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(selectionCardStyles), unsafeCSS(styles)];
   static dependencies = {'zn-icon': ZnIcon};
 
   private readonly formControlController = new FormControlController(this, {

package/src/components/checkbox/checkbox.scss

@@ -1,6 +1,4 @@
 @use "../../wc";
-@use "../../form-control";
-@use "../../selection-card";
 
 :host {
   display: block;

package/src/components/checkbox-group/checkbox-group.component.ts

@@ -13,6 +13,7 @@ import ZincElement from '../../internal/zinc-element';
 import type {ZincFormControl} from '../../internal/zinc-element';
 import type ZnCheckbox from "../checkbox";
 
+import formControlStyles from '../../form-control.scss';
 import styles from './checkbox-group.scss';
 
 /**
@@ -38,7 +39,7 @@ import styles from './checkbox-group.scss';
  * @cssproperty --zn-checkbox-group-column-width - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set.
  */
 export default class ZnCheckboxGroup extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
 
   protected readonly formControlController = new FormControlController(this);
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');

package/src/components/checkbox-group/checkbox-group.scss

@@ -1,5 +1,4 @@
 @use "../../wc";
-@use "../../form-control";
 
 :host {
   display: block;

package/src/components/data-table/data-table.component.ts

@@ -29,6 +29,8 @@ import type ZnInput from "../input";
 import type ZnQueryBuilder from "../query-builder";
 import type ZnSelect from "../select";
 
+// Tables load in such a way that the global sheet has to be re-applied inside the shadow root.
+import bootStyles from '../../../scss/boot.scss';
 import styles from './data-table.scss';
 
 const DEFAULT_PAGE = 1;
@@ -187,7 +189,7 @@ type AllowedInputElement =
  * @cssproperty --example - An example CSS custom property.
  */
 export default class ZnDataTable extends ZincElement {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(bootStyles), unsafeCSS(styles)];
   static dependencies = {
     'zn-alert': ZnAlert,
     'zn-button': ZnButton,

package/src/components/data-table/data-table.scss

@@ -1,5 +1,4 @@
 @use "../../wc";
-@use "../../../scss/boot"; // Tables load in such a way we need to include the global styles on them again
 
 :host {
   display: block;