@mhmo91/schmancy 0.8.6 → 0.9.2

package/dist/radio-group-BjSWmYJC.js

@@ -0,0 +1,105 @@
+import { i as e, t } from "./tailwind.mixin-C4cx3IOr.js";
+import { FormFieldMixin as n } from "./mixins.js";
+import { Subject as r, fromEvent as i, takeUntil as a } from "rxjs";
+import { customElement as o, property as s } from "lit/decorators.js";
+import { html as c } from "lit";
+import { when as l } from "lit/directives/when.js";
+var u = class extends n(t(":host{display:inherit;position:inherit}")) {
+	constructor(...e) {
+		super(...e), this.label = "", this.name = "", this.value = "", this.options = [], this.required = !1, this.selection$ = new r();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.selection$.pipe(a(this.disconnecting)).subscribe((e) => {
+			this.value = e, this.emitChange({ value: e }), this.updateChildRadioButtons();
+		}), i(this, "radio-button-click").pipe(a(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() {
+		let e = this.childElementCount > 0;
+		return c`
+			<div class="grid gap-4">
+				${l(this.label, () => c` <label class="text-base font-semibold text-surface-on">${this.label}</label> `)}
+				
+				${e ? c`<slot></slot>` : this.options?.map((e) => c`
+						<div class="flex items-center">
+							<input
+								.required=${this.required}
+								id=${e.value}
+								class="h-4 w-4 border-outline text-primary-default focus:ring-primary-default"
+								type="radio"
+								name=${this.name}
+								.value=${e.value}
+								.checked=${e.value === this.value}
+								@change=${() => this.handleSelection(e.value)}
+							/>
+							<label for=${e.value} class="ml-3 block text-sm font-medium leading-6 text-surface-on">
+								${e.label || e.value}
+							</label>
+						</div>
+					`)}
+			</div>
+		`;
+	}
+};
+e([s({ type: String })], u.prototype, "label", void 0), e([s({ type: String })], u.prototype, "name", void 0), e([s({ type: String })], u.prototype, "value", void 0), e([s({ type: Array })], u.prototype, "options", void 0), e([s({ type: Boolean })], u.prototype, "required", void 0), u = e([o("schmancy-radio-group")], u);
+var d = class extends n(t()) {
+	constructor(...e) {
+		super(...e), this.value = "", this.checked = !1, this.disabled = !1, this.name = "";
+	}
+	connectedCallback() {
+		super.connectedCallback(), i(this, "click").pipe(a(this.disconnecting)).subscribe(this.handleClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+	}
+	handleClick() {
+		if (!this.disabled) if (this.closest("schmancy-radio-group")) {
+			let 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 c`
+			<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>
+		`;
+	}
+};
+e([s({ type: String })], d.prototype, "value", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "checked", void 0), e([s({ type: Boolean })], d.prototype, "disabled", void 0), e([s({ type: String })], d.prototype, "name", void 0), d = e([o("schmancy-radio-button")], d);
+export { u as n, d as t };

package/dist/radio-group-BjSWmYJC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-BjSWmYJC.js","names":[],"sources":["../src/radio-group/radio-group.scss?inline","../src/radio-group/radio-group.ts","../src/radio-group/radio-button.ts"],"sourcesContent":[":host {\n\tdisplay: inherit;\n\tposition: inherit;\n}\n","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/**\n * Radio button component for use within radio groups.\n *\n * @prop {string} name - Name attribute for grouping radio buttons\n * @prop {string} value - Value of this radio button\n * @prop {boolean} checked - Whether the radio button is selected\n * @prop {boolean} disabled - Whether the radio button is disabled\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"],"mappings":"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"}

package/dist/radio-group-DKPN0T50.cjs

@@ -0,0 +1,40 @@
+require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-DGiyLbEi.cjs`),t=require(`./mixins.cjs`);let n=require(`rxjs`),r=require(`lit/decorators.js`),i=require(`lit`),a=require(`lit/directives/when.js`);var o=class extends t.FormFieldMixin(e.t(`:host{display:inherit;position:inherit}`)){constructor(...e){super(...e),this.label=``,this.name=``,this.value=``,this.options=[],this.required=!1,this.selection$=new n.Subject}connectedCallback(){super.connectedCallback(),this.selection$.pipe((0,n.takeUntil)(this.disconnecting)).subscribe(e=>{this.value=e,this.emitChange({value:e}),this.updateChildRadioButtons()}),(0,n.fromEvent)(this,`radio-button-click`).pipe((0,n.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(){let e=this.childElementCount>0;return i.html`
+			<div class="grid gap-4">
+				${(0,a.when)(this.label,()=>i.html` <label class="text-base font-semibold text-surface-on">${this.label}</label> `)}
+				
+				${e?i.html`<slot></slot>`:this.options?.map(e=>i.html`
+						<div class="flex items-center">
+							<input
+								.required=${this.required}
+								id=${e.value}
+								class="h-4 w-4 border-outline text-primary-default focus:ring-primary-default"
+								type="radio"
+								name=${this.name}
+								.value=${e.value}
+								.checked=${e.value===this.value}
+								@change=${()=>this.handleSelection(e.value)}
+							/>
+							<label for=${e.value} class="ml-3 block text-sm font-medium leading-6 text-surface-on">
+								${e.label||e.value}
+							</label>
+						</div>
+					`)}
+			</div>
+		`}};e.i([(0,r.property)({type:String})],o.prototype,`label`,void 0),e.i([(0,r.property)({type:String})],o.prototype,`name`,void 0),e.i([(0,r.property)({type:String})],o.prototype,`value`,void 0),e.i([(0,r.property)({type:Array})],o.prototype,`options`,void 0),e.i([(0,r.property)({type:Boolean})],o.prototype,`required`,void 0),o=e.i([(0,r.customElement)(`schmancy-radio-group`)],o);var s=class extends t.FormFieldMixin(e.t()){constructor(...e){super(...e),this.value=``,this.checked=!1,this.disabled=!1,this.name=``}connectedCallback(){super.connectedCallback(),(0,n.fromEvent)(this,`click`).pipe((0,n.takeUntil)(this.disconnecting)).subscribe(this.handleClick)}disconnectedCallback(){super.disconnectedCallback()}handleClick(){if(!this.disabled)if(this.closest(`schmancy-radio-group`)){let 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 i.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>
+		`}};e.i([(0,r.property)({type:String})],s.prototype,`value`,void 0),e.i([(0,r.property)({type:Boolean,reflect:!0})],s.prototype,`checked`,void 0),e.i([(0,r.property)({type:Boolean})],s.prototype,`disabled`,void 0),e.i([(0,r.property)({type:String})],s.prototype,`name`,void 0),s=e.i([(0,r.customElement)(`schmancy-radio-button`)],s),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});

package/dist/radio-group-DKPN0T50.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-DKPN0T50.cjs","names":[],"sources":["../src/radio-group/radio-group.scss?inline","../src/radio-group/radio-group.ts","../src/radio-group/radio-button.ts"],"sourcesContent":[":host {\n\tdisplay: inherit;\n\tposition: inherit;\n}\n","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/**\n * Radio button component for use within radio groups.\n *\n * @prop {string} name - Name attribute for grouping radio buttons\n * @prop {string} value - Value of this radio button\n * @prop {boolean} checked - Whether the radio button is selected\n * @prop {boolean} disabled - Whether the radio button is disabled\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"],"mappings":"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"}

package/dist/radio-group.cjs

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

package/dist/radio-group.js

@@ -1,6 +1,2 @@
-import { a as r, R as t } from "./radio-button-me3SRHGu.js";
-export {
-  r as RadioButton,
-  t as RadioGroup
-};
-//# sourceMappingURL=radio-group.js.map
+import { n as e, t } from "./radio-group-BjSWmYJC.js";
+export { t as RadioButton, e as RadioGroup };

package/dist/range.cjs

@@ -0,0 +1,62 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-DGiyLbEi.cjs`);require(`./mixins.cjs`);let t=require(`lit/decorators.js`),n=require(`lit`),r=require(`lit/directives/when.js`);var i=class extends e.t(n.css`
+	input[type='range'] {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 100%;
+		height: 4px;
+		border-radius: 2px;
+		background: linear-gradient(
+			to right,
+			var(--color-primary, #6750a4) 0%,
+			var(--color-primary, #6750a4) var(--range-progress, 0%),
+			color-mix(in srgb, var(--color-primary, #6750a4) 30%, transparent) var(--range-progress, 0%),
+			color-mix(in srgb, var(--color-primary, #6750a4) 30%, transparent) 100%
+		);
+		outline: none;
+		cursor: pointer;
+	}
+	input[type='range']:disabled {
+		opacity: 0.38;
+		cursor: not-allowed;
+	}
+	input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background: var(--color-primary, #6750a4);
+		cursor: pointer;
+		transition: box-shadow 0.1s ease;
+	}
+	input[type='range']::-webkit-slider-thumb:hover {
+		box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary, #6750a4) 12%, transparent);
+	}
+	input[type='range']::-moz-range-thumb {
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		border: none;
+		background: var(--color-primary, #6750a4);
+		cursor: pointer;
+	}
+`){constructor(...e){super(...e),this.min=0,this.max=1,this.step=.01,this.value=0,this.disabled=!1}get progress(){return(this.value-this.min)/(this.max-this.min)*100+`%`}render(){return n.html`
+			<div class="flex flex-col gap-1 w-full">
+				${(0,r.when)(this.label,()=>n.html`
+						<div class="flex justify-between items-center">
+							<schmancy-typography type="label" token="sm" class="text-surface-on">${this.label}</schmancy-typography>
+							<schmancy-typography type="label" token="sm" class="text-surface-on opacity-60">${this.value}</schmancy-typography>
+						</div>
+					`)}
+				<input
+					type="range"
+					.min=${String(this.min)}
+					.max=${String(this.max)}
+					.step=${String(this.step)}
+					.value=${String(this.value)}
+					?disabled=${this.disabled}
+					style="--range-progress: ${this.progress}"
+					@input=${e=>{this.value=Number(e.target.value),this.dispatchEvent(new CustomEvent(`change`,{detail:{value:this.value},bubbles:!0,composed:!0}))}}
+				/>
+			</div>
+		`}};e.i([(0,t.property)({type:Number})],i.prototype,`min`,void 0),e.i([(0,t.property)({type:Number})],i.prototype,`max`,void 0),e.i([(0,t.property)({type:Number})],i.prototype,`step`,void 0),e.i([(0,t.property)({type:Number})],i.prototype,`value`,void 0),e.i([(0,t.property)({type:String})],i.prototype,`label`,void 0),e.i([(0,t.property)({type:Boolean})],i.prototype,`disabled`,void 0),i=e.i([(0,t.customElement)(`schmancy-range`)],i),Object.defineProperty(exports,`SchmancyRange`,{enumerable:!0,get:function(){return i}});

package/dist/range.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.cjs","names":[],"sources":["../src/range/range.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\n\nexport type SchmancyRangeChangeEvent = CustomEvent<{ value: number }>\n\n/**\n * @element schmancy-range\n * Range input (numeric slider).\n * @fires change - Fires on value change with { value: number }\n */\n@customElement('schmancy-range')\nexport class SchmancyRange extends TailwindElement(css`\n\tinput[type='range'] {\n\t\t-webkit-appearance: none;\n\t\tappearance: none;\n\t\twidth: 100%;\n\t\theight: 4px;\n\t\tborder-radius: 2px;\n\t\tbackground: linear-gradient(\n\t\t\tto right,\n\t\t\tvar(--color-primary, #6750a4) 0%,\n\t\t\tvar(--color-primary, #6750a4) var(--range-progress, 0%),\n\t\t\tcolor-mix(in srgb, var(--color-primary, #6750a4) 30%, transparent) var(--range-progress, 0%),\n\t\t\tcolor-mix(in srgb, var(--color-primary, #6750a4) 30%, transparent) 100%\n\t\t);\n\t\toutline: none;\n\t\tcursor: pointer;\n\t}\n\tinput[type='range']:disabled {\n\t\topacity: 0.38;\n\t\tcursor: not-allowed;\n\t}\n\tinput[type='range']::-webkit-slider-thumb {\n\t\t-webkit-appearance: none;\n\t\tappearance: none;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tborder-radius: 50%;\n\t\tbackground: var(--color-primary, #6750a4);\n\t\tcursor: pointer;\n\t\ttransition: box-shadow 0.1s ease;\n\t}\n\tinput[type='range']::-webkit-slider-thumb:hover {\n\t\tbox-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary, #6750a4) 12%, transparent);\n\t}\n\tinput[type='range']::-moz-range-thumb {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tborder-radius: 50%;\n\t\tborder: none;\n\t\tbackground: var(--color-primary, #6750a4);\n\t\tcursor: pointer;\n\t}\n`) {\n\t@property({ type: Number }) min = 0\n\t@property({ type: Number }) max = 1\n\t@property({ type: Number }) step = 0.01\n\t@property({ type: Number }) value = 0\n\t@property({ type: String }) label?: string\n\t@property({ type: Boolean }) disabled = false\n\n\tprivate get progress(): string {\n\t\treturn `${((this.value - this.min) / (this.max - this.min)) * 100}%`\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"flex flex-col gap-1 w-full\">\n\t\t\t\t${when(\n\t\t\t\t\tthis.label,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div class=\"flex justify-between items-center\">\n\t\t\t\t\t\t\t<schmancy-typography type=\"label\" token=\"sm\" class=\"text-surface-on\">${this.label}</schmancy-typography>\n\t\t\t\t\t\t\t<schmancy-typography type=\"label\" token=\"sm\" class=\"text-surface-on opacity-60\">${this.value}</schmancy-typography>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t\t<input\n\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t.min=${String(this.min)}\n\t\t\t\t\t.max=${String(this.max)}\n\t\t\t\t\t.step=${String(this.step)}\n\t\t\t\t\t.value=${String(this.value)}\n\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\tstyle=\"--range-progress: ${this.progress}\"\n\t\t\t\t\t@input=${(e: Event) => {\n\t\t\t\t\t\tthis.value = Number((e.target as HTMLInputElement).value)\n\t\t\t\t\t\tthis.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true, composed: true }))\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-range': SchmancyRange\n\t}\n}\n"],"mappings":"oQAaO,IAAA,EAAA,cAA4B,EAAA,EAAgB,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0CA2CnB,EAAA,KAAA,IACA,EAAA,KAAA,KACC,IAAA,KAAA,MACC,EAAA,KAAA,SAAA,CAEI,EAExC,IAAA,UAAY,CACX,OAAY,KAAK,MAAQ,KAAK,MAAQ,KAAK,IAAM,KAAK,KAAQ,IAAvD,IAGR,QAAA,CACC,MAAO,GAAA,IAAI;;iBAGR,KAAK,UACC,EAAA,IAAI;;8EAE+D,KAAK,MAAA;yFACM,KAAK,MAAA;;;;;YAMlF,OAAO,KAAK,IAAA,CAAA;YACZ,OAAO,KAAK,IAAA,CAAA;aACX,OAAO,KAAK,KAAA,CAAA;cACX,OAAO,KAAK,MAAA,CAAA;iBACT,KAAK,SAAA;gCACU,KAAK,SAAA;cACtB,GAAA,CACT,KAAK,MAAQ,OAAQ,EAAE,OAA4B,MAAA,CACnD,KAAK,cAAc,IAAI,YAAY,SAAU,CAAE,OAAQ,CAAE,MAAO,KAAK,MAAA,CAAS,QAAA,CAAS,EAAM,SAAA,CAAU,EAAA,CAAA,CAAA,EAAA;;;0BAjClG,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,MAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,MAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,OAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,QAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjB,CAAE,KAAM,OAAA,CAAA,CAAA,CAAS,EAAA,UAAA,QAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,UACjB,CAAE,KAAM,QAAA,CAAA,CAAA,CAAU,EAAA,UAAA,WAAA,IAAA,GAAA,CAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,eAjDd,iBAAA,CAAA,CAAiB,EAAA,CAAA,OAAA,eAAA,QAAA,gBAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/range.js

@@ -0,0 +1,85 @@
+import { i as e, t } from "./tailwind.mixin-C4cx3IOr.js";
+import "./mixins.js";
+import { customElement as n, property as r } from "lit/decorators.js";
+import { css as i, html as a } from "lit";
+import { when as o } from "lit/directives/when.js";
+var s = class extends t(i`
+	input[type='range'] {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 100%;
+		height: 4px;
+		border-radius: 2px;
+		background: linear-gradient(
+			to right,
+			var(--color-primary, #6750a4) 0%,
+			var(--color-primary, #6750a4) var(--range-progress, 0%),
+			color-mix(in srgb, var(--color-primary, #6750a4) 30%, transparent) var(--range-progress, 0%),
+			color-mix(in srgb, var(--color-primary, #6750a4) 30%, transparent) 100%
+		);
+		outline: none;
+		cursor: pointer;
+	}
+	input[type='range']:disabled {
+		opacity: 0.38;
+		cursor: not-allowed;
+	}
+	input[type='range']::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background: var(--color-primary, #6750a4);
+		cursor: pointer;
+		transition: box-shadow 0.1s ease;
+	}
+	input[type='range']::-webkit-slider-thumb:hover {
+		box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary, #6750a4) 12%, transparent);
+	}
+	input[type='range']::-moz-range-thumb {
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		border: none;
+		background: var(--color-primary, #6750a4);
+		cursor: pointer;
+	}
+`) {
+	constructor(...e) {
+		super(...e), this.min = 0, this.max = 1, this.step = .01, this.value = 0, this.disabled = !1;
+	}
+	get progress() {
+		return (this.value - this.min) / (this.max - this.min) * 100 + "%";
+	}
+	render() {
+		return a`
+			<div class="flex flex-col gap-1 w-full">
+				${o(this.label, () => a`
+						<div class="flex justify-between items-center">
+							<schmancy-typography type="label" token="sm" class="text-surface-on">${this.label}</schmancy-typography>
+							<schmancy-typography type="label" token="sm" class="text-surface-on opacity-60">${this.value}</schmancy-typography>
+						</div>
+					`)}
+				<input
+					type="range"
+					.min=${String(this.min)}
+					.max=${String(this.max)}
+					.step=${String(this.step)}
+					.value=${String(this.value)}
+					?disabled=${this.disabled}
+					style="--range-progress: ${this.progress}"
+					@input=${(e) => {
+			this.value = Number(e.target.value), this.dispatchEvent(new CustomEvent("change", {
+				detail: { value: this.value },
+				bubbles: !0,
+				composed: !0
+			}));
+		}}
+				/>
+			</div>
+		`;
+	}
+};
+e([r({ type: Number })], s.prototype, "min", void 0), e([r({ type: Number })], s.prototype, "max", void 0), e([r({ type: Number })], s.prototype, "step", void 0), e([r({ type: Number })], s.prototype, "value", void 0), e([r({ type: String })], s.prototype, "label", void 0), e([r({ type: Boolean })], s.prototype, "disabled", void 0), s = e([n("schmancy-range")], s);
+export { s as SchmancyRange };

package/dist/range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"range.js","names":[],"sources":["../src/range/range.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\n\nexport type SchmancyRangeChangeEvent = CustomEvent<{ value: number }>\n\n/**\n * @element schmancy-range\n * Range input (numeric slider).\n * @fires change - Fires on value change with { value: number }\n */\n@customElement('schmancy-range')\nexport class SchmancyRange extends TailwindElement(css`\n\tinput[type='range'] {\n\t\t-webkit-appearance: none;\n\t\tappearance: none;\n\t\twidth: 100%;\n\t\theight: 4px;\n\t\tborder-radius: 2px;\n\t\tbackground: linear-gradient(\n\t\t\tto right,\n\t\t\tvar(--color-primary, #6750a4) 0%,\n\t\t\tvar(--color-primary, #6750a4) var(--range-progress, 0%),\n\t\t\tcolor-mix(in srgb, var(--color-primary, #6750a4) 30%, transparent) var(--range-progress, 0%),\n\t\t\tcolor-mix(in srgb, var(--color-primary, #6750a4) 30%, transparent) 100%\n\t\t);\n\t\toutline: none;\n\t\tcursor: pointer;\n\t}\n\tinput[type='range']:disabled {\n\t\topacity: 0.38;\n\t\tcursor: not-allowed;\n\t}\n\tinput[type='range']::-webkit-slider-thumb {\n\t\t-webkit-appearance: none;\n\t\tappearance: none;\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tborder-radius: 50%;\n\t\tbackground: var(--color-primary, #6750a4);\n\t\tcursor: pointer;\n\t\ttransition: box-shadow 0.1s ease;\n\t}\n\tinput[type='range']::-webkit-slider-thumb:hover {\n\t\tbox-shadow: 0 0 0 8px color-mix(in srgb, var(--color-primary, #6750a4) 12%, transparent);\n\t}\n\tinput[type='range']::-moz-range-thumb {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tborder-radius: 50%;\n\t\tborder: none;\n\t\tbackground: var(--color-primary, #6750a4);\n\t\tcursor: pointer;\n\t}\n`) {\n\t@property({ type: Number }) min = 0\n\t@property({ type: Number }) max = 1\n\t@property({ type: Number }) step = 0.01\n\t@property({ type: Number }) value = 0\n\t@property({ type: String }) label?: string\n\t@property({ type: Boolean }) disabled = false\n\n\tprivate get progress(): string {\n\t\treturn `${((this.value - this.min) / (this.max - this.min)) * 100}%`\n\t}\n\n\trender() {\n\t\treturn html`\n\t\t\t<div class=\"flex flex-col gap-1 w-full\">\n\t\t\t\t${when(\n\t\t\t\t\tthis.label,\n\t\t\t\t\t() => html`\n\t\t\t\t\t\t<div class=\"flex justify-between items-center\">\n\t\t\t\t\t\t\t<schmancy-typography type=\"label\" token=\"sm\" class=\"text-surface-on\">${this.label}</schmancy-typography>\n\t\t\t\t\t\t\t<schmancy-typography type=\"label\" token=\"sm\" class=\"text-surface-on opacity-60\">${this.value}</schmancy-typography>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t`,\n\t\t\t\t)}\n\t\t\t\t<input\n\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t.min=${String(this.min)}\n\t\t\t\t\t.max=${String(this.max)}\n\t\t\t\t\t.step=${String(this.step)}\n\t\t\t\t\t.value=${String(this.value)}\n\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\tstyle=\"--range-progress: ${this.progress}\"\n\t\t\t\t\t@input=${(e: Event) => {\n\t\t\t\t\t\tthis.value = Number((e.target as HTMLInputElement).value)\n\t\t\t\t\t\tthis.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true, composed: true }))\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-range': SchmancyRange\n\t}\n}\n"],"mappings":";;;;;AAaO,IAAA,IAAA,cAA4B,EAAgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA2CnB,GAAA,KAAA,MACA,GAAA,KAAA,OACC,KAAA,KAAA,QACC,GAAA,KAAA,WAAA,CAEI;;CAExC,IAAA,WAAY;AACX,UAAY,KAAK,QAAQ,KAAK,QAAQ,KAAK,MAAM,KAAK,OAAQ,MAAvD;;CAGR,SAAA;AACC,SAAO,CAAI;;MAEP,EACD,KAAK,aACC,CAAI;;8EAE+D,KAAK,MAAA;yFACM,KAAK,MAAA;;;;;YAMlF,OAAO,KAAK,IAAA,CAAA;YACZ,OAAO,KAAK,IAAA,CAAA;aACX,OAAO,KAAK,KAAA,CAAA;cACX,OAAO,KAAK,MAAA,CAAA;iBACT,KAAK,SAAA;gCACU,KAAK,SAAA;eACtB,MAAA;AACT,QAAK,QAAQ,OAAQ,EAAE,OAA4B,MAAA,EACnD,KAAK,cAAc,IAAI,YAAY,UAAU;IAAE,QAAQ,EAAE,OAAO,KAAK,OAAA;IAAS,SAAA,CAAS;IAAM,UAAA,CAAU;IAAA,CAAA,CAAA;IAAA;;;;;;GAjC3G,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,OAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,OAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,EAAA,CAC1B,EAAS,EAAE,MAAM,SAAA,CAAA,CAAA,EAAU,EAAA,WAAA,YAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAjD5B,EAAc,iBAAA,CAAA,EAAiB,EAAA;AAAA,SAAA,KAAA"}

package/dist/reduced-motion-D-L12p7G.js

@@ -0,0 +1,7 @@
+import { BehaviorSubject as e, fromEvent as t } from "rxjs";
+import { map as n, startWith as r } from "rxjs/operators";
+var i = typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)") : void 0, a = new e(i?.matches ?? !1);
+i && t(i, "change").pipe(n((e) => e.matches), r(i.matches)).subscribe((e) => {
+	a.next(e);
+});
+export { a as t };

package/dist/reduced-motion-D-L12p7G.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reduced-motion-D-L12p7G.js","names":[],"sources":["../src/directives/reduced-motion.ts"],"sourcesContent":["import { BehaviorSubject, fromEvent } from 'rxjs'\nimport { map, startWith } from 'rxjs/operators'\n\n/**\n * Shared reactive reduced-motion preference.\n *\n * All physics directives observe this — if the user toggles reduced motion\n * while the page is open, directives respond immediately.\n *\n * @example\n * ```ts\n * import { reducedMotion$ } from './reduced-motion'\n * if (reducedMotion$.value) return // skip animation\n * ```\n */\nconst mediaQuery = typeof window !== 'undefined'\n\t? window.matchMedia('(prefers-reduced-motion: reduce)')\n\t: undefined\n\nexport const reducedMotion$ = new BehaviorSubject<boolean>(mediaQuery?.matches ?? false)\n\n// Reactively listen for changes via RxJS\nif (mediaQuery) {\n\tfromEvent<MediaQueryListEvent>(mediaQuery, 'change').pipe(\n\t\tmap(e => e.matches),\n\t\tstartWith(mediaQuery.matches),\n\t).subscribe(matches => {\n\t\treducedMotion$.next(matches)\n\t})\n}\n"],"mappings":";;AAeA,IAAM,IAA+B,OAAX,SAAW,MAClC,OAAO,WAAW,mCAAA,GAAA,KAClB,GAEU,IAAiB,IAAI,EAAyB,GAAY,WAAA,CAAW,EAAA;AAG9E,KACH,EAA+B,GAAY,SAAA,CAAU,KACpD,GAAI,MAAK,EAAE,QAAA,EACX,EAAU,EAAW,QAAA,CAAA,CACpB,WAAU,MAAA;AACX,GAAe,KAAK,EAAA;EAAA;AAAA,SAAA,KAAA"}

package/dist/reduced-motion-Ds05GPyz.cjs

@@ -0,0 +1 @@
+require(`./chunk-BCfY8kxB.cjs`);let e=require(`rxjs`),t=require(`rxjs/operators`);var n=typeof window<`u`?window.matchMedia(`(prefers-reduced-motion: reduce)`):void 0,r=new e.BehaviorSubject(n?.matches??!1);n&&(0,e.fromEvent)(n,`change`).pipe((0,t.map)(e=>e.matches),(0,t.startWith)(n.matches)).subscribe(e=>{r.next(e)}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return r}});

package/dist/reduced-motion-Ds05GPyz.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"reduced-motion-Ds05GPyz.cjs","names":[],"sources":["../src/directives/reduced-motion.ts"],"sourcesContent":["import { BehaviorSubject, fromEvent } from 'rxjs'\nimport { map, startWith } from 'rxjs/operators'\n\n/**\n * Shared reactive reduced-motion preference.\n *\n * All physics directives observe this — if the user toggles reduced motion\n * while the page is open, directives respond immediately.\n *\n * @example\n * ```ts\n * import { reducedMotion$ } from './reduced-motion'\n * if (reducedMotion$.value) return // skip animation\n * ```\n */\nconst mediaQuery = typeof window !== 'undefined'\n\t? window.matchMedia('(prefers-reduced-motion: reduce)')\n\t: undefined\n\nexport const reducedMotion$ = new BehaviorSubject<boolean>(mediaQuery?.matches ?? false)\n\n// Reactively listen for changes via RxJS\nif (mediaQuery) {\n\tfromEvent<MediaQueryListEvent>(mediaQuery, 'change').pipe(\n\t\tmap(e => e.matches),\n\t\tstartWith(mediaQuery.matches),\n\t).subscribe(matches => {\n\t\treducedMotion$.next(matches)\n\t})\n}\n"],"mappings":"kFAeA,IAAM,EAA+B,OAAX,OAAW,IAClC,OAAO,WAAW,mCAAA,CAAA,IAClB,GAEU,EAAiB,IAAI,EAAA,gBAAyB,GAAY,SAAA,CAAW,EAAA,CAG9E,IACH,EAAA,EAAA,WAA+B,EAAY,SAAA,CAAU,MAAA,EAAA,EAAA,KAChD,GAAK,EAAE,QAAA,EAAQ,EAAA,EAAA,WACT,EAAW,QAAA,CAAA,CACpB,UAAU,GAAA,CACX,EAAe,KAAK,EAAA,EAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/rxjs-utils-BSjmI9-Q.js

@@ -0,0 +1,32 @@
+import { t as e } from "./chunk-C_1VqBVD.js";
+import { Observable as t } from "rxjs";
+var n = (e, n = {
+	attributes: !0,
+	childList: !0,
+	subtree: !0
+}) => new t((t) => {
+	let r = new MutationObserver((e) => {
+		t.next(e);
+	});
+	return r.observe(e, n), () => {
+		r.disconnect();
+	};
+});
+e((e) => {
+	Object.defineProperty(e, "t", { value: !0 }), e.hasValueAtKey = e.hasPresentKey = e.isFilled = e.isDefined = e.isPresent = void 0, e.isPresent = function(e) {
+		return e != null;
+	}, e.isDefined = function(e) {
+		return e !== void 0;
+	}, e.isFilled = function(e) {
+		return e !== null;
+	}, e.hasPresentKey = function(e) {
+		return function(t) {
+			return t[e] !== void 0 && t[e] !== null;
+		};
+	}, e.hasValueAtKey = function(e, t) {
+		return function(n) {
+			return n[e] === t;
+		};
+	};
+})();
+export { n as t };

package/dist/rxjs-utils-BSjmI9-Q.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rxjs-utils-BSjmI9-Q.js","names":[],"sources":["../src/rxjs-utils/mutation-observer.ts","../node_modules/ts-is-present/lib/index.js","../src/rxjs-utils/waitForElements.ts"],"sourcesContent":["import { Observable } from 'rxjs'\n\nexport const mutationObserver = (\n\ttarget: HTMLElement,\n\tconfig: MutationObserverInit = {\n\t\tattributes: true,\n\t\tchildList: true,\n\t\tsubtree: true,\n\t},\n): Observable<MutationRecord[]> => {\n\treturn new Observable(observer => {\n\t\tconst mutation = new MutationObserver(mutations => {\n\t\t\tobserver.next(mutations)\n\t\t})\n\t\tmutation.observe(target, config)\n\t\tconst unsubscribe = () => {\n\t\t\tmutation.disconnect()\n\t\t}\n\t\treturn unsubscribe\n\t})\n}\nexport default mutationObserver\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.hasValueAtKey = exports.hasPresentKey = exports.isFilled = exports.isDefined = exports.isPresent = void 0;\nfunction isPresent(t) {\n    return t !== undefined && t !== null;\n}\nexports.isPresent = isPresent;\nfunction isDefined(t) {\n    return t !== undefined;\n}\nexports.isDefined = isDefined;\nfunction isFilled(t) {\n    return t !== null;\n}\nexports.isFilled = isFilled;\n/**\n * Returns a function that can be used to filter down objects\n * to the ones that have a defined non-null value under the key `k`.\n *\n * @example\n * ```ts\n * const filesWithUrl = files.filter(file => file.url);\n * files[0].url // In this case, TS might still treat this as undefined/null\n *\n * const filesWithUrl = files.filter(hasPresentKey(\"url\"));\n * files[0].url // TS will know that this is present\n * ```\n *\n * See https://github.com/microsoft/TypeScript/issues/16069\n * why is that useful.\n */\nfunction hasPresentKey(k) {\n    return function (a) {\n        return a[k] !== undefined && a[k] !== null;\n    };\n}\nexports.hasPresentKey = hasPresentKey;\n/**\n * Returns a function that can be used to filter down objects\n * to the ones that have a specific value V under a key `k`.\n *\n * @example\n * ```ts\n * type File = { type: \"image\", imageUrl: string } | { type: \"pdf\", pdfUrl: string };\n * const files: File[] = [];\n *\n * const imageFiles = files.filter(file => file.type === \"image\");\n * files[0].type // In this case, TS will still treat it  as `\"image\" | \"pdf\"`\n *\n * const filesWithUrl = files.filter(hasValueKey(\"type\", \"image\" as const));\n * files[0].type // TS will now know that this is \"image\"\n * files[0].imageUrl // TS will know this is present, because already it excluded the other union members.\n *\n * Note: the cast `as const` is necessary, otherwise TS will only know that type is a string.\n * ```\n *\n * See https://github.com/microsoft/TypeScript/issues/16069\n * why is that useful.\n */\nfunction hasValueAtKey(k, v) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    return function (a) {\n        return a[k] === v;\n    };\n}\nexports.hasValueAtKey = hasValueAtKey;\n//# sourceMappingURL=index.js.map","import { filter, map, startWith, take, tap, timeout } from 'rxjs'\nimport { isPresent } from 'ts-is-present'\nimport observeOnMutation from './mutation-observer'\n\n/**\n * @returns An observable that emits the elements when they are found\n * @description This function is useful when you want to wait for multiple elements to appear\n * @example waitForElements(['button', 'input']).subscribe(([button, input]) => button.click())\n * @returns\n */\nexport default function waitForElements<T extends Array<T>>(\n  /**\n   * @param selectors The selectors to use to find the elements\n   * @type { string[] }\n   * @description The order of the elements in the array is the same as the order of the elements in the emitted array\n   */\n  selectors: string[],\n  /**\n   * @param timeoutAfter How long to wait for the elements to appear before throwing an error\n   * @default 5000\n   * @type { number | undefined }\n   * @description If you don't want to wait for the elements to appear, pass `undefined` as the second argument\n   */\n  timeoutAfter = 5000,\n) {\n  return observeOnMutation(document.body).pipe(\n    startWith(document.body),\n    filter(() => selectors.every(s => !!document.querySelector(s))),\n    take(1),\n    map(() => selectors.map(s => document.querySelector(s)).filter(isPresent)), // why filter again? see https://github.com/Microsoft/TypeScript/issues/16069\n    map(elements => {\n      if (elements.length === selectors.length) {\n        return elements\n      } else {\n        throw new Error('Not all elements were found')\n      }\n    }),\n    timeoutAfter ? timeout(timeoutAfter) : tap(),\n  )\n}\n"],"x_google_ignoreList":[1],"mappings":";;AAEA,IAAa,KACZ,GACA,IAA+B;CAC9B,YAAA,CAAY;CACZ,WAAA,CAAW;CACX,SAAA,CAAS;CAAA,KAGH,IAAI,GAAW,MAAA;CACrB,IAAM,IAAW,IAAI,kBAAiB,MAAA;AACrC,IAAS,KAAK,EAAA;GAAA;AAMf,QAJA,EAAS,QAAQ,GAAQ,EAAA,QACnB;AACL,IAAS,YAAA;;EAAA;AAAA,GAAA,MAAA;ACfZ,QAAO,eAAe,GAAS,KAAc,EAAE,OAAA,CAAO,GAAA,CAAA,EACtD,EAAQ,gBAAgB,EAAQ,gBAAgB,EAAQ,WAAW,EAAQ,YAAY,EAAQ,YAAA,KAAiB,GAIhH,EAAQ,YAHR,SAAmB,GAAA;AACf,SAAO,KAAA;IAMX,EAAQ,YAHR,SAAmB,GAAA;AACf,SAAO,MAAP,KAAa;IAMjB,EAAQ,WAHR,SAAkB,GAAA;AACd,SAAO,MAAM;IAwBjB,EAAQ,gBALR,SAAuB,GAAA;AACnB,SAAO,SAAU,GAAA;AACb,UAAO,EAAE,OAAT,KAAgB,KAAa,EAAE,OAAO;;IAgC9C,EAAQ,gBANR,SAAuB,GAAG,GAAA;AAEtB,SAAO,SAAU,GAAA;AACb,UAAO,EAAE,OAAO;;;EAAA,EAAA;AAAA,SAAA,KAAA"}

package/dist/rxjs-utils-DCsfzeap.cjs

@@ -0,0 +1 @@
+const e=require(`./chunk-BCfY8kxB.cjs`);let t=require(`rxjs`);var n=(e,n={attributes:!0,childList:!0,subtree:!0})=>new t.Observable(t=>{let r=new MutationObserver(e=>{t.next(e)});return r.observe(e,n),()=>{r.disconnect()}});e.t(e=>{Object.defineProperty(e,`u`,{value:!0}),e.hasValueAtKey=e.hasPresentKey=e.isFilled=e.isDefined=e.isPresent=void 0,e.isPresent=function(e){return e!=null},e.isDefined=function(e){return e!==void 0},e.isFilled=function(e){return e!==null},e.hasPresentKey=function(e){return function(t){return t[e]!==void 0&&t[e]!==null}},e.hasValueAtKey=function(e,t){return function(n){return n[e]===t}}})(),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return n}});

