@manzanohq/components 0.1.1 → 0.1.4

package/cdn/chunks/chunk.KSB2WJUO.js

@@ -0,0 +1,104 @@
+import{a as r}from"./chunk.22OS67BO.js";import{a as e}from"./chunk.TO7F5R6A.js";var o=e`
+  ${r}
+
+  :host {
+    display: block;
+  }
+
+  .tree-item__row {
+    display: flex;
+    align-items: center;
+    gap: var(--mz-space-2xs);
+    padding: var(--mz-space-2xs) var(--mz-space-xs);
+    border-radius: var(--mz-radius-sm);
+    cursor: pointer;
+    font-size: var(--mz-font-size-sm);
+    color: var(--mz-color-text);
+    outline: none;
+    transition: background-color 100ms ease;
+    user-select: none;
+  }
+
+  .tree-item__row:hover {
+    background: var(--mz-color-surface-raised);
+  }
+
+  .tree-item__row:focus-visible {
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);
+  }
+
+  .tree-item--selected > .tree-item__row {
+    background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface));
+    color: var(--mz-color-primary);
+  }
+
+  .tree-item--disabled > .tree-item__row {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tree-item__expand {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    color: var(--mz-color-text-disabled);
+    transition: transform 200ms ease;
+    border-radius: var(--mz-radius-sm);
+  }
+
+  .tree-item__expand:hover {
+    background: color-mix(in srgb, var(--mz-color-text) 8%, var(--mz-color-surface));
+  }
+
+  .tree-item--expanded > .tree-item__row > .tree-item__expand {
+    transform: rotate(90deg);
+  }
+
+  /* Reserve space for expand icon on leaf nodes so text lines up */
+  .tree-item:not(.tree-item--has-children) .tree-item__expand {
+    visibility: hidden;
+  }
+
+  .tree-item__icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  .tree-item__label {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .tree-item__children {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 200ms ease;
+    padding-left: var(--mz-space-md);
+    position: relative;
+  }
+
+  .tree-item--expanded > .tree-item__children {
+    grid-template-rows: 1fr;
+  }
+
+  .tree-item__children > ::slotted(*) {
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  /* Tree connector line */
+  .tree-item--expanded > .tree-item__children::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: calc(var(--mz-space-xs) + 0.625rem);
+    bottom: var(--mz-space-xs);
+    width: 1px;
+    background: var(--mz-color-border);
+  }
+`;export{o as a};
+//# sourceMappingURL=chunk.KSB2WJUO.js.map

package/cdn/chunks/chunk.KSB2WJUO.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tree-item/tree-item.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default css`\n  ${componentStyles}\n\n  :host {\n    display: block;\n  }\n\n  .tree-item__row {\n    display: flex;\n    align-items: center;\n    gap: var(--mz-space-2xs);\n    padding: var(--mz-space-2xs) var(--mz-space-xs);\n    border-radius: var(--mz-radius-sm);\n    cursor: pointer;\n    font-size: var(--mz-font-size-sm);\n    color: var(--mz-color-text);\n    outline: none;\n    transition: background-color 100ms ease;\n    user-select: none;\n  }\n\n  .tree-item__row:hover {\n    background: var(--mz-color-surface-raised);\n  }\n\n  .tree-item__row:focus-visible {\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);\n  }\n\n  .tree-item--selected > .tree-item__row {\n    background: color-mix(in srgb, var(--mz-color-primary) 10%, var(--mz-color-surface));\n    color: var(--mz-color-primary);\n  }\n\n  .tree-item--disabled > .tree-item__row {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .tree-item__expand {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.25rem;\n    height: 1.25rem;\n    flex-shrink: 0;\n    color: var(--mz-color-text-disabled);\n    transition: transform 200ms ease;\n    border-radius: var(--mz-radius-sm);\n  }\n\n  .tree-item__expand:hover {\n    background: color-mix(in srgb, var(--mz-color-text) 8%, var(--mz-color-surface));\n  }\n\n  .tree-item--expanded > .tree-item__row > .tree-item__expand {\n    transform: rotate(90deg);\n  }\n\n  /* Reserve space for expand icon on leaf nodes so text lines up */\n  .tree-item:not(.tree-item--has-children) .tree-item__expand {\n    visibility: hidden;\n  }\n\n  .tree-item__icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .tree-item__label {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .tree-item__children {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows 200ms ease;\n    padding-left: var(--mz-space-md);\n    position: relative;\n  }\n\n  .tree-item--expanded > .tree-item__children {\n    grid-template-rows: 1fr;\n  }\n\n  .tree-item__children > ::slotted(*) {\n    overflow: hidden;\n    min-height: 0;\n  }\n\n  /* Tree connector line */\n  .tree-item--expanded > .tree-item__children::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: calc(var(--mz-space-xs) + 0.625rem);\n    bottom: var(--mz-space-xs);\n    width: 1px;\n    background: var(--mz-color-border);\n  }\n`;\n"],
+  "mappings": "gFAGA,IAAOA,EAAQC;AAAA,IACXC,CAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": ["tree_item_styles_default", "i", "component_styles_default"]
+}

package/cdn/chunks/chunk.LDY3AWZU.js

@@ -0,0 +1,2 @@
+import{a}from"./chunk.TJFGJDM2.js";a.define("mz-tag");
+//# sourceMappingURL=chunk.LDY3AWZU.js.map

package/cdn/chunks/chunk.LPNISGOM.js

