@mhmo91/schmancy 0.9.22 → 0.9.23

package/dist/metric.js

@@ -0,0 +1,93 @@
+import { t as e } from "./tailwind.mixin-DIEGVcl3.js";
+import { t } from "./decorate-D_utPUsC.js";
+import "./mixins.js";
+import { customElement as n, property as r } from "lit/decorators.js";
+import { css as i, html as a, nothing as o } from "lit";
+var s = class extends e(i`
+	:host {
+		display: inline-flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		min-width: 0;
+	}
+	:host([size='sm']) .label { font-size: 0.6875rem; }
+	:host([size='sm']) .value { font-size: 1.25rem; }
+	:host([size='md']) .label { font-size: 0.75rem; }
+	:host([size='md']) .value { font-size: 1.75rem; }
+	:host([size='lg']) .label { font-size: 0.8125rem; }
+	:host([size='lg']) .value { font-size: 2.5rem; }
+	.label {
+		font-weight: 500;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--schmancy-sys-color-surface-onVariant);
+	}
+	.value {
+		font-weight: 600;
+		line-height: 1.1;
+		color: var(--schmancy-sys-color-surface-on);
+		font-variant-numeric: tabular-nums;
+	}
+	.delta {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.125rem;
+		font-size: 0.75rem;
+		font-weight: 600;
+		padding: 0.125rem 0.375rem;
+		border-radius: 999px;
+		font-variant-numeric: tabular-nums;
+	}
+	.delta[data-trend='up'] {
+		color: var(--schmancy-sys-color-success-on);
+		background: var(--schmancy-sys-color-success-default);
+	}
+	.delta[data-trend='down'] {
+		color: var(--schmancy-sys-color-error-on);
+		background: var(--schmancy-sys-color-error-default);
+	}
+	.delta[data-trend='neutral'] {
+		color: var(--schmancy-sys-color-surface-on);
+		background: var(--schmancy-sys-color-surface-containerHigh);
+	}
+	.arrow {
+		font-size: 0.625rem;
+		line-height: 1;
+	}
+	.row {
+		display: inline-flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+`) {
+	constructor(...e) {
+		super(...e), this.label = "", this.value = "", this.size = "md";
+	}
+	_arrowFor(e) {
+		return e === "up" ? "↑" : e === "down" ? "↓" : "→";
+	}
+	render() {
+		let e = this.trend ?? "neutral";
+		return a`
+			<span class="label" part="label"><slot name="label">${this.label}</slot></span>
+			<span class="row">
+				<span class="value" part="value"><slot>${this.value}</slot></span>
+				${this.delta ? a`
+							<span class="delta" part="delta" data-trend=${e}>
+								${this.trend ? a`<span class="arrow" aria-hidden="true">${this._arrowFor(this.trend)}</span>` : o}
+								${this.delta}
+							</span>
+						` : o}
+			</span>
+		`;
+	}
+};
+t([r({ type: String })], s.prototype, "label", void 0), t([r({ type: String })], s.prototype, "value", void 0), t([r({
+	type: String,
+	reflect: !0
+})], s.prototype, "trend", void 0), t([r({ type: String })], s.prototype, "delta", void 0), t([r({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), s = t([n("schmancy-metric")], s);
+export { s as SchmancyMetric };

package/dist/metric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric.js","names":[],"sources":["../src/metric/metric.ts"],"sourcesContent":["import { TailwindElement } from '@mixins/index'\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport type MetricTrend = 'up' | 'down' | 'neutral'\nexport type MetricSize = 'sm' | 'md' | 'lg'\n\n/**\n * KPI metric — a label + value pair for dashboards, with optional trend + delta indicators.\n *\n * @element schmancy-metric\n * @summary The building block of dashboards and meta bars. Pass `label` + `value` for a basic stat; add `trend` / `delta` for the delta-from-last-period pattern. Use multiple metrics side-by-side with Tailwind flex/grid utilities.\n * @example\n * <schmancy-metric label=\"In flight\" value=\"4\"></schmancy-metric>\n * <schmancy-metric label=\"Open value\" value=\"€165,900\" trend=\"up\" delta=\"+12%\"></schmancy-metric>\n * <schmancy-metric label=\"Error rate\" value=\"0.3%\" trend=\"down\" delta=\"-0.1%\"></schmancy-metric>\n * @platform div - Styled `<div>` with two text lines + optional trend arrow. Degrades to a plain div+spans if the tag never registers.\n * @slot - Optional custom value rendering (overrides the `value` attribute if present).\n * @slot label - Optional custom label rendering (overrides the `label` attribute if present).\n * @csspart label - The label line.\n * @csspart value - The value line.\n * @csspart delta - The delta pill (only when `delta` is set).\n */\n@customElement('schmancy-metric')\nexport class SchmancyMetric extends TailwindElement(css`\n\t:host {\n\t\tdisplay: inline-flex;\n\t\tflex-direction: column;\n\t\tgap: 0.25rem;\n\t\tmin-width: 0;\n\t}\n\t:host([size='sm']) .label { font-size: 0.6875rem; }\n\t:host([size='sm']) .value { font-size: 1.25rem; }\n\t:host([size='md']) .label { font-size: 0.75rem; }\n\t:host([size='md']) .value { font-size: 1.75rem; }\n\t:host([size='lg']) .label { font-size: 0.8125rem; }\n\t:host([size='lg']) .value { font-size: 2.5rem; }\n\t.label {\n\t\tfont-weight: 500;\n\t\tletter-spacing: 0.08em;\n\t\ttext-transform: uppercase;\n\t\tcolor: var(--schmancy-sys-color-surface-onVariant);\n\t}\n\t.value {\n\t\tfont-weight: 600;\n\t\tline-height: 1.1;\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tfont-variant-numeric: tabular-nums;\n\t}\n\t.delta {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 0.125rem;\n\t\tfont-size: 0.75rem;\n\t\tfont-weight: 600;\n\t\tpadding: 0.125rem 0.375rem;\n\t\tborder-radius: 999px;\n\t\tfont-variant-numeric: tabular-nums;\n\t}\n\t.delta[data-trend='up'] {\n\t\tcolor: var(--schmancy-sys-color-success-on);\n\t\tbackground: var(--schmancy-sys-color-success-default);\n\t}\n\t.delta[data-trend='down'] {\n\t\tcolor: var(--schmancy-sys-color-error-on);\n\t\tbackground: var(--schmancy-sys-color-error-default);\n\t}\n\t.delta[data-trend='neutral'] {\n\t\tcolor: var(--schmancy-sys-color-surface-on);\n\t\tbackground: var(--schmancy-sys-color-surface-containerHigh);\n\t}\n\t.arrow {\n\t\tfont-size: 0.625rem;\n\t\tline-height: 1;\n\t}\n\t.row {\n\t\tdisplay: inline-flex;\n\t\talign-items: baseline;\n\t\tgap: 0.5rem;\n\t\tflex-wrap: wrap;\n\t}\n`) {\n\t/** Upper-case caption shown above the value. */\n\t@property({ type: String }) label = ''\n\n\t/** Primary metric value, rendered large. Pre-format numbers/currency yourself. */\n\t@property({ type: String }) value = ''\n\n\t/** Optional trend direction. Controls the color + arrow on the delta pill. */\n\t@property({ type: String, reflect: true }) trend?: MetricTrend\n\n\t/** Optional delta copy displayed in a pill next to the value (e.g. `+12%`). */\n\t@property({ type: String }) delta?: string\n\n\t/** Size scale affecting label + value typography. */\n\t@property({ type: String, reflect: true }) size: MetricSize = 'md'\n\n\tprivate _arrowFor(trend: MetricTrend | undefined): string {\n\t\tif (trend === 'up') return '↑'\n\t\tif (trend === 'down') return '↓'\n\t\treturn '→'\n\t}\n\n\tprotected render(): unknown {\n\t\tconst trend = this.trend ?? 'neutral'\n\t\treturn html`\n\t\t\t<span class=\"label\" part=\"label\"><slot name=\"label\">${this.label}</slot></span>\n\t\t\t<span class=\"row\">\n\t\t\t\t<span class=\"value\" part=\"value\"><slot>${this.value}</slot></span>\n\t\t\t\t${this.delta\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<span class=\"delta\" part=\"delta\" data-trend=${trend}>\n\t\t\t\t\t\t\t\t${this.trend ? html`<span class=\"arrow\" aria-hidden=\"true\">${this._arrowFor(this.trend)}</span>` : nothing}\n\t\t\t\t\t\t\t\t${this.delta}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t`\n\t\t\t\t\t: nothing}\n\t\t\t</span>\n\t\t`\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'schmancy-metric': SchmancyMetric\n\t}\n}\n"],"mappings":";;;;;AAwBO,IAAA,IAAA,cAA6B,EAAgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BA2DlB,IAAA,KAAA,QAGA,IAAA,KAAA,OAS0B;;CAE9D,UAAkB,GAAA;AACjB,SAAI,MAAU,OAAa,MACvB,MAAU,SAAe,MACtB;;CAGR,SAAA;EACC,IAAM,IAAQ,KAAK,SAAS;AAC5B,SAAO,CAAI;yDAC4C,KAAK,MAAA;;6CAEjB,KAAK,MAAA;MAC5C,KAAK,QACJ,CAAI;qDAC0C,EAAA;UAC3C,KAAK,QAAQ,CAAI,0CAA0C,KAAK,UAAU,KAAK,MAAA,CAAA,WAAkB,EAAA;UACjG,KAAK,MAAA;;UAGR,EAAA;;;;;GAjCL,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,EAAA,CAG1B,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,EAAA,CAG1B,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,EAAA,CAGzC,EAAS,EAAE,MAAM,QAAA,CAAA,CAAA,EAAS,EAAA,WAAA,SAAA,KAAA,EAAA,EAAA,EAAA,CAG1B,EAAS;CAAE,MAAM;CAAQ,SAAA,CAAS;CAAA,CAAA,CAAA,EAAO,EAAA,WAAA,QAAA,KAAA,EAAA,EAAA,IAAA,EAAA,CAxE1C,EAAc,kBAAA,CAAA,EAAkB,EAAA;AAAA,SAAA,KAAA"}

package/dist/nav-drawer.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-C9DpHCWF.cjs`);exports.$drawer=e.m,Object.defineProperty(exports,`SchmancyDrawerAppbar`,{enumerable:!0,get:function(){return e.p}}),exports.SchmancyDrawerNavbarMode=e.u,exports.SchmancyDrawerNavbarState=e.d,Object.defineProperty(exports,`SchmancyNavigationDrawer`,{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(exports,`SchmancyNavigationDrawerContent`,{enumerable:!0,get:function(){return e.f}}),Object.defineProperty(exports,`SchmancyNavigationDrawerSidebar`,{enumerable:!0,get:function(){return e.c}}),exports.schmancyNavDrawer=e.h;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-Ci10_Iwf.cjs`);exports.$drawer=e.m,Object.defineProperty(exports,`SchmancyDrawerAppbar`,{enumerable:!0,get:function(){return e.p}}),exports.SchmancyDrawerNavbarMode=e.u,exports.SchmancyDrawerNavbarState=e.d,Object.defineProperty(exports,`SchmancyNavigationDrawer`,{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(exports,`SchmancyNavigationDrawerContent`,{enumerable:!0,get:function(){return e.f}}),Object.defineProperty(exports,`SchmancyNavigationDrawerSidebar`,{enumerable:!0,get:function(){return e.c}}),exports.schmancyNavDrawer=e.h;

package/dist/nav-drawer.js

@@ -1,2 +1,2 @@
-import { c as e, d as t, f as n, h as r, l as i, m as a, p as o, u as s } from "./src-B0jLOpqn.js";
+import { c as e, d as t, f as n, h as r, l as i, m as a, p as o, u as s } from "./src-DNuhxDig.js";
 export { a as $drawer, o as SchmancyDrawerAppbar, s as SchmancyDrawerNavbarMode, t as SchmancyDrawerNavbarState, i as SchmancyNavigationDrawer, n as SchmancyNavigationDrawerContent, e as SchmancyNavigationDrawerSidebar, r as schmancyNavDrawer };

package/dist/navigation-bar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-C9DpHCWF.cjs`);Object.defineProperty(exports,`SchmancyNavigationBar`,{enumerable:!0,get:function(){return e.o}}),Object.defineProperty(exports,`SchmancyNavigationBarItem`,{enumerable:!0,get:function(){return e.s}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-Ci10_Iwf.cjs`);Object.defineProperty(exports,`SchmancyNavigationBar`,{enumerable:!0,get:function(){return e.o}}),Object.defineProperty(exports,`SchmancyNavigationBarItem`,{enumerable:!0,get:function(){return e.s}});

package/dist/navigation-bar.js

@@ -1,2 +1,2 @@
-import { o as e, s as t } from "./src-B0jLOpqn.js";
+import { o as e, s as t } from "./src-DNuhxDig.js";
 export { e as SchmancyNavigationBar, t as SchmancyNavigationBarItem };

package/dist/{src-C9DpHCWF.cjs → src-Ci10_Iwf.cjs}

@@ -1,4 +1,4 @@
-require(`./chunk-CncqDLb2.cjs`);const e=require(`./tailwind.mixin-BHX99hgX.cjs`),t=require(`./provide-B7b5TOCD.cjs`),n=require(`./decorate-F9CuyeHg.cjs`),r=require(`./litElement.mixin-lYlKxxjR.cjs`);require(`./mixins.cjs`);const i=require(`./area-CFLFXu0Z.cjs`);require(`./store-CjFHCSDb.cjs`),require(`./audio-Dvr-RBzE.cjs`),require(`./autocomplete-NDvRW_Xs.cjs`);const a=require(`./theme.service-DxJPUGlu.cjs`),o=require(`./directives.cjs`);require(`./boat-ZA47HbKj.cjs`),require(`./busy-BuHEz1uo.cjs`),require(`./button.cjs`),require(`./card-DtN6p1Jq.cjs`),require(`./charts.cjs`),require(`./checkbox-DEKQLJYR.cjs`),require(`./chips-B-27tj7O.cjs`),require(`./code-highlight-_ZK6FEjF.cjs`),require(`./components-DUiF-_Ul.cjs`),require(`./connectivity.cjs`),require(`./date-range-CrAIk8dg.cjs`);const s=require(`./sheet.service-B-RxqhpO.cjs`);require(`./date-range-inline-B9Dp2z6C.cjs`),require(`./delay-DCp_QEct.cjs`),require(`./details-BJTR16AV.cjs`),require(`./dialog.cjs`),require(`./discovery.cjs`),require(`./divider-D6MRonTS.cjs`),require(`./dropdown.cjs`),require(`./expand-Dd0H6y8Z.cjs`),require(`./float-ByW-Gth3.cjs`),require(`./window.cjs`),require(`./extra-CdOUiB0K.cjs`),require(`./form-wI58M85H.cjs`),require(`./icons-BpHN4Z8q.cjs`),require(`./iframe-BXzYZu9_.cjs`),require(`./input-BGNZlfL8.cjs`),require(`./notification-DqWW2oh9.cjs`),require(`./json.cjs`),require(`./layout-Bst19YG8.cjs`),require(`./lightbox-Dk2ICCBB.cjs`),require(`./list-DBiecR1i.cjs`),require(`./mailbox-BYNmcNIM.cjs`),require(`./map-7_cexh1e.cjs`),require(`./menu-RaeiF4Ja.cjs`),require(`./navigation-rail.cjs`),require(`./option-1lYctKVI.cjs`),require(`./page.cjs`),require(`./progress.cjs`),require(`./qr-scanner.cjs`),require(`./radio-group-DYvIgv3P.cjs`),require(`./range.cjs`),require(`./rxjs-utils-DJbZRjp3.cjs`);const c=require(`./theme.interface-DTwkuAKJ.cjs`);require(`./select-CQGKkEZc.cjs`),require(`./sheet-BCxpHT62.cjs`),require(`./slider.cjs`),require(`./steps.cjs`),require(`./surface.cjs`),require(`./table-ChHS4xby.cjs`),require(`./tabs-DGmbqqBD.cjs`),require(`./textarea-CfQnghhD.cjs`),require(`./theme-BjnQjhR0.cjs`),require(`./theme-button-CaxDEneM.cjs`),require(`./tooltip.cjs`),require(`./tree.cjs`);const l=require(`./types.cjs`);require(`./typewriter.cjs`),require(`./typography.cjs`),require(`./utils-CBPQvxNW.cjs`),require(`./breadcrumb.cjs`),require(`./kbd.cjs`),require(`./skeleton.cjs`),require(`./splash-screen-C2xsOEdx.cjs`),require(`./switch.cjs`),require(`./visually-hidden.cjs`);let u=require(`rxjs`),d=require(`rxjs/operators`),f=require(`lit/decorators.js`),p=require(`lit`),m=require(`lit/directives/when.js`);var h=class extends e.t(p.css`
+require(`./chunk-CncqDLb2.cjs`);const e=require(`./tailwind.mixin-BHX99hgX.cjs`),t=require(`./provide-B7b5TOCD.cjs`),n=require(`./decorate-F9CuyeHg.cjs`),r=require(`./litElement.mixin-lYlKxxjR.cjs`);require(`./mixins.cjs`);const i=require(`./area-CFLFXu0Z.cjs`);require(`./store-CjFHCSDb.cjs`),require(`./audio-Dvr-RBzE.cjs`),require(`./autocomplete-NDvRW_Xs.cjs`);const a=require(`./theme.service-DxJPUGlu.cjs`),o=require(`./directives.cjs`);require(`./boat-ZA47HbKj.cjs`),require(`./busy-BuHEz1uo.cjs`),require(`./button.cjs`),require(`./card-DtN6p1Jq.cjs`),require(`./charts.cjs`),require(`./checkbox-DEKQLJYR.cjs`),require(`./chips-B-27tj7O.cjs`),require(`./code-highlight-_ZK6FEjF.cjs`),require(`./components-DUiF-_Ul.cjs`),require(`./connectivity.cjs`),require(`./date-range-CrAIk8dg.cjs`);const s=require(`./sheet.service-B-RxqhpO.cjs`);require(`./date-range-inline-B9Dp2z6C.cjs`),require(`./delay-DCp_QEct.cjs`),require(`./details-BJTR16AV.cjs`),require(`./dialog.cjs`),require(`./discovery.cjs`),require(`./divider-D6MRonTS.cjs`),require(`./dropdown.cjs`),require(`./expand-Dd0H6y8Z.cjs`),require(`./float-ByW-Gth3.cjs`),require(`./window.cjs`),require(`./extra-CdOUiB0K.cjs`),require(`./form-wI58M85H.cjs`),require(`./icons-BpHN4Z8q.cjs`),require(`./iframe-BXzYZu9_.cjs`),require(`./input-BGNZlfL8.cjs`),require(`./notification-DqWW2oh9.cjs`),require(`./json.cjs`),require(`./layout-Bst19YG8.cjs`),require(`./lightbox-Dk2ICCBB.cjs`),require(`./list-DBiecR1i.cjs`),require(`./mailbox-BYNmcNIM.cjs`),require(`./map-7_cexh1e.cjs`),require(`./menu-RaeiF4Ja.cjs`),require(`./metric.cjs`),require(`./navigation-rail.cjs`),require(`./option-1lYctKVI.cjs`),require(`./page.cjs`),require(`./progress.cjs`),require(`./qr-scanner.cjs`),require(`./radio-group-DYvIgv3P.cjs`),require(`./range.cjs`),require(`./rxjs-utils-DJbZRjp3.cjs`);const c=require(`./theme.interface-DTwkuAKJ.cjs`);require(`./select-CQGKkEZc.cjs`),require(`./sheet-BCxpHT62.cjs`),require(`./slider.cjs`),require(`./steps.cjs`),require(`./surface.cjs`),require(`./table-ChHS4xby.cjs`),require(`./tabs-DGmbqqBD.cjs`),require(`./textarea-CfQnghhD.cjs`),require(`./theme-BjnQjhR0.cjs`),require(`./theme-button-CaxDEneM.cjs`),require(`./tooltip.cjs`),require(`./tree.cjs`);const l=require(`./types.cjs`);require(`./typewriter.cjs`),require(`./typography.cjs`),require(`./utils-CBPQvxNW.cjs`),require(`./breadcrumb.cjs`),require(`./kbd.cjs`),require(`./skeleton.cjs`),require(`./splash-screen-C2xsOEdx.cjs`),require(`./switch.cjs`),require(`./visually-hidden.cjs`);let u=require(`rxjs`),d=require(`rxjs/operators`),f=require(`lit/decorators.js`),p=require(`lit`),m=require(`lit/directives/when.js`);var h=class extends e.t(p.css`
 	:host {
 		display: inline-flex;
 		width: fit-content;