@mhmo91/schmancy 0.2.118 → 0.2.120

package/dist/{radio-group-RChAvIUM.cjs.map → radio-group-DiRAAiCy.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"radio-group-RChAvIUM.cjs","sources":["../src/radio-group/radio-group.ts"],"sourcesContent":["import { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Subject } from 'rxjs'\nimport style from './radio-group.scss?inline'\nimport { TailwindElement } from '@mixins/index'\nimport { when } from 'lit/directives/when.js'\n\nexport type SchmancyRadioGroupOption = {\n\tlabel: string\n\tvalue: string\n}\nexport type SchmancyRadioGroupChangeEvent = CustomEvent<{\n\tvalue: string\n}>\n@customElement('schmancy-radio-group')\nexport class RadioGroup extends TailwindElement(style) {\n\t@property({ type: String }) label = ''\n\t@property({ type: String }) name = ''\n\t@property({ type: String }) selected = ''\n\t@property({ type: Array }) options: SchmancyRadioGroupOption[] = []\n\t@property({ type: Boolean }) required: boolean = false\n\tprivate selection$ = new Subject<SchmancyRadioGroupOption>()\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.selection$.subscribe(value => {\n\t\t\tthis.selected = value.value\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tdetail: value,\n\t\t\t\t\tbubbles: true,\n\t\t\t\t}),\n\t\t\t)\n\t\t})\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.selection$?.unsubscribe()\n\t}\n\tprivate handleSelection(value: SchmancyRadioGroupOption) {\n\t\tthis.selection$.next(value)\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"grid gap-4\">\n\t\t\t\t${when(this.label, () => html` <label class=\"text-base font-semibold text-gray-900\">${this.label}</label> `)}\n\t\t\t\t${this.options?.map(\n\t\t\t\t\toption => html`\n\t\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t.required=${this.required}\n\t\t\t\t\t\t\t\tid=${option.value}\n\t\t\t\t\t\t\t\tclass=\"h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600\"\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tname=${this.name}\n\t\t\t\t\t\t\t\t.value=${option.value}\n\t\t\t\t\t\t\t\t.checked=${option.value === this.selected}\n\t\t\t\t\t\t\t\t@change=${() => this.handleSelection(option)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<label for=${option.value} class=\"ml-3 block text-sm font-medium leading-6 text-gray-900\"\n\t\t\t\t\t\t\t\t>${option.value}</label\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-radio-group': RadioGroup\n\t}\n}\n"],"names":["RadioGroup","TailwindElement","super","arguments","this","label","name","selected","options","required","selection$","Subject","connectedCallback","subscribe","value","dispatchEvent","CustomEvent","detail","bubbles","disconnectedCallback","unsubscribe","next","html","when","map","option","handleSelection","__decorateClass","property","type","String","prototype","Array","Boolean","customElement"],"mappings":"wbAeaA,QAAAA,WAAN,cAAyBC,6DAAzB,aAAAC,CAAAA,MAAAA,GAAAC,SAC8BC,EAAAA,KAAAC,MAAA,GACDD,KAAAE,KAAA,GACIF,KAAAG,SAAA,GACZH,KAAAI,QAAsC,CAChBJ,EAAAA,KAAAK,SAAA,GACzCL,KAAAM,WAAa,IAAIC,SAAkC,CAE3D,mBAAAC,CACCV,MAAMU,kBAAAA,EACDR,KAAAM,WAAWG,UAAmBC,GAClCV,CAAAA,KAAKG,SAAWO,EAAMA,MACjBV,KAAAW,cACJ,IAAIC,YAAY,SAAU,CACzBC,OAAQH,EACRI,QAAAA,EAEF,CAAA,CAAA,CAAA,CAAA,CACA,CAGF,sBAAAC,OACCjB,MAAMiB,qBAAAA,GACNf,EAAAA,KAAKM,aAALN,MAAAA,EAAiBgB,aAAY,CAEtB,gBAAgBN,EAClBV,CAAAA,KAAAM,WAAWW,KAAKP,EAAK,CAG3B,QACQ,OAAA,OAAAQ,EAAAA;AAAAA;AAAAA,MAEHC,EAAAA,KAAKnB,KAAKC,MAAO,IAAMiB,EAAAA,6DAA6DlB,KAAKC,KAAAA,WAAAA,CAAAA;AAAAA,OACzFD,EAAAA,KAAKI,UAALJ,YAAAA,EAAcoB,IACLC,GAAAH,EAAAA;AAAAA;AAAAA;AAAAA,oBAGKlB,KAAKK,QAAAA;AAAAA,aACZgB,EAAOX,KAAAA;AAAAA;AAAAA;AAAAA,eAGLV,KAAKE,IAAAA;AAAAA,iBACHmB,EAAOX,KAAAA;AAAAA,mBACLW,EAAOX,QAAUV,KAAKG,QAAAA;AAAAA,kBACvB,IAAMH,KAAKsB,gBAAgBD,CAAAA,CAAAA;AAAAA;AAAAA,oBAEzBA,EAAOX,KAAAA;AAAAA,WAChBW,EAAOX,KAAAA;AAAAA;AAAAA;AAAAA;;GAIb,CAAA,EAlDwBa,EAAA,CAA3BC,WAAS,CAAEC,KAAMC,MADN9B,CAAAA,CAAAA,EAAAA,mBACgB+B,UAAA,QAAA,CAAA,EACAJ,EAAA,CAA3BC,WAAS,CAAEC,KAAMC,MAAAA,CAAAA,CAAAA,EAFN9B,mBAEgB+B,UAAA,OAAA,CAAA,EACAJ,EAAA,CAA3BC,WAAS,CAAEC,KAAMC,UAHN9B,mBAGgB+B,UAAA,WAAA,CACDJ,EAAAA,EAAA,CAA1BC,WAAS,CAAEC,KAAMG,KAJNhC,CAAAA,CAAAA,EAAAA,mBAIe+B,UAAA,UAAA,CAAA,EACEJ,EAAA,CAA5BC,WAAS,CAAEC,KAAMI,OAAAA,CAAAA,CAAAA,EALNjC,mBAKiB+B,UAAA,WAAA,CAAA,EALjB/B,QAANA,WAAA2B,EAAA,CADNO,EAAAA,cAAc,yBACFlC"}
+{"version":3,"file":"radio-group-DiRAAiCy.cjs","sources":["../src/radio-group/radio-group.ts"],"sourcesContent":["import { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Subject } from 'rxjs'\nimport style from './radio-group.scss?inline'\nimport { TailwindElement } from '@mixins/index'\nimport { when } from 'lit/directives/when.js'\n\nexport type SchmancyRadioGroupOption = {\n\tlabel: string\n\tvalue: string\n}\nexport type SchmancyRadioGroupChangeEvent = CustomEvent<{\n\tvalue: string\n}>\n@customElement('schmancy-radio-group')\nexport class RadioGroup extends TailwindElement(style) {\n\t@property({ type: String }) label = ''\n\t@property({ type: String }) name = ''\n\t@property({ type: String }) selected = ''\n\t@property({ type: Array }) options: SchmancyRadioGroupOption[] = []\n\t@property({ type: Boolean }) required: boolean = false\n\tprivate selection$ = new Subject<SchmancyRadioGroupOption>()\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.selection$.subscribe(value => {\n\t\t\tthis.selected = value.value\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent('change', {\n\t\t\t\t\tdetail: value,\n\t\t\t\t\tbubbles: true,\n\t\t\t\t}),\n\t\t\t)\n\t\t})\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\tthis.selection$?.unsubscribe()\n\t}\n\tprivate handleSelection(value: SchmancyRadioGroupOption) {\n\t\tthis.selection$.next(value)\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"grid gap-4\">\n\t\t\t\t${when(this.label, () => html` <label class=\"text-base font-semibold text-gray-900\">${this.label}</label> `)}\n\t\t\t\t${this.options?.map(\n\t\t\t\t\toption => html`\n\t\t\t\t\t\t<div class=\"flex items-center\">\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t.required=${this.required}\n\t\t\t\t\t\t\t\tid=${option.value}\n\t\t\t\t\t\t\t\tclass=\"h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600\"\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tname=${this.name}\n\t\t\t\t\t\t\t\t.value=${option.value}\n\t\t\t\t\t\t\t\t.checked=${option.value === this.selected}\n\t\t\t\t\t\t\t\t@change=${() => this.handleSelection(option)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<label for=${option.value} class=\"ml-3 block text-sm font-medium leading-6 text-gray-900\"\n\t\t\t\t\t\t\t\t>${option.value}</label\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</div>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-radio-group': RadioGroup\n\t}\n}\n"],"names":["RadioGroup","TailwindElement","super","arguments","this","label","name","selected","options","required","selection$","Subject","connectedCallback","subscribe","value","dispatchEvent","CustomEvent","detail","bubbles","disconnectedCallback","unsubscribe","next","html","when","map","option","handleSelection","__decorateClass","property","type","String","prototype","Array","Boolean","customElement"],"mappings":"wbAeaA,QAAAA,WAAN,cAAyBC,6DAAzB,aAAAC,CAAAA,MAAAA,GAAAC,SAC8BC,EAAAA,KAAAC,MAAA,GACDD,KAAAE,KAAA,GACIF,KAAAG,SAAA,GACZH,KAAAI,QAAsC,CAChBJ,EAAAA,KAAAK,SAAA,GACzCL,KAAAM,WAAa,IAAIC,SAAkC,CAE3D,mBAAAC,CACCV,MAAMU,kBAAAA,EACDR,KAAAM,WAAWG,UAAmBC,GAClCV,CAAAA,KAAKG,SAAWO,EAAMA,MACjBV,KAAAW,cACJ,IAAIC,YAAY,SAAU,CACzBC,OAAQH,EACRI,QAAAA,EAEF,CAAA,CAAA,CAAA,CAAA,CACA,CAGF,sBAAAC,OACCjB,MAAMiB,qBAAAA,GACNf,EAAAA,KAAKM,aAALN,MAAAA,EAAiBgB,aAAY,CAEtB,gBAAgBN,EAClBV,CAAAA,KAAAM,WAAWW,KAAKP,EAAK,CAG3B,QACQ,OAAA,OAAAQ,EAAAA;AAAAA;AAAAA,MAEHC,EAAAA,KAAKnB,KAAKC,MAAO,IAAMiB,EAAAA,6DAA6DlB,KAAKC,KAAAA,WAAAA,CAAAA;AAAAA,OACzFD,EAAAA,KAAKI,UAALJ,YAAAA,EAAcoB,IACLC,GAAAH,EAAAA;AAAAA;AAAAA;AAAAA,oBAGKlB,KAAKK,QAAAA;AAAAA,aACZgB,EAAOX,KAAAA;AAAAA;AAAAA;AAAAA,eAGLV,KAAKE,IAAAA;AAAAA,iBACHmB,EAAOX,KAAAA;AAAAA,mBACLW,EAAOX,QAAUV,KAAKG,QAAAA;AAAAA,kBACvB,IAAMH,KAAKsB,gBAAgBD,CAAAA,CAAAA;AAAAA;AAAAA,oBAEzBA,EAAOX,KAAAA;AAAAA,WAChBW,EAAOX,KAAAA;AAAAA;AAAAA;AAAAA;;GAIb,CAAA,EAlDwBa,EAAA,CAA3BC,WAAS,CAAEC,KAAMC,MADN9B,CAAAA,CAAAA,EAAAA,mBACgB+B,UAAA,QAAA,CAAA,EACAJ,EAAA,CAA3BC,WAAS,CAAEC,KAAMC,MAAAA,CAAAA,CAAAA,EAFN9B,mBAEgB+B,UAAA,OAAA,CAAA,EACAJ,EAAA,CAA3BC,WAAS,CAAEC,KAAMC,UAHN9B,mBAGgB+B,UAAA,WAAA,CACDJ,EAAAA,EAAA,CAA1BC,WAAS,CAAEC,KAAMG,KAJNhC,CAAAA,CAAAA,EAAAA,mBAIe+B,UAAA,UAAA,CAAA,EACEJ,EAAA,CAA5BC,WAAS,CAAEC,KAAMI,OAAAA,CAAAA,CAAAA,EALNjC,mBAKiB+B,UAAA,WAAA,CAAA,EALjB/B,QAANA,WAAA2B,EAAA,CADNO,EAAAA,cAAc,yBACFlC"}