@@ -0,0 +1,17 @@
+import{a as i}from"./chunk.WM5LNPDY.js";import{a as o}from"./chunk.X6MSTFXZ.js";import{b as s,d as h}from"./chunk.K3BKUERM.js";import{d as l}from"./chunk.TO7F5R6A.js";import{a}from"./chunk.MGICPQBB.js";var t=class extends h{constructor(){super(...arguments);this.hasImage=!1;this.hasHeader=!1;this.hasFooter=!1}handleSlotChange(e,d){let r=d.target.assignedNodes({flatten:!0}).length>0;e==="image"?this.hasImage=r:e==="header"?this.hasHeader=r:this.hasFooter=r}render(){return l`
+      <div part="base" class="card">
+        <div part="image" class=${o({card__image:!0,"card__image--empty":!this.hasImage})}>
+          <slot name="image" @slotchange=${e=>this.handleSlotChange("image",e)}></slot>
+        </div>
+        <div part="header" class=${o({card__header:!0,"card__header--empty":!this.hasHeader})}>
+          <slot name="header" @slotchange=${e=>this.handleSlotChange("header",e)}></slot>
+        </div>
+        <div part="body" class="card__body">
+          <slot></slot>
+        </div>
+        <div part="footer" class=${o({card__footer:!0,"card__footer--empty":!this.hasFooter})}>
+          <slot name="footer" @slotchange=${e=>this.handleSlotChange("footer",e)}></slot>
+        </div>
+      </div>
+    `}};t.styles=i,a([s()],t.prototype,"hasImage",2),a([s()],t.prototype,"hasHeader",2),a([s()],t.prototype,"hasFooter",2);export{t as a};
+//# sourceMappingURL=chunk.LPNISGOM.js.map

package/cdn/chunks/chunk.LSNIMSME.js

@@ -0,0 +1,6 @@
+import{a as o}from"./chunk.TO7F5R6A.js";var t=o`
+  :host {
+    display: block;
+  }
+`;export{t as a};
+//# sourceMappingURL=chunk.LSNIMSME.js.map

