@universal-material/web 3.0.59 → 3.0.61

package/progress/circular-progress.js

@@ -0,0 +1,96 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UmCircularProgress_instances, _UmCircularProgress_renderCircle, _UmCircularProgress_renderIndeterminate, _UmCircularProgress_renderDeterminate;
+import { LitElement, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './circular-progress.styles.js';
+const basePercentage = 255;
+// https://codepen.io/ConAntonakos/pen/ryMaOX
+let UmCircularProgress = class UmCircularProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        _UmCircularProgress_instances.add(this);
+        this.max = 1;
+    }
+    render() {
+        return this.value === undefined
+            ? __classPrivateFieldGet(this, _UmCircularProgress_instances, "m", _UmCircularProgress_renderIndeterminate).call(this)
+            : __classPrivateFieldGet(this, _UmCircularProgress_instances, "m", _UmCircularProgress_renderDeterminate).call(this);
+    }
+};
+_UmCircularProgress_instances = new WeakSet();
+_UmCircularProgress_renderCircle = function _UmCircularProgress_renderCircle(className) {
+    return svg `
+      <svg class="circular ${className}" viewBox="0 0 50 50">
+        <circle
+          class="path"
+          cx="50%"
+          cy="50%"
+          r="20"
+          fill="none"
+          stroke-width="4"
+          stroke-miterlimit="10" />
+      </svg>`;
+};
+_UmCircularProgress_renderIndeterminate = function _UmCircularProgress_renderIndeterminate() {
+    return __classPrivateFieldGet(this, _UmCircularProgress_instances, "m", _UmCircularProgress_renderCircle).call(this, 'indeterminate');
+};
+_UmCircularProgress_renderDeterminate = function _UmCircularProgress_renderDeterminate() {
+    let proportion = this.value / this.max;
+    const offset = proportion === 0 || proportion === 1
+        ? 0
+        : 0.10625;
+    proportion = Math.floor(proportion * 100) / 100;
+    const percentage = basePercentage - basePercentage * proportion;
+    const trackPercentage = basePercentage - basePercentage * Math.max(1 - offset - proportion, 0) * -1;
+    console.log(this.value);
+    console.log(basePercentage);
+    console.log(percentage);
+    return svg `
+      <svg class="circular on-going" viewBox="0 0 50 50">
+        <circle
+          class="path"
+          cx="50%"
+          cy="50%"
+          r="20"
+          fill="none"
+          stroke-width="4"
+          stroke-miterlimit="10"
+          stroke-dasharray=${`${basePercentage}%`} 
+          stroke-dashoffset=${`${percentage}%`} />
+      </svg>
+      <svg class="circular track on-going" viewBox="0 0 50 50">
+        <circle
+          class="path"
+          cx="50%"
+          cy="50%"
+          r="20"
+          fill="none"
+          stroke-width="4"
+          stroke-miterlimit="10"
+          stroke-dasharray=${`${basePercentage}%`}
+          stroke-dashoffset=${`${trackPercentage}%`}/>
+      </svg>
+    `;
+};
+UmCircularProgress.styles = [styles];
+__decorate([
+    property({ type: Number })
+], UmCircularProgress.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], UmCircularProgress.prototype, "max", void 0);
+UmCircularProgress = __decorate([
+    customElement('u-circular-progress')
+], UmCircularProgress);
+export { UmCircularProgress };
+//# sourceMappingURL=circular-progress.js.map

