npm - @guildofgleks/ui - Versions diffs - 21.12.0 → 21.13.0 - Mend

@guildofgleks/ui 21.12.0 → 21.13.0

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.

Files changed (24) hide show

package/AGENTS.md +179 -28
package/CHANGELOG.md +612 -0
package/README.md +23 -3
package/TOKENS.md +52 -51
package/fesm2022/guildofgleks-ui-datepicker.mjs +20 -0
package/fesm2022/guildofgleks-ui-datepicker.mjs.map +1 -0
package/fesm2022/guildofgleks-ui-dialog.mjs +20 -0
package/fesm2022/guildofgleks-ui-dialog.mjs.map +1 -0
package/fesm2022/guildofgleks-ui-shared.mjs +4692 -0
package/fesm2022/guildofgleks-ui-shared.mjs.map +1 -0
package/fesm2022/guildofgleks-ui-table.mjs +20 -0
package/fesm2022/guildofgleks-ui-table.mjs.map +1 -0
package/fesm2022/guildofgleks-ui.mjs +607 -3760
package/fesm2022/guildofgleks-ui.mjs.map +1 -1
package/package.json +17 -1
package/styles/button.css +5 -5
package/styles/presets/parchment.css +89 -86
package/styles/presets/terminal.css +107 -102
package/styles/theme.css +128 -23
package/types/guildofgleks-ui-datepicker.d.ts +1 -0
package/types/guildofgleks-ui-dialog.d.ts +1 -0
package/types/guildofgleks-ui-shared.d.ts +2000 -0
package/types/guildofgleks-ui-table.d.ts +1 -0
package/types/guildofgleks-ui.d.ts +279 -1226

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@guildofgleks/ui",
-  "version": "21.12.0",
+  "version": "21.13.0",
   "engines": {
     "node": ">=20.19.0"
   },
@@ -50,6 +50,22 @@
     ".": {
       "types": "./types/guildofgleks-ui.d.ts",
       "default": "./fesm2022/guildofgleks-ui.mjs"
+    },
+    "./datepicker": {
+      "types": "./types/guildofgleks-ui-datepicker.d.ts",
+      "default": "./fesm2022/guildofgleks-ui-datepicker.mjs"
+    },
+    "./dialog": {
+      "types": "./types/guildofgleks-ui-dialog.d.ts",
+      "default": "./fesm2022/guildofgleks-ui-dialog.mjs"
+    },
+    "./shared": {
+      "types": "./types/guildofgleks-ui-shared.d.ts",
+      "default": "./fesm2022/guildofgleks-ui-shared.mjs"
+    },
+    "./table": {
+      "types": "./types/guildofgleks-ui-table.d.ts",
+      "default": "./fesm2022/guildofgleks-ui-table.mjs"
     }
   },
   "module": "fesm2022/guildofgleks-ui.mjs",

package/styles/button.css CHANGED Viewed

@@ -106,11 +106,11 @@
  * wants to restyle them can still do it by being specific about it.
  */
 .gog-btn.gog-btn:focus-visible {
-  outline: var(--gog-button-focus-ring-width) solid
-    var(
-      --gog-button-hover-bg,
-      var(--gog-button-variant-hover-bg, var(--gog-button-primary-hover-bg))
-    );
+  /* `--gog-button-focus-ring-color`, not the hover fill this used to read. A hover-weight colour
+     cannot carry focus: on `ghost` and on the severity `outline` combinations the hover fill is a
+     wash, and the ring measured 1.07:1 to 2.65:1 against the page. See the token's own note in
+     `theme.css`. */
+  outline: var(--gog-button-focus-ring-width) solid var(--gog-button-focus-ring-color);
   outline-offset: var(--gog-button-focus-ring-offset);
 }

package/styles/presets/parchment.css CHANGED Viewed