package/dist/rxjs-utils-DCsfzeap.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rxjs-utils-DCsfzeap.cjs","names":[],"sources":["../src/rxjs-utils/mutation-observer.ts","../node_modules/ts-is-present/lib/index.js","../src/rxjs-utils/waitForElements.ts"],"sourcesContent":["import { Observable } from 'rxjs'\n\nexport const mutationObserver = (\n\ttarget: HTMLElement,\n\tconfig: MutationObserverInit = {\n\t\tattributes: true,\n\t\tchildList: true,\n\t\tsubtree: true,\n\t},\n): Observable<MutationRecord[]> => {\n\treturn new Observable(observer => {\n\t\tconst mutation = new MutationObserver(mutations => {\n\t\t\tobserver.next(mutations)\n\t\t})\n\t\tmutation.observe(target, config)\n\t\tconst unsubscribe = () => {\n\t\t\tmutation.disconnect()\n\t\t}\n\t\treturn unsubscribe\n\t})\n}\nexport default mutationObserver\n","\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.hasValueAtKey = exports.hasPresentKey = exports.isFilled = exports.isDefined = exports.isPresent = void 0;\nfunction isPresent(t) {\n    return t !== undefined && t !== null;\n}\nexports.isPresent = isPresent;\nfunction isDefined(t) {\n    return t !== undefined;\n}\nexports.isDefined = isDefined;\nfunction isFilled(t) {\n    return t !== null;\n}\nexports.isFilled = isFilled;\n/**\n * Returns a function that can be used to filter down objects\n * to the ones that have a defined non-null value under the key `k`.\n *\n * @example\n * ```ts\n * const filesWithUrl = files.filter(file => file.url);\n * files[0].url // In this case, TS might still treat this as undefined/null\n *\n * const filesWithUrl = files.filter(hasPresentKey(\"url\"));\n * files[0].url // TS will know that this is present\n * ```\n *\n * See https://github.com/microsoft/TypeScript/issues/16069\n * why is that useful.\n */\nfunction hasPresentKey(k) {\n    return function (a) {\n        return a[k] !== undefined && a[k] !== null;\n    };\n}\nexports.hasPresentKey = hasPresentKey;\n/**\n * Returns a function that can be used to filter down objects\n * to the ones that have a specific value V under a key `k`.\n *\n * @example\n * ```ts\n * type File = { type: \"image\", imageUrl: string } | { type: \"pdf\", pdfUrl: string };\n * const files: File[] = [];\n *\n * const imageFiles = files.filter(file => file.type === \"image\");\n * files[0].type // In this case, TS will still treat it  as `\"image\" | \"pdf\"`\n *\n * const filesWithUrl = files.filter(hasValueKey(\"type\", \"image\" as const));\n * files[0].type // TS will now know that this is \"image\"\n * files[0].imageUrl // TS will know this is present, because already it excluded the other union members.\n *\n * Note: the cast `as const` is necessary, otherwise TS will only know that type is a string.\n * ```\n *\n * See https://github.com/microsoft/TypeScript/issues/16069\n * why is that useful.\n */\nfunction hasValueAtKey(k, v) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    return function (a) {\n        return a[k] === v;\n    };\n}\nexports.hasValueAtKey = hasValueAtKey;\n//# sourceMappingURL=index.js.map","import { filter, map, startWith, take, tap, timeout } from 'rxjs'\nimport { isPresent } from 'ts-is-present'\nimport observeOnMutation from './mutation-observer'\n\n/**\n * @returns An observable that emits the elements when they are found\n * @description This function is useful when you want to wait for multiple elements to appear\n * @example waitForElements(['button', 'input']).subscribe(([button, input]) => button.click())\n * @returns\n */\nexport default function waitForElements<T extends Array<T>>(\n  /**\n   * @param selectors The selectors to use to find the elements\n   * @type { string[] }\n   * @description The order of the elements in the array is the same as the order of the elements in the emitted array\n   */\n  selectors: string[],\n  /**\n   * @param timeoutAfter How long to wait for the elements to appear before throwing an error\n   * @default 5000\n   * @type { number | undefined }\n   * @description If you don't want to wait for the elements to appear, pass `undefined` as the second argument\n   */\n  timeoutAfter = 5000,\n) {\n  return observeOnMutation(document.body).pipe(\n    startWith(document.body),\n    filter(() => selectors.every(s => !!document.querySelector(s))),\n    take(1),\n    map(() => selectors.map(s => document.querySelector(s)).filter(isPresent)), // why filter again? see https://github.com/Microsoft/TypeScript/issues/16069\n    map(elements => {\n      if (elements.length === selectors.length) {\n        return elements\n      } else {\n        throw new Error('Not all elements were found')\n      }\n    }),\n    timeoutAfter ? timeout(timeoutAfter) : tap(),\n  )\n}\n"],"x_google_ignoreList":[1],"mappings":"8DAEA,IAAa,GACZ,EACA,EAA+B,CAC9B,WAAA,CAAY,EACZ,UAAA,CAAW,EACX,QAAA,CAAS,EAAA,GAGH,IAAI,EAAA,WAAW,GAAA,CACrB,IAAM,EAAW,IAAI,iBAAiB,GAAA,CACrC,EAAS,KAAK,EAAA,EAAA,CAMf,OAJA,EAAS,QAAQ,EAAQ,EAAA,KACnB,CACL,EAAS,YAAA,GAAA,CAAA,EAAA,EAAA,GAAA,CCfZ,OAAO,eAAe,EAAS,IAAc,CAAE,MAAA,CAAO,EAAA,CAAA,CACtD,EAAQ,cAAgB,EAAQ,cAAgB,EAAQ,SAAW,EAAQ,UAAY,EAAQ,UAAA,IAAiB,GAIhH,EAAQ,UAHR,SAAmB,EAAA,CACf,OAAO,GAAA,MAMX,EAAQ,UAHR,SAAmB,EAAA,CACf,OAAO,IAAP,IAAa,IAMjB,EAAQ,SAHR,SAAkB,EAAA,CACd,OAAO,IAAM,MAwBjB,EAAQ,cALR,SAAuB,EAAA,CACnB,OAAO,SAAU,EAAA,CACb,OAAO,EAAE,KAAT,IAAgB,IAAa,EAAE,KAAO,OAgC9C,EAAQ,cANR,SAAuB,EAAG,EAAA,CAEtB,OAAO,SAAU,EAAA,CACb,OAAO,EAAE,KAAO,KAAA,EAAA,CAAA,OAAA,eAAA,QAAA,IAAA,CAAA,WAAA,CAAA,EAAA,IAAA,UAAA,CAAA,OAAA,GAAA,CAAA"}

