@akcelik/strct 5.16.0 → 5.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "5.16.0",
+  "version": "5.18.0",
   "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

@@ -34,7 +34,7 @@ body {
 }
 *::-webkit-scrollbar-thumb {
   background: var(--sb);
-  border-radius: 6px;
+  border-radius: 3px;
   border: 2px solid transparent;
   background-clip: padding-box;
 }

package/styles/_tokens.scss

@@ -99,10 +99,10 @@
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+  --radius-xl: 6px;
   --shadow-rest: var(--sh);
   --shadow-elevated: var(--shh);
   --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--b2);
@@ -164,10 +164,10 @@
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+  --radius-xl: 6px;
   --shadow-rest: var(--sh);
   --shadow-elevated: var(--shh);
   --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--b2);
@@ -229,10 +229,10 @@
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+  --radius-xl: 6px;
   --shadow-rest: var(--sh);
   --shadow-elevated: var(--shh);
   --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--b2);
@@ -294,10 +294,10 @@
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+  --radius-xl: 6px;
   --shadow-rest: var(--sh);
   --shadow-elevated: var(--shh);
   --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--b2);
@@ -359,10 +359,10 @@
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+  --radius-xl: 6px;
   --shadow-rest: var(--sh);
   --shadow-elevated: var(--shh);
   --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--b2);
@@ -424,10 +424,10 @@
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+  --radius-lg: 4px;
+  --radius-xl: 6px;
   --shadow-rest: var(--sh);
   --shadow-elevated: var(--shh);
   --shadow-floating: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--b2);

package/types/akcelik-strct.d.ts

@@ -4189,6 +4189,16 @@ interface StrctDatagridLabels {
     loadMore: string;
     /** `paging="more"`: what the footer says it is showing. */
     showing: (shown: number, total?: number) => string;
+    /**
+     * What the grid announces after it changes under the reader: sorting
+     * reorders every row, a page replaces them, a filter hides most of them —
+     * none of it is visible to someone who cannot see the table.
+     */
+    sortedAscending: (column: string) => string;
+    sortedDescending: (column: string) => string;
+    sortCleared: string;
+    pageOf: (page: number, pages: number) => string;
+    rowsMatch: (shown: number, total: number) => string;
 }
 /** Resolves a stable identity for a row: a property key, or a function. */
 type StrctRowId = string | ((row: StrctRow) => unknown);
@@ -4520,6 +4530,11 @@ declare class StrctDatagrid {
         quickFilter: string;
         loadMore: string;
         showing: (shown: number, total?: number) => string;
+        sortedAscending: (column: string) => string;
+        sortedDescending: (column: string) => string;
+        sortCleared: string;
+        pageOf: (page: number, pages: number) => string;
+        rowsMatch: (shown: number, total: number) => string;
     }>;
     /**
      * Virtual scrolling for large data sets: only the rows inside the viewport
@@ -4656,6 +4671,10 @@ declare class StrctDatagrid {
     private readonly cellDefs;
     private readonly cellMap;
     readonly page: _angular_core.WritableSignal<number>;
+    /** What the polite region is saying right now; '' until something happens. */
+    protected readonly announcement: _angular_core.WritableSignal<string>;
+    /** The first filtered() run is the initial render, which announces nothing. */
+    private filterSettled;
     private readonly sort;
     /** Selection / expansion are tracked by row id (see {@link rowId}). */
     private readonly selected;
@@ -4940,6 +4959,13 @@ declare class StrctDatagrid {
     /** Open the row-action menu next to the clicked kebab button. */
     protected openRowMenu(row: StrctRow, event: MouseEvent): void;
     sortBy(key: string): void;
+    /** The pager's own change, plus what it means for a reader. */
+    protected goToPage(page: number): void;
+    /**
+     * Says something once. The same text twice in a row would be dropped by a
+     * screen reader, so a repeat is nudged with a trailing space.
+     */
+    private announce;
     protected sortIcon(key: string): string;
     protected ariaSort(key: string): 'ascending' | 'descending' | 'none';
     protected onHeaderSpace(event: Event, key: string): void;