@luzmo/lucero 1.0.1-alpha.15 → 1.0.1-alpha.16

package/components/field-group-DNmY8W9v.cjs

@@ -0,0 +1,86 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const base = require("./base-COw9n7UR.cjs");
+const manageHelpText = require("./manage-help-text-BYx84zZR.cjs");
+const styles = '.luzmo-FieldGroup--toplabel{flex-direction:column}.luzmo-FieldGroup--sidelabel{flex-direction:row}.group{flex-flow:column wrap;display:flex}:host([vertical]) .group{flex-direction:column}:host([horizontal]) .group{flex-direction:row}:host([horizontal]) .group slot:not([name])::slotted(:not(:last-child)){margin-inline-end:var(--field-group-margin)}:host([horizontal]) .group .luzmo-HelpText{flex-basis:100%}:host{--field-group-margin: 16px;--field-group-readonly-delimiter: ","}:host([horizontal][dir=rtl]) slot:not([name])::slotted(*:not(:last-child)),:host([dir=rtl]:not([vertical])) slot:not([name])::slotted(*:not(:last-child)){margin:0 0 0 var(--field-group-margin)}:host([horizontal][dir=ltr]) slot:not([name])::slotted(*:not(:last-child)),:host([dir=ltr]:not([vertical])) slot:not([name])::slotted(*:not(:last-child)){margin:0 var(--field-group-margin) 0 0}';
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class LuzmoFieldGroup extends manageHelpText.ManageHelpText(base.LuzmoElement, {
+  mode: "external"
+}) {
+  constructor() {
+    super(...arguments);
+    this.horizontal = false;
+    this.invalid = false;
+    this.label = "";
+    this.vertical = false;
+  }
+  static get styles() {
+    return [lit.unsafeCSS(styles)];
+  }
+  handleSlotchange() {
+    return;
+  }
+  render() {
+    return lit.html`
+      <div class="group" role="presentation">
+        <slot @slotchange=${this.handleSlotchange}></slot>
+      </div>
+      ${this.renderHelpText(this.invalid)}
+    `;
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "group");
+    }
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("label")) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoFieldGroup.prototype, "horizontal");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoFieldGroup.prototype, "invalid");
+__decorateClass([
+  decorators_js.property()
+], LuzmoFieldGroup.prototype, "label");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoFieldGroup.prototype, "vertical");
+exports.LuzmoFieldGroup = LuzmoFieldGroup;

package/components/field-group-DVdAWCQF.js

@@ -0,0 +1,87 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
+import { a as LuzmoElement } from "./base-DmeVy0cq.js";
+import { M as ManageHelpText } from "./manage-help-text-DOuMTGht.js";
+const styles = '.luzmo-FieldGroup--toplabel{flex-direction:column}.luzmo-FieldGroup--sidelabel{flex-direction:row}.group{flex-flow:column wrap;display:flex}:host([vertical]) .group{flex-direction:column}:host([horizontal]) .group{flex-direction:row}:host([horizontal]) .group slot:not([name])::slotted(:not(:last-child)){margin-inline-end:var(--field-group-margin)}:host([horizontal]) .group .luzmo-HelpText{flex-basis:100%}:host{--field-group-margin: 16px;--field-group-readonly-delimiter: ","}:host([horizontal][dir=rtl]) slot:not([name])::slotted(*:not(:last-child)),:host([dir=rtl]:not([vertical])) slot:not([name])::slotted(*:not(:last-child)){margin:0 0 0 var(--field-group-margin)}:host([horizontal][dir=ltr]) slot:not([name])::slotted(*:not(:last-child)),:host([dir=ltr]:not([vertical])) slot:not([name])::slotted(*:not(:last-child)){margin:0 var(--field-group-margin) 0 0}';
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class LuzmoFieldGroup extends ManageHelpText(LuzmoElement, {
+  mode: "external"
+}) {
+  constructor() {
+    super(...arguments);
+    this.horizontal = false;
+    this.invalid = false;
+    this.label = "";
+    this.vertical = false;
+  }
+  static get styles() {
+    return [unsafeCSS(styles)];
+  }
+  handleSlotchange() {
+    return;
+  }
+  render() {
+    return html`
+      <div class="group" role="presentation">
+        <slot @slotchange=${this.handleSlotchange}></slot>
+      </div>
+      ${this.renderHelpText(this.invalid)}
+    `;
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "group");
+    }
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("label")) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoFieldGroup.prototype, "horizontal");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoFieldGroup.prototype, "invalid");
+__decorateClass([
+  property()
+], LuzmoFieldGroup.prototype, "label");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoFieldGroup.prototype, "vertical");
+export {
+  LuzmoFieldGroup as L
+};

