@timmo001/groundwork-ui 0.9.4 → 0.9.6

package/custom-elements.json

@@ -1628,6 +1628,9 @@
               "kind": "field",
               "name": "#nav",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDivElement"
+              },
               "readonly": true
             },
             {
@@ -2228,6 +2231,9 @@
               "kind": "field",
               "name": "#value",
               "privacy": "private",
+              "type": {
+                "text": "HTMLSpanElement"
+              },
               "readonly": true
             },
             {
@@ -2696,6 +2702,9 @@
               "kind": "field",
               "name": "#bar",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDivElement"
+              },
               "readonly": true
             },
             {
@@ -3816,6 +3825,9 @@
               "kind": "field",
               "name": "#header",
               "privacy": "private",
+              "type": {
+                "text": "HTMLElement"
+              },
               "readonly": true
             },
             {
@@ -3828,6 +3840,9 @@
               "kind": "field",
               "name": "#body",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDivElement"
+              },
               "readonly": true
             },
             {
@@ -5461,6 +5476,9 @@
               "kind": "field",
               "name": "#content",
               "privacy": "private",
+              "type": {
+                "text": "HTMLSpanElement"
+              },
               "readonly": true
             },
             {
@@ -5932,6 +5950,9 @@
               "kind": "field",
               "name": "#dialog",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDialogElement"
+              },
               "readonly": true
             },
             {
@@ -7809,6 +7830,9 @@
               "kind": "field",
               "name": "#details",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDetailsElement"
+              },
               "readonly": true
             },
             {
@@ -14325,6 +14349,9 @@
               "kind": "field",
               "name": "#heading",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDivElement"
+              },
               "readonly": true
             },
             {
@@ -16079,6 +16106,9 @@
               "kind": "field",
               "name": "#descriptionSkeleton",
               "privacy": "private",
+              "type": {
+                "text": "HTMLDivElement"
+              },
               "readonly": true
             },
             {
@@ -22114,7 +22144,7 @@
         {
           "kind": "variable",
           "name": "base",
-          "default": "css` :host { font-family: var(--gw-font-sans); color: var(--gw-color-text-primary); } *, *::before, *::after { box-sizing: border-box; } :host([hidden]), [hidden] { display: none !important; } :focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } .icon { flex: none; width: var(--gw-icon-size, 1.25rem); height: var(--gw-icon-size, 1.25rem); fill: currentColor; } :host([tone=\"accent\"]) { --gw-tone: var(--gw-color-accent); --gw-tone-fill: var(--gw-color-fill-accent-quiet); --gw-tone-border: var(--gw-color-border-accent); } :host([tone=\"info\"]) { --gw-tone: var(--gw-color-info); --gw-tone-fill: var(--gw-color-fill-info-quiet); --gw-tone-border: var(--gw-color-border-info); } :host([tone=\"success\"]) { --gw-tone: var(--gw-color-success); --gw-tone-fill: var(--gw-color-fill-success-quiet); --gw-tone-border: var(--gw-color-border-success); } :host([tone=\"warning\"]) { --gw-tone: var(--gw-color-warning); --gw-tone-fill: var(--gw-color-fill-warning-quiet); --gw-tone-border: var(--gw-color-border-warning); } :host([tone=\"danger\"]) { --gw-tone: var(--gw-color-danger); --gw-tone-fill: var(--gw-color-fill-danger-quiet); --gw-tone-border: var(--gw-color-border-danger); } :host([tone=\"important\"]) { --gw-tone: var(--gw-color-important); --gw-tone-fill: var(--gw-color-fill-important-quiet); --gw-tone-border: var(--gw-color-border-important); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } } `",
+          "default": "css` :host { font-family: var(--gw-font-sans); color: var(--gw-color-text-primary); } *, *::before, *::after { box-sizing: border-box; } :host([hidden]), [hidden] { display: none !important; } :focus-visible { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } .icon { flex: none; width: var(--gw-icon-size, 1.25rem); height: var(--gw-icon-size, 1.25rem); fill: currentColor; } :host([tone=\"accent\"]) { --gw-tone: var(--gw-color-accent); --gw-tone-fill: var(--gw-color-fill-accent-quiet); --gw-tone-border: var(--gw-color-border-accent); } :host([tone=\"info\"]) { --gw-tone: var(--gw-color-info); --gw-tone-fill: var(--gw-color-fill-info-quiet); --gw-tone-border: var(--gw-color-border-info); } :host([tone=\"success\"]) { --gw-tone: var(--gw-color-success); --gw-tone-fill: var(--gw-color-fill-success-quiet); --gw-tone-border: var(--gw-color-border-success); } :host([tone=\"warning\"]) { --gw-tone: var(--gw-color-warning); --gw-tone-fill: var(--gw-color-fill-warning-quiet); --gw-tone-border: var(--gw-color-border-warning); } :host([tone=\"danger\"]) { --gw-tone: var(--gw-color-danger); --gw-tone-fill: var(--gw-color-fill-danger-quiet); --gw-tone-border: var(--gw-color-border-danger); } :host([tone=\"important\"]) { --gw-tone: var(--gw-color-important); --gw-tone-fill: var(--gw-color-fill-important-quiet); --gw-tone-border: var(--gw-color-border-important); } /* :host too, since * in a shadow root doesn't match it, and the skeletons pulse on their host */ @media (prefers-reduced-motion: reduce) { :host, *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } } `",
           "description": "What every component shares: box sizing, the focus ring, icons and the\ntones that set `--gw-tone` from a `tone` attribute."
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-ui",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "description": "Groundwork's framework-free web components, styled by the --gw-* tokens",
   "license": "Apache-2.0",
   "type": "module",
@@ -28,7 +28,7 @@
   "scripts": {
     "check": "bun run --parallel --no-exit-on-error lint typecheck format:check",
     "lint": "oxlint .",
-    "typecheck": "tsc",
+    "typecheck": "tsc && bun run scripts/typecheck-alone.ts",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "gen": "bun run scripts/manifest.ts",

package/src/gw-app-bar.ts

@@ -237,7 +237,11 @@ export class GwAppBar extends GwElement {
     this.#menuIcon,
   );
 
-  readonly #nav = h("div", { class: "nav", part: "nav" }, h("slot"));
+  readonly #nav: HTMLDivElement = h(
+    "div",
+    { class: "nav", part: "nav" },
+    h("slot"),
+  );
 
   #observer: IntersectionObserver | undefined;
 

package/src/gw-badge.ts

@@ -134,7 +134,7 @@ export class GwBadge extends GwElement {
     style: "--gw-skeleton-width: 3rem",
   });
 
-  readonly #value = h("span", { class: "value" }, h("slot"));
+  readonly #value: HTMLSpanElement = h("span", { class: "value" }, h("slot"));
 
   constructor() {
     super();

package/src/gw-banner.ts

@@ -90,7 +90,7 @@ export class GwBanner extends GwElement {
   declare open: boolean;
   declare urgent: boolean;
 
-  readonly #bar = h(
+  readonly #bar: HTMLDivElement = h(
     "div",
     { class: "bar", part: "bar" },
     h("slot", { name: "icon" }),

package/src/gw-card.ts

@@ -139,7 +139,7 @@ export class GwCard extends GwElement {
 
   readonly #headingSlot = h("slot", { name: "heading" });
 
-  readonly #header = h(
+  readonly #header: HTMLElement = h(
     "header",
     { part: "header" },
     h(
@@ -154,7 +154,11 @@ export class GwCard extends GwElement {
 
   readonly #skeleton = h("gw-skeleton-lines");
 
-  readonly #body = h("div", { class: "body", part: "body" }, h("slot"));
+  readonly #body: HTMLDivElement = h(
+    "div",
+    { class: "body", part: "body" },
+    h("slot"),
+  );
 
   #card: HTMLElement = h("section", { class: "card", part: "card" });
 

package/src/gw-chip.ts

@@ -115,7 +115,7 @@ export class GwChip extends GwElement {
     style: "--gw-skeleton-width: 3.5rem",
   });
 
-  readonly #content = h(
+  readonly #content: HTMLSpanElement = h(
     "span",
     { class: "content" },
     h("slot", { name: "icon" }, this.#icon, this.#swatch),

package/src/gw-command-menu.ts

@@ -156,7 +156,7 @@ export class GwCommandMenu extends GwElement {
 
   readonly #list = h("gw-option-list", { search: true, part: "list" });
 
-  readonly #dialog = h(
+  readonly #dialog: HTMLDialogElement = h(
     "dialog",
     { part: "dialog" },
     this.#list,

package/src/gw-expansion.ts

@@ -178,7 +178,7 @@ export class GwExpansion extends GwElement {
     part: "description",
   });
 
-  readonly #details = h(
+  readonly #details: HTMLDetailsElement = h(
     "details",
     { part: "details" },
     h(

package/src/gw-section-title.ts

@@ -48,7 +48,11 @@ export class GwSectionTitle extends GwElement {
 
   declare level: number;
 
-  readonly #heading = h("div", { role: "heading", part: "heading" }, h("slot"));
+  readonly #heading: HTMLDivElement = h(
+    "div",
+    { role: "heading", part: "heading" },
+    h("slot"),
+  );
 
   constructor() {
     super();

package/src/gw-setting-row.ts

@@ -115,7 +115,7 @@ export class GwSettingRow extends GwElement {
 
   readonly #description = h("div", { class: "description" });
 
-  readonly #descriptionSkeleton = h(
+  readonly #descriptionSkeleton: HTMLDivElement = h(
     "div",
     { class: "description" },
     h("gw-skeleton-text", { style: "--gw-skeleton-width: 12rem" }),

package/src/styles.ts

@@ -101,7 +101,10 @@ export const base = css`
     --gw-tone-border: var(--gw-color-border-important);
   }
 
+  /* :host too, since * in a shadow root doesn't match it, and the skeletons
+     pulse on their host */
   @media (prefers-reduced-motion: reduce) {
+    :host,
     *,
     *::before,
     *::after {