package/progress/circular-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-progress.js","sourceRoot":"","sources":["../../src/progress/circular-progress.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,MAAM,cAAc,GAAG,GAAG,CAAC;AAE3B,6CAA6C;AAEtC,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;;QAIqB,QAAG,GAAW,CAAC,CAAC;IAmE5C,CAAC;IAjEoB,MAAM;QACvB,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAC7B,CAAC,CAAC,uBAAA,IAAI,8EAAqB,MAAzB,IAAI,CAAuB;YAC7B,CAAC,CAAC,uBAAA,IAAI,4EAAmB,MAAvB,IAAI,CAAqB,CAAC;IAChC,CAAC;;;6EAEa,SAAiB;IAC7B,OAAO,GAAG,CAAA;6BACe,SAAS;;;;;;;;;aASzB,CAAC;AACZ,CAAC;;IAGC,OAAO,uBAAA,IAAI,uEAAc,MAAlB,IAAI,EAAe,eAAe,CAAC,CAAC;AAC7C,CAAC;;IAIC,IAAI,UAAU,GAAG,IAAI,CAAC,KAAM,GAAG,IAAI,CAAC,GAAG,CAAC;IACxC,MAAM,MAAM,GAAG,UAAU,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC;QACjD,CAAC,CAAC,CAAC;QACH,CAAC,CAAC,OAAO,CAAC;IACZ,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAW,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;IACjD,MAAM,UAAU,GAAG,cAAc,GAAG,cAAc,GAAG,UAAU,CAAC;IAChE,MAAM,eAAe,GAAG,cAAc,GAAG,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,GAAG,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAEpG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxB,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC5B,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAExB,OAAO,GAAG,CAAA;;;;;;;;;;6BAUe,GAAG,cAAc,GAAG;8BACnB,GAAG,UAAU,GAAG;;;;;;;;;;;6BAWjB,GAAG,cAAc,GAAG;8BACnB,GAAG,eAAe,GAAG;;KAE9C,CAAC;AACJ,CAAC;AArEe,yBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAER;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;iDAA2B;AAC1B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;+CAAiB;AAJ/B,kBAAkB;IAD9B,aAAa,CAAC,qBAAqB,CAAC;GACxB,kBAAkB,CAuE9B","sourcesContent":["import { LitElement, svg } from 'lit';\nimport { TemplateResult } from 'lit-html';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './circular-progress.styles.js';\n\nconst basePercentage = 255;\n\n// https://codepen.io/ConAntonakos/pen/ryMaOX\n@customElement('u-circular-progress')\nexport class UmCircularProgress extends LitElement {\n  static override styles = [styles];\n\n  @property({type: Number}) value: number | undefined;\n  @property({type: Number}) max: number = 1;\n\n  protected override render(): TemplateResult {\n    return this.value === undefined\n      ? this.#renderIndeterminate()\n      : this.#renderDeterminate();\n  }\n\n  #renderCircle(className: string): TemplateResult {\n    return svg`\n      <svg class=\"circular ${className}\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\" />\n      </svg>`;\n  }\n\n  #renderIndeterminate(): TemplateResult {\n    return this.#renderCircle('indeterminate');\n  }\n\n  #renderDeterminate(): TemplateResult {\n\n    let proportion = this.value! / this.max;\n    const offset = proportion === 0 || proportion === 1\n      ? 0\n      : 0.10625;\n    proportion = Math.floor(proportion! * 100) / 100;\n    const percentage = basePercentage - basePercentage * proportion;\n    const trackPercentage = basePercentage - basePercentage * Math.max(1 - offset - proportion, 0) * -1;\n\n    console.log(this.value);\n    console.log(basePercentage);\n    console.log(percentage);\n\n    return svg`\n      <svg class=\"circular on-going\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          stroke-dasharray=${`${basePercentage}%`} \n          stroke-dashoffset=${`${percentage}%`} />\n      </svg>\n      <svg class=\"circular track on-going\" viewBox=\"0 0 50 50\">\n        <circle\n          class=\"path\"\n          cx=\"50%\"\n          cy=\"50%\"\n          r=\"20\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          stroke-dasharray=${`${basePercentage}%`}\n          stroke-dashoffset=${`${trackPercentage}%`}/>\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-circular-progress': UmCircularProgress;\n  }\n}\n"]}

package/progress/circular-progress.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=circular-progress.styles.d.ts.map

package/progress/circular-progress.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-progress.styles.d.ts","sourceRoot":"","sources":["../../src/progress/circular-progress.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwElB,CAAC"}

package/progress/circular-progress.styles.js

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    position: relative;
+    display: inline-block;
+    width: var(--_size);
+    height: var(--_size);
+    margin-inline: auto;
+    --_size: var(--u-circular-progress-size, 3rem);
+  }
+
+  .circular {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+  .circular.indeterminate {
+    position: relative;
+    animation: rotate 2s linear infinite;
+  }
+  .circular:not(.indeterminate) .path {
+    transition: stroke-dashoffset 200ms linear;
+  }
+
+  .path {
+    stroke-linecap: round;
+    stroke: var(--u-circular-progress-color, var(--u-color-primary, rgb(103, 80, 164)));
+  }
+
+  .track {
+    position: absolute;
+    inset: 0;
+  }
+  .track .path {
+    stroke: var(--u-circular-progress-track-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
+  }
+
+  .indeterminate .path {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+
+  .on-going {
+    transform: rotate(-80deg);
+  }
+  .on-going.track {
+    transform: rotate(-100deg);
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -35;
+    }
+    100% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -124;
+    }
+  }
+`;
+//# sourceMappingURL=circular-progress.styles.js.map

package/progress/circular-progress.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-progress.styles.js","sourceRoot":"","sources":["../../src/progress/circular-progress.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    position: relative;\n    display: inline-block;\n    width: var(--_size);\n    height: var(--_size);\n    margin-inline: auto;\n    --_size: var(--u-circular-progress-size, 3rem);\n  }\n\n  .circular {\n    width: 100%;\n    height: 100%;\n    transform: rotate(-90deg);\n    transform-origin: center;\n  }\n  .circular.indeterminate {\n    position: relative;\n    animation: rotate 2s linear infinite;\n  }\n  .circular:not(.indeterminate) .path {\n    transition: stroke-dashoffset 200ms linear;\n  }\n\n  .path {\n    stroke-linecap: round;\n    stroke: var(--u-circular-progress-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  .track {\n    position: absolute;\n    inset: 0;\n  }\n  .track .path {\n    stroke: var(--u-circular-progress-track-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n  }\n\n  .indeterminate .path {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n    animation: dash 1.5s ease-in-out infinite;\n  }\n\n  .on-going {\n    transform: rotate(-80deg);\n  }\n  .on-going.track {\n    transform: rotate(-100deg);\n  }\n\n  @keyframes rotate {\n    0% {\n      transform: rotate(0);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 200;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -124;\n    }\n  }\n`;\n"]}

package/progress/progress-bar.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import { TemplateResult } from 'lit-html';
+export declare class UmProgressBar extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    value: number | undefined;
+    max: number;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-progress-bar': UmProgressBar;
+    }
+}
+//# sourceMappingURL=progress-bar.d.ts.map

