@godxjp/ui 33.11.2 → 33.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/agent/START-HERE.md +7 -7
- package/agent/components/Anchor.json +1 -1
- package/agent/components/AppShell.json +1 -1
- package/agent/components/DataTable.json +1 -1
- package/agent/components/Pagination.json +1 -1
- package/agent/components/ResizablePanel.json +1 -1
- package/agent/components/ScrollArea.json +1 -1
- package/agent/components/Table.json +1 -1
- package/agent/components-index.json +7 -7
- package/agent/components.json +7 -7
- package/agent/index.json +6 -6
- package/agent/llms.txt +6 -6
- package/agent/tokens.json +20 -2
- package/dist/components/data-display/data-table.js +2 -0
- package/dist/components/data-display/table.js +3 -0
- package/dist/components/layout/app-shell.js +16 -6
- package/dist/components/layout/topbar.d.ts +1 -1
- package/dist/components/layout/topbar.js +7 -0
- package/dist/components/navigation/pagination.js +4 -0
- package/dist/contracts/measurement.json +1 -1
- package/dist/lab/anchor.js +11 -1
- package/dist/lib/focus-reveal.d.ts +5 -0
- package/dist/lib/focus-reveal.js +19 -0
- package/dist/lib/hooks.js +5 -2
- package/dist/styles/focus-ring.css +79 -19
- package/dist/styles/layers.json +1 -1
- package/dist/styles/layout.css +4 -4
- package/dist/styles/shell-layout.css +10 -0
- package/dist/styles.css +1 -1
- package/dist/tokens/base.css +2 -0
- package/dist/tokens/components/resizable.css +4 -0
- package/dist/tokens/foundation.css +4 -1
- package/docs/TOKENS.md +41 -23
- package/package.json +2 -2
package/dist/tokens/base.css
CHANGED
|
@@ -148,9 +148,12 @@
|
|
|
148
148
|
|
|
149
149
|
--focus-ring-offset: var(--focus-outline-offset);
|
|
150
150
|
|
|
151
|
+
--focus-ring-inset-offset: calc(-1 * (var(--focus-ring-width) + var(--focus-outline-offset)));
|
|
152
|
+
--focus-ring-contained-offset: initial;
|
|
153
|
+
|
|
151
154
|
--focus-ring-clip-margin: 8px;
|
|
152
155
|
|
|
153
|
-
--region-focus-ring-width:
|
|
156
|
+
--region-focus-ring-width: var(--focus-ring-weight);
|
|
154
157
|
--region-focus-ring-color: initial;
|
|
155
158
|
|
|
156
159
|
--gradient-brand: none;
|
package/docs/TOKENS.md
CHANGED
|
@@ -277,7 +277,11 @@ The census confirmed the number and rejected the diagnosis: **`width` is not one
|
|
|
277
277
|
|
|
278
278
|
**Px, never rem.** A stroke is a _device_ line: its job is to read as one crisp rule at any type size, so it must not grow when the root font-size does. Every token that moved onto this scale was already `px` for that reason; a `rem` thickness (`--slider-track-height: 0.375rem`) is a different decision and stayed where it was. **Not `--scaling`-multiplied** either — `--scaling` is a density knob, and a 1px divider at 0.92px would blur rather than tighten.
|
|
279
279
|
|
|
280
|
-
The focus mark reads this scale
|
|
280
|
+
The focus mark reads this scale through `--focus-ring-weight`: the default is `--stroke-md` (2px), with a 2px outline gap. `--focus-ring-width` is derived from the weight and the global `--focus-outline` switch; do not set it directly.
|
|
281
|
+
|
|
282
|
+
Clipping surfaces use `--focus-ring-inset-offset` (default minus the mark width plus the gap, -4px) through the inherited `--focus-ring-contained-offset` context. Pagination, tab strips, cards, bars and scrolling surfaces keep the mark inside their boundary without adding padding. A surface-coloured inset backing separates the brand mark from brand-filled controls. Keyboard-scroll regions show their inset mark by default; `--region-focus-ring-width: 0` is an explicit opt-out.
|
|
283
|
+
|
|
284
|
+
Resize separators use `--resizable-handle-size` (default `--space-2`, 8px), with the inline or block axis selected by ARIA orientation. This reserves room for the inset mark even on an empty handle; focusing does not change its size.
|
|
281
285
|
|
|
282
286
|
#### `--band-height-*` — the vertical extent of a horizontal band
|
|
283
287
|
|
|
@@ -487,23 +491,23 @@ It is reserved for `@container` / `@media` re-points. Everything static stays in
|
|
|
487
491
|
|
|
488
492
|
Fifteen existing token defaults build on the eight first-pass changes. Body stays 14px/1.7, labels and headings stay 500, with no Latin-style negative tracking on Japanese. Mobile gutters remain 16px. Zebra stays off; table numeric alignment and sidebar active styling are unchanged. Card header-to-body spacing grows to 24px; horizontal card/table insets and section gaps stay 16px so fixed-width date columns remain on one line. No new token or component API.
|
|
489
493
|
|
|
490
|
-
| Token
|
|
491
|
-
|
|
492
|
-
| `--space-page-x`
|
|
493
|
-
| `--space-page-y`
|
|
494
|
-
| `--card-space-body-y`
|
|
495
|
-
| `--page-title-font-size`
|
|
496
|
-
| `--page-title-font-size-compact` | `var( --heading-h2, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )`
|
|
497
|
-
| `--overlay-background`
|
|
498
|
-
| `--card-title-font-size`
|
|
499
|
-
| `--card-shadow`
|
|
500
|
-
| `--form-field-row-gap`
|
|
501
|
-
| `--form-block-gap`
|
|
502
|
-
| `--control-height-default`
|
|
503
|
-
| `--control-focus-ring-width`
|
|
504
|
-
| `--table-row-height-default`
|
|
505
|
-
| `--focus-outline-weight`
|
|
506
|
-
| `--focus-outline-offset`
|
|
494
|
+
| Token | Previous | New |
|
|
495
|
+
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
496
|
+
| `--space-page-x` | `var(--space-6)` | `var(--space-8)` |
|
|
497
|
+
| `--space-page-y` | `var(--space-6)` | `var(--space-8)` |
|
|
498
|
+
| `--card-space-body-y` | `var(--space-section-active)` | `var(--space-6)` |
|
|
499
|
+
| `--page-title-font-size` | `var( --heading-h1, calc( var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) ) )` | `var( --heading-h1, calc( var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio) ) )` |
|
|
500
|
+
| `--page-title-font-size-compact` | `var( --heading-h2, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )` | `var( --heading-h2, calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio)) )` |
|
|
501
|
+
| `--overlay-background` | `rgb(0 0 0 / 0.5)` | `rgb(0 0 0 / 0.4)` |
|
|
502
|
+
| `--card-title-font-size` | `var(--font-size-base)` | `calc(var(--font-size-base) * var(--font-size-ratio))` |
|
|
503
|
+
| `--card-shadow` | `initial` | `none` |
|
|
504
|
+
| `--form-field-row-gap` | `var(--space-3)` | `var(--space-3)` |
|
|
505
|
+
| `--form-block-gap` | `var(--space-4)` | `var(--space-6)` |
|
|
506
|
+
| `--control-height-default` | `var(--band-height-md)` | `var(--band-height-lg)` |
|
|
507
|
+
| `--control-focus-ring-width` | `initial` | `var(--stroke-md)` |
|
|
508
|
+
| `--table-row-height-default` | `var(--band-height-md)` | `var(--band-height-lg)` |
|
|
509
|
+
| `--focus-outline-weight` | `initial` | `var(--stroke-md)` |
|
|
510
|
+
| `--focus-outline-offset` | `0px` | `2px` |
|
|
507
511
|
|
|
508
512
|
### Complete restoration (both passes)
|
|
509
513
|
|
|
@@ -514,8 +518,17 @@ Load after library and preset styles. The original input colors restore the orig
|
|
|
514
518
|
--space-page-x: var(--space-6);
|
|
515
519
|
--space-page-y: var(--space-6);
|
|
516
520
|
--card-space-body-y: var(--space-section-active);
|
|
517
|
-
--page-title-font-size: var(
|
|
518
|
-
|
|
521
|
+
--page-title-font-size: var(
|
|
522
|
+
--heading-h1,
|
|
523
|
+
calc(
|
|
524
|
+
var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
|
|
525
|
+
var(--font-size-ratio)
|
|
526
|
+
)
|
|
527
|
+
);
|
|
528
|
+
--page-title-font-size-compact: var(
|
|
529
|
+
--heading-h2,
|
|
530
|
+
calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
|
|
531
|
+
);
|
|
519
532
|
--overlay-background: rgb(0 0 0 / 0.5);
|
|
520
533
|
--card-title-font-size: var(--font-size-base);
|
|
521
534
|
--card-shadow: initial;
|
|
@@ -528,14 +541,19 @@ Load after library and preset styles. The original input colors restore the orig
|
|
|
528
541
|
--focus-outline-offset: 0px;
|
|
529
542
|
--button-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
|
|
530
543
|
--control-shadow: var(--shadow-xs);
|
|
531
|
-
--shadow-md:
|
|
532
|
-
|
|
544
|
+
--shadow-md:
|
|
545
|
+
0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1);
|
|
546
|
+
--shadow-lg:
|
|
547
|
+
0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1);
|
|
533
548
|
--duration-fast: 150ms;
|
|
534
549
|
--duration-base: 250ms;
|
|
535
550
|
--duration-slow: 500ms;
|
|
536
551
|
--input: 30 7% 53%;
|
|
537
552
|
}
|
|
538
|
-
.dark,
|
|
553
|
+
.dark,
|
|
554
|
+
:root[data-theme="dark"] {
|
|
555
|
+
--input: 45 6% 47%;
|
|
556
|
+
}
|
|
539
557
|
|
|
540
558
|
.ui-scale-fixed {
|
|
541
559
|
--space-page-x: var(--space-6);
|