package/dist/radio-group.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./radio-group-RChAvIUM.cjs");Object.defineProperty(exports,"RadioGroup",{enumerable:!0,get:()=>e.RadioGroup});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./radio-group-DiRAAiCy.cjs");Object.defineProperty(exports,"RadioGroup",{enumerable:!0,get:()=>e.RadioGroup});
 //# sourceMappingURL=radio-group.cjs.map

package/dist/radio-group.js

@@ -1,4 +1,4 @@
-import { R as a } from "./radio-group-CSKgiPxL.js";
+import { R as a } from "./radio-group-BNyzzO-F.js";
 export {
   a as RadioGroup
 };

package/dist/ripple-BumgqsDT.js

@@ -0,0 +1,78 @@
+import { nothing as d } from "lit";
+import { directive as s, Directive as h, PartType as r } from "lit/directive.js";
+import { Subject as a, fromEvent as m, debounceTime as f, startWith as g, takeUntil as u } from "rxjs";
+import { AsyncDirective as p } from "lit/async-directive.js";
+const x = s(class extends h {
+  constructor(e) {
+    super(e), this.config = {};
+  }
+  update(e, [t]) {
+    if (e.type !== r.ELEMENT) throw new Error("The `classMap` directive must be used in the `class` attribute");
+    const n = e.element;
+    this.config = t, this.config.bgColor && (n.style.backgroundColor = this.config.bgColor), this.config.color && (n.style.color = this.config.color);
+  }
+  render(e) {
+    return this.config = e, d;
+  }
+}), i = new a();
+m(window, "resize").pipe(f(10), g(window)).subscribe({ next: () => {
+  i.next(window);
+} });
+const v = s(class extends p {
+  constructor(e) {
+    super(e), this.disconnecting = new a(), i.pipe(u(this.disconnecting)).subscribe(() => {
+      this.element.style.setProperty("height", `${window.innerHeight}px`), setTimeout(() => {
+        this.element.style.setProperty("height", `${window.innerHeight}px`);
+      });
+    });
+  }
+  render() {
+  }
+  update(e) {
+    if (e.type !== r.ELEMENT) throw new Error("The `ripple` directive can only be used on elements");
+    this.element = e.element, i.next(window);
+  }
+  disconnected() {
+    this.disconnecting.next(!0);
+  }
+  reconnected() {
+  }
+}), T = s(class extends p {
+  render() {
+  }
+  addRippleEffect(e) {
+    const t = e.target, n = document.createElement("span"), o = Math.max(t.clientWidth, t.clientHeight), c = o / 2;
+    n.style.width = n.style.height = `${o}px`, n.style.left = e.clientX - t.getBoundingClientRect().left - c + "px", n.style.top = e.clientY - t.getBoundingClientRect().top - c + "px", n.classList.add("ripple");
+    const l = t.getElementsByClassName("ripple")[0];
+    l && l.remove(), t.appendChild(n);
+  }
+  update(e) {
+    if (e.type !== r.ELEMENT) throw new Error("The `ripple` directive can only be used on elements");
+    this.element = e.element;
+    const t = document.createElement("style");
+    t.append(`.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background: var(--schmancy-sys-color-surface-high);
+    transform: scale(0);
+    animation: ripple 600ms linear;
+}
+
+@keyframes ripple {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
+`), this.element.append(t), this.element.addEventListener("click", this.addRippleEffect);
+  }
+  disconnected() {
+    this.element && this.element.removeEventListener("click", this.addRippleEffect);
+  }
+});
+export {
+  x as c,
+  v as f,
+  T as r
+};
+//# sourceMappingURL=ripple-BumgqsDT.js.map

