@lit-material/button 0.1.3 → 0.2.0

package/README.md

@@ -42,6 +42,28 @@ Slots: default (label), `icon` (leading icon).
 `type="submit"` and `type="reset"` participate in an ancestor `<form>` via
 `ElementInternals`; setting `href` renders an `<a>` instead of a `<button>`.
 
+## Action list
+
+`lit-material-action-list` lays out a row of actions with consistent spacing — a form's Cancel and
+Save, a toolbar, a card's links — wrapping when it runs out of room.
+
+```html
+<lit-material-action-list align="end" label="Form actions">
+  <lit-material-button variant="text">Cancel</lit-material-button>
+  <lit-material-button>Save</lit-material-button>
+</lit-material-action-list>
+```
+
+| Property  | Attribute | Type | Default |
+| --------- | --------- | ---- | ------- |
+| `align`   | `align` (reflected) | `"start" \| "end" \| "between"` | `"start"` |
+| `compact` | `compact` (reflected) | `boolean` (4px gaps, for icon buttons) | `false` |
+| `label`   | `label`   | `string` (names the row; it becomes `role="group"`) | `""` |
+
+Nest action lists to group actions: groups sit 16px apart, actions in a group 8px. `end` and
+`between` take the full width (or the rest of a flex row) so there is room to align in.
+`--lit-material-action-list-gap` overrides the spacing.
+
 ## Styling
 
 Theme the component through custom properties rather than `::part`:

package/custom-elements.json

@@ -2,6 +2,126 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/action-list.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A row of actions with consistent spacing: a form's Cancel and Save, a\ntoolbar's buttons, a card's links. Items wrap onto a new line when the\nrow runs out of room.\n\nNest lists to group actions: a list holding lists spaces the groups wider\napart than the actions inside them. `label` names the row for assistive\ntechnology (it becomes a `group`).",
+          "name": "LitMaterialActionList",
+          "cssProperties": [
+            {
+              "description": "Space between actions (default `8px`, `16px` between groups, `4px` when `compact`).",
+              "name": "--lit-material-action-list-gap"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The actions (buttons, icon buttons, links) or nested action lists.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "align",
+              "type": {
+                "text": "ActionListAlign"
+              },
+              "default": "\"start\"",
+              "description": "Where the actions sit in the row: `start`, `end` (dialogs, forms) or `between` (spread out).",
+              "attribute": "align",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Tighter spacing, for icon buttons.",
+              "attribute": "compact",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Names the row; it then has `role=\"group\"`.",
+              "attribute": "label"
+            },
+            {
+              "kind": "method",
+              "name": "onSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "align",
+              "type": {
+                "text": "ActionListAlign"
+              },
+              "default": "\"start\"",
+              "description": "Where the actions sit in the row: `start`, `end` (dialogs, forms) or `between` (spread out).",
+              "fieldName": "align"
+            },
+            {
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Tighter spacing, for icon buttons.",
+              "fieldName": "compact"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Names the row; it then has `role=\"group\"`.",
+              "fieldName": "label"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-action-list",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialActionList",
+          "declaration": {
+            "name": "LitMaterialActionList",
+            "module": "src/action-list.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-action-list",
+          "declaration": {
+            "name": "LitMaterialActionList",
+            "module": "src/action-list.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/button-styles.ts",
@@ -376,6 +496,22 @@
             "name": "ButtonType",
             "module": "./button.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "LitMaterialActionList",
+          "declaration": {
+            "name": "LitMaterialActionList",
+            "module": "./action-list.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ActionListAlign",
+          "declaration": {
+            "name": "ActionListAlign",
+            "module": "./action-list.js"
+          }
         }
       ]
     }

package/dist/action-list.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from "lit";
+export type ActionListAlign = "start" | "end" | "between";
+/**
+ * A row of actions with consistent spacing: a form's Cancel and Save, a
+ * toolbar's buttons, a card's links. Items wrap onto a new line when the
+ * row runs out of room.
+ *
+ * Nest lists to group actions: a list holding lists spaces the groups wider
+ * apart than the actions inside them. `label` names the row for assistive
+ * technology (it becomes a `group`).
+ *
+ * @element lit-material-action-list
+ *
+ * @slot - The actions (buttons, icon buttons, links) or nested action lists.
+ *
+ * @cssprop --lit-material-action-list-gap - Space between actions (default `8px`, `16px` between groups, `4px` when `compact`).
+ */
+export declare class LitMaterialActionList extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Where the actions sit in the row: `start`, `end` (dialogs, forms) or `between` (spread out). */
+    align: ActionListAlign;
+    /** Tighter spacing, for icon buttons. */
+    compact: boolean;
+    /** Names the row; it then has `role="group"`. */
+    label: string;
+    protected updated(changed: Map<string, unknown>): void;
+    private onSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-action-list": LitMaterialActionList;
+    }
+}
+//# sourceMappingURL=action-list.d.ts.map

