@nysds/nys-label 1.14.0 → 1.15.1

package/dist/nys-label.js

@@ -1,5 +1,15 @@
 import { LitElement as c, unsafeCSS as _, html as r } from "lit";
 import { property as i } from "lit/decorators.js";
+/*!
+   * █▄  █  █   █  █▀▀▀█  █▀▀▄  █▀▀▀█
+   * █ █ █  █▄▄▄█  ▀▀▀▄▄  █   █ ▀▀▀▄▄
+   * █  ▀█    █    █▄▄▄█  █▄▄▀  █▄▄▄█
+   *
+   * Label Component v1.15.1
+   * Part of the New York State Design System
+   * Repository: https://github.com/its-hcd/nysds
+   * License: MIT
+*/
 const h = ':host{--_nys-label-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-label-font-weight: var(--nys-font-weight-semibold, 600);--_nys-label-font-size: var(--nys-font-size-ui-md, 16px);--_nys-label-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-label-letter-spacing: var(--nys-font-letterspacing-ui-md, .044px);--_nys-label-color: var(--nys-color-text, #1b1b1b);--_nys-label-cursor: normal;--_nys-description-font-weight: var(--nys-font-weight-regular, 400);--_nys-description-font-style: normal;--_nys-description-font-color: var(--nys-color-text-weak, #4a4d4f);--_nys-required-font-color: var(--nys-color-danger, #b52c2c);--_nys-optional-font-weight: var(--nys-font-weight-regular, 400);--_nys-optional-font-color: var(--nys-color-text-weak, #4a4d4f);--_nys-label-gap: var(--nys-space-4px, 4px)}p{margin:0}.nys-label{display:flex;flex-direction:column;align-items:flex-start;font-family:var(--_nys-label-font-family);font-size:var(--_nys-label-font-size);line-height:var(--_nys-label-line-height);letter-spacing:var(--_nys-label-letter-spacing)}.nys-label *{cursor:var(--_nys-label-cursor)}.nys-label__label{display:flex;gap:var(--_nys-label-gap);text-align:left;font-weight:var(--_nys-label-font-weight);color:var(--_nys-label-color)}.nys-label__description{text-align:left;font-weight:var(--_nys-description-font-weight);font-style:var(--_nys-description-font-style);color:var(--_nys-description-font-color)}.nys-label__required{display:contents;font-weight:var(--_nys-label-font-weight);color:var(--_nys-required-font-color)}.nys-label__optional{display:contents;font-weight:var(--_nys-optional-font-weight);color:var(--_nys-optional-font-color)}.nys-label__tooltip-wrapper{display:flex;gap:2px;align-items:center}.nys-label.invert .nys-label__label,.nys-label.invert .nys-label__description,.nys-label.invert .nys-label__optional{color:var(--nys-color-text-reverse, #ffffff)}.nys-label.invert .nys-label__tooltip-icon{color:var(--nys-color-ink-reverse, #ffffff)}';
 var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (y, e, o, t) => {
   for (var n = t > 1 ? void 0 : t ? b(e, o) : e, a = y.length - 1, p; a >= 0; a--)

package/dist/nys-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"nys-label.js","sources":["../src/nys-label.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-label.scss?inline\";\n\n/**\n * **Internal component.** Renders form labels with description, required/optional flag, and tooltip.\n *\n * Used internally by form components (textinput, select, checkbox, etc.). Not intended for direct use.\n * Handles label association via `for`, displays asterisk for required fields, and integrates tooltips.\n *\n * @summary Internal label component for form fields with flag and tooltip support.\n * @element nys-label\n *\n * @slot description - Custom HTML description content below the label.\n */\nexport class NysLabel extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /** ID of the form element this label is associated with. */\n  @property({ type: String }) for = \"\";\n\n  /** Label text displayed above the form field. */\n  @property({ type: String }) label = \"\";\n\n  /** Helper text displayed below the label. */\n  @property({ type: String }) description = \"\";\n\n  /** Flag type: `required` shows asterisk, `optional` shows \"(Optional)\". */\n  @property({ type: String }) flag = \"\";\n\n  /** Adjusts colors for dark backgrounds. */\n  @property({ type: Boolean, reflect: true }) inverted = false;\n  /** Tooltip text shown on hover/focus of info icon next to label. */\n  @property({ type: String })\n  get tooltip() {\n    return this._tooltip;\n  }\n  set tooltip(value: string) {\n    this._tooltip = value;\n  }\n  private _tooltip: string = \"\";\n\n  /**\n   * Event Handlers\n   * --------------------------------------------------------------------------\n   */\n  private _handleLabelClick(event: Event) {\n    if (!this.for) return;\n\n    const parentShadowDOM = (this.getRootNode() as ShadowRoot).host;\n    let target: HTMLElement | null = null;\n\n    if (parentShadowDOM && parentShadowDOM.shadowRoot) {\n      target = parentShadowDOM.shadowRoot.querySelector(`#${this.for}`);\n    }\n\n    if (!target) return;\n\n    if (target instanceof HTMLInputElement) {\n      event.preventDefault();\n      event.stopPropagation();\n      if (target.type === \"file\") {\n        target.click();\n      } else if (target.type === \"checkbox\" || target.type === \"radio\") {\n        target.focus();\n        target.click();\n      } else {\n        // For other inputs (text, date, number, email, etc.), just focus\n        target.focus();\n      }\n    } else {\n      (target as HTMLElement).focus();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"nys-label ${this.inverted ? \"invert\" : \"\"}\">\n        <div class=\"nys-label__tooltip-wrapper\">\n          <label\n            for=${this.for}\n            class=\"nys-label__label\"\n            @click=${this._handleLabelClick}\n            >${this.label}\n            ${this.flag === \"required\"\n              ? html`<div class=\"nys-label__required\">*</div>`\n              : \"\"}\n            ${this.flag === \"optional\"\n              ? html`<div class=\"nys-label__optional\">(Optional)</div>`\n              : \"\"}</label\n          >\n          ${this._tooltip\n            ? html`<nys-tooltip\n                  text=\"${this._tooltip}\"\n                  position=\"top\"\n                  focusable\n                  ?inverted=${this.inverted}\n                  for=\"tooltip-icon-${this.for}\"\n                >\n                </nys-tooltip>\n                <nys-icon\n                  id=\"tooltip-icon-${this.for}\"\n                  name=\"info\"\n                  size=\"3xl\"\n                ></nys-icon> `\n            : \"\"}\n        </div>\n        <p\n          for=${this.for}\n          class=\"nys-label__description\"\n          @click=${this._handleLabelClick}\n        >\n          <slot name=\"description\">${this.description}</slot>\n        </p>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-label\")) {\n  customElements.define(\"nys-label\", NysLabel);\n}\n"],"names":["_NysLabel","LitElement","value","event","parentShadowDOM","target","html","unsafeCSS","styles","NysLabel","__decorateClass","property"],"mappings":";;;;;;;;AAgBO,MAAMA,IAAN,MAAMA,UAAiBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIuB,KAAA,MAAM,IAGN,KAAA,QAAQ,IAGR,KAAA,cAAc,IAGd,KAAA,OAAO,IAGS,KAAA,WAAW,IASvD,KAAQ,WAAmB;AAAA,EAAA;AAAA,EAN3B,IAAI,UAAU;AACZ,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,QAAQC,GAAe;AACzB,SAAK,WAAWA;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,kBAAkBC,GAAc;AACtC,QAAI,CAAC,KAAK,IAAK;AAEf,UAAMC,IAAmB,KAAK,YAAA,EAA6B;AAC3D,QAAIC,IAA6B;AAMjC,IAJID,KAAmBA,EAAgB,eACrCC,IAASD,EAAgB,WAAW,cAAc,IAAI,KAAK,GAAG,EAAE,IAG7DC,MAEDA,aAAkB,oBACpBF,EAAM,eAAA,GACNA,EAAM,gBAAA,GACFE,EAAO,SAAS,SAClBA,EAAO,MAAA,IACEA,EAAO,SAAS,cAAcA,EAAO,SAAS,WACvDA,EAAO,MAAA,GACPA,EAAO,MAAA,KAGPA,EAAO,MAAA,KAGRA,EAAuB,MAAA;AAAA,EAE5B;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA,8BACmB,KAAK,WAAW,WAAW,EAAE;AAAA;AAAA;AAAA,kBAGzC,KAAK,GAAG;AAAA;AAAA,qBAEL,KAAK,iBAAiB;AAAA,eAC5B,KAAK,KAAK;AAAA,cACX,KAAK,SAAS,aACZA,8CACA,EAAE;AAAA,cACJ,KAAK,SAAS,aACZA,uDACA,EAAE;AAAA;AAAA,YAEN,KAAK,WACHA;AAAA,0BACY,KAAK,QAAQ;AAAA;AAAA;AAAA,8BAGT,KAAK,QAAQ;AAAA,sCACL,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA,qCAIT,KAAK,GAAG;AAAA;AAAA;AAAA,iCAI/B,EAAE;AAAA;AAAA;AAAA,gBAGA,KAAK,GAAG;AAAA;AAAA,mBAEL,KAAK,iBAAiB;AAAA;AAAA,qCAEJ,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,EAInD;AACF;AArGEN,EAAO,SAASO,EAAUC,CAAM;AAD3B,IAAMC,IAANT;AAIuBU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfF,EAIiB,WAAA,OAAA,CAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPfF,EAOiB,WAAA,SAAA,CAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfF,EAUiB,WAAA,eAAA,CAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAbfF,EAaiB,WAAA,QAAA,CAAA;AAGgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhB/BF,EAgBiC,WAAA,YAAA,CAAA;AAGxCC,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlBfF,EAmBP,WAAA,WAAA,CAAA;AAqFD,eAAe,IAAI,WAAW,KACjC,eAAe,OAAO,aAAaA,CAAQ;"}
+{"version":3,"file":"nys-label.js","sources":["../src/nys-label.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-label.scss?inline\";\n\n/**\n * **Internal component.** Renders form labels with description, required/optional flag, and tooltip.\n *\n * Used internally by form components (textinput, select, checkbox, etc.). Not intended for direct use.\n * Handles label association via `for`, displays asterisk for required fields, and integrates tooltips.\n *\n * @summary Internal label component for form fields with flag and tooltip support.\n * @element nys-label\n *\n * @slot description - Custom HTML description content below the label.\n */\nexport class NysLabel extends LitElement {\n  static styles = unsafeCSS(styles);\n\n  /** ID of the form element this label is associated with. */\n  @property({ type: String }) for = \"\";\n\n  /** Label text displayed above the form field. */\n  @property({ type: String }) label = \"\";\n\n  /** Helper text displayed below the label. */\n  @property({ type: String }) description = \"\";\n\n  /** Flag type: `required` shows asterisk, `optional` shows \"(Optional)\". */\n  @property({ type: String }) flag = \"\";\n\n  /** Adjusts colors for dark backgrounds. */\n  @property({ type: Boolean, reflect: true }) inverted = false;\n  /** Tooltip text shown on hover/focus of info icon next to label. */\n  @property({ type: String })\n  get tooltip() {\n    return this._tooltip;\n  }\n  set tooltip(value: string) {\n    this._tooltip = value;\n  }\n  private _tooltip: string = \"\";\n\n  /**\n   * Event Handlers\n   * --------------------------------------------------------------------------\n   */\n  private _handleLabelClick(event: Event) {\n    if (!this.for) return;\n\n    const parentShadowDOM = (this.getRootNode() as ShadowRoot).host;\n    let target: HTMLElement | null = null;\n\n    if (parentShadowDOM && parentShadowDOM.shadowRoot) {\n      target = parentShadowDOM.shadowRoot.querySelector(`#${this.for}`);\n    }\n\n    if (!target) return;\n\n    if (target instanceof HTMLInputElement) {\n      event.preventDefault();\n      event.stopPropagation();\n      if (target.type === \"file\") {\n        target.click();\n      } else if (target.type === \"checkbox\" || target.type === \"radio\") {\n        target.focus();\n        target.click();\n      } else {\n        // For other inputs (text, date, number, email, etc.), just focus\n        target.focus();\n      }\n    } else {\n      (target as HTMLElement).focus();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"nys-label ${this.inverted ? \"invert\" : \"\"}\">\n        <div class=\"nys-label__tooltip-wrapper\">\n          <label\n            for=${this.for}\n            class=\"nys-label__label\"\n            @click=${this._handleLabelClick}\n            >${this.label}\n            ${this.flag === \"required\"\n              ? html`<div class=\"nys-label__required\">*</div>`\n              : \"\"}\n            ${this.flag === \"optional\"\n              ? html`<div class=\"nys-label__optional\">(Optional)</div>`\n              : \"\"}</label\n          >\n          ${this._tooltip\n            ? html`<nys-tooltip\n                  text=\"${this._tooltip}\"\n                  position=\"top\"\n                  focusable\n                  ?inverted=${this.inverted}\n                  for=\"tooltip-icon-${this.for}\"\n                >\n                </nys-tooltip>\n                <nys-icon\n                  id=\"tooltip-icon-${this.for}\"\n                  name=\"info\"\n                  size=\"3xl\"\n                ></nys-icon> `\n            : \"\"}\n        </div>\n        <p\n          for=${this.for}\n          class=\"nys-label__description\"\n          @click=${this._handleLabelClick}\n        >\n          <slot name=\"description\">${this.description}</slot>\n        </p>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get(\"nys-label\")) {\n  customElements.define(\"nys-label\", NysLabel);\n}\n"],"names":["_NysLabel","LitElement","value","event","parentShadowDOM","target","html","unsafeCSS","styles","NysLabel","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;;AAgBO,MAAMA,IAAN,MAAMA,UAAiBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAIuB,KAAA,MAAM,IAGN,KAAA,QAAQ,IAGR,KAAA,cAAc,IAGd,KAAA,OAAO,IAGS,KAAA,WAAW,IASvD,KAAQ,WAAmB;AAAA,EAAA;AAAA,EAN3B,IAAI,UAAU;AACZ,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,QAAQC,GAAe;AACzB,SAAK,WAAWA;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,kBAAkBC,GAAc;AACtC,QAAI,CAAC,KAAK,IAAK;AAEf,UAAMC,IAAmB,KAAK,YAAA,EAA6B;AAC3D,QAAIC,IAA6B;AAMjC,IAJID,KAAmBA,EAAgB,eACrCC,IAASD,EAAgB,WAAW,cAAc,IAAI,KAAK,GAAG,EAAE,IAG7DC,MAEDA,aAAkB,oBACpBF,EAAM,eAAA,GACNA,EAAM,gBAAA,GACFE,EAAO,SAAS,SAClBA,EAAO,MAAA,IACEA,EAAO,SAAS,cAAcA,EAAO,SAAS,WACvDA,EAAO,MAAA,GACPA,EAAO,MAAA,KAGPA,EAAO,MAAA,KAGRA,EAAuB,MAAA;AAAA,EAE5B;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA,8BACmB,KAAK,WAAW,WAAW,EAAE;AAAA;AAAA;AAAA,kBAGzC,KAAK,GAAG;AAAA;AAAA,qBAEL,KAAK,iBAAiB;AAAA,eAC5B,KAAK,KAAK;AAAA,cACX,KAAK,SAAS,aACZA,8CACA,EAAE;AAAA,cACJ,KAAK,SAAS,aACZA,uDACA,EAAE;AAAA;AAAA,YAEN,KAAK,WACHA;AAAA,0BACY,KAAK,QAAQ;AAAA;AAAA;AAAA,8BAGT,KAAK,QAAQ;AAAA,sCACL,KAAK,GAAG;AAAA;AAAA;AAAA;AAAA,qCAIT,KAAK,GAAG;AAAA;AAAA;AAAA,iCAI/B,EAAE;AAAA;AAAA;AAAA,gBAGA,KAAK,GAAG;AAAA;AAAA,mBAEL,KAAK,iBAAiB;AAAA;AAAA,qCAEJ,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,EAInD;AACF;AArGEN,EAAO,SAASO,EAAUC,CAAM;AAD3B,IAAMC,IAANT;AAIuBU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAJfF,EAIiB,WAAA,OAAA,CAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPfF,EAOiB,WAAA,SAAA,CAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfF,EAUiB,WAAA,eAAA,CAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAbfF,EAaiB,WAAA,QAAA,CAAA;AAGgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhB/BF,EAgBiC,WAAA,YAAA,CAAA;AAGxCC,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlBfF,EAmBP,WAAA,WAAA,CAAA;AAqFD,eAAe,IAAI,WAAW,KACjC,eAAe,OAAO,aAAaA,CAAQ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-label",
-  "version": "1.14.0",
+  "version": "1.15.1",
   "description": "The Label component from the NYS Design System.",
   "module": "dist/nys-label.js",
   "types": "dist/index.d.ts",
@@ -16,15 +16,15 @@
   ],
   "scripts": {
     "dev": "tsc --emitDeclarationOnly && vite",
-    "build": "tsc --emitDeclarationOnly && vite build",
+    "build": "vite build",
     "test": "vite build && wtr",
     "build:watch": "tsc --emitDeclarationOnly && vite build --watch",
     "test:watch": "vite build && wtr --watch",
     "lit-analyze": "lit-analyzer '**/*.ts'"
   },
   "dependencies": {
-    "@nysds/nys-icon": "^1.14.0",
-    "@nysds/nys-tooltip": "^1.14.0"
+    "@nysds/nys-icon": "^1.15.1",
+    "@nysds/nys-tooltip": "^1.15.1"
   },
   "devDependencies": {
     "lit": "^3.3.1",

package/dist/index.d.ts

@@ -1 +0,0 @@
-export * from "./nys-label";

package/dist/nys-label.d.ts

@@ -1,35 +0,0 @@
-import { LitElement } from "lit";
-/**
- * **Internal component.** Renders form labels with description, required/optional flag, and tooltip.
- *
- * Used internally by form components (textinput, select, checkbox, etc.). Not intended for direct use.
- * Handles label association via `for`, displays asterisk for required fields, and integrates tooltips.
- *
- * @summary Internal label component for form fields with flag and tooltip support.
- * @element nys-label
- *
- * @slot description - Custom HTML description content below the label.
- */
-export declare class NysLabel extends LitElement {
-    static styles: import("lit").CSSResult;
-    /** ID of the form element this label is associated with. */
-    for: string;
-    /** Label text displayed above the form field. */
-    label: string;
-    /** Helper text displayed below the label. */
-    description: string;
-    /** Flag type: `required` shows asterisk, `optional` shows "(Optional)". */
-    flag: string;
-    /** Adjusts colors for dark backgrounds. */
-    inverted: boolean;
-    /** Tooltip text shown on hover/focus of info icon next to label. */
-    get tooltip(): string;
-    set tooltip(value: string);
-    private _tooltip;
-    /**
-     * Event Handlers
-     * --------------------------------------------------------------------------
-     */
-    private _handleLabelClick;
-    render(): import("lit-html").TemplateResult<1>;
-}