@timmo001/groundwork-ui 0.9.20 → 0.9.21

package/custom-elements.json

@@ -3722,9 +3722,17 @@
               "description": "The heading.",
               "name": "heading"
             },
+            {
+              "description": "The line under the heading.",
+              "name": "description"
+            },
             {
               "description": "The content.",
               "name": "body"
+            },
+            {
+              "description": "The area under the divider.",
+              "name": "footer"
             }
           ],
           "slots": [
@@ -3739,6 +3747,10 @@
             {
               "description": "Buttons beside the heading.",
               "name": "actions"
+            },
+            {
+              "description": "Content under a divider at the bottom, such as a control for the whole card.",
+              "name": "footer"
             }
           ],
           "members": [
@@ -3749,7 +3761,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, href: {}, flush: { type: \"boolean\", reflect: true }, loading: { type: \"boolean\", reflect: true }, lines: { type: \"number\" }, }",
+              "default": "{ heading: {}, description: {}, level: { type: \"number\" }, href: {}, flush: { type: \"boolean\", reflect: true }, loading: { type: \"boolean\", reflect: true }, lines: { type: \"number\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -3762,7 +3774,7 @@
                 "text": "readonly CSSStyleSheet[]"
               },
               "static": true,
-              "default": "[ base, css` :host { display: block; } .card { display: flex; flex-direction: column; gap: var(--gw-space-3); height: 100%; padding: var(--gw-space-4); color: inherit; text-decoration: none; background: var(--gw-color-surface-raised); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-s); } :host([flush]) .card { padding: 0; overflow: hidden; } a.card { transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } a.card:hover, .card.linked:hover { border-color: var(--gw-color-border-accent); } /* A card following a link in its heading slot */ .card.linked { cursor: pointer; transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } .card.focused { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } ::slotted([slot=\"heading\"]) { font: inherit; color: inherit; } ::slotted(a[slot=\"heading\"]) { text-decoration: none; outline: none; } header { display: flex; gap: var(--gw-space-2); align-items: center; } h2 { flex: 1; margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .body:not([hidden]) { display: flex; flex-direction: column; gap: inherit; } `, ]",
+              "default": "[ base, css` :host { display: block; } .card { display: flex; flex-direction: column; gap: var(--gw-space-3); height: 100%; padding: var(--gw-space-4); color: inherit; text-decoration: none; background: var(--gw-color-surface-raised); border: var(--gw-border-width) solid var(--gw-color-border-normal); border-radius: var(--gw-radius-panel); box-shadow: var(--gw-shadow-s); } :host([flush]) .card { padding: 0; overflow: hidden; } a.card { transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } a.card:hover, .card.linked:hover { border-color: var(--gw-color-border-accent); } /* A card following a link in its heading slot */ .card.linked { cursor: pointer; transition: border-color var(--gw-motion-fast) var(--gw-motion-easing); } .card.focused { outline: var(--gw-focus-width) solid var(--gw-color-focus); outline-offset: var(--gw-focus-offset); } ::slotted([slot=\"heading\"]) { font: inherit; color: inherit; } ::slotted(a[slot=\"heading\"]) { text-decoration: none; outline: none; } header { display: flex; gap: var(--gw-space-2); align-items: center; } .titles { display: flex; flex: 1; flex-direction: column; gap: var(--gw-space-0-5); min-width: 0; } .title { margin: 0; font-size: var(--gw-font-size-m); font-weight: var(--gw-font-weight-strong); color: var(--gw-color-text-strong); } .description { font-size: var(--gw-font-size-xs); color: var(--gw-color-text-secondary); } /* The divider runs to the card's edges */ footer:not([hidden]) { display: flex; flex-direction: column; gap: inherit; margin-inline: calc(-1 * var(--gw-space-4)); padding: var(--gw-space-3) var(--gw-space-4) 0; border-top: var(--gw-border-width) solid var(--gw-color-border-normal); } :host([flush]) footer:not([hidden]) { margin-inline: 0; padding-bottom: var(--gw-space-3); } .body:not([hidden]) { display: flex; flex-direction: column; gap: inherit; } `, ]",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -3776,6 +3788,23 @@
               },
               "default": "\"\""
             },
+            {
+              "kind": "field",
+              "name": "description",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "level",
+              "type": {
+                "text": "number"
+              },
+              "description": "The heading's level for assistive tech.",
+              "default": "2"
+            },
             {
               "kind": "field",
               "name": "href",
@@ -3827,6 +3856,18 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#heading",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#description",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#header",
@@ -3836,6 +3877,21 @@
               },
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#footerSlot",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#footer",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#skeleton",
@@ -4208,6 +4264,20 @@
               "description": "The card's heading.",
               "name": "heading"
             },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "A line under the heading.",