package/dist/rxjs-utils.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("rxjs");require("./index-CCi1otmh.cjs");exports.mutationObserver=(t,r={attributes:!0,childList:!0,subtree:!0})=>new i.Observable(s=>{const e=new MutationObserver(n=>{s.next(n)});return e.observe(t,r),()=>{e.disconnect()}});
-//# sourceMappingURL=rxjs-utils.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./rxjs-utils-DCsfzeap.cjs`);exports.mutationObserver=e.t;

package/dist/rxjs-utils.js

@@ -1,14 +1,2 @@
-import { Observable as o } from "rxjs";
-import "./index-CW6PhEkx.js";
-const a = (e, r = { attributes: !0, childList: !0, subtree: !0 }) => new o((s) => {
-  const t = new MutationObserver((n) => {
-    s.next(n);
-  });
-  return t.observe(e, r), () => {
-    t.disconnect();
-  };
-});
-export {
-  a as mutationObserver
-};
-//# sourceMappingURL=rxjs-utils.js.map
+import { t as e } from "./rxjs-utils-BSjmI9-Q.js";
+export { e as mutationObserver };

package/dist/scroll-mayaGGpE.cjs

@@ -0,0 +1,26 @@
+require(`./chunk-BCfY8kxB.cjs`);const e=require(`./tailwind.mixin-DGiyLbEi.cjs`);require(`./mixins.cjs`);let t=require(`rxjs`),n=require(`lit/decorators.js`),r=require(`lit`);var i=class extends e.t(r.css`
+	:host {
+		/* Flexible sizing for different layout contexts */
+		width: 100%;
+		min-height: 0; /* Allow flex shrinking */
+		flex: 1; /* Grow in flex containers */
+		box-sizing: border-box; /* Ensures proper sizing */
+		display: block;
+		position: relative;
+		scroll-behavior: smooth;
+		overscroll-behavior-x: contain;
+		overscroll-behavior-y: auto;
+	}
+	/* Fallback for non-flex contexts */
+	:host(.explicit-height) {
+		height: 100%;
+		flex: none;
+	}
+	:host([hide]) {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
+	:host([hide])::-webkit-scrollbar {
+		display: none; /* Chrome, Safari, and Opera */
+	}
+`){constructor(...e){super(...e),this.hide=!1,this.direction=`both`,this.debounce=10}get scroller(){return this}scrollTo(e,t){typeof e==`number`?super.scrollTo({top:e,behavior:t?`smooth`:`auto`}):e?super.scrollTo(e):super.scrollTo({top:0,left:0,behavior:`auto`})}scrollToLeft(e,t=`auto`){super.scrollTo({left:e,behavior:t})}connectedCallback(){super.connectedCallback(),this.updateScrollingStyles(),this.updateLayoutContext(),this.setAttribute(`part`,`scroller`)}updateScrollingStyles(){this.direction===`horizontal`?(this.style.setProperty(`overflow-y`,`hidden`),this.style.setProperty(`overflow-x`,`auto`)):this.direction===`vertical`?(this.style.setProperty(`overflow-y`,`auto`),this.style.setProperty(`overflow-x`,`hidden`)):(this.style.setProperty(`overflow-y`,`auto`),this.style.setProperty(`overflow-x`,`auto`))}updateLayoutContext(){requestAnimationFrame(()=>{let e=this.parentElement;if(e){let t=getComputedStyle(e);t.display===`flex`||t.display===`inline-flex`?this.classList.remove(`explicit-height`):this.classList.add(`explicit-height`)}else this.classList.add(`explicit-height`)})}updated(e){super.updated(e),e.has(`direction`)&&this.updateScrollingStyles(),this.updateLayoutContext()}firstUpdated(){(0,t.fromEvent)(this.scroller,`scroll`,{passive:!0}).pipe((0,t.debounceTime)(this.debounce),(0,t.takeUntil)(this.disconnecting)).subscribe(e=>{let t=this.scroller.scrollTop,n=this.scroller.scrollHeight,r=this.scroller.clientHeight,i=this.scroller.scrollLeft,a=this.scroller.scrollWidth,o=this.scroller.clientWidth;this.dispatchEvent(new CustomEvent(`scroll`,{detail:{scrollTop:t,scrollHeight:n,clientHeight:r,e,scrollLeft:i,scrollWidth:a,clientWidth:o},bubbles:!0,composed:!0}))}),(0,t.fromEvent)(window,`@schmancy:scrollTo`).pipe((0,t.filter)(e=>this.name!==void 0&&e.detail.name===this.name),(0,t.takeUntil)(this.disconnecting)).subscribe(e=>{if(e.detail.action===`scrollTo`&&typeof e.detail.top==`number`){let t={behavior:`smooth`,top:e.detail.top};typeof e.detail.left==`number`&&(t.left=e.detail.left),this.scrollTo(t)}})}render(){return r.html`<slot></slot>`}};e.i([(0,n.property)({type:Boolean,reflect:!0})],i.prototype,`hide`,void 0),e.i([(0,n.property)({type:String,reflect:!0})],i.prototype,`name`,void 0),e.i([(0,n.property)({type:String,reflect:!0})],i.prototype,`direction`,void 0),e.i([(0,n.property)({type:Number})],i.prototype,`debounce`,void 0),i=e.i([(0,n.customElement)(`schmancy-scroll`)],i),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return i}});