package/dist/ripple-BumgqsDT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-BumgqsDT.js","sources":["../src/directives/color.ts","../src/directives/height.ts","../src/directives/ripple.ts"],"sourcesContent":["// color.ts\nimport { Part, nothing } from 'lit'\nimport { Directive, PartInfo, PartType, directive } from 'lit/directive.js'\n\nexport type ColorConfig = {\n\tbgColor?: string\n\tcolor?: string\n}\n\nclass ColorDirective extends Directive {\n\tprivate config: ColorConfig\n\n\tconstructor(partInfo: PartInfo) {\n\t\tsuper(partInfo)\n\t\tthis.config = {}\n\t}\n\n\tupdate(part: Part, [config]: [ColorConfig]) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('The `classMap` directive must be used in the `class` attribute')\n\t\t}\n\t\tconst element = part.element as HTMLElement\n\t\tthis.config = config\n\t\tif (this.config.bgColor) {\n\t\t\telement.style.backgroundColor = this.config.bgColor\n\t\t}\n\n\t\tif (this.config.color) {\n\t\t\telement.style.color = this.config.color\n\t\t}\n\t}\n\n\trender(config: ColorConfig): unknown {\n\t\tthis.config = config\n\t\treturn nothing\n\t}\n}\n\nconst color = directive(ColorDirective)\n\nexport { color }\n","import { Subject, debounceTime, fromEvent, startWith, takeUntil } from 'rxjs'\n\nconst $SchmancyResize = new Subject<Window>()\nfromEvent<Event>(window, 'resize')\n\t.pipe(\n\t\tdebounceTime(10), // Adjust the debounce time as needed\n\t\tstartWith(window),\n\t)\n\t.subscribe({\n\t\tnext: () => {\n\t\t\t$SchmancyResize.next(window)\n\t\t},\n\t})\n\nimport { directive, PartInfo, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { LitElement } from 'lit'\n\nclass FullHeight extends AsyncDirective {\n\telement: HTMLElement & LitElement\n\tdisconnecting = new Subject<boolean>()\n\trender() {\n\t\treturn\n\t}\n\n\tconstructor(_partInfo: PartInfo) {\n\t\tsuper(_partInfo)\n\t\t$SchmancyResize.pipe(takeUntil(this.disconnecting)).subscribe(() => {\n\t\t\tthis.element.style.setProperty('height', `${window.innerHeight}px`)\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.element.style.setProperty('height', `${window.innerHeight}px`)\n\t\t\t})\n\t\t})\n\t}\n\n\tupdate(part) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('The `ripple` directive can only be used on elements')\n\t\t}\n\t\tthis.element = part.element\n\t\t$SchmancyResize.next(window)\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting.next(true)\n\t}\n\n\treconnected() {}\n}\n\nexport const fullHeight = directive(FullHeight)\n","import { directive, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\n\nconst rippleStyle = `.ripple {\n    position: absolute;\n    border-radius: 50%;\n    background: var(--schmancy-sys-color-surface-high);\n    transform: scale(0);\n    animation: ripple 600ms linear;\n}\n\n@keyframes ripple {\n    to {\n        transform: scale(4);\n        opacity: 0;\n    }\n}\n`\nclass RippleDirective extends AsyncDirective {\n\telement: HTMLElement\n\trender() {\n\t\treturn\n\t}\n\n\taddRippleEffect(event) {\n\t\tconst element = event.target\n\t\tconst circle = document.createElement('span')\n\t\tconst diameter = Math.max(element.clientWidth, element.clientHeight)\n\t\tconst radius = diameter / 2\n\t\tcircle.style.width = circle.style.height = `${diameter}px`\n\t\tcircle.style.left = `${event.clientX - element.getBoundingClientRect().left - radius}px`\n\t\tcircle.style.top = `${event.clientY - element.getBoundingClientRect().top - radius}px`\n\t\tcircle.classList.add('ripple')\n\n\t\tconst ripple = element.getElementsByClassName('ripple')[0]\n\t\tif (ripple) {\n\t\t\tripple.remove()\n\t\t}\n\n\t\telement.appendChild(circle)\n\t}\n\n\tupdate(part) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('The `ripple` directive can only be used on elements')\n\t\t}\n\n\t\tthis.element = part.element\n\t\tconst style = document.createElement('style')\n\t\tstyle.append(rippleStyle)\n\t\tthis.element.append(style)\n\t\tthis.element.addEventListener('click', this.addRippleEffect)\n\t}\n\n\tdisconnected() {\n\t\tif (this.element) {\n\t\t\tthis.element.removeEventListener('click', this.addRippleEffect)\n\t\t}\n\t}\n}\n\nexport const ripple = directive(RippleDirective)\n"],"names":["color","directive","Directive","partInfo","super","this","config","part","type","PartType","ELEMENT","Error","element","bgColor","style","backgroundColor","nothing","$SchmancyResize","Subject","fromEvent","window","pipe","debounceTime","startWith","subscribe","next","fullHeight","AsyncDirective","_partInfo","disconnecting","takeUntil","setProperty","innerHeight","setTimeout","reconnected","ripple","render","event","target","circle","document","createElement","diameter","Math","max","clientWidth","clientHeight","radius","width","height","left","clientX","getBoundingClientRect","top","clientY","classList","add","getElementsByClassName","remove","appendChild","append","addEventListener","addRippleEffect","removeEventListener"],"mappings":"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"}

package/dist/ripple-C2BHbhcS.cjs

@@ -0,0 +1,16 @@
+"use strict";const a=require("lit"),i=require("lit/directive.js"),s=require("rxjs"),p=require("lit/async-directive.js");class h extends i.Directive{constructor(e){super(e),this.config={}}update(e,[t]){if(e.type!==i.PartType.ELEMENT)throw new Error("The `classMap` directive must be used in the `class` attribute");const n=e.element;this.config=t,this.config.bgColor&&(n.style.backgroundColor=this.config.bgColor),this.config.color&&(n.style.color=this.config.color)}render(e){return this.config=e,a.nothing}}const u=i.directive(h),r=new s.Subject;s.fromEvent(window,"resize").pipe(s.debounceTime(10),s.startWith(window)).subscribe({next:()=>{r.next(window)}});class m extends p.AsyncDirective{constructor(e){super(e),this.disconnecting=new s.Subject,r.pipe(s.takeUntil(this.disconnecting)).subscribe(()=>{this.element.style.setProperty("height",`${window.innerHeight}px`),setTimeout(()=>{this.element.style.setProperty("height",`${window.innerHeight}px`)})})}render(){}update(e){if(e.type!==i.PartType.ELEMENT)throw new Error("The `ripple` directive can only be used on elements");this.element=e.element,r.next(window)}disconnected(){this.disconnecting.next(!0)}reconnected(){}}const g=i.directive(m);class y extends p.AsyncDirective{render(){}addRippleEffect(e){const t=e.target,n=document.createElement("span"),o=Math.max(t.clientWidth,t.clientHeight),l=o/2;n.style.width=n.style.height=`${o}px`,n.style.left=e.clientX-t.getBoundingClientRect().left-l+"px",n.style.top=e.clientY-t.getBoundingClientRect().top-l+"px",n.classList.add("ripple");const d=t.getElementsByClassName("ripple")[0];d&&d.remove(),t.appendChild(n)}update(e){if(e.type!==i.PartType.ELEMENT)throw new Error("The `ripple` directive can only be used on elements");this.element=e.element;const t=document.createElement("style");t.append(`.ripple {
+    position: absolute;
+    border-radius: 50%;
+    background: var(--schmancy-sys-color-surface-high);
+    transform: scale(0);
+    animation: ripple 600ms linear;
+}
+
+@keyframes ripple {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
+`),this.element.append(t),this.element.addEventListener("click",this.addRippleEffect)}disconnected(){this.element&&this.element.removeEventListener("click",this.addRippleEffect)}}const f=i.directive(y);exports.color=u,exports.fullHeight=g,exports.ripple=f;
+//# sourceMappingURL=ripple-C2BHbhcS.cjs.map

