@kubex/zinc 1.1.101 → 1.1.103

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;

package/src/components/datepicker/datepicker.component.ts

@@ -14,6 +14,7 @@ import ZnTooltip from "../tooltip";
 import type {ZincFormControl} from '../../internal/zinc-element';
 
 import airDatepickerStyles from '../../../scss/air-datapicker.scss';
+import formControlStyles from '../../form-control.scss';
 import styles from './datepicker.scss';
 
 /**
@@ -54,7 +55,7 @@ import styles from './datepicker.scss';
  * @cssproperty --zn-input-* - Inherited input component CSS custom properties.
  */
 export default class ZnDatepicker extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
 
   static dependencies = {
     'zn-icon': ZnIcon,

package/src/components/datepicker/datepicker.scss

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

package/src/components/editor/modules/toolbar/toolbar.component.ts

@@ -9,10 +9,12 @@ import ZnMenu from "../../../menu";
 import ZnMenuItem from "../../../menu-item";
 import type {EditorFeatureConfig} from "../../editor.component";
 
+// Air Picker only positions correctly with the global sheet present inside this shadow root.
+import bootStyles from '../../../../../scss/boot.scss';
 import styles from './toolbar.scss';
 
 export default class ToolbarComponent extends ZincElement {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(bootStyles), unsafeCSS(styles)];
 
   @property({type: Number})
   public containerWidth: number;

package/src/components/editor/modules/toolbar/toolbar.scss

@@ -1,4 +1,3 @@
-@use "../../../../../scss/boot"; // Need to include the global styles again for Air Picker to work properly
 
 .toolbar {
   display: flex;

package/src/components/file/file.component.ts

@@ -14,6 +14,7 @@ import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
 import ZnDialog from "../dialog";
 import type ZnButton from "../button";
 
+import formControlStyles from '../../form-control.scss';
 import styles from './file.scss';
 
 /**
@@ -69,7 +70,7 @@ import styles from './file.scss';
  * when a file is dropped
  */
 export default class ZnFile extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
   static dependencies = {
     'zn-dialog': ZnDialog
   };

package/src/components/file/file.scss

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

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

@@ -4,6 +4,7 @@ import { HasSlotController } from "../../internal/slot";
 import { property } from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
+import formControlStyles from '../../form-control.scss';
 import styles from './form-group.scss';
 
 /**
@@ -17,7 +18,7 @@ import styles from './form-group.scss';
  *
  */
 export default class ZnFormGroup extends ZincElement {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
 
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label', 'chip');
 

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

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

package/src/components/icon-picker/icon-picker.component.ts

@@ -12,10 +12,11 @@ import ZnOption from '../option';
 import ZnSelect from '../select';
 import type {ZincFormControl} from '../../internal/zinc-element';
 
+import formControlStyles from '../../form-control.scss';
 import styles from './icon-picker.scss';
 
 export default class ZnIconPicker extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
   static dependencies = {
     'zn-icon': ZnIcon,
     'zn-button': ZnButton,
@@ -29,7 +30,11 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
     assumeInteractionOn: ['zn-change'],
     // With allow-upload, a chosen file is submitted under `name` in place of
     // the icon string — the two are mutually exclusive.
-    value: (el: ZnIconPicker) => el._file ?? el.icon
+    value: (el: ZnIconPicker) => el._file ?? el.icon,
+    setValue: (el: ZnIconPicker, value: string) => {
+      el.clearFile();
+      el.icon = value ?? '';
+    }
   });
 
   @property() name = '';
@@ -49,7 +54,7 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
   @property() accept = 'image/*';
   @property({reflect: true}) form: string;
 
-  @defaultValue() defaultValue = '';
+  @defaultValue('icon') defaultValue = '';
 
   @state() private _dialogOpen = false;
   @state() private _searchQuery = '';

package/src/components/icon-picker/icon-picker.scss

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

package/src/components/inline-edit/inline-edit.component.ts

@@ -13,6 +13,7 @@ import ZnSelect from "../select";
 import type { ZincFormControl } from '../../internal/zinc-element';
 import type ZnInput from "../input";
 
+import formElementStyles from '../../../scss/shared/_form-elements.scss';
 import styles from './inline-edit.scss';
 
 /**
@@ -34,7 +35,7 @@ import styles from './inline-edit.scss';
  * @cssproperty --example - An example CSS custom property.
  */
 export default class ZnInlineEdit extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formElementStyles), unsafeCSS(styles)];
 
   private readonly formControlController = new FormControlController(this, {
     defaultValue: (control: ZnInlineEdit) => control.defaultValue,

package/src/components/inline-edit/inline-edit.scss

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

package/src/components/input/input.component.ts

@@ -17,6 +17,7 @@ import ZnSlashMenu from "../slash-menu";
 import ZnTooltip from "../tooltip";
 import type {ZincFormControl} from '../../internal/zinc-element';
 
+import formControlStyles from '../../form-control.scss';
 import styles from './input.scss';
 
 /**
@@ -75,7 +76,7 @@ import styles from './input.scss';
  * @cssproperty --zn-range-thumb-ring-width - The width of the ring drawn around a range input's thumb.
  */
 export default class ZnInput extends ZincElement implements ZincFormControl {
-  static styles = unsafeCSS(styles);
+  static styles = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
   static dependencies = {
     'zn-icon': ZnIcon,
     'zn-slash-item': ZnSlashItem,

package/src/components/input/input.scss

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

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

@@ -4,6 +4,7 @@ import {HasSlotController} from '../../internal/slot';
 import {property, query} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
+import formControlStyles from '../../form-control.scss';
 import styles from './input-group.scss';
 
 /**
@@ -21,7 +22,7 @@ import styles from './input-group.scss';
  * @csspart form-control-input - The input group container.
  */
 export default class ZnInputGroup extends ZincElement {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
 
   private readonly hasSlotController = new HasSlotController(this, 'label');
 

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

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

package/src/components/menu/menu.component.ts

@@ -8,8 +8,8 @@ import ZnIcon from "../icon";
 import ZnMenuItem from "../menu-item";
 import ZnTooltip from "../tooltip";
 
-import styles from './menu.scss';
 import { classMap } from "lit/directives/class-map.js";
+import styles from './menu.scss';
 
 interface NavItem {
   title: string;
@@ -44,6 +44,8 @@ interface NavItem {
  * @csspart base - The component's base wrapper.
  *
  * @cssproperty --example - An example CSS custom property.
+ * @cssproperty --zn-menu-max-height - Caps the menu's height and makes it scroll internally.
+ *  Unset (`none`) by default, so the menu grows to fit its items unless a consumer sets this.
  */
 export default class ZnMenu extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -101,6 +103,7 @@ export default class ZnMenu extends ZincElement {
   render() {
     return html`
       <div
+        part="base"
         class="${classMap({
           'menu': true,
           'menu--shell': this.variant === 'shell',

package/src/components/menu/menu.scss

@@ -8,10 +8,18 @@
   border-radius: var(--zn-border-radius);
   width: fit-content;
   min-width: var(--zn-size-spanel);
+  // Unconstrained by default — a consumer that needs the menu to scroll inside a bounded
+  // popup (rather than growing to fit all its items) sets this custom property.
+  max-height: var(--zn-menu-max-height, none);
   overflow: auto;
   overscroll-behavior: none;
   box-shadow: 0 4px 8px -4px rgba(33, 33, 33, 0.1);
-  background-color: rgb(var(--zn-panel));
+  // Same surface as the shell-header menus below, so every dropdown in the
+  // product reads as one material rather than splitting into --zn-panel menus
+  // and --zn-color-navigation ones depending on where it was mounted.
+  // (No backdrop-filter here: at 0.95 the blur is not worth the GPU cost on
+  // every dropdown, and .menu--shell keeps it for the chrome look.)
+  background-color: rgba(var(--zn-color-navigation, 255, 255, 255), 0.95);
 }
 
 // Dropdown vs shell hover/row styling lives on zn-menu-item, keyed by the

package/src/components/page/page.scss

@@ -12,7 +12,11 @@
   // A theme sets it to an image and its tile size; unset it costs nothing.
   --zn-page-texture: none;
   --zn-page-texture-size: auto;
-  --zn-page-content-background: var(--zn-body);
+  // The page canvas. Defaults to the body so the page is flush with the shell,
+  // but a theme can lift it clear by setting --zn-page-canvas on its root (it
+  // inherits across this shadow boundary). The indirection is needed because
+  // this :host declaration would otherwise beat any inherited value.
+  --zn-page-content-background: var(--zn-page-canvas, var(--zn-body));
   --zn-page-header-background: var(--zn-page-surface-background, var(--zn-page-background, var(--zn-body)));
   // A modal shell overlays its own close button at --zn-base-gap from the page edge;
   // these describe it so the header can keep clear of it.
@@ -62,11 +66,19 @@
   }
 }
 
-// Aura theme — the page header carries a soft violet/teal aurora gradient
-// instead of the flat body-coloured surface.
+// Aura theme — the page header carries an aurora gradient instead of the flat
+// body-coloured surface. The gradient itself is a token so each mode can own its
+// own (pale violet/teal in light, deep violet/blue in dark) without a second
+// selector here; it is set on the theme root in zinc's scss/_root.scss and
+// inherits across this shadow boundary. Deliberately NOT called
+// --zn-page-header-background: that name is already taken above, by an RGB
+// triplet read as rgba(var(--zn-page-header-background), 95%).
+//
+// The var() fallback is the light gradient, so a consumer on a stale zn.min.css
+// (no token) still gets the original aura header rather than a bare surface.
 :host-context([t="aura"]) .page__header,
 :host-context(.theme-aura) .page__header {
-  background: 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%);
+  background: var(--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%));
 
 
   // Held still deliberately. This gradient used to drift via
@@ -111,7 +123,9 @@
     // aurora wave (it no longer darkens what it sits on); restore the blend mode
     // if the look regresses, but expect the GPU cost back with it.
     //mix-blend-mode: color-burn;
-    opacity: 0.04;
+    // The wave artwork is a mid violet (#8b7fd4): on the pale light gradient it
+    // darkens, on the deep dark one it lifts, so each mode needs its own weight.
+    opacity: var(--zn-page-header-wave-opacity, 0.04);
     pointer-events: none;
   }
 

package/src/components/priority-list/priority-list.component.ts

@@ -11,6 +11,7 @@ import ZincElement from '../../internal/zinc-element';
 import ZnIcon from '../icon';
 import type {ZincFormControl} from '../../internal/zinc-element';
 
+import formControlStyles from '../../form-control.scss';
 import styles from './priority-list.scss';
 
 export interface PriorityItem {
@@ -60,7 +61,7 @@ export default class ZnPriorityList extends ZincElement implements ZincFormContr
     'zn-icon': ZnIcon,
   };
 
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
 
   protected readonly formControlController = new FormControlController(this, {
     value: (control: ZnPriorityList) => {

package/src/components/priority-list/priority-list.scss

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

package/src/components/query-builder/query-builder.component.ts

@@ -12,6 +12,7 @@ import type {ZincFormControl} from '../../internal/zinc-element';
 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 './query-builder.scss';
 import type ZnDatepicker from "../datepicker";
 
@@ -138,7 +139,7 @@ export interface CreatedRule {
  * @cssproperty --example - An example CSS custom property.
  */
 export default class ZnQueryBuilder extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formElementStyles), unsafeCSS(styles)];
   static dependencies = {
     'zn-button': ZnButton,
     'zn-input': ZnInput,

package/src/components/query-builder/query-builder.scss

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

package/src/components/radio/radio.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 './radio.scss';
 
 /**
@@ -55,7 +57,7 @@ import styles from './radio.scss';
  * @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.
  */
 export default class ZnRadio 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/radio/radio.scss

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

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

@@ -13,6 +13,7 @@ import ZincElement from '../../internal/zinc-element';
 import type {ZincFormControl} from '../../internal/zinc-element';
 import type ZnRadio from "../radio";
 
+import formControlStyles from '../../form-control.scss';
 import styles from './radio-group.scss';
 
 /**
@@ -33,7 +34,7 @@ import styles from './radio-group.scss';
  * @cssproperty --zn-radio-group-column-width - Minimum column width used by the horizontal contained grid, or the card basis when `wrap` is set.
  */
 export default class ZnRadioGroup 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/radio-group/radio-group.scss

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

package/src/components/rating/rating.component.ts

@@ -9,6 +9,7 @@ import ZincElement from '../../internal/zinc-element';
 
 import type {ZincFormControl} from '../../internal/zinc-element';
 
+import formControlStyles from '../../form-control.scss';
 import styles from './rating.scss';
 
 /**
@@ -35,7 +36,7 @@ import styles from './rating.scss';
  * @cssproperty --preview-size - The font size of the preview value.
  */
 export default class ZnRating extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
 
   private readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['zn-blur', 'zn-input']

package/src/components/rating/rating.scss

@@ -1,5 +1,4 @@
 @use "../../wc";
-@use "../../form-control";
 
 :host {
   --symbol-color: rgb(var(--zn-border-color));