@mhmo91/schmancy 0.4.91 → 0.4.93

package/dist/{progress-y5p1ltND.js.map → progress-C4o_zWvg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"progress-y5p1ltND.js","sources":["../src/progress/progress.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\n@customElement('schmancy-progress')\nexport default class SchmancyProgress extends TailwindElement(css`\n  :host {\n    display: block;\n  }\n\n  @keyframes indeterminate {\n    0% {\n      left: -30%;\n    }\n    100% {\n      left: 100%;\n    }\n  }\n\n  .indeterminate-animation {\n    animation: indeterminate 1.5s infinite ease-in-out;\n  }\n`) {\n  @property({ type: Number, reflect: true })\n  value = 0\n\n  @property({ type: Number, reflect: true })\n  max = 100\n\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false\n\n  @property({ type: String, reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md'\n\n  @property({ type: String, reflect: true })\n  color: 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' = 'primary'\n\n  @property({ type: Boolean, reflect: true })\n  glass = false\n\n  private get percentage(): number {\n    if (this.indeterminate) return 0\n    return Math.min(100, Math.max(0, (this.value / this.max) * 100))\n  }\n\n  protected render() {\n    const containerClasses = {\n      'w-full': true,\n      'relative': true,\n      'overflow-hidden': true,\n      'rounded-full': true,\n      'h-0.5': this.size === 'sm',\n      'h-1': this.size === 'md',\n      'h-2': this.size === 'lg',\n      // Glass effect background\n      'backdrop-blur-xl': this.glass,\n      'backdrop-saturate-150': this.glass,\n      'bg-surface-container/20': this.glass && !this.indeterminate,\n      'bg-surface-container': !this.glass,\n      'shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.1)]': this.glass,\n      'border': this.glass,\n      'border-outline/20': this.glass\n    }\n\n    const barClasses = {\n      'h-full': true,\n      'rounded-full': true,\n      'transition-all': true,\n      'duration-300': true,\n      'ease-in-out': true,\n      'relative': true,\n      'bg-primary-default': this.color === 'primary' && !this.glass,\n      'bg-secondary-default': this.color === 'secondary' && !this.glass,\n      'bg-tertiary-default': this.color === 'tertiary' && !this.glass,\n      'bg-error-default': this.color === 'error' && !this.glass,\n      'bg-success-default': this.color === 'success' && !this.glass,\n      'w-[30%]': this.indeterminate,\n      'absolute': this.indeterminate,\n      'indeterminate-animation': this.indeterminate\n    }\n\n    const barStyles = this.indeterminate \n      ? {} \n      : { width: `${this.percentage}%` }\n\n    // Glass effect bar classes\n    const glassBarClasses = {\n      'backdrop-blur-sm': this.glass,\n      'shadow-[0_0_20px_rgba(0,0,0,0.1)]': this.glass,\n      // Use semi-transparent background colors for glass effect\n      'bg-primary-default/70': this.glass && this.color === 'primary',\n      'bg-secondary-default/70': this.glass && this.color === 'secondary',\n      'bg-tertiary-default/70': this.glass && this.color === 'tertiary',\n      'bg-error-default/70': this.glass && this.color === 'error',\n      'bg-success-default/70': this.glass && this.color === 'success',\n    }\n\n    return html`\n      <div class=\"${classMap(containerClasses)}\">\n        <div \n          class=\"${classMap({...barClasses, ...glassBarClasses})}\"\n          style=\"${styleMap(barStyles)}\"\n          role=\"progressbar\"\n          aria-valuenow=\"${this.value}\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"${this.max}\"\n        >\n          ${this.glass ? html`\n            <!-- Glass shine effect -->\n            <div class=\"absolute inset-0 bg-gradient-to-b from-surface-on/20 to-transparent rounded-full\"></div>\n          ` : ''}\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'schmancy-progress': SchmancyProgress\n  }\n}"],"names":["SchmancyProgress","TailwindElement","css","constructor","super","arguments","this","value","max","indeterminate","size","color","glass","percentage","Math","min","render","containerClasses","relative","border","barClasses","absolute","barStyles","width","glassBarClasses","html","classMap","styleMap","__decorateClass","property","type","Number","reflect","prototype","Boolean","String","customElement"],"mappings":"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"}
+{"version":3,"file":"progress-C4o_zWvg.js","sources":["../src/progress/progress.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\n@customElement('schmancy-progress')\nexport default class SchmancyProgress extends TailwindElement(css`\n  :host {\n    display: block;\n  }\n\n  @keyframes indeterminate {\n    0% {\n      left: -30%;\n    }\n    100% {\n      left: 100%;\n    }\n  }\n\n  .indeterminate-animation {\n    animation: indeterminate 1.5s infinite ease-in-out;\n  }\n`) {\n  @property({ type: Number, reflect: true })\n  value = 0\n\n  @property({ type: Number, reflect: true })\n  max = 100\n\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false\n\n  @property({ type: String, reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md'\n\n  @property({ type: String, reflect: true })\n  color: 'primary' | 'secondary' | 'tertiary' | 'error' | 'success' = 'primary'\n\n  @property({ type: Boolean, reflect: true })\n  glass = false\n\n  private get percentage(): number {\n    if (this.indeterminate) return 0\n    return Math.min(100, Math.max(0, (this.value / this.max) * 100))\n  }\n\n  protected render() {\n    const containerClasses = {\n      'w-full': true,\n      'relative': true,\n      'overflow-hidden': true,\n      'rounded-full': true,\n      'h-0.5': this.size === 'sm',\n      'h-1': this.size === 'md',\n      'h-2': this.size === 'lg',\n      // Glass effect background\n      'backdrop-blur-xl': this.glass,\n      'backdrop-saturate-150': this.glass,\n      'bg-surface-container/20': this.glass && !this.indeterminate,\n      'bg-surface-container': !this.glass,\n      'shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.1)]': this.glass,\n      'border': this.glass,\n      'border-outline/20': this.glass\n    }\n\n    const barClasses = {\n      'h-full': true,\n      'rounded-full': true,\n      'transition-all': true,\n      'duration-300': true,\n      'ease-in-out': true,\n      'relative': true,\n      'bg-primary-default': this.color === 'primary' && !this.glass,\n      'bg-secondary-default': this.color === 'secondary' && !this.glass,\n      'bg-tertiary-default': this.color === 'tertiary' && !this.glass,\n      'bg-error-default': this.color === 'error' && !this.glass,\n      'bg-success-default': this.color === 'success' && !this.glass,\n      'w-[30%]': this.indeterminate,\n      'absolute': this.indeterminate,\n      'indeterminate-animation': this.indeterminate\n    }\n\n    const barStyles = this.indeterminate \n      ? {} \n      : { width: `${this.percentage}%` }\n\n    // Glass effect bar classes\n    const glassBarClasses = {\n      'backdrop-blur-sm': this.glass,\n      'shadow-[0_0_20px_rgba(0,0,0,0.1)]': this.glass,\n      // Use semi-transparent background colors for glass effect\n      'bg-primary-default/70': this.glass && this.color === 'primary',\n      'bg-secondary-default/70': this.glass && this.color === 'secondary',\n      'bg-tertiary-default/70': this.glass && this.color === 'tertiary',\n      'bg-error-default/70': this.glass && this.color === 'error',\n      'bg-success-default/70': this.glass && this.color === 'success',\n    }\n\n    return html`\n      <div class=\"${classMap(containerClasses)}\">\n        <div \n          class=\"${classMap({...barClasses, ...glassBarClasses})}\"\n          style=\"${styleMap(barStyles)}\"\n          role=\"progressbar\"\n          aria-valuenow=\"${this.value}\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"${this.max}\"\n        >\n          ${this.glass ? html`\n            <!-- Glass shine effect -->\n            <div class=\"absolute inset-0 bg-gradient-to-b from-surface-on/20 to-transparent rounded-full\"></div>\n          ` : ''}\n        </div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'schmancy-progress': SchmancyProgress\n  }\n}"],"names":["SchmancyProgress","TailwindElement","css","constructor","super","arguments","this","value","max","indeterminate","size","color","glass","percentage","Math","min","render","containerClasses","relative","border","barClasses","absolute","barStyles","width","glassBarClasses","html","classMap","styleMap","__decorateClass","property","type","Number","reflect","prototype","Boolean","String","customElement"],"mappings":"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"}

