@timmo001/groundwork-ui 0.9.27 → 0.9.29

package/custom-elements.json

@@ -77,12 +77,43 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#question",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#view",
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "text",
+              "parameters": [
+                {
+                  "name": "question",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "keep",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "discard",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets the question and its buttons' text, for an app in another language."
+            },
             {
               "kind": "field",
               "name": "asking",
@@ -6552,7 +6583,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, open: { type: \"boolean\", reflect: true }, closeLabel: { attribute: \"close-label\" }, }",
+              "default": "{ heading: {}, open: { type: \"boolean\", reflect: true }, closeLabel: { attribute: \"close-label\" }, discardQuestion: { attribute: \"discard-question\" }, keepLabel: { attribute: \"keep-label\" }, discardLabel: { attribute: \"discard-label\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -6596,6 +6627,30 @@
               "description": "The close button's name, for an app in another language.",
               "default": "\"Close\""
             },
+            {
+              "kind": "field",
+              "name": "discardQuestion",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Discard your changes?\""
+            },
+            {
+              "kind": "field",
+              "name": "keepLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Keep editing\""
+            },
+            {
+              "kind": "field",
+              "name": "discardLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Discard\""
+            },
             {
               "kind": "field",
               "name": "returnValue",
@@ -7021,6 +7076,27 @@
               },
               "description": "The close button's name, for an app in another language. Defaults to `Close`.",
               "name": "close-label"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The question asked before closing with edits, for an app in another language. Defaults to `Discard your changes?`.",
+              "name": "discard-question"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The button that goes back to editing. Defaults to `Keep editing`.",
+              "name": "keep-label"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The button that throws the edits away. Defaults to `Discard`.",
+              "name": "discard-label"
             }
           ],
           "superclass": {
@@ -9944,7 +10020,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ label: {}, name: {}, type: {}, value: {}, placeholder: {}, autocomplete: {}, inputmode: {}, min: {}, max: {}, step: {}, hint: {}, info: {}, error: {}, required: { type: \"boolean\" }, optional: { type: \"boolean\" }, disabled: { type: \"boolean\" }, multiline: { type: \"boolean\", reflect: true }, rows: { type: \"number\" }, monospace: { type: \"boolean\", reflect: true }, reveal: { type: \"boolean\" }, size: { reflect: true }, icon: {}, labelHidden: { type: \"boolean\", attribute: \"label-hidden\", reflect: true }, }",
+              "default": "{ label: {}, name: {}, type: {}, value: {}, placeholder: {}, autocomplete: {}, inputmode: {}, min: {}, max: {}, step: {}, maxlength: { type: \"number\" }, hint: {}, info: {}, error: {}, required: { type: \"boolean\" }, optional: { type: \"boolean\" }, disabled: { type: \"boolean\" }, multiline: { type: \"boolean\", reflect: true }, rows: { type: \"number\" }, monospace: { type: \"boolean\", reflect: true }, reveal: { type: \"boolean\" }, size: { reflect: true }, icon: {}, labelHidden: { type: \"boolean\", attribute: \"label-hidden\", reflect: true }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -10034,6 +10110,15 @@
               "description": "The step between values of a number, date or time field.",
               "default": "\"\""
             },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number"
+              },
+              "description": "The most characters it takes, or 0 for no limit.",
+              "default": "0"
+            },
             {
               "kind": "field",
               "name": "hint",
@@ -10625,6 +10710,13 @@
               "description": "The step between values of a `number`, date or time field, or `any`.",
               "name": "step"
             },