package/components/field-label/index.cjs

@@ -15,4 +15,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../field-label-mO1AkUgR.cjs");customElements.get("luzmo-field-label")||customElements.define("luzmo-field-label",e.LuzmoFieldLabel);exports.LuzmoFieldLabel=e.LuzmoFieldLabel;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fieldLabel = require("../field-label-CKH9EXpR.cjs");
+if (!customElements.get("luzmo-field-label")) {
+  customElements.define("luzmo-field-label", fieldLabel.LuzmoFieldLabel);
+}
+exports.LuzmoFieldLabel = fieldLabel.LuzmoFieldLabel;

package/components/field-label/index.js

@@ -15,15 +15,19 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { L as r } from "../field-label-CZ2zzChK.js";
-const l = () => {
-  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-    const o = document.createElement("style");
-    o.setAttribute("data-luzmo-vars", ""), o.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(o);
+const initializeGlobalLuzmoCSSVariables = () => {
+  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
+    const styleElement = document.createElement("style");
+    styleElement.setAttribute("data-luzmo-vars", "");
+    styleElement.textContent = `html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}`;
+    document.head.appendChild(styleElement);
   }
 };
-l();
-customElements.get("luzmo-field-label") || customElements.define("luzmo-field-label", r);
+initializeGlobalLuzmoCSSVariables();
+import { L as LuzmoFieldLabel } from "../field-label-Dpsecoc6.js";
+if (!customElements.get("luzmo-field-label")) {
+  customElements.define("luzmo-field-label", LuzmoFieldLabel);
+}
 export {
-  r as LuzmoFieldLabel
+  LuzmoFieldLabel
 };

package/components/field-label-CKH9EXpR.cjs