package/dist/action-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-list.d.ts","sourceRoot":"","sources":["../src/action-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;AAE1D;;;;;;;;;;;;;;GAcG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BA6BpB;IAEF,mGAAmG;IACtE,KAAK,EAAE,eAAe,CAAW;IAE9D,yCAAyC;IACG,OAAO,UAAS;IAE5D,iDAAiD;IACrC,KAAK,SAAM;cAEJ,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAW/D,OAAO,CAAC,YAAY;IAIX,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,0BAA0B,EAAE,qBAAqB,CAAC;KACnD;CACF"}

package/dist/action-list.js

@@ -0,0 +1,98 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var LitMaterialActionList_1;
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+/**
+ * A row of actions with consistent spacing: a form's Cancel and Save, a
+ * toolbar's buttons, a card's links. Items wrap onto a new line when the
+ * row runs out of room.
+ *
+ * Nest lists to group actions: a list holding lists spaces the groups wider
+ * apart than the actions inside them. `label` names the row for assistive
+ * technology (it becomes a `group`).
+ *
+ * @element lit-material-action-list
+ *
+ * @slot - The actions (buttons, icon buttons, links) or nested action lists.
+ *
+ * @cssprop --lit-material-action-list-gap - Space between actions (default `8px`, `16px` between groups, `4px` when `compact`).
+ */
+let LitMaterialActionList = class LitMaterialActionList extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Where the actions sit in the row: `start`, `end` (dialogs, forms) or `between` (spread out). */
+        this.align = "start";
+        /** Tighter spacing, for icon buttons. */
+        this.compact = false;
+        /** Names the row; it then has `role="group"`. */
+        this.label = "";
+    }
+    static { LitMaterialActionList_1 = this; }
+    static { this.styles = css `
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--lit-material-action-list-gap, 8px);
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    :host([grouped]) {
+      gap: var(--lit-material-action-list-gap, 16px);
+    }
+    :host([compact]) {
+      gap: var(--lit-material-action-list-gap, 4px);
+    }
+    /* Aligning needs the room to align in: the full width, also as an item
+       of a column flexbox, or the rest of a row flexbox's line. */
+    :host([align="end"]),
+    :host([align="between"]) {
+      flex-grow: 1;
+      align-self: stretch;
+    }
+    :host([align="end"]) {
+      justify-content: flex-end;
+    }
+    :host([align="between"]) {
+      justify-content: space-between;
+    }
+  `; }
+    updated(changed) {
+        if (!changed.has("label"))
+            return;
+        if (this.label) {
+            this.setAttribute("role", "group");
+            this.setAttribute("aria-label", this.label);
+        }
+        else {
+            this.removeAttribute("role");
+            this.removeAttribute("aria-label");
+        }
+    }
+    onSlotChange() {
+        this.toggleAttribute("grouped", Array.from(this.children).some((el) => el instanceof LitMaterialActionList_1));
+    }
+    render() {
+        return html `<slot @slotchange=${this.onSlotChange}></slot>`;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], LitMaterialActionList.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialActionList.prototype, "compact", void 0);
+__decorate([
+    property()
+], LitMaterialActionList.prototype, "label", void 0);
+LitMaterialActionList = LitMaterialActionList_1 = __decorate([
+    customElement("lit-material-action-list")
+], LitMaterialActionList);
+export { LitMaterialActionList };
+//# sourceMappingURL=action-list.js.map

package/dist/action-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-list.js","sourceRoot":"","sources":["../src/action-list.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D;;;;;;;;;;;;;;GAcG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAA9C;;QAgCL,mGAAmG;QACtE,UAAK,GAAoB,OAAO,CAAC;QAE9D,yCAAyC;QACG,YAAO,GAAG,KAAK,CAAC;QAE5D,iDAAiD;QACrC,UAAK,GAAG,EAAE,CAAC;IAoBzB,CAAC;;aA1DiB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6B3B,AA7BqB,CA6BpB;IAWiB,OAAO,CAAC,OAA6B;QACtD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YAAE,OAAO;QAClC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACnC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YAC7B,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,eAAe,CAAC,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,YAAY,uBAAqB,CAAC,CAAC,CAAC;IAC/G,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA,qBAAqB,IAAI,CAAC,YAAY,UAAU,CAAC;IAC9D,CAAC;;AAzB4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAkC;AAGlB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAiB;AAGhD;IAAX,QAAQ,EAAE;oDAAY;AAvCZ,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CA2DjC"}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { LitMaterialButton, type ButtonVariant, type ButtonType } from "./button.js";
+export { LitMaterialActionList, type ActionListAlign } from "./action-list.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AACrF,OAAO,EAAE,qBAAqB,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -1,2 +1,3 @@
 export { LitMaterialButton } from "./button.js";
+export { LitMaterialActionList } from "./action-list.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAuC,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAuC,MAAM,aAAa,CAAC;AACrF,OAAO,EAAE,qBAAqB,EAAwB,MAAM,kBAAkB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lit-material/button",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Material Design 3 button web component (filled, outlined, text, elevated, tonal).",
   "license": "MIT",
   "author": {