package/cdn/chunks/chunk.LSNIMSME.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/intersection-observer/intersection-observer.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n`;\n"],
+  "mappings": "wCAEA,IAAOA,EAAQC;AAAA;AAAA;AAAA;",
+  "names": ["intersection_observer_styles_default", "i"]
+}

package/cdn/chunks/chunk.LWOAYESP.js

@@ -0,0 +1,2 @@
+import{a as m}from"./chunk.VNX25UDO.js";import{a as n,d as s}from"./chunk.K3BKUERM.js";import{d as r}from"./chunk.TO7F5R6A.js";import{a as t}from"./chunk.MGICPQBB.js";var i=class extends s{constructor(){super(...arguments);this.value=0;this.type="decimal"}render(){if(isNaN(this.value))return r``;let e={style:this.type};this.type==="currency"&&this.currency&&(e.currency=this.currency),this.currencyDisplay&&(e.currencyDisplay=this.currencyDisplay),this.notation&&(e.notation=this.notation),this.minimumIntegerDigits!==void 0&&(e.minimumIntegerDigits=this.minimumIntegerDigits),this.minimumFractionDigits!==void 0&&(e.minimumFractionDigits=this.minimumFractionDigits),this.maximumFractionDigits!==void 0&&(e.maximumFractionDigits=this.maximumFractionDigits);try{let c=new Intl.NumberFormat(this.locale,e).format(this.value);return r`<span>${c}</span>`}catch{return r`<span>${String(this.value)}</span>`}}};i.styles=m,t([n({type:Number})],i.prototype,"value",2),t([n()],i.prototype,"type",2),t([n()],i.prototype,"currency",2),t([n({attribute:"currency-display"})],i.prototype,"currencyDisplay",2),t([n()],i.prototype,"notation",2),t([n({type:Number,attribute:"minimum-integer-digits"})],i.prototype,"minimumIntegerDigits",2),t([n({type:Number,attribute:"minimum-fraction-digits"})],i.prototype,"minimumFractionDigits",2),t([n({type:Number,attribute:"maximum-fraction-digits"})],i.prototype,"maximumFractionDigits",2),t([n()],i.prototype,"locale",2);export{i as a};
+//# sourceMappingURL=chunk.LWOAYESP.js.map

package/cdn/chunks/chunk.LWOAYESP.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/format-number/format-number.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './format-number.styles.js';\n\n/**\n * @summary Formats a number using the browser's `Intl.NumberFormat` API.\n *\n * @tag mz-format-number\n *\n * @example\n * ```html\n * <mz-format-number value=\"1234.56\" type=\"currency\" currency=\"USD\"></mz-format-number>\n * ```\n */\nexport class MzFormatNumber extends ManzanoElement {\n  static styles = styles;\n\n  /** The number to format. */\n  @property({ type: Number }) value: number = 0;\n\n  /** The formatting style: 'decimal', 'currency', 'percent', or 'unit'. Maps to Intl.NumberFormat `style`. */\n  @property() type: 'decimal' | 'currency' | 'percent' | 'unit' = 'decimal';\n\n  /** The currency code when type is 'currency' (e.g. 'USD', 'EUR'). */\n  @property() currency?: string;\n\n  /** How to display the currency: 'symbol', 'narrowSymbol', 'code', or 'name'. */\n  @property({ attribute: 'currency-display' })\n  currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name';\n\n  /** The notation to use: 'standard', 'scientific', 'engineering', or 'compact'. */\n  @property() notation?: 'standard' | 'scientific' | 'engineering' | 'compact';\n\n  /** The minimum number of integer digits. */\n  @property({ type: Number, attribute: 'minimum-integer-digits' })\n  minimumIntegerDigits?: number;\n\n  /** The minimum number of fraction digits. */\n  @property({ type: Number, attribute: 'minimum-fraction-digits' })\n  minimumFractionDigits?: number;\n\n  /** The maximum number of fraction digits. */\n  @property({ type: Number, attribute: 'maximum-fraction-digits' })\n  maximumFractionDigits?: number;\n\n  /** The locale to use for formatting. Defaults to the browser's locale. */\n  @property() locale?: string;\n\n  render() {\n    if (isNaN(this.value)) {\n      return html``;\n    }\n\n    const options: Intl.NumberFormatOptions = {\n      style: this.type\n    };\n\n    if (this.type === 'currency' && this.currency) {\n      options.currency = this.currency;\n    }\n\n    if (this.currencyDisplay) options.currencyDisplay = this.currencyDisplay;\n    if (this.notation) options.notation = this.notation;\n    if (this.minimumIntegerDigits !== undefined) options.minimumIntegerDigits = this.minimumIntegerDigits;\n    if (this.minimumFractionDigits !== undefined) options.minimumFractionDigits = this.minimumFractionDigits;\n    if (this.maximumFractionDigits !== undefined) options.maximumFractionDigits = this.maximumFractionDigits;\n\n    try {\n      const formatted = new Intl.NumberFormat(this.locale, options).format(this.value);\n      return html`<span>${formatted}</span>`;\n    } catch {\n      return html`<span>${String(this.value)}</span>`;\n    }\n  }\n}\n"],
+  "mappings": "uKAeO,IAAMA,EAAN,cAA6BC,CAAe,CAA5C,kCAIuB,WAAgB,EAGhC,UAAoD,UA2BhE,QAAS,CACP,GAAI,MAAM,KAAK,KAAK,EAClB,OAAOC,IAGT,IAAMC,EAAoC,CACxC,MAAO,KAAK,IACd,EAEI,KAAK,OAAS,YAAc,KAAK,WACnCA,EAAQ,SAAW,KAAK,UAGtB,KAAK,kBAAiBA,EAAQ,gBAAkB,KAAK,iBACrD,KAAK,WAAUA,EAAQ,SAAW,KAAK,UACvC,KAAK,uBAAyB,SAAWA,EAAQ,qBAAuB,KAAK,sBAC7E,KAAK,wBAA0B,SAAWA,EAAQ,sBAAwB,KAAK,uBAC/E,KAAK,wBAA0B,SAAWA,EAAQ,sBAAwB,KAAK,uBAEnF,GAAI,CACF,IAAMC,EAAY,IAAI,KAAK,aAAa,KAAK,OAAQD,CAAO,EAAE,OAAO,KAAK,KAAK,EAC/E,OAAOD,UAAaE,CAAS,SAC/B,MAAQ,CACN,OAAOF,UAAa,OAAO,KAAK,KAAK,CAAC,SACxC,CACF,CACF,EA5DaF,EACJ,OAASK,EAGYC,EAAA,CAA3B,EAAS,CAAE,KAAM,MAAO,CAAC,GAJfN,EAIiB,qBAGhBM,EAAA,CAAX,EAAS,GAPCN,EAOC,oBAGAM,EAAA,CAAX,EAAS,GAVCN,EAUC,wBAIZM,EAAA,CADC,EAAS,CAAE,UAAW,kBAAmB,CAAC,GAbhCN,EAcX,+BAGYM,EAAA,CAAX,EAAS,GAjBCN,EAiBC,wBAIZM,EAAA,CADC,EAAS,CAAE,KAAM,OAAQ,UAAW,wBAAyB,CAAC,GApBpDN,EAqBX,oCAIAM,EAAA,CADC,EAAS,CAAE,KAAM,OAAQ,UAAW,yBAA0B,CAAC,GAxBrDN,EAyBX,qCAIAM,EAAA,CADC,EAAS,CAAE,KAAM,OAAQ,UAAW,yBAA0B,CAAC,GA5BrDN,EA6BX,qCAGYM,EAAA,CAAX,EAAS,GAhCCN,EAgCC",
+  "names": ["MzFormatNumber", "ManzanoElement", "b", "options", "formatted", "format_number_styles_default", "__decorateClass"]
+}

package/cdn/chunks/chunk.M6I7CSCO.js

@@ -0,0 +1,11 @@
+import{a as o}from"./chunk.57SLUF4P.js";import{a as s,d as a}from"./chunk.K3BKUERM.js";import{d as l,g as t}from"./chunk.TO7F5R6A.js";import{a as e}from"./chunk.MGICPQBB.js";var r=class extends a{constructor(){super(...arguments);this.label=""}render(){return l`
+      <div
+        part="base"
+        class="button-group"
+        role="group"
+        aria-label=${this.label||t}
+      >
+        <slot></slot>
+      </div>
+    `}};r.styles=o,e([s()],r.prototype,"label",2);export{r as a};
+//# sourceMappingURL=chunk.M6I7CSCO.js.map

package/cdn/chunks/chunk.MD76AOAI.js