package/dist/ripple-C2BHbhcS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-C2BHbhcS.cjs","sources":["../src/directives/color.ts","../src/directives/height.ts","../src/directives/ripple.ts"],"sourcesContent":["// color.ts\nimport { Part, nothing } from 'lit'\nimport { Directive, PartInfo, PartType, directive } from 'lit/directive.js'\n\nexport type ColorConfig = {\n\tbgColor?: string\n\tcolor?: string\n}\n\nclass ColorDirective extends Directive {\n\tprivate config: ColorConfig\n\n\tconstructor(partInfo: PartInfo) {\n\t\tsuper(partInfo)\n\t\tthis.config = {}\n\t}\n\n\tupdate(part: Part, [config]: [ColorConfig]) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('The `classMap` directive must be used in the `class` attribute')\n\t\t}\n\t\tconst element = part.element as HTMLElement\n\t\tthis.config = config\n\t\tif (this.config.bgColor) {\n\t\t\telement.style.backgroundColor = this.config.bgColor\n\t\t}\n\n\t\tif (this.config.color) {\n\t\t\telement.style.color = this.config.color\n\t\t}\n\t}\n\n\trender(config: ColorConfig): unknown {\n\t\tthis.config = config\n\t\treturn nothing\n\t}\n}\n\nconst color = directive(ColorDirective)\n\nexport { color }\n","import { Subject, debounceTime, fromEvent, startWith, takeUntil } from 'rxjs'\n\nconst $SchmancyResize = new Subject<Window>()\nfromEvent<Event>(window, 'resize')\n\t.pipe(\n\t\tdebounceTime(10), // Adjust the debounce time as needed\n\t\tstartWith(window),\n\t)\n\t.subscribe({\n\t\tnext: () => {\n\t\t\t$SchmancyResize.next(window)\n\t\t},\n\t})\n\nimport { directive, PartInfo, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\nimport { LitElement } from 'lit'\n\nclass FullHeight extends AsyncDirective {\n\telement: HTMLElement & LitElement\n\tdisconnecting = new Subject<boolean>()\n\trender() {\n\t\treturn\n\t}\n\n\tconstructor(_partInfo: PartInfo) {\n\t\tsuper(_partInfo)\n\t\t$SchmancyResize.pipe(takeUntil(this.disconnecting)).subscribe(() => {\n\t\t\tthis.element.style.setProperty('height', `${window.innerHeight}px`)\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.element.style.setProperty('height', `${window.innerHeight}px`)\n\t\t\t})\n\t\t})\n\t}\n\n\tupdate(part) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('The `ripple` directive can only be used on elements')\n\t\t}\n\t\tthis.element = part.element\n\t\t$SchmancyResize.next(window)\n\t}\n\n\tdisconnected() {\n\t\tthis.disconnecting.next(true)\n\t}\n\n\treconnected() {}\n}\n\nexport const fullHeight = directive(FullHeight)\n","import { directive, PartType } from 'lit/directive.js'\nimport { AsyncDirective } from 'lit/async-directive.js'\n\nconst rippleStyle = `.ripple {\n    position: absolute;\n    border-radius: 50%;\n    background: var(--schmancy-sys-color-surface-high);\n    transform: scale(0);\n    animation: ripple 600ms linear;\n}\n\n@keyframes ripple {\n    to {\n        transform: scale(4);\n        opacity: 0;\n    }\n}\n`\nclass RippleDirective extends AsyncDirective {\n\telement: HTMLElement\n\trender() {\n\t\treturn\n\t}\n\n\taddRippleEffect(event) {\n\t\tconst element = event.target\n\t\tconst circle = document.createElement('span')\n\t\tconst diameter = Math.max(element.clientWidth, element.clientHeight)\n\t\tconst radius = diameter / 2\n\t\tcircle.style.width = circle.style.height = `${diameter}px`\n\t\tcircle.style.left = `${event.clientX - element.getBoundingClientRect().left - radius}px`\n\t\tcircle.style.top = `${event.clientY - element.getBoundingClientRect().top - radius}px`\n\t\tcircle.classList.add('ripple')\n\n\t\tconst ripple = element.getElementsByClassName('ripple')[0]\n\t\tif (ripple) {\n\t\t\tripple.remove()\n\t\t}\n\n\t\telement.appendChild(circle)\n\t}\n\n\tupdate(part) {\n\t\tif (part.type !== PartType.ELEMENT) {\n\t\t\tthrow new Error('The `ripple` directive can only be used on elements')\n\t\t}\n\n\t\tthis.element = part.element\n\t\tconst style = document.createElement('style')\n\t\tstyle.append(rippleStyle)\n\t\tthis.element.append(style)\n\t\tthis.element.addEventListener('click', this.addRippleEffect)\n\t}\n\n\tdisconnected() {\n\t\tif (this.element) {\n\t\t\tthis.element.removeEventListener('click', this.addRippleEffect)\n\t\t}\n\t}\n}\n\nexport const ripple = directive(RippleDirective)\n"],"names":["ColorDirective","Directive","partInfo","super","this","config","part","type","PartType","ELEMENT","Error","element","bgColor","style","backgroundColor","color","nothing","directive","$SchmancyResize","Subject","fromEvent","window","pipe","debounceTime","startWith","subscribe","next","FullHeight","AsyncDirective","_partInfo","disconnecting","takeUntil","setProperty","innerHeight","setTimeout","render","disconnected","reconnected","fullHeight","RippleDirective","event","target","circle","document","createElement","diameter","Math","max","clientWidth","clientHeight","radius","width","height","left","clientX","getBoundingClientRect","top","clientY","classList","add","ripple","getElementsByClassName","remove","appendChild","append","addEventListener","addRippleEffect","removeEventListener"],"mappings":"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"}

package/dist/rxjs-utils.js

@@ -1,8 +1,8 @@
-import { Observable as o } from "rxjs";
+import { Observable as n } from "rxjs";
 import "./index-CuY8m6ta.js";
