@luzmo/lucero 0.0.4 → 0.0.8

package/{lib/streaming-listener-DLo0wkMc.js → components/streaming-listener-CCalHg57.js}

@@ -15,46 +15,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { nothing as d } from "lit";
-import { f as l } from "./async-directive-FGzMycjH.js";
-import { e as o } from "./directive-oAbCiebi.js";
-const m = Symbol(
-  "language resolver updated"
-);
-class v {
-  constructor(e) {
-    this.language = document.documentElement.lang || navigator.language, this.host = e, this.host.addController(this);
-  }
-  hostConnected() {
-    this.resolveLanguage();
-  }
-  hostDisconnected() {
-    var e;
-    (e = this.unsubscribe) == null || e.call(this);
-  }
-  resolveLanguage() {
-    const e = new CustomEvent(
-      "luzmo-language-context",
-      {
-        bubbles: !0,
-        composed: !0,
-        detail: {
-          callback: (t, s) => {
-            const n = this.language;
-            this.language = t, this.unsubscribe = s, this.host.requestUpdate(m, n);
-          }
-        },
-        cancelable: !0
-      }
-    );
-    this.host.dispatchEvent(e);
-  }
-}
-const i = ["", () => {
+import { E as a } from "./base-CawdqE7p.js";
+import { f as d } from "./async-directive-DWRUSKKF.js";
+import { e as m } from "./directive-oAbCiebi.js";
+const s = ["", () => {
 }];
-class u extends l {
+class l extends d {
   constructor() {
-    super(...arguments), this.start = i, this.streamInside = i, this.end = i, this.streamOutside = i, this.state = "off", this.handleStart = (e) => {
+    super(...arguments), this.start = s, this.streamInside = s, this.end = s, this.streamOutside = s, this.state = "off", this.handleStart = (e) => {
       this.clearStream(), this.callHandler(this.start[1], e), !e.defaultPrevented && (this.removeListeners(), this.addListeners("on"));
     }, this.handleInside = (e) => {
       this.handleStream(this.streamInside[1], e);
@@ -67,18 +35,18 @@ class u extends l {
   /* c8 ignore next 4 */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render(e) {
-    return d;
+    return a;
   }
   update(e, [
     {
       start: t,
-      end: s,
-      streamInside: n = i,
-      streamOutside: h = i
+      end: i,
+      streamInside: n = s,
+      streamOutside: h = s
     }
   ]) {
     var r;
-    this.element !== e.element && (this.element = e.element, this.removeListeners()), this.host = ((r = e.options) == null ? void 0 : r.host) || this.element, this.start = t, this.end = s, this.streamInside = n, this.streamOutside = h, this.addListeners();
+    this.element !== e.element && (this.element = e.element, this.removeListeners()), this.host = ((r = e.options) == null ? void 0 : r.host) || this.element, this.start = t, this.end = i, this.streamInside = n, this.streamOutside = h, this.addListeners();
   }
   addListeners(e) {
     this.state = e || this.state, this.state === "off" ? (this.addListener(this.streamOutside[0], this.handleOutside), this.addListener(this.start[0], this.handleStart)) : this.state === "on" && (this.addListener(this.streamInside[0], this.handleInside), this.addListener(this.end[0], this.handleEnd));
@@ -95,13 +63,13 @@ class u extends l {
     this.stream != null && (cancelAnimationFrame(this.stream), this.stream = void 0);
   }
   addListener(e, t) {
-    Array.isArray(e) ? e.map((s) => {
-      this.element.addEventListener(s, t);
+    Array.isArray(e) ? e.map((i) => {
+      this.element.addEventListener(i, t);
     }) : this.element.addEventListener(e, t);
   }
   removeListener(e, t) {
-    Array.isArray(e) ? e.map((s) => {
-      this.element.removeEventListener(s, t);
+    Array.isArray(e) ? e.map((i) => {
+      this.element.removeEventListener(i, t);
     }) : this.element.removeEventListener(e, t);
   }
   removeListeners() {
@@ -115,11 +83,9 @@ class u extends l {
     this.addListeners();
   }
 }
-const f = o(
-  u
+const u = m(
+  l
 );
 export {
-  v as L,
-  m as l,
-  f as s
+  u as s
 };

package/components/streaming-listener-KVex1WWB.cjs

@@ -0,0 +1,18 @@
+/*! * 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 a=require("./base-B7Pfl2if.cjs"),d=require("./async-directive-D_Ter1F8.cjs"),m=require("./directive-C7oCP5Bh.cjs"),s=["",()=>{}];class l extends d.f{constructor(){super(...arguments),this.start=s,this.streamInside=s,this.end=s,this.streamOutside=s,this.state="off",this.handleStart=e=>{this.clearStream(),this.callHandler(this.start[1],e),!e.defaultPrevented&&(this.removeListeners(),this.addListeners("on"))},this.handleInside=e=>{this.handleStream(this.streamInside[1],e)},this.handleEnd=e=>{this.clearStream(),this.callHandler(this.end[1],e),this.removeListeners(),this.addListeners("off")},this.handleOutside=e=>{this.handleStream(this.streamOutside[1],e)}}render(e){return a.E}update(e,[{start:t,end:i,streamInside:n=s,streamOutside:h=s}]){var r;this.element!==e.element&&(this.element=e.element,this.removeListeners()),this.host=((r=e.options)==null?void 0:r.host)||this.element,this.start=t,this.end=i,this.streamInside=n,this.streamOutside=h,this.addListeners()}addListeners(e){this.state=e||this.state,this.state==="off"?(this.addListener(this.streamOutside[0],this.handleOutside),this.addListener(this.start[0],this.handleStart)):this.state==="on"&&(this.addListener(this.streamInside[0],this.handleInside),this.addListener(this.end[0],this.handleEnd))}callHandler(e,t){typeof e=="function"?e.call(this.host,t):e.handleEvent(t)}handleStream(e,t){this.stream||(this.callHandler(e,t),this.stream=requestAnimationFrame(()=>{this.stream=void 0}))}clearStream(){this.stream!=null&&(cancelAnimationFrame(this.stream),this.stream=void 0)}addListener(e,t){Array.isArray(e)?e.map(i=>{this.element.addEventListener(i,t)}):this.element.addEventListener(e,t)}removeListener(e,t){Array.isArray(e)?e.map(i=>{this.element.removeEventListener(i,t)}):this.element.removeEventListener(e,t)}removeListeners(){this.removeListener(this.start[0],this.handleStart),this.removeListener(this.streamInside[0],this.handleInside),this.removeListener(this.end[0],this.handleEnd),this.removeListener(this.streamOutside[0],this.handleOutside)}disconnected(){this.removeListeners()}reconnected(){this.addListeners()}}const o=m.e(l);exports.streamingListener=o;

package/{lib/style-map-BqvQDFJt.js → components/style-map-Ct2LiEds.js}

@@ -15,7 +15,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { T as l } from "./lit-html-B3ugcwD9.js";
+import { T as l } from "./base-CawdqE7p.js";
 import { e as u, i as c, t as d } from "./directive-oAbCiebi.js";
 /**
  * @license

package/{lib/style-map-BjBGQ_u3.cjs → components/style-map-uMq-yDJ3.cjs}

@@ -15,8 +15,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";const c=require("./lit-html-p4Oxv2-5.cjs"),o=require("./directive-C7oCP5Bh.cjs");/**
+"use strict";const u=require("./base-B7Pfl2if.cjs"),o=require("./directive-C7oCP5Bh.cjs");/**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */const l="important",u=" !"+l,d=o.e(class extends o.i{constructor(n){var t;if(super(n),n.type!==o.t.ATTRIBUTE||n.name!=="style"||((t=n.strings)==null?void 0:t.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(n){return Object.keys(n).reduce((t,s)=>{const e=n[s];return e==null?t:t+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`},"")}update(n,[t]){const{style:s}=n.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(const e of this.ft)t[e]==null&&(this.ft.delete(e),e.includes("-")?s.removeProperty(e):s[e]=null);for(const e in t){const r=t[e];if(r!=null){this.ft.add(e);const i=typeof r=="string"&&r.endsWith(u);e.includes("-")||i?s.setProperty(e,i?r.slice(0,-11):r,i?l:""):s[e]=r}}return c.T}});exports.o=d;
+ */const c="important",l=" !"+c,d=o.e(class extends o.i{constructor(n){var t;if(super(n),n.type!==o.t.ATTRIBUTE||n.name!=="style"||((t=n.strings)==null?void 0:t.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(n){return Object.keys(n).reduce((t,s)=>{const e=n[s];return e==null?t:t+`${s=s.includes("-")?s:s.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${e};`},"")}update(n,[t]){const{style:s}=n.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(t)),this.render(t);for(const e of this.ft)t[e]==null&&(this.ft.delete(e),e.includes("-")?s.removeProperty(e):s[e]=null);for(const e in t){const r=t[e];if(r!=null){this.ft.add(e);const i=typeof r=="string"&&r.endsWith(l);e.includes("-")||i?s.setProperty(e,i?r.slice(0,-11):r,i?c:""):s[e]=r}}return u.T}});exports.o=d;

package/components/swatch/index.cjs

@@ -0,0 +1,49 @@
+/*! * 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 u=require("@luzmo/icons"),r=require("../base-B7Pfl2if.cjs"),w=require("../if-defined-B56xGmAg.cjs"),b=require("../when-CDZyJPvd.cjs"),g=require("../focusable-DGWL1v1p.cjs"),p=require("../sized-mixin-D9LkrMjb.cjs"),v=require("../mutation-controller-DkOMCW-c.cjs"),m=require("../query-assigned-elements-DsKsfk7G.cjs"),z=require("../roving-tabindex-By_fCy_e.cjs"),x='@media (forced-colors: active){:host{--highcontrast-swatch-disabled-icon-color: GrayText;--highcontrast-swatch-focus-indicator-color: ButtonText;--highcontrast-swatch-background-color-selected: Background;--highcontrast-swatch-border-color-selected: Highlight;--highcontrast-swatch-border-color: ButtonText;--highcontrast-swatch-fill-foreground-color: ButtonText}.fill{forced-color-adjust:none}:host([disabled]){--highcontrast-swatch-border-color: GrayText}}:host{box-sizing:border-box;inline-size:var(--luzmo-swatch-size, var(--swatch-size));block-size:var(--luzmo-swatch-size, var(--swatch-size));-webkit-user-select:none;user-select:none;outline:none;justify-content:center;align-items:center;display:flex;position:relative}.disabled-icon{inline-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size));block-size:var(--luzmo-swatch-disabled-icon-size, var(--swatch-disabled-icon-size))}:host,:host:before{border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius))}:host([selected]){background-color:var(--highcontrast-swatch-background-color-selected, var(--luzmo-swatch-inner-border-color-selected, var(--swatch-inner-border-color-selected)))}:host([selected]) .fill:before{box-shadow:none;border-radius:0}:host([selected]):before{opacity:1}:host .is-image .fill:before{background-color:initial}:host([mixed-value]) .fill{background:none;background:var(--picked-color, transparent)}:host([mixed-value]) .mixed-value-icon{color:var(--swatch-dash-icon-color);display:block}:host([nothing]) .fill{background-color:initial;background-color:var(--picked-color, transparent);background-image:none}:host([nothing]) .fill:after{inline-size:var(--luzmo-swatch-slash-thickness, var(--swatch-slash-thickness));content:"";block-size:200%;background:var(--highcontrast-swatch-fill-foreground-color, var(--luzmo-swatch-slash-icon-color, var(--swatch-slash-icon-color)));position:absolute;transform:rotate(-45deg)}:host([nothing][shape=rectangle]) .fill:after{transform:rotate(-25deg)}:host([disabled]) .disabled-icon{display:block}:host:before{content:"";border-width:var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected));border-style:solid;border-color:var(--highcontrast-swatch-border-color-selected, var(--luzmo-swatch-border-color-selected, var(--swatch-border-color-selected)));opacity:0;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}:host:after{content:"";inset:calc(var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)) * -2);opacity:0;border-width:var(--luzmo-swatch-focus-indicator-width, var(--swatch-focus-indicator-width));border-style:solid;border-color:var(--highcontrast-swatch-focus-indicator-color, var(--luzmo-swatch-focus-indicator-color, var(--swatch-focus-indicator-color)));border-radius:var(--luzmo-swatch-focus-indicator-border-radius, var(--swatch-focus-indicator-border-radius));transition:opacity var(--luzmo-animation-duration) ease-in-out;position:absolute}:host(:focus-visible):after{opacity:1}.fill{inline-size:100%;block-size:100%;box-sizing:border-box;border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.fill:before{content:"";z-index:0;box-sizing:border-box;box-shadow:inset 0 0 0 var(--luzmo-swatch-border-thickness, var(--swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--luzmo-swatch-border-color, var(--swatch-border-color)));border-radius:var(--luzmo-swatch-border-radius, var(--swatch-border-radius));position:absolute;top:0;right:0;bottom:0;left:0}:host([border=none]) .fill:before,.fill:before{background-color:initial;background-color:var(--picked-color, transparent)}:host([border=none]) .fill:before{box-shadow:none}.mixed-value-icon{pointer-events:none;color:#0000;color:var(--picked-color, transparent);display:none}.disabled-icon{z-index:1;pointer-events:none;color:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));stroke:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)));display:none;position:relative}.disabled-icon path:first-child{fill:var(--highcontrast-swatch-disabled-icon-color, var(--luzmo-swatch-disabled-icon-color, var(--swatch-disabled-icon-color)))}.disabled-icon path:last-child{fill:var(--luzmo-swatch-icon-border-color, var(--swatch-icon-border-color))}:host([shape=rectangle]){inline-size:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2)}:host([rounding=none]),:host([rounding=none]) .fill,:host([rounding=none]) .fill:before,:host([rounding=none][selected]) .fill,:host([rounding=none][selected]) .fill:before,:host([rounding=none]):after,:host([rounding=none]):before{border-radius:0}:host([rounding=full][selected]:not([shape=rectangle])) .fill,:host([rounding=full][selected]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])),:host([rounding=full]:not([shape=rectangle])) .fill,:host([rounding=full]:not([shape=rectangle])) .fill:before,:host([rounding=full]:not([shape=rectangle])):after,:host([rounding=full]:not([shape=rectangle])):before{border-radius:100%}:host([selected]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)));height:calc(var(--luzmo-swatch-size, var(--swatch-size)) - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}:host([selected][shape=rectangle]) .fill{width:calc(var(--luzmo-swatch-size, var(--swatch-size)) * 2 - 2 * var(--luzmo-swatch-border-thickness-selected, var(--swatch-border-thickness-selected)) + -2 * var(--luzmo-swatch-focus-indicator-gap, var(--swatch-focus-indicator-gap)))}::slotted([slot=image]){object-fit:contain;inline-size:100%;block-size:100%;transition:width var(--luzmo-animation-duration) ease-in-out,height var(--luzmo-animation-duration) ease-in-out}:host([size=xl]){--swatch-size: var(--luzmo-component-height-xl);--swatch-disabled-icon-size: 24px;--swatch-slash-thickness: 6px}:host([size=l]){--swatch-size: var(--luzmo-component-height-l);--swatch-disabled-icon-size: 20px;--swatch-slash-thickness: 5px}:host([size=s]){--swatch-size: var(--luzmo-component-height-s);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 3px}:host([size=xs]){--swatch-size: var(--luzmo-component-height-xs);--swatch-disabled-icon-size: 16px;--swatch-slash-thickness: 2px}:host([size=xxs]){--swatch-size: var(--luzmo-component-height-xxs);--swatch-disabled-icon-size: 14px;--swatch-slash-thickness: 2px}:host{--swatch-size: var(--luzmo-component-height);--swatch-disabled-icon-size: 18px;--swatch-slash-thickness: 4px}:host{--swatch-border-radius: var(--luzmo-border-radius-s);--swatch-focus-indicator-border-radius: var(--luzmo-border-radius-s);--swatch-border-thickness: var(--luzmo-border-width);--swatch-border-thickness-selected: var(--luzmo-border-width);--swatch-focus-indicator-width: var(--luzmo-indicator-width);--swatch-focus-indicator-gap: var(--luzmo-indicator-gap);--swatch-border-color: var(--luzmo-border-color-down);--swatch-icon-border-color: var(--luzmo-border-color);--swatch-border-color-selected: var(--luzmo-border-color-full-down);--swatch-inner-border-color-selected: var(--luzmo-background-color);--swatch-disabled-icon-color: rgb(255, 255, 255);--swatch-dash-icon-color: var(--luzmo-font-color);--swatch-slash-icon-color: var(--luzmo-color-negative);--swatch-focus-indicator-color: var(--luzmo-primary)}.fill:before{background:var(--picked-color, transparent)}:host([border=none]) .fill:before{background:var(--picked-color, transparent)}:host .is-image .fill:before{background:#0000}:host .opacity-checkerboard{background:repeating-conic-gradient(var(--luzmo-swatch-checkerboard-light, rgb(255, 255, 255)) 0 25%,var(--luzmo-swatch-checkerboard-dark, rgb(230, 230, 230)) 0 50%) var(--luzmo-swatch-checkerboard-position, left top)/calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2) calc(var(--luzmo-swatch-checkerboard-size, 8px) * 2)}';var y=Object.defineProperty,k=Object.getOwnPropertyDescriptor,c=(h,e,t,o)=>{for(var s=o>1?void 0:o?k(e,t):e,i=h.length-1,a;i>=0;i--)(a=h[i])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&y(e,t,s),s};class l extends p.SizedMixin(g.Focusable,{validSizes:["xxs","xs","s","m","l","xl"],noDefaultSize:!0}){constructor(){super(...arguments),this.color="",this.label="",this.mixedValue=!1,this.nothing=!1,this.role="button",this.selected=!1,this.readonly=!1,this.renderDisabled=()=>r.x`
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="disabled-icon"
+      viewBox="0 0 20 20"
+    >
+      <path
+        d="M9.889,1a8.889,8.889,0,1,0,8.889,8.889A8.889,8.889,0,0,0,9.889,1Zm6.667,8.889a6.635,6.635,0,0,1-1.233,3.863l-9.3-9.3A6.667,6.667,0,0,1,16.556,9.889Zm-13.333,0A6.636,6.636,0,0,1,4.455,6.026l9.3,9.3A6.667,6.667,0,0,1,3.222,9.889Z"
+        stroke="none"
+        fill="var(--swatch-disabled-icon-color)"
+      />
+      <path
+        d="M 9.888889312744141 1 C 4.979689598083496 1 1 4.979689598083496 1 9.888889312744141 C 1 14.7980899810791 4.979689598083496 18.77777862548828 9.888889312744141 18.77777862548828 C 14.7980899810791 18.77777862548828 18.77777862548828 14.7980899810791 18.77777862548828 9.888889312744141 C 18.77777862548828 4.979689598083496 14.7980899810791 1 9.888889312744141 1 M 15.32277870178223 13.75166893005371 L 6.02610969543457 4.454998970031738 C 8.059318542480469 3.009572982788086 10.72937774658203 2.820217132568359 12.9462194442749 3.964249610900879 C 15.16304969787598 5.10828971862793 16.55568885803223 7.394259452819824 16.5555591583252 9.888889312744141 C 16.55776977539062 11.27357959747314 16.126708984375 12.62425994873047 15.32277870178223 13.75166893005371 M 9.888258934020996 16.55648612976074 C 8.843273162841797 16.55648612976074 7.794573783874512 16.31111145019531 6.831318855285645 15.8139591217041 C 4.614439010620117 14.66977882385254 3.221879959106445 12.38361930847168 3.222219467163086 9.888889312744141 C 3.220088958740234 8.504219055175781 3.651140213012695 7.153559684753418 4.454998970031738 6.02610969543457 L 13.75166893005371 15.32333946228027 C 12.60186290740967 16.14075088500977 11.24825286865234 16.55648612976074 9.888258934020996 16.55648612976074 M 9.888889312744141 0 C 15.34163951873779 0 19.77777862548828 4.436139106750488 19.77777862548828 9.888889312744141 C 19.77777862548828 15.34163951873779 15.34163951873779 19.77777862548828 9.888889312744141 19.77777862548828 C 4.436139106750488 19.77777862548828 0 15.34163951873779 0 9.888889312744141 C 0 4.436139106750488 4.436139106750488 0 9.888889312744141 0 Z M 15.10232830047607 12.11699867248535 C 15.40205764770508 11.41858959197998 15.55679702758789 10.66494941711426 15.5555591583252 9.89048957824707 C 15.5556697845459 7.759209632873535 14.38009929656982 5.829549789428711 12.48761940002441 4.852889060974121 C 11.68764972686768 4.440059661865234 10.78924942016602 4.22184944152832 9.889529228210449 4.22184944152832 C 9.114802360534668 4.22184944152832 8.360831260681152 4.377038955688477 7.661839485168457 4.676509857177734 L 15.10232830047607 12.11699867248535 Z M 12.11597919464111 15.10181331634521 L 4.675475120544434 7.660861015319824 C 4.375750541687012 8.359296798706055 4.221027374267578 9.112875938415527 4.222219467163086 9.887349128723145 C 4.221929550170898 12.01874923706055 5.397418975830078 13.94855880737305 7.289958953857422 14.92533874511719 C 8.08997917175293 15.3382396697998 8.988459587097168 15.55648994445801 9.888258934020996 15.55648994445801 C 10.66298007965088 15.55648994445801 11.41698551177979 15.40128421783447 12.11597919464111 15.10181331634521 Z"
+        stroke="none"
+        fill="var(--swatch-disabled-icon-stroke-color)"
+      />
+    </svg>
+  `,this.renderMixedValue=()=>u.luzmoIcon(u.luzmoDash)}static get styles(){return[r.r(x)]}get value(){return this._value||this.color||this.label}set value(e){if(e===this._value)return;const t=this.value;this._value=e,this.requestUpdate("value",t)}get focusElement(){return this}toggle(e){this.readonly||(this.selected=e??!this.selected)}handleClick(){if(this.disabled||this.mixedValue)return;this.toggle(),this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||this.toggle()}handleKeydown(e){const{code:t}=e;switch(t){case"Space":{e.preventDefault(),this.addEventListener("keyup",this.handleKeyup);break}}}handleKeypress(e){const{code:t}=e;switch(t){case"Enter":case"NumpadEnter":{this.click();break}}}handleKeyup(e){const{code:t}=e;switch(t){case"Space":{this.removeEventListener("keyup",this.handleKeyup),this.click();break}}}render(){return r.x`
+      <div
+        class="opacity-checkerboard fill"
+        style=${w.o(this.color?`--picked-color: ${this.color}`:void 0)}
+      >
+        <slot name="image"></slot>
+        ${b.n(this.disabled,this.renderDisabled)}
+        ${b.n(this.mixedValue,this.renderMixedValue)}
+      </div>
+    `}willUpdate(e){var t;if(this.getAttribute("role")||this.setAttribute("role","button"),(e.has("selected")||e.has("role"))&&!this.readonly){const o=this.role==="button"?"aria-pressed":"aria-checked",s=this.role==="button"?"aria-checked":"aria-pressed";e.has("role")&&this.removeAttribute(s),this.setAttribute(o,this.selected?"true":"false")}(e.has("label")||e.has("color")||e.has("mixedValue"))&&(this.label!==this.color&&((t=this.label)!=null&&t.length)?this.setAttribute("aria-label",this.label):this.color?this.setAttribute("aria-label",this.color):this.mixedValue?this.setAttribute("aria-label","Mixed"):this.removeAttribute("aria-label"))}firstUpdated(e){super.firstUpdated(e),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("keypress",this.handleKeypress),this.hasAttribute("tabindex")||this.setAttribute("tabindex","0")}}c([r.n({reflect:!0})],l.prototype,"border",2);c([r.n()],l.prototype,"color",2);c([r.n()],l.prototype,"label",2);c([r.n({type:Boolean,reflect:!0,attribute:"mixed-value"})],l.prototype,"mixedValue",2);c([r.n({type:Boolean,reflect:!0})],l.prototype,"nothing",2);c([r.n({reflect:!0})],l.prototype,"role",2);c([r.n({reflect:!0})],l.prototype,"rounding",2);c([r.n({type:Boolean,reflect:!0})],l.prototype,"selected",2);c([r.n({type:Boolean,reflect:!0})],l.prototype,"readonly",2);c([r.n({reflect:!0})],l.prototype,"shape",2);c([r.n()],l.prototype,"value",1);const S=":host{justify-content:flex-start;align-items:flex-start;gap:var(--luzmo-swatch-group-spacing-regular, var(--swatch-group-spacing-regular));flex-flow:wrap;display:inline-flex}:host([density=compact]){gap:var(--luzmo-swatch-group-spacing-compact, var(--swatch-group-spacing-compact))}:host([density=spacious]){gap:var(--luzmo-swatch-group-spacing-spacious, var(--swatch-group-spacing-spacious))}:host{--swatch-group-spacing-compact: 2px;--swatch-group-spacing-regular: 4px;--swatch-group-spacing-spacious: 8px}";var C=Object.defineProperty,A=Object.getOwnPropertyDescriptor,d=(h,e,t,o)=>{for(var s=o>1?void 0:o?A(e,t):e,i=h.length-1,a;i>=0;i--)(a=h[i])&&(s=(o?a(e,t,s):a(s))||s);return o&&s&&C(e,t,s),s};class n extends p.SizedMixin(r.LuzmoElement,{validSizes:["xs","s","m","l"],noDefaultSize:!0}){constructor(){super(),this._selected=[],this.selectedSet=new Set,this.rovingTabindexController=new z.RovingTabindexController(this,{focusInIndex:e=>{let t=-1;const o=e.findIndex((s,i)=>(!e[t]&&!s.disabled&&(t=i),s.selected&&!s.disabled));return e[o]?o:t},elements:()=>this.swatches,isFocusableElement:e=>!e.disabled}),this.manageChange=async()=>{const e=new Set;this.selectedSet=new Set(this.selected),await Promise.all(this.swatches.map(t=>t.updateComplete)),this.swatches.forEach(t=>{e.add(t.value),t.selected&&this.selectedSet.add(t.value)}),this.selectedSet.forEach(t=>{e.has(t)||this.selectedSet.delete(t)}),this._selected=[...this.selectedSet],this.rovingTabindexController.clearElementCache()},new v.s(this,{config:{attributes:!0,childList:!0,subtree:!0},callback:()=>{this.manageChange()}})}static get styles(){return[r.r(S)]}get selected(){return this._selected}set selected(e){if(e===this.selected)return;const t=this.selected;this._selected=e,this.requestUpdate("selected",t)}focus(e){this.rovingTabindexController.focus(e)}handleChange(e){e.stopPropagation();const t=this.selected;if(!this.selects){e.preventDefault();return}if(this.selects==="single"){const{target:s}=e;if(s.tabIndex=0,s.selected=!0,this.selectedSet.has(s.value))return;this.selectedSet.clear(),this.selectedSet.add(s.value),this.rovingTabindexController.elements.forEach(i=>{i!==s&&(i.selected=!1)})}else if(this.selects==="multiple"){const{target:s}=e;s.selected?this.selectedSet.add(s.value):this.selectedSet.delete(s.value)}this._selected=[...this.selectedSet],this.dispatchEvent(new Event("change",{cancelable:!0,bubbles:!0}))||(this._selected=t,e.preventDefault())}getPassthroughSwatchActions(e){const t={};e.has("selects")&&(this.selects||e.get("selects")!==void 0)&&(t.selects=this.selects),e.has("border")&&(this.border||e.get("border")!==void 0)&&(t.border=this.border),e.has("rounding")&&(this.rounding||e.get("rounding")!==void 0)&&(t.rounding=this.rounding),e.has("size")&&(this.size!=="m"||e.get("size")!==void 0)&&(t.size=this.size),e.has("shape")&&(this.shape||e.get("shape")!==void 0)&&(t.shape=this.shape);const o=[];return Object.keys(t).length>0&&o.push(s=>{"border"in t&&(s.border=t.border),"rounding"in t&&(s.rounding=t.rounding),"shape"in t&&(s.shape=t.shape),"size"in t&&(s.size=t.size)}),o}getSelectionSwatchActions(e){const t=[];if(!e.has("selects"))return t;this.selects?this.setAttribute("role",this.selects==="single"?"radiogroup":"group"):this.removeAttribute("role");const o={single:"radio",multiple:"checkbox"},s=this.selects?o[this.selects]:"button";return t.push(i=>{i.setAttribute("role",s)}),t}render(){return r.x`
+      <slot
+        @change=${this.handleChange}
+        @slotchange=${this.manageChange}
+      ></slot>
+    `}willUpdate(e){const t=[...this.getPassthroughSwatchActions(e),...this.getSelectionSwatchActions(e)];let o=new Set(this.selected);const s=new Set;e.has("selected")&&t.push(a=>{s.add(a.value),a.selected=!!(o.has(a.value)||!this.hasUpdated&&a.selected)});const i=()=>{o=new Set(this.selected),this.swatches.forEach(a=>{t.forEach(f=>{f(a)})}),e.has("selected")&&(this._selected=[...o.values()].filter(a=>s.has(a)))};this.hasUpdated?i():this.renderRoot.addEventListener("slotchange",()=>{requestAnimationFrame(i)},{once:!0})}}d([r.n({reflect:!0})],n.prototype,"border",2);d([r.n({reflect:!0})],n.prototype,"density",2);d([r.n({reflect:!0})],n.prototype,"rounding",2);d([r.n({type:Array})],n.prototype,"selected",1);d([r.n()],n.prototype,"selects",2);d([r.n({reflect:!0})],n.prototype,"shape",2);d([m.o({flatten:!0})],n.prototype,"swatches",2);customElements.get("luzmo-swatch")||customElements.define("luzmo-swatch",l);customElements.get("luzmo-swatch-group")||customElements.define("luzmo-swatch-group",n);exports.LuzmoSwatch=l;exports.LuzmoSwatchGroup=n;

package/components/swatch/index.d.ts

@@ -0,0 +1,10 @@
+import { LuzmoSwatch } from './swatch';
+import { LuzmoSwatchGroup } from './swatch-group';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-swatch': LuzmoSwatch;
+        'luzmo-swatch-group': LuzmoSwatchGroup;
+    }
+}
+export { LuzmoSwatch } from './swatch';
+export { LuzmoSwatchGroup } from './swatch-group';

package/{lib → components}/swatch/index.js

@@ -16,12 +16,11 @@
  * SOFTWARE.
  * */
 import { luzmoIcon as z, luzmoDash as v } from "@luzmo/icons";
-import { F as w } from "../focusable-DbUg-3Vp.js";
-import { S as m } from "../sized-mixin-Dl0KoEcV.js";
-import { html as u, unsafeCSS as p } from "lit";
-import { n as l, L as x } from "../base-nYalvNMy.js";
-import { o as y } from "../if-defined-CYpcjGCb.js";
+import { x as u, r as m, n as l, a as w } from "../base-CawdqE7p.js";
+import { o as x } from "../if-defined-BSAr_4u4.js";
 import { n as b } from "../when-CDK1Tt5Y.js";
+import { F as y } from "../focusable-cj2QhwDT.js";
+import { S as p } from "../sized-mixin-BxMraZLS.js";
 import { s as k } from "../mutation-controller-DH7YOCyj.js";
 import { o as S } from "../query-assigned-elements-DjfhL1cl.js";
 import { R as C } from "../roving-tabindex-DOg4z6ZU.js";
@@ -38,7 +37,7 @@ var E = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (c, e, o
     (i = c[s]) && (t = (r ? i(e, o, t) : i(t)) || t);
   return r && t && E(e, o, t), t;
 };
-class a extends m(w, {
+class a extends p(y, {
   validSizes: ["xxs", "xs", "s", "m", "l", "xl"],
   noDefaultSize: !0
 }) {
@@ -63,7 +62,7 @@ class a extends m(w, {
   `, this.renderMixedValue = () => z(v);
   }
   static get styles() {
-    return [p(A)];
+    return [m(A)];
   }
   get value() {
     return this._value || this.color || this.label;
@@ -122,7 +121,7 @@ class a extends m(w, {
     return u`
       <div
         class="opacity-checkerboard fill"
-        style=${y(
+        style=${x(
       this.color ? `--picked-color: ${this.color}` : void 0
     )}
       >
@@ -183,7 +182,7 @@ var L = Object.defineProperty, M = Object.getOwnPropertyDescriptor, h = (c, e, o
     (i = c[s]) && (t = (r ? i(e, o, t) : i(t)) || t);
   return r && t && L(e, o, t), t;
 };
-class d extends m(x, {
+class d extends p(w, {
   validSizes: ["xs", "s", "m", "l"],
   noDefaultSize: !0
 }) {
@@ -215,7 +214,7 @@ class d extends m(x, {
     });
   }
   static get styles() {
-    return [p(D)];
+    return [m(D)];
   }
   get selected() {
     return this._selected;

package/components/swatch/swatch-group.d.ts

@@ -0,0 +1,41 @@
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import { RovingTabindexController } from '../../utils/reactive-controllers/roving-tabindex';
+import { ElementSize } from '../../utils/sized-mixin';
+import type { LuzmoSwatch, SwatchBorder, SwatchRounding, SwatchShape } from './swatch';
+export type SwatchGroupSizes = Exclude<ElementSize, 'xxs' | 'xl' | 'xxl'>;
+export type SwatchSelects = 'single' | 'multiple' | undefined;
+declare const LuzmoSwatchGroup_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../..").SizedElementInterface;
+    prototype: import("../..").SizedElementInterface;
+};
+/**
+ * @element luzmo-swatch-group
+ *
+ * @slot - Swatch elements to manage as a group
+ */
+export declare class LuzmoSwatchGroup extends LuzmoSwatchGroup_base {
+    static get styles(): CSSResultArray;
+    border: SwatchBorder;
+    density: 'compact' | 'spacious' | undefined;
+    rounding: SwatchRounding;
+    get selected(): string[];
+    set selected(selected: string[]);
+    private _selected;
+    selects: SwatchSelects;
+    private selectedSet;
+    shape: SwatchShape;
+    swatches: LuzmoSwatch[];
+    constructor();
+    rovingTabindexController: RovingTabindexController<LuzmoSwatch>;
+    focus(options?: FocusOptions): void;
+    protected handleChange(event: Event & {
+        target: LuzmoSwatch;
+    }): void;
+    private manageChange;
+    private getPassthroughSwatchActions;
+    private getSelectionSwatchActions;
+    protected render(): TemplateResult;
+    protected willUpdate(changes: PropertyValues<this>): void;
+}
+export {};

package/components/swatch/swatch.d.ts

@@ -0,0 +1,40 @@
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import { Focusable } from '../../utils/focusable';
+export type SwatchBorder = 'none' | 'light' | undefined;
+export type SwatchRounding = 'none' | 'full' | undefined;
+export type SwatchShape = 'rectangle' | undefined;
+declare const LuzmoSwatch_base: typeof Focusable & {
+    new (...args: any[]): import("../..").SizedElementInterface;
+    prototype: import("../..").SizedElementInterface;
+};
+/**
+ * @element luzmo-swatch
+ */
+export declare class LuzmoSwatch extends LuzmoSwatch_base {
+    static get styles(): CSSResultArray;
+    border: SwatchBorder;
+    color: string;
+    label: string;
+    mixedValue: boolean;
+    nothing: boolean;
+    role: string;
+    rounding: SwatchRounding;
+    selected: boolean;
+    readonly: boolean;
+    shape: SwatchShape;
+    get value(): string;
+    set value(value: string);
+    private _value?;
+    get focusElement(): HTMLElement;
+    toggle(force?: boolean): void;
+    private handleClick;
+    protected handleKeydown(event: KeyboardEvent): void;
+    private handleKeypress;
+    protected handleKeyup(event: KeyboardEvent): void;
+    protected renderDisabled: () => TemplateResult;
+    protected renderMixedValue: () => TemplateResult;
+    protected render(): TemplateResult;
+    protected willUpdate(changes: PropertyValues): void;
+    protected firstUpdated(changes: PropertyValues): void;
+}
+export {};

package/components/switch/index.cjs

@@ -0,0 +1,22 @@
+/*! * 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 c=require("../base-B7Pfl2if.cjs"),d=require("../sized-mixin-D9LkrMjb.cjs"),n=require("../focusable-DGWL1v1p.cjs"),u=require("../checkbox-mixin-DUhXwD46.cjs");class w extends u.checkboxMixin(n.Focusable){get focusElement(){return this.inputElement}}const s=':host{--switch-focus-indicator-width: var(--luzmo-focus-indicator-width, var(--luzmo-indicator-width));min-block-size:var(--luzmo-switch-height, var(--switch-min-height));--switch-track-height: var(--switch-control-height);max-inline-size:100%;vertical-align:top;align-items:flex-start;display:inline-flex;position:relative}#input{box-sizing:border-box;inline-size:100%;block-size:100%;opacity:0;z-index:1;cursor:pointer;margin:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0}:host([checked]) #input+#switch:before{transform:translate(calc(var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%))}:host([checked]) #input+#switch:dir(rtl):before,:host([dir=rtl][checked]) #input+#switch:before{transform:translate(calc((var(--luzmo-switch-control-width, var(--switch-control-width)) - 100%) * -1))}:host([disabled]) #input{cursor:not-allowed}#input:focus-visible+#switch:after{margin:calc(var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * -1)}#label{color:var(--highcontrast-switch-label-color-default, var(--luzmo-switch-label-color-default, var(--switch-label-color-default)));margin-inline:var(--luzmo-switch-control-label-spacing, var(--switch-control-label-spacing));font-size:var(--luzmo-switch-font-size, var(--switch-font-size));line-height:var(--luzmo-switch-line-height, 1.3);transition:color calc(var(--luzmo-animation-duration) * 2) ease-in-out;margin-block-start:var(--luzmo-switch-spacing-top-to-label, var(--switch-spacing-top-to-label));margin-block-end:0}#switch{box-sizing:border-box;inline-size:var(--luzmo-switch-control-width, var(--switch-control-width));margin-block:calc(var(--luzmo-switch-height, var(--switch-min-height)) - var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-spacing-top-to-control, var(--switch-spacing-top-to-control)));vertical-align:middle;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out;block-size:var(--luzmo-switch-track-height, var(--switch-track-height));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);flex-grow:0;flex-shrink:0;margin-inline:0;display:inline-block;position:relative;inset-inline:0}#switch:before{box-sizing:border-box;transition:background var(--luzmo-animation-duration) ease-in-out,border var(--luzmo-animation-duration) ease-in-out,transform var(--luzmo-animation-duration) ease-in-out,box-shadow var(--luzmo-animation-duration) ease-in-out;inline-size:var(--luzmo-switch-control-height, var(--switch-control-height));block-size:var(--luzmo-switch-control-height, var(--switch-control-height));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow));border-width:var(--luzmo-switch-border-width, var(--luzmo-switch-border-width, var(--luzmo-border-width)));border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2);border-style:solid}#switch:after,#switch:before{content:"";display:block;position:absolute;inset-block-start:0;inset-inline-start:0}#switch:after{border-radius:calc(var(--luzmo-switch-control-height, var(--switch-control-height)) / 2 + var(--luzmo-focus-indicator-gap, var(--switch-focus-indicator-gap)) * 2);transition:opacity var(--luzmo-animation-duration) ease-out,margin var(--luzmo-animation-duration) ease-out;margin:0;inset-block-end:0;inset-inline-end:0}#switch{background-color:var(--highcontrast-switch-background-color, var(--luzmo-switch-background-color, var(--switch-background-color)))}#switch:before{background-color:var(--highcontrast-switch-handle-background-color, var(--luzmo-switch-handle-background-color, var(--switch-handle-background-color)));border-color:var(--highcontrast-switch-handle-border-color-default, var(--luzmo-switch-handle-border-color-default, var(--switch-handle-border-color-default)))}:host(:active) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-down, var(--luzmo-switch-handle-border-color-down, var(--switch-handle-border-color-down)))}:host(:active) #input~#label{color:var(--highcontrast-switch-label-color-down, var(--luzmo-switch-label-color-down, var(--switch-label-color-down)))}:host(:active[checked]) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-down, var(--luzmo-switch-background-color-selected-down, var(--switch-background-color-selected-down)))}:host(:active[checked]) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-down, var(--luzmo-switch-handle-border-color-selected-down, var(--switch-handle-border-color-selected-down)))}#input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}#input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}#input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}@media (hover: hover){:host(:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-hover, var(--luzmo-switch-handle-border-color-hover, var(--switch-handle-border-color-hover)));box-shadow:var(--luzmo-switch-control-box-shadow, var(--switch-control-box-shadow, none));background-color:var(--highcontrast-switch-background-color-hover, var(--luzmo-switch-background-color-hover, var(--switch-background-color-hover, var(--luzmo-background-color-hover))))}:host(:hover) #input~#label{color:var(--highcontrast-switch-label-color-hover, var(--luzmo-switch-label-color-hover, var(--switch-label-color-hover)))}:host([checked]:hover) #input:enabled+#switch{background-color:var(--highcontrast-switch-background-color-selected-hover, var(--luzmo-switch-background-color-selected-hover, var(--switch-background-color-selected-hover)))}:host([checked]:hover) #input:enabled+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-hover, var(--luzmo-switch-handle-border-color-selected-hover, var(--switch-handle-border-color-selected-hover)))}:host([disabled]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host([disabled][checked]:hover) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]:hover) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]:hover) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}:host(:hover) #input:focus-visible+#switch:after{box-shadow:0 0 0 var(--luzmo-switch-focus-indicator-width, var(--luzmo-focus-indicator-width, var(--switch-focus-indicator-width))) var(--highcontrast-switch-focus-indicator-color, var(--luzmo-switch-focus-indicator-color, var(--switch-focus-indicator-color)))}:host(:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-focus, var(--luzmo-switch-handle-border-color-focus, var(--switch-handle-border-color-focus)))}:host([checked]:hover) #input:focus-visible+#switch{background-color:var(--highcontrast-switch-background-color-selected-focus, var(--luzmo-switch-background-color-selected-focus, var(--switch-background-color-selected-focus)))}:host([checked]:hover) #input:focus-visible+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-focus, var(--luzmo-switch-handle-border-color-selected-focus, var(--switch-handle-border-color-selected-focus)))}:host(:hover) #input:focus-visible~#label{color:var(--highcontrast-switch-label-color-focus, var(--luzmo-switch-label-color-focus, var(--switch-label-color-focus)))}}:host([checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-default, var(--luzmo-switch-background-color-selected-default, var(--switch-background-color-selected-default)))}:host([checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-selected-default, var(--luzmo-switch-handle-border-color-selected-default, var(--switch-handle-border-color-selected-default)))}:host([disabled]) #input+#switch{background-color:var(--highcontrast-switch-background-color-disabled, var(--luzmo-switch-background-color-disabled, var(--switch-background-color-disabled)))}:host([disabled]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled][checked]) #input+#switch{background-color:var(--highcontrast-switch-background-color-selected-disabled, var(--luzmo-switch-background-color-selected-disabled, var(--switch-background-color-selected-disabled)))}:host([disabled][checked]) #input+#switch:before{border-color:var(--highcontrast-switch-handle-border-color-disabled, var(--luzmo-switch-handle-border-color-disabled, var(--switch-handle-border-color-disabled)))}:host([disabled]) #input~#label{color:var(--highcontrast-switch-label-color-disabled, var(--luzmo-switch-label-color-disabled, var(--switch-label-color-disabled)))}@media (forced-colors: active){:host{--highcontrast-switch-label-color-default: ButtonText;--highcontrast-switch-label-color-hover: ButtonText;--highcontrast-switch-label-color-down: ButtonText;--highcontrast-switch-label-color-focus: ButtonText;--highcontrast-switch-label-color-disabled: GrayText;--highcontrast-switch-handle-background-color: ButtonFace;--highcontrast-switch-handle-border-color-default: ButtonText;--highcontrast-switch-handle-border-color-hover: Highlight;--highcontrast-switch-handle-border-color-down: Highlight;--highcontrast-switch-handle-border-color-focus: Highlight;--highcontrast-switch-handle-border-color-disabled: Highlight;--highcontrast-switch-handle-border-color-selected-default: Highlight;--highcontrast-switch-handle-border-color-selected-hover: Highlight;--highcontrast-switch-handle-border-color-selected-down: Highlight;--highcontrast-switch-handle-border-color-selected-focus: Highlight;--highcontrast-switch-background-color: ButtonFace;--highcontrast-switch-background-color-selected-default: Highlight;--highcontrast-switch-background-color-selected-hover: Highlight;--highcontrast-switch-background-color-selected-down: Highlight;--highcontrast-switch-background-color-selected-focus: Highlight;--highcontrast-switch-background-color-selected-disabled: Highlight;--highcontrast-switch-focus-indicator-color: ButtonText;forced-color-adjust:none}#input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px ButtonText}}@media (forced-colors: active) and (hover: hover){:host(:hover) #input:not(:checked)+#switch{box-shadow:inset 0 0 0 1px Highlight}:host([disabled][checked]:hover) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]:hover) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}}@media (forced-colors: active){:host([disabled]) #input:not(:checked)+#switch{background-color:ButtonFace;box-shadow:inset 0 0 0 1px GrayText}:host([disabled]) #input:not(:checked)+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled][checked]) #input+#switch{background-color:GrayText;box-shadow:inset 0 0 0 1px GrayText}:host([disabled][checked]) #input+#switch:before{background-color:ButtonFace;border-color:GrayText}:host([disabled]) #input~#label{color:GrayText}}:host{--switch-handle-border-color-default: var(--luzmo-color-selected);--switch-handle-border-color-hover: var(--luzmo-color-selected-hover);--switch-handle-border-color-down: var(--luzmo-color-selected-down);--switch-handle-border-color-focus: var(--luzmo-color-selected-focus);--switch-handle-border-color-selected-default: var(--luzmo-color-selected-hover);--switch-handle-border-color-selected-hover: var(--luzmo-color-selected-down);--switch-handle-border-color-selected-down: var(--luzmo-color-selected-hard-down);--switch-handle-border-color-selected-focus: var(--luzmo-color-selected-down);--switch-focus-indicator-gap: var(--luzmo-indicator-gap);--switch-label-color-default: var(--luzmo-color-selected-hard);--switch-label-color-hover: var(--luzmo-color-selected-hard-hover);--switch-label-color-down: var(--luzmo-color-selected-hard-down);--switch-label-color-focus: var(--luzmo-color-selected-hard-focus);--switch-label-color-disabled: var(--luzmo-color-disabled);--switch-background-color: var(--luzmo-border-color);--switch-background-color-disabled: var(--luzmo-background-color-disabled);--switch-background-color-selected-disabled: var(--luzmo-color-disabled);--switch-background-color-selected-default: var(--luzmo-color-selected-hover);--switch-background-color-selected-hover: var(--luzmo-color-selected-down);--switch-background-color-selected-down: var(--luzmo-color-selected-hard-down);--switch-background-color-selected-focus: var(--luzmo-color-selected-down);--switch-focus-indicator-width: var(luzmo-indicator-width);--switch-focus-indicator-color: var(--luzmo-primary);--switch-handle-background-color: var(--luzmo-background-color);--switch-handle-border-color-disabled: var(--luzmo-color-disabled);--switch-spacing-top-to-control: calc((var(--switch-min-height) - var(--switch-control-height)) / 2)}:host([disabled]){--switch-label-color-default: var(--luzmo-color-disabled)}:host([emphasized]){--switch-background-color-selected-default: var(--luzmo-primary);--switch-background-color-selected-hover: var(--luzmo-primary-hover);--switch-background-color-selected-down: var(--luzmo-primary-down);--switch-background-color-selected-focus: var(--luzmo-primary-focus);--switch-handle-border-color-selected-default: var(--luzmo-primary);--switch-handle-border-color-selected-hover: var(--luzmo-primary-hover);--switch-handle-border-color-selected-down: var(--luzmo-primary-down);--switch-handle-border-color-selected-focus: var(--luzmo-primary-focus)}:host([size=s]){--switch-min-height: 24px;--switch-control-width: 23px;--switch-control-height: var(--luzmo-font-size-s);--switch-control-label-spacing: var(--luzmo-spacing-3);--switch-spacing-top-to-label: 4px;--switch-font-size: var(--luzmo-font-size-s)}:host{--switch-min-height: 32px;--switch-control-width: 26px;--switch-control-height: var(--luzmo-font-size);--switch-control-label-spacing: calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--switch-spacing-top-to-label: 6px;--switch-font-size: var(--luzmo-font-size)}:host([size=l]){--switch-min-height: 40px;--switch-control-width: 28px;--switch-control-height: var(--luzmo-font-size-l);--switch-control-label-spacing: var(--luzmo-spacing-4);--switch-spacing-top-to-label: 9px;--switch-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--switch-min-height: 48px;--switch-control-width: 32px;--switch-control-height: var(--luzmo-font-size-xl);--switch-control-label-spacing: calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--switch-spacing-top-to-label: 12px;--switch-font-size: var(--luzmo-font-size-xl)}:host([disabled]){pointer-events:none}:host([thumb=overflow]){--luzmo-switch-border-width: 0px;--switch-control-width: calc(var(--switch-control-height) * 2);--switch-control-box-shadow: 0 .125rem .25rem rgba(var(--luzmo-border-color-rgb), .2), inset 0 0 0 .0625rem rgba(var(--luzmo-border-color-rgb), .2)}:host([thumb=overflow]) #switch{margin-top:calc((var(--luzmo-switch-min-height, var(--switch-min-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow]) #switch:before{inset-block-start:calc(-1 * (var(--luzmo-switch-control-height, var(--switch-control-height)) - var(--luzmo-switch-track-height, var(--switch-track-height))) / 2)}:host([thumb=overflow][size=s]){--switch-track-height: 10px;--switch-control-height: 16px;--switch-focus-indicator-gap: 5px}:host([thumb=overflow]){--switch-track-height: 10px;--switch-control-height: 18px;--switch-focus-indicator-gap: 6px}:host([thumb=overflow][size=l]){--switch-track-height: 12px;--switch-control-height: 20px;--switch-focus-indicator-gap: 7px}:host([thumb=overflow][size=xl]){--switch-track-height: 12px;--switch-control-height: 22px;--switch-focus-indicator-gap: 8px}';var b=Object.defineProperty,h=(t,o,l,v)=>{for(var r=void 0,i=t.length-1,a;i>=0;i--)(a=t[i])&&(r=a(o,l,r)||r);return r&&b(o,l,r),r};class e extends d.SizedMixin(w){constructor(){super(...arguments),this.emphasized=!1,this.thumb="overflow"}static get styles(){return window.hasOwnProperty("ShadyDOM")?[c.r(s)]:[c.r(s)]}render(){return c.x`
+      ${super.render()}
+      <span id="switch"></span>
+      <label id="label" for="input"><slot></slot></label>
+    `}firstUpdated(o){super.firstUpdated(o),this.inputElement.setAttribute("role","switch")}updated(o){o.has("checked")&&this.inputElement.setAttribute("aria-checked",this.checked?"true":"false")}}h([c.n({type:Boolean,reflect:!0})],e.prototype,"emphasized");h([c.n({type:String,reflect:!0})],e.prototype,"thumb");customElements.get("luzmo-switch")||customElements.define("luzmo-switch",e);exports.LuzmoSwitch=e;

package/components/switch/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoSwitch } from './switch';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-switch': LuzmoSwitch;
+    }
+}
+export { LuzmoSwitch } from './switch';

package/{lib → components}/switch/index.js

@@ -15,11 +15,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { S as u } from "../sized-mixin-Dl0KoEcV.js";
-import { unsafeCSS as a, html as b } from "lit";
-import { n as h } from "../base-nYalvNMy.js";
-import { F as w } from "../focusable-DbUg-3Vp.js";
-import { C as m } from "../checkbox-mixin-DegQlk5C.js";
+import { r as a, x as u, n as h } from "../base-CawdqE7p.js";
+import { S as b } from "../sized-mixin-BxMraZLS.js";
+import { F as w } from "../focusable-cj2QhwDT.js";
+import { c as m } from "../checkbox-mixin-BFGTmw17.js";
 const n = () => {
   if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
     const o = document.createElement("style");
@@ -38,7 +37,7 @@ var g = Object.defineProperty, d = (o, r, l, z) => {
     (i = o[e]) && (c = i(r, l, c) || c);
   return c && g(r, l, c), c;
 };
-class t extends u(v) {
+class t extends b(v) {
   constructor() {
     super(...arguments), this.emphasized = !1, this.thumb = "overflow";
   }
@@ -46,7 +45,7 @@ class t extends u(v) {
     return window.hasOwnProperty("ShadyDOM") ? [a(s)] : [a(s)];
   }
   render() {
-    return b`
+    return u`
       ${super.render()}
       <span id="switch"></span>
       <label id="label" for="input"><slot></slot></label>

package/components/switch/switch.d.ts

@@ -0,0 +1,27 @@
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import { CheckboxBase } from './../checkbox/checkbox-base';
+declare const LuzmoSwitch_base: typeof CheckboxBase & {
+    new (...args: any[]): import("../..").SizedElementInterface;
+    prototype: import("../..").SizedElementInterface;
+};
+/**
+ * @element luzmo-switch
+ *
+ * @slot - text label of the Switch
+ * @fires change - Announces a change in the `checked` property of a Switch
+ */
+export declare class LuzmoSwitch extends LuzmoSwitch_base {
+    static get styles(): CSSResultArray;
+    /**
+     * Deliver the Switch with additional visual emphasis.
+     */
+    emphasized: boolean;
+    /**
+     * Whether the thumb is within the Switch or overflows it.
+     */
+    thumb?: 'overflow' | 'within';
+    protected render(): TemplateResult;
+    protected firstUpdated(changes: PropertyValues): void;
+    protected updated(changes: PropertyValues): void;
+}
+export {};