@@ -0,0 +1,2 @@
+import{a as h}from"./chunk.BV3MKPPK.js";import{a as n,d as s}from"./chunk.K3BKUERM.js";import{d as o}from"./chunk.TO7F5R6A.js";import{a as e}from"./chunk.MGICPQBB.js";var t=class extends s{constructor(){super(...arguments);this.date=new Date;this.hourFormat="auto"}render(){let r=this.date instanceof Date?this.date:new Date(this.date);if(isNaN(r.getTime()))return o``;let i={};this.weekday&&(i.weekday=this.weekday),this.era&&(i.era=this.era),this.year&&(i.year=this.year),this.month&&(i.month=this.month),this.day&&(i.day=this.day),this.hour&&(i.hour=this.hour),this.minute&&(i.minute=this.minute),this.second&&(i.second=this.second),this.timeZoneName&&(i.timeZoneName=this.timeZoneName),this.hourFormat!=="auto"&&(i.hour12=this.hourFormat==="12");let m=new Intl.DateTimeFormat(this.locale,i).format(r),a=r.toISOString();return o`<time datetime=${a}>${m}</time>`}};t.styles=h,e([n({attribute:"date",converter:{fromAttribute(r){let i=Number(r);return isNaN(i)?new Date(r):new Date(i)}}})],t.prototype,"date",2),e([n()],t.prototype,"weekday",2),e([n()],t.prototype,"era",2),e([n()],t.prototype,"year",2),e([n()],t.prototype,"month",2),e([n()],t.prototype,"day",2),e([n()],t.prototype,"hour",2),e([n()],t.prototype,"minute",2),e([n()],t.prototype,"second",2),e([n({attribute:"time-zone-name"})],t.prototype,"timeZoneName",2),e([n({attribute:"hour-format"})],t.prototype,"hourFormat",2),e([n()],t.prototype,"locale",2);export{t as a};
+//# sourceMappingURL=chunk.MD76AOAI.js.map

package/cdn/chunks/chunk.MD76AOAI.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/format-date/format-date.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './format-date.styles.js';\n\n/**\n * @summary Formats a date using the browser's `Intl.DateTimeFormat` API.\n *\n * @tag mz-format-date\n *\n * @example\n * ```html\n * <mz-format-date month=\"long\" day=\"numeric\" year=\"numeric\"></mz-format-date>\n * ```\n */\nexport class MzFormatDate extends ManzanoElement {\n  static styles = styles;\n\n  /** The date to format. Accepts a Date object, ISO string, or unix timestamp (ms). */\n  @property({\n    attribute: 'date',\n    converter: {\n      fromAttribute(value: string) {\n        const num = Number(value);\n        return isNaN(num) ? new Date(value) : new Date(num);\n      }\n    }\n  })\n  date: Date = new Date();\n\n  /** The weekday format: 'narrow', 'short', or 'long'. */\n  @property() weekday?: 'narrow' | 'short' | 'long';\n\n  /** The era format: 'narrow', 'short', or 'long'. */\n  @property() era?: 'narrow' | 'short' | 'long';\n\n  /** The year format: 'numeric' or '2-digit'. */\n  @property() year?: 'numeric' | '2-digit';\n\n  /** The month format: 'numeric', '2-digit', 'narrow', 'short', or 'long'. */\n  @property() month?: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';\n\n  /** The day format: 'numeric' or '2-digit'. */\n  @property() day?: 'numeric' | '2-digit';\n\n  /** The hour format: 'numeric' or '2-digit'. */\n  @property() hour?: 'numeric' | '2-digit';\n\n  /** The minute format: 'numeric' or '2-digit'. */\n  @property() minute?: 'numeric' | '2-digit';\n\n  /** The second format: 'numeric' or '2-digit'. */\n  @property() second?: 'numeric' | '2-digit';\n\n  /** The time zone name format: 'short', 'long', 'shortOffset', 'longOffset', 'shortGeneric', or 'longGeneric'. */\n  @property({ attribute: 'time-zone-name' })\n  timeZoneName?: 'short' | 'long' | 'shortOffset' | 'longOffset' | 'shortGeneric' | 'longGeneric';\n\n  /** The hour format: 'auto' (locale default), '12' (12-hour), or '24' (24-hour). */\n  @property({ attribute: 'hour-format' })\n  hourFormat: 'auto' | '12' | '24' = 'auto';\n\n  /** The locale to use for formatting. Defaults to the browser's locale. */\n  @property() locale?: string;\n\n  render() {\n    const date = this.date instanceof Date ? this.date : new Date(this.date);\n\n    if (isNaN(date.getTime())) {\n      return html``;\n    }\n\n    const options: Intl.DateTimeFormatOptions = {};\n\n    if (this.weekday) options.weekday = this.weekday;\n    if (this.era) options.era = this.era;\n    if (this.year) options.year = this.year;\n    if (this.month) options.month = this.month;\n    if (this.day) options.day = this.day;\n    if (this.hour) options.hour = this.hour;\n    if (this.minute) options.minute = this.minute;\n    if (this.second) options.second = this.second;\n    if (this.timeZoneName) options.timeZoneName = this.timeZoneName;\n\n    if (this.hourFormat !== 'auto') {\n      options.hour12 = this.hourFormat === '12';\n    }\n\n    const formatted = new Intl.DateTimeFormat(this.locale, options).format(date);\n    const isoString = date.toISOString();\n\n    return html`<time datetime=${isoString}>${formatted}</time>`;\n  }\n}\n"],
+  "mappings": "uKAeO,IAAMA,EAAN,cAA2BC,CAAe,CAA1C,kCAaL,UAAa,IAAI,KAgCjB,gBAAmC,OAKnC,QAAS,CACP,IAAMC,EAAO,KAAK,gBAAgB,KAAO,KAAK,KAAO,IAAI,KAAK,KAAK,IAAI,EAEvE,GAAI,MAAMA,EAAK,QAAQ,CAAC,EACtB,OAAOC,IAGT,IAAMC,EAAsC,CAAC,EAEzC,KAAK,UAASA,EAAQ,QAAU,KAAK,SACrC,KAAK,MAAKA,EAAQ,IAAM,KAAK,KAC7B,KAAK,OAAMA,EAAQ,KAAO,KAAK,MAC/B,KAAK,QAAOA,EAAQ,MAAQ,KAAK,OACjC,KAAK,MAAKA,EAAQ,IAAM,KAAK,KAC7B,KAAK,OAAMA,EAAQ,KAAO,KAAK,MAC/B,KAAK,SAAQA,EAAQ,OAAS,KAAK,QACnC,KAAK,SAAQA,EAAQ,OAAS,KAAK,QACnC,KAAK,eAAcA,EAAQ,aAAe,KAAK,cAE/C,KAAK,aAAe,SACtBA,EAAQ,OAAS,KAAK,aAAe,MAGvC,IAAMC,EAAY,IAAI,KAAK,eAAe,KAAK,OAAQD,CAAO,EAAE,OAAOF,CAAI,EACrEI,EAAYJ,EAAK,YAAY,EAEnC,OAAOC,mBAAsBG,CAAS,IAAID,CAAS,SACrD,CACF,EA9EaL,EACJ,OAASO,EAYhBC,EAAA,CATC,EAAS,CACR,UAAW,OACX,UAAW,CACT,cAAcC,EAAe,CAC3B,IAAMC,EAAM,OAAOD,CAAK,EACxB,OAAO,MAAMC,CAAG,EAAI,IAAI,KAAKD,CAAK,EAAI,IAAI,KAAKC,CAAG,CACpD,CACF,CACF,CAAC,GAZUV,EAaX,oBAGYQ,EAAA,CAAX,EAAS,GAhBCR,EAgBC,uBAGAQ,EAAA,CAAX,EAAS,GAnBCR,EAmBC,mBAGAQ,EAAA,CAAX,EAAS,GAtBCR,EAsBC,oBAGAQ,EAAA,CAAX,EAAS,GAzBCR,EAyBC,qBAGAQ,EAAA,CAAX,EAAS,GA5BCR,EA4BC,mBAGAQ,EAAA,CAAX,EAAS,GA/BCR,EA+BC,oBAGAQ,EAAA,CAAX,EAAS,GAlCCR,EAkCC,sBAGAQ,EAAA,CAAX,EAAS,GArCCR,EAqCC,sBAIZQ,EAAA,CADC,EAAS,CAAE,UAAW,gBAAiB,CAAC,GAxC9BR,EAyCX,4BAIAQ,EAAA,CADC,EAAS,CAAE,UAAW,aAAc,CAAC,GA5C3BR,EA6CX,0BAGYQ,EAAA,CAAX,EAAS,GAhDCR,EAgDC",
+  "names": ["MzFormatDate", "ManzanoElement", "date", "b", "options", "formatted", "isoString", "format_date_styles_default", "__decorateClass", "value", "num"]
+}

