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

package/components/popover-BkgUf0kL.cjs

@@ -0,0 +1,74 @@
+/*! * 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";
+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 popoverStyles = ":host{pointer-events:none;visibility:hidden;opacity:0;max-height:var(--luzmo-popover-max-height)!important;transition:transform .13s ease-in-out,opacity .13s ease-in-out,visibility 0s linear .13s;transition:transform var(--luzmo-overlay-animation-duration, var(--animation-duration-100, .13s)) ease-in-out,opacity var(--luzmo-overlay-animation-duration, var(--animation-duration-100, .13s)) ease-in-out,visibility 0s linear var(--luzmo-overlay-animation-duration, var(--animation-duration-100, .13s))}:host([open]){pointer-events:auto;visibility:visible;opacity:1;transition-delay:0s;transition-delay:var(--luzmo-overlay-animation-duration-opened, var(--animation-duration-0, 0s))}@media (forced-colors: active){:host{--highcontrast-popover-border-color: CanvasText}}:host{--popover-filter: drop-shadow( var(--luzmo-popover-shadow-horizontal, var(--popover-shadow-horizontal)) var(--luzmo-popover-shadow-vertical, var(--popover-shadow-vertical)) var(--luzmo-popover-shadow-blur, var(--popover-shadow-blur)) var(--luzmo-popover-shadow-color, var(--popover-shadow-color)) );box-sizing:border-box;padding:var(--luzmo-popover-content-area-spacing-vertical, var(--popover-content-area-spacing-vertical)) 0;border-radius:var(--luzmo-popover-corner-radius, var(--popover-corner-radius));border-style:solid;border-color:var(--highcontrast-popover-border-color, var(--luzmo-popover-border-color, var(--popover-border-color)));border-width:var(--luzmo-popover-border-width, var(--popover-border-width));background-color:var(--luzmo-popover-background-color, var(--popover-background-color));filter:var(--luzmo-popover-filter, var(--popover-filter));outline:none;flex-direction:column;display:inline-flex;position:absolute}:host([tip]) #tip .triangle{stroke-linecap:square;stroke-linejoin:miter;fill:var(--highcontrast-popover-background-color, var(--luzmo-popover-background-color, var(--popover-background-color)));stroke:var(--highcontrast-popover-border-color, var(--luzmo-popover-border-color, var(--popover-border-color)));stroke-width:var(--luzmo-popover-border-width, var(--popover-border-width))}*{--luzmo-popover-filter: none}:host([tip]) .luzmo-Popover--top-end,:host([tip]) .luzmo-Popover--top-left,:host([tip]) .luzmo-Popover--top-right,:host([tip]) .luzmo-Popover--top-start,:host([placement*=top][tip]){margin-block-end:calc(var(--luzmo-popover-pointer-height, var(--popover-pointer-height)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--top-end,:host([open]) .luzmo-Popover--top-left,:host([open]) .luzmo-Popover--top-right,:host([open]) .luzmo-Popover--top-start,:host([placement*=top][open]){transform:translateY(calc(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)) * -1))}:host([tip]) .luzmo-Popover--bottom-end,:host([tip]) .luzmo-Popover--bottom-left,:host([tip]) .luzmo-Popover--bottom-right,:host([tip]) .luzmo-Popover--bottom-start,:host([placement*=bottom][tip]){margin-block-start:calc(var(--luzmo-popover-pointer-height, var(--popover-pointer-height)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--bottom-end,:host([open]) .luzmo-Popover--bottom-left,:host([open]) .luzmo-Popover--bottom-right,:host([open]) .luzmo-Popover--bottom-start,:host([placement*=bottom][open]){transform:translateY(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)))}:host([tip]) .luzmo-Popover--right-bottom,:host([tip]) .luzmo-Popover--right-top,:host([placement*=right][tip]){margin-left:calc(var(--luzmo-popover-pointer-width, var(--popover-pointer-width)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--right-bottom,:host([open]) .luzmo-Popover--right-top,:host([placement*=right][open]){transform:translate(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)))}:host([tip]) .luzmo-Popover--left-bottom,:host([tip]) .luzmo-Popover--left-top,:host([placement*=left][tip]){margin-right:calc(var(--luzmo-popover-pointer-width, var(--popover-pointer-width)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--left-bottom,:host([open]) .luzmo-Popover--left-top,:host([placement*=left][open]){transform:translate(calc(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)) * -1))}:host([tip]) .luzmo-Popover--start-bottom,:host([tip]) .luzmo-Popover--start-top,:host([tip]) .luzmo-Popover--start{margin-inline-end:calc(var(--luzmo-popover-pointer-width, var(--popover-pointer-width)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--start-bottom,:host([open]) .luzmo-Popover--start-top,:host([open]) .luzmo-Popover--start{transform:translate(calc(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)) * -1))}:host([open]) .luzmo-Popover--start-bottom:dir(rtl),:host([open]) .luzmo-Popover--start-top:dir(rtl),:host([open]) .luzmo-Popover--start:dir(rtl),:host([dir=rtl][open]) .luzmo-Popover--start-bottom,:host([dir=rtl][open]) .luzmo-Popover--start-top,:host([dir=rtl][open]) .luzmo-Popover--start{transform:translate(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)))}:host([tip]) .luzmo-Popover--end-bottom,:host([tip]) .luzmo-Popover--end-top,:host([tip]) .luzmo-Popover--end{margin-inline-start:calc(var(--luzmo-popover-pointer-width, var(--popover-pointer-width)) - var(--luzmo-popover-border-width, var(--popover-border-width)))}:host([open]) .luzmo-Popover--end-bottom,:host([open]) .luzmo-Popover--end-top,:host([open]) .luzmo-Popover--end{transform:translate(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)))}:host([open]) .luzmo-Popover--end-bottom:dir(rtl),:host([open]) .luzmo-Popover--end-top:dir(rtl),:host([open]) .luzmo-Popover--end:dir(rtl),:host([dir=rtl][open]) .luzmo-Popover--end-bottom,:host([dir=rtl][open]) .luzmo-Popover--end-top,:host([dir=rtl][open]) .luzmo-Popover--end{transform:translate(calc(var(--luzmo-popover-animation-distance, var(--popover-animation-distance)) * -1))}:host([tip]) #tip,:host([tip][placement*=bottom]) #tip,:host([tip]) .luzmo-Popover--bottom-end #tip,:host([tip]) .luzmo-Popover--bottom-left #tip,:host([tip]) .luzmo-Popover--bottom-right #tip,:host([tip]) .luzmo-Popover--bottom-start #tip,:host([tip][placement*=top]) #tip,:host([tip]) .luzmo-Popover--top-end #tip,:host([tip]) .luzmo-Popover--top-left #tip,:host([tip]) .luzmo-Popover--top-right #tip,:host([tip]) .luzmo-Popover--top-start #tip{inline-size:var(--luzmo-popover-pointer-width, var(--popover-pointer-width));block-size:var(--luzmo-popover-pointer-height, var(--popover-pointer-height));margin:auto;position:absolute;inset-block-start:100%;inset-inline:0;transform:translate(0)}:host([tip]) .luzmo-Popover--top-left #tip{inset-inline:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing)) auto}:host([tip]) .luzmo-Popover--top-right #tip{inset-inline:auto var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--top-start #tip{margin-inline-start:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--top-end #tip{margin-inline-end:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip][placement*=bottom]) #tip,:host([tip]) .luzmo-Popover--bottom-end #tip,:host([tip]) .luzmo-Popover--bottom-left #tip,:host([tip]) .luzmo-Popover--bottom-right #tip,:host([tip]) .luzmo-Popover--bottom-start #tip{inset-block:auto 100%;transform:scaleY(-1)}:host([tip]) .luzmo-Popover--bottom-left #tip{inset-inline:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing)) auto}:host([tip]) .luzmo-Popover--bottom-right #tip{inset-inline:auto var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--bottom-start #tip{margin-inline-start:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--bottom-end #tip{margin-inline-end:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--end #tip,:host([tip]) .luzmo-Popover--end-bottom #tip,:host([tip]) .luzmo-Popover--end-top #tip,:host([tip][placement*=left]) #tip,:host([tip]) .luzmo-Popover--left-bottom #tip,:host([tip]) .luzmo-Popover--left-top #tip,:host([tip][placement*=right]) #tip,:host([tip]) .luzmo-Popover--right-bottom #tip,:host([tip]) .luzmo-Popover--right-top #tip,:host([tip]) .luzmo-Popover--start #tip,:host([tip]) .luzmo-Popover--start-bottom #tip,:host([tip]) .luzmo-Popover--start-top #tip{inline-size:var(--luzmo-popover-pointer-height, var(--popover-pointer-height));block-size:var(--luzmo-popover-pointer-width, var(--popover-pointer-width));inset-block:0}:host([tip][placement*=left]) #tip,:host([tip]) .luzmo-Popover--left-bottom #tip,:host([tip]) .luzmo-Popover--left-top #tip{left:100%;right:auto}:host([tip][placement*=right]) #tip,:host([tip]) .luzmo-Popover--right-bottom #tip,:host([tip]) .luzmo-Popover--right-top #tip{left:auto;right:100%;transform:scaleX(-1)}:host([tip]) .luzmo-Popover--end-top #tip,:host([tip]) .luzmo-Popover--left-top #tip,:host([tip]) .luzmo-Popover--right-top #tip,:host([tip]) .luzmo-Popover--start-top #tip{inset-block:var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing)) auto}:host([tip]) .luzmo-Popover--end-bottom #tip,:host([tip]) .luzmo-Popover--left-bottom #tip,:host([tip]) .luzmo-Popover--right-bottom #tip,:host([tip]) .luzmo-Popover--start-bottom #tip{inset-block:auto var(--luzmo-popover-pointer-edge-spacing, var(--popover-pointer-edge-spacing))}:host([tip]) .luzmo-Popover--start #tip,:host([tip]) .luzmo-Popover--start-bottom #tip,:host([tip]) .luzmo-Popover--start-top #tip{margin-inline-start:100%}:host([tip]) .luzmo-Popover--start #tip:dir(rtl),:host([tip]) .luzmo-Popover--start-bottom #tip:dir(rtl),:host([tip]) .luzmo-Popover--start-top #tip:dir(rtl),:host([dir=rtl][tip]) .luzmo-Popover--start #tip,:host([dir=rtl][tip]) .luzmo-Popover--start-bottom #tip,:host([dir=rtl][tip]) .luzmo-Popover--start-top #tip{transform:none}:host([tip]) .luzmo-Popover--end #tip,:host([tip]) .luzmo-Popover--end-bottom #tip,:host([tip]) .luzmo-Popover--end-top #tip{margin-inline-end:100%;transform:scaleX(-1)}:host([tip]) .luzmo-Popover--end #tip:dir(rtl),:host([tip]) .luzmo-Popover--end-bottom #tip:dir(rtl),:host([tip]) .luzmo-Popover--end-top #tip:dir(rtl),:host([dir=rtl][tip]) .luzmo-Popover--end #tip,:host([dir=rtl][tip]) .luzmo-Popover--end-bottom #tip,:host([dir=rtl][tip]) .luzmo-Popover--end-top #tip{transform:scaleX(1)}:host{--popover-border-width: var(--luzmo-border-width);--popover-animation-distance: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--popover-background-color: var(--luzmo-background-color);--popover-border-color: var(--luzmo-border-color);--popover-content-area-spacing-vertical: var(--luzmo-spacing-2);--popover-shadow-horizontal: 0;--popover-shadow-vertical: 1px;--popover-shadow-blur: 4px;--popover-shadow-color: var(--luzmo-border-color);--popover-corner-radius: var(--luzmo-border-radius);--popover-pointer-width: var(--luzmo-spacing-5);--popover-pointer-height: var(--luzmo-spacing-3);--popover-pointer-edge-offset: 16px;--popover-pointer-edge-spacing: 24px}:host([size=s]){--popover-animation-distance: var(--luzmo-spacing-2)}:host([size=l]){--popover-animation-distance: var(--luzmo-spacing-3)}:host([size=xl]){--popover-animation-distance: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) )}:host{min-width:min-content;max-height:100%;max-width:100%;clip-path:none}::slotted(*){overscroll-behavior:contain}:host([placement*=left]) #tip[style],:host([placement*=right]) #tip[style]{inset-block-end:auto}:host([placement*=top]) #tip[style],:host([placement*=bottom]) #tip[style]{inset-inline-end:auto}.block,.inline{width:100%;height:100%;display:block}:host([placement*=left]) .block,:host([placement*=right]) .block{display:none}:host([placement*=top]) .inline,:host([placement*=bottom]) .inline{display:none}::slotted(.visually-hidden){border:0;clip:rect(0,0,0,0);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}::slotted(luzmo-menu){margin:0}:host([dialog]){min-width:var(--luzmo-popover-dialog-min-width, 270px);padding:var(--luzmo-popover-dialog-padding, 30px 29px)}:host([tip][placement]) #tip{height:auto}";
+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 LuzmoPopover extends sizedMixin.SizedMixin(base.LuzmoElement) {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.tip = false;
+  }
+  static get styles() {
+    return [lit.unsafeCSS(popoverStyles)];
+  }
+  renderTip() {
+    return lit.html`
+      <div id="tip" aria-hidden="true">
+        <svg class="tip block" viewBox="0 -0.5 16 9">
+          <path class="triangle" d="M-1,-1 8,8 17,-1"></path>
+        </svg>
+        <svg class="tip inline" viewBox="0 -0.5 9 16">
+          <path class="triangle" d="M-1,-1 8,8 -1,17"></path>
+        </svg>
+      </div>
+    `;
+  }
+  render() {
+    return lit.html`
+      <slot></slot>
+      ${this.tip ? this.renderTip() : lit.nothing}
+    `;
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoPopover.prototype, "open");
+__decorateClass([
+  decorators_js.property({ reflect: true })
+], LuzmoPopover.prototype, "placement");
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoPopover.prototype, "tip");
+__decorateClass([
+  decorators_js.query("#tip")
+], LuzmoPopover.prototype, "tipElement");
+exports.LuzmoPopover = LuzmoPopover;

package/components/progress-circle/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("../progress-circle-BvRJNuNo.cjs");customElements.get("luzmo-progress-circle")||customElements.define("luzmo-progress-circle",e.LuzmoProgressCircle);exports.LuzmoProgressCircle=e.LuzmoProgressCircle;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const progressCircle = require("../progress-circle-_Etqsj9f.cjs");
+if (!customElements.get("luzmo-progress-circle")) {
+  customElements.define("luzmo-progress-circle", progressCircle.LuzmoProgressCircle);
+}
+exports.LuzmoProgressCircle = progressCircle.LuzmoProgressCircle;

package/components/progress-circle/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 "../progress-circle-DXH9z8-6.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-progress-circle") || customElements.define("luzmo-progress-circle", r);
+initializeGlobalLuzmoCSSVariables();
+import { L as LuzmoProgressCircle } from "../progress-circle-Hu_ivPHf.js";
+if (!customElements.get("luzmo-progress-circle")) {
+  customElements.define("luzmo-progress-circle", LuzmoProgressCircle);
+}
 export {
-  r as LuzmoProgressCircle
+  LuzmoProgressCircle
 };

package/components/progress-circle-Hu_ivPHf.js

@@ -0,0 +1,133 @@
+/*! * 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 { ifDefined } from "lit/directives/if-defined.js";
+import { a as LuzmoElement } from "./base-DmeVy0cq.js";
+import { S as SizedMixin } from "./sized-mixin-DmkrNdWB.js";
+const getLabelFromSlot = (label, slotEl) => {
+  if (label) {
+    return null;
+  }
+  const textContent = slotEl.assignedNodes().reduce((accumulator, node) => {
+    if (node.textContent) {
+      return accumulator + node.textContent;
+    }
+    return accumulator;
+  }, "");
+  if (textContent) {
+    return textContent.trim();
+  }
+  return null;
+};
+const styles = "@media (forced-colors: active){:host{--highcontrast-progress-circle-fill-border-color: Highlight;--highcontrast-progress-circle-fill-border-color-over-background: Highlight}.track{--progress-circle-track-border-style: double}}:host{position:var(--luzmo-progress-circle-position, relative);direction:ltr;display:inline-block;position:relative;transform:translateZ(0)}:host,.track{inline-size:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));block-size:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px))}.track{box-sizing:border-box;border-style:var(--highcontrast-progress-circle-track-border-style, var(--luzmo-progress-circle-track-border-style, var(--progress-circle-track-border-style, solid)));border-width:var(--luzmo-progress-circle-thickness, var(--progress-circle-thickness, 2px));border-radius:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));border-color:var(--luzmo-progress-circle-track-border-color, var(--luzmo-border-color))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));block-size:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));border-style:solid;border-width:var(--luzmo-progress-circle-thickness, var(--progress-circle-thickness, 3px));border-radius:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));border-color:var(--highcontrast-progress-circle-fill-border-color, var(--luzmo-progress-circle-fill-border-color, var(--luzmo-primary)))}:host([static-color=black]) .track{border-color:var(--luzmo-progress-circle-track-border-color-over-background, rgba(0, 0, 0, .25))}:host([static-color=black]) .fill{border-color:var(--highcontrast-progress-circle-fill-border-color-over-background, var(--luzmo-progress-circle-fill-border-color-over-background, rgb(0, 0, 0)))}:host([static-color=white]) .track{border-color:var(--luzmo-progress-circle-track-border-color-over-background, rgba(255, 255, 255, .15))}:host([static-color=white]) .fill{border-color:var(--highcontrast-progress-circle-fill-border-color-over-background, var(--luzmo-progress-circle-fill-border-color-over-background, rgb(255, 255, 255)))}.fill-mask1,.fill-mask2{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fill-sub-mask1,.fill-sub-mask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fill-mask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:center;animation:1s cubic-bezier(.25,.78,.48,.89) infinite luzmo-fills-rotate;transform:translateZ(0)}:host([indeterminate]) .fill-sub-mask1{will-change:transform;animation:1s linear infinite luzmo-fill-mask-1;transform:translateZ(0)}:host([indeterminate]) .fill-sub-mask2{will-change:transform;animation:1s linear infinite luzmo-fill-mask-2;transform:translateZ(0)}.fill-submask-2{animation:1s linear infinite luzmo-fill-mask-2}@keyframes luzmo-fill-mask-1{0%{transform:rotate(90deg)}1.69%{transform:rotate(72.3deg)}3.39%{transform:rotate(55.5deg)}5.08%{transform:rotate(40.3deg)}6.78%{transform:rotate(25deg)}8.47%{transform:rotate(10.6deg)}10.17%{transform:rotate(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}42.37%{transform:rotate(5.3deg)}44.07%{transform:rotate(13.4deg)}45.76%{transform:rotate(20.6deg)}47.46%{transform:rotate(29deg)}49.15%{transform:rotate(36.5deg)}50.85%{transform:rotate(42.6deg)}52.54%{transform:rotate(48.8deg)}54.24%{transform:rotate(54.2deg)}55.93%{transform:rotate(59.4deg)}57.63%{transform:rotate(63.2deg)}59.32%{transform:rotate(67.2deg)}61.02%{transform:rotate(70.8deg)}62.71%{transform:rotate(73.8deg)}64.41%{transform:rotate(76.2deg)}66.1%{transform:rotate(78.7deg)}67.8%{transform:rotate(80.6deg)}69.49%{transform:rotate(82.6deg)}71.19%{transform:rotate(83.7deg)}72.88%{transform:rotate(85deg)}74.58%{transform:rotate(86.3deg)}76.27%{transform:rotate(87deg)}77.97%{transform:rotate(87.7deg)}79.66%{transform:rotate(88.3deg)}81.36%{transform:rotate(88.6deg)}83.05%{transform:rotate(89.2deg)}84.75%{transform:rotate(89.2deg)}86.44%{transform:rotate(89.5deg)}88.14%{transform:rotate(89.9deg)}89.83%{transform:rotate(89.7deg)}91.53%{transform:rotate(90.1deg)}93.22%{transform:rotate(90.2deg)}94.92%{transform:rotate(90.1deg)}96.61%{transform:rotate(90deg)}98.31%{transform:rotate(89.8deg)}to{transform:rotate(90deg)}}@keyframes luzmo-fill-mask-2{0%{transform:rotate(180deg)}1.69%{transform:rotate(180deg)}3.39%{transform:rotate(180deg)}5.08%{transform:rotate(180deg)}6.78%{transform:rotate(180deg)}8.47%{transform:rotate(180deg)}10.17%{transform:rotate(179.2deg)}11.86%{transform:rotate(164deg)}13.56%{transform:rotate(151.8deg)}15.25%{transform:rotate(140.8deg)}16.95%{transform:rotate(130.3deg)}18.64%{transform:rotate(120.4deg)}20.34%{transform:rotate(110.8deg)}22.03%{transform:rotate(101.6deg)}23.73%{transform:rotate(93.5deg)}25.42%{transform:rotate(85.4deg)}27.12%{transform:rotate(78.1deg)}28.81%{transform:rotate(71.2deg)}30.51%{transform:rotate(89.1deg)}32.2%{transform:rotate(105.5deg)}33.9%{transform:rotate(121.3deg)}35.59%{transform:rotate(135.5deg)}37.29%{transform:rotate(148.4deg)}38.98%{transform:rotate(161deg)}40.68%{transform:rotate(173.5deg)}42.37%{transform:rotate(180deg)}44.07%{transform:rotate(180deg)}45.76%{transform:rotate(180deg)}47.46%{transform:rotate(180deg)}49.15%{transform:rotate(180deg)}50.85%{transform:rotate(180deg)}52.54%{transform:rotate(180deg)}54.24%{transform:rotate(180deg)}55.93%{transform:rotate(180deg)}57.63%{transform:rotate(180deg)}59.32%{transform:rotate(180deg)}61.02%{transform:rotate(180deg)}62.71%{transform:rotate(180deg)}64.41%{transform:rotate(180deg)}66.1%{transform:rotate(180deg)}67.8%{transform:rotate(180deg)}69.49%{transform:rotate(180deg)}71.19%{transform:rotate(180deg)}72.88%{transform:rotate(180deg)}74.58%{transform:rotate(180deg)}76.27%{transform:rotate(180deg)}77.97%{transform:rotate(180deg)}79.66%{transform:rotate(180deg)}81.36%{transform:rotate(180deg)}83.05%{transform:rotate(180deg)}84.75%{transform:rotate(180deg)}86.44%{transform:rotate(180deg)}88.14%{transform:rotate(180deg)}89.83%{transform:rotate(180deg)}91.53%{transform:rotate(180deg)}93.22%{transform:rotate(180deg)}94.92%{transform:rotate(180deg)}96.61%{transform:rotate(180deg)}98.31%{transform:rotate(180deg)}to{transform:rotate(180deg)}}@keyframes luzmo-fills-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host([size=s]){--progress-circle-size: 16px;--progress-circle-thickness: 2px}:host([size=l]){--progress-circle-size: 48px;--progress-circle-thickness: 3px}:host([size=xl]){--progress-circle-size: 64px;--progress-circle-thickness: 4px}:host{block-size:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size));inline-size:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size));--progress-circle-size: inherit;--parent-element-progress-circle-size: inherit;--parent-element-progress-circle-size: var(--progress-circle-size, 32px)}:host([size=s]){--parent-element-progress-circle-size: var(--progress-circle-size, 16px)}:host([size=l]){--parent-element-progress-circle-size: var(--progress-circle-size, 48px)}:host([size=xl]){--parent-element-progress-circle-size: var(--progress-circle-size, 64px)}slot{display:none}.track,.fill{block-size:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size));border-radius:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size));inline-size:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size))}:host([indeterminate]) .fills,:host([indeterminate]) .fill-sub-mask1,:host([indeterminate]) .fill-sub-mask2{animation-duration:var(--luzmo-progress-circle-animation-duration, 1s)}";
+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 LuzmoProgressCircle extends SizedMixin(LuzmoElement, {
+  validSizes: ["s", "m", "l", "xl"]
+}) {
+  constructor() {
+    super(...arguments);
+    this.indeterminate = false;
+    this.label = "";
+    this.progress = 0;
+  }
+  static get styles() {
+    return [unsafeCSS(styles)];
+  }
+  makeRotation(rotation) {
+    return this.indeterminate ? void 0 : `transform: rotate(${rotation}deg);`;
+  }
+  render() {
+    const rotationStyles = [
+      this.makeRotation(-180 + 180 / 50 * Math.min(this.progress, 50)),
+      this.makeRotation(-180 + 180 / 50 * Math.max(this.progress - 50, 0))
+    ];
+    const masks = ["mask1", "mask2"];
+    return html`
+      <slot @slotchange=${this.handleSlotchange}></slot>
+      <div class="track"></div>
+      <div class="fills">
+        ${masks.map(
+      (mask, index) => html`
+            <div class="fill-${mask}">
+              <div
+                class="fill-sub-${mask}"
+                style=${ifDefined(rotationStyles[index])}
+              >
+                <div class="fill"></div>
+              </div>
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  handleSlotchange() {
+    const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);
+    if (labelFromSlot) {
+      this.label = labelFromSlot;
+    }
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "progressbar");
+    }
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (!this.indeterminate && changes.has("progress")) {
+      this.setAttribute("aria-valuenow", "" + this.progress);
+    } else if (this.hasAttribute("aria-valuenow")) {
+      this.removeAttribute("aria-valuenow");
+    }
+    if (changes.has("label")) {
+      if (this.label.length > 0) {
+        this.setAttribute("aria-label", this.label);
+      } else if (changes.get("label") === this.getAttribute("aria-label")) {
+        this.removeAttribute("aria-label");
+      }
+    }
+  }
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LuzmoProgressCircle.prototype, "indeterminate");
+__decorateClass([
+  property({ type: String })
+], LuzmoProgressCircle.prototype, "label");
+__decorateClass([
+  property({ reflect: true, attribute: "static-color" })
+], LuzmoProgressCircle.prototype, "staticColor");
+__decorateClass([
+  property({ type: Number })
+], LuzmoProgressCircle.prototype, "progress");
+__decorateClass([
+  query("slot")
+], LuzmoProgressCircle.prototype, "slotEl");
+export {
+  LuzmoProgressCircle as L
+};

package/components/progress-circle-_Etqsj9f.cjs

@@ -0,0 +1,132 @@
+/*! * 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 ifDefined_js = require("lit/directives/if-defined.js");
+const base = require("./base-COw9n7UR.cjs");
+const sizedMixin = require("./sized-mixin-UaTVa-AE.cjs");
+const getLabelFromSlot = (label, slotEl) => {
+  if (label) {
+    return null;
+  }
+  const textContent = slotEl.assignedNodes().reduce((accumulator, node) => {
+    if (node.textContent) {
+      return accumulator + node.textContent;
+    }
+    return accumulator;
+  }, "");
+  if (textContent) {
+    return textContent.trim();
+  }
+  return null;
+};
+const styles = "@media (forced-colors: active){:host{--highcontrast-progress-circle-fill-border-color: Highlight;--highcontrast-progress-circle-fill-border-color-over-background: Highlight}.track{--progress-circle-track-border-style: double}}:host{position:var(--luzmo-progress-circle-position, relative);direction:ltr;display:inline-block;position:relative;transform:translateZ(0)}:host,.track{inline-size:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));block-size:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px))}.track{box-sizing:border-box;border-style:var(--highcontrast-progress-circle-track-border-style, var(--luzmo-progress-circle-track-border-style, var(--progress-circle-track-border-style, solid)));border-width:var(--luzmo-progress-circle-thickness, var(--progress-circle-thickness, 2px));border-radius:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));border-color:var(--luzmo-progress-circle-track-border-color, var(--luzmo-border-color))}.fills{inline-size:100%;block-size:100%;position:absolute;inset-block-start:0;inset-inline-start:0}.fill{box-sizing:border-box;inline-size:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));block-size:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));border-style:solid;border-width:var(--luzmo-progress-circle-thickness, var(--progress-circle-thickness, 3px));border-radius:var(--luzmo-progress-circle-size, var(--progress-circle-size, 32px));border-color:var(--highcontrast-progress-circle-fill-border-color, var(--luzmo-progress-circle-fill-border-color, var(--luzmo-primary)))}:host([static-color=black]) .track{border-color:var(--luzmo-progress-circle-track-border-color-over-background, rgba(0, 0, 0, .25))}:host([static-color=black]) .fill{border-color:var(--highcontrast-progress-circle-fill-border-color-over-background, var(--luzmo-progress-circle-fill-border-color-over-background, rgb(0, 0, 0)))}:host([static-color=white]) .track{border-color:var(--luzmo-progress-circle-track-border-color-over-background, rgba(255, 255, 255, .15))}:host([static-color=white]) .fill{border-color:var(--highcontrast-progress-circle-fill-border-color-over-background, var(--luzmo-progress-circle-fill-border-color-over-background, rgb(255, 255, 255)))}.fill-mask1,.fill-mask2{inline-size:50%;block-size:100%;transform-origin:100%;position:absolute;overflow:hidden;transform:rotate(180deg)}.fill-sub-mask1,.fill-sub-mask2{inline-size:100%;block-size:100%;transform-origin:100%;overflow:hidden;transform:rotate(-180deg)}.fill-mask2{transform:rotate(0)}:host([indeterminate]) .fills{will-change:transform;transform-origin:center;animation:1s cubic-bezier(.25,.78,.48,.89) infinite luzmo-fills-rotate;transform:translateZ(0)}:host([indeterminate]) .fill-sub-mask1{will-change:transform;animation:1s linear infinite luzmo-fill-mask-1;transform:translateZ(0)}:host([indeterminate]) .fill-sub-mask2{will-change:transform;animation:1s linear infinite luzmo-fill-mask-2;transform:translateZ(0)}.fill-submask-2{animation:1s linear infinite luzmo-fill-mask-2}@keyframes luzmo-fill-mask-1{0%{transform:rotate(90deg)}1.69%{transform:rotate(72.3deg)}3.39%{transform:rotate(55.5deg)}5.08%{transform:rotate(40.3deg)}6.78%{transform:rotate(25deg)}8.47%{transform:rotate(10.6deg)}10.17%{transform:rotate(0)}11.86%{transform:rotate(0)}13.56%{transform:rotate(0)}15.25%{transform:rotate(0)}16.95%{transform:rotate(0)}18.64%{transform:rotate(0)}20.34%{transform:rotate(0)}22.03%{transform:rotate(0)}23.73%{transform:rotate(0)}25.42%{transform:rotate(0)}27.12%{transform:rotate(0)}28.81%{transform:rotate(0)}30.51%{transform:rotate(0)}32.2%{transform:rotate(0)}33.9%{transform:rotate(0)}35.59%{transform:rotate(0)}37.29%{transform:rotate(0)}38.98%{transform:rotate(0)}40.68%{transform:rotate(0)}42.37%{transform:rotate(5.3deg)}44.07%{transform:rotate(13.4deg)}45.76%{transform:rotate(20.6deg)}47.46%{transform:rotate(29deg)}49.15%{transform:rotate(36.5deg)}50.85%{transform:rotate(42.6deg)}52.54%{transform:rotate(48.8deg)}54.24%{transform:rotate(54.2deg)}55.93%{transform:rotate(59.4deg)}57.63%{transform:rotate(63.2deg)}59.32%{transform:rotate(67.2deg)}61.02%{transform:rotate(70.8deg)}62.71%{transform:rotate(73.8deg)}64.41%{transform:rotate(76.2deg)}66.1%{transform:rotate(78.7deg)}67.8%{transform:rotate(80.6deg)}69.49%{transform:rotate(82.6deg)}71.19%{transform:rotate(83.7deg)}72.88%{transform:rotate(85deg)}74.58%{transform:rotate(86.3deg)}76.27%{transform:rotate(87deg)}77.97%{transform:rotate(87.7deg)}79.66%{transform:rotate(88.3deg)}81.36%{transform:rotate(88.6deg)}83.05%{transform:rotate(89.2deg)}84.75%{transform:rotate(89.2deg)}86.44%{transform:rotate(89.5deg)}88.14%{transform:rotate(89.9deg)}89.83%{transform:rotate(89.7deg)}91.53%{transform:rotate(90.1deg)}93.22%{transform:rotate(90.2deg)}94.92%{transform:rotate(90.1deg)}96.61%{transform:rotate(90deg)}98.31%{transform:rotate(89.8deg)}to{transform:rotate(90deg)}}@keyframes luzmo-fill-mask-2{0%{transform:rotate(180deg)}1.69%{transform:rotate(180deg)}3.39%{transform:rotate(180deg)}5.08%{transform:rotate(180deg)}6.78%{transform:rotate(180deg)}8.47%{transform:rotate(180deg)}10.17%{transform:rotate(179.2deg)}11.86%{transform:rotate(164deg)}13.56%{transform:rotate(151.8deg)}15.25%{transform:rotate(140.8deg)}16.95%{transform:rotate(130.3deg)}18.64%{transform:rotate(120.4deg)}20.34%{transform:rotate(110.8deg)}22.03%{transform:rotate(101.6deg)}23.73%{transform:rotate(93.5deg)}25.42%{transform:rotate(85.4deg)}27.12%{transform:rotate(78.1deg)}28.81%{transform:rotate(71.2deg)}30.51%{transform:rotate(89.1deg)}32.2%{transform:rotate(105.5deg)}33.9%{transform:rotate(121.3deg)}35.59%{transform:rotate(135.5deg)}37.29%{transform:rotate(148.4deg)}38.98%{transform:rotate(161deg)}40.68%{transform:rotate(173.5deg)}42.37%{transform:rotate(180deg)}44.07%{transform:rotate(180deg)}45.76%{transform:rotate(180deg)}47.46%{transform:rotate(180deg)}49.15%{transform:rotate(180deg)}50.85%{transform:rotate(180deg)}52.54%{transform:rotate(180deg)}54.24%{transform:rotate(180deg)}55.93%{transform:rotate(180deg)}57.63%{transform:rotate(180deg)}59.32%{transform:rotate(180deg)}61.02%{transform:rotate(180deg)}62.71%{transform:rotate(180deg)}64.41%{transform:rotate(180deg)}66.1%{transform:rotate(180deg)}67.8%{transform:rotate(180deg)}69.49%{transform:rotate(180deg)}71.19%{transform:rotate(180deg)}72.88%{transform:rotate(180deg)}74.58%{transform:rotate(180deg)}76.27%{transform:rotate(180deg)}77.97%{transform:rotate(180deg)}79.66%{transform:rotate(180deg)}81.36%{transform:rotate(180deg)}83.05%{transform:rotate(180deg)}84.75%{transform:rotate(180deg)}86.44%{transform:rotate(180deg)}88.14%{transform:rotate(180deg)}89.83%{transform:rotate(180deg)}91.53%{transform:rotate(180deg)}93.22%{transform:rotate(180deg)}94.92%{transform:rotate(180deg)}96.61%{transform:rotate(180deg)}98.31%{transform:rotate(180deg)}to{transform:rotate(180deg)}}@keyframes luzmo-fills-rotate{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}:host([size=s]){--progress-circle-size: 16px;--progress-circle-thickness: 2px}:host([size=l]){--progress-circle-size: 48px;--progress-circle-thickness: 3px}:host([size=xl]){--progress-circle-size: 64px;--progress-circle-thickness: 4px}:host{block-size:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size));inline-size:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size));--progress-circle-size: inherit;--parent-element-progress-circle-size: inherit;--parent-element-progress-circle-size: var(--progress-circle-size, 32px)}:host([size=s]){--parent-element-progress-circle-size: var(--progress-circle-size, 16px)}:host([size=l]){--parent-element-progress-circle-size: var(--progress-circle-size, 48px)}:host([size=xl]){--parent-element-progress-circle-size: var(--progress-circle-size, 64px)}slot{display:none}.track,.fill{block-size:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size));border-radius:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size));inline-size:var(--luzmo-progress-circle-size, var(--parent-element-progress-circle-size))}:host([indeterminate]) .fills,:host([indeterminate]) .fill-sub-mask1,:host([indeterminate]) .fill-sub-mask2{animation-duration:var(--luzmo-progress-circle-animation-duration, 1s)}";
+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 LuzmoProgressCircle extends sizedMixin.SizedMixin(base.LuzmoElement, {
+  validSizes: ["s", "m", "l", "xl"]
+}) {
+  constructor() {
+    super(...arguments);
+    this.indeterminate = false;
+    this.label = "";
+    this.progress = 0;
+  }
+  static get styles() {
+    return [lit.unsafeCSS(styles)];
+  }
+  makeRotation(rotation) {
+    return this.indeterminate ? void 0 : `transform: rotate(${rotation}deg);`;
+  }
+  render() {
+    const rotationStyles = [
+      this.makeRotation(-180 + 180 / 50 * Math.min(this.progress, 50)),
+      this.makeRotation(-180 + 180 / 50 * Math.max(this.progress - 50, 0))
+    ];
+    const masks = ["mask1", "mask2"];
+    return lit.html`
+      <slot @slotchange=${this.handleSlotchange}></slot>
+      <div class="track"></div>
+      <div class="fills">
+        ${masks.map(
+      (mask, index) => lit.html`
+            <div class="fill-${mask}">
+              <div
+                class="fill-sub-${mask}"
+                style=${ifDefined_js.ifDefined(rotationStyles[index])}
+              >
+                <div class="fill"></div>
+              </div>
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  handleSlotchange() {
+    const labelFromSlot = getLabelFromSlot(this.label, this.slotEl);
+    if (labelFromSlot) {
+      this.label = labelFromSlot;
+    }
+  }
+  firstUpdated(changes) {
+    super.firstUpdated(changes);
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "progressbar");
+    }
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (!this.indeterminate && changes.has("progress")) {
+      this.setAttribute("aria-valuenow", "" + this.progress);
+    } else if (this.hasAttribute("aria-valuenow")) {
+      this.removeAttribute("aria-valuenow");
+    }
+    if (changes.has("label")) {
+      if (this.label.length > 0) {
+        this.setAttribute("aria-label", this.label);
+      } else if (changes.get("label") === this.getAttribute("aria-label")) {
+        this.removeAttribute("aria-label");
+      }
+    }
+  }
+}
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], LuzmoProgressCircle.prototype, "indeterminate");
+__decorateClass([
+  decorators_js.property({ type: String })
+], LuzmoProgressCircle.prototype, "label");
+__decorateClass([
+  decorators_js.property({ reflect: true, attribute: "static-color" })
+], LuzmoProgressCircle.prototype, "staticColor");
+__decorateClass([
+  decorators_js.property({ type: Number })
+], LuzmoProgressCircle.prototype, "progress");
+__decorateClass([
+  decorators_js.query("slot")
+], LuzmoProgressCircle.prototype, "slotEl");
+exports.LuzmoProgressCircle = LuzmoProgressCircle;