@luzmo/lucero 1.0.1-alpha.63 → 1.0.1-alpha.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,20 +15,20 @@
15
15
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
16
  * SOFTWARE.
17
17
  * */
18
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("lit"),t=require("lit/decorators.js"),u=require("../base-DxRGeCrb.cjs"),p=require("../get-label-from-slot-BdhDIHGc.cjs"),c=require("../sized-mixin-DcvJLFeo.cjs"),h="@media (forced-colors: active){.track{--highcontrast-progress-bar-track-border-color: ButtonFace;--highcontrast-progress-bar-fill-color: Highlight;border:1px solid ButtonText;forced-color-adjust:none}}:host{--progress-bar-size: 240px;--progress-bar-min-size: 48px;--progress-bar-thickness: 4px;--progress-bar-border-radius: 2px;--progress-bar-font-size: .75rem;--progress-bar-line-height: 1.3;--progress-bar-label-spacing: .625rem;--progress-bar-animation-duration: 1.5s;display:inline-flex;position:relative;flex-flow:wrap;align-items:center;justify-content:space-between;inline-size:var(--luzmo-progress-bar-size, var(--progress-bar-size));min-inline-size:var(--luzmo-progress-bar-min-size, var(--progress-bar-min-size));vertical-align:top}slot:not([name]){display:none}.label,.percentage{margin-block-end:var(--luzmo-progress-bar-label-spacing, var(--progress-bar-label-spacing));font-family:var(--luzmo-progress-bar-font-family, var(--luzmo-font-family));font-size:var(--luzmo-progress-bar-font-size, var(--progress-bar-font-size));line-height:var(--luzmo-progress-bar-line-height, var(--progress-bar-line-height));color:var(--luzmo-progress-bar-text-color, var(--luzmo-font-color))}.label{flex:1;text-align:start}.percentage{align-self:flex-start;margin-inline-start:.625rem;text-align:end}::slotted([slot=value]){font-family:var(--luzmo-progress-bar-font-family, var(--luzmo-font-family));font-size:var(--luzmo-progress-bar-font-size, var(--progress-bar-font-size));line-height:var(--luzmo-progress-bar-line-height, var(--progress-bar-line-height));color:var(--luzmo-progress-bar-text-color, var(--luzmo-font-color));border:1px solid var(--luzmo-progress-bar-value-border-color, var(--luzmo-border-color, #d0d0d0));border-radius:var(--luzmo-progress-bar-value-border-radius, 4px);padding:.1em .4em}.track{inline-size:100%;block-size:var(--luzmo-progress-bar-thickness, var(--progress-bar-thickness));background:var(--highcontrast-progress-bar-track-border-color, var(--luzmo-progress-bar-track-color, var(--luzmo-border-color)));border-radius:var(--luzmo-progress-bar-border-radius, var(--progress-bar-border-radius));overflow:hidden}.fill{block-size:var(--luzmo-progress-bar-thickness, var(--progress-bar-thickness));background:var(--highcontrast-progress-bar-fill-color, var(--luzmo-progress-bar-fill-color, var(--luzmo-primary)));border-radius:var(--luzmo-progress-bar-border-radius, var(--progress-bar-border-radius));border:none;transition:width var(--luzmo-animation-duration, 1s)}:host([variant=positive]) .fill{background:var(--highcontrast-progress-bar-fill-color, var(--luzmo-progress-bar-fill-color-positive, var(--luzmo-positive-color, rgb(0, 122, 77))))}:host([variant=notice]) .fill{background:var(--highcontrast-progress-bar-fill-color, var(--luzmo-progress-bar-fill-color-notice, rgb(229, 127, 0)))}:host([variant=negative]) .fill{background:var(--highcontrast-progress-bar-fill-color, var(--luzmo-progress-bar-fill-color-negative, var(--luzmo-negative-color, rgb(211, 21, 16))))}:host([indeterminate]) .fill{position:relative;inline-size:33%;animation-name:indeterminate-loop-ltr;animation-duration:var(--luzmo-progress-bar-animation-duration, var(--progress-bar-animation-duration));animation-timing-function:cubic-bezier(.65,0,.35,1);animation-iteration-count:infinite;will-change:transform;transition:none}@keyframes indeterminate-loop-ltr{0%{transform:translate(-100%)}to{transform:translate(calc(var(--luzmo-progress-bar-size, var(--progress-bar-size))))}}:host([side-label]){flex-flow:row;align-items:center}:host([side-label]) .track{flex:1 1 var(--luzmo-progress-bar-size, var(--progress-bar-size))}:host([side-label]) .label{flex-grow:0;margin-block-end:0;margin-inline-end:.625rem}:host([side-label]) .percentage{order:3;margin-block-end:0;margin-inline-start:.625rem;text-align:end}:host([side-label]:not([hide-value])) .percentage{order:3;margin-block-end:0;margin-inline-start:.625rem}:host([static-color=white]) .fill{background:var(--luzmo-progress-bar-fill-color-over-background, rgb(255, 255, 255))}:host([static-color=white]) .track{background:var(--luzmo-progress-bar-track-color-over-background, rgba(255, 255, 255, .15))}:host([static-color=white]) .label,:host([static-color=white]) .percentage{color:var(--luzmo-progress-bar-text-color-over-background, rgb(255, 255, 255))}:host([static-color=black]) .fill{background:var(--luzmo-progress-bar-fill-color-over-background, rgb(0, 0, 0))}:host([static-color=black]) .track{background:var(--luzmo-progress-bar-track-color-over-background, rgba(0, 0, 0, .25))}:host([static-color=black]) .label,:host([static-color=black]) .percentage{color:var(--luzmo-progress-bar-text-color-over-background, rgb(0, 0, 0))}:host([size=s]){--progress-bar-thickness: 2px;--progress-bar-font-size: .688rem}:host([size=l]){--progress-bar-thickness: 6px;--progress-bar-font-size: .875rem}:host([size=xl]){--progress-bar-thickness: 8px;--progress-bar-font-size: 1rem}";var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,a=(n,r,i,l)=>{for(var o=l>1?void 0:l?v(r,i):r,b=n.length-1,g;b>=0;b--)(g=n[b])&&(o=(l?g(r,i,o):g(o))||o);return l&&o&&m(r,i,o),o};class e extends c.SizedMixin(u.LuzmoElement,{validSizes:["s","m","l","xl"]}){constructor(){super(...arguments),this.indeterminate=!1,this.label="",this.progress=0,this.sideLabel=!1,this.hideValue=!1,this.valueLabel="",this._variant="",this._hasValueSlotContent=!1}static get styles(){return[s.unsafeCSS(h)]}get variant(){return this._variant}set variant(r){if(r!==this.variant){if(["positive","notice","negative"].includes(r)){this.setAttribute("variant",r),this._variant=r;return}this.removeAttribute("variant"),this._variant=""}}get _valueText(){const r=Math.max(0,Math.min(100,this.progress));return this.valueLabel||`${r}%`}render(){const r=Math.max(0,Math.min(100,this.progress));return s.html`
18
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),t=require("lit/decorators.js"),p=require("../base-DxRGeCrb.cjs"),c=require("../get-label-from-slot-BdhDIHGc.cjs"),u=require("../sized-mixin-DcvJLFeo.cjs"),h=":host{--progress-bar-size: 240px;--progress-bar-animation-duration: 1.5s;display:inline-flex;position:relative;flex-flow:wrap;align-items:center;justify-content:space-between;inline-size:var(--luzmo-progress-bar-size, var(--progress-bar-size));min-inline-size:var(--luzmo-progress-bar-min-size, var(--progress-bar-min-size));vertical-align:top}slot:not([name]){display:none}.label,.percentage{margin-block-end:var(--luzmo-progress-bar-label-spacing, var(--progress-bar-label-spacing));font-family:var(--luzmo-progress-bar-font-family, var(--progress-bar-font-family));font-size:var(--luzmo-progress-bar-font-size, var(--progress-bar-font-size));line-height:var(--luzmo-progress-bar-line-height, var(--progress-bar-line-height));color:var(--luzmo-progress-bar-text-color, var(--progress-bar-text-color))}.label{flex:1;text-align:start}.percentage{align-self:flex-start;margin-inline-start:var(--luzmo-progress-bar-label-spacing, var(--progress-bar-label-spacing));text-align:end}::slotted([slot=value]){font-family:var(--luzmo-progress-bar-font-family, var(--progress-bar-font-family));font-size:var(--luzmo-progress-bar-font-size, var(--progress-bar-font-size));line-height:var(--luzmo-progress-bar-line-height, var(--progress-bar-line-height));color:var(--luzmo-progress-bar-text-color, var(--progress-bar-text-color))}.track{inline-size:100%;block-size:var(--luzmo-progress-bar-thickness, var(--progress-bar-thickness));background:var(--highcontrast-progress-bar-track-border-color, var(--luzmo-progress-bar-track-color, var(--progress-bar-track-color)));border-radius:var(--luzmo-progress-bar-border-radius, var(--progress-bar-border-radius));overflow:hidden}.fill{block-size:var(--luzmo-progress-bar-thickness, var(--progress-bar-thickness));background:var(--highcontrast-progress-bar-fill-color, var(--luzmo-progress-bar-fill-color, var(--progress-bar-fill-color)));border-radius:var(--luzmo-progress-bar-border-radius, var(--progress-bar-border-radius));border:none;transition:width var(--luzmo-progress-bar-fill-transition-duration, var(--progress-bar-fill-transition-duration))}:host([indeterminate]) .fill{position:relative;inline-size:33%;animation-name:indeterminate-loop-ltr;animation-duration:var(--luzmo-progress-bar-animation-duration, var(--progress-bar-animation-duration));animation-timing-function:cubic-bezier(.65,0,.35,1);animation-iteration-count:infinite;will-change:transform;transition:none}@keyframes indeterminate-loop-ltr{0%{transform:translate(-100%)}to{transform:translate(calc(var(--luzmo-progress-bar-size, var(--progress-bar-size))))}}:host([side-label]){flex-flow:row;align-items:center}:host([side-label]) .track{flex:1 1 var(--luzmo-progress-bar-size, var(--progress-bar-size))}:host([side-label]) .label{flex-grow:0;margin-block-end:0;margin-inline-end:var(--luzmo-progress-bar-label-spacing, var(--progress-bar-label-spacing))}:host([side-label]) .percentage{order:3;margin-block-end:0;margin-inline-start:var(--luzmo-progress-bar-label-spacing, var(--progress-bar-label-spacing));text-align:end}:host([side-label]:not([hide-value])) .percentage{order:3;margin-block-end:0;margin-inline-start:var(--luzmo-progress-bar-label-spacing, var(--progress-bar-label-spacing))}:host([static-color=white]) .fill{background:var(--luzmo-progress-bar-fill-color-over-background, rgb(255, 255, 255))}:host([static-color=white]) .track{background:var(--luzmo-progress-bar-track-color-over-background, rgba(255, 255, 255, .15))}:host([static-color=white]) .label,:host([static-color=white]) .percentage{color:var(--luzmo-progress-bar-text-color-over-background, rgb(255, 255, 255))}:host([static-color=black]) .fill{background:var(--luzmo-progress-bar-fill-color-over-background, rgb(0, 0, 0))}:host([static-color=black]) .track{background:var(--luzmo-progress-bar-track-color-over-background, rgba(0, 0, 0, .25))}:host([static-color=black]) .label,:host([static-color=black]) .percentage{color:var(--luzmo-progress-bar-text-color-over-background, rgb(0, 0, 0))}@media (forced-colors: active){.track{--highcontrast-progress-bar-track-border-color: ButtonFace;--highcontrast-progress-bar-fill-color: Highlight;border:1px solid ButtonText;forced-color-adjust:none}}:host{--progress-bar-min-size: var(--luzmo-component-height-xl);--progress-bar-thickness: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--progress-bar-border-radius: var(--luzmo-spacing-1);--progress-bar-font-family: var(--luzmo-font-family);--progress-bar-font-size: var(--luzmo-font-size-m);--progress-bar-line-height: var(--luzmo-line-height);--progress-bar-label-spacing: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--progress-bar-text-color: var(--luzmo-font-color);--progress-bar-track-color: var(--luzmo-border-color);--progress-bar-fill-color: var(--luzmo-primary);--progress-bar-fill-transition-duration: var(--luzmo-animation-duration)}:host([size=xs]){--progress-bar-thickness: var(--luzmo-spacing-1);--progress-bar-font-size: var(--luzmo-font-size-xs)}:host([size=s]){--progress-bar-thickness: var(--luzmo-spacing-2);--progress-bar-font-size: var(--luzmo-font-size-s)}:host([size=l]){--progress-bar-thickness: var(--luzmo-spacing-3);--progress-bar-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--progress-bar-thickness: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-2) );--progress-bar-font-size: var(--luzmo-font-size-xl)}:host([variant=positive]){--progress-bar-fill-color: var(--luzmo-positive-color)}:host([variant=notice]){--progress-bar-fill-color: var(--luzmo-notice-color)}:host([variant=negative]){--progress-bar-fill-color: var(--luzmo-negative-color)}";var v=Object.defineProperty,m=Object.getOwnPropertyDescriptor,a=(n,r,i,l)=>{for(var s=l>1?void 0:l?m(r,i):r,b=n.length-1,g;b>=0;b--)(g=n[b])&&(s=(l?g(r,i,s):g(s))||s);return l&&s&&v(r,i,s),s};class e extends u.SizedMixin(p.LuzmoElement,{validSizes:["xs","s","m","l","xl"]}){constructor(){super(...arguments),this.indeterminate=!1,this.label="",this.progress=0,this.sideLabel=!1,this.hideValue=!1,this.valueLabel="",this._variant="",this._hasValueSlotContent=!1}static get styles(){return[o.unsafeCSS(h)]}get variant(){return this._variant}set variant(r){if(r!==this.variant){if(["positive","notice","negative"].includes(r)){this.setAttribute("variant",r),this._variant=r;return}this.removeAttribute("variant"),this._variant=""}}get _valueText(){const r=Math.max(0,Math.min(100,this.progress));return this.valueLabel||`${r}%`}render(){const r=Math.max(0,Math.min(100,this.progress));return o.html`
19
19
  <slot @slotchange=${this.handleSlotchange}></slot>
20
- ${this.label?s.html`<span class="label">${this.label}</span>`:s.nothing}
21
- ${!this.indeterminate&&!this.hideValue?s.html`<span class="percentage">
20
+ ${this.label?o.html`<span class="label">${this.label}</span>`:o.nothing}
21
+ ${!this.indeterminate&&!this.hideValue?o.html`<span class="percentage">
22
22
  <slot
23
23
  name="value"
24
24
  @slotchange=${this.handleValueSlotchange}
25
25
  ></slot>
26
- ${this._hasValueSlotContent?s.nothing:this._valueText}
27
- </span>`:s.nothing}
26
+ ${this._hasValueSlotContent?o.nothing:this._valueText}
27
+ </span>`:o.nothing}
28
28
  <div class="track">
29
29
  <div
30
30
  class="fill"
31
31
  style=${this.indeterminate?"":`width: ${r}%;`}
32
32
  ></div>
33
33
  </div>
34
- `}handleSlotchange(){const r=p.getLabelFromSlot(this.label,this.slotEl);r&&(this.label=r)}handleValueSlotchange(r){const i=r.target;this._hasValueSlotContent=i.assignedNodes().length>0,this.requestUpdate()}firstUpdated(r){super.firstUpdated(r),this.hasAttribute("role")||this.setAttribute("role","progressbar")}updated(r){super.updated(r),r.has("indeterminate")&&(this.indeterminate?(this.removeAttribute("aria-valuemin"),this.removeAttribute("aria-valuemax"),this.removeAttribute("aria-valuenow"),this.removeAttribute("aria-valuetext")):(this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax","100"),this.setAttribute("aria-valuenow",""+this.progress),this.valueLabel&&this.setAttribute("aria-valuetext",this.valueLabel))),!this.indeterminate&&r.has("progress")&&this.setAttribute("aria-valuenow",""+this.progress),!this.indeterminate&&r.has("valueLabel")&&(this.valueLabel?this.setAttribute("aria-valuetext",this.valueLabel):this.removeAttribute("aria-valuetext")),r.has("label")&&(this.label.length>0?this.setAttribute("aria-label",this.label):r.get("label")===this.getAttribute("aria-label")&&this.removeAttribute("aria-label"))}}a([t.property({type:Boolean,reflect:!0})],e.prototype,"indeterminate",2);a([t.property({type:String})],e.prototype,"label",2);a([t.property({type:Number})],e.prototype,"progress",2);a([t.property({reflect:!0,attribute:"static-color"})],e.prototype,"staticColor",2);a([t.property({type:Boolean,reflect:!0,attribute:"side-label"})],e.prototype,"sideLabel",2);a([t.property({type:Boolean,reflect:!0,attribute:"hide-value"})],e.prototype,"hideValue",2);a([t.property({type:String,attribute:"value-label"})],e.prototype,"valueLabel",2);a([t.property({type:String})],e.prototype,"variant",1);a([t.query("slot:not([name])")],e.prototype,"slotEl",2);customElements.get("luzmo-progress-bar")||customElements.define("luzmo-progress-bar",e);exports.LuzmoProgressBar=e;
34
+ `}handleSlotchange(){const r=c.getLabelFromSlot(this.label,this.slotEl);r&&(this.label=r)}handleValueSlotchange(r){const i=r.target;this._hasValueSlotContent=i.assignedNodes().length>0,this.requestUpdate()}firstUpdated(r){super.firstUpdated(r),this.hasAttribute("role")||this.setAttribute("role","progressbar")}updated(r){super.updated(r),r.has("indeterminate")&&(this.indeterminate?(this.removeAttribute("aria-valuemin"),this.removeAttribute("aria-valuemax"),this.removeAttribute("aria-valuenow"),this.removeAttribute("aria-valuetext")):(this.setAttribute("aria-valuemin","0"),this.setAttribute("aria-valuemax","100"),this.setAttribute("aria-valuenow",""+this.progress),this.valueLabel&&this.setAttribute("aria-valuetext",this.valueLabel))),!this.indeterminate&&r.has("progress")&&this.setAttribute("aria-valuenow",""+this.progress),!this.indeterminate&&r.has("valueLabel")&&(this.valueLabel?this.setAttribute("aria-valuetext",this.valueLabel):this.removeAttribute("aria-valuetext")),r.has("label")&&(this.label.length>0?this.setAttribute("aria-label",this.label):r.get("label")===this.getAttribute("aria-label")&&this.removeAttribute("aria-label"))}}a([t.property({type:Boolean,reflect:!0})],e.prototype,"indeterminate",2);a([t.property({type:String})],e.prototype,"label",2);a([t.property({type:Number})],e.prototype,"progress",2);a([t.property({reflect:!0,attribute:"static-color"})],e.prototype,"staticColor",2);a([t.property({type:Boolean,reflect:!0,attribute:"side-label"})],e.prototype,"sideLabel",2);a([t.property({type:Boolean,reflect:!0,attribute:"hide-value"})],e.prototype,"hideValue",2);a([t.property({type:String,attribute:"value-label"})],e.prototype,"valueLabel",2);a([t.property({type:String})],e.prototype,"variant",1);a([t.query("slot:not([name])")],e.prototype,"slotEl",2);customElements.get("luzmo-progress-bar")||customElements.define("luzmo-progress-bar",e);exports.LuzmoProgressBar=e;
@@ -16,31 +16,31 @@
16
16
  * SOFTWARE.