package/cdn/chunks/chunk.MILPHZSY.js

@@ -0,0 +1,2 @@
+import{a as o}from"./chunk.2JKX4WN6.js";o.define("mz-radio-group");
+//# sourceMappingURL=chunk.MILPHZSY.js.map

package/cdn/chunks/chunk.MQABRBEQ.js

@@ -0,0 +1,12 @@
+import{a as u}from"./chunk.XCWARG3Q.js";import{a as g}from"./chunk.GIZ5VP2L.js";import{a as e,d as c}from"./chunk.K3BKUERM.js";import{d as h,e as a,g as p}from"./chunk.TO7F5R6A.js";import{a as r}from"./chunk.MGICPQBB.js";var t=class extends c{constructor(){super(...arguments);this.value="";this.size=200;this.foreground="currentColor";this.background="transparent";this.errorCorrection="M";this.radius=0}render(){if(!this.value)return h`<div class="qr-code__empty" part="empty" style="width:${this.size}px;height:${this.size}px">No value</div>`;let l;try{l=u(this.value,this.errorCorrection)}catch{return h`<div class="qr-code__empty" part="empty" style="width:${this.size}px;height:${this.size}px">Error</div>`}if(!l.length)return h`<div class="qr-code__empty" part="empty" style="width:${this.size}px;height:${this.size}px">No value</div>`;let i=l.length,n=[];for(let s=0;s<i;s++)for(let o=0;o<i;o++)l[s][o]&&n.push(this.radius>0?a`<rect x=${o} y=${s} width="1" height="1" fill=${this.foreground} rx=${this.radius} ry=${this.radius} />`:a`<rect x=${o} y=${s} width="1" height="1" fill=${this.foreground} />`);return h`
+      <svg part="svg"
+        width=${this.size} height=${this.size}
+        viewBox="0 0 ${i} ${i}"
+        xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-label="QR code: ${this.value}">
+        ${this.background!=="transparent"?a`<rect width=${i} height=${i} fill=${this.background} />`:p}
+        ${n}
+      </svg>
+    `}};t.styles=g,r([e()],t.prototype,"value",2),r([e({type:Number})],t.prototype,"size",2),r([e()],t.prototype,"foreground",2),r([e()],t.prototype,"background",2),r([e({attribute:"error-correction"})],t.prototype,"errorCorrection",2),r([e({type:Number})],t.prototype,"radius",2);export{t as a};
+//# sourceMappingURL=chunk.MQABRBEQ.js.map