+            {
+              "type": {
+                "text": "number"
+              },
+              "description": "The most characters it takes.",
+              "name": "maxlength"
+            },
             {
               "type": {
                 "text": "string"
@@ -12609,7 +12701,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, icon: {}, tone: { reflect: true }, time: {}, unread: { type: \"boolean\", reflect: true }, }",
+              "default": "{ heading: {}, icon: {}, tone: { reflect: true }, time: {}, unread: { type: \"boolean\", reflect: true }, dismissLabel: { attribute: \"dismiss-label\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -12668,6 +12760,14 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "dismissLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Dismiss\""
+            },
             {
               "kind": "field",
               "name": "#icon",
@@ -13053,6 +13153,13 @@
               },
               "description": "Marks it with a stripe until it's seen.",
               "name": "unread"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The close button's name, for an app in another language. Defaults to `Dismiss`.",
+              "name": "dismiss-label"
             }
           ],
           "superclass": {
@@ -14358,7 +14465,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ heading: {}, confirm: { type: \"boolean\" }, closeLabel: { attribute: \"close-label\" }, }",
+              "default": "{ heading: {}, confirm: { type: \"boolean\" }, closeLabel: { attribute: \"close-label\" }, discardQuestion: { attribute: \"discard-question\" }, keepLabel: { attribute: \"keep-label\" }, discardLabel: { attribute: \"discard-label\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -14402,6 +14509,30 @@
               "description": "The close button's name, for an app in another language.",
               "default": "\"Close\""
             },
+            {
+              "kind": "field",
+              "name": "discardQuestion",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Discard your changes?\""
+            },
+            {
+              "kind": "field",
+              "name": "keepLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Keep editing\""
+            },
+            {
+              "kind": "field",
+              "name": "discardLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Discard\""
+            },
             {
               "kind": "field",
               "name": "returnValue",
@@ -14859,6 +14990,27 @@
               },
               "description": "The close button's name, for an app in another language. Defaults to `Close`.",
               "name": "close-label"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The question asked before closing with edits, for an app in another language. Defaults to `Discard your changes?`.",
+              "name": "discard-question"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The button that goes back to editing. Defaults to `Keep editing`.",
+              "name": "keep-label"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The button that throws the edits away. Defaults to `Discard`.",
+              "name": "discard-label"
             }
           ],
           "superclass": {
@@ -16473,7 +16625,7 @@
                 "text": "Properties"
               },
               "static": true,
-              "default": "{ label: {}, name: {}, value: {}, multiple: { type: \"boolean\", reflect: true }, values: { type: \"json\" }, hint: {}, info: {}, placeholder: {}, search: {}, disabled: { type: \"boolean\" }, open: { type: \"boolean\", reflect: true }, options: { type: \"json\" }, labelHidden: { type: \"boolean\", attribute: \"label-hidden\" }, inlineLabel: { type: \"boolean\", attribute: \"inline-label\", reflect: true }, size: { reflect: true }, }",
+              "default": "{ label: {}, name: {}, value: {}, multiple: { type: \"boolean\", reflect: true }, values: { type: \"json\" }, hint: {}, info: {}, placeholder: {}, search: {}, disabled: { type: \"boolean\" }, open: { type: \"boolean\", reflect: true }, options: { type: \"json\" }, labelHidden: { type: \"boolean\", attribute: \"label-hidden\" }, inlineLabel: { type: \"boolean\", attribute: \"inline-label\", reflect: true }, size: { reflect: true }, clearLabel: { attribute: \"clear-label\" }, }",
               "inheritedFrom": {
                 "name": "GwElement",
                 "module": "src/element.ts"
@@ -16601,6 +16753,14 @@
               },
               "default": "\"medium\""
             },
+            {
+              "kind": "field",
+              "name": "clearLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Clear\""
+            },
             {
               "kind": "field",
               "name": "#id",
@@ -17170,6 +17330,13 @@
               },
               "description": "The field's size, 40px tall at medium. Defaults to `medium`.",
               "name": "size"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The button that clears a multiple choice, for an app in another language. Defaults to `Clear`.",
+              "name": "clear-label"
             }
           ],
           "superclass": {

package/package.json

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

package/src/dismiss.ts

@@ -74,10 +74,12 @@ export class Dismissal {
     "Discard",
   );
 
+  readonly #question = h("p", {}, "Discard your changes?");
+
   readonly #view = h(
     "div",
     { class: "discard", role: "alert" },
-    h("p", {}, "Discard your changes?"),
+    this.#question,
     h("footer", {}, this.#keep, this.#discard),
   );
 
@@ -107,6 +109,13 @@ export class Dismissal {
     });
   }
 
