@kubex/zinc 1.1.102 → 1.1.103

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.scss

@@ -14,7 +14,12 @@
   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));

package/src/components/remarkd-editor/actions.ts

@@ -79,7 +79,6 @@ export const EDITOR_ACTIONS: EditorAction[] = [
   {key: 'literal-block', label: 'Literal', icon: 'file-code@lu', group: 'blocks', prefix: '....\n\n....', caretOffset: 5},
   {key: 'listing-block', label: 'Listing', icon: 'terminal@lu', group: 'blocks', prefix: '----\n\n----', caretOffset: 5},
   {key: 'generic-container', label: 'Container', icon: 'box@lu', group: 'blocks', prefix: '!!!!\n\n!!!!', caretOffset: 5},
-  {key: 'comments', label: 'Comment', icon: 'message-square-dashed@lu', group: 'blocks', prefix: '////\n\n////', caretOffset: 5},
   {key: 'hardbreaks', label: 'Hard breaks', icon: 'wrap-text@lu', group: 'blocks', prefix: '[%hardbreaks]\n', keywords: ['line breaks']},
 
   // Structured
@@ -89,7 +88,6 @@ export const EDITOR_ACTIONS: EditorAction[] = [
 
   // Media
   {key: 'asciidoc-image', label: 'Image', icon: 'image@lu', group: 'media', opens: 'image'},
-  {key: 'image-alignment', label: 'Aligned image', icon: 'image-plus@lu', group: 'media', prefix: '[.align-center]\nimage::file.png[Alt,640,480]', caretOffset: 23},
   {key: 'video', label: 'Video', icon: 'video@lu', group: 'media', prefix: '{{video:ID source=youtube}}', caretOffset: 8},
   {key: 'include', label: 'Include', icon: 'blocks@lu', group: 'media', opens: 'include'},
   // The path placeholder is load-bearing: `t::partial::` with an empty path makes parse() throw.
@@ -99,7 +97,6 @@ export const EDITOR_ACTIONS: EditorAction[] = [
   // Objects
   {key: 'button-object', label: 'Button', icon: 'mouse-pointer-click@lu', group: 'objects', prefix: '{{button:action text="Label" href=/}}', caretOffset: 9},
   {key: 'object-macros', label: 'Link object', icon: 'external-link@lu', group: 'objects', prefix: '{{link:https:// text=Label}}', caretOffset: 7},
-  {key: 'anchor', label: 'Anchor', icon: 'anchor@lu', group: 'objects', prefix: '{{anchor name=top}}', caretOffset: 14},
   {key: 'meter', label: 'Meter', icon: 'gauge@lu', group: 'objects', prefix: '{{meter id=progress min=0 max=10 value=5}}', caretOffset: 11},
   {key: 'object-attributes', label: 'Break object', icon: 'separator-horizontal@lu', group: 'objects', prefix: '{{br}}'},
 
@@ -124,7 +121,6 @@ export const EDITOR_ACTIONS: EditorAction[] = [
   {key: 'inline-code', label: 'Code', icon: 'square-code@lu', group: 'inline', inline: {before: '`', placeholder: 'code'}},
   {key: 'underline', label: 'Underline', icon: 'underline@lu', group: 'inline', inline: {before: '___', placeholder: 'text'}},
   {key: 'strike', label: 'Strikethrough', icon: 'strikethrough@lu', group: 'inline', keywords: ['delete'], inline: {before: '~~', placeholder: 'text'}},
-  {key: 'highlight', label: 'Highlight', icon: 'highlighter@lu', group: 'inline', keywords: ['mark'], inline: {before: '#', placeholder: 'text'}},
   {key: 'subscript', label: 'Subscript', icon: 'subscript@lu', group: 'inline', inline: {before: '~', placeholder: '2'}},
   {key: 'superscript', label: 'Superscript', icon: 'superscript@lu', group: 'inline', inline: {before: '^', placeholder: '2'}},
   {key: 'keyboard', label: 'Keyboard', icon: 'keyboard@lu', group: 'inline', keywords: ['kbd', 'shortcut'], inline: {before: 'kbd:[', after: ']', placeholder: 'Ctrl+C'}},

package/src/components/remarkd-editor/remarkd-editor.test.ts

@@ -24,11 +24,10 @@ describe('<zn-remarkd-editor>', () => {
     //   attributes-title → `.Intro` alone is empty; a title decorates the block below it
     //   reference-list   → `{{reflist}}` is empty until something references it
     //   asciidoc-section → `== ` alone is empty; the section needs a body the author types
-    //   comments         → `////` blocks are meant to render nothing, that is the feature
     //   hardbreaks       → `[%hardbreaks]` alone is an attribute line; it needs the paragraph
     //                       below it (real fixture: attribute line directly followed by body,
     //                       no blank line) that the helper's `\n\n` placeholder trick can't reach
-    const rendersEmpty = ['attributes-title', 'reference-list', 'asciidoc-section', 'comments', 'hardbreaks'];
+    const rendersEmpty = ['attributes-title', 'reference-list', 'asciidoc-section', 'hardbreaks'];
     // Logic actions all render through the editor's own chrome (a variable chip or a
     // conditional wrapper) rather than the parser — listed explicitly, not by group, so a
     // future logic action with no chrome of its own falls through and fails this guard.
@@ -109,8 +108,11 @@ describe('<zn-remarkd-editor>', () => {
     // not in the Go renderer the user's app ships in production, tested by the user directly.
     // `id-block` is additionally broken in remarkd itself (its own fixture enshrines the leak).
     const unsupportedByProductionRenderer = ['id-block', 'table', 'pros-cons', 'accordion'];
+    // Dropped by request: `image-alignment` duplicates the image block's own alignment control,
+    // and comments/highlight are not wanted in the authoring surface.
+    const withdrawn = ['image-alignment', 'comments', 'highlight'];
     const covered = new Set(EDITOR_ACTIONS.map(a => a.key));
-    const excluded = [...notActions, ...unsupportedByProductionRenderer];
+    const excluded = [...notActions, ...unsupportedByProductionRenderer, ...withdrawn];
     const missing = FEATURE_KEYS.filter(f => !excluded.includes(f) && !covered.has(f));
     expect(missing, `features with no action: ${missing.join(', ')}`).to.be.empty;
   });

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

@@ -14,6 +14,7 @@ import ZnOption from '../option';
 import ZnSelect from '../select';
 import type {ZincFormControl} from '../../internal/zinc-element';
 
+import formControlStyles from '../../form-control.scss';
 import styles from './schedule-builder.scss';
 
 /** The seven weekday keys used throughout the schedule. */
@@ -533,7 +534,7 @@ type SlotState = 'closed' | 'open' | 'reduced';
  * @cssproperty --reduced-color - The fill used for hours an exception removes.
  */
 export default class ZnScheduleBuilder extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
 
   static formAssociated = true;
 

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

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

package/src/components/select/select.component.ts

@@ -21,6 +21,7 @@ import type {CSSResultGroup, PropertyValues, TemplateResult} from 'lit';
 import type {ZincFormControl} from '../../internal/zinc-element';
 import type {ZnRemoveEvent} from "../../events/zn-remove";
 
+import formControlStyles from '../../form-control.scss';
 import styles from './select.scss';
 
 /**
@@ -77,7 +78,7 @@ import styles from './select.scss';
  * @csspart expand-icon - The container that wraps the expand icon.
  */
 export default class ZnSelect extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
   static dependencies = {
     'zn-icon': ZnIcon,
     'zn-opt-group': ZnOptGroup,

package/src/components/select/select.scss

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

package/src/components/tabs/tabs.component.ts

@@ -17,6 +17,8 @@ import {property} from 'lit/decorators.js';
 import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
 
+// Tabs 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 './tabs.scss';
 
 // Every element that manages its own tabs (ZnTabs and its subclasses). Tab
@@ -42,7 +44,7 @@ const tabContainerSelector = 'zn-tabs, zn-page, zn-page-nav';
  * @cssproperty --example - An example CSS custom property.
  */
 export default class ZnTabs extends ZincElement {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(bootStyles), unsafeCSS(styles)];
   @property({attribute: 'master-id', reflect: true}) masterId: string;
   @property({attribute: 'default-uri', reflect: true}) defaultUri = '';
   @property({attribute: 'active', reflect: true}) _current = '';

package/src/components/tabs/tabs.scss

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

package/src/components/textarea/textarea.component.ts

@@ -14,6 +14,7 @@ import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
 import ZnSlashItem from "../slash-item";
 import ZnSlashMenu from "../slash-menu";
 
+import formControlStyles from '../../form-control.scss';
 import styles from './textarea.scss';
 
 /**
@@ -52,7 +53,7 @@ import styles from './textarea.scss';
  * @csspart slash-menu - The slash menu shown at the caret.
  */
 export default class ZnTextarea extends ZincElement implements ZincFormControl {
-  static styles: CSSResultGroup = unsafeCSS(styles);
+  static styles: CSSResultGroup = [unsafeCSS(formControlStyles), unsafeCSS(styles)];
   static dependencies = {
     'zn-slash-item': ZnSlashItem,
     'zn-slash-menu': ZnSlashMenu

package/src/components/textarea/textarea.scss

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