package/progress/progress-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../src/progress/progress-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAK1C,qBACa,aAAc,SAAQ,UAAU;;IAC3C,OAAgB,MAAM,4BAAY;IAER,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,GAAG,EAAE,MAAM,CAAK;cAEvB,MAAM,IAAI,cAAc;CA+B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/progress/progress-bar.js

@@ -0,0 +1,62 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UmProgressBar_instances, _UmProgressBar_renderIndeterminate, _UmProgressBar_renderDeterminate;
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './progress-bar.styles.js';
+let UmProgressBar = class UmProgressBar extends LitElement {
+    constructor() {
+        super(...arguments);
+        _UmProgressBar_instances.add(this);
+        this.max = 1;
+    }
+    render() {
+        return this.value === undefined
+            ? __classPrivateFieldGet(this, _UmProgressBar_instances, "m", _UmProgressBar_renderIndeterminate).call(this)
+            : __classPrivateFieldGet(this, _UmProgressBar_instances, "m", _UmProgressBar_renderDeterminate).call(this);
+    }
+};
+_UmProgressBar_instances = new WeakSet();
+_UmProgressBar_renderIndeterminate = function _UmProgressBar_renderIndeterminate() {
+    return html `
+      <div class="indeterminate">
+        <div class="bar track first"></div>
+        <div class="bar active fast"></div>
+        <div class="bar track middle"></div>
+        <div class="bar active slow"></div>
+        <div class="bar track last"></div>
+      </div>
+    `;
+};
+_UmProgressBar_renderDeterminate = function _UmProgressBar_renderDeterminate() {
+    const proportion = this.value / this.max;
+    const percentage = Math.floor(proportion * 1000) / 10;
+    const trackPercentage = 100 - percentage;
+    return html `
+      <div class="determinate">
+        <div class="bar active" style="flex-basis: ${percentage}%"></div>
+        <div class="bar track" style="flex-basis: ${trackPercentage}%"></div>
+      </div>
+    `;
+};
+UmProgressBar.styles = [styles];
+__decorate([
+    property({ type: Number })
+], UmProgressBar.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], UmProgressBar.prototype, "max", void 0);
+UmProgressBar = __decorate([
+    customElement('u-progress-bar')
+], UmProgressBar);
+export { UmProgressBar };
+//# sourceMappingURL=progress-bar.js.map