package/cdn/chunks/chunk.MQABRBEQ.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/qr-code/qr-code.component.ts"],
+  "sourcesContent": ["import { html, nothing, svg } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport { generateQR, type ErrorCorrectionLevel } from './qr-encoder.js';\nimport styles from './qr-code.styles.js';\n\n/**\n * @summary Generates and renders a QR code as an SVG from a value string.\n *\n * @tag mz-qr-code\n *\n * @csspart svg - The SVG element.\n * @csspart empty - The empty-state container shown when no value is set.\n *\n * @cssproperty --mz-qr-code-size - Override the rendered size.\n */\nexport class MzQrCode extends ManzanoElement {\n  static styles = styles;\n\n  /** The text or URL to encode as a QR code. */\n  @property() value = '';\n\n  /** Pixel size of the QR code. */\n  @property({ type: Number }) size = 200;\n\n  /** Foreground (module) color. */\n  @property() foreground = 'currentColor';\n\n  /** Background color. */\n  @property() background = 'transparent';\n\n  /** Error correction level. */\n  @property({ attribute: 'error-correction' }) errorCorrection: ErrorCorrectionLevel = 'M';\n\n  /** Border radius of individual modules (0-0.5). For rounded QR codes. */\n  @property({ type: Number }) radius = 0;\n\n  render() {\n    if (!this.value) {\n      return html`<div class=\"qr-code__empty\" part=\"empty\" style=\"width:${this.size}px;height:${this.size}px\">No value</div>`;\n    }\n\n    let matrix: boolean[][];\n    try {\n      matrix = generateQR(this.value, this.errorCorrection);\n    } catch {\n      return html`<div class=\"qr-code__empty\" part=\"empty\" style=\"width:${this.size}px;height:${this.size}px\">Error</div>`;\n    }\n\n    if (!matrix.length) {\n      return html`<div class=\"qr-code__empty\" part=\"empty\" style=\"width:${this.size}px;height:${this.size}px\">No value</div>`;\n    }\n\n    const moduleCount = matrix.length;\n\n    const rects = [];\n    for (let y = 0; y < moduleCount; y++) {\n      for (let x = 0; x < moduleCount; x++) {\n        if (matrix[y][x]) {\n          rects.push(\n            this.radius > 0\n              ? svg`<rect x=${x} y=${y} width=\"1\" height=\"1\" fill=${this.foreground} rx=${this.radius} ry=${this.radius} />`\n              : svg`<rect x=${x} y=${y} width=\"1\" height=\"1\" fill=${this.foreground} />`\n          );\n        }\n      }\n    }\n\n    return html`\n      <svg part=\"svg\"\n        width=${this.size} height=${this.size}\n        viewBox=\"0 0 ${moduleCount} ${moduleCount}\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        role=\"img\"\n        aria-label=\"QR code: ${this.value}\">\n        ${this.background !== 'transparent'\n          ? svg`<rect width=${moduleCount} height=${moduleCount} fill=${this.background} />`\n          : nothing}\n        ${rects}\n      </svg>\n    `;\n  }\n}\n"],
+  "mappings": "6NAgBO,IAAMA,EAAN,cAAuBC,CAAe,CAAtC,kCAIO,WAAQ,GAGQ,UAAO,IAGvB,gBAAa,eAGb,gBAAa,cAGoB,qBAAwC,IAGzD,YAAS,EAErC,QAAS,CACP,GAAI,CAAC,KAAK,MACR,OAAOC,0DAA6D,KAAK,IAAI,aAAa,KAAK,IAAI,qBAGrG,IAAIC,EACJ,GAAI,CACFA,EAASC,EAAW,KAAK,MAAO,KAAK,eAAe,CACtD,MAAQ,CACN,OAAOF,0DAA6D,KAAK,IAAI,aAAa,KAAK,IAAI,iBACrG,CAEA,GAAI,CAACC,EAAO,OACV,OAAOD,0DAA6D,KAAK,IAAI,aAAa,KAAK,IAAI,qBAGrG,IAAMG,EAAcF,EAAO,OAErBG,EAAQ,CAAC,EACf,QAASC,EAAI,EAAGA,EAAIF,EAAaE,IAC/B,QAASC,EAAI,EAAGA,EAAIH,EAAaG,IAC3BL,EAAOI,CAAC,EAAEC,CAAC,GACbF,EAAM,KACJ,KAAK,OAAS,EACVG,YAAcD,CAAC,MAAMD,CAAC,8BAA8B,KAAK,UAAU,OAAO,KAAK,MAAM,OAAO,KAAK,MAAM,MACvGE,YAAcD,CAAC,MAAMD,CAAC,8BAA8B,KAAK,UAAU,KACzE,EAKN,OAAOL;AAAA;AAAA,gBAEK,KAAK,IAAI,WAAW,KAAK,IAAI;AAAA,uBACtBG,CAAW,IAAIA,CAAW;AAAA;AAAA;AAAA,+BAGlB,KAAK,KAAK;AAAA,UAC/B,KAAK,aAAe,cAClBI,gBAAkBJ,CAAW,WAAWA,CAAW,SAAS,KAAK,UAAU,MAC3EK,CAAO;AAAA,UACTJ,CAAK;AAAA;AAAA,KAGb,CACF,EAlEaN,EACJ,OAASW,EAGJC,EAAA,CAAXC,EAAS,GAJCb,EAIC,qBAGgBY,EAAA,CAA3BC,EAAS,CAAE,KAAM,MAAO,CAAC,GAPfb,EAOiB,oBAGhBY,EAAA,CAAXC,EAAS,GAVCb,EAUC,0BAGAY,EAAA,CAAXC,EAAS,GAbCb,EAaC,0BAGiCY,EAAA,CAA5CC,EAAS,CAAE,UAAW,kBAAmB,CAAC,GAhBhCb,EAgBkC,+BAGjBY,EAAA,CAA3BC,EAAS,CAAE,KAAM,MAAO,CAAC,GAnBfb,EAmBiB",
+  "names": ["MzQrCode", "ManzanoElement", "b", "matrix", "generateQR", "moduleCount", "rects", "y", "x", "w", "A", "qr_code_styles_default", "__decorateClass", "n"]
+}

package/cdn/chunks/chunk.MXNKCUVG.js