-const a = (e, r = { attributes: !0, childList: !0, subtree: !0 }) => new o((s) => {
-  const t = new MutationObserver((n) => {
-    s.next(n);
+const a = (e, r = { attributes: !0, childList: !0, subtree: !0 }) => new n((s) => {
+  const t = new MutationObserver((o) => {
+    s.next(o);
   });
   return t.observe(e, r), () => {
     t.disconnect();

package/dist/schmancy-steps-container-3Odvvi2u.cjs

@@ -0,0 +1,64 @@
+"use strict";const m=require("./consume-Bb7_UzYd.cjs"),i=require("lit"),c=require("lit/decorators.js"),u=require("lit/directives/when.js"),S=require("./litElement.mixin-Ct-snNwC.cjs"),d=require("./provide-DSU87U5x.cjs"),b=require("rxjs");class y{constructor(){this._currentStep=new b.BehaviorSubject(1)}get currentStep$(){return this._currentStep.asObservable()}get currentStep(){return this._currentStep.value}setStep(e){this._currentStep.next(e)}}const h=d.n(Symbol("SchmancyStepsContext"));var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,o=(t,e,n,s)=>{for(var p,r=s>1?void 0:s?f(e,n):e,a=t.length-1;a>=0;a--)(p=t[a])&&(r=(s?p(e,n,r):p(r))||r);return s&&r&&g(e,n,r),r};exports.SchmancyStep=class extends S.$LitElement(i.css`
+	:host {
+		display: grid;
+		/* Base display is just grid, flex properties will be applied dynamically */
+	}
+`){constructor(){super(...arguments),this.position=1,this.title="",this.description="",this.completed=!1,this.lockBack=!1,this.currentStep=1}connectedCallback(){super.connectedCallback(),this.subscription=this.steps.currentStep$.subscribe(t=>{this.currentStep=t,this.updateFlexProperties()}),this.updateFlexProperties()}disconnectedCallback(){var t;(t=this.subscription)==null||t.unsubscribe(),super.disconnectedCallback()}updateFlexProperties(){const t=this.position===this.currentStep;this.style.flex=t?"1 1 auto":"0 0 auto"}get status(){return this.completed||this.position<this.steps.currentStep?"complete":this.position===this.steps.currentStep?"current":"upcoming"}_onStepClick(t){this.lockBack&&this.position<this.steps.currentStep||this.status!=="upcoming"&&this.steps.setStep(this.position)}render(){const t=this.position===this.currentStep,e=this.status==="complete",n={"bg-tertiary-default":e,"bg-gray-300":!e},s={"relative border-solid z-10 flex size-5 items-center justify-center rounded-full":!0,"bg-tertiary-default group-hover:bg-tertiary-onContainer":e,"border-2 border-tertiary-default bg-white":!e&&t,"border-2 border-gray-300 bg-white group-hover:border-gray-400":this.status==="upcoming"},p={"text-tertiary-default":t,"text-gray-500":!t},r=t||e?"cursor-pointer":"";return i.html`
+			<li class="relative">
+				<!-- Connector line -->
+				<div
+					class="absolute top-6 left-2.5 mt-0.5 -ml-px h-full w-0.5 ${this.classMap(n)}"
+					aria-hidden="true"
+				></div>
+
+				<!-- Step Button/Label -->
+				<button type="button" @click=${this._onStepClick} class="relative flex items-center group ${r}">
+					<span class="flex items-center h-10">
+						<span class=${this.classMap(s)}>
+							${e?i.html`
+										<svg class="text-white size-3" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+											<path
+												fill-rule="evenodd"
+												d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									`:i.html`
+										<span
+											class="size-2.5 rounded-full ${t?"bg-tertiary-default":"bg-transparent group-hover:bg-gray-300"}"
+										></span>
+									`}
+						</span>
+					</span>
+
+					<span class="flex flex-col items-start min-w-0 ml-4">
+						<schmancy-typography type="title">
+							<span class=${this.classMap(p)}>${this.title}</span>
+						</schmancy-typography>
+						${u.when(this.description,()=>i.html`
+								<schmancy-typography type="label">
+									<span class="text-gray-500">${this.description}</span>
+								</schmancy-typography>
+							`)}
+					</span>
+				</button>
+
+				<!-- Render step content if the step is active, regardless of completion -->
+				${u.when(t,()=>i.html`
+						<div class="pl-2 ml-2 block h-full pb-12">
+							<slot></slot>
+						</div>
+					`)}
+			</li>
+		`}},o([c.property({type:Number})],exports.SchmancyStep.prototype,"position",2),o([c.property({type:String})],exports.SchmancyStep.prototype,"title",2),o([c.property({type:String})],exports.SchmancyStep.prototype,"description",2),o([c.property({type:Boolean,reflect:!0})],exports.SchmancyStep.prototype,"completed",2),o([c.property({type:Boolean})],exports.SchmancyStep.prototype,"lockBack",2),o([m.c({context:h})],exports.SchmancyStep.prototype,"steps",2),o([c.state()],exports.SchmancyStep.prototype,"currentStep",2),exports.SchmancyStep=o([c.customElement("schmancy-step")],exports.SchmancyStep);var v=Object.defineProperty,x=Object.getOwnPropertyDescriptor,l=(t,e,n,s)=>{for(var p,r=s>1?void 0:s?x(e,n):e,a=t.length-1;a>=0;a--)(p=t[a])&&(r=(s?p(e,n,r):p(r))||r);return s&&r&&v(e,n,r),r};exports.SchmancyStepsContainer=class extends S.$LitElement(i.css`
+	:host {
+		display: block;
+	}
+`){constructor(){super(...arguments),this.controller=new y,this.stepsController=this.controller,this._currentStep=1}set currentStep(t){const e=this._currentStep;this._currentStep=t,this.controller.setStep(t),this.requestUpdate("currentStep",e)}get currentStep(){return this._currentStep}connectedCallback(){super.connectedCallback(),this.controller.setStep(this.currentStep)}render(){return i.html`
+			<nav class="flex h-full w-full" aria-label="Progress">
+				<ol class="flex flex-col flex-1" role="list">
+					<slot></slot>
+				</ol>
+			</nav>
+		`}},l([d.e({context:h})],exports.SchmancyStepsContainer.prototype,"stepsController",2),l([c.property({type:Number,reflect:!0})],exports.SchmancyStepsContainer.prototype,"currentStep",1),exports.SchmancyStepsContainer=l([c.customElement("schmancy-steps-container")],exports.SchmancyStepsContainer),exports.StepsController=y,exports.stepsContext=h;
+//# sourceMappingURL=schmancy-steps-container-3Odvvi2u.cjs.map

package/dist/schmancy-steps-container-3Odvvi2u.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"schmancy-steps-container-3Odvvi2u.cjs","sources":["../src/steps/steps.context.ts","../src/steps/schmancy-step.ts","../src/steps/schmancy-steps-container.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { BehaviorSubject } from 'rxjs'\n\nexport class StepsController {\n\tprivate _currentStep = new BehaviorSubject(1)\n\n\tget currentStep$() {\n\t\treturn this._currentStep.asObservable()\n\t}\n\n\tget currentStep() {\n\t\treturn this._currentStep.value\n\t}\n\n\tsetStep(step: number) {\n\t\tthis._currentStep.next(step)\n\t}\n}\n\n/**\n * The actual context object. We provide/consume this in the container and steps.\n */\nexport const stepsContext = createContext<StepsController>(Symbol('SchmancyStepsContext'))\n","import { consume } from '@lit/context'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { Subscription } from 'rxjs'\nimport { stepsContext, StepsController } from './steps.context'\nimport { $LitElement } from '@mixins/litElement.mixin'\n\n@customElement('schmancy-step')\nexport class SchmancyStep extends $LitElement(css`\n\t:host {\n\t\tdisplay: grid;\n\t\t/* Base display is just grid, flex properties will be applied dynamically */\n\t}\n`) {\n\t/**\n\t * The step's position (1-based). This is used to compare against\n\t * the container's current step to decide if it's \"complete\",\n\t * \"current\", or \"upcoming\".\n\t */\n\t@property({ type: Number }) position = 1\n\n\t@property({ type: String }) title = ''\n\t@property({ type: String }) description = ''\n\n\t// NEW: Allow a step to be explicitly marked as complete.\n\t@property({ type: Boolean, reflect: true }) completed = false\n\n\t/**\n\t * NEW: Lock API to disable users from going back.\n\t * When set to true, clicking on a previous (completed) step is ignored.\n\t */\n\t@property({ type: Boolean }) lockBack = false\n\n\t/**\n\t * Consume the shared StepsController from context.\n\t */\n\t@consume({ context: stepsContext })\n\tprivate steps!: StepsController\n\n\t/**\n\t * Local reactive copy of the container's current step number.\n\t */\n\t@state()\n\tprivate currentStep = 1\n\n\t/**\n\t * Keep a reference to our subscription so we can unsubscribe cleanly.\n\t */\n\tprivate subscription?: Subscription\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\t// Subscribe to updates from the container's StepsController.\n\t\tthis.subscription = this.steps.currentStep$.subscribe(step => {\n\t\t\tthis.currentStep = step\n\t\t\t// When the current step changes, update the flex properties\n\t\t\tthis.updateFlexProperties()\n\t\t})\n\t\t// Initial update of flex properties\n\t\tthis.updateFlexProperties()\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.subscription?.unsubscribe()\n\t\tsuper.disconnectedCallback()\n\t}\n\n\t/**\n\t * Update the host element's flex properties based on active state\n\t */\n\tprivate updateFlexProperties() {\n\t\tconst isActive = this.position === this.currentStep\n\n\t\tif (isActive) {\n\t\t\t// Apply flex-grow when active\n\t\t\tthis.style.flex = '1 1 auto'\n\t\t} else {\n\t\t\t// Make it shrink when not active\n\t\t\tthis.style.flex = '0 0 auto'\n\t\t}\n\t}\n\n\t/**\n\t * Compute visual status for styling purposes. Note that if a step is explicitly\n\t * marked as completed, it always appears as complete even if it's active.\n\t */\n\tget status(): 'complete' | 'current' | 'upcoming' {\n\t\tif (this.completed || this.position < this.steps.currentStep) return 'complete'\n\t\tif (this.position === this.steps.currentStep) return 'current'\n\t\treturn 'upcoming'\n\t}\n\n\t/**\n\t * Click handler to allow navigation between completed (or active) steps.\n\t * With lockBack enabled, clicking on a previous step is ignored.\n\t */\n\tprivate _onStepClick(_e: Event) {\n\t\t// If lockBack is enabled and the user attempts to go back, do nothing.\n\t\tif (this.lockBack && this.position < this.steps.currentStep) {\n\t\t\treturn\n\t\t}\n\t\tif (this.status !== 'upcoming') {\n\t\t\tthis.steps.setStep(this.position)\n\t\t}\n\t}\n\n\trender() {\n\t\t// Determine if the step is currently active.\n\t\tconst isActive = this.position === this.currentStep\n\n\t\t// Use computed status for visual styling.\n\t\tconst isComplete = this.status === 'complete'\n\t\tconst isUpcoming = this.status === 'upcoming'\n\n\t\t// Tailwind (or similar) classes for styling.\n\t\tconst connectorClasses = {\n\t\t\t'bg-tertiary-default': isComplete,\n\t\t\t'bg-gray-300': !isComplete,\n\t\t}\n\n\t\tconst iconContainerClasses = {\n\t\t\t'relative border-solid z-10 flex size-5 items-center justify-center rounded-full': true,\n\t\t\t'bg-tertiary-default group-hover:bg-tertiary-onContainer': isComplete,\n\t\t\t'border-2 border-tertiary-default bg-white': !isComplete && isActive,\n\t\t\t'border-2 border-gray-300 bg-white group-hover:border-gray-400': isUpcoming,\n\t\t}\n\n\t\tconst textClasses = {\n\t\t\t'text-tertiary-default': isActive,\n\t\t\t'text-gray-500': !isActive,\n\t\t}\n\n\t\t// If the step is clickable (active or complete), add a pointer cursor.\n\t\tconst clickableClass = isActive || isComplete ? 'cursor-pointer' : ''\n\n\t\treturn html`\n\t\t\t<li class=\"relative\">\n\t\t\t\t<!-- Connector line -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute top-6 left-2.5 mt-0.5 -ml-px h-full w-0.5 ${this.classMap(connectorClasses)}\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<!-- Step Button/Label -->\n\t\t\t\t<button type=\"button\" @click=${this._onStepClick} class=\"relative flex items-center group ${clickableClass}\">\n\t\t\t\t\t<span class=\"flex items-center h-10\">\n\t\t\t\t\t\t<span class=${this.classMap(iconContainerClasses)}>\n\t\t\t\t\t\t\t${isComplete\n\t\t\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t\t\t<svg class=\"text-white size-3\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z\"\n\t\t\t\t\t\t\t\t\t\t\t\tclip-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"size-2.5 rounded-full ${isActive\n\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-tertiary-default'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'bg-transparent group-hover:bg-gray-300'}\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\n\t\t\t\t\t<span class=\"flex flex-col items-start min-w-0 ml-4\">\n\t\t\t\t\t\t<schmancy-typography type=\"title\">\n\t\t\t\t\t\t\t<span class=${this.classMap(textClasses)}>${this.title}</span>\n\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\tthis.description,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<schmancy-typography type=\"label\">\n\t\t\t\t\t\t\t\t\t<span class=\"text-gray-500\">${this.description}</span>\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\n\t\t\t\t<!-- Render step content if the step is active, regardless of completion -->\n\t\t\t\t${when(\n\t\t\t\t\tisActive,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div class=\"pl-2 ml-2 block h-full pb-12\">\n\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</li>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-step': SchmancyStep\n\t}\n}\n","import { provide } from '@lit/context'\nimport { $LitElement } from '@mixins/litElement.mixin'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { StepsController, stepsContext } from './steps.context'\n\n@customElement('schmancy-steps-container')\nexport class SchmancyStepsContainer extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\tprivate controller = new StepsController()\n\n\t@provide({ context: stepsContext })\n\tstepsController = this.controller\n\n\t@property({ type: Number, reflect: true })\n\tset currentStep(value: number) {\n\t\tconst oldValue = this._currentStep\n\t\tthis._currentStep = value\n\t\tthis.controller.setStep(value)\n\t\tthis.requestUpdate('currentStep', oldValue)\n\t}\n\n\tget currentStep(): number {\n\t\treturn this._currentStep\n\t}\n\n\tprivate _currentStep = 1\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.controller.setStep(this.currentStep)\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<nav class=\"flex h-full w-full\" aria-label=\"Progress\">\n\t\t\t\t<ol class=\"flex flex-col flex-1\" role=\"list\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ol>\n\t\t\t</nav>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-steps-container': SchmancyStepsContainer\n\t}\n}\n"],"names":["StepsController","this","_currentStep","BehaviorSubject","asObservable","currentStep","value","step","next","stepsContext","createContext","Symbol","SchmancyStep","$LitElement","css","super","arguments","position","title","description","completed","lockBack","connectedCallback","subscription","steps","currentStep$","subscribe","updateFlexProperties","disconnectedCallback","unsubscribe","isActive","style","flex","_e","status","setStep","isComplete","connectorClasses","iconContainerClasses","textClasses","clickableClass","html","classMap","_onStepClick","when","__decorateClass","property","type","Number","prototype","String","Boolean","reflect","consume","context","state","customElement","SchmancyStepsContainer","constructor","controller","stepsController","oldValue","requestUpdate","render","provide"],"mappings":"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"}

package/dist/schmancy-steps-container-Ke5dskhS.js

@@ -0,0 +1,147 @@
+import { c as f } from "./consume-fRVATvdE.js";
+import { css as y, html as c } from "lit";
+import { property as l, state as S, customElement as b } from "lit/decorators.js";
+import { when as d } from "lit/directives/when.js";
+import { $ as m } from "./litElement.mixin-CtugwVVz.js";
+import { n as v, e as x } from "./provide-BLSgVvMJ.js";
+import { BehaviorSubject as k } from "rxjs";
+class C {
+  constructor() {
+    this._currentStep = new k(1);
+  }
+  get currentStep$() {
+    return this._currentStep.asObservable();
+  }
+  get currentStep() {
+    return this._currentStep.value;
+  }
+  setStep(e) {
+    this._currentStep.next(e);
+  }
+}
+const g = v(Symbol("SchmancyStepsContext"));
+var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (t, e, o, r) => {
+  for (var i, s = r > 1 ? void 0 : r ? w(e, o) : e, a = t.length - 1; a >= 0; a--) (i = t[a]) && (s = (r ? i(e, o, s) : i(s)) || s);
+  return r && s && $(e, o, s), s;
+};
+let p = class extends m(y`
+	:host {
+		display: grid;
+		/* Base display is just grid, flex properties will be applied dynamically */
+	}
+`) {
+  constructor() {
+    super(...arguments), this.position = 1, this.title = "", this.description = "", this.completed = !1, this.lockBack = !1, this.currentStep = 1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.subscription = this.steps.currentStep$.subscribe((t) => {
+      this.currentStep = t, this.updateFlexProperties();
+    }), this.updateFlexProperties();
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.subscription) == null || t.unsubscribe(), super.disconnectedCallback();
+  }
+  updateFlexProperties() {
+    const t = this.position === this.currentStep;
+    this.style.flex = t ? "1 1 auto" : "0 0 auto";
+  }
+  get status() {
+    return this.completed || this.position < this.steps.currentStep ? "complete" : this.position === this.steps.currentStep ? "current" : "upcoming";
+  }
+  _onStepClick(t) {
+    this.lockBack && this.position < this.steps.currentStep || this.status !== "upcoming" && this.steps.setStep(this.position);
+  }
+  render() {
+    const t = this.position === this.currentStep, e = this.status === "complete", o = { "bg-tertiary-default": e, "bg-gray-300": !e }, r = { "relative border-solid z-10 flex size-5 items-center justify-center rounded-full": !0, "bg-tertiary-default group-hover:bg-tertiary-onContainer": e, "border-2 border-tertiary-default bg-white": !e && t, "border-2 border-gray-300 bg-white group-hover:border-gray-400": this.status === "upcoming" }, i = { "text-tertiary-default": t, "text-gray-500": !t }, s = t || e ? "cursor-pointer" : "";
+    return c`
+			<li class="relative">
+				<!-- Connector line -->
+				<div
+					class="absolute top-6 left-2.5 mt-0.5 -ml-px h-full w-0.5 ${this.classMap(o)}"
+					aria-hidden="true"
+				></div>
+
+				<!-- Step Button/Label -->
+				<button type="button" @click=${this._onStepClick} class="relative flex items-center group ${s}">
+					<span class="flex items-center h-10">
+						<span class=${this.classMap(r)}>
+							${e ? c`
+										<svg class="text-white size-3" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+											<path
+												fill-rule="evenodd"
+												d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									` : c`
+										<span
+											class="size-2.5 rounded-full ${t ? "bg-tertiary-default" : "bg-transparent group-hover:bg-gray-300"}"
+										></span>
+									`}
+						</span>
+					</span>
+
+					<span class="flex flex-col items-start min-w-0 ml-4">
+						<schmancy-typography type="title">
+							<span class=${this.classMap(i)}>${this.title}</span>
+						</schmancy-typography>
+						${d(this.description, () => c`
+								<schmancy-typography type="label">
+									<span class="text-gray-500">${this.description}</span>
+								</schmancy-typography>
+							`)}
+					</span>
+				</button>
+
+				<!-- Render step content if the step is active, regardless of completion -->
+				${d(t, () => c`
+						<div class="pl-2 ml-2 block h-full pb-12">
+							<slot></slot>
+						</div>
+					`)}
+			</li>
+		`;
+  }
+};
+n([l({ type: Number })], p.prototype, "position", 2), n([l({ type: String })], p.prototype, "title", 2), n([l({ type: String })], p.prototype, "description", 2), n([l({ type: Boolean, reflect: !0 })], p.prototype, "completed", 2), n([l({ type: Boolean })], p.prototype, "lockBack", 2), n([f({ context: g })], p.prototype, "steps", 2), n([S()], p.prototype, "currentStep", 2), p = n([b("schmancy-step")], p);
+var _ = Object.defineProperty, B = Object.getOwnPropertyDescriptor, h = (t, e, o, r) => {
+  for (var i, s = r > 1 ? void 0 : r ? B(e, o) : e, a = t.length - 1; a >= 0; a--) (i = t[a]) && (s = (r ? i(e, o, s) : i(s)) || s);
+  return r && s && _(e, o, s), s;
+};
+let u = class extends m(y`
+	:host {
+		display: block;
+	}
+`) {
+  constructor() {
+    super(...arguments), this.controller = new C(), this.stepsController = this.controller, this._currentStep = 1;
+  }
+  set currentStep(t) {
+    const e = this._currentStep;
+    this._currentStep = t, this.controller.setStep(t), this.requestUpdate("currentStep", e);
+  }
+  get currentStep() {
+    return this._currentStep;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.controller.setStep(this.currentStep);
+  }
+  render() {
+    return c`
+			<nav class="flex h-full w-full" aria-label="Progress">
+				<ol class="flex flex-col flex-1" role="list">
+					<slot></slot>
+				</ol>
+			</nav>
+		`;
+  }
+};
+h([x({ context: g })], u.prototype, "stepsController", 2), h([l({ type: Number, reflect: !0 })], u.prototype, "currentStep", 1), u = h([b("schmancy-steps-container")], u);
+export {
+  p as S,
+  u as a,
+  C as b,
+  g as s
+};
+//# sourceMappingURL=schmancy-steps-container-Ke5dskhS.js.map

package/dist/schmancy-steps-container-Ke5dskhS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schmancy-steps-container-Ke5dskhS.js","sources":["../src/steps/steps.context.ts","../src/steps/schmancy-step.ts","../src/steps/schmancy-steps-container.ts"],"sourcesContent":["import { createContext } from '@lit/context'\nimport { BehaviorSubject } from 'rxjs'\n\nexport class StepsController {\n\tprivate _currentStep = new BehaviorSubject(1)\n\n\tget currentStep$() {\n\t\treturn this._currentStep.asObservable()\n\t}\n\n\tget currentStep() {\n\t\treturn this._currentStep.value\n\t}\n\n\tsetStep(step: number) {\n\t\tthis._currentStep.next(step)\n\t}\n}\n\n/**\n * The actual context object. We provide/consume this in the container and steps.\n */\nexport const stepsContext = createContext<StepsController>(Symbol('SchmancyStepsContext'))\n","import { consume } from '@lit/context'\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { Subscription } from 'rxjs'\nimport { stepsContext, StepsController } from './steps.context'\nimport { $LitElement } from '@mixins/litElement.mixin'\n\n@customElement('schmancy-step')\nexport class SchmancyStep extends $LitElement(css`\n\t:host {\n\t\tdisplay: grid;\n\t\t/* Base display is just grid, flex properties will be applied dynamically */\n\t}\n`) {\n\t/**\n\t * The step's position (1-based). This is used to compare against\n\t * the container's current step to decide if it's \"complete\",\n\t * \"current\", or \"upcoming\".\n\t */\n\t@property({ type: Number }) position = 1\n\n\t@property({ type: String }) title = ''\n\t@property({ type: String }) description = ''\n\n\t// NEW: Allow a step to be explicitly marked as complete.\n\t@property({ type: Boolean, reflect: true }) completed = false\n\n\t/**\n\t * NEW: Lock API to disable users from going back.\n\t * When set to true, clicking on a previous (completed) step is ignored.\n\t */\n\t@property({ type: Boolean }) lockBack = false\n\n\t/**\n\t * Consume the shared StepsController from context.\n\t */\n\t@consume({ context: stepsContext })\n\tprivate steps!: StepsController\n\n\t/**\n\t * Local reactive copy of the container's current step number.\n\t */\n\t@state()\n\tprivate currentStep = 1\n\n\t/**\n\t * Keep a reference to our subscription so we can unsubscribe cleanly.\n\t */\n\tprivate subscription?: Subscription\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\t// Subscribe to updates from the container's StepsController.\n\t\tthis.subscription = this.steps.currentStep$.subscribe(step => {\n\t\t\tthis.currentStep = step\n\t\t\t// When the current step changes, update the flex properties\n\t\t\tthis.updateFlexProperties()\n\t\t})\n\t\t// Initial update of flex properties\n\t\tthis.updateFlexProperties()\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.subscription?.unsubscribe()\n\t\tsuper.disconnectedCallback()\n\t}\n\n\t/**\n\t * Update the host element's flex properties based on active state\n\t */\n\tprivate updateFlexProperties() {\n\t\tconst isActive = this.position === this.currentStep\n\n\t\tif (isActive) {\n\t\t\t// Apply flex-grow when active\n\t\t\tthis.style.flex = '1 1 auto'\n\t\t} else {\n\t\t\t// Make it shrink when not active\n\t\t\tthis.style.flex = '0 0 auto'\n\t\t}\n\t}\n\n\t/**\n\t * Compute visual status for styling purposes. Note that if a step is explicitly\n\t * marked as completed, it always appears as complete even if it's active.\n\t */\n\tget status(): 'complete' | 'current' | 'upcoming' {\n\t\tif (this.completed || this.position < this.steps.currentStep) return 'complete'\n\t\tif (this.position === this.steps.currentStep) return 'current'\n\t\treturn 'upcoming'\n\t}\n\n\t/**\n\t * Click handler to allow navigation between completed (or active) steps.\n\t * With lockBack enabled, clicking on a previous step is ignored.\n\t */\n\tprivate _onStepClick(_e: Event) {\n\t\t// If lockBack is enabled and the user attempts to go back, do nothing.\n\t\tif (this.lockBack && this.position < this.steps.currentStep) {\n\t\t\treturn\n\t\t}\n\t\tif (this.status !== 'upcoming') {\n\t\t\tthis.steps.setStep(this.position)\n\t\t}\n\t}\n\n\trender() {\n\t\t// Determine if the step is currently active.\n\t\tconst isActive = this.position === this.currentStep\n\n\t\t// Use computed status for visual styling.\n\t\tconst isComplete = this.status === 'complete'\n\t\tconst isUpcoming = this.status === 'upcoming'\n\n\t\t// Tailwind (or similar) classes for styling.\n\t\tconst connectorClasses = {\n\t\t\t'bg-tertiary-default': isComplete,\n\t\t\t'bg-gray-300': !isComplete,\n\t\t}\n\n\t\tconst iconContainerClasses = {\n\t\t\t'relative border-solid z-10 flex size-5 items-center justify-center rounded-full': true,\n\t\t\t'bg-tertiary-default group-hover:bg-tertiary-onContainer': isComplete,\n\t\t\t'border-2 border-tertiary-default bg-white': !isComplete && isActive,\n\t\t\t'border-2 border-gray-300 bg-white group-hover:border-gray-400': isUpcoming,\n\t\t}\n\n\t\tconst textClasses = {\n\t\t\t'text-tertiary-default': isActive,\n\t\t\t'text-gray-500': !isActive,\n\t\t}\n\n\t\t// If the step is clickable (active or complete), add a pointer cursor.\n\t\tconst clickableClass = isActive || isComplete ? 'cursor-pointer' : ''\n\n\t\treturn html`\n\t\t\t<li class=\"relative\">\n\t\t\t\t<!-- Connector line -->\n\t\t\t\t<div\n\t\t\t\t\tclass=\"absolute top-6 left-2.5 mt-0.5 -ml-px h-full w-0.5 ${this.classMap(connectorClasses)}\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t></div>\n\n\t\t\t\t<!-- Step Button/Label -->\n\t\t\t\t<button type=\"button\" @click=${this._onStepClick} class=\"relative flex items-center group ${clickableClass}\">\n\t\t\t\t\t<span class=\"flex items-center h-10\">\n\t\t\t\t\t\t<span class=${this.classMap(iconContainerClasses)}>\n\t\t\t\t\t\t\t${isComplete\n\t\t\t\t\t\t\t\t? html`\n\t\t\t\t\t\t\t\t\t\t<svg class=\"text-white size-3\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\t\t\tfill-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t\td=\"M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z\"\n\t\t\t\t\t\t\t\t\t\t\t\tclip-rule=\"evenodd\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t\t`\n\t\t\t\t\t\t\t\t: html`\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclass=\"size-2.5 rounded-full ${isActive\n\t\t\t\t\t\t\t\t\t\t\t\t? 'bg-tertiary-default'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'bg-transparent group-hover:bg-gray-300'}\"\n\t\t\t\t\t\t\t\t\t\t></span>\n\t\t\t\t\t\t\t\t\t`}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\n\t\t\t\t\t<span class=\"flex flex-col items-start min-w-0 ml-4\">\n\t\t\t\t\t\t<schmancy-typography type=\"title\">\n\t\t\t\t\t\t\t<span class=${this.classMap(textClasses)}>${this.title}</span>\n\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t${when(\n\t\t\t\t\t\t\tthis.description,\n\t\t\t\t\t\t\t() => html`\n\t\t\t\t\t\t\t\t<schmancy-typography type=\"label\">\n\t\t\t\t\t\t\t\t\t<span class=\"text-gray-500\">${this.description}</span>\n\t\t\t\t\t\t\t\t</schmancy-typography>\n\t\t\t\t\t\t\t`,\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\n\t\t\t\t<!-- Render step content if the step is active, regardless of completion -->\n\t\t\t\t${when(\n\t\t\t\t\tisActive,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div class=\"pl-2 ml-2 block h-full pb-12\">\n\t\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t</li>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-step': SchmancyStep\n\t}\n}\n","import { provide } from '@lit/context'\nimport { $LitElement } from '@mixins/litElement.mixin'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { StepsController, stepsContext } from './steps.context'\n\n@customElement('schmancy-steps-container')\nexport class SchmancyStepsContainer extends $LitElement(css`\n\t:host {\n\t\tdisplay: block;\n\t}\n`) {\n\tprivate controller = new StepsController()\n\n\t@provide({ context: stepsContext })\n\tstepsController = this.controller\n\n\t@property({ type: Number, reflect: true })\n\tset currentStep(value: number) {\n\t\tconst oldValue = this._currentStep\n\t\tthis._currentStep = value\n\t\tthis.controller.setStep(value)\n\t\tthis.requestUpdate('currentStep', oldValue)\n\t}\n\n\tget currentStep(): number {\n\t\treturn this._currentStep\n\t}\n\n\tprivate _currentStep = 1\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.controller.setStep(this.currentStep)\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<nav class=\"flex h-full w-full\" aria-label=\"Progress\">\n\t\t\t\t<ol class=\"flex flex-col flex-1\" role=\"list\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ol>\n\t\t\t</nav>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-steps-container': SchmancyStepsContainer\n\t}\n}\n"],"names":["StepsController","this","_currentStep","BehaviorSubject","currentStep$","asObservable","currentStep","value","step","next","stepsContext","createContext","Symbol","SchmancyStep","$LitElement","css","super","arguments","position","title","description","completed","lockBack","connectedCallback","subscription","steps","subscribe","updateFlexProperties","disconnectedCallback","unsubscribe","isActive","style","flex","_e","status","setStep","render","isComplete","connectorClasses","iconContainerClasses","textClasses","clickableClass","html","classMap","_onStepClick","when","__decorateClass","property","type","Number","prototype","String","Boolean","reflect","consume","context","state","customElement","SchmancyStepsContainer","constructor","controller","stepsController","oldValue","requestUpdate","provide"],"mappings":"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"}