@viasat/beam-web-components 2.21.1 → 2.23.0

package/Label/Label.d.ts

@@ -0,0 +1,68 @@
+import { LitElement } from 'lit';
+import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
+import { Optional } from '@viasat/beam-shared/utils/types';
+/**
+ * @summary `bm-label`
+ *
+ * @slot text - Specify the text for Label
+ * @slot optional - Specify if the Label displays as optional
+ * @slot tooltip - Specify if the icon displays to add a Tooltip
+ *
+ * @remarks
+ * **Accessibility with non-Beam inputs:**
+ * The `for` attribute handles click-to-focus for native inputs outside the shadow root,
+ * but the native `<label for>` association does not cross shadow DOM boundaries.
+ * Screen readers will not automatically announce the label text when the input is focused.
+ * To ensure accessible labeling, add `aria-labelledby` on your input pointing to the
+ * `bm-label` host element's `id`:
+ *
+ * ```html
+ * <bm-label id="name-label" text="First name" for="name-input"></bm-label>
+ * <input id="name-input" aria-labelledby="name-label" />
+ * ```
+ *
+ * This is not needed for Beam form components (e.g. `bm-text-field`), which handle
+ * label association internally via `bm-label-click` and `aria-labelledby`.
+ */
+export declare class BmLabel extends LitElement {
+    #private;
+    /**
+     * Specify if the Label displays disabled
+     */
+    disabled: boolean;
+    /**
+     * Specify if the Label displays as required
+     */
+    required: boolean;
+    /**
+     * Specify the text for Label
+     */
+    text: Optional<string>;
+    /**
+     * Specify the optional text for Label
+     */
+    optional: Optional<string>;
+    /**
+     * Specify the id of the form element the Label is associated with.
+     * Handles click-to-focus across shadow DOM. See class-level remarks
+     * for accessibility guidance with non-Beam inputs.
+     */
+    for: Optional<string>;
+    /**
+     * Specify the theme of the Label. By default it inherits the theme from the parent
+     */
+    theme: Optional<ThemeTypes>;
+    static styles: import('lit').CSSResult;
+    private optionalNodes?;
+    private tooltipNodes?;
+    private get hasOptionalSlot();
+    private get hasTooltipSlot();
+    private get hasOptional();
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bm-label': BmLabel;
+    }
+}
+//# sourceMappingURL=Label.d.ts.map

package/{local/wip/Label → Label}/Label.js