+  /** Sets the question and its buttons' text, for an app in another language. */
+  text(question: string, keep: string, discard: string) {
+    this.#question.textContent = question;
+    this.#keep.textContent = keep;
+    this.#discard.textContent = discard;
+  }
+
   /** Whether it's showing the question rather than the content. */
   get asking() {
     return this.#surface.dataset.view === "discard";

package/src/gw-dialog.ts

@@ -25,6 +25,9 @@ const closeIcon =
  * @attr {string} heading - The heading beside the close button.
  * @attr {boolean} open - Whether it shows.
  * @attr {string} close-label - The close button's name, for an app in another language. Defaults to `Close`.
+ * @attr {string} discard-question - The question asked before closing with edits, for an app in another language. Defaults to `Discard your changes?`.
+ * @attr {string} keep-label - The button that goes back to editing. Defaults to `Keep editing`.
+ * @attr {string} discard-label - The button that throws the edits away. Defaults to `Discard`.
  *
  * @slot - The content.
  * @slot actions - Buttons; one with a `value` closes it with that value.
@@ -42,6 +45,9 @@ export class GwDialog extends GwElement {
     heading: {},
     open: { type: "boolean", reflect: true },
     closeLabel: { attribute: "close-label" },
+    discardQuestion: { attribute: "discard-question" },
+    keepLabel: { attribute: "keep-label" },
+    discardLabel: { attribute: "discard-label" },
   } as const;
 
   static override styles = [
@@ -148,6 +154,9 @@ export class GwDialog extends GwElement {
   declare open: boolean;
   /** The close button's name, for an app in another language. */
   declare closeLabel: string;
+  declare discardQuestion: string;
+  declare keepLabel: string;
+  declare discardLabel: string;
 
   /** The value of the action that closed the dialog, or "" for Esc. */
   returnValue = "";
@@ -157,6 +166,9 @@ export class GwDialog extends GwElement {
     this.heading = "";
     this.open = false;
     this.closeLabel = "Close";
+    this.discardQuestion = "Discard your changes?";
+    this.keepLabel = "Keep editing";
+    this.discardLabel = "Discard";
   }
 
   readonly #heading = h("h2", { id: "heading", part: "heading" });
@@ -251,6 +263,11 @@ export class GwDialog extends GwElement {
 
     this.#heading.textContent = this.heading;
     this.#closeButton.textContent = this.closeLabel;
+    this.#dismissal.text(
+      this.discardQuestion,
+      this.keepLabel,
+      this.discardLabel,
+    );
 
     if (this.open && !dialog.open) {
       dialog.showModal();

package/src/gw-input.ts

@@ -34,6 +34,7 @@ const hideIcon =
  * @attr {string} min - The lowest value of a `number`, date or time field.
  * @attr {string} max - The highest value of a `number`, date or time field.
  * @attr {string} step - The step between values of a `number`, date or time field, or `any`.
+ * @attr {number} maxlength - The most characters it takes.
  * @attr {string} hint - One line of help under the field.
  * @attr {string} info - Longer help, opened from an (i) button by the label.
  * @attr {string} error - An error under the field, which marks it invalid and is announced.
@@ -63,6 +64,7 @@ export class GwInput extends LightElement {
     min: {},
     max: {},
     step: {},
+    maxlength: { type: "number" },
     hint: {},
     info: {},
     error: {},
@@ -92,6 +94,8 @@ export class GwInput extends LightElement {
   declare max: string;
   /** The step between values of a number, date or time field. */
   declare step: string;
+  /** The most characters it takes, or 0 for no limit. */
+  declare maxlength: number;
   declare hint: string;
   /** Longer help, opened from an (i) button by the label. */
   declare info: string;
@@ -172,6 +176,7 @@ export class GwInput extends LightElement {
     this.min = "";
     this.max = "";
     this.step = "";
+    this.maxlength = 0;
     this.hint = "";
     this.info = "";
     this.error = "";
@@ -271,6 +276,11 @@ export class GwInput extends LightElement {
     setAttribute(this.#input, "min", this.min || null);
     setAttribute(this.#input, "max", this.max || null);
     setAttribute(this.#input, "step", this.step || null);
+    setAttribute(
+      control,
+      "maxlength",
+      this.maxlength > 0 ? String(this.maxlength) : null,
+    );
     setAttribute(control, "spellcheck", this.monospace ? "false" : null);
     setAttribute(control, "aria-invalid", this.error ? "true" : null);
     setAttribute(control, "aria-describedby", described || null);

package/src/gw-notification.ts

@@ -28,6 +28,7 @@ const closeIcon =
  * @attr {"neutral"|"accent"|"info"|"success"|"warning"|"danger"|"important"} tone - The icon's color. Defaults to `neutral`.
  * @attr {string} time - When it happened, as shown, such as `2 min ago`.
  * @attr {boolean} unread - Marks it with a stripe until it's seen.
+ * @attr {string} dismiss-label - The close button's name, for an app in another language. Defaults to `Dismiss`.
  *
  * @slot - A line of text.
  * @slot actions - Up to two buttons.
@@ -45,6 +46,7 @@ export class GwNotification extends GwElement {
     tone: { reflect: true },
     time: {},
     unread: { type: "boolean", reflect: true },
+    dismissLabel: { attribute: "dismiss-label" },
   } as const;
 
   static override styles = [
@@ -129,6 +131,7 @@ export class GwNotification extends GwElement {
   declare tone: Tone;
   declare time: string;
   declare unread: boolean;
+  declare dismissLabel: string;
 
   readonly #icon = createIcon("");
 
@@ -156,6 +159,7 @@ export class GwNotification extends GwElement {
     this.tone = "neutral";
     this.time = "";
     this.unread = false;
+    this.dismissLabel = "Dismiss";
   }
 
   /** Fires `dismiss`, then folds away and removes itself unless that's cancelled. */
@@ -212,6 +216,7 @@ export class GwNotification extends GwElement {
     this.#heading.textContent = this.heading;
     this.#heading.hidden = !this.heading;
     this.#time.textContent = this.time;
+    this.#close.textContent = this.dismissLabel;
   }
 }
 

package/src/gw-popover.ts

@@ -35,6 +35,9 @@ const sheetBelow = 600;
  * @attr {string} heading - The heading beside the close button.
  * @attr {boolean} confirm - Makes it an `alertdialog`, for a question that needs an answer.
  * @attr {string} close-label - The close button's name, for an app in another language. Defaults to `Close`.
+ * @attr {string} discard-question - The question asked before closing with edits, for an app in another language. Defaults to `Discard your changes?`.
+ * @attr {string} keep-label - The button that goes back to editing. Defaults to `Keep editing`.
+ * @attr {string} discard-label - The button that throws the edits away. Defaults to `Discard`.
  *
  * @slot - The content.
  * @slot actions - Buttons; one with a `value` closes it with that value.
@@ -53,6 +56,9 @@ export class GwPopover extends GwElement {
     heading: {},
     confirm: { type: "boolean" },
     closeLabel: { attribute: "close-label" },
+    discardQuestion: { attribute: "discard-question" },
+    keepLabel: { attribute: "keep-label" },
+    discardLabel: { attribute: "discard-label" },
   } as const;
 
   static override styles = [
@@ -197,6 +203,9 @@ export class GwPopover extends GwElement {
   declare confirm: boolean;
   /** The close button's name, for an app in another language. */
   declare closeLabel: string;
+  declare discardQuestion: string;
+  declare keepLabel: string;
+  declare discardLabel: string;
 
   /** The value of the action that closed it, or "" for Esc or a click outside. */
   returnValue = "";
@@ -252,6 +261,9 @@ export class GwPopover extends GwElement {
     this.heading = "";
     this.confirm = false;
     this.closeLabel = "Close";
+    this.discardQuestion = "Discard your changes?";
+    this.keepLabel = "Keep editing";
+    this.discardLabel = "Discard";
   }
 
   /** Whether its content has changed since it opened, so closing it asks first. */
@@ -399,6 +411,11 @@ export class GwPopover extends GwElement {
     this.#heading.textContent = this.heading;
     this.#heading.hidden = !this.heading;
     this.#closeButton.textContent = this.closeLabel;
+    this.#dismissal.text(
+      this.discardQuestion,
+      this.keepLabel,
+      this.discardLabel,
+    );
   }
 }
 

package/src/gw-select.ts

@@ -63,6 +63,7 @@ const chevronIcon =
  * @attr {boolean} label-hidden - Hides the label but keeps it for assistive technology.
  * @attr {boolean} inline-label - Shows the label inside the trigger, before the value, for toolbars and filters.
  * @attr {"xs"|"small"|"medium"|"large"|"xl"} size - The field's size, 40px tall at medium. Defaults to `medium`.
+ * @attr {string} clear-label - The button that clears a multiple choice, for an app in another language. Defaults to `Clear`.
  *
  * @cssprop --gw-field-scale - Scales the field, around 1 for medium.
  * @cssprop --gw-control-scale - Scales its height with the theme's density. The theme sets it.
@@ -86,6 +87,7 @@ export class GwSelect extends LightElement {
     labelHidden: { type: "boolean", attribute: "label-hidden" },
     inlineLabel: { type: "boolean", attribute: "inline-label", reflect: true },
     size: { reflect: true },
+    clearLabel: { attribute: "clear-label" },
   } as const;
 
   declare label: string;
@@ -105,6 +107,7 @@ export class GwSelect extends LightElement {
   declare labelHidden: boolean;
   declare inlineLabel: boolean;
   declare size: "xs" | "small" | "medium" | "large" | "xl";
+  declare clearLabel: string;
 
   readonly #id = fieldId();
 
@@ -179,6 +182,7 @@ export class GwSelect extends LightElement {
     this.labelHidden = false;
     this.inlineLabel = false;
     this.size = "medium";
+    this.clearLabel = "Clear";
   }
 
   /** Opens the list, such as from a keyboard shortcut. */
@@ -439,6 +443,7 @@ export class GwSelect extends LightElement {
         : []),
     );
     this.#clear.hidden = !this.multiple || values.length === 0;
+    this.#clear.textContent = this.clearLabel;
 
     const list = this.#list;