17
17
  * */
18
18
  import { unsafeCSS as g, nothing as c, html as m } from "lit";
19
- import { property as l, query as d } from "lit/decorators.js";
20
- import { L as p } from "../base-DA-IfpPk.js";
21
- import { g as z } from "../get-label-from-slot-CkmTlA3t.js";
19
+ import { property as l, query as p } from "lit/decorators.js";
20
+ import { L as z } from "../base-DA-IfpPk.js";
21
+ import { g as d } from "../get-label-from-slot-CkmTlA3t.js";
22
22
  import { S as h } from "../sized-mixin-cJbo3PKR.js";
23
23
  const b = () => {
24
24
  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
25
- const t = document.createElement("style");
26
- t.setAttribute("data-luzmo-vars", ""), t.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-notice-color: rgb(229, 127, 0);--luzmo-seafoam-color: rgb(0, 140, 140);--luzmo-indigo-color: rgb(68, 52, 255);--luzmo-purple-color: rgb(112, 48, 210);--luzmo-fuchsia-color: rgb(205, 30, 170);--luzmo-magenta-color: rgb(203, 36, 98);--luzmo-yellow-color: rgb(228, 208, 0);--luzmo-gray-color: rgb(110, 110, 110);--luzmo-red-color: rgb(202, 34, 28);--luzmo-orange-color: rgb(218, 123, 17);--luzmo-chartreuse-color: rgb(85, 135, 0);--luzmo-celery-color: rgb(48, 134, 22);--luzmo-green-color: rgb(20, 150, 101);--luzmo-cyan-color: rgb(0, 134, 180);--luzmo-blue-color: rgb(26, 119, 233);--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(t);
25
+ const a = document.createElement("style");
26
+ a.setAttribute("data-luzmo-vars", ""), a.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-notice-color: rgb(229, 127, 0);--luzmo-seafoam-color: rgb(0, 140, 140);--luzmo-indigo-color: rgb(68, 52, 255);--luzmo-purple-color: rgb(112, 48, 210);--luzmo-fuchsia-color: rgb(205, 30, 170);--luzmo-magenta-color: rgb(203, 36, 98);--luzmo-yellow-color: rgb(228, 208, 0);--luzmo-gray-color: rgb(110, 110, 110);--luzmo-red-color: rgb(202, 34, 28);--luzmo-orange-color: rgb(218, 123, 17);--luzmo-chartreuse-color: rgb(85, 135, 0);--luzmo-celery-color: rgb(48, 134, 22);--luzmo-green-color: rgb(20, 150, 101);--luzmo-cyan-color: rgb(0, 134, 180);--luzmo-blue-color: rgb(26, 119, 233);--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(a);
27
27
  }