package/dist/scroll-mayaGGpE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-mayaGGpE.cjs","names":[],"sources":["../src/layout/scroll/scroll.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { debounceTime, filter, fromEvent, takeUntil } from 'rxjs'\n\n/**\n * Custom scroll event interface for the SchmancyScroll component.\n * Contains detailed information about the scroll state.\n */\nexport interface SchmancyScrollEvent\n\textends CustomEvent<{\n\t\t/** Current scroll position from the top */\n\t\tscrollTop: number\n\t\t/** Total scrollable height of the content */\n\t\tscrollHeight: number\n\t\t/** Visible height of the container */\n\t\tclientHeight: number\n\t\t/** Original scroll event */\n\t\te: Event\n\t\t/** Current scroll position from the left (for horizontal scrolling) */\n\t\tscrollLeft?: number\n\t\t/** Total scrollable width of the content (for horizontal scrolling) */\n\t\tscrollWidth?: number\n\t\t/** Visible width of the container (for horizontal scrolling) */\n\t\tclientWidth?: number\n\t}> {}\n\n/**\n * Command event interface for controlling SchmancyScroll components\n */\nexport interface SchmancyScrollCommandEvent\n\textends CustomEvent<{\n\t\t/** Target component name */\n\t\tname: string\n\t\t/** Command action to perform */\n\t\taction: 'scrollTo'\n\t\t/** Scroll position for scrollTo action */\n\t\ttop: number\n\t\t/** Horizontal scroll position for scrollTo action (optional) */\n\t\tleft?: number\n\t}> {}\n\n// Augment the HTMLElementEventMap to include our custom events\ndeclare global {\n\tinterface HTMLElementEventMap {\n\t\tscroll: SchmancyScrollEvent\n\t\t'schmancy-scroll-command': SchmancyScrollCommandEvent\n\t}\n}\n\n/**\n * A custom scrollable container with enhanced features.\n *\n * @fires {SchmancyScrollEvent} scroll - Fired when scrolling occurs (with a configurable debounce)\n * @slot - Default slot for content to be scrolled\n * @csspart scroller - The inner scrollable div element\n *\n * @example\n * ```html\n * <schmancy-scroll hide name=\"main-content\">\n *   <div>Scrollable content goes here</div>\n * </schmancy-scroll>\n * ```\n *\n * @example\n * ```html\n * <schmancy-scroll direction=\"horizontal\" hide name=\"image-carousel\">\n *   <div class=\"flex\">\n *     <img src=\"image1.jpg\" alt=\"Image 1\">\n *     <img src=\"image2.jpg\" alt=\"Image 2\">\n *   </div>\n * </schmancy-scroll>\n * ```\n *\n * @example Programmatic scroll with Lit ref\n * ```typescript\n * private scrollRef = createRef<HTMLElement>()\n *\n * // In template:\n * html`<schmancy-scroll ${ref(this.scrollRef)}>...</schmancy-scroll>`\n *\n * // Scroll to top (smooth — host has scroll-behavior: smooth):\n * this.scrollRef.value?.scrollTo({ top: 0 })\n * ```\n */\n@customElement('schmancy-scroll')\nexport class SchmancyScroll extends TailwindElement(css`\n\t:host {\n\t\t/* Flexible sizing for different layout contexts */\n\t\twidth: 100%;\n\t\tmin-height: 0; /* Allow flex shrinking */\n\t\tflex: 1; /* Grow in flex containers */\n\t\tbox-sizing: border-box; /* Ensures proper sizing */\n\t\tdisplay: block;\n\t\tposition: relative;\n\t\tscroll-behavior: smooth;\n\t\toverscroll-behavior-x: contain;\n\t\toverscroll-behavior-y: auto;\n\t}\n\t/* Fallback for non-flex contexts */\n\t:host(.explicit-height) {\n\t\theight: 100%;\n\t\tflex: none;\n\t}\n\t:host([hide]) {\n\t\t-ms-overflow-style: none; /* IE and Edge */\n\t\tscrollbar-width: none; /* Firefox */\n\t}\n\t:host([hide])::-webkit-scrollbar {\n\t\tdisplay: none; /* Chrome, Safari, and Opera */\n\t}\n`) {\n\t/**\n\t * Determines whether the scrollbar is hidden.\n\t *\n\t * When `hide` is true, the host element's scrollbars are hidden\n\t * in supported browsers using CSS.\n\t *\n\t * @attr hide\n\t * @example <schmancy-scroll hide></schmancy-scroll>\n\t */\n\t@property({ type: Boolean, reflect: true })\n\tpublic hide = false\n\n\t/**\n\t * Optional name identifier for the component.\n\t * Used for targeting this specific component with global events.\n\t *\n\t * @attr name\n\t * @example <schmancy-scroll name=\"main-content\"></schmancy-scroll>\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic name?: string\n\n\t/**\n\t * Direction of scrolling: vertical, horizontal, or both.\n\t * - vertical: Only allows vertical scrolling\n\t * - horizontal: Only allows horizontal scrolling\n\t * - both: Allows both horizontal and vertical scrolling (default)\n\t *\n\t * @attr direction\n\t * @example <schmancy-scroll direction=\"horizontal\"></schmancy-scroll>\n\t */\n\t@property({ type: String, reflect: true })\n\tpublic direction: 'vertical' | 'horizontal' | 'both' = 'both'\n\n\t/**\n\t * Reference to the scrollable element (the host element itself)\n\t * @public\n\t */\n\tget scroller(): HTMLElement {\n\t\treturn this\n\t}\n\n\t/**\n\t * Debounce time in milliseconds for the scroll event.\n\t * Higher values reduce the frequency of scroll events being dispatched.\n\t *\n\t * @attr debounce\n\t * @example <schmancy-scroll debounce=\"50\"></schmancy-scroll>\n\t */\n\t@property({ type: Number })\n\tpublic debounce = 10\n\n\t/**\n\t * Scrolls the container to the specified position\n\t * @param options - ScrollToOptions or a number representing the top position\n\t * @param top - For backward compatibility, if options is a number, this is treated as \"behavior\"\n\t */\n\tpublic override scrollTo(options?: ScrollToOptions | number, top?: number): void {\n\t\tif (typeof options === 'number') {\n\t\t\tsuper.scrollTo({ top: options, behavior: top ? 'smooth' : 'auto' })\n\t\t} else if (options) {\n\t\t\tsuper.scrollTo(options)\n\t\t} else {\n\t\t\tsuper.scrollTo({ top: 0, left: 0, behavior: 'auto' })\n\t\t}\n\t}\n\n\t/**\n\t * Scrolls the container horizontally to the specified position\n\t * @param left - The horizontal position to scroll to (in pixels)\n\t * @param behavior - The scroll behavior ('auto' or 'smooth')\n\t */\n\tpublic scrollToLeft(left: number, behavior: ScrollBehavior = 'auto'): void {\n\t\tsuper.scrollTo({ left, behavior })\n\t}\n\n\t/**\n\t * Called when the component is connected to the DOM\n\t * Applies scrolling styles directly to the host element\n\t * @protected\n\t */\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.updateScrollingStyles()\n\t\tthis.updateLayoutContext()\n\t\t// Set the part attribute on the host element\n\t\tthis.setAttribute('part', 'scroller')\n\t}\n\n\t/**\n\t * Updates the overflow styles based on the direction property\n\t * @private\n\t */\n\tprivate updateScrollingStyles(): void {\n\t\t// Apply overflow styles based on direction\n\t\tif (this.direction === 'horizontal') {\n\t\t\tthis.style.setProperty('overflow-y', 'hidden')\n\t\t\tthis.style.setProperty('overflow-x', 'auto')\n\t\t} else if (this.direction === 'vertical') {\n\t\t\tthis.style.setProperty('overflow-y', 'auto')\n\t\t\tthis.style.setProperty('overflow-x', 'hidden')\n\t\t} else {\n\t\t\t// both\n\t\t\tthis.style.setProperty('overflow-y', 'auto')\n\t\t\tthis.style.setProperty('overflow-x', 'auto')\n\t\t}\n\t}\n\n\t/**\n\t * Updates the layout context based on parent container type\n\t * @private\n\t */\n\tprivate updateLayoutContext(): void {\n\t\t// Use requestAnimationFrame to ensure DOM is fully rendered\n\t\trequestAnimationFrame(() => {\n\t\t\t// Check if parent is a flex container\n\t\t\tconst parent = this.parentElement\n\t\t\tif (parent) {\n\t\t\t\tconst parentStyles = getComputedStyle(parent)\n\t\t\t\tconst isFlexParent = parentStyles.display === 'flex' || parentStyles.display === 'inline-flex'\n\n\t\t\t\t// For debugging - remove in production\n\t\t\t\tconsole.debug('schmancy-scroll parent detection:', {\n\t\t\t\t\tparent: parent.tagName,\n\t\t\t\t\tdisplay: parentStyles.display,\n\t\t\t\t\tisFlexParent,\n\t\t\t\t})\n\n\t\t\t\t// Apply appropriate class based on parent layout\n\t\t\t\tif (isFlexParent) {\n\t\t\t\t\tthis.classList.remove('explicit-height')\n\t\t\t\t} else {\n\t\t\t\t\tthis.classList.add('explicit-height')\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\t// Default to explicit height if no parent\n\t\t\t\tthis.classList.add('explicit-height')\n\t\t\t}\n\t\t})\n\t}\n\n\t/**\n\t * Called when properties change\n\t * @protected\n\t */\n\tprotected updated(changedProperties: Map<string | number | symbol, unknown>): void {\n\t\tsuper.updated(changedProperties)\n\t\t// Update styles if direction changes\n\t\tif (changedProperties.has('direction')) {\n\t\t\tthis.updateScrollingStyles()\n\t\t}\n\t\t// Always update layout context in case parent layout changed\n\t\tthis.updateLayoutContext()\n\t}\n\n\t/**\n\t * Called after the component's first update\n\t * Sets up the scroll event listener with debouncing\n\t * @protected\n\t */\n\tprotected firstUpdated(): void {\n\t\t// Set up scroll event listening with debounce\n\t\tfromEvent(this.scroller, 'scroll', {\n\t\t\tpassive: true,\n\t\t})\n\t\t\t.pipe(\n\t\t\t\tdebounceTime(this.debounce),\n\t\t\t\ttakeUntil(this.disconnecting), // Unsubscribe when the element is destroyed\n\t\t\t)\n\t\t\t.subscribe(e => {\n\t\t\t\t// Always include the original required properties for backward compatibility\n\t\t\t\tconst scrollTop = this.scroller.scrollTop\n\t\t\t\tconst scrollHeight = this.scroller.scrollHeight\n\t\t\t\tconst clientHeight = this.scroller.clientHeight\n\n\t\t\t\t// Include horizontal scroll information as optional properties\n\t\t\t\tconst scrollLeft = this.scroller.scrollLeft\n\t\t\t\tconst scrollWidth = this.scroller.scrollWidth\n\t\t\t\tconst clientWidth = this.scroller.clientWidth\n\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent('scroll', {\n\t\t\t\t\t\tdetail: {\n\t\t\t\t\t\t\t// Original required properties first\n\t\t\t\t\t\t\tscrollTop,\n\t\t\t\t\t\t\tscrollHeight,\n\t\t\t\t\t\t\tclientHeight,\n\t\t\t\t\t\t\te,\n\t\t\t\t\t\t\t// New optional properties last\n\t\t\t\t\t\t\tscrollLeft,\n\t\t\t\t\t\t\tscrollWidth,\n\t\t\t\t\t\t\tclientWidth,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tbubbles: true,\n\t\t\t\t\t\tcomposed: true,\n\t\t\t\t\t}) as SchmancyScrollEvent,\n\t\t\t\t)\n\t\t\t})\n\n\t\t// Set up global command event listener\n\t\tfromEvent<SchmancyScrollCommandEvent>(window, '@schmancy:scrollTo')\n\t\t\t.pipe(\n\t\t\t\t// Only process events targeting this component by name\n\t\t\t\tfilter(e => this.name !== undefined && e.detail.name === this.name),\n\t\t\t\ttakeUntil(this.disconnecting),\n\t\t\t)\n\t\t\t.subscribe(e => {\n\t\t\t\tif (e.detail.action === 'scrollTo' && typeof e.detail.top === 'number') {\n\t\t\t\t\tconst options: ScrollToOptions = {\n\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\ttop: e.detail.top, // Required for backward compatibility\n\t\t\t\t\t}\n\n\t\t\t\t\t// Add optional left position if provided\n\t\t\t\t\tif (typeof e.detail.left === 'number') {\n\t\t\t\t\t\toptions.left = e.detail.left\n\t\t\t\t\t}\n\n\t\t\t\t\tthis.scrollTo(options)\n\t\t\t\t}\n\t\t\t})\n\t}\n\n\t/**\n\t * Renders the component template\n\t * @returns {TemplateResult} The template to render\n\t * @protected\n\t */\n\tprotected render() {\n\t\t// Only render the slot, all styling is applied to the host\n\t\treturn html`<slot></slot>`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-scroll': SchmancyScroll\n\t}\n}\n"],"mappings":"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"}