@@ -0,0 +1,156 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const base = require("./base-COw9n7UR.cjs");
+const conditionAttributeWithId = require("./condition-attribute-with-id-DEc2Yjne.cjs");
+const randomId = require("./random-id-BE6HA503.cjs");
+const elementResolution = require("./element-resolution-DCsrhGZO.cjs");
+const sizedMixin = require("./sized-mixin-UaTVa-AE.cjs");
+const styles = ":host{box-sizing:border-box;min-block-size:var(--luzmo-field-label-min-height, var(--field-label-min-height));padding-block:var(--luzmo-field-label-padding-block, var(--luzmo-field-label-top-to-text, var(--field-label-top-to-text)) var(--luzmo-field-label-bottom-to-text, var(--field-label-bottom-to-text)));padding-inline:0;padding-inline:var(--luzmo-field-label-padding-inline, 0);margin-block:0;margin-block:var(--luzmo-field-label-margin-block, var(--luzmo-field-label-margin-block-start, 0) var(--luzmo-field-label-margin-block-end, 0));margin-inline:0;margin-inline:var(--luzmo-field-label-margin-inline, var(--luzmo-field-label-margin-inline-start, 0) var(--luzmo-field-label-margin-inline-end, 0));font-size:var(--luzmo-field-label-font-size, var(--field-label-font-size));font-weight:var(--luzmo-field-label-font-weight, var(--field-label-font-weight));line-height:var(--luzmo-field-label-line-height, var(--field-label-line-height));-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;color:var(--luzmo-field-label-color, var(--field-label-color));display:block;font-family:var(--luzmo-field-label-font-family, var(--luzmo-font-family))}:host(:lang(ja)),:host(:lang(ko)),:host(:lang(zh)){--luzmo-field-label-line-height: var( --luzmo-field-label-line-height-cjk, var(--field-label-line-height-cjk) )}:host([disabled]),:host([disabled]) .required-icon{--luzmo-field-label-color: var( --highcontrast-field-label-disabled-content-color, var( --luzmo-disabled-content-color, var(--field-label-disabled-content-color) ) )}.required-icon{display:inline-block;margin-block:0;margin-inline:var(--luzmo-field-label-text-to-asterisk, var(--field-label-text-to-asterisk)) 0;vertical-align:initial;vertical-align:var(--luzmo-field-label-asterisk-vertical-align, baseline)}:host([side-aligned=start]),:host([side-aligned=end]){vertical-align:top;margin-block-start:0;margin-block-end:0;margin-inline-end:var(--luzmo-field-label-side-padding-right, var(--field-label-side-padding-right));display:inline-flex;align-items:center;font-size:var(--luzmo-field-label-side-aligned-font-size, var(--field-label-side-aligned-font-size));block-size:var(--luzmo-field-label-side-aligned-height, var(--field-label-side-aligned-height))}:host([side-aligned=end]){text-align:end}@media (forced-colors: active){:host{--highcontrast-field-label-disabled-content-color: GrayText}}:host{--field-label-color: var(--luzmo-font-color);--field-label-font-weight: var(--luzmo-font-weight);--field-label-line-height: var(--luzmo-line-height);--field-label-line-height-cjk: 1.5;--field-label-disabled-content-color: var(--luzmo-font-color-disabled)}:host{--field-label-min-height: var(--luzmo-component-height-xs);--field-label-side-aligned-height: var(--luzmo-component-height);--field-label-top-to-text: calc(var(--luzmo-spacing-2));--field-label-bottom-to-text: var(--luzmo-spacing-2);--field-label-side-aligned-font-size: var(--luzmo-font-size);--field-label-font-size: var(--luzmo-font-size-s);--field-label-side-padding-right: var(--luzmo-spacing-4);--field-label-text-to-asterisk: 0px}:host([size=s]){--field-label-min-height: var(--luzmo-component-height-xxs);--field-label-side-aligned-height: var(--luzmo-component-height-s);--field-label-top-to-text: calc(var(--luzmo-spacing-1));--field-label-bottom-to-text: var(--luzmo-spacing-1);--field-label-side-aligned-font-size: var(--luzmo-font-size-s);--field-label-font-size: var(--luzmo-font-size-xs);--field-label-side-padding-right: var(--luzmo-spacing-3);--field-label-text-to-asterisk: 0px}:host([size=l]){--field-label-min-height: var(--luzmo-component-height-xs);--field-label-side-aligned-height: var(--luzmo-component-height-l);--field-label-top-to-text: var(--luzmo-spacing-3);--field-label-bottom-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--field-label-side-aligned-font-size: var(--luzmo-font-size-l);--field-label-font-size: var(--luzmo-font-size);--field-label-side-padding-right: var(--luzmo-spacing-4);--field-label-text-to-asterisk: var(--luzmo-spacing-1)}:host([size=xl]){--field-label-min-height: var(--luzmo-component-height-s);--field-label-side-aligned-height: var(--luzmo-component-height-xl);--field-label-top-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--field-label-bottom-to-text: var(--luzmo-spacing-3);--field-label-side-aligned-font-size: var(--luzmo-font-size-xl);--field-label-font-size: var(--luzmo-font-size-l);--field-label-side-padding-right: var(--luzmo-spacing-4);--field-label-text-to-asterisk: var(--luzmo-spacing-1)}label{display:inline-block}";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const astrickIcon = () => lit.html`
+  <div class="icon-container required-icon">*</div>
+`;
+class LuzmoFieldLabel extends sizedMixin.SizedMixin(base.LuzmoElement, {
+  noDefaultSize: true
+}) {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.id = "";
+    this.for = "";
+    this.required = false;
+    this.resolvedElement = new elementResolution.ElementResolutionController(this);
+  }
+  static get styles() {
+    return [lit.unsafeCSS(styles)];
+  }
+  handleClick(event) {
+    if (!this.target || this.disabled || event.defaultPrevented) {
+      return;
+    }
+    this.target.focus();
+    const parent = this.getRootNode();
+    const target = this.target;
+    const targetParent = target.getRootNode();
+    const targetHost = targetParent.host;
+    if (targetParent === parent && target.forceFocusVisible) {
+      target.forceFocusVisible();
+    } else if (targetHost && targetHost.forceFocusVisible) {
+      targetHost.forceFocusVisible();
+    }
+  }
+  applyTargetLabel(target) {
+    this.target = target || this.target;
+    if (this.target) {
+      const applyLabel = this.target.applyFocusElementLabel;
+      const focusable = this.target.focusElement || this.target;
+      const targetParent = focusable.getRootNode();
+      if (applyLabel !== void 0) {
+        applyLabel(this.labelText, this);
+      } else if (targetParent === this.getRootNode()) {
+        const conditionAttribute = target ? conditionAttributeWithId.conditionAttributeWithId : conditionAttributeWithId.conditionAttributeWithoutId;
+        conditionAttribute(focusable, "aria-labelledby", [this.id]);
+      } else {
+        if (target) {
+          focusable.setAttribute("aria-label", this.labelText);
+        } else {
+          focusable.removeAttribute("aria-label");
+        }
+      }
+    }
+  }
+  async manageTarget() {
+    this.applyTargetLabel();
+    const target = this.resolvedElement.element;
+    if (!target) {
+      this.target = target;
+      return;
+    }
+    if (target.localName.search("-") > 0) {
+      await customElements.whenDefined(target.localName);
+    }
+    if (target.updateComplete !== void 0) {
+      await target.updateComplete;
+    }
+    this.applyTargetLabel(target);
+  }
+  get labelText() {
+    const assignedNodes = this.slotEl.assignedNodes({ flatten: true });
+    if (assignedNodes.length === 0) {
+      return "";
+    }
+    const labelText = assignedNodes.map(
+      (node) => (node.textContent || /* c8 ignore next */
+      "").trim()
+    );
+    return labelText.join(" ");
+  }
+  render() {
+    return lit.html`
+      <label>
+        <slot></slot>
+        ${this.required ? lit.html` ${astrickIcon()} ` : lit.nothing}
+      </label>
+    `;
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    this.addEventListener("click", this.handleClick);
+  }
+  willUpdate(changes) {
+    if (!this.hasAttribute("id")) {
+      this.setAttribute("id", `${this.tagName.toLowerCase()}-${randomId.randomID()}`);
+    }
+    if (changes.has("for")) {
+      this.resolvedElement.selector = this.for ? `#${this.for}` : "";
+    }
+    if (changes.has("id") || changes.has(elementResolution.elementResolverUpdatedSymbol)) {
+      this.manageTarget();
+    }
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoFieldLabel.prototype, "disabled");
+__decorateClass([
+  decorators_js.property({ type: String })
+], LuzmoFieldLabel.prototype, "id");
+__decorateClass([
+  decorators_js.property({ type: String })
+], LuzmoFieldLabel.prototype, "for");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoFieldLabel.prototype, "required");
+__decorateClass([
+  decorators_js.query("slot")
+], LuzmoFieldLabel.prototype, "slotEl");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "side-aligned" })
+], LuzmoFieldLabel.prototype, "sideAligned");
+exports.LuzmoFieldLabel = LuzmoFieldLabel;