@@ -1,86 +1,89 @@
-/*
- * `parchment` — ink on laid paper. Warm neutrals, a serif body, square corners, an oxblood
- * accent: `docs/themes.md`'s Historical family, the one the plan flagged as blocked on fonts.
- *
- * Import it after `index.css`, then put the attribute on the root — or on any subtree:
- *
- *   @import '@guildofgleks/ui/styles/index.css';
- *   @import '@guildofgleks/ui/styles/presets/parchment.css';
- *
- *   <html data-theme="parchment">
- *
- * **How the font blocker was resolved.** A period serif is most of what makes this read as
- * historical, and a preset must never add a network request by being imported. So this file sets
- * a *stack* of old-style serifs that ship with real operating systems — Iowan Old Style, Palatino,
- * Book Antiqua, Georgia — and every one of them is a genuine old-style face with the right colour
- * on the page. It looks deliberate on every platform, with no download.
- *
- * For the fuller period look, `presets/parchment.fonts.css` is an optional second import that
- * pulls EB Garamond and points the same tokens at it. That file is the only one here that makes
- * a request, and importing it is the consumer's decision, not this file's.
- */
-:root[data-theme='parchment'],
-[data-theme='parchment'] {
-  color-scheme: light;
-  /* Palette — aged paper, iron-gall ink, an oxblood rubric */
-  --gog-background-color: #e8dfc8;
-  --gog-surface-color: #f5efe0;
-  --gog-hover-color: #ded3b8;
-  --gog-border-color: #b8a888;
-  --gog-text-color: #241d14;
-  --gog-accent-text-color: #f5efe0;
-  --gog-muted-text-color: #57493a;
-  --gog-primary-color: #241d14;
-  --gog-accent-color: #6b2f2f;
-  --gog-accent-bright: #8a4040;
-  --gog-accent-dim: #5a2626;
-  --gog-accent-pale: #e3d4c4;
-  --gog-secondary-color: #6b5b45;
-  /* Semantics — the colours a scribe actually had: verdigris, vermilion, orpiment, indigo */
-  --gog-success-color: #3f5f3f;
-  --gog-danger-color: #8b2f26;
-  --gog-warning-color: #8a6516;
-  --gog-info-color: #3a5570;
-  /* Paper does not float. A soft, close shadow reads as a sheet resting on the desk — so this
-     theme keeps the default's soft style and simply climbs the ladder more slowly: a quarter of
-     a pixel of lift per unit of Z reproduces the `0 1px 3px` it shipped at the overlay step, and
-     even a modal only reaches 4px. The blur is still three times the offset, as everywhere. */
-  /* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
-     decorative hairline this library draws dividers, table rules and panel outlines with and
-     deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
-     had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
-     measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
-     Neither their border nor their fill carried it; the sweep checks the better of the two.
-     Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
-     holding hue and chroma so each theme's neutral stays its own, then the value that clears both
-     the page and the surface. */
-  --gog-control-boundary-color: #88795b;
-  --gog-elevation-ink: 36 29 20;
-  --gog-elevation-key-alpha: 0.22;
-  --gog-elevation-ambient-alpha: 0;
-  --gog-elevation-contact-blur: 3px;
-  --gog-elevation-key-x: 0;
-  --gog-elevation-key-y: 0.25;
-  --gog-elevation-key-blur: 0.75;
-  --gog-elevation-ring-width: 0px;
-  --gog-elevation-highlight-ink: 255 255 255;
-  --gog-elevation-highlight-alpha: 0;
-  --gog-spinner-overlay-bg: rgba(232, 223, 200, 0.88);
-  /* Character layer — a book, not an application. Serif throughout, square corners, hairline
-     rules, and roomier than the house default: printed pages have margins, and cramping this
-     palette into a dense grid is what would make it read as a skin rather than a design. */
-  --gog-font-heading:
-    'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
-  --gog-font-body: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
-  --gog-radius: 0;
-  --gog-density: 1.1;
-  --gog-control-border-width: 1px;
-  --gog-text-transform: none;
-  --gog-letter-spacing: normal;
-}
+/*
+ * `parchment` — ink on laid paper. Warm neutrals, a serif body, square corners, an oxblood
+ * accent: `docs/themes.md`'s Historical family, the one the plan flagged as blocked on fonts.
+ *
+ * Import it after `index.css`, then put the attribute on the root — or on any subtree:
+ *
+ *   @import '@guildofgleks/ui/styles/index.css';
+ *   @import '@guildofgleks/ui/styles/presets/parchment.css';
+ *
+ *   <html data-theme="parchment">
+ *
+ * **How the font blocker was resolved.** A period serif is most of what makes this read as
+ * historical, and a preset must never add a network request by being imported. So this file sets
+ * a *stack* of old-style serifs that ship with real operating systems — Iowan Old Style, Palatino,
+ * Book Antiqua, Georgia — and every one of them is a genuine old-style face with the right colour
+ * on the page. It looks deliberate on every platform, with no download.
+ *
+ * For the fuller period look, `presets/parchment.fonts.css` is an optional second import that
+ * pulls EB Garamond and points the same tokens at it. That file is the only one here that makes
+ * a request, and importing it is the consumer's decision, not this file's.
+ */
+:root[data-theme='parchment'],
+[data-theme='parchment'] {
+  color-scheme: light;
+  /* Palette — aged paper, iron-gall ink, an oxblood rubric */
+  --gog-background-color: #e8dfc8;
+  --gog-surface-color: #f5efe0;
+  --gog-hover-color: #ded3b8;
+  --gog-border-color: #b8a888;
+  --gog-text-color: #241d14;
+  --gog-accent-text-color: #f5efe0;
+  --gog-muted-text-color: #57493a;
+  --gog-primary-color: #241d14;
+  --gog-accent-color: #6b2f2f;
+  --gog-accent-bright: #8a4040;
+  --gog-accent-dim: #5a2626;
+  --gog-accent-pale: #e3d4c4;
+  --gog-secondary-color: #6b5b45;
+  /* Semantics — the colours a scribe actually had: verdigris, vermilion, orpiment, indigo */
+  --gog-success-color: #3f5f3f;
+  /* 6.9 deg of hue and 0.052 of lightness from this theme's oxblood accent, which is not a
+     distance a reader can use. Lightened along its own hue: a danger that stops being red is
+     worse than one that is a shade brighter than the accent beside it. */
+  --gog-danger-color: #a24439;
+  --gog-warning-color: #8a6516;
+  --gog-info-color: #3a5570;
+  /* Paper does not float. A soft, close shadow reads as a sheet resting on the desk — so this
+     theme keeps the default's soft style and simply climbs the ladder more slowly: a quarter of
+     a pixel of lift per unit of Z reproduces the `0 1px 3px` it shipped at the overlay step, and
+     even a modal only reaches 4px. The blur is still three times the offset, as everywhere. */
+  /* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
+     decorative hairline this library draws dividers, table rules and panel outlines with and
+     deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
+     had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
+     measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
+     Neither their border nor their fill carried it; the sweep checks the better of the two.
+     Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
+     holding hue and chroma so each theme's neutral stays its own, then the value that clears both
+     the page and the surface. */
+  --gog-control-boundary-color: #88795b;
+  --gog-elevation-ink: 36 29 20;
+  --gog-elevation-key-alpha: 0.22;
+  --gog-elevation-ambient-alpha: 0;
+  --gog-elevation-contact-blur: 3px;
+  --gog-elevation-key-x: 0;
+  --gog-elevation-key-y: 0.25;
+  --gog-elevation-key-blur: 0.75;
+  --gog-elevation-ring-width: 0px;
+  --gog-elevation-highlight-ink: 255 255 255;
+  --gog-elevation-highlight-alpha: 0;
+  --gog-spinner-overlay-bg: rgba(232, 223, 200, 0.88);
+  /* Character layer — a book, not an application. Serif throughout, square corners, hairline
+     rules, and roomier than the house default: printed pages have margins, and cramping this
+     palette into a dense grid is what would make it read as a skin rather than a design. */
+  --gog-font-heading:
+    'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
+  --gog-font-body: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
+  --gog-radius: 0;
+  --gog-density: 1.1;
+  --gog-control-border-width: 1px;
+  --gog-text-transform: none;
+  --gog-letter-spacing: normal;
+}