@@ -1,85 +1,109 @@
-import { r as _, a as x, x as u } from "../../chunks/lit-element.CJtt9wj5.js";
-import { n as s, c as S } from "../../chunks/register-custom-element.vod7zfGv.js";
-import { n as P } from "../../chunks/query-assigned-nodes.Dgvsf6BR.js";
-import { n as $, c as f, g as k } from "../../chunks/classNames.C6fNrXWF.js";
-import { t as C } from "../../chunks/constants.jOWREYQE.js";
+import { unsafeCSS as $, LitElement as P, nothing as k, html as d } from "lit";
+import { property as m, queryAssignedNodes as S } from "lit/decorators.js";
+import v from "clsx";
+import { n as g, g as C } from "../chunks/classNames.Cq_tbDRp.js";
+import { t as O } from "../chunks/constants.jOWREYQE.js";
+import { c as q } from "../chunks/register-custom-element.DHGKOhmA.js";
 const w = ':root,:host,.bm-light,.bm-dark .bm-inverse,.bm-dark.bm-inverse,[data-bm-theme~=bm-dark] .bm-inverse,[data-bm-theme~=bm-dark].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-light]{--bm-comp-label-color-text: var(--bm-sem-color-text-secondary, #576775);--bm-comp-label-color-icon: var(--bm-sem-color-icon-secondary, #576775);--bm-comp-label-typo-default: var( --bm-sem-typo-label-sm, 600 .875rem/1.25rem "Source Sans Pro" );--bm-comp-label-typo-optional: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-label-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-label-space-gap: var(--bm-sem-space-25, .25rem);--bm-comp-label-space-bottom: var(--bm-sem-space-50, .5rem);--bm-comp-label-size-icon: var(--bm-sem-size-icon-sm, 1rem)}:host,.bm-dark,.bm-light .bm-inverse,.bm-light.bm-inverse,[data-bm-theme~=bm-light] .bm-inverse,[data-bm-theme~=bm-light].bm-inverse,.bm-enterprise,.bm-consumer,[data-bm-theme~=bm-dark]{--bm-comp-label-color-text: var(--bm-sem-color-text-secondary, #c3cdd5);--bm-comp-label-color-icon: var(--bm-sem-color-icon-secondary, #c3cdd5);--bm-comp-label-typo-default: var( --bm-sem-typo-label-sm, 600 .875rem/1.25rem "Source Sans Pro" );--bm-comp-label-typo-optional: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-label-typo-character-count: var( --bm-sem-typo-body-sm, 400 .875rem/1.25rem "Source Sans Pro" );--bm-comp-label-space-gap: var(--bm-sem-space-25, .25rem);--bm-comp-label-space-bottom: var(--bm-sem-space-50, .5rem);--bm-comp-label-size-icon: var(--bm-sem-size-icon-sm, 1rem)}.bm-label{color:var(--bm-comp-label-color-text);font:var(--bm-comp-label-typo-default);margin-bottom:var(--bm-comp-label-space-bottom, var(--bm-sem-space-0))}.bm-label label{cursor:var(--bm-comp-label-cursor, default);pointer-events:var(--bm-comp-label-pointer-events, inherit)}.bm-label--disabled label{opacity:var(--bm-sem-opacity-disabled)}.bm-label--required label:after{content:"*";color:var(--bm-sem-color-text-negative)}.bm-label--required label:has(:last-child):after{content:""}.bm-label--required label:has(:last-child)>*:last-child:after{content:"*";color:var(--bm-sem-color-text-negative)}.bm-label__optional{font:var(--bm-comp-label-typo-optional);margin-left:var(--bm-comp-label-space-gap)}.bm-label__tooltip{vertical-align:top;display:inline-block;margin-inline-start:var(--bm-comp-label-space-gap)}.bm-label__tooltip button{color:var(--bm-comp-tooltip-color-icon-trigger)}.bm-label__tooltip svg{height:var(--bm-comp-label-size-icon);width:var(--bm-comp-label-size-icon)}.bm-label--no-box{display:contents}';
