@vonage/vivid 5.15.1 → 5.16.0

package/bundled/definition4.js

@@ -1,42 +1,72 @@
-import { V as n, a as v, h as i, c, d as p } from "./vivid-element.js";
-import { c as f } from "./class-names.js";
-var u = Object.defineProperty, s = (o, a, t, m) => {
-  for (var e = void 0, r = o.length - 1, l; r >= 0; r--)
-    (l = o[r]) && (e = l(a, t, e) || e);
-  return e && u(a, t, e), e;
-};
-class d extends n {
-}
-s([
-  v
-], d.prototype, "dp");
-s([
-  v({ attribute: "no-shadow", mode: "boolean" })
-], d.prototype, "noShadow");
-s([
-  v({ attribute: "not-relative", mode: "boolean" })
-], d.prototype, "notRelative");
-const _ = ':host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:"";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}', h = ({ dp: o, noShadow: a, notRelative: t }) => f(
-  "control",
-  [`dp-${o}`, !!o],
-  ["no-shadow", !!a],
-  ["not-relative", !!t]
-), w = i` <div
-	class="${h}"
-	part="base"
->
-	<slot></slot>
-</div>`, b = p(
-  "elevation",
-  d,
-  w,
-  [],
-  {
-    styles: _
-  }
-), k = c(b);
-export {
-  d as E,
-  b as e,
-  k as r
+import { T as e, d as t, l as n, o as r, s as i, t as a, u as o } from "./vivid-element.js";
+import { t as s } from "./ref.js";
+import { t as c } from "./when.js";
+import { t as l } from "./slotted.js";
+import { t as u } from "./definition2.js";
+import { t as d } from "./decorate.js";
+import { t as f } from "./class-names.js";
+import { a as p, i as m, n as h } from "./affix.js";
+//#region src/lib/accordion-item/accordion-item.scss?inline
+var g = ":host{--_vvd-accordion-item-accent-firm-wrapper:var(--vvd-accordion-item-accent-firm)}.heading-button{--vvd-accordion-item-accent-firm:var(--_vvd-accordion-item-accent-firm-wrapper,var(--vvd-accordion-item-accent-primary))}:host{box-sizing:border-box;flex-direction:column;display:flex}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.heading-button.appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline:transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text:var(--_connotation-color-fierce-primary);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline:transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.heading-button{--_connotation-color-primary:var(--vvd-accordion-item-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-accordion-item-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-accordion-item-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-accordion-item-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-accordion-item-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-accordion-item-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-accordion-item-accent-firm,var(--vvd-color-canvas-text));--focus-stroke-gap-color:transparent;background-color:var(--_appearance-color-fill);width:100%;color:var(--_appearance-color-text);cursor:pointer;text-align:left;border:none;align-items:center;padding:16px;display:flex}.heading-button:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{max-width:var(--accordion-item-meta-inline-size,20%);color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;overflow:hidden}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{padding:8px 32px 24px 16px;display:none}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}", _ = class extends h(a) {
+	constructor(...e) {
+		super(...e), this.headinglevel = 2, this.expanded = !1, this.noIndicator = !1, this.clickHandler = () => {
+			this.expanded = !this.expanded, this.change();
+		}, this.change = () => {
+			this.$emit("change");
+		};
+	}
 };
+d([n({
+	attribute: "heading-level",
+	mode: "fromView",
+	converter: o
+})], _.prototype, "headinglevel", void 0), d([n], _.prototype, "appearance", void 0), d([n({ mode: "boolean" })], _.prototype, "expanded", void 0), d([n], _.prototype, "id", void 0), d([n], _.prototype, "heading", void 0), d([e], _.prototype, "_headingSlottedContent", void 0), d([n({
+	mode: "boolean",
+	attribute: "no-indicator"
+})], _.prototype, "noIndicator", void 0), d([n], _.prototype, "meta", void 0), d([e], _.prototype, "_metaSlottedContent", void 0), d([n], _.prototype, "size", void 0);
+//#endregion
+//#region src/lib/accordion-item/accordion-item.template.ts
+var v = ({ appearance: e, size: t }) => f("heading-button", [`appearance-${e}`, !!e], [`size-${t}`, !!t]), y = (e, n) => {
+	let r = p(e), i = t.partial(n);
+	return t`
+		<${i} class="heading-container">
+			<button
+				class="${v}"
+				id="${(e) => e.id}"
+				aria-expanded="${(e) => e.expanded}"
+				aria-controls="${(e) => e.id}-panel"
+				@click="${(e) => e.clickHandler()}"
+				${s("expandbutton")}
+			>
+
+				${(e) => e.iconTrailing ? null : r(e.icon, m.Slot)}
+
+				<span class="heading-content">
+					<slot name="heading" ${l("_headingSlottedContent")}></slot>
+					${c((e) => e.heading && !e._headingSlottedContent?.length, t`${(e) => e.heading}`)}
+				</span>
+
+				<span class="meta">
+					<slot name="meta" ${l("_metaSlottedContent")}></slot>
+					${c((e) => e.meta && !e._metaSlottedContent?.length, t`${(e) => e.meta}`)}
+				</span>
+
+				${(e) => e.icon && e.iconTrailing ? r(e.icon) : null}
+				${(e) => !(e.icon && e.iconTrailing) && !e.noIndicator ? r(e.expanded ? "chevron-up-line" : "chevron-down-line") : null}
+
+			</button>
+		</${i}>
+	`;
+}, b = r("accordion-item", _, (e) => t`
+	${(t) => y(e, "h" + t.headinglevel)}
+	<div
+		id="${(e) => e.id}-panel"
+		aria-labelledby="${(e) => e.id}"
+		role="region"
+		class="region ${(e) => e.icon && !e.iconTrailing ? "padded" : ""} ${(e) => e.size ? `size-${e.size}` : ""}"
+	>
+		<slot></slot>
+	</div>
+`, [u], { styles: g }), x = i(b);
+//#endregion
+export { x as n, _ as r, b as t };

package/bundled/definition5.cjs

@@ -1 +1,30 @@
-"use strict";const b=require("./definition9.cjs"),i=require("./vivid-element.cjs"),c=require("./key-codes.cjs"),h=require("./slider.template.cjs"),m=require("./delegates-aria.cjs"),g=require("./form-associated.cjs"),d=require("./aria.cjs"),k=require("./localized.cjs"),f=require("./numbers.cjs");var l;(function(a){a.ltr="ltr",a.rtl="rtl"})(l||(l={}));const y=':host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media(hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:"";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:"";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media(hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}',_=a=>{const t=a.closest("[dir]");return t!==null&&t.dir==="rtl"?l.rtl:l.ltr};var z=Object.defineProperty,x=Object.getOwnPropertyDescriptor,r=(a,t,e,n)=>{for(var s=n>1?void 0:n?x(t,e):t,u=a.length-1,p;u>=0;u--)(p=a[u])&&(s=(n?p(t,e,s):p(s))||s);return n&&s&&z(t,e,s),s};const w={singleValue:"single-value"};class o extends k.Localized(m.DelegatesAria(g.FormAssociated(i.VividElement))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.direction=l.ltr,this.isDragging=!1,this.trackWidth=0,this.trackMinWidth=0,this.trackHeight=0,this.trackLeft=0,this.trackMinHeight=0,this.valueTextFormatter=t=>parseFloat(t).toLocaleString(this.locale.lang),this.min=0,this.max=10,this.step=1,this.orientation=d.Orientation.horizontal,this.mode=w.singleValue,this.keypressHandler=t=>{if(this._focusVisible=!0,!this.readOnly)if(t.key===c.keyHome)t.preventDefault(),this.value=`${this.min}`;else if(t.key===c.keyEnd)t.preventDefault(),this.value=`${this.max}`;else{if(t.shiftKey)return;switch(t.key){case c.keyArrowRight:case c.keyArrowUp:t.preventDefault(),this.increment();break;case c.keyArrowLeft:case c.keyArrowDown:t.preventDefault(),this.decrement();break}}},this.setupTrackConstraints=()=>{const t=this.track.getBoundingClientRect();this.trackWidth=this.track.clientWidth,this.trackMinWidth=this.track.clientLeft,this.trackHeight=t.bottom,this.trackMinHeight=t.top,this.trackLeft=this.getBoundingClientRect().left,this.trackWidth===0&&(this.trackWidth=1)},this.setupListeners=(t=!1)=>{const e=t?"removeEventListener":"addEventListener";this[e]("keydown",this.keypressHandler),this[e]("mousedown",this.handleMouseDown),this.thumb[e]("mousedown",this.handleThumbMouseDown,{passive:!0}),this.thumb[e]("touchstart",this.handleThumbMouseDown,{passive:!0}),t&&(this.handleMouseDown(null),this.handleThumbMouseDown(null))},this.initialValue="",this.handleThumbMouseDown=t=>{if(t){if(this.readOnly||this.disabled||t.defaultPrevented)return;this.#e=!0,t.target.focus(),this.#e=!1}const e=t!==null?"addEventListener":"removeEventListener";window[e]("mouseup",this.handleWindowMouseUp),window[e]("mousemove",this.handleMouseMove,{passive:!0}),window[e]("touchmove",this.handleMouseMove,{passive:!0}),window[e]("touchend",this.handleWindowMouseUp),this.isDragging=t!==null},this.handleMouseMove=t=>{if(this.readOnly||this.disabled||t.defaultPrevented)return;const e="TouchEvent"in window&&t instanceof TouchEvent?t.touches[0]:t,n=this.#r(e);this.value=`${this.#t(n)}`},this.handleWindowMouseUp=t=>{this.stopDragging()},this.stopDragging=()=>{this.isDragging=!1,this.handleMouseDown(null),this.handleThumbMouseDown(null)},this.handleMouseDown=t=>{const e=t!==null?"addEventListener":"removeEventListener";if((t===null||!this.disabled&&!this.readOnly)&&(window[e]("mouseup",this.handleWindowMouseUp),window.document[e]("mouseleave",this.handleWindowMouseUp),window[e]("mousemove",this.handleMouseMove),t)){t.preventDefault(),this.setupTrackConstraints(),this.#e=!0,t.target.focus(),this.#e=!1;const n=this.#r(t);this.value=`${this.#t(n)}`,this.isDragging=!0}},this.markers=!1,this.pin=!1,this._focusVisible=!1,this._hoveringOnThumb=!1,this.#e=!1,this._onFocusIn=()=>{this.#e||(this._focusVisible=!0)},this._onFocusOut=()=>{this._focusVisible=!1},this.#i=()=>{this._hoveringOnThumb=!0},this.#o=()=>{this._hoveringOnThumb=!1}}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}get valueAsNumber(){return parseFloat(this.value)}set valueAsNumber(t){this.value=t.toString()}valueChanged(t,e){if(super.valueChanged(t,e),this.$fastController.isConnected){const n=parseFloat(e),s=this.#t(n).toString();if(s!==e){this.value=s;return}this.setThumbPositionForOrientation(this.direction),this.$emit("change")}}minChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.min=`${this.min}`),this.validate()}maxChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.max=`${this.max}`),this.validate()}stepChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.step=`${this.step}`),this.updateStepMultiplier(),this.validate()}orientationChanged(){this.$fastController.isConnected&&this.setThumbPositionForOrientation(this.direction)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","range"),this.direction=_(this),this.updateStepMultiplier(),this.setupTrackConstraints(),this.setupListeners(),this.setupDefaultValue(),this.setThumbPositionForOrientation(this.direction),this.#s()}disconnectedCallback(){this.setupListeners(!0),this.#a()}increment(){const t=this.direction!==l.rtl&&this.orientation!==d.Orientation.vertical?Number(this.value)+Number(this.step):Number(this.value)-Number(this.step);this.value=this.#t(t).toString()}decrement(){const t=this.direction!==l.rtl&&this.orientation!==d.Orientation.vertical?Number(this.value)-Number(this.step):Number(this.value)+Number(this.step);this.value=this.#t(t).toString()}setThumbPositionForOrientation(t){const e=this.#n(this.valueAsNumber);this.orientation===d.Orientation.horizontal?this.position=this.isDragging?`right: ${e}%; transition: none;`:`right: ${e}%; transition: right 0.2s ease;`:this.position=this.isDragging?`bottom: ${e}%; transition: none;`:`bottom: ${e}%; transition: bottom 0.2s ease;`}#n(t){return(1-h.inverseLerp(this.min,this.max,t))*100}updateStepMultiplier(){const t=this.step+"",e=this.step%1?t.length-t.indexOf(".")-1:0;this.stepMultiplier=Math.pow(10,e)}get midpoint(){return`${this.#t((this.max+this.min)/2)}`}setupDefaultValue(){if(typeof this.value=="string")if(this.value.length===0)this.initialValue=this.midpoint;else{const t=parseFloat(this.value);!Number.isNaN(t)&&(t<this.min||t>this.max)&&(this.value=this.midpoint)}}#r(t){const e=this.track.getBoundingClientRect(),[n,s,u]=this.orientation===d.Orientation.horizontal?[this.track.clientLeft,this.track.clientWidth,t.pageX-document.documentElement.scrollLeft-this.getBoundingClientRect().left]:[e.top,e.bottom,t.pageY-document.documentElement.scrollTop];return h.lerp(this.min,this.max,h.inverseLerp(n,s,u))}#t(t){return f.limit(this.min,this.max,h.roundToStepValue(t-this.min,this.step)+this.min)}get _isThumbPopupOpen(){return this._focusVisible||this._hoveringOnThumb||this.isDragging}#e;#s(){this.thumb.addEventListener("mouseover",this.#i,{passive:!0}),this.thumb.addEventListener("mouseout",this.#o,{passive:!0})}#a(){this.thumb.removeEventListener("mouseover",this.#i),this.thumb.removeEventListener("mouseout",this.#o)}#i;#o}r([i.attr({attribute:"readonly",mode:"boolean"})],o.prototype,"readOnly",2);r([i.observable],o.prototype,"direction",2);r([i.observable],o.prototype,"isDragging",2);r([i.observable],o.prototype,"position",2);r([i.observable],o.prototype,"trackWidth",2);r([i.observable],o.prototype,"trackMinWidth",2);r([i.observable],o.prototype,"trackHeight",2);r([i.observable],o.prototype,"trackLeft",2);r([i.observable],o.prototype,"trackMinHeight",2);r([i.observable],o.prototype,"valueTextFormatter",2);r([i.attr({converter:i.nullableNumberConverter})],o.prototype,"min",2);r([i.attr({converter:i.nullableNumberConverter})],o.prototype,"max",2);r([i.attr({converter:h.defaultToOneConverter})],o.prototype,"step",2);r([i.attr],o.prototype,"orientation",2);r([i.attr],o.prototype,"mode",2);r([i.attr({mode:"boolean"})],o.prototype,"markers",2);r([i.attr({mode:"boolean"})],o.prototype,"pin",2);r([i.attr],o.prototype,"connotation",2);r([i.observable],o.prototype,"_focusVisible",2);r([i.observable],o.prototype,"_hoveringOnThumb",2);r([i.volatile],o.prototype,"_isThumbPopupOpen",1);const v=i.defineVividComponent("slider",o,h.SliderTemplate,[b.popupDefinition],{styles:y,shadowOptions:{delegatesFocus:!0}}),M=i.createRegisterFunction(v);exports.Slider=o;exports.registerSlider=M;exports.sliderDefinition=v;
+const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./delegates-aria.cjs`),a=require(`./base-progress.cjs`);var o=`:host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.connotation-cta{--_connotation-color-firm:var(--vvd-progress-ring-cta-firm,var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm:var(--vvd-progress-ring-alert-firm,var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm:var(--vvd-progress-ring-success-firm,var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm:var(--vvd-progress-ring-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}`,s=class extends i.t(a.t){};n.t([e.l],s.prototype,`connotation`,void 0),n.t([e.l],s.prototype,`size`,void 0);var c=({connotation:e,size:t,paused:n})=>r.t(`base`,[`disabled`,!!n],[`connotation-${e}`,!!e],[`size-${t}`,!!t]),l=44,u=e.d`<template>
+	<div
+		class="${e=>e.paused?`paused`:``} ${c}"
+		${i.n({role:`progressbar`,ariaValueNow:e=>e.value,ariaValueMin:e=>e.min,ariaValueMax:e=>e.max})}
+	>
+		${t.t(e=>typeof e.value==`number`,e.d`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="determinate"
+						style="stroke-dasharray: ${e=>l*e.percentComplete/100}px ${l}px"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`)}
+		${t.t(e=>typeof e.value!=`number`,e.d`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="indeterminate-indicator-1"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`)}
+	</div>
+</template>`,d=e.o(`progress-ring`,s,u,[],{styles:o}),f=e.s(d);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});

package/bundled/definition5.js

@@ -1,346 +1,48 @@
-import { p as v } from "./definition9.js";
-import { V as b, a, o as s, n as m, v as g, c as k, d as f } from "./vivid-element.js";
-import { a as y, k as _, b as z, h as x, c as w, g as M } from "./key-codes.js";
-import { i as d, l as T, r as D, d as O, S as L } from "./slider.template.js";
-import { D as C } from "./delegates-aria.js";
-import { F as E } from "./form-associated.js";
-import { O as u } from "./aria.js";
-import { L as V } from "./localized.js";
-import { l as N } from "./numbers.js";
-var c;
-(function(l) {
-  l.ltr = "ltr", l.rtl = "rtl";
-})(c || (c = {}));
-const F = ':host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media(hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:"";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:"";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media(hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}', S = (l) => {
-  const t = l.closest("[dir]");
-  return t !== null && t.dir === "rtl" ? c.rtl : c.ltr;
-};
-var P = Object.defineProperty, W = Object.getOwnPropertyDescriptor, o = (l, t, i, r) => {
-  for (var n = r > 1 ? void 0 : r ? W(t, i) : t, h = l.length - 1, p; h >= 0; h--)
-    (p = l[h]) && (n = (r ? p(t, i, n) : p(n)) || n);
-  return r && n && P(t, i, n), n;
-};
-const $ = {
-  singleValue: "single-value"
-};
-class e extends V(
-  C(E(b))
-) {
-  constructor() {
-    super(...arguments), this.proxy = document.createElement("input"), this.direction = c.ltr, this.isDragging = !1, this.trackWidth = 0, this.trackMinWidth = 0, this.trackHeight = 0, this.trackLeft = 0, this.trackMinHeight = 0, this.valueTextFormatter = (t) => parseFloat(t).toLocaleString(this.locale.lang), this.min = 0, this.max = 10, this.step = 1, this.orientation = u.horizontal, this.mode = $.singleValue, this.keypressHandler = (t) => {
-      if (this._focusVisible = !0, !this.readOnly)
-        if (t.key === y)
-          t.preventDefault(), this.value = `${this.min}`;
-        else if (t.key === _)
-          t.preventDefault(), this.value = `${this.max}`;
-        else {
-          if (t.shiftKey) return;
-          switch (t.key) {
-            case M:
-            case w:
-              t.preventDefault(), this.increment();
-              break;
-            case x:
-            case z:
-              t.preventDefault(), this.decrement();
-              break;
-          }
-        }
-    }, this.setupTrackConstraints = () => {
-      const t = this.track.getBoundingClientRect();
-      this.trackWidth = this.track.clientWidth, this.trackMinWidth = this.track.clientLeft, this.trackHeight = t.bottom, this.trackMinHeight = t.top, this.trackLeft = this.getBoundingClientRect().left, this.trackWidth === 0 && (this.trackWidth = 1);
-    }, this.setupListeners = (t = !1) => {
-      const i = t ? "removeEventListener" : "addEventListener";
-      this[i]("keydown", this.keypressHandler), this[i]("mousedown", this.handleMouseDown), this.thumb[i](
-        "mousedown",
-        this.handleThumbMouseDown,
-        {
-          passive: !0
-        }
-      ), this.thumb[i](
-        "touchstart",
-        this.handleThumbMouseDown,
-        {
-          passive: !0
-        }
-      ), t && (this.handleMouseDown(null), this.handleThumbMouseDown(null));
-    }, this.initialValue = "", this.handleThumbMouseDown = (t) => {
-      if (t) {
-        if (this.readOnly || this.disabled || t.defaultPrevented)
-          return;
-        this.#i = !0, t.target.focus(), this.#i = !1;
-      }
-      const i = t !== null ? "addEventListener" : "removeEventListener";
-      window[i]("mouseup", this.handleWindowMouseUp), window[i]("mousemove", this.handleMouseMove, {
-        passive: !0
-      }), window[i]("touchmove", this.handleMouseMove, {
-        passive: !0
-      }), window[i]("touchend", this.handleWindowMouseUp), this.isDragging = t !== null;
-    }, this.handleMouseMove = (t) => {
-      if (this.readOnly || this.disabled || t.defaultPrevented)
-        return;
-      const i = "TouchEvent" in window && t instanceof TouchEvent ? t.touches[0] : t, r = this.#r(i);
-      this.value = `${this.#t(r)}`;
-    }, this.handleWindowMouseUp = (t) => {
-      this.stopDragging();
-    }, this.stopDragging = () => {
-      this.isDragging = !1, this.handleMouseDown(null), this.handleThumbMouseDown(null);
-    }, this.handleMouseDown = (t) => {
-      const i = t !== null ? "addEventListener" : "removeEventListener";
-      if ((t === null || !this.disabled && !this.readOnly) && (window[i]("mouseup", this.handleWindowMouseUp), window.document[i](
-        "mouseleave",
-        this.handleWindowMouseUp
-      ), window[i]("mousemove", this.handleMouseMove), t)) {
-        t.preventDefault(), this.setupTrackConstraints(), this.#i = !0, t.target.focus(), this.#i = !1;
-        const r = this.#r(t);
-        this.value = `${this.#t(r)}`, this.isDragging = !0;
-      }
-    }, this.markers = !1, this.pin = !1, this._focusVisible = !1, this._hoveringOnThumb = !1, this.#i = !1, this._onFocusIn = () => {
-      this.#i || (this._focusVisible = !0);
-    }, this._onFocusOut = () => {
-      this._focusVisible = !1;
-    }, this.#e = () => {
-      this._hoveringOnThumb = !0;
-    }, this.#o = () => {
-      this._hoveringOnThumb = !1;
-    };
-  }
-  // Map to proxy element
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
-  }
-  /**
-   * The value property, typed as a number.
-   *
-   * @public
-   */
-  get valueAsNumber() {
-    return parseFloat(this.value);
-  }
-  set valueAsNumber(t) {
-    this.value = t.toString();
-  }
-  /**
-   * @internal
-   */
-  valueChanged(t, i) {
-    if (super.valueChanged(t, i), this.$fastController.isConnected) {
-      const r = parseFloat(i), n = this.#t(r).toString();
-      if (n !== i) {
-        this.value = n;
-        return;
-      }
-      this.setThumbPositionForOrientation(this.direction), this.$emit("change");
-    }
-  }
-  // Map to proxy element.
-  /**
-   * @internal
-   */
-  minChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.min = `${this.min}`), this.validate();
-  }
-  // Map to proxy element.
-  /**
-   * @internal
-   */
-  maxChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.max = `${this.max}`), this.validate();
-  }
-  // Map to proxy element.
-  /**
-   * @internal
-   */
-  stepChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.step = `${this.step}`), this.updateStepMultiplier(), this.validate();
-  }
-  /**
-   * @internal
-   */
-  orientationChanged() {
-    this.$fastController.isConnected && this.setThumbPositionForOrientation(this.direction);
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback(), this.proxy.setAttribute("type", "range"), this.direction = S(this), this.updateStepMultiplier(), this.setupTrackConstraints(), this.setupListeners(), this.setupDefaultValue(), this.setThumbPositionForOrientation(this.direction), this.#s();
-  }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    this.setupListeners(!0), this.#a();
-  }
-  /**
-   * Increment the value by the step
-   *
-   * @public
-   */
-  increment() {
-    const t = this.direction !== c.rtl && this.orientation !== u.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
-    this.value = this.#t(t).toString();
-  }
-  /**
-   * Decrement the value by the step
-   *
-   * @public
-   */
-  decrement() {
-    const t = this.direction !== c.rtl && this.orientation !== u.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
-    this.value = this.#t(t).toString();
-  }
-  /**
-   * Places the thumb based on the current value
-   *
-   * @public
-   * @param direction - writing mode
-   */
-  setThumbPositionForOrientation(t) {
-    const i = this.#n(this.valueAsNumber);
-    this.orientation === u.horizontal ? this.position = this.isDragging ? `right: ${i}%; transition: none;` : `right: ${i}%; transition: right 0.2s ease;` : this.position = this.isDragging ? `bottom: ${i}%; transition: none;` : `bottom: ${i}%; transition: bottom 0.2s ease;`;
-  }
-  #n(t) {
-    return (1 - d(this.min, this.max, t)) * 100;
-  }
-  /**
-   * Update the step multiplier used to ensure rounding errors from steps that
-   * are not whole numbers
-   */
-  updateStepMultiplier() {
-    const t = this.step + "", i = this.step % 1 ? t.length - t.indexOf(".") - 1 : 0;
-    this.stepMultiplier = Math.pow(10, i);
-  }
-  get midpoint() {
-    return `${this.#t((this.max + this.min) / 2)}`;
-  }
-  setupDefaultValue() {
-    if (typeof this.value == "string")
-      if (this.value.length === 0)
-        this.initialValue = this.midpoint;
-      else {
-        const t = parseFloat(this.value);
-        !Number.isNaN(t) && (t < this.min || t > this.max) && (this.value = this.midpoint);
-      }
-  }
-  #r(t) {
-    const i = this.track.getBoundingClientRect(), [r, n, h] = this.orientation === u.horizontal ? [
-      this.track.clientLeft,
-      this.track.clientWidth,
-      t.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
-    ] : [
-      i.top,
-      i.bottom,
-      t.pageY - document.documentElement.scrollTop
-    ];
-    return T(this.min, this.max, d(r, n, h));
-  }
-  #t(t) {
-    return N(
-      this.min,
-      this.max,
-      D(t - this.min, this.step) + this.min
-    );
-  }
-  get _isThumbPopupOpen() {
-    return this._focusVisible || this._hoveringOnThumb || this.isDragging;
-  }
-  #i;
-  #s() {
-    this.thumb.addEventListener("mouseover", this.#e, {
-      passive: !0
-    }), this.thumb.addEventListener("mouseout", this.#o, {
-      passive: !0
-    });
-  }
-  #a() {
-    this.thumb.removeEventListener("mouseover", this.#e), this.thumb.removeEventListener("mouseout", this.#o);
-  }
-  #e;
-  #o;
-}
-o([
-  a({ attribute: "readonly", mode: "boolean" })
-], e.prototype, "readOnly", 2);
-o([
-  s
-], e.prototype, "direction", 2);
-o([
-  s
-], e.prototype, "isDragging", 2);
-o([
-  s
-], e.prototype, "position", 2);
-o([
-  s
-], e.prototype, "trackWidth", 2);
-o([
-  s
-], e.prototype, "trackMinWidth", 2);
-o([
-  s
-], e.prototype, "trackHeight", 2);
-o([
-  s
-], e.prototype, "trackLeft", 2);
-o([
-  s
-], e.prototype, "trackMinHeight", 2);
-o([
-  s
-], e.prototype, "valueTextFormatter", 2);
-o([
-  a({ converter: m })
-], e.prototype, "min", 2);
-o([
-  a({ converter: m })
-], e.prototype, "max", 2);
-o([
-  a({ converter: O })
-], e.prototype, "step", 2);
-o([
-  a
-], e.prototype, "orientation", 2);
-o([
-  a
-], e.prototype, "mode", 2);
-o([
-  a({
-    mode: "boolean"
-  })
-], e.prototype, "markers", 2);
-o([
-  a({ mode: "boolean" })
-], e.prototype, "pin", 2);
-o([
-  a
-], e.prototype, "connotation", 2);
-o([
-  s
-], e.prototype, "_focusVisible", 2);
-o([
-  s
-], e.prototype, "_hoveringOnThumb", 2);
-o([
-  g
-], e.prototype, "_isThumbPopupOpen", 1);
-const A = f(
-  "slider",
-  e,
-  L,
-  [v],
-  {
-    styles: F,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
-  }
-), q = k(A);
-export {
-  e as S,
-  q as r,
-  A as s
-};
+import { d as e, l as t, o as n, s as r } from "./vivid-element.js";
+import { t as i } from "./when.js";
+import { t as a } from "./decorate.js";
+import { t as o } from "./class-names.js";
+import { n as s, t as c } from "./delegates-aria.js";
+import { t as l } from "./base-progress.js";
+//#region src/lib/progress-ring/progress-ring.scss?inline
+var u = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.connotation-cta{--_connotation-color-firm:var(--vvd-progress-ring-cta-firm,var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm:var(--vvd-progress-ring-alert-firm,var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm:var(--vvd-progress-ring-success-firm,var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm:var(--vvd-progress-ring-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}", d = class extends c(l) {};
+a([t], d.prototype, "connotation", void 0), a([t], d.prototype, "size", void 0);
+//#endregion
+//#region src/lib/progress-ring/progress-ring.template.ts
+var f = ({ connotation: e, size: t, paused: n }) => o("base", ["disabled", !!n], [`connotation-${e}`, !!e], [`size-${t}`, !!t]), p = 44, m = n("progress-ring", d, e`<template>
+	<div
+		class="${(e) => e.paused ? "paused" : ""} ${f}"
+		${s({
+	role: "progressbar",
+	ariaValueNow: (e) => e.value,
+	ariaValueMin: (e) => e.min,
+	ariaValueMax: (e) => e.max
+})}
+	>
+		${i((e) => typeof e.value == "number", e`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="determinate"
+						style="stroke-dasharray: ${(e) => p * e.percentComplete / 100}px ${p}px"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`)}
+		${i((e) => typeof e.value != "number", e`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="indeterminate-indicator-1"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`)}
+	</div>
+</template>`, [], { styles: u }), h = r(m);
+//#endregion
+export { h as n, d as r, m as t };