package/styles/presets/terminal.css CHANGED Viewed

@@ -1,102 +1,107 @@
-/*
- * `terminal` — monochrome phosphor. Green on near-black, everything monospaced, square
- * corners, no motion: the character-cell terminal, which is `docs/themes.md`'s Retro family.
- *
- * Import it after `index.css`, then put the attribute on the root — or on any subtree:
- *
- *   @import '@guildofgleks/ui/styles/index.css';
- *   @import '@guildofgleks/ui/styles/presets/terminal.css';
- *
- *   <html data-theme="terminal">
- *
- * Palette plus the character layer, no per-component overrides. The font is the one thing this
- * identity cannot do without, and it does not need a download to get it: `ui-monospace` resolves
- * to the platform's own terminal face (SF Mono, Cascadia, DejaVu Sans Mono), which is more
- * authentic here than any webfont would be. `presets/terminal.fonts.css` is an optional extra
- * for a period face — importing this file alone makes no network request.
- *
- * Amber instead of green is two declarations: swap `--gog-accent-*` and `--gog-text-color` for
- * their amber equivalents. The rest of the theme does not care which phosphor it is.
- */
-:root[data-theme='terminal'],
-[data-theme='terminal'] {
-  color-scheme: dark;
-  /* Palette — P1 green phosphor on an unlit screen */
-  --gog-background-color: #0a0e0a;
-  --gog-surface-color: #121a12;
-  --gog-hover-color: #1b2a1b;
-  /* Elevation on a dark ground is a lighter surface, not a shadow — see theme.css. */
-  --gog-border-color: #274a2c;
-  --gog-text-color: #c8f5c8;
-  --gog-accent-text-color: #04120a;
-  --gog-muted-text-color: #6fae6f;
-  --gog-primary-color: #c8f5c8;
-  --gog-accent-color: #3ddc5c;
-  --gog-accent-bright: #7cf591;
-  --gog-accent-dim: #2fae48;
-  --gog-accent-pale: #17311c;
-  --gog-secondary-color: #6fae6f;
-  /* Semantics — a monochrome display had no colour to spare, so these stay within the phosphor
-     family and separate by brightness. Only danger breaks out, because a destructive action is
-     the one thing worth spending the screen's only other colour on. */
-  --gog-success-color: #3ddc5c;
-  --gog-danger-color: #ff5f56;
-  --gog-warning-color: #d4d44a;
-  /* Phosphor cyan, not a paler green. #8fd8a0 sat 4.6 degrees of hue and 0.032 of lightness from
-     `--gog-success-color`, so an info badge and a success badge were the same colour -- and
-     greyscale did not separate them either, which is the test `check:oklch`'s R3 applies. A
-     monochrome-green terminal would be one answer, but this theme already signals in red and
-     yellow, so the second phosphor is the consistent one: 61 degrees from success, 98 from
-     warning, and 10.58:1 on the page. */
-  --gog-info-color: #4dd0e1;
-  /* A glow, not a shadow: a phosphor screen bleeds light outwards instead of casting one. The
-     ladder expresses that without knowing what a glow is — the key light's vertical travel is
-     zero, so it never leaves the object, and all that grows with height is its blur. At the
-     overlay step that is `0 0 18px`, this theme's own shipped value to the pixel.
-     The `elevated` tier changes deliberately. It had been a black `0 2px 6px` under the green
-     catch light — the one place this theme cast a shadow rather than emitting light, and it was
-     inherited from the dark preset it started as rather than chosen. It is a smaller glow now,
-     which is what the comment beside it already claimed was happening. */
-  /* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
-     decorative hairline this library draws dividers, table rules and panel outlines with and
-     deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
-     had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
-     measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
-     Neither their border nor their fill carried it; the sweep checks the better of the two.
-     Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
-     holding hue and chroma so each theme's neutral stays its own, then the value that clears both
-     the page and the surface. */
-  --gog-control-boundary-color: #4c7150;
-  --gog-elevation-ink: 61 220 92;
-  --gog-elevation-key-alpha: 0.12;
-  --gog-elevation-ambient-alpha: 0;
-  --gog-elevation-contact-blur: 3px;
-  --gog-elevation-key-x: 0;
-  --gog-elevation-key-y: 0;
-  --gog-elevation-key-blur: 4.5;
-  --gog-elevation-ring-width: 1px;
-  --gog-elevation-highlight-ink: 61 220 92;
-  --gog-elevation-highlight-alpha: 0.18;
-  --gog-spinner-overlay-bg: rgba(10, 14, 10, 0.88);
-  /* Character layer — the whole identity in seven declarations. Monospace everywhere, not just
-     in code: a character-cell display had one grid and one face. Square corners and 1px rules
-     because the display drew box-drawing characters, and no motion because it had no way to
-     animate anything that was not a blinking cursor. */
-  --gog-font-heading: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --gog-font-body: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --gog-radius: 0;
-  --gog-density: 0.85;
-  --gog-control-border-width: 1px;
-  --gog-text-transform: uppercase;
-  --gog-letter-spacing: 1px;
-  --gog-duration-fast: 0s;
-  --gog-duration-base: 0s;
-  --gog-duration-slow: 0s;
-}
+/*
+ * `terminal` — monochrome phosphor. Green on near-black, everything monospaced, square
+ * corners, no motion: the character-cell terminal, which is `docs/themes.md`'s Retro family.
+ *
+ * Import it after `index.css`, then put the attribute on the root — or on any subtree:
+ *
+ *   @import '@guildofgleks/ui/styles/index.css';
+ *   @import '@guildofgleks/ui/styles/presets/terminal.css';
+ *
+ *   <html data-theme="terminal">
+ *
+ * Palette plus the character layer, no per-component overrides. The font is the one thing this
+ * identity cannot do without, and it does not need a download to get it: `ui-monospace` resolves
+ * to the platform's own terminal face (SF Mono, Cascadia, DejaVu Sans Mono), which is more
+ * authentic here than any webfont would be. `presets/terminal.fonts.css` is an optional extra
+ * for a period face — importing this file alone makes no network request.
+ *
+ * Amber instead of green is two declarations: swap `--gog-accent-*` and `--gog-text-color` for
+ * their amber equivalents. The rest of the theme does not care which phosphor it is.
+ */
+:root[data-theme='terminal'],
+[data-theme='terminal'] {
+  color-scheme: dark;
+  /* Palette — P1 green phosphor on an unlit screen */
+  --gog-background-color: #0a0e0a;
+  --gog-surface-color: #121a12;
+  --gog-hover-color: #1b2a1b;
+  /* Elevation on a dark ground is a lighter surface, not a shadow — see theme.css. */
+  --gog-border-color: #274a2c;
+  --gog-text-color: #c8f5c8;
+  --gog-accent-text-color: #04120a;
+  --gog-muted-text-color: #6fae6f;
+  --gog-primary-color: #c8f5c8;
+  --gog-accent-color: #3ddc5c;
+  --gog-accent-bright: #7cf591;
+  --gog-accent-dim: #2fae48;
+  --gog-accent-pale: #17311c;
+  --gog-secondary-color: #6fae6f;
+  /* Semantics — a monochrome display had no colour to spare, so these stay within the phosphor
+     family and separate by brightness. Only danger breaks out, because a destructive action is
+     the one thing worth spending the screen's only other colour on. */
+  /* Was `#3ddc5c`, the same hex as `--gog-accent-color`: a success badge and an ordinary
+     accent one were indistinguishable. Moved along its own hue rather than across, because
+     this theme's other three statuses already occupy yellow, red and cyan -- the room left
+     is in lightness, not in hue. Same finding as this file's own info/success note below,
+     one role over. */
+  --gog-success-color: #00b330;
+  --gog-danger-color: #ff5f56;
+  --gog-warning-color: #d4d44a;
+  /* Phosphor cyan, not a paler green. #8fd8a0 sat 4.6 degrees of hue and 0.032 of lightness from
+     `--gog-success-color`, so an info badge and a success badge were the same colour -- and
+     greyscale did not separate them either, which is the test `check:oklch`'s R3 applies. A
+     monochrome-green terminal would be one answer, but this theme already signals in red and
+     yellow, so the second phosphor is the consistent one: 61 degrees from success, 98 from
+     warning, and 10.58:1 on the page. */
+  --gog-info-color: #4dd0e1;
+  /* A glow, not a shadow: a phosphor screen bleeds light outwards instead of casting one. The
+     ladder expresses that without knowing what a glow is — the key light's vertical travel is
+     zero, so it never leaves the object, and all that grows with height is its blur. At the
+     overlay step that is `0 0 18px`, this theme's own shipped value to the pixel.
+     The `elevated` tier changes deliberately. It had been a black `0 2px 6px` under the green
+     catch light — the one place this theme cast a shadow rather than emitting light, and it was
+     inherited from the dark preset it started as rather than chosen. It is a smaller glow now,
+     which is what the comment beside it already claimed was happening. */
+  /* The boundary that identifies a control, as distinct from `--gog-border-color`, which is the
+     decorative hairline this library draws dividers, table rules and panel outlines with and
+     deliberately keeps faint. Three controls -- `gog-chip`, `gog-toggle`, `gog-button-toggle` --
+     had been reading the decorative one as their own edge, and the boundary sweep in 21.12.0
+     measured them at 1.18 to 2.17:1 in every shipped theme, against the 3:1 SC 1.4.11 requires.
+     Neither their border nor their fill carried it; the sweep checks the better of the two.
+     Computed, not chosen: `npm run suggest:color -- --gog-border-color <ground> 3.2` per theme,
+     holding hue and chroma so each theme's neutral stays its own, then the value that clears both
+     the page and the surface. */
+  --gog-control-boundary-color: #4c7150;
+  --gog-elevation-ink: 61 220 92;
+  --gog-elevation-key-alpha: 0.12;
+  --gog-elevation-ambient-alpha: 0;
+  --gog-elevation-contact-blur: 3px;
+  --gog-elevation-key-x: 0;
+  --gog-elevation-key-y: 0;
+  --gog-elevation-key-blur: 4.5;
+  --gog-elevation-ring-width: 1px;
+  --gog-elevation-highlight-ink: 61 220 92;
+  --gog-elevation-highlight-alpha: 0.18;
+  --gog-spinner-overlay-bg: rgba(10, 14, 10, 0.88);
+  /* Character layer — the whole identity in seven declarations. Monospace everywhere, not just
+     in code: a character-cell display had one grid and one face. Square corners and 1px rules
+     because the display drew box-drawing characters, and no motion because it had no way to
+     animate anything that was not a blinking cursor. */
+  --gog-font-heading: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --gog-font-body: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --gog-radius: 0;
+  --gog-density: 0.85;
+  --gog-control-border-width: 1px;
+  --gog-text-transform: uppercase;
+  --gog-letter-spacing: 1px;
+  --gog-duration-fast: 0s;
+  --gog-duration-base: 0s;
+  --gog-duration-slow: 0s;
+}