-var q = Object.defineProperty, O = Object.getOwnPropertyDescriptor, g = (e) => {
+var E = Object.defineProperty, N = Object.getOwnPropertyDescriptor, x = (e) => {
   throw TypeError(e);
-}, m = (e, a, t, b) => {
-  for (var l = b > 1 ? void 0 : b ? O(a, t) : a, p = e.length - 1, n; p >= 0; p--)
-    (n = e[p]) && (l = (b ? n(a, t, l) : n(l)) || l);
-  return b && l && q(a, t, l), l;
-}, E = (e, a, t) => a.has(e) || g("Cannot " + t), r = (e, a, t) => (E(e, a, "read from private field"), t ? t.call(e) : a.get(e)), i = (e, a, t) => a.has(e) ? g("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, t), c, h, v, y;
-const { baseClassNamePrefix: z, subElementClassPrefix: M, classModifierPrefix: d } = k("label");
-let o = class extends x {
+}, l = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? N(t, a) : t, c = e.length - 1, h; c >= 0; c--)
+    (h = e[c]) && (r = (i ? h(t, a, r) : h(r)) || r);
+  return i && r && E(t, a, r), r;
+}, z = (e, t, a) => t.has(e) || x("Cannot " + a), s = (e, t, a) => (z(e, t, "read from private field"), a ? a.call(e) : t.get(e)), b = (e, t, a) => t.has(e) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), n, y, u, f;
+const { baseClassNamePrefix: B, subElementClassPrefix: _, classModifierPrefix: p } = C("label");
+let o = class extends P {
   constructor() {
-    super(...arguments), this.disabled = !1, this.required = !1, i(this, c, () => !!(this.hasOptionalSlot || this.optional)), i(this, h, () => this.requestUpdate()), i(this, v, () => {
+    super(...arguments), this.disabled = !1, this.required = !1, b(this, n, () => this.requestUpdate()), b(this, y, () => {
+      if (this.for) {
+        const e = document.getElementById(this.for);
+        e == null || e.click();
+      }
       this.dispatchEvent(
         new CustomEvent("bm-label-click", {
           bubbles: !0,
           composed: !0
         })
       );
-    }), i(this, y, () => u`
-      <span
-        class="${f(
-      `${M}optional`,
-      !r(this, c).call(this) && `${d}no-box`
+    }), b(this, u, () => d`
+    <span
+      class="${v(
+      `${_}optional`,
+      !this.hasOptional && `${p}no-box`
     )}"
-      >
-        <slot name="optional" @slotchange=${r(this, h)}>
-          ${this.optional}
-        </slot>
-      </span>
-    `);
+    >
+      <slot name="optional" @slotchange=${s(this, n)}> ${this.optional} </slot>
+    </span>
+  `), b(this, f, () => d`
+    <span
+      class="${v(
+      `${_}tooltip`,
+      !this.hasTooltipSlot && `${p}no-box`
+    )}"
+    >
+      <slot name="tooltip" @slotchange=${s(this, n)}></slot>
+    </span>
+  `);
   }
   get hasOptionalSlot() {
-    return $(this.optionalNodes);
+    return g(this.optionalNodes);
+  }
+  get hasTooltipSlot() {
+    return g(this.tooltipNodes);
+  }
+  get hasOptional() {
+    return !!(this.hasOptionalSlot || this.optional);
   }
   render() {
-    const e = f(
-      z,
-      this.theme && C(this.theme),
-      this.disabled && `${d}disabled`,
-      this.required && !r(this, c).call(this) && `${d}required`
+    const e = v(
+      B,
+      this.theme && O(this.theme),
+      this.disabled && `${p}disabled`,
+      this.required && !this.hasOptional && `${p}required`
     );
-    return u`
+    return d`
       <div class="${e}">
-        <label @click="${r(this, v)}">
+        <label for=${this.for || k} @click="${s(this, y)}">
           <slot name="text">${this.text}</slot>
-          ${r(this, y).call(this)}
+          ${s(this, u).call(this)}
         </label>
-        <slot name="tooltip"></slot>
+        ${s(this, f).call(this)}
       </div>
     `;
   }
 };
-c = /* @__PURE__ */ new WeakMap();
-h = /* @__PURE__ */ new WeakMap();
-v = /* @__PURE__ */ new WeakMap();
+n = /* @__PURE__ */ new WeakMap();
 y = /* @__PURE__ */ new WeakMap();
-o.styles = _(w);
-m([
-  s({ type: Boolean })
+u = /* @__PURE__ */ new WeakMap();
+f = /* @__PURE__ */ new WeakMap();
+o.styles = $(w);
+l([
+  m({ type: Boolean })
 ], o.prototype, "disabled", 2);
-m([
-  s({ type: Boolean })
+l([
+  m({ type: Boolean })
 ], o.prototype, "required", 2);
-m([
-  s({ type: String })
+l([
+  m({ type: String })
 ], o.prototype, "text", 2);
-m([
-  s({ type: String })
+l([
+  m({ type: String })
 ], o.prototype, "optional", 2);
-m([
-  s({ type: String })
+l([
+  m({ type: String })
+], o.prototype, "for", 2);
+l([
+  m({ type: String })
 ], o.prototype, "theme", 2);
-m([
-  P({ slot: "optional", flatten: !0 })
+l([
+  S({ slot: "optional", flatten: !0 })
 ], o.prototype, "optionalNodes", 2);
-o = m([
-  S("bm-label")
+l([
+  S({ slot: "tooltip", flatten: !0 })
+], o.prototype, "tooltipNodes", 2);
+o = l([
+  q("bm-label")
 ], o);
 export {
   o as BmLabel