@@ -0,0 +1,220 @@
+import{a as o}from"./chunk.22OS67BO.js";import{a as r}from"./chunk.TO7F5R6A.js";var a=[o,r`
+    :host {
+      display: inline-block;
+      font-family: var(--mz-font-sans);
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .color-picker {
+      position: relative;
+    }
+
+    /* Trigger */
+    .color-picker__trigger {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.25rem;
+      height: 2.25rem;
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-md, 0.5rem);
+      background: var(--mz-color-surface, #fff);
+      cursor: pointer;
+      padding: 0.25rem;
+      transition: border-color 0.15s;
+    }
+
+    .color-picker__trigger:hover {
+      border-color: var(--mz-color-text-disabled);
+    }
+
+    .color-picker__trigger:focus-visible {
+      outline: 2px solid var(--mz-color-primary);
+      outline-offset: 2px;
+    }
+
+    :host([size='small']) .color-picker__trigger {
+      width: 1.75rem;
+      height: 1.75rem;
+    }
+
+    :host([size='large']) .color-picker__trigger {
+      width: 2.75rem;
+      height: 2.75rem;
+    }
+
+    .color-picker__trigger-swatch {
+      width: 100%;
+      height: 100%;
+      border-radius: calc(var(--mz-radius-md, 0.5rem) - 4px);
+      background: var(--_swatch-color);
+    }
+
+    /* Panel */
+    .color-picker__panel {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: 1000;
+      background: var(--mz-color-surface, #fff);
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-lg, 0.75rem);
+      box-shadow: var(--mz-shadow-lg, 0 10px 30px rgb(28 25 21 / 0.12));
+      padding: 0.75rem;
+      width: 14rem;
+    }
+
+    :host([inline]) .color-picker__panel {
+      position: static;
+      box-shadow: none;
+      border: 1px solid var(--mz-color-border);
+    }
+
+    /* Spectrum */
+    .color-picker__spectrum {
+      position: relative;
+      width: 100%;
+      height: 9rem;
+      border-radius: var(--mz-radius-md, 0.5rem);
+      cursor: crosshair;
+      overflow: hidden;
+      touch-action: none;
+      user-select: none;
+    }
+
+    .color-picker__spectrum-white {
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(to right, #fff, transparent);
+    }
+
+    .color-picker__spectrum-black {
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(to top, #000, transparent);
+    }
+
+    .color-picker__spectrum-handle {
+      position: absolute;
+      width: 12px;
+      height: 12px;
+      border: 2px solid #fff;
+      border-radius: 50%;
+      box-shadow: 0 0 2px rgb(0 0 0 / 0.4);
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+
+    /* Sliders */
+    .color-picker__sliders {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin-top: 0.5rem;
+    }
+
+    .color-picker__hue,
+    .color-picker__alpha {
+      position: relative;
+      height: 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      touch-action: none;
+      user-select: none;
+    }
+
+    .color-picker__hue {
+      background: linear-gradient(
+        to right,
+        hsl(0, 100%, 50%),
+        hsl(60, 100%, 50%),
+        hsl(120, 100%, 50%),
+        hsl(180, 100%, 50%),
+        hsl(240, 100%, 50%),
+        hsl(300, 100%, 50%),
+        hsl(360, 100%, 50%)
+      );
+    }
+
+    .color-picker__alpha {
+      background-image: var(--_alpha-gradient),
+        repeating-conic-gradient(
+            var(--mz-color-border) 0% 25%,
+            transparent 0% 50%
+          )
+          0 0 / 8px 8px;
+    }
+
+    .color-picker__hue-handle,
+    .color-picker__alpha-handle {
+      position: absolute;
+      top: 50%;
+      width: 14px;
+      height: 14px;
+      border: 2px solid #fff;
+      border-radius: 50%;
+      box-shadow: 0 0 3px rgb(0 0 0 / 0.3);
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+    }
+
+    /* Input */
+    .color-picker__input-row {
+      margin-top: 0.5rem;
+    }
+
+    .color-picker__input {
+      width: 100%;
+      box-sizing: border-box;
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-md, 0.5rem);
+      padding: 0.25rem 0.5rem;
+      font-family: var(--mz-font-mono, monospace);
+      font-size: var(--mz-font-size-sm, 0.875rem);
+      color: var(--mz-color-text, #1a1a1a);
+      background: var(--mz-color-surface, #fff);
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    .color-picker__input:focus {
+      border-color: var(--mz-color-primary);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 15%, transparent);
+    }
+
+    /* Swatches */
+    .color-picker__swatches {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.25rem;
+      margin-top: 0.5rem;
+      padding-top: 0.5rem;
+      border-top: 1px solid var(--mz-color-border);
+    }
+
+    .color-picker__swatch-btn {
+      width: 1.25rem;
+      height: 1.25rem;
+      border: 1px solid var(--mz-color-border);
+      border-radius: var(--mz-radius-sm, 0.25rem);
+      background: var(--_swatch-color);
+      cursor: pointer;
+      padding: 0;
+      transition: transform 0.1s, box-shadow 0.1s;
+    }
+
+    .color-picker__swatch-btn:hover {
+      transform: scale(1.15);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);
+    }
+
+    .color-picker__swatch-btn:focus-visible {
+      outline: 2px solid var(--mz-color-primary);
+      outline-offset: 1px;
+    }
+  `];export{a};
+//# sourceMappingURL=chunk.MXNKCUVG.js.map

