bank20baht-ui 0.8.1 → 0.8.2

package/dist/components/primitives/baht-button.d.ts

@@ -12,6 +12,7 @@ export type ButtonSize = 'sm' | 'md' | 'lg';
  *   <baht-button label="Save workflow"></baht-button>
  *   <baht-button icon="copy" variant="ghost" size="sm">Copy</baht-button>
  *   <baht-button icon="close" icon-only label="Close"></baht-button>  <!-- label = a11y name -->
+ *   <baht-button aria-label="Previous month">‹</baht-button>  <!-- glyph child, host aria-label wins -->
  */
 export declare class BahtButton extends BahtElement {
     variant: ButtonVariant;
@@ -25,6 +26,18 @@ export declare class BahtButton extends BahtElement {
     icon: IconName | '';
     /** Square icon-only button. Requires `label` for the accessible name. */
     iconOnly: boolean;
+    /**
+     * A host `aria-label` never reaches assistive tech on its own — light DOM has no
+     * implicit ARIA relationship between a custom element and its rendered children, so an
+     * `aria-label` written on `<baht-button>` stays on the host and the inner native
+     * `<button>` keeps whatever text (or none) is inside it. Mirroring the attribute into
+     * this property forwards it to the inner button's `aria-label`, taking priority over
+     * `label`/icon-only fallback — this is how a glyph-only child (e.g. `‹`) gets a real
+     * accessible name without `icon-only`. Mapped to the plain `aria-label` attribute so
+     * hosts write it the way they naturally would; kept off the `ariaLabel` IDL accessor to
+     * avoid shadowing the platform's own ARIAMixin.
+     */
+    hostAriaLabel: string;
     private buttonEl;
     protected firstUpdated(): void;
     protected render(): TemplateResult;

package/dist/components/primitives/baht-button.js

@@ -1,27 +1,27 @@
-import { nothing as h, html as b } from "lit";
+import { nothing as p, html as b } from "lit";
 import { property as e, query as c, customElement as y } from "lit/decorators.js";
 import { BahtElement as u, adoptLightChildren as m } from "../base.js";
 import { isIconName as d, renderIcon as f } from "./icons.js";
-var v = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (a, n, r, s) => {
-  for (var i = s > 1 ? void 0 : s ? O(n, r) : n, l = a.length - 1, p; l >= 0; l--)
-    (p = a[l]) && (i = (s ? p(n, r, i) : p(i)) || i);
-  return s && i && v(n, r, i), i;
+var v = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (r, s, a, n) => {
+  for (var i = n > 1 ? void 0 : n ? O(s, a) : s, l = r.length - 1, h; l >= 0; l--)
+    (h = r[l]) && (i = (n ? h(s, a, i) : h(i)) || i);
+  return n && i && v(s, a, i), i;
 };
 let t = class extends u {
   constructor() {
-    super(...arguments), this.variant = "primary", this.size = "md", this.disabled = !1, this.type = "button", this.label = "", this.icon = "", this.iconOnly = !1;
+    super(...arguments), this.variant = "primary", this.size = "md", this.disabled = !1, this.type = "button", this.label = "", this.icon = "", this.iconOnly = !1, this.hostAriaLabel = "";
   }
   firstUpdated() {
     this.iconOnly || m(this, this.buttonEl);
   }
   render() {
-    const a = this.variant === "primary" ? "" : ` baht-button--${this.variant}`, n = this.size === "md" ? "" : ` baht-button--${this.size}`, r = this.iconOnly ? " baht-button--icon" : "", s = this.icon && d(this.icon) ? f(this.icon) : h;
+    const r = this.variant === "primary" ? "" : ` baht-button--${this.variant}`, s = this.size === "md" ? "" : ` baht-button--${this.size}`, a = this.iconOnly ? " baht-button--icon" : "", n = this.icon && d(this.icon) ? f(this.icon) : p, i = this.hostAriaLabel || (this.iconOnly && this.label ? this.label : "");
     return b`<button
-      class="baht-button${a}${n}${r}"
+      class="baht-button${r}${s}${a}"
       type=${this.type}
-      aria-label=${this.iconOnly && this.label ? this.label : h}
+      aria-label=${i || p}
       ?disabled=${this.disabled}
-    >${s}${this.iconOnly ? h : this.label}</button>`;
+    >${n}${this.iconOnly ? p : this.label}</button>`;
   }
 };
 o([
@@ -45,6 +45,9 @@ o([
 o([
   e({ type: Boolean, attribute: "icon-only" })
 ], t.prototype, "iconOnly", 2);
+o([
+  e({ attribute: "aria-label" })
+], t.prototype, "hostAriaLabel", 2);
 o([
   c("button")
 ], t.prototype, "buttonEl", 2);

package/dist/custom-elements.json

@@ -4015,7 +4015,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Design-system button (20baht: no scale, no shadow change — color does the work).\nStandalone primitive: children become the label, listen for the native `click`.\n(Light DOM has no <slot>, so the initial children are moved into the button.)\n\n  <baht-button variant=\"danger\" size=\"sm\">Delete</baht-button>\n  <baht-button label=\"Save workflow\"></baht-button>\n  <baht-button icon=\"copy\" variant=\"ghost\" size=\"sm\">Copy</baht-button>\n  <baht-button icon=\"close\" icon-only label=\"Close\"></baht-button>  <!-- label = a11y name -->",
+          "description": "Design-system button (20baht: no scale, no shadow change — color does the work).\nStandalone primitive: children become the label, listen for the native `click`.\n(Light DOM has no <slot>, so the initial children are moved into the button.)\n\n  <baht-button variant=\"danger\" size=\"sm\">Delete</baht-button>\n  <baht-button label=\"Save workflow\"></baht-button>\n  <baht-button icon=\"copy\" variant=\"ghost\" size=\"sm\">Copy</baht-button>\n  <baht-button icon=\"close\" icon-only label=\"Close\"></baht-button>  <!-- label = a11y name -->\n  <baht-button aria-label=\"Previous month\">‹</baht-button>  <!-- glyph child, host aria-label wins -->",
           "name": "BahtButton",
           "members": [
             {
@@ -4085,6 +4085,16 @@
               "description": "Square icon-only button. Requires `label` for the accessible name.",
               "attribute": "icon-only"
             },
+            {
+              "kind": "field",
+              "name": "hostAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A host `aria-label` never reaches assistive tech on its own — light DOM has no\nimplicit ARIA relationship between a custom element and its rendered children, so an\n`aria-label` written on `<baht-button>` stays on the host and the inner native\n`<button>` keeps whatever text (or none) is inside it. Mirroring the attribute into\nthis property forwards it to the inner button's `aria-label`, taking priority over\n`label`/icon-only fallback — this is how a glyph-only child (e.g. `‹`) gets a real\naccessible name without `icon-only`. Mapped to the plain `aria-label` attribute so\nhosts write it the way they naturally would; kept off the `ariaLabel` IDL accessor to\navoid shadowing the platform's own ARIAMixin.",
+              "attribute": "aria-label"
+            },
             {
               "kind": "field",
               "name": "buttonEl",
@@ -4199,6 +4209,15 @@
               "description": "Square icon-only button. Requires `label` for the accessible name.",
               "fieldName": "iconOnly"
             },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A host `aria-label` never reaches assistive tech on its own — light DOM has no\nimplicit ARIA relationship between a custom element and its rendered children, so an\n`aria-label` written on `<baht-button>` stays on the host and the inner native\n`<button>` keeps whatever text (or none) is inside it. Mirroring the attribute into\nthis property forwards it to the inner button's `aria-label`, taking priority over\n`label`/icon-only fallback — this is how a glyph-only child (e.g. `‹`) gets a real\naccessible name without `icon-only`. Mapped to the plain `aria-label` attribute so\nhosts write it the way they naturally would; kept off the `ariaLabel` IDL accessor to\navoid shadowing the platform's own ARIAMixin.",
+              "fieldName": "hostAriaLabel"
+            },
             {
               "name": "defer-hydration",
               "inheritedFrom": {

package/dist/vscode.html-custom-data.json

@@ -189,7 +189,7 @@
     },
     {
       "name": "baht-button",
-      "description": "Design-system button (20baht: no scale, no shadow change — color does the work).\nStandalone primitive: children become the label, listen for the native `click`.\n(Light DOM has no <slot>, so the initial children are moved into the button.)\n\n  <baht-button variant=\"danger\" size=\"sm\">Delete</baht-button>\n  <baht-button label=\"Save workflow\"></baht-button>\n  <baht-button icon=\"copy\" variant=\"ghost\" size=\"sm\">Copy</baht-button>\n  <baht-button icon=\"close\" icon-only label=\"Close\"></baht-button>  <!-- label = a11y name -->\n---\n\n\n### **Events:**\n - **name**\n\n### **Methods:**\n ",
+      "description": "Design-system button (20baht: no scale, no shadow change — color does the work).\nStandalone primitive: children become the label, listen for the native `click`.\n(Light DOM has no <slot>, so the initial children are moved into the button.)\n\n  <baht-button variant=\"danger\" size=\"sm\">Delete</baht-button>\n  <baht-button label=\"Save workflow\"></baht-button>\n  <baht-button icon=\"copy\" variant=\"ghost\" size=\"sm\">Copy</baht-button>\n  <baht-button icon=\"close\" icon-only label=\"Close\"></baht-button>  <!-- label = a11y name -->\n  <baht-button aria-label=\"Previous month\">‹</baht-button>  <!-- glyph child, host aria-label wins -->\n---\n\n\n### **Events:**\n - **name**\n\n### **Methods:**\n ",
       "attributes": [
         { "name": "variant", "values": [{ "name": "ButtonVariant" }] },
         { "name": "size", "values": [{ "name": "ButtonSize" }] },
@@ -214,6 +214,11 @@
           "description": "Square icon-only button. Requires `label` for the accessible name.",
           "values": []
         },
+        {
+          "name": "aria-label",
+          "description": "A host `aria-label` never reaches assistive tech on its own — light DOM has no\nimplicit ARIA relationship between a custom element and its rendered children, so an\n`aria-label` written on `<baht-button>` stays on the host and the inner native\n`<button>` keeps whatever text (or none) is inside it. Mirroring the attribute into\nthis property forwards it to the inner button's `aria-label`, taking priority over\n`label`/icon-only fallback — this is how a glyph-only child (e.g. `‹`) gets a real\naccessible name without `icon-only`. Mapped to the plain `aria-label` attribute so\nhosts write it the way they naturally would; kept off the `ariaLabel` IDL accessor to\navoid shadowing the platform's own ARIAMixin.",
+          "values": []
+        },
         { "name": "defer-hydration", "values": [] }
       ],
       "references": []

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "bank20baht-ui",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -454,7 +454,7 @@
         },
         {
           "name": "baht-button",
-          "description": "Design-system button (20baht: no scale, no shadow change — color does the work).\nStandalone primitive: children become the label, listen for the native `click`.\n(Light DOM has no <slot>, so the initial children are moved into the button.)\n\n  <baht-button variant=\"danger\" size=\"sm\">Delete</baht-button>\n  <baht-button label=\"Save workflow\"></baht-button>\n  <baht-button icon=\"copy\" variant=\"ghost\" size=\"sm\">Copy</baht-button>\n  <baht-button icon=\"close\" icon-only label=\"Close\"></baht-button>  <!-- label = a11y name -->\n---\n\n\n### **Events:**\n - **name**\n\n### **Methods:**\n ",
+          "description": "Design-system button (20baht: no scale, no shadow change — color does the work).\nStandalone primitive: children become the label, listen for the native `click`.\n(Light DOM has no <slot>, so the initial children are moved into the button.)\n\n  <baht-button variant=\"danger\" size=\"sm\">Delete</baht-button>\n  <baht-button label=\"Save workflow\"></baht-button>\n  <baht-button icon=\"copy\" variant=\"ghost\" size=\"sm\">Copy</baht-button>\n  <baht-button icon=\"close\" icon-only label=\"Close\"></baht-button>  <!-- label = a11y name -->\n  <baht-button aria-label=\"Previous month\">‹</baht-button>  <!-- glyph child, host aria-label wins -->\n---\n\n\n### **Events:**\n - **name**\n\n### **Methods:**\n ",
           "doc-url": "",
           "attributes": [
             {
@@ -489,6 +489,11 @@
               "description": "Square icon-only button. Requires `label` for the accessible name.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "aria-label",
+              "description": "A host `aria-label` never reaches assistive tech on its own — light DOM has no\nimplicit ARIA relationship between a custom element and its rendered children, so an\n`aria-label` written on `<baht-button>` stays on the host and the inner native\n`<button>` keeps whatever text (or none) is inside it. Mirroring the attribute into\nthis property forwards it to the inner button's `aria-label`, taking priority over\n`label`/icon-only fallback — this is how a glyph-only child (e.g. `‹`) gets a real\naccessible name without `icon-only`. Mapped to the plain `aria-label` attribute so\nhosts write it the way they naturally would; kept off the `ariaLabel` IDL accessor to\navoid shadowing the platform's own ARIAMixin.",
+              "value": { "type": "string", "default": "''" }
+            },
             { "name": "defer-hydration", "value": { "type": "string" } }
           ],
           "events": [{ "name": "name", "type": "CustomEvent" }],
@@ -516,6 +521,11 @@
                 "name": "iconOnly",
                 "description": "Square icon-only button. Requires `label` for the accessible name.",
                 "type": "boolean"
+              },
+              {
+                "name": "hostAriaLabel",
+                "description": "A host `aria-label` never reaches assistive tech on its own — light DOM has no\nimplicit ARIA relationship between a custom element and its rendered children, so an\n`aria-label` written on `<baht-button>` stays on the host and the inner native\n`<button>` keeps whatever text (or none) is inside it. Mirroring the attribute into\nthis property forwards it to the inner button's `aria-label`, taking priority over\n`label`/icon-only fallback — this is how a glyph-only child (e.g. `‹`) gets a real\naccessible name without `icon-only`. Mapped to the plain `aria-label` attribute so\nhosts write it the way they naturally would; kept off the `ariaLabel` IDL accessor to\navoid shadowing the platform's own ARIAMixin.",
+                "type": "string"
               }
             ],
             "events": [{ "name": "name", "type": "CustomEvent" }]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bank20baht-ui",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "type": "module",
   "description": "JSON-driven form + workflow engine. Send JSON in, get an interactive form out.",
   "license": "MIT",