28
28
  };
29
29
  b();
30
- const f = "@media (forced-colors: active){.track{--highcontrast-progress-bar-track-border-color: ButtonFace;--highcontrast-progress-bar-fill-color: Highlight;border:1px solid ButtonText;forced-color-adjust:none}}:host{--progress-bar-size: 240px;--progress-bar-min-size: 48px;--progress-bar-thickness: 4px;--progress-bar-border-radius: 2px;--progress-bar-font-size: .75rem;--progress-bar-line-height: 1.3;--progress-bar-label-spacing: .625rem;--progress-bar-animation-duration: 1.5s;display:inline-flex;position:relative;flex-flow:wrap;align-items:center;justify-content:space-between;inline-size:var(--luzmo-progress-bar-size, var(--progress-bar-size));min-inline-size:var(--luzmo-progress-bar-min-size, var(--progress-bar-min-size));vertical-align:top}slot:not([name]){display:none}.label,.percentage{margin-block-end:var(--luzmo-progress-bar-label-spacing, var(--progress-bar-label-spacing));font-family:var(--luzmo-progress-bar-font-family, var(--luzmo-font-family));font-size:var(--luzmo-progress-bar-font-size, var(--progress-bar-font-size));line-height:var(--luzmo-progress-bar-line-height, var(--progress-bar-line-height));color:var(--luzmo-progress-bar-text-color, var(--luzmo-font-color))}.label{flex:1;text-align:start}.percentage{align-self:flex-start;margin-inline-start:.625rem;text-align:end}::slotted([slot=value]){font-family:var(--luzmo-progress-bar-font-family, var(--luzmo-font-family));font-size:var(--luzmo-progress-bar-font-size, var(--progress-bar-font-size));line-height:var(--luzmo-progress-bar-line-height, var(--progress-bar-line-height));color:var(--luzmo-progress-bar-text-color, var(--luzmo-font-color));border:1px solid var(--luzmo-progress-bar-value-border-color, var(--luzmo-border-color, #d0d0d0));border-radius:var(--luzmo-progress-bar-value-border-radius, 4px);padding:.1em .4em}.track{inline-size:100%;block-size:var(--luzmo-progress-bar-thickness, var(--progress-bar-thickness));background:var(--highcontrast-progress-bar-track-border-color, var(--luzmo-progress-bar-track-color, var(--luzmo-border-color)));border-radius:var(--luzmo-progress-bar-border-radius, var(--progress-bar-border-radius));overflow:hidden}.fill{block-size:var(--luzmo-progress-bar-thickness, var(--progress-bar-thickness));background:var(--highcontrast-progress-bar-fill-color, var(--luzmo-progress-bar-fill-color, var(--luzmo-primary)));border-radius:var(--luzmo-progress-bar-border-radius, var(--progress-bar-border-radius));border:none;transition:width var(--luzmo-animation-duration, 1s)}:host([variant=positive]) .fill{background:var(--highcontrast-progress-bar-fill-color, var(--luzmo-progress-bar-fill-color-positive, var(--luzmo-positive-color, rgb(0, 122, 77))))}:host([variant=notice]) .fill{background:var(--highcontrast-progress-bar-fill-color, var(--luzmo-progress-bar-fill-color-notice, rgb(229, 127, 0)))}:host([variant=negative]) .fill{background:var(--highcontrast-progress-bar-fill-color, var(--luzmo-progress-bar-fill-color-negative, var(--luzmo-negative-color, rgb(211, 21, 16))))}:host([indeterminate]) .fill{position:relative;inline-size:33%;animation-name:indeterminate-loop-ltr;animation-duration:var(--luzmo-progress-bar-animation-duration, var(--progress-bar-animation-duration));animation-timing-function:cubic-bezier(.65,0,.35,1);animation-iteration-count:infinite;will-change:transform;transition:none}@keyframes indeterminate-loop-ltr{0%{transform:translate(-100%)}to{transform:translate(calc(var(--luzmo-progress-bar-size, var(--progress-bar-size))))}}:host([side-label]){flex-flow:row;align-items:center}:host([side-label]) .track{flex:1 1 var(--luzmo-progress-bar-size, var(--progress-bar-size))}:host([side-label]) .label{flex-grow:0;margin-block-end:0;margin-inline-end:.625rem}:host([side-label]) .percentage{order:3;margin-block-end:0;margin-inline-start:.625rem;text-align:end}:host([side-label]:not([hide-value])) .percentage{order:3;margin-block-end:0;margin-inline-start:.625rem}:host([static-color=white]) .fill{background:var(--luzmo-progress-bar-fill-color-over-background, rgb(255, 255, 255))}:host([static-color=white]) .track{background:var(--luzmo-progress-bar-track-color-over-background, rgba(255, 255, 255, .15))}:host([static-color=white]) .label,:host([static-color=white]) .percentage{color:var(--luzmo-progress-bar-text-color-over-background, rgb(255, 255, 255))}:host([static-color=black]) .fill{background:var(--luzmo-progress-bar-fill-color-over-background, rgb(0, 0, 0))}:host([static-color=black]) .track{background:var(--luzmo-progress-bar-track-color-over-background, rgba(0, 0, 0, .25))}:host([static-color=black]) .label,:host([static-color=black]) .percentage{color:var(--luzmo-progress-bar-text-color-over-background, rgb(0, 0, 0))}:host([size=s]){--progress-bar-thickness: 2px;--progress-bar-font-size: .688rem}:host([size=l]){--progress-bar-thickness: 6px;--progress-bar-font-size: .875rem}:host([size=xl]){--progress-bar-thickness: 8px;--progress-bar-font-size: 1rem}";
31
- var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (t, r, s, i) => {
32
- for (var a = i > 1 ? void 0 : i ? x(r, s) : r, n = t.length - 1, u; n >= 0; n--)
33
- (u = t[n]) && (a = (i ? u(r, s, a) : u(a)) || a);
34
- return i && a && v(r, s, a), a;
30
+ const v = ":host{--progress-bar-size: 240px;--progress-bar-animation-duration: 1.5s;display:inline-flex;position:relative;flex-flow:wrap;align-items:center;justify-content:space-between;inline-size:var(--luzmo-progress-bar-size, var(--progress-bar-size));min-inline-size:var(--luzmo-progress-bar-min-size, var(--progress-bar-min-size));vertical-align:top}slot:not([name]){display:none}.label,.percentage{margin-block-end:var(--luzmo-progress-bar-label-spacing, var(--progress-bar-label-spacing));font-family:var(--luzmo-progress-bar-font-family, var(--progress-bar-font-family));font-size:var(--luzmo-progress-bar-font-size, var(--progress-bar-font-size));line-height:var(--luzmo-progress-bar-line-height, var(--progress-bar-line-height));color:var(--luzmo-progress-bar-text-color, var(--progress-bar-text-color))}.label{flex:1;text-align:start}.percentage{align-self:flex-start;margin-inline-start:var(--luzmo-progress-bar-label-spacing, var(--progress-bar-label-spacing));text-align:end}::slotted([slot=value]){font-family:var(--luzmo-progress-bar-font-family, var(--progress-bar-font-family));font-size:var(--luzmo-progress-bar-font-size, var(--progress-bar-font-size));line-height:var(--luzmo-progress-bar-line-height, var(--progress-bar-line-height));color:var(--luzmo-progress-bar-text-color, var(--progress-bar-text-color))}.track{inline-size:100%;block-size:var(--luzmo-progress-bar-thickness, var(--progress-bar-thickness));background:var(--highcontrast-progress-bar-track-border-color, var(--luzmo-progress-bar-track-color, var(--progress-bar-track-color)));border-radius:var(--luzmo-progress-bar-border-radius, var(--progress-bar-border-radius));overflow:hidden}.fill{block-size:var(--luzmo-progress-bar-thickness, var(--progress-bar-thickness));background:var(--highcontrast-progress-bar-fill-color, var(--luzmo-progress-bar-fill-color, var(--progress-bar-fill-color)));border-radius:var(--luzmo-progress-bar-border-radius, var(--progress-bar-border-radius));border:none;transition:width var(--luzmo-progress-bar-fill-transition-duration, var(--progress-bar-fill-transition-duration))}:host([indeterminate]) .fill{position:relative;inline-size:33%;animation-name:indeterminate-loop-ltr;animation-duration:var(--luzmo-progress-bar-animation-duration, var(--progress-bar-animation-duration));animation-timing-function:cubic-bezier(.65,0,.35,1);animation-iteration-count:infinite;will-change:transform;transition:none}@keyframes indeterminate-loop-ltr{0%{transform:translate(-100%)}to{transform:translate(calc(var(--luzmo-progress-bar-size, var(--progress-bar-size))))}}:host([side-label]){flex-flow:row;align-items:center}:host([side-label]) .track{flex:1 1 var(--luzmo-progress-bar-size, var(--progress-bar-size))}:host([side-label]) .label{flex-grow:0;margin-block-end:0;margin-inline-end:var(--luzmo-progress-bar-label-spacing, var(--progress-bar-label-spacing))}:host([side-label]) .percentage{order:3;margin-block-end:0;margin-inline-start:var(--luzmo-progress-bar-label-spacing, var(--progress-bar-label-spacing));text-align:end}:host([side-label]:not([hide-value])) .percentage{order:3;margin-block-end:0;margin-inline-start:var(--luzmo-progress-bar-label-spacing, var(--progress-bar-label-spacing))}:host([static-color=white]) .fill{background:var(--luzmo-progress-bar-fill-color-over-background, rgb(255, 255, 255))}:host([static-color=white]) .track{background:var(--luzmo-progress-bar-track-color-over-background, rgba(255, 255, 255, .15))}:host([static-color=white]) .label,:host([static-color=white]) .percentage{color:var(--luzmo-progress-bar-text-color-over-background, rgb(255, 255, 255))}:host([static-color=black]) .fill{background:var(--luzmo-progress-bar-fill-color-over-background, rgb(0, 0, 0))}:host([static-color=black]) .track{background:var(--luzmo-progress-bar-track-color-over-background, rgba(0, 0, 0, .25))}:host([static-color=black]) .label,:host([static-color=black]) .percentage{color:var(--luzmo-progress-bar-text-color-over-background, rgb(0, 0, 0))}@media (forced-colors: active){.track{--highcontrast-progress-bar-track-border-color: ButtonFace;--highcontrast-progress-bar-fill-color: Highlight;border:1px solid ButtonText;forced-color-adjust:none}}:host{--progress-bar-min-size: var(--luzmo-component-height-xl);--progress-bar-thickness: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--progress-bar-border-radius: var(--luzmo-spacing-1);--progress-bar-font-family: var(--luzmo-font-family);--progress-bar-font-size: var(--luzmo-font-size-m);--progress-bar-line-height: var(--luzmo-line-height);--progress-bar-label-spacing: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--progress-bar-text-color: var(--luzmo-font-color);--progress-bar-track-color: var(--luzmo-border-color);--progress-bar-fill-color: var(--luzmo-primary);--progress-bar-fill-transition-duration: var(--luzmo-animation-duration)}:host([size=xs]){--progress-bar-thickness: var(--luzmo-spacing-1);--progress-bar-font-size: var(--luzmo-font-size-xs)}:host([size=s]){--progress-bar-thickness: var(--luzmo-spacing-2);--progress-bar-font-size: var(--luzmo-font-size-s)}:host([size=l]){--progress-bar-thickness: var(--luzmo-spacing-3);--progress-bar-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--progress-bar-thickness: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-2) );--progress-bar-font-size: var(--luzmo-font-size-xl)}:host([variant=positive]){--progress-bar-fill-color: var(--luzmo-positive-color)}:host([variant=notice]){--progress-bar-fill-color: var(--luzmo-notice-color)}:host([variant=negative]){--progress-bar-fill-color: var(--luzmo-negative-color)}";
31
+ var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, e = (a, r, s, i) => {
32
+ for (var t = i > 1 ? void 0 : i ? x(r, s) : r, n = a.length - 1, u; n >= 0; n--)
33
+ (u = a[n]) && (t = (i ? u(r, s, t) : u(t)) || t);
34
+ return i && t && f(r, s, t), t;
35
35
  };
36
- class o extends h(p, {
37
- validSizes: ["s", "m", "l", "xl"]
36
+ class o extends h(z, {
37
+ validSizes: ["xs", "s", "m", "l", "xl"]
38
38
  }) {
39
39
  constructor() {
40
40
  super(...arguments), this.indeterminate = !1, this.label = "", this.progress = 0, this.sideLabel = !1, this.hideValue = !1, this.valueLabel = "", this._variant = "", this._hasValueSlotContent = !1;
41
41
  }
42
42
  static get styles() {
43
- return [g(f)];
43
+ return [g(v)];
44
44
  }
45
45
  get variant() {
46
46
  return this._variant;
@@ -79,7 +79,7 @@ class o extends h(p, {
79
79
  `;
80
80
  }
81
81
  handleSlotchange() {
82
- const r = z(this.label, this.slotEl);
82
+ const r = d(this.label, this.slotEl);
83
83
  r && (this.label = r);
84
84
  }
85
85
  handleValueSlotchange(r) {
@@ -118,7 +118,7 @@ e([
118
118
  l({ type: String })
119
119
  ], o.prototype, "variant", 1);
120
120
  e([
121
- d("slot:not([name])")
121
+ p("slot:not([name])")
122
122
  ], o.prototype, "slotEl", 2);
123
123
  customElements.get("luzmo-progress-bar") || customElements.define("luzmo-progress-bar", o);
124
124
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luzmo/lucero",
3
- "version": "1.0.1-alpha.63",
3
+ "version": "1.0.1-alpha.64",
4
4
  "homepage": "https://luzmo.com",
5
5
  "description": "Lucero - The design system for Luzmo",
6
6
  "type": "module",