package/progress/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../src/progress/progress-bar.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAG3C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;;QAIqB,QAAG,GAAW,CAAC,CAAC;IAiC5C,CAAC;IA/BoB,MAAM;QACvB,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS;YAC7B,CAAC,CAAC,uBAAA,IAAI,oEAAqB,MAAzB,IAAI,CAAuB;YAC7B,CAAC,CAAC,uBAAA,IAAI,kEAAmB,MAAvB,IAAI,CAAqB,CAAC;IAChC,CAAC;;;;IAGC,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;AACJ,CAAC;;IAGC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAM,GAAG,IAAI,CAAC,GAAG,CAAC;IAE1C,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,UAAW,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACvD,MAAM,eAAe,GAAG,GAAG,GAAG,UAAU,CAAC;IAEzC,OAAO,IAAI,CAAA;;qDAEsC,UAAU;oDACX,eAAe;;KAE9D,CAAC;AACJ,CAAC;AAnCe,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAER;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CAA2B;AAC1B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;0CAAiB;AAJ/B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAqCzB","sourcesContent":["import { html, LitElement } from 'lit';\nimport { TemplateResult } from 'lit-html';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { styles } from './progress-bar.styles.js';\n\n@customElement('u-progress-bar')\nexport class UmProgressBar extends LitElement {\n  static override styles = [styles];\n\n  @property({type: Number}) value: number | undefined;\n  @property({type: Number}) max: number = 1;\n\n  protected override render(): TemplateResult {\n    return this.value === undefined\n      ? this.#renderIndeterminate()\n      : this.#renderDeterminate();\n  }\n\n  #renderIndeterminate(): TemplateResult {\n    return html`\n      <div class=\"indeterminate\">\n        <div class=\"bar track first\"></div>\n        <div class=\"bar active fast\"></div>\n        <div class=\"bar track middle\"></div>\n        <div class=\"bar active slow\"></div>\n        <div class=\"bar track last\"></div>\n      </div>\n    `;\n  }\n\n  #renderDeterminate(): TemplateResult {\n    const proportion = this.value! / this.max;\n\n    const percentage = Math.floor(proportion! * 1000) / 10;\n    const trackPercentage = 100 - percentage;\n\n    return html`\n      <div class=\"determinate\">\n        <div class=\"bar active\" style=\"flex-basis: ${percentage}%\"></div>\n        <div class=\"bar track\" style=\"flex-basis: ${trackPercentage}%\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-progress-bar': UmProgressBar;\n  }\n}\n"]}

package/progress/progress-bar.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=progress-bar.styles.d.ts.map

package/progress/progress-bar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.styles.d.ts","sourceRoot":"","sources":["../../src/progress/progress-bar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAqJlB,CAAC"}

package/progress/progress-bar.styles.js

@@ -0,0 +1,152 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_border-radius: var(--u-progress-bar-border-radius, var(--u-shape-corner-full, 9999px));
+    --_height: var(--u-progress-bar-height, 4px);
+  }
+
+  :host,
+  .determinate,
+  .indeterminate {
+    overflow: hidden;
+    border-radius: var(--_border-radius);
+  }
+
+  .determinate,
+  .indeterminate {
+    display: flex;
+    gap: 4px;
+  }
+
+  .indeterminate {
+    flex: 1;
+    margin-inline: -8px;
+    border-radius: var(--_border-radius);
+  }
+
+  .determinate {
+    margin-inline-end: -4px;
+  }
+  .determinate .bar {
+    transition: flex-basis 200ms linear;
+  }
+
+  .last {
+    flex-shrink: 1;
+    flex-basis: 100%;
+    animation: last 2.1s infinite linear;
+  }
+
+  .slow {
+    animation: slow 2.1s infinite linear;
+  }
+
+  .middle {
+    animation: middle 2.1s infinite linear;
+  }
+
+  .fast {
+    animation: fast 2.1s infinite linear;
+  }
+
+  .first {
+    animation: first 2.1s infinite linear;
+  }
+
+  .bar {
+    height: var(--_height);
+    border-radius: var(--_border-radius);
+    background: var(--u-progress-bar-color, var(--u-color-primary, rgb(103, 80, 164)));
+  }
+
+  .track {
+    background: var(--u-progress-bar-track-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
+    flex-shrink: 1;
+  }
+
+  @keyframes slow {
+    0% {
+      flex-basis: 0;
+    }
+    10% {
+      flex-basis: 50%;
+    }
+    20% {
+      flex-basis: 100%;
+    }
+    30% {
+      flex-basis: 0;
+    }
+  }
+  @keyframes last {
+    0% {
+      flex-basis: 100%;
+    }
+    10% {
+      flex-basis: 50%;
+    }
+    20% {
+      flex-basis: 0;
+    }
+    100% {
+      flex-basis: 0;
+    }
+  }
+  @keyframes middle {
+    10% {
+      flex-basis: 0;
+    }
+    20% {
+      flex-basis: 100%;
+    }
+    35% {
+      flex-basis: 100%;
+    }
+    45% {
+      flex-basis: 0;
+    }
+  }
+  @keyframes fast {
+    0% {
+      flex-basis: 0;
+    }
+    25% {
+      flex-basis: 0;
+    }
+    35% {
+      flex-basis: 100%;
+    }
+    45% {
+      flex-basis: 100%;
+    }
+    55% {
+      flex-basis: 0;
+    }
+  }
+  @keyframes first {
+    35% {
+      flex-basis: 0;
+    }
+    45% {
+      flex-basis: 100%;
+    }
+    100% {
+      flex-basis: 100%;
+    }
+  }
+  @keyframes fast-bar-pre {
+    0% {
+      flex-basis: 0;
+    }
+    60% {
+      flex-basis: 0;
+    }
+    90% {
+      flex-basis: 100%;
+    }
+    100% {
+      flex-basis: 100%;
+    }
+  }
+`;
+//# sourceMappingURL=progress-bar.styles.js.map

package/progress/progress-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../src/progress/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqJzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_border-radius: var(--u-progress-bar-border-radius, var(--u-shape-corner-full, 9999px));\n    --_height: var(--u-progress-bar-height, 4px);\n  }\n\n  :host,\n  .determinate,\n  .indeterminate {\n    overflow: hidden;\n    border-radius: var(--_border-radius);\n  }\n\n  .determinate,\n  .indeterminate {\n    display: flex;\n    gap: 4px;\n  }\n\n  .indeterminate {\n    flex: 1;\n    margin-inline: -8px;\n    border-radius: var(--_border-radius);\n  }\n\n  .determinate {\n    margin-inline-end: -4px;\n  }\n  .determinate .bar {\n    transition: flex-basis 200ms linear;\n  }\n\n  .last {\n    flex-shrink: 1;\n    flex-basis: 100%;\n    animation: last 2.1s infinite linear;\n  }\n\n  .slow {\n    animation: slow 2.1s infinite linear;\n  }\n\n  .middle {\n    animation: middle 2.1s infinite linear;\n  }\n\n  .fast {\n    animation: fast 2.1s infinite linear;\n  }\n\n  .first {\n    animation: first 2.1s infinite linear;\n  }\n\n  .bar {\n    height: var(--_height);\n    border-radius: var(--_border-radius);\n    background: var(--u-progress-bar-color, var(--u-color-primary, rgb(103, 80, 164)));\n  }\n\n  .track {\n    background: var(--u-progress-bar-track-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n    flex-shrink: 1;\n  }\n\n  @keyframes slow {\n    0% {\n      flex-basis: 0;\n    }\n    10% {\n      flex-basis: 50%;\n    }\n    20% {\n      flex-basis: 100%;\n    }\n    30% {\n      flex-basis: 0;\n    }\n  }\n  @keyframes last {\n    0% {\n      flex-basis: 100%;\n    }\n    10% {\n      flex-basis: 50%;\n    }\n    20% {\n      flex-basis: 0;\n    }\n    100% {\n      flex-basis: 0;\n    }\n  }\n  @keyframes middle {\n    10% {\n      flex-basis: 0;\n    }\n    20% {\n      flex-basis: 100%;\n    }\n    35% {\n      flex-basis: 100%;\n    }\n    45% {\n      flex-basis: 0;\n    }\n  }\n  @keyframes fast {\n    0% {\n      flex-basis: 0;\n    }\n    25% {\n      flex-basis: 0;\n    }\n    35% {\n      flex-basis: 100%;\n    }\n    45% {\n      flex-basis: 100%;\n    }\n    55% {\n      flex-basis: 0;\n    }\n  }\n  @keyframes first {\n    35% {\n      flex-basis: 0;\n    }\n    45% {\n      flex-basis: 100%;\n    }\n    100% {\n      flex-basis: 100%;\n    }\n  }\n  @keyframes fast-bar-pre {\n    0% {\n      flex-basis: 0;\n    }\n    60% {\n      flex-basis: 0;\n    }\n    90% {\n      flex-basis: 100%;\n    }\n    100% {\n      flex-basis: 100%;\n    }\n  }\n`;\n"]}

package/shared/base.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.styles.d.ts","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8BlB,CAAC"}
+{"version":3,"file":"base.styles.d.ts","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4BlB,CAAC"}

package/shared/base.styles.js

@@ -3,7 +3,6 @@ export const styles = css `
   :host,
   * {
     --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);
-    --_focus-ring-border-radius: var(--u-focus-ring-border-radius, inherit);
     font-family: var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     box-sizing: border-box;
     outline: 0;
@@ -14,7 +13,6 @@ export const styles = css `
     --_color-primary: var(--u-color-primary, rgb(103, 80, 164));
     animation: u-focus-pulse 500ms ease;
     animation-fill-mode: forwards;
-    border-radius: var(--_focus-ring-border-radius);
     outline-offset: var(--_focus-ring-outline-offset);
   }
 

package/shared/base.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\n    --_focus-ring-border-radius: var(--u-focus-ring-border-radius, inherit);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  :host(.force-focus-ring) .focus-ring,\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    border-radius: var(--_focus-ring-border-radius);\n    outline-offset: var(--_focus-ring-outline-offset);\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n`;\n"]}
+{"version":3,"file":"base.styles.js","sourceRoot":"","sources":["../../src/shared/base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host,\n  * {\n    --_focus-ring-outline-offset: var(--u-focus-ring-outline-offset, 2px);\n    font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    box-sizing: border-box;\n    outline: 0;\n  }\n\n  :host(.force-focus-ring) .focus-ring,\n  .focus-ring:focus-visible {\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    animation: u-focus-pulse 500ms ease;\n    animation-fill-mode: forwards;\n    outline-offset: var(--_focus-ring-outline-offset);\n  }\n\n  @keyframes u-focus-pulse {\n    0% {\n      outline: 0 solid var(--_color-primary);\n    }\n    50% {\n      outline: 6px solid var(--_color-primary);\n    }\n    100% {\n      outline: 4px solid var(--_color-primary);\n    }\n  }\n`;\n"]}

package/shared/events/dispatch-event.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=dispatch-event.d.ts.map

package/shared/events/dispatch-event.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dispatch-event.d.ts","sourceRoot":"","sources":["../../../src/shared/events/dispatch-event.ts"],"names":[],"mappings":""}

package/shared/events/dispatch-event.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=dispatch-event.js.map

package/shared/events/dispatch-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dispatch-event.js","sourceRoot":"","sources":["../../../src/shared/events/dispatch-event.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/shared/events/redispatch-event.d.ts

@@ -0,0 +1,2 @@
+export declare function redispatchEvent(element: Element, event: Event): boolean;
+//# sourceMappingURL=redispatch-event.d.ts.map

package/shared/events/redispatch-event.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"redispatch-event.d.ts","sourceRoot":"","sources":["../../../src/shared/events/redispatch-event.ts"],"names":[],"mappings":"AAAA,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,WAe7D"}