package/cdn/chunks/chunk.MXNKCUVG.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/color-picker/color-picker.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: inline-block;\n      font-family: var(--mz-font-sans);\n    }\n\n    :host([disabled]) {\n      opacity: 0.5;\n      pointer-events: none;\n    }\n\n    .color-picker {\n      position: relative;\n    }\n\n    /* Trigger */\n    .color-picker__trigger {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 2.25rem;\n      height: 2.25rem;\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-md, 0.5rem);\n      background: var(--mz-color-surface, #fff);\n      cursor: pointer;\n      padding: 0.25rem;\n      transition: border-color 0.15s;\n    }\n\n    .color-picker__trigger:hover {\n      border-color: var(--mz-color-text-disabled);\n    }\n\n    .color-picker__trigger:focus-visible {\n      outline: 2px solid var(--mz-color-primary);\n      outline-offset: 2px;\n    }\n\n    :host([size='small']) .color-picker__trigger {\n      width: 1.75rem;\n      height: 1.75rem;\n    }\n\n    :host([size='large']) .color-picker__trigger {\n      width: 2.75rem;\n      height: 2.75rem;\n    }\n\n    .color-picker__trigger-swatch {\n      width: 100%;\n      height: 100%;\n      border-radius: calc(var(--mz-radius-md, 0.5rem) - 4px);\n      background: var(--_swatch-color);\n    }\n\n    /* Panel */\n    .color-picker__panel {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 0;\n      z-index: 1000;\n      background: var(--mz-color-surface, #fff);\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-lg, 0.75rem);\n      box-shadow: var(--mz-shadow-lg, 0 10px 30px rgb(28 25 21 / 0.12));\n      padding: 0.75rem;\n      width: 14rem;\n    }\n\n    :host([inline]) .color-picker__panel {\n      position: static;\n      box-shadow: none;\n      border: 1px solid var(--mz-color-border);\n    }\n\n    /* Spectrum */\n    .color-picker__spectrum {\n      position: relative;\n      width: 100%;\n      height: 9rem;\n      border-radius: var(--mz-radius-md, 0.5rem);\n      cursor: crosshair;\n      overflow: hidden;\n      touch-action: none;\n      user-select: none;\n    }\n\n    .color-picker__spectrum-white {\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(to right, #fff, transparent);\n    }\n\n    .color-picker__spectrum-black {\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(to top, #000, transparent);\n    }\n\n    .color-picker__spectrum-handle {\n      position: absolute;\n      width: 12px;\n      height: 12px;\n      border: 2px solid #fff;\n      border-radius: 50%;\n      box-shadow: 0 0 2px rgb(0 0 0 / 0.4);\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n    }\n\n    /* Sliders */\n    .color-picker__sliders {\n      display: flex;\n      flex-direction: column;\n      gap: 0.5rem;\n      margin-top: 0.5rem;\n    }\n\n    .color-picker__hue,\n    .color-picker__alpha {\n      position: relative;\n      height: 12px;\n      border-radius: 6px;\n      cursor: pointer;\n      touch-action: none;\n      user-select: none;\n    }\n\n    .color-picker__hue {\n      background: linear-gradient(\n        to right,\n        hsl(0, 100%, 50%),\n        hsl(60, 100%, 50%),\n        hsl(120, 100%, 50%),\n        hsl(180, 100%, 50%),\n        hsl(240, 100%, 50%),\n        hsl(300, 100%, 50%),\n        hsl(360, 100%, 50%)\n      );\n    }\n\n    .color-picker__alpha {\n      background-image: var(--_alpha-gradient),\n        repeating-conic-gradient(\n            var(--mz-color-border) 0% 25%,\n            transparent 0% 50%\n          )\n          0 0 / 8px 8px;\n    }\n\n    .color-picker__hue-handle,\n    .color-picker__alpha-handle {\n      position: absolute;\n      top: 50%;\n      width: 14px;\n      height: 14px;\n      border: 2px solid #fff;\n      border-radius: 50%;\n      box-shadow: 0 0 3px rgb(0 0 0 / 0.3);\n      transform: translate(-50%, -50%);\n      pointer-events: none;\n    }\n\n    /* Input */\n    .color-picker__input-row {\n      margin-top: 0.5rem;\n    }\n\n    .color-picker__input {\n      width: 100%;\n      box-sizing: border-box;\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-md, 0.5rem);\n      padding: 0.25rem 0.5rem;\n      font-family: var(--mz-font-mono, monospace);\n      font-size: var(--mz-font-size-sm, 0.875rem);\n      color: var(--mz-color-text, #1a1a1a);\n      background: var(--mz-color-surface, #fff);\n      outline: none;\n      transition: border-color 0.15s;\n    }\n\n    .color-picker__input:focus {\n      border-color: var(--mz-color-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mz-color-primary) 15%, transparent);\n    }\n\n    /* Swatches */\n    .color-picker__swatches {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 0.25rem;\n      margin-top: 0.5rem;\n      padding-top: 0.5rem;\n      border-top: 1px solid var(--mz-color-border);\n    }\n\n    .color-picker__swatch-btn {\n      width: 1.25rem;\n      height: 1.25rem;\n      border: 1px solid var(--mz-color-border);\n      border-radius: var(--mz-radius-sm, 0.25rem);\n      background: var(--_swatch-color);\n      cursor: pointer;\n      padding: 0;\n      transition: transform 0.1s, box-shadow 0.1s;\n    }\n\n    .color-picker__swatch-btn:hover {\n      transform: scale(1.15);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--mz-color-primary) 25%, transparent);\n    }\n\n    .color-picker__swatch-btn:focus-visible {\n      outline: 2px solid var(--mz-color-primary);\n      outline-offset: 1px;\n    }\n  `\n];\n"],
+  "mappings": "gFAGA,IAAOA,EAAQ,CACbC,EACAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2NF",
+  "names": ["color_picker_styles_default", "component_styles_default", "i"]
+}