package/components/field-label-Dpsecoc6.js

@@ -0,0 +1,157 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { unsafeCSS, nothing, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { a as LuzmoElement } from "./base-DmeVy0cq.js";
+import { c as conditionAttributeWithId, a as conditionAttributeWithoutId } from "./condition-attribute-with-id-Cn815e9W.js";
+import { r as randomID } from "./random-id-BEc6QIUL.js";
+import { E as ElementResolutionController, e as elementResolverUpdatedSymbol } from "./element-resolution-nMlmW4Jy.js";
+import { S as SizedMixin } from "./sized-mixin-DmkrNdWB.js";
+const styles = ":host{box-sizing:border-box;min-block-size:var(--luzmo-field-label-min-height, var(--field-label-min-height));padding-block:var(--luzmo-field-label-padding-block, var(--luzmo-field-label-top-to-text, var(--field-label-top-to-text)) var(--luzmo-field-label-bottom-to-text, var(--field-label-bottom-to-text)));padding-inline:0;padding-inline:var(--luzmo-field-label-padding-inline, 0);margin-block:0;margin-block:var(--luzmo-field-label-margin-block, var(--luzmo-field-label-margin-block-start, 0) var(--luzmo-field-label-margin-block-end, 0));margin-inline:0;margin-inline:var(--luzmo-field-label-margin-inline, var(--luzmo-field-label-margin-inline-start, 0) var(--luzmo-field-label-margin-inline-end, 0));font-size:var(--luzmo-field-label-font-size, var(--field-label-font-size));font-weight:var(--luzmo-field-label-font-weight, var(--field-label-font-weight));line-height:var(--luzmo-field-label-line-height, var(--field-label-line-height));-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto;color:var(--luzmo-field-label-color, var(--field-label-color));display:block;font-family:var(--luzmo-field-label-font-family, var(--luzmo-font-family))}:host(:lang(ja)),:host(:lang(ko)),:host(:lang(zh)){--luzmo-field-label-line-height: var( --luzmo-field-label-line-height-cjk, var(--field-label-line-height-cjk) )}:host([disabled]),:host([disabled]) .required-icon{--luzmo-field-label-color: var( --highcontrast-field-label-disabled-content-color, var( --luzmo-disabled-content-color, var(--field-label-disabled-content-color) ) )}.required-icon{display:inline-block;margin-block:0;margin-inline:var(--luzmo-field-label-text-to-asterisk, var(--field-label-text-to-asterisk)) 0;vertical-align:initial;vertical-align:var(--luzmo-field-label-asterisk-vertical-align, baseline)}:host([side-aligned=start]),:host([side-aligned=end]){vertical-align:top;margin-block-start:0;margin-block-end:0;margin-inline-end:var(--luzmo-field-label-side-padding-right, var(--field-label-side-padding-right));display:inline-flex;align-items:center;font-size:var(--luzmo-field-label-side-aligned-font-size, var(--field-label-side-aligned-font-size));block-size:var(--luzmo-field-label-side-aligned-height, var(--field-label-side-aligned-height))}:host([side-aligned=end]){text-align:end}@media (forced-colors: active){:host{--highcontrast-field-label-disabled-content-color: GrayText}}:host{--field-label-color: var(--luzmo-font-color);--field-label-font-weight: var(--luzmo-font-weight);--field-label-line-height: var(--luzmo-line-height);--field-label-line-height-cjk: 1.5;--field-label-disabled-content-color: var(--luzmo-font-color-disabled)}:host{--field-label-min-height: var(--luzmo-component-height-xs);--field-label-side-aligned-height: var(--luzmo-component-height);--field-label-top-to-text: calc(var(--luzmo-spacing-2));--field-label-bottom-to-text: var(--luzmo-spacing-2);--field-label-side-aligned-font-size: var(--luzmo-font-size);--field-label-font-size: var(--luzmo-font-size-s);--field-label-side-padding-right: var(--luzmo-spacing-4);--field-label-text-to-asterisk: 0px}:host([size=s]){--field-label-min-height: var(--luzmo-component-height-xxs);--field-label-side-aligned-height: var(--luzmo-component-height-s);--field-label-top-to-text: calc(var(--luzmo-spacing-1));--field-label-bottom-to-text: var(--luzmo-spacing-1);--field-label-side-aligned-font-size: var(--luzmo-font-size-s);--field-label-font-size: var(--luzmo-font-size-xs);--field-label-side-padding-right: var(--luzmo-spacing-3);--field-label-text-to-asterisk: 0px}:host([size=l]){--field-label-min-height: var(--luzmo-component-height-xs);--field-label-side-aligned-height: var(--luzmo-component-height-l);--field-label-top-to-text: var(--luzmo-spacing-3);--field-label-bottom-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--field-label-side-aligned-font-size: var(--luzmo-font-size-l);--field-label-font-size: var(--luzmo-font-size);--field-label-side-padding-right: var(--luzmo-spacing-4);--field-label-text-to-asterisk: var(--luzmo-spacing-1)}:host([size=xl]){--field-label-min-height: var(--luzmo-component-height-s);--field-label-side-aligned-height: var(--luzmo-component-height-xl);--field-label-top-to-text: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--field-label-bottom-to-text: var(--luzmo-spacing-3);--field-label-side-aligned-font-size: var(--luzmo-font-size-xl);--field-label-font-size: var(--luzmo-font-size-l);--field-label-side-padding-right: var(--luzmo-spacing-4);--field-label-text-to-asterisk: var(--luzmo-spacing-1)}label{display:inline-block}";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const astrickIcon = () => html`
+  <div class="icon-container required-icon">*</div>
+`;
+class LuzmoFieldLabel extends SizedMixin(LuzmoElement, {
+  noDefaultSize: true
+}) {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.id = "";
+    this.for = "";
+    this.required = false;
+    this.resolvedElement = new ElementResolutionController(this);
+  }
+  static get styles() {
+    return [unsafeCSS(styles)];
+  }
+  handleClick(event) {
+    if (!this.target || this.disabled || event.defaultPrevented) {
+      return;
+    }
+    this.target.focus();
+    const parent = this.getRootNode();
+    const target = this.target;
+    const targetParent = target.getRootNode();
+    const targetHost = targetParent.host;
+    if (targetParent === parent && target.forceFocusVisible) {
+      target.forceFocusVisible();
+    } else if (targetHost && targetHost.forceFocusVisible) {
+      targetHost.forceFocusVisible();
+    }
+  }
+  applyTargetLabel(target) {
+    this.target = target || this.target;
+    if (this.target) {
+      const applyLabel = this.target.applyFocusElementLabel;
+      const focusable = this.target.focusElement || this.target;
+      const targetParent = focusable.getRootNode();
+      if (applyLabel !== void 0) {
+        applyLabel(this.labelText, this);
+      } else if (targetParent === this.getRootNode()) {
+        const conditionAttribute = target ? conditionAttributeWithId : conditionAttributeWithoutId;
+        conditionAttribute(focusable, "aria-labelledby", [this.id]);
+      } else {
+        if (target) {
+          focusable.setAttribute("aria-label", this.labelText);
+        } else {
+          focusable.removeAttribute("aria-label");
+        }
+      }
+    }
+  }
+  async manageTarget() {
+    this.applyTargetLabel();
+    const target = this.resolvedElement.element;
+    if (!target) {
+      this.target = target;
+      return;
+    }
+    if (target.localName.search("-") > 0) {
+      await customElements.whenDefined(target.localName);
+    }
+    if (target.updateComplete !== void 0) {
+      await target.updateComplete;
+    }
+    this.applyTargetLabel(target);
+  }
+  get labelText() {
+    const assignedNodes = this.slotEl.assignedNodes({ flatten: true });
+    if (assignedNodes.length === 0) {
+      return "";
+    }
+    const labelText = assignedNodes.map(
+      (node) => (node.textContent || /* c8 ignore next */
+      "").trim()
+    );
+    return labelText.join(" ");
+  }
+  render() {
+    return html`
+      <label>
+        <slot></slot>
+        ${this.required ? html` ${astrickIcon()} ` : nothing}
+      </label>
+    `;
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    this.addEventListener("click", this.handleClick);
+  }
+  willUpdate(changes) {
+    if (!this.hasAttribute("id")) {
+      this.setAttribute("id", `${this.tagName.toLowerCase()}-${randomID()}`);
+    }
+    if (changes.has("for")) {
+      this.resolvedElement.selector = this.for ? `#${this.for}` : "";
+    }
+    if (changes.has("id") || changes.has(elementResolverUpdatedSymbol)) {
+      this.manageTarget();
+    }
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoFieldLabel.prototype, "disabled");
+__decorateClass([
+  property({ type: String })
+], LuzmoFieldLabel.prototype, "id");
+__decorateClass([
+  property({ type: String })
+], LuzmoFieldLabel.prototype, "for");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoFieldLabel.prototype, "required");
+__decorateClass([
+  query("slot")
+], LuzmoFieldLabel.prototype, "slotEl");
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "side-aligned" })
+], LuzmoFieldLabel.prototype, "sideAligned");
+export {
+  LuzmoFieldLabel as L
+};