package/shared/events/redispatch-event.js

@@ -0,0 +1,14 @@
+export function redispatchEvent(element, event) {
+    // For bubbling events in SSR light DOM (or composed), stop their propagation
+    // and dispatch the copy.
+    if (event.bubbles && (!element.shadowRoot || event.composed)) {
+        event.stopPropagation();
+    }
+    const copy = Reflect.construct(event.constructor, [event.type, event]);
+    const dispatched = element.dispatchEvent(copy);
+    if (!dispatched) {
+        event.preventDefault();
+    }
+    return dispatched;
+}
+//# sourceMappingURL=redispatch-event.js.map

package/shared/events/redispatch-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"redispatch-event.js","sourceRoot":"","sources":["../../../src/shared/events/redispatch-event.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe,CAAC,OAAgB,EAAE,KAAY;IAC5D,6EAA6E;IAC7E,yBAAyB;IACzB,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC,UAAU,IAAI,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;QAC7D,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IACvE,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAE/C,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["export function redispatchEvent(element: Element, event: Event) {\n  // For bubbling events in SSR light DOM (or composed), stop their propagation\n  // and dispatch the copy.\n  if (event.bubbles && (!element.shadowRoot || event.composed)) {\n    event.stopPropagation();\n  }\n\n  const copy = Reflect.construct(event.constructor, [event.type, event]);\n  const dispatched = element.dispatchEvent(copy);\n\n  if (!dispatched) {\n    event.preventDefault();\n  }\n\n  return dispatched;\n}\n"]}

package/text-field/text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,qBACa,WAAY,SAAQ,eAAe;;IAE9C,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAIF,IACI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAItB;IAEqC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAErD,KAAK,EAAG,gBAAgB,CAAC;IAEhC,KAAK;cAIK,aAAa,IAAI,kBAAkB;CAsBvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAW,MAAM,KAAK,CAAC;AAMxD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAE/E,qBACa,WAAY,SAAQ,eAAe;;IAE9C,OAAgB,MAAM,EAAE,cAAc,CAGpC;IAIF,IACI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAItB;IAEqC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAErD,KAAK,EAAG,gBAAgB,CAAC;IAEhC,KAAK;cAIK,aAAa,IAAI,kBAAkB;CA4BvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/text-field/text-field.js

@@ -39,20 +39,26 @@ let UmTextField = class UmTextField extends UmTextFieldBase {
         this.input.focus();
     }
     renderControl() {
-        const prefix = html `<span class="prefix" slot="prefix">${this.prefixText || html `<slot name="prefix"></slot>`}</span>`;
-        const suffix = html `<span class="suffix" slot="suffix">${this.suffixText || html `<slot name="suffix"></slot>`}</span>`;
+        // const prefix = html`<span class="prefix" slot="prefix">${this.prefixText || html`<slot name="prefix"></slot>`}</span>`;
+        // const suffix = html`<span class="suffix" slot="suffix">${this.suffixText || html`<slot name="suffix"></slot>`}</span>`;
         return html `
-      ${prefix}
-      <input
-        part="input"
-        id=${this.id || nothing}
-        aria-labelledby="label"
-        aria-describedBy="supporting-text"
-        ?disabled=${this.disabled}
-        placeholder=${this.placeholder || nothing}
-        .value=${live(__classPrivateFieldGet(this, _UmTextField_value, "f"))}
-        @input=${__classPrivateFieldGet(this, _UmTextField_instances, "m", _UmTextField_handleInput)} />
-      ${suffix}`;
+      <slot class="prefix" name="prefix">
+        <span>${this.prefixText}</span>
+      </slot>
+      <div class="input">
+        <input
+          part="input"
+          id=${this.id || nothing}
+          aria-labelledby="label"
+          aria-describedBy="supporting-text"
+          ?disabled=${this.disabled}
+          placeholder=${this.placeholder || nothing}
+          .value=${live(__classPrivateFieldGet(this, _UmTextField_value, "f"))}
+          @input=${__classPrivateFieldGet(this, _UmTextField_instances, "m", _UmTextField_handleInput)} />
+      </div>
+      <slot class="suffix" name="suffix">
+        <span>${this.suffixText}</span>
+      </slot>`;
     }
 };
 _UmTextField_value = new WeakMap();

package/text-field/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAGxE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;IAAzC;;;QAOL,6BAAiB,EAAE,EAAC;IA2CtB,CAAC;IAxCC,IAAI,KAAK;QACP,OAAO,uBAAA,IAAI,0BAAO,CAAC;IACrB,CAAC;IACD,IAAI,KAAK,CAAC,KAAa;QACrB,uBAAA,IAAI,sBAAU,KAAK,MAAA,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAOQ,KAAK;QACZ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAEkB,aAAa;QAE9B,MAAM,MAAM,GAAG,IAAI,CAAA,sCAAsC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAA,6BAA6B,SAAS,CAAC;QACvH,MAAM,MAAM,GAAG,IAAI,CAAA,sCAAsC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAA,6BAA6B,SAAS,CAAC;QAEvH,OAAO,IAAI,CAAA;QACP,MAAM;;;aAGD,IAAI,CAAC,EAAE,IAAI,OAAO;;;oBAGX,IAAI,CAAC,QAAQ;sBACX,IAAI,CAAC,WAAW,IAAI,OAAO;iBAChC,IAAI,CAAC,uBAAA,IAAI,0BAAO,CAAC;iBACjB,uBAAA,IAAI,wDAAa;QAC1B,MAAM,EAAE,CAAC;IACf,CAAC;;;;;IAGC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAChC,CAAC;AA/Ce,kBAAM,GAAmB;IACvC,eAAe,CAAC,MAAM;IACtB,MAAM;CACP,AAHqB,CAGpB;AAKF;IADC,QAAQ,EAAE;wCAGV;AAOqC;IAArC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC;+CAAgC;AAC/B;IAArC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC;+CAAgC;AAErD;IAAf,KAAK,CAAC,OAAO,CAAC;0CAA0B;AAtB9B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAkDvB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { styles } from './text-field.styles.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\n\n@customElement('u-text-field')\nexport class UmTextField extends UmTextFieldBase {\n\n  static override styles: CSSResultGroup = [\n    UmTextFieldBase.styles,\n    styles\n  ];\n\n  #value: string = '';\n\n  @property()\n  get value() {\n    return this.#value;\n  }\n  set value(value: string) {\n    this.#value = value;\n    this.empty = !value;\n    this.elementInternals.setFormValue(value);\n  }\n\n  @property({attribute: 'prefix-text'}) prefixText: string | undefined;\n  @property({attribute: 'suffix-text'}) suffixText: string | undefined;\n\n  @query('input') input!: HTMLInputElement;\n\n  override focus() {\n    this.input.focus();\n  }\n\n  protected override renderControl(): HTMLTemplateResult {\n\n    const prefix = html`<span class=\"prefix\" slot=\"prefix\">${this.prefixText || html`<slot name=\"prefix\"></slot>`}</span>`;\n    const suffix = html`<span class=\"suffix\" slot=\"suffix\">${this.suffixText || html`<slot name=\"suffix\"></slot>`}</span>`;\n\n    return html`\n      ${prefix}\n      <input\n        part=\"input\"\n        id=${this.id || nothing}\n        aria-labelledby=\"label\"\n        aria-describedBy=\"supporting-text\"\n        ?disabled=${this.disabled}\n        placeholder=${this.placeholder || nothing}\n        .value=${live(this.#value)}\n        @input=${this.#handleInput} />\n      ${suffix}`;\n  }\n\n  #handleInput() {\n    this.value = this.input.value;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-text-field': UmTextField;\n  }\n}\n"]}
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/text-field/text-field.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,IAAI,EAAsB,OAAO,EAAE,MAAM,KAAK,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAGxE,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,eAAe;IAAzC;;;QAOL,6BAAiB,EAAE,EAAC;IAiDtB,CAAC;IA9CC,IAAI,KAAK;QACP,OAAO,uBAAA,IAAI,0BAAO,CAAC;IACrB,CAAC;IACD,IAAI,KAAK,CAAC,KAAa;QACrB,uBAAA,IAAI,sBAAU,KAAK,MAAA,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC;QACpB,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAC5C,CAAC;IAOQ,KAAK;QACZ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAEkB,aAAa;QAE9B,0HAA0H;QAC1H,0HAA0H;QAE1H,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,UAAU;;;;;eAKhB,IAAI,CAAC,EAAE,IAAI,OAAO;;;sBAGX,IAAI,CAAC,QAAQ;wBACX,IAAI,CAAC,WAAW,IAAI,OAAO;mBAChC,IAAI,CAAC,uBAAA,IAAI,0BAAO,CAAC;mBACjB,uBAAA,IAAI,wDAAa;;;gBAGpB,IAAI,CAAC,UAAU;cACjB,CAAC;IACb,CAAC;;;;;IAGC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;AAChC,CAAC;AArDe,kBAAM,GAAmB;IACvC,eAAe,CAAC,MAAM;IACtB,MAAM;CACP,AAHqB,CAGpB;AAKF;IADC,QAAQ,EAAE;wCAGV;AAOqC;IAArC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC;+CAAgC;AAC/B;IAArC,QAAQ,CAAC,EAAC,SAAS,EAAE,aAAa,EAAC,CAAC;+CAAgC;AAErD;IAAf,KAAK,CAAC,OAAO,CAAC;0CAA0B;AAtB9B,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAwDvB","sourcesContent":["import { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { styles } from './text-field.styles.js';\n\nimport { UmTextFieldBase } from '../shared/text-field-base/text-field-base.js';\n\n@customElement('u-text-field')\nexport class UmTextField extends UmTextFieldBase {\n\n  static override styles: CSSResultGroup = [\n    UmTextFieldBase.styles,\n    styles\n  ];\n\n  #value: string = '';\n\n  @property()\n  get value() {\n    return this.#value;\n  }\n  set value(value: string) {\n    this.#value = value;\n    this.empty = !value;\n    this.elementInternals.setFormValue(value);\n  }\n\n  @property({attribute: 'prefix-text'}) prefixText: string | undefined;\n  @property({attribute: 'suffix-text'}) suffixText: string | undefined;\n\n  @query('input') input!: HTMLInputElement;\n\n  override focus() {\n    this.input.focus();\n  }\n\n  protected override renderControl(): HTMLTemplateResult {\n\n    // const prefix = html`<span class=\"prefix\" slot=\"prefix\">${this.prefixText || html`<slot name=\"prefix\"></slot>`}</span>`;\n    // const suffix = html`<span class=\"suffix\" slot=\"suffix\">${this.suffixText || html`<slot name=\"suffix\"></slot>`}</span>`;\n\n    return html`\n      <slot class=\"prefix\" name=\"prefix\">\n        <span>${this.prefixText}</span>\n      </slot>\n      <div class=\"input\">\n        <input\n          part=\"input\"\n          id=${this.id || nothing}\n          aria-labelledby=\"label\"\n          aria-describedBy=\"supporting-text\"\n          ?disabled=${this.disabled}\n          placeholder=${this.placeholder || nothing}\n          .value=${live(this.#value)}\n          @input=${this.#handleInput} />\n      </div>\n      <slot class=\"suffix\" name=\"suffix\">\n        <span>${this.suffixText}</span>\n      </slot>`;\n  }\n\n  #handleInput() {\n    this.value = this.input.value;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-text-field': UmTextField;\n  }\n}\n"]}

package/text-field/text-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.styles.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiBlB,CAAC"}
+{"version":3,"file":"text-field.styles.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAwBlB,CAAC"}

package/text-field/text-field.styles.js

@@ -1,19 +1,26 @@
 import { css } from 'lit';
 export const styles = css `
-  .prefix {
+  .prefix span:empty,
+  .suffix span:empty {
+    display: none;
+  }
+
+  .prefix::slotted(*),
+  .prefix span {
     color: var(--u-field-prefix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));
     margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));
   }
 
-  .suffix {
+  .suffix::slotted(*),
+  .suffix span {
     color: var(--u-field-suffix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));
     margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));
   }
 
-  :host([disabled]) .prefix {
+  :host([disabled]) .prefix::slotted(*) {
     color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));
   }
-  :host([disabled]) .suffix {
+  :host([disabled]) .suffix::slotted(*) {
     color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));
   }
 `;