package/dist/progress.cjs

@@ -1,2 +1,2 @@
-"use strict";require("./progress-B3-p0pjn.cjs");
+"use strict";require("./progress-BETtTl0y.cjs");
 //# sourceMappingURL=progress.cjs.map

package/dist/progress.js

@@ -1,2 +1,2 @@
-import "./progress-y5p1ltND.js";
+import "./progress-C4o_zWvg.js";
 //# sourceMappingURL=progress.js.map

package/dist/{radio-button-DINgMpZS.js → radio-button-DaSKbB-Z.js}

@@ -1,28 +1,28 @@
-import { html as h } from "lit";
-import { property as a, customElement as p } from "lit/decorators.js";
-import { Subject as v } from "rxjs";
+import { html as u } from "lit";
+import { property as a, customElement as m } from "lit/decorators.js";
+import { Subject as f, takeUntil as h, fromEvent as b } from "rxjs";
 import "lit/directives/class-map.js";
 import "lit/directives/style-map.js";
-import { F as m } from "./formField.mixin-as1q6J0T.js";
-import { T as b } from "./tailwind.mixin-CUBQFucF.js";
-import { when as y } from "lit/directives/when.js";
-var f = Object.defineProperty, k = Object.getOwnPropertyDescriptor, c = (e, t, l, s) => {
-  for (var r, i = s > 1 ? void 0 : s ? k(t, l) : t, o = e.length - 1; o >= 0; o--) (r = e[o]) && (i = (s ? r(t, l, i) : r(i)) || i);
-  return s && i && f(t, l, i), i;
+import { F as v } from "./formField.mixin-DtegNyKv.js";
+import { T as y } from "./tailwind.mixin-C13RR5x6.js";
+import { when as g } from "lit/directives/when.js";
+var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, c = (e, t, l, s) => {
+  for (var o, i = s > 1 ? void 0 : s ? $(t, l) : t, r = e.length - 1; r >= 0; r--) (o = e[r]) && (i = (s ? o(t, l, i) : o(i)) || i);
+  return s && i && k(t, l, i), i;
 };
-let n = class extends m(b(":host{display:inherit;position:inherit}")) {
+let n = class extends v(y(":host{display:inherit;position:inherit}")) {
   constructor() {
-    super(...arguments), this.label = "", this.name = "", this.value = "", this.options = [], this.required = !1, this.selection$ = new v();
+    super(...arguments), this.label = "", this.name = "", this.value = "", this.options = [], this.required = !1, this.selection$ = new f();
   }
   connectedCallback() {
-    super.connectedCallback(), this.selection$.subscribe((e) => {
+    super.connectedCallback(), this.selection$.pipe(h(this.disconnecting)).subscribe((e) => {
       this.value = e, this.emitChange({ value: e }), this.updateChildRadioButtons();
-    }), this.addEventListener("radio-button-click", (e) => {
+    }), b(this, "radio-button-click").pipe(h(this.disconnecting)).subscribe((e) => {
       this.selection$.next(e.detail.value);
     });
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.selection$?.unsubscribe();
+    super.disconnectedCallback(), this.selection$?.complete();
   }
   handleSelection(e) {
     this.selection$.next(e);
@@ -37,11 +37,11 @@ let n = class extends m(b(":host{display:inherit;position:inherit}")) {
   }
   render() {
     const e = this.childElementCount > 0;
-    return h`
+    return u`
 			<div class="grid gap-4">
-				${y(this.label, () => h` <label class="text-base font-semibold text-surface-on">${this.label}</label> `)}
+				${g(this.label, () => u` <label class="text-base font-semibold text-surface-on">${this.label}</label> `)}
 				
-				${e ? h`<slot></slot>` : this.options?.map((t) => h`
+				${e ? u`<slot></slot>` : this.options?.map((t) => u`
 						<div class="flex items-center">
 							<input
 								.required=${this.required}
@@ -62,20 +62,20 @@ let n = class extends m(b(":host{display:inherit;position:inherit}")) {
 		`;
   }
 };
-c([a({ type: String })], n.prototype, "label", 2), c([a({ type: String })], n.prototype, "name", 2), c([a({ type: String })], n.prototype, "value", 2), c([a({ type: Array })], n.prototype, "options", 2), c([a({ type: Boolean })], n.prototype, "required", 2), n = c([p("schmancy-radio-group")], n);
-var g = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, u = (e, t, l, s) => {
-  for (var r, i = s > 1 ? void 0 : s ? $(t, l) : t, o = e.length - 1; o >= 0; o--) (r = e[o]) && (i = (s ? r(t, l, i) : r(i)) || i);
-  return s && i && g(t, l, i), i;
+c([a({ type: String })], n.prototype, "label", 2), c([a({ type: String })], n.prototype, "name", 2), c([a({ type: String })], n.prototype, "value", 2), c([a({ type: Array })], n.prototype, "options", 2), c([a({ type: Boolean })], n.prototype, "required", 2), n = c([m("schmancy-radio-group")], n);
+var C = Object.defineProperty, x = Object.getOwnPropertyDescriptor, p = (e, t, l, s) => {
+  for (var o, i = s > 1 ? void 0 : s ? x(t, l) : t, r = e.length - 1; r >= 0; r--) (o = e[r]) && (i = (s ? o(t, l, i) : o(i)) || i);
+  return s && i && C(t, l, i), i;
 };
-let d = class extends m(b()) {
+let d = class extends v(y()) {
   constructor() {
     super(...arguments), this.value = "", this.checked = !1, this.disabled = !1, this.name = "";
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("click", this.handleClick);
+    super.connectedCallback(), b(this, "click").pipe(h(this.disconnecting)).subscribe(this.handleClick);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("click", this.handleClick);
+    super.disconnectedCallback();
   }
   handleClick() {
     if (!this.disabled)
@@ -85,7 +85,7 @@ let d = class extends m(b()) {
       } else this.checked = !0, this.emitChange({ value: this.value });
   }
   render() {
-    return h`
+    return u`
 			<label class="relative flex items-start cursor-pointer">
 				<div class="flex items-center h-6">
 					<input
@@ -106,9 +106,9 @@ let d = class extends m(b()) {
 		`;
   }
 };
-u([a({ type: String })], d.prototype, "value", 2), u([a({ type: Boolean, reflect: !0 })], d.prototype, "checked", 2), u([a({ type: Boolean })], d.prototype, "disabled", 2), u([a({ type: String })], d.prototype, "name", 2), d = u([p("schmancy-radio-button")], d);
+p([a({ type: String })], d.prototype, "value", 2), p([a({ type: Boolean, reflect: !0 })], d.prototype, "checked", 2), p([a({ type: Boolean })], d.prototype, "disabled", 2), p([a({ type: String })], d.prototype, "name", 2), d = p([m("schmancy-radio-button")], d);
 export {
   n as R,
   d as a
 };
-//# sourceMappingURL=radio-button-DINgMpZS.js.map
+//# sourceMappingURL=radio-button-DaSKbB-Z.js.map

package/dist/radio-button-DaSKbB-Z.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button-DaSKbB-Z.js","sources":["../src/radio-group/radio-group.ts","../src/radio-group/radio-button.ts"],"sourcesContent":["import { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Subject, fromEvent, takeUntil } from 'rxjs'\nimport style from './radio-group.scss?inline'\nimport { TailwindElement } from '@mixins/index'\nimport { when } from 'lit/directives/when.js'\nimport { FormFieldMixin } from '../../mixins/formField.mixin'\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 FormFieldMixin(TailwindElement(style)) {\n\t@property({ type: String }) override label = ''\n\t@property({ type: String }) override name = ''\n\t@property({ type: String }) override value = ''\n\t@property({ type: Array }) options: SchmancyRadioGroupOption[] = []\n\t@property({ type: Boolean }) override required: boolean = false\n\tprivate selection$ = new Subject<string>()\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.selection$.pipe(takeUntil(this.disconnecting)).subscribe(value => {\n\t\t\tthis.value = value\n\t\t\tthis.emitChange({ value })\n\t\t\t// Update all child radio buttons\n\t\t\tthis.updateChildRadioButtons()\n\t\t})\n\n\t\t// Listen for radio button clicks from children\n\t\tfromEvent<CustomEvent>(this, 'radio-button-click')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe((e: CustomEvent) => {\n\t\t\t\tthis.selection$.next(e.detail.value)\n\t\t\t})\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\t// Subscriptions are automatically cleaned up via takeUntil(this.disconnecting)\n\t\tthis.selection$?.complete()\n\t}\n\t\n\tprivate handleSelection(value: string) {\n\t\tthis.selection$.next(value)\n\t}\n\t\n\tprivate updateChildRadioButtons() {\n\t\t// Update child radio buttons checked state\n\t\tconst radioButtons = this.querySelectorAll('schmancy-radio-button')\n\t\tradioButtons.forEach(button => {\n\t\t\tconst buttonValue = button.getAttribute('value')\n\t\t\tif (buttonValue === this.value) {\n\t\t\t\tbutton.setAttribute('checked', '')\n\t\t\t} else {\n\t\t\t\tbutton.removeAttribute('checked')\n\t\t\t}\n\t\t})\n\t}\n\t\n\t// For backwards compatibility with direct option setting\n\tupdated(changedProperties: Map<string, any>) {\n\t\tsuper.updated(changedProperties)\n\t\tif (changedProperties.has('value')) {\n\t\t\tthis.updateChildRadioButtons()\n\t\t}\n\t}\n\n\trender() {\n\t\t// Check if we have any slotted radio buttons\n\t\tconst hasSlottedContent = this.childElementCount > 0\n\t\t\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-surface-on\">${this.label}</label> `)}\n\t\t\t\t\n\t\t\t\t${hasSlottedContent ? \n\t\t\t\t\thtml`<slot></slot>` :\n\t\t\t\t\tthis.options?.map(option => 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-outline text-primary-default focus:ring-primary-default\"\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.value}\n\t\t\t\t\t\t\t\t@change=${() => this.handleSelection(option.value)}\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-surface-on\">\n\t\t\t\t\t\t\t\t${option.label || option.value}\n\t\t\t\t\t\t\t</label>\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","import { TailwindElement } from '@mixins/index'\nimport { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { FormFieldMixin } from '../../mixins/formField.mixin'\nimport { fromEvent, takeUntil } from 'rxjs'\n\n@customElement('schmancy-radio-button')\nexport class RadioButton extends FormFieldMixin(TailwindElement()) {\n\t@property({ type: String }) override value = ''\n\t@property({ type: Boolean, reflect: true }) checked = false\n\t@property({ type: Boolean }) override disabled = false\n\t@property({ type: String }) override name = ''\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\t// Listen for click events\n\t\tfromEvent<MouseEvent>(this, 'click')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(this.handleClick)\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\t// Event listeners are automatically cleaned up via takeUntil(this.disconnecting)\n\t}\n\n\tprivate handleClick() {\n\t\tif (this.disabled) return\n\n\t\t// Find parent radio-group if exists\n\t\tconst radioGroup = this.closest('schmancy-radio-group')\n\t\tif (radioGroup) {\n\t\t\t// Let the radio-group handle the change\n\t\t\tconst event = new CustomEvent('radio-button-click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t\tthis.dispatchEvent(event)\n\t\t} else {\n\t\t\t// Standalone usage\n\t\t\tthis.checked = true\n\t\t\tthis.emitChange({ value: this.value })\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<label class=\"relative flex items-start cursor-pointer\">\n\t\t\t\t<div class=\"flex items-center h-6\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tclass=\"h-4 w-4 text-primary-default focus:ring-primary-container border-outline\"\n\t\t\t\t\t\t.value=${this.value}\n\t\t\t\t\t\t.checked=${this.checked}\n\t\t\t\t\t\t.disabled=${this.disabled}\n\t\t\t\t\t\t.name=${this.name}\n\t\t\t\t\t\t@change=${() => {}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-radio-button': RadioButton\n\t}\n}\n"],"names":["RadioGroup","FormFieldMixin","TailwindElement","constructor","super","arguments","this","label","name","value","options","required","selection$","Subject","connectedCallback","pipe","takeUntil","disconnecting","subscribe","emitChange","updateChildRadioButtons","fromEvent","e","next","detail","disconnectedCallback","complete","querySelectorAll","forEach","button","getAttribute","setAttribute","removeAttribute","changedProperties","updated","has","render","hasSlottedContent","childElementCount","html","when","map","option","handleSelection","__decorateClass","property","type","String","prototype","Array","Boolean","customElement","RadioButton","checked","disabled","handleClick","closest","event","CustomEvent","bubbles","composed","dispatchEvent","reflect"],"mappings":"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"}

package/dist/radio-button-h6y0tWJQ.cjs

@@ -0,0 +1,41 @@
+"use strict";const u=require("lit"),o=require("lit/decorators.js"),c=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const p=require("./formField.mixin-CSy0dZ7Q.cjs"),h=require("./tailwind.mixin-O9jmUJ7m.cjs"),b=require("lit/directives/when.js");var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(e,t,l,r)=>{for(var s,i=r>1?void 0:r?v(t,l):t,a=e.length-1;a>=0;a--)(s=e[a])&&(i=(r?s(t,l,i):s(i))||i);return r&&i&&m(t,l,i),i};exports.RadioGroup=class extends p.FormFieldMixin(h.TailwindElement(":host{display:inherit;position:inherit}")){constructor(){super(...arguments),this.label="",this.name="",this.value="",this.options=[],this.required=!1,this.selection$=new c.Subject}connectedCallback(){super.connectedCallback(),this.selection$.pipe(c.takeUntil(this.disconnecting)).subscribe(e=>{this.value=e,this.emitChange({value:e}),this.updateChildRadioButtons()}),c.fromEvent(this,"radio-button-click").pipe(c.takeUntil(this.disconnecting)).subscribe(e=>{this.selection$.next(e.detail.value)})}disconnectedCallback(){super.disconnectedCallback(),this.selection$?.complete()}handleSelection(e){this.selection$.next(e)}updateChildRadioButtons(){this.querySelectorAll("schmancy-radio-button").forEach(e=>{e.getAttribute("value")===this.value?e.setAttribute("checked",""):e.removeAttribute("checked")})}updated(e){super.updated(e),e.has("value")&&this.updateChildRadioButtons()}render(){const e=this.childElementCount>0;return u.html`
+			<div class="grid gap-4">
+				${b.when(this.label,()=>u.html` <label class="text-base font-semibold text-surface-on">${this.label}</label> `)}
+				
+				${e?u.html`<slot></slot>`:this.options?.map(t=>u.html`
+						<div class="flex items-center">
+							<input
+								.required=${this.required}
+								id=${t.value}
+								class="h-4 w-4 border-outline text-primary-default focus:ring-primary-default"
+								type="radio"
+								name=${this.name}
+								.value=${t.value}
+								.checked=${t.value===this.value}
+								@change=${()=>this.handleSelection(t.value)}
+							/>
+							<label for=${t.value} class="ml-3 block text-sm font-medium leading-6 text-surface-on">
+								${t.label||t.value}
+							</label>
+						</div>
+					`)}
+			</div>
+		`}},n([o.property({type:String})],exports.RadioGroup.prototype,"label",2),n([o.property({type:String})],exports.RadioGroup.prototype,"name",2),n([o.property({type:String})],exports.RadioGroup.prototype,"value",2),n([o.property({type:Array})],exports.RadioGroup.prototype,"options",2),n([o.property({type:Boolean})],exports.RadioGroup.prototype,"required",2),exports.RadioGroup=n([o.customElement("schmancy-radio-group")],exports.RadioGroup);var y=Object.defineProperty,g=Object.getOwnPropertyDescriptor,d=(e,t,l,r)=>{for(var s,i=r>1?void 0:r?g(t,l):t,a=e.length-1;a>=0;a--)(s=e[a])&&(i=(r?s(t,l,i):s(i))||i);return r&&i&&y(t,l,i),i};exports.RadioButton=class extends p.FormFieldMixin(h.TailwindElement()){constructor(){super(...arguments),this.value="",this.checked=!1,this.disabled=!1,this.name=""}connectedCallback(){super.connectedCallback(),c.fromEvent(this,"click").pipe(c.takeUntil(this.disconnecting)).subscribe(this.handleClick)}disconnectedCallback(){super.disconnectedCallback()}handleClick(){if(!this.disabled)if(this.closest("schmancy-radio-group")){const e=new CustomEvent("radio-button-click",{detail:{value:this.value},bubbles:!0,composed:!0});this.dispatchEvent(e)}else this.checked=!0,this.emitChange({value:this.value})}render(){return u.html`
+			<label class="relative flex items-start cursor-pointer">
+				<div class="flex items-center h-6">
+					<input
+						type="radio"
+						class="h-4 w-4 text-primary-default focus:ring-primary-container border-outline"
+						.value=${this.value}
+						.checked=${this.checked}
+						.disabled=${this.disabled}
+						.name=${this.name}
+						@change=${()=>{}}
+					/>
+				</div>
+				<div class="ml-3">
+					<slot name="label"></slot>
+				</div>
+			</label>
+		`}},d([o.property({type:String})],exports.RadioButton.prototype,"value",2),d([o.property({type:Boolean,reflect:!0})],exports.RadioButton.prototype,"checked",2),d([o.property({type:Boolean})],exports.RadioButton.prototype,"disabled",2),d([o.property({type:String})],exports.RadioButton.prototype,"name",2),exports.RadioButton=d([o.customElement("schmancy-radio-button")],exports.RadioButton);
+//# sourceMappingURL=radio-button-h6y0tWJQ.cjs.map

package/dist/radio-button-h6y0tWJQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button-h6y0tWJQ.cjs","sources":["../src/radio-group/radio-group.ts","../src/radio-group/radio-button.ts"],"sourcesContent":["import { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Subject, fromEvent, takeUntil } from 'rxjs'\nimport style from './radio-group.scss?inline'\nimport { TailwindElement } from '@mixins/index'\nimport { when } from 'lit/directives/when.js'\nimport { FormFieldMixin } from '../../mixins/formField.mixin'\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 FormFieldMixin(TailwindElement(style)) {\n\t@property({ type: String }) override label = ''\n\t@property({ type: String }) override name = ''\n\t@property({ type: String }) override value = ''\n\t@property({ type: Array }) options: SchmancyRadioGroupOption[] = []\n\t@property({ type: Boolean }) override required: boolean = false\n\tprivate selection$ = new Subject<string>()\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\tthis.selection$.pipe(takeUntil(this.disconnecting)).subscribe(value => {\n\t\t\tthis.value = value\n\t\t\tthis.emitChange({ value })\n\t\t\t// Update all child radio buttons\n\t\t\tthis.updateChildRadioButtons()\n\t\t})\n\n\t\t// Listen for radio button clicks from children\n\t\tfromEvent<CustomEvent>(this, 'radio-button-click')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe((e: CustomEvent) => {\n\t\t\t\tthis.selection$.next(e.detail.value)\n\t\t\t})\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\t// Subscriptions are automatically cleaned up via takeUntil(this.disconnecting)\n\t\tthis.selection$?.complete()\n\t}\n\t\n\tprivate handleSelection(value: string) {\n\t\tthis.selection$.next(value)\n\t}\n\t\n\tprivate updateChildRadioButtons() {\n\t\t// Update child radio buttons checked state\n\t\tconst radioButtons = this.querySelectorAll('schmancy-radio-button')\n\t\tradioButtons.forEach(button => {\n\t\t\tconst buttonValue = button.getAttribute('value')\n\t\t\tif (buttonValue === this.value) {\n\t\t\t\tbutton.setAttribute('checked', '')\n\t\t\t} else {\n\t\t\t\tbutton.removeAttribute('checked')\n\t\t\t}\n\t\t})\n\t}\n\t\n\t// For backwards compatibility with direct option setting\n\tupdated(changedProperties: Map<string, any>) {\n\t\tsuper.updated(changedProperties)\n\t\tif (changedProperties.has('value')) {\n\t\t\tthis.updateChildRadioButtons()\n\t\t}\n\t}\n\n\trender() {\n\t\t// Check if we have any slotted radio buttons\n\t\tconst hasSlottedContent = this.childElementCount > 0\n\t\t\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-surface-on\">${this.label}</label> `)}\n\t\t\t\t\n\t\t\t\t${hasSlottedContent ? \n\t\t\t\t\thtml`<slot></slot>` :\n\t\t\t\t\tthis.options?.map(option => 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-outline text-primary-default focus:ring-primary-default\"\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.value}\n\t\t\t\t\t\t\t\t@change=${() => this.handleSelection(option.value)}\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-surface-on\">\n\t\t\t\t\t\t\t\t${option.label || option.value}\n\t\t\t\t\t\t\t</label>\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","import { TailwindElement } from '@mixins/index'\nimport { html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { FormFieldMixin } from '../../mixins/formField.mixin'\nimport { fromEvent, takeUntil } from 'rxjs'\n\n@customElement('schmancy-radio-button')\nexport class RadioButton extends FormFieldMixin(TailwindElement()) {\n\t@property({ type: String }) override value = ''\n\t@property({ type: Boolean, reflect: true }) checked = false\n\t@property({ type: Boolean }) override disabled = false\n\t@property({ type: String }) override name = ''\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback()\n\t\t// Listen for click events\n\t\tfromEvent<MouseEvent>(this, 'click')\n\t\t\t.pipe(takeUntil(this.disconnecting))\n\t\t\t.subscribe(this.handleClick)\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback()\n\t\t// Event listeners are automatically cleaned up via takeUntil(this.disconnecting)\n\t}\n\n\tprivate handleClick() {\n\t\tif (this.disabled) return\n\n\t\t// Find parent radio-group if exists\n\t\tconst radioGroup = this.closest('schmancy-radio-group')\n\t\tif (radioGroup) {\n\t\t\t// Let the radio-group handle the change\n\t\t\tconst event = new CustomEvent('radio-button-click', {\n\t\t\t\tdetail: { value: this.value },\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t\tthis.dispatchEvent(event)\n\t\t} else {\n\t\t\t// Standalone usage\n\t\t\tthis.checked = true\n\t\t\tthis.emitChange({ value: this.value })\n\t\t}\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<label class=\"relative flex items-start cursor-pointer\">\n\t\t\t\t<div class=\"flex items-center h-6\">\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\tclass=\"h-4 w-4 text-primary-default focus:ring-primary-container border-outline\"\n\t\t\t\t\t\t.value=${this.value}\n\t\t\t\t\t\t.checked=${this.checked}\n\t\t\t\t\t\t.disabled=${this.disabled}\n\t\t\t\t\t\t.name=${this.name}\n\t\t\t\t\t\t@change=${() => {}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ml-3\">\n\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-radio-button': RadioButton\n\t}\n}\n"],"names":["RadioGroup","FormFieldMixin","TailwindElement","constructor","super","arguments","this","label","name","value","options","required","selection$","Subject","connectedCallback","pipe","takeUntil","disconnecting","subscribe","emitChange","updateChildRadioButtons","fromEvent","e","next","detail","disconnectedCallback","complete","querySelectorAll","forEach","button","getAttribute","setAttribute","removeAttribute","changedProperties","updated","has","render","hasSlottedContent","childElementCount","html","when","map","option","handleSelection","__decorateClass","property","type","String","prototype","Array","Boolean","customElement","RadioButton","checked","disabled","handleClick","closest","event","CustomEvent","bubbles","composed","dispatchEvent","reflect"],"mappings":"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"}

package/dist/radio-group.cjs

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

package/dist/radio-group.js

@@ -1,4 +1,4 @@
-import { a as r, R as t } from "./radio-button-DINgMpZS.js";
+import { a as r, R as t } from "./radio-button-DaSKbB-Z.js";
 export {
   r as RadioButton,
   t as RadioGroup

package/dist/{ripple-BumgqsDT.js → ripple-Cy-nvO8W.js}

@@ -1,8 +1,8 @@
-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 {
+import { nothing as h } from "lit";
+import { directive as i, Directive as u, PartType as r } from "lit/directive.js";
+import { Subject as a, fromEvent as p, debounceTime as m, startWith as g, takeUntil as f } from "rxjs";
+import { AsyncDirective as d } from "lit/async-directive.js";
+const x = i(class extends u {
   constructor(e) {
     super(e), this.config = {};
   }
@@ -12,15 +12,15 @@ const x = s(class extends h {
     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;
+    return this.config = e, h;
   }
-}), i = new a();
-m(window, "resize").pipe(f(10), g(window)).subscribe({ next: () => {
-  i.next(window);
+}), s = new a();
+p(window, "resize").pipe(m(10), g(window)).subscribe({ next: () => {
+  s.next(window);
 } });
-const v = s(class extends p {
+const v = i(class extends d {
   constructor(e) {
-    super(e), this.disconnecting = new a(), i.pipe(u(this.disconnecting)).subscribe(() => {
+    super(e), this.disconnecting = new a(), s.pipe(f(this.disconnecting)).subscribe(() => {
       this.element.style.setProperty("height", `${window.innerHeight}px`), setTimeout(() => {
         this.element.style.setProperty("height", `${window.innerHeight}px`);
       });
@@ -30,21 +30,23 @@ const v = s(class extends p {
   }
   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);
+    this.element = e.element, s.next(window);
   }
   disconnected() {
     this.disconnecting.next(!0);
   }
   reconnected() {
   }
-}), T = s(class extends p {
-  render() {
+}), T = i(class extends d {
+  constructor() {
+    super(...arguments), this.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);
+    };
   }
-  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);
+  render() {
   }
   update(e) {
     if (e.type !== r.ELEMENT) throw new Error("The `ripple` directive can only be used on elements");
@@ -64,10 +66,10 @@ const v = s(class extends p {
         opacity: 0;
     }
 }
-`), this.element.append(t), this.element.addEventListener("click", this.addRippleEffect);
+`), this.element.append(t), this.subscription?.unsubscribe(), this.subscription = p(this.element, "click").subscribe(this.addRippleEffect);
   }
   disconnected() {
-    this.element && this.element.removeEventListener("click", this.addRippleEffect);
+    this.subscription?.unsubscribe();
   }
 });
 export {
@@ -75,4 +77,4 @@ export {
   v as f,
   T as r
 };
-//# sourceMappingURL=ripple-BumgqsDT.js.map
+//# sourceMappingURL=ripple-Cy-nvO8W.js.map

package/dist/ripple-Cy-nvO8W.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-Cy-nvO8W.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'\nimport { fromEvent, Subscription } from 'rxjs'\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\tprivate subscription?: Subscription\n\n\trender() {\n\t\treturn\n\t}\n\n\taddRippleEffect = (event: MouseEvent) => {\n\t\tconst element = event.target as HTMLElement\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: any) {\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\n\t\t// Clean up existing subscription\n\t\tthis.subscription?.unsubscribe()\n\n\t\t// Create new subscription\n\t\tthis.subscription = fromEvent<MouseEvent>(this.element, 'click').subscribe(this.addRippleEffect)\n\t}\n\n\tdisconnected() {\n\t\tthis.subscription?.unsubscribe()\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","render","disconnected","reconnected","ripple","constructor","arguments","addRippleEffect","event","target","circle","document","createElement","diameter","Math","max","clientWidth","clientHeight","radius","width","height","left","clientX","getBoundingClientRect","top","clientY","classList","add","getElementsByClassName","remove","appendChild","append","subscription","unsubscribe"],"mappings":"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"}

package/dist/ripple-DqQrvaTe.cjs

@@ -0,0 +1,16 @@
+"use strict";const a=require("lit"),s=require("lit/directive.js"),i=require("rxjs"),d=require("lit/async-directive.js");class h extends s.Directive{constructor(e){super(e),this.config={}}update(e,[t]){if(e.type!==s.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=s.directive(h),r=new i.Subject;i.fromEvent(window,"resize").pipe(i.debounceTime(10),i.startWith(window)).subscribe({next:()=>{r.next(window)}});class m extends d.AsyncDirective{constructor(e){super(e),this.disconnecting=new i.Subject,r.pipe(i.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!==s.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=s.directive(m);class b extends d.AsyncDirective{constructor(){super(...arguments),this.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 p=t.getElementsByClassName("ripple")[0];p&&p.remove(),t.appendChild(n)}}render(){}update(e){if(e.type!==s.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.subscription?.unsubscribe(),this.subscription=i.fromEvent(this.element,"click").subscribe(this.addRippleEffect)}disconnected(){this.subscription?.unsubscribe()}}const y=s.directive(b);exports.color=u,exports.fullHeight=g,exports.ripple=y;
+//# sourceMappingURL=ripple-DqQrvaTe.cjs.map

package/dist/ripple-DqQrvaTe.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple-DqQrvaTe.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'\nimport { fromEvent, Subscription } from 'rxjs'\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\tprivate subscription?: Subscription\n\n\trender() {\n\t\treturn\n\t}\n\n\taddRippleEffect = (event: MouseEvent) => {\n\t\tconst element = event.target as HTMLElement\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: any) {\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\n\t\t// Clean up existing subscription\n\t\tthis.subscription?.unsubscribe()\n\n\t\t// Create new subscription\n\t\tthis.subscription = fromEvent<MouseEvent>(this.element, 'click').subscribe(this.addRippleEffect)\n\t}\n\n\tdisconnected() {\n\t\tthis.subscription?.unsubscribe()\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","constructor","arguments","addRippleEffect","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","subscription","unsubscribe"],"mappings":"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"}