+              "name": "description"
+            },
+            {
+              "type": {
+                "text": "number"
+              },
+              "description": "The heading's level for assistive tech, 2 by default. Use 3 for a card under a section heading.",
+              "name": "level"
+            },
             {
               "type": {
                 "text": "string"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-ui",
-  "version": "0.9.20",
+  "version": "0.9.21",
   "description": "Groundwork's framework-free web components, styled by the --gw-* tokens",
   "license": "Apache-2.0",
   "type": "module",

package/src/gw-card.ts

@@ -25,6 +25,8 @@ import { base } from "./styles.js";
  * @summary A surface for one group of content, or a link to more.
  *
  * @attr {string} heading - The card's heading.
+ * @attr {string} description - A line under the heading.
+ * @attr {number} level - The heading's level for assistive tech, 2 by default. Use 3 for a card under a section heading.
  * @attr {string} href - Makes the whole card a link to this address.
  * @attr {boolean} flush - Drops the padding, for content that runs to the edges.
  * @attr {boolean} loading - Shows skeleton lines for the content and any unknown heading.
@@ -33,15 +35,20 @@ import { base } from "./styles.js";
  * @slot - The content.
  * @slot heading - The heading, in place of `heading`. An `<a>` here makes the whole card follow it.
  * @slot actions - Buttons beside the heading.
+ * @slot footer - Content under a divider at the bottom, such as a control for the whole card.
  *
  * @csspart card - The card's surface.
  * @csspart header - The row with the heading and actions.
  * @csspart heading - The heading.
+ * @csspart description - The line under the heading.
  * @csspart body - The content.
+ * @csspart footer - The area under the divider.
  */
 export class GwCard extends GwElement {
   static override properties = {
     heading: {},
+    description: {},
+    level: { type: "number" },
     href: {},
     flush: { type: "boolean", reflect: true },
     loading: { type: "boolean", reflect: true },
@@ -110,14 +117,41 @@ export class GwCard extends GwElement {
         align-items: center;
       }
 
-      h2 {
+      .titles {
+        display: flex;
         flex: 1;
+        flex-direction: column;
+        gap: var(--gw-space-0-5);
+        min-width: 0;
+      }
+
+      .title {
         margin: 0;
         font-size: var(--gw-font-size-m);
         font-weight: var(--gw-font-weight-strong);
         color: var(--gw-color-text-strong);
       }
 
+      .description {
+        font-size: var(--gw-font-size-xs);
+        color: var(--gw-color-text-secondary);
+      }
+
+      /* The divider runs to the card's edges */
+      footer:not([hidden]) {
+        display: flex;
+        flex-direction: column;
+        gap: inherit;
+        margin-inline: calc(-1 * var(--gw-space-4));
+        padding: var(--gw-space-3) var(--gw-space-4) 0;
+        border-top: var(--gw-border-width) solid var(--gw-color-border-normal);
+      }
+
+      :host([flush]) footer:not([hidden]) {
+        margin-inline: 0;
+        padding-bottom: var(--gw-space-3);
+      }
+
       .body:not([hidden]) {
         display: flex;
         flex-direction: column;
@@ -127,6 +161,9 @@ export class GwCard extends GwElement {
   ];
 
   declare heading: string;
+  declare description: string;
+  /** The heading's level for assistive tech. */
+  declare level: number;
   declare href: string;
   declare flush: boolean;
   declare loading: boolean;
@@ -139,19 +176,34 @@ export class GwCard extends GwElement {
 
   readonly #headingSlot = h("slot", { name: "heading" });
 
+  readonly #heading = h(
+    "div",
+    { class: "title", part: "heading", role: "heading", "aria-level": "2" },
+    this.#title,
+    this.#headingSlot,
+    this.#titleSkeleton,
+  );
+
+  readonly #description = h("span", {
+    class: "description",
+    part: "description",
+  });
+
   readonly #header: HTMLElement = h(
     "header",
     { part: "header" },
-    h(
-      "h2",
-      { part: "heading" },
-      this.#title,
-      this.#headingSlot,
-      this.#titleSkeleton,
-    ),
+    h("div", { class: "titles" }, this.#heading, this.#description),
     h("slot", { name: "actions" }),
   );
 
+  readonly #footerSlot = h("slot", { name: "footer" });
+
+  readonly #footer: HTMLElement = h(
+    "footer",
+    { part: "footer", hidden: "" },
+    this.#footerSlot,
+  );
+
   readonly #skeleton = h("gw-skeleton-lines");
 
   readonly #body: HTMLDivElement = h(
@@ -169,6 +221,8 @@ export class GwCard extends GwElement {
   constructor() {
     super();
     this.heading = "";
+    this.description = "";
+    this.level = 2;
     this.href = "";
     this.flush = false;
     this.loading = false;
@@ -215,6 +269,11 @@ export class GwCard extends GwElement {
     this.#headingSlot.addEventListener("slotchange", () => {
       this.requestUpdate("heading");
     });
+
+    this.#footerSlot.addEventListener("slotchange", () => {
+      this.#footer.hidden =
+        this.#footerSlot.assignedNodes({ flatten: true }).length === 0;
+    });
   }
 
   /** The `<a>` in the heading slot, or holding it, when there is one. */
@@ -227,7 +286,7 @@ export class GwCard extends GwElement {
   }
 
   protected override create(root: ShadowRoot) {
-    this.#card.append(this.#header, this.#skeleton, this.#body);
+    this.#card.append(this.#header, this.#skeleton, this.#body, this.#footer);
     root.append(this.#card);
   }
 
@@ -260,9 +319,14 @@ export class GwCard extends GwElement {
 
     this.#card.classList.toggle("linked", this.#link() !== null && !this.href);
     this.#title.textContent = this.heading;
+    this.#heading.setAttribute("aria-level", String(this.level || 2));
+    this.#description.textContent = this.description;
+    this.#description.hidden = !this.description;
     this.#titleSkeleton.hidden =
       this.heading !== "" || slotted || !this.loading;
-    this.#header.hidden = !this.heading && !slotted && !this.loading;
+    this.#header.hidden =
+      !this.heading && !this.description && !slotted && !this.loading;
+    this.#heading.hidden = !this.heading && !slotted && !this.loading;
     this.#skeleton.lines = this.lines;
     this.#skeleton.hidden = !this.loading;
     this.#body.hidden = this.loading;