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

package/components/button-base-C3kf6BTK.js

@@ -0,0 +1,207 @@
+/*! * 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, query } from "lit/decorators.js";
+import { F as Focusable } from "./focusable-ChCLg1k4.js";
+import { L as LikeAnchor } from "./like-anchor-v3cJ9RWM.js";
+import { O as ObserveSlotText } from "./observe-slot-text-CjnkkBPn.js";
+const styles = ":host{display:inline-flex;vertical-align:top;--parent-element-progress-circle-size: 18px;--icon-size: 18px}:host([dir]){-webkit-appearance:none}:host([disabled]){pointer-events:none;cursor:auto}#button{position:absolute;top:0;right:0;bottom:0;left:0}::slotted(luzmo-overlay),::slotted(luzmo-tooltip){position:absolute}:host:after{pointer-events:none}::slotted(*){pointer-events:none}::slotted([slot=icon]){--luzmo-icon-vertical-align: 0}slot[name=icon]::slotted(svg),slot[name=icon]::slotted(img){fill:currentcolor;stroke:currentcolor;block-size:var(--luzmo-button-icon-size, var(--icon-size));inline-size:var(--luzmo-button-icon-size, var(--icon-size))}[icon-only]+#label{display:contents}:host([size=s]){--parent-element-progress-circle-size: 16px;--icon-size: 16px}:host([size=l]){--parent-element-progress-circle-size: 20px;--icon-size: 20px}:host([size=xl]){--parent-element-progress-circle-size: 22px;--icon-size: 22px}";
+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 LuzmoButtonBase extends ObserveSlotText(
+  LikeAnchor(Focusable),
+  "",
+  ["luzmo-overlay,luzmo-tooltip"]
+) {
+  constructor() {
+    super();
+    this.active = false;
+    this.type = "button";
+    this.proxyFocus = this.proxyFocus.bind(this);
+    this.addEventListener("click", this.handleClickCapture, {
+      capture: true
+    });
+  }
+  static get styles() {
+    return [unsafeCSS(styles)];
+  }
+  get focusElement() {
+    return this;
+  }
+  get hasLabel() {
+    return this.slotHasContent;
+  }
+  get buttonContent() {
+    const content = [
+      html` <slot name="icon" ?icon-only=${!this.hasLabel}></slot> `,
+      html`
+        <span id="label">
+          <slot @slotchange=${this.manageTextObservedSlot}></slot>
+        </span>
+      `
+    ];
+    return content;
+  }
+  handleClickCapture(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+      return false;
+    }
+    if (this.shouldProxyClick()) {
+      return;
+    }
+  }
+  proxyFocus() {
+    this.focus();
+  }
+  shouldProxyClick() {
+    let handled = false;
+    if (this.anchorElement) {
+      this.anchorElement.click();
+      handled = true;
+    } else if (this.type !== "button") {
+      const proxy = typeof document !== "undefined" ? document.createElement("button") : null;
+      if (proxy) {
+        proxy.type = this.type;
+        this.insertAdjacentElement("afterend", proxy);
+        proxy.click();
+        proxy.remove();
+      }
+      handled = true;
+    }
+    return handled;
+  }
+  renderAnchor() {
+    return html`
+      ${this.buttonContent}
+      ${super.renderAnchor({
+      id: "button",
+      ariaHidden: true,
+      className: "button anchor hidden"
+    })}
+    `;
+  }
+  renderButton() {
+    return html` ${this.buttonContent} `;
+  }
+  render() {
+    return this.href && this.href.length > 0 ? this.renderAnchor() : this.renderButton();
+  }
+  handleKeydown(event) {
+    const { code } = event;
+    switch (code) {
+      case "Space": {
+        event.preventDefault();
+        if (this.href === void 0) {
+          this.addEventListener("keyup", this.handleKeyup);
+          this.active = true;
+        }
+        break;
+      }
+    }
+  }
+  handleKeypress(event) {
+    const { code } = event;
+    switch (code) {
+      case "Enter":
+      case "NumpadEnter": {
+        this.click();
+        break;
+      }
+    }
+  }
+  handleKeyup(event) {
+    const { code } = event;
+    switch (code) {
+      case "Space": {
+        this.removeEventListener("keyup", this.handleKeyup);
+        this.active = false;
+        this.click();
+        break;
+      }
+    }
+  }
+  manageAnchor() {
+    if (this.href && this.href.length > 0) {
+      if (!this.hasAttribute("role") || this.getAttribute("role") === "button") {
+        this.setAttribute("role", "link");
+      }
+    } else {
+      if (!this.hasAttribute("role") || this.getAttribute("role") === "link") {
+        this.setAttribute("role", "button");
+      }
+    }
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+    if (changed.has("label")) {
+      if (this.label) {
+        this.setAttribute("aria-label", this.label);
+      } else {
+        this.removeAttribute("aria-label");
+      }
+    }
+    this.manageAnchor();
+    this.addEventListener("keydown", this.handleKeydown);
+    this.addEventListener("keypress", this.handleKeypress);
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("href")) {
+      this.manageAnchor();
+    }
+    if (this.anchorElement) {
+      this.anchorElement.addEventListener("focus", this.proxyFocus);
+      this.anchorElement.tabIndex = -1;
+    }
+  }
+  update(changes) {
+    super.update(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 })
+], LuzmoButtonBase.prototype, "active");
+__decorateClass([
+  property({ type: String })
+], LuzmoButtonBase.prototype, "type");
+__decorateClass([
+  query(".anchor")
+], LuzmoButtonBase.prototype, "anchorElement");
+export {
+  LuzmoButtonBase as L
+};

package/components/button-group/index.cjs

@@ -15,4 +15,48 @@
  * 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 o=require("../base-CBCg3yyw.cjs"),u=require("../sized-mixin-CPxE5C96.cjs"),c=":host{gap:var(--luzmo-button-group-spacing-horizontal, var(--button-group-spacing-horizontal));justify-content:normal;justify-content:var(--luzmo-button-group-justify-content, normal);flex-wrap:wrap;display:flex}::slotted(*){flex-shrink:0}:host([vertical]){gap:var(--luzmo-button-group-spacing-vertical, var(--button-group-spacing-vertical));flex-direction:column;display:inline-flex}:host,:host([size=l]),:host([size=xl]){--button-group-spacing-horizontal: 16px;--button-group-spacing-vertical: 16px}:host([size=s]){--button-group-spacing-horizontal: 12px;--button-group-spacing-vertical: 12px}:host([vertical]) ::slotted(luzmo-action-button){--parent-element-action-button-label-flex-grow: 1}:host([dir=ltr][vertical]) ::slotted(luzmo-action-button){--parent-element-action-button-label-text-align: left}:host([dir=rtl][vertical]) ::slotted(luzmo-action-button){--parent-element-action-button-label-text-align: right}";var p=Object.defineProperty,g=(n,e,l,i)=>{for(var t=void 0,r=n.length-1,a;r>=0;r--)(a=n[r])&&(t=a(e,l,t)||t);return t&&p(e,l,t),t};class s extends u.SizedMixin(o.LuzmoElement,{noDefaultSize:!0}){constructor(){super(...arguments),this.vertical=!1}static get styles(){return[o.r(c)]}handleSlotchange({target:e}){e.assignedElements().forEach(i=>{i.size=this.size})}render(){return o.x` <slot @slotchange=${this.handleSlotchange}></slot> `}}g([o.n({type:Boolean,reflect:!0})],s.prototype,"vertical");customElements.get("luzmo-button-group")||customElements.define("luzmo-button-group",s);exports.LuzmoButtonGroup=s;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const base = require("../base-COw9n7UR.cjs");
+const sizedMixin = require("../sized-mixin-UaTVa-AE.cjs");
+const styles = ":host{gap:var(--luzmo-button-group-spacing-horizontal, var(--button-group-spacing-horizontal));justify-content:normal;justify-content:var(--luzmo-button-group-justify-content, normal);flex-wrap:wrap;display:flex}::slotted(*){flex-shrink:0}:host([vertical]){gap:var(--luzmo-button-group-spacing-vertical, var(--button-group-spacing-vertical));flex-direction:column;display:inline-flex}:host,:host([size=l]),:host([size=xl]){--button-group-spacing-horizontal: 16px;--button-group-spacing-vertical: 16px}:host([size=s]){--button-group-spacing-horizontal: 12px;--button-group-spacing-vertical: 12px}:host([vertical]) ::slotted(luzmo-action-button){--parent-element-action-button-label-flex-grow: 1}:host([dir=ltr][vertical]) ::slotted(luzmo-action-button){--parent-element-action-button-label-text-align: left}:host([dir=rtl][vertical]) ::slotted(luzmo-action-button){--parent-element-action-button-label-text-align: right}";
+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 LuzmoButtonGroup extends sizedMixin.SizedMixin(base.LuzmoElement, {
+  noDefaultSize: true
+}) {
+  constructor() {
+    super(...arguments);
+    this.vertical = false;
+  }
+  static get styles() {
+    return [lit.unsafeCSS(styles)];
+  }
+  handleSlotchange({
+    target: slot
+  }) {
+    const assignedElements = slot.assignedElements();
+    assignedElements.forEach((button) => {
+      button.size = this.size;
+    });
+  }
+  render() {
+    return lit.html` <slot @slotchange=${this.handleSlotchange}></slot> `;
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoButtonGroup.prototype, "vertical");
+if (!customElements.get("luzmo-button-group")) {
+  customElements.define("luzmo-button-group", LuzmoButtonGroup);
+}
+exports.LuzmoButtonGroup = LuzmoButtonGroup;

package/components/button-group/index.js

@@ -15,45 +15,57 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a as m, r as a, x as s, n as z } from "../base-WsynuqaS.js";
-import { S as d } from "../sized-mixin-D4ACoVUr.js";
-const c = () => {
-  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);
   }
 };
-c();
-const g = ":host{gap:var(--luzmo-button-group-spacing-horizontal, var(--button-group-spacing-horizontal));justify-content:normal;justify-content:var(--luzmo-button-group-justify-content, normal);flex-wrap:wrap;display:flex}::slotted(*){flex-shrink:0}:host([vertical]){gap:var(--luzmo-button-group-spacing-vertical, var(--button-group-spacing-vertical));flex-direction:column;display:inline-flex}:host,:host([size=l]),:host([size=xl]){--button-group-spacing-horizontal: 16px;--button-group-spacing-vertical: 16px}:host([size=s]){--button-group-spacing-horizontal: 12px;--button-group-spacing-vertical: 12px}:host([vertical]) ::slotted(luzmo-action-button){--parent-element-action-button-label-flex-grow: 1}:host([dir=ltr][vertical]) ::slotted(luzmo-action-button){--parent-element-action-button-label-text-align: left}:host([dir=rtl][vertical]) ::slotted(luzmo-action-button){--parent-element-action-button-label-text-align: right}";
-var p = Object.defineProperty, f = (o, r, e, u) => {
-  for (var l = void 0, t = o.length - 1, n; t >= 0; t--)
-    (n = o[t]) && (l = n(r, e, l) || l);
-  return l && p(r, e, l), l;
+initializeGlobalLuzmoCSSVariables();
+import { unsafeCSS, html } from "lit";
+import { property } from "lit/decorators.js";
+import { a as LuzmoElement } from "../base-DmeVy0cq.js";
+import { S as SizedMixin } from "../sized-mixin-DmkrNdWB.js";
+const styles = ":host{gap:var(--luzmo-button-group-spacing-horizontal, var(--button-group-spacing-horizontal));justify-content:normal;justify-content:var(--luzmo-button-group-justify-content, normal);flex-wrap:wrap;display:flex}::slotted(*){flex-shrink:0}:host([vertical]){gap:var(--luzmo-button-group-spacing-vertical, var(--button-group-spacing-vertical));flex-direction:column;display:inline-flex}:host,:host([size=l]),:host([size=xl]){--button-group-spacing-horizontal: 16px;--button-group-spacing-vertical: 16px}:host([size=s]){--button-group-spacing-horizontal: 12px;--button-group-spacing-vertical: 12px}:host([vertical]) ::slotted(luzmo-action-button){--parent-element-action-button-label-flex-grow: 1}:host([dir=ltr][vertical]) ::slotted(luzmo-action-button){--parent-element-action-button-label-text-align: left}:host([dir=rtl][vertical]) ::slotted(luzmo-action-button){--parent-element-action-button-label-text-align: right}";
+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 i extends d(m, {
-  noDefaultSize: !0
+class LuzmoButtonGroup extends SizedMixin(LuzmoElement, {
+  noDefaultSize: true
 }) {
   constructor() {
-    super(...arguments), this.vertical = !1;
+    super(...arguments);
+    this.vertical = false;
   }
   static get styles() {
-    return [a(g)];
+    return [unsafeCSS(styles)];
   }
   handleSlotchange({
-    target: r
+    target: slot
   }) {
-    r.assignedElements().forEach((u) => {
-      u.size = this.size;
+    const assignedElements = slot.assignedElements();
+    assignedElements.forEach((button) => {
+      button.size = this.size;
     });
   }
   render() {
-    return s` <slot @slotchange=${this.handleSlotchange}></slot> `;
+    return html` <slot @slotchange=${this.handleSlotchange}></slot> `;
   }
 }
-f([
-  z({ type: Boolean, reflect: !0 })
-], i.prototype, "vertical");
-customElements.get("luzmo-button-group") || customElements.define("luzmo-button-group", i);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoButtonGroup.prototype, "vertical");
+if (!customElements.get("luzmo-button-group")) {
+  customElements.define("luzmo-button-group", LuzmoButtonGroup);
+}
 export {
-  i as LuzmoButtonGroup
+  LuzmoButtonGroup
 };