@akcelik/strct 6.0.1 → 6.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
   "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
   "license": "MIT",

package/styles/_base.scss

@@ -197,8 +197,14 @@ kbd,
    it, an instruction a pointer user never needs. In flow and 1x1, so it never
    extends a page's scrollable area the way an out-of-flow box can. The
    library had this inlined in five components. */
+/* Read, never seen — and never in the layout. It was an inline-block 1x1
+   box, which is still a box: in a flex or grid container it took a slot and
+   moved what was beside it (a hidden heading shifted the landing page's
+   cards; the datagrid's announcer had to carry its own copy of this rule for
+   the same reason). Out of flow it costs the layout nothing, and the clip
+   keeps it unseen. */
 .strct-sr-only {
-  display: inline-block;
+  position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;

package/types/akcelik-strct.d.ts

@@ -667,7 +667,12 @@ export declare class StrctHeaderAction {
     };
   }, {}, never, never, true, never>;
 }
-/** Top application bar. Holds brand on the left and actions on the right. */
+/**
+ * Top application bar. Holds brand on the left and actions on the right.
+ *
+ * It is the page's `banner` landmark, so the brand and header actions are
+ * inside a landmark a screen reader can jump to. Use one per page.
+ */
 export declare class StrctHeader {
   /** Accessible label of the mobile drawer toggle. */
   readonly drawerToggleAriaLabel: import("@angular/core").InputSignal<string>;
@@ -722,7 +727,10 @@ export declare class StrctHeader {
     };
   }, {}, ["actions"], ["*"], true, never>;
 }
-/** Bottom status bar. */
+/**
+ * Bottom status bar. It is the page's `contentinfo` landmark, so its text is
+ * inside a landmark a screen reader can jump to. Use one per page.
+ */
 export declare class StrctFooter {
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctFooter, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctFooter, "strct-footer", never, {}, {}, never, ["*"], true, never>;
@@ -4169,8 +4177,18 @@ export declare class StrctSearchbox implements ControlValueAccessor {
   readonly trigger: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Show the × clear button when there is a value. */
   readonly clearable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Accessible label; falls back to `placeholder`. */
+  /**
+   * Accessible label; falls back to `placeholder`.
+   *
+   * In trigger mode the button's name always starts with what it shows — the
+   * label, then the hint chip — and this is added after them as the spoken
+   * form ("Search ⌘K, Ctrl or Cmd K"). An ariaLabel that already starts with
+   * the label is taken as the full name. WCAG 2.5.3 (label in name): a voice
+   * user says the words they see, so those words must be in the name.
+   */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /** The trigger button's name: the visible text first, then the extra words. */
+  protected readonly triggerName: import("@angular/core").Signal<string>;
   /** Accessible label of the clear button (localizable). */
   readonly clearLabel: import("@angular/core").InputSignal<string>;
   /** Current text (two-way; also drives the CVA value). */
@@ -4256,7 +4274,11 @@ export declare class StrctCopy {
   readonly text: import("@angular/core").InputSignal<string>;
   /** Optional visible label next to the icon (icon-only by default). */
   readonly label: import("@angular/core").InputSignal<string>;
-  /** Accessible label; falls back to `copyLabel`. */
+  /**
+   * Accessible label; falls back to the visible `label`, then `copyLabel`.
+   * With a visible label, keep it in the name (WCAG 2.5.3, label in name): a
+   * button that shows "Copy UUID" but is named "Copy" cannot be voice-clicked.
+   */
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   /** Localizable strings. */
   readonly copyLabel: import("@angular/core").InputSignal<string>;
@@ -5381,6 +5403,23 @@ export declare class StrctRating implements ControlValueAccessor {
 export declare class StrctChips implements ControlValueAccessor {
   /** Placeholder text when empty. */
   readonly placeholder: import("@angular/core").InputSignal<string>;
+  /**
+   * Accessible name of the text field. Outside a `strct-field` it falls back
+   * to `placeholder`; inside one, the field's `<label for>` names it and the
+   * placeholder stays a placeholder.
+   */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * Inside a `strct-field`, whose `<label for>` names the text field.
+   *
+   * Asked through DI rather than with `closest('strct-field')`: projected
+   * content is not under the field in the DOM yet when this class is built,
+   * so the DOM answered no while the template said yes — and the fallback
+   * below then overrode the field's visible label with the placeholder's
+   * wording (WCAG 2.5.3). The element injector follows the template the
+   * consumer wrote, so it answers correctly even in a view inserted later.
+   */
+  protected readonly inField: boolean;
   /** Allow duplicate tags. */
   readonly allowDuplicates: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly value: import("@angular/core").WritableSignal<string[]>;
@@ -5403,6 +5442,11 @@ export declare class StrctChips implements ControlValueAccessor {
       "required": false;
       "isSignal": true;
     };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "allowDuplicates": {
       "alias": "allowDuplicates";
       "required": false;
@@ -6538,7 +6582,10 @@ export type SortDir = 'asc' | 'desc';
 /** Every user-visible / assistive string in the grid, overridable for i18n. */
 export interface StrctDatagridLabels {
   row: string;
+  /** Name of the scrolling rows region (prefixed with `caption`, if any). */
   rows: string;
+  /** Name of the pager's navigation landmark (prefixed with `caption`, if any). */
+  pagination: string;
   selected: string;
   selectAll: string;
   /** Base row-checkbox label; superseded by {@link selectRowFor}, which
@@ -6928,7 +6975,12 @@ export declare class StrctDatagrid {
    */
   /** No outer border, radius or shadow — for a grid inside a bordered panel. */
   readonly flush: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** The grid's title, rendered above the header and used as its accessible name. */
+  /**
+   * The grid's title, rendered above the header and used as its accessible
+   * name. It also names the grid's landmarks — "<caption> rows" and
+   * "<caption> pagination" — so several grids on one page are told apart in a
+   * screen reader's landmark list.
+   */
   readonly caption: import("@angular/core").InputSignal<string>;
   /** The user asked for the next slice. */
   readonly loadMore: import("@angular/core").OutputEmitterRef<void>;
@@ -6958,6 +7010,7 @@ export declare class StrctDatagrid {
   protected readonly L: import("@angular/core").Signal<{
     row: string;
     rows: string;
+    pagination: string;
     selected: string;
     selectAll: string;
     selectRow: string;
@@ -6997,6 +7050,8 @@ export declare class StrctDatagrid {
     pageOf: (page: number, pages: number) => string;
     rowsMatch: (shown: number, total: number) => string;
   }>;
+  /** A landmark's name, prefixed with the caption when the grid has one. */
+  protected regionName(base: string): string;
   /**
    * Show a pencil on an editable cell when it is hovered or focused. A mouse
    * user finds an editable cell by double-clicking one; nothing said so.
@@ -7839,12 +7894,24 @@ export declare class StrctStack {
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctStack, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<StrctStack, "strct-stack", never, {}, {}, never, ["*"], true, never>;
 }
-/** A label + value row. The value is projected content. */
+/**
+ * A label + value row. The value is projected content.
+ *
+ * Use **`<div strctStackItem>`** inside `strct-stack`: `<dl>` allows only
+ * `dt` / `dd` pairs or `<div>` wrappers as children, so a custom element
+ * between the list and its `dt` / `dd` breaks the content model (axe
+ * `definition-list` / `dlitem`, both serious) — the BUG-49-05 fix
+ * `strct-desc` got in 5.0.1. The element form still renders identically.
+ *
+ *   <strct-stack>
+ *     <div strctStackItem label="Cluster">Prod-B</div>
+ *   </strct-stack>
+ */
 export declare class StrctStackItem {
   /** Label text. */
   readonly label: import("@angular/core").InputSignal<string>;
   static ɵfac: i0.ɵɵFactoryDeclaration<StrctStackItem, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<StrctStackItem, "strct-stack-item", never, {
+  static ɵcmp: i0.ɵɵComponentDeclaration<StrctStackItem, "strct-stack-item, div[strctStackItem]", never, {
     "label": {
       "alias": "label";
       "required": true;
@@ -9933,6 +10000,15 @@ export declare class StrctSplitter {
   readonly vertical: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Accessible name of the separator (localizable). */
   readonly gutterLabel: import("@angular/core").InputSignal<string>;
+  /**
+   * What the separator announces while the pane is collapsed (localizable).
+   * A `separator` may not carry `aria-expanded` (axe `aria-allowed-attr`,
+   * critical), so the state is its value text, beside a value of 0. For CSS
+   * the gutter carries `data-collapsed`; the collapsed pane keeps its
+   * `.strct-split__pane--collapsed` class, which is what this component
+   * styles by.
+   */
+  readonly collapsedLabel: import("@angular/core").InputSignal<string>;
   /** Keyboard nudge step in percent. */
   readonly step: import("@angular/core").InputSignal<number>;
   /** The effective bounds, in whichever unit the splitter is measured in. */
@@ -10004,6 +10080,11 @@ export declare class StrctSplitter {
       "required": false;
       "isSignal": true;
     };
+    "collapsedLabel": {
+      "alias": "collapsedLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "step": {
       "alias": "step";
       "required": false;
@@ -10040,6 +10121,8 @@ export declare class StrctResizeHandle {
   readonly collapsible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Whether it is collapsed (two-way). */
   readonly collapsed: import("@angular/core").ModelSignal<boolean>;
+  /** What the handle announces while collapsed (localizable). */
+  readonly collapsedLabel: import("@angular/core").InputSignal<string>;
   /**
    * Which side of the handle the sized pane is on. `'before'` (default) grows
    * the pane as the pointer moves toward the inline/block end.
@@ -10096,6 +10179,11 @@ export declare class StrctResizeHandle {
       "required": false;
       "isSignal": true;
     };
+    "collapsedLabel": {
+      "alias": "collapsedLabel";
+      "required": false;
+      "isSignal": true;
+    };
     "side": {
       "alias": "side";
       "required": false;
@@ -10744,6 +10832,8 @@ export declare class StrctReorderItem {
   protected readonly list: StrctReorder;
   private readonly el;
   private readonly hadOwnTabindex;
+  /** Whether the element's role takes aria-posinset / aria-setsize. */
+  protected readonly inSet: boolean;
   protected hostTabindex(): number | null;
   /** The keys that apply: the sideways pair only when there is somewhere to go. */
   protected shortcuts(): string;