@vonage/vivid 5.3.0 → 5.5.0

package/bundled/definition13.cjs

@@ -1 +1,10 @@
-"use strict";const i=require("./vivid-element.cjs"),n=":host{display:contents}slot:not(:focus-within){position:absolute;display:inline;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";class e extends i.VividElement{}const s=()=>i.html`<slot></slot>`,t=i.defineVividComponent("visually-hidden",e,s,[],{styles:n}),l=i.createRegisterFunction(t);exports.VisuallyHidden=e;exports.registerVisuallyHidden=l;exports.visuallyHiddenDefinition=t;
+"use strict";const l=require("./definition2.cjs"),i=require("./definition17.cjs"),n=require("./vivid-element.cjs"),v=require("./class-names.cjs");var d=Object.defineProperty,u=(o,r,a,x)=>{for(var t=void 0,e=o.length-1,c;e>=0;e--)(c=o[e])&&(t=c(r,a,t)||t);return t&&d(r,a,t),t};class s extends n.VividElement{constructor(){super(...arguments),this.placement="right"}}u([n.attr({mode:"fromView"})],s.prototype,"placement");const f=o=>v.classNames("control"),_=o=>{const r=o.tagFor(i.Toggletip),a=o.tagFor(l.Icon);return n.html`
+		<${r} class="base" exportparts="vvd-theme-alternate">
+			<button class="${f}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${a} name="help-solid"></${a}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${r}>
+	`},b=".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,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))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}",p=n.defineVividComponent("contextual-help",s,_,[l.iconDefinition,i.toggletipDefinition],{styles:b}),m=n.createRegisterFunction(p);exports.contextualHelpDefinition=p;exports.registerContextualHelp=m;

package/bundled/definition13.js

@@ -1,20 +1,44 @@
-import { V as i, h as s, c as e, d as t } from "./vivid-element.js";
-const n = ":host{display:contents}slot:not(:focus-within){position:absolute;display:inline;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
-class l extends i {
+import { I as l, i } from "./definition2.js";
+import { T as s, t as p } from "./definition17.js";
+import { V as v, a as d, h as u, c as f, d as _ } from "./vivid-element.js";
+import { c as m } from "./class-names.js";
+var b = Object.defineProperty, x = (o, r, t, w) => {
+  for (var a = void 0, n = o.length - 1, e; n >= 0; n--)
+    (e = o[n]) && (a = e(r, t, a) || a);
+  return a && b(r, t, a), a;
+};
+class c extends v {
+  constructor() {
+    super(...arguments), this.placement = "right";
+  }
 }
-const o = () => s`<slot></slot>`, a = t(
-  "visually-hidden",
-  l,
-  o,
-  [],
+x([
+  d({ mode: "fromView" })
+], c.prototype, "placement");
+const g = (o) => m("control"), h = (o) => {
+  const r = o.tagFor(s), t = o.tagFor(l);
+  return u`
+		<${r} class="base" exportparts="vvd-theme-alternate">
+			<button class="${g}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${t} name="help-solid"></${t}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${r}>
+	`;
+}, y = ".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,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))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}", k = _(
+  "contextual-help",
+  c,
+  h,
+  [i, p],
   {
-    styles: n
+    styles: y
   }
-), p = e(
-  a
+), H = f(
+  k
 );
 export {
-  l as V,
-  p as r,
-  a as v
+  k as c,
+  H as r
 };

package/bundled/definition14.cjs

@@ -1,5 +1 @@
-"use strict";const o=require("./vivid-element.cjs"),t=require("./divider.cjs"),r=require("./host-semantics.cjs"),n=require("./class-names.cjs"),s=":host{display:block}.base{--_connotation-color-soft: var(--vvd-divider-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-divider-accent-dim, var(--vvd-color-neutral-200))}.base{display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}",c=({orientation:e,appearance:i})=>n.classNames("base",[`${e}`,!!e],[`appearance-${i}`,!!i]),l=({role:e,orientation:i})=>e===t.DividerRole.presentation?null:i,d=o.html`<template
-	${r.applyHostSemantics({role:e=>e.role||t.DividerRole.separator,ariaHidden:!0,ariaOrientation:l})}
->
-	<span class="${c}"></span
-></template>`,a=o.defineVividComponent("divider",t.Divider,d,[],{styles:s}),v=o.createRegisterFunction(a);exports.dividerDefinition=a;exports.registerDivider=v;
+"use strict";const i=require("./vivid-element.cjs"),n=":host{display:contents}slot:not(:focus-within){position:absolute;display:inline;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";class e extends i.VividElement{}const s=()=>i.html`<slot></slot>`,t=i.defineVividComponent("visually-hidden",e,s,[],{styles:n}),l=i.createRegisterFunction(t);exports.VisuallyHidden=e;exports.registerVisuallyHidden=l;exports.visuallyHiddenDefinition=t;

package/bundled/definition14.js

@@ -1,29 +1,20 @@
-import { h as i, c as t, d as r } from "./vivid-element.js";
-import { a as e, D as s } from "./divider.js";
-import { a as n } from "./host-semantics.js";
-import { c } from "./class-names.js";
-const l = ":host{display:block}.base{--_connotation-color-soft: var(--vvd-divider-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-divider-accent-dim, var(--vvd-color-neutral-200))}.base{display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}", d = ({ orientation: o, appearance: a }) => c(
-  "base",
-  [`${o}`, !!o],
-  [`appearance-${a}`, !!a]
-), v = ({ role: o, orientation: a }) => o === e.presentation ? null : a, p = i`<template
-	${n({
-  role: (o) => o.role || e.separator,
-  ariaHidden: !0,
-  ariaOrientation: v
-})}
->
-	<span class="${d}"></span
-></template>`, m = r(
-  "divider",
-  s,
-  p,
+import { V as i, h as s, c as e, d as t } from "./vivid-element.js";
+const n = ":host{display:contents}slot:not(:focus-within){position:absolute;display:inline;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
+class l extends i {
+}
+const o = () => s`<slot></slot>`, a = t(
+  "visually-hidden",
+  l,
+  o,
   [],
   {
-    styles: l
+    styles: n
   }
-), k = t(m);
+), p = e(
+  a
+);
 export {
-  m as d,
-  k as r
+  l as V,
+  p as r,
+  a as v
 };

package/bundled/definition15.cjs

@@ -1,30 +1,5 @@
-"use strict";const e=require("./vivid-element.cjs"),g=require("./base-progress.cjs"),v=require("./delegates-aria.cjs"),c=require("./when.cjs"),m=require("./class-names.cjs"),f=":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{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";var z=Object.defineProperty,l=(r,a,i,b)=>{for(var s=void 0,t=r.length-1,o;t>=0;t--)(o=r[t])&&(s=o(a,i,s)||s);return s&&z(a,i,s),s};class n extends v.DelegatesAria(g.BaseProgress){}l([e.attr],n.prototype,"connotation");l([e.attr],n.prototype,"size");const x=({connotation:r,size:a,paused:i})=>m.classNames("base",["disabled",!!i],[`connotation-${r}`,!!r],[`size-${a}`,!!a]),p=44,u=e.html`<template>
-	<div
-		class="${r=>r.paused?"paused":""} ${x}"
-		${v.delegateAria({role:"progressbar",ariaValueNow:r=>r.value,ariaValueMin:r=>r.min,ariaValueMax:r=>r.max})}
-	>
-		${c.when(r=>typeof r.value=="number",e.html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="determinate"
-						style="stroke-dasharray: ${r=>p*r.percentComplete/100}px ${p}px"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`)}
-		${c.when(r=>typeof r.value!="number",e.html`
-				<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.defineVividComponent("progress-ring",n,u,[],{styles:f}),_=e.createRegisterFunction(d);exports.ProgressRing=n;exports.progressRingDefinition=d;exports.registerProgressRing=_;
+"use strict";const o=require("./vivid-element.cjs"),t=require("./divider.cjs"),r=require("./host-semantics.cjs"),n=require("./class-names.cjs"),s=":host{display:block}.base{--_connotation-color-soft: var(--vvd-divider-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-divider-accent-dim, var(--vvd-color-neutral-200))}.base{display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}",c=({orientation:e,appearance:i})=>n.classNames("base",[`${e}`,!!e],[`appearance-${i}`,!!i]),l=({role:e,orientation:i})=>e===t.DividerRole.presentation?null:i,d=o.html`<template
+	${r.applyHostSemantics({role:e=>e.role||t.DividerRole.separator,ariaHidden:!0,ariaOrientation:l})}
+>
+	<span class="${c}"></span
+></template>`,a=o.defineVividComponent("divider",t.Divider,d,[],{styles:s}),v=o.createRegisterFunction(a);exports.dividerDefinition=a;exports.registerDivider=v;

package/bundled/definition15.js

@@ -1,80 +1,29 @@
-import { a as v, h as o, c as d, d as g } from "./vivid-element.js";
-import { B as m } from "./base-progress.js";
-import { D as f, d as z } from "./delegates-aria.js";
-import { w as c } from "./when.js";
-import { c as x } from "./class-names.js";
-const _ = ":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{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
-var u = Object.defineProperty, l = (r, a, s, w) => {
-  for (var e = void 0, i = r.length - 1, t; i >= 0; i--)
-    (t = r[i]) && (e = t(a, s, e) || e);
-  return e && u(a, s, e), e;
-};
-class n extends f(m) {
-}
-l([
-  v
-], n.prototype, "connotation");
-l([
-  v
-], n.prototype, "size");
-const b = ({ connotation: r, size: a, paused: s }) => x(
+import { h as i, c as t, d as r } from "./vivid-element.js";
+import { a as e, D as s } from "./divider.js";
+import { a as n } from "./host-semantics.js";
+import { c } from "./class-names.js";
+const l = ":host{display:block}.base{--_connotation-color-soft: var(--vvd-divider-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-divider-accent-dim, var(--vvd-color-neutral-200))}.base{display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}", d = ({ orientation: o, appearance: a }) => c(
   "base",
-  ["disabled", !!s],
-  [`connotation-${r}`, !!r],
-  [`size-${a}`, !!a]
-), p = 44, y = o`<template>
-	<div
-		class="${(r) => r.paused ? "paused" : ""} ${b}"
-		${z({
-  role: "progressbar",
-  ariaValueNow: (r) => r.value,
-  ariaValueMin: (r) => r.min,
-  ariaValueMax: (r) => r.max
+  [`${o}`, !!o],
+  [`appearance-${a}`, !!a]
+), v = ({ role: o, orientation: a }) => o === e.presentation ? null : a, p = i`<template
+	${n({
+  role: (o) => o.role || e.separator,
+  ariaHidden: !0,
+  ariaOrientation: v
 })}
-	>
-		${c(
-  (r) => typeof r.value == "number",
-  o`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="determinate"
-						style="stroke-dasharray: ${(r) => p * r.percentComplete / 100}px ${p}px"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`
-)}
-		${c(
-  (r) => typeof r.value != "number",
-  o`
-				<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>`, k = g(
-  "progress-ring",
-  n,
-  y,
+>
+	<span class="${d}"></span
+></template>`, m = r(
+  "divider",
+  s,
+  p,
   [],
   {
-    styles: _
+    styles: l
   }
-), B = d(
-  k
-);
+), k = t(m);
 export {
-  n as P,
-  k as p,
-  B as r
+  m as d,
+  k as r
 };

package/bundled/definition16.cjs

@@ -1,19 +1,30 @@
-"use strict";const p=require("./definition9.cjs"),n=require("./vivid-element.cjs"),d=require("./anchored.cjs"),u=require("./localized.cjs"),g=require("./index.cjs"),m=require("./when.cjs"),v=require("./class-names.cjs"),f=":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";var b=Object.defineProperty,r=(s,e,i,t)=>{for(var o=void 0,l=s.length-1,c;l>=0;l--)(c=s[l])&&(o=c(e,i,o)||o);return o&&b(e,i,o),o};class a extends u.Localized(d.Anchored(n.VividElement)){constructor(){super(...arguments),this.#e=null,this.alternate=!1,this.placement="right",this.open=!1,this.#t=()=>{this.open||n.Updates.enqueue(()=>this.open=!0)},this.#n=e=>{const i=!this.contains(e.target),t=this._anchorEl?.contains(e.target);(i||t)&&(this.open=!1)},this.#o=e=>{e.key==="Escape"&&(this.open=!1)}}#e;openChanged(e,i){e!==void 0&&(i?this.setAttribute("role","status"):this.removeAttribute("role"),this.#i(),this._anchorEl&&this.#s(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#i()}disconnectedCallback(){super.disconnectedCallback(),this.#i()}_anchorElChanged(e,i){e&&this.#r(e),i&&this.#a(i)}#a(e){e.addEventListener("click",this.#t,!0),this.#e=e.ariaLabel,e.ariaLabel=`${this.locale.toggletip.anchorLabel(e.ariaLabel||"")}`,this.#s(e)}#s(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#r(e){e.removeEventListener("click",this.#t,!0),e.ariaLabel&&(e.ariaLabel=this.#e),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded")}#t;#i(){document.removeEventListener("click",this.#n),document.removeEventListener("keydown",this.#o),this.open&&this.isConnected&&(document.addEventListener("click",this.#n),document.addEventListener("keydown",this.#o))}#n;#o}r([n.attr],a.prototype,"headline");r([n.attr({mode:"boolean"})],a.prototype,"alternate");r([n.attr({mode:"fromView"})],a.prototype,"placement");r([n.attr({mode:"boolean"})],a.prototype,"open");const y=s=>v.classNames("control"),k=s=>{const e=s.tagFor(p.Popup),i=d.anchorSlotTemplateFactory();return n.html`
-		${i}
-		<${e}
-			@keydown="${(t,{event:o})=>!(t.open&&g.handleEscapeKeyAndStopPropogation(o))}"
-			class="${y}"
-			arrow
-			:anchor="${t=>t._anchorEl}"
-			:open="${t=>t.open}"
-			?alternate="${t=>!t.alternate}"
-			placement="${t=>t.placement}"
-			exportparts="vvd-theme-alternate"
-		>
-			<div class="content-wrapper">
-				${m.when(t=>t.headline,n.html`<h2 class="headline">${t=>t.headline}</h2>`)}
-				<slot></slot>
-				<div class="action-items"><slot name="action-items"></slot></div>
-			</div>
-		</${e}>
-	`},h=n.defineVividComponent("toggletip",a,k,[p.popupDefinition],{styles:f}),E=n.createRegisterFunction(h);exports.Toggletip=a;exports.registerToggletip=E;exports.toggletipDefinition=h;
+"use strict";const e=require("./vivid-element.cjs"),g=require("./base-progress.cjs"),v=require("./delegates-aria.cjs"),c=require("./when.cjs"),m=require("./class-names.cjs"),f=":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{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";var z=Object.defineProperty,l=(r,a,i,b)=>{for(var s=void 0,t=r.length-1,o;t>=0;t--)(o=r[t])&&(s=o(a,i,s)||s);return s&&z(a,i,s),s};class n extends v.DelegatesAria(g.BaseProgress){}l([e.attr],n.prototype,"connotation");l([e.attr],n.prototype,"size");const x=({connotation:r,size:a,paused:i})=>m.classNames("base",["disabled",!!i],[`connotation-${r}`,!!r],[`size-${a}`,!!a]),p=44,u=e.html`<template>
+	<div
+		class="${r=>r.paused?"paused":""} ${x}"
+		${v.delegateAria({role:"progressbar",ariaValueNow:r=>r.value,ariaValueMin:r=>r.min,ariaValueMax:r=>r.max})}
+	>
+		${c.when(r=>typeof r.value=="number",e.html`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="determinate"
+						style="stroke-dasharray: ${r=>p*r.percentComplete/100}px ${p}px"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`)}
+		${c.when(r=>typeof r.value!="number",e.html`
+				<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.defineVividComponent("progress-ring",n,u,[],{styles:f}),_=e.createRegisterFunction(d);exports.ProgressRing=n;exports.progressRingDefinition=d;exports.registerProgressRing=_;

package/bundled/definition16.js

@@ -1,103 +1,80 @@
-import { P as d, p as h } from "./definition9.js";
-import { V as m, U as u, a, h as c, c as f, d as g } from "./vivid-element.js";
-import { A as v, a as b } from "./anchored.js";
-import { L as y } from "./localized.js";
-import { h as k } from "./index.js";
-import { w as L } from "./when.js";
-import { c as E } from "./class-names.js";
-const x = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
-var A = Object.defineProperty, r = (n, e, i, t) => {
-  for (var o = void 0, l = n.length - 1, p; l >= 0; l--)
-    (p = n[l]) && (o = p(e, i, o) || o);
-  return o && A(e, i, o), o;
+import { a as v, h as o, c as d, d as g } from "./vivid-element.js";
+import { B as m } from "./base-progress.js";
+import { D as f, d as z } from "./delegates-aria.js";
+import { w as c } from "./when.js";
+import { c as x } from "./class-names.js";
+const _ = ":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{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.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{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
+var u = Object.defineProperty, l = (r, a, s, w) => {
+  for (var e = void 0, i = r.length - 1, t; i >= 0; i--)
+    (t = r[i]) && (e = t(a, s, e) || e);
+  return e && u(a, s, e), e;
 };
-class s extends y(v(m)) {
-  constructor() {
-    super(...arguments), this.#e = null, this.alternate = !1, this.placement = "right", this.open = !1, this.#t = () => {
-      this.open || u.enqueue(() => this.open = !0);
-    }, this.#o = (e) => {
-      const i = !this.contains(e.target), t = this._anchorEl?.contains(e.target);
-      (i || t) && (this.open = !1);
-    }, this.#n = (e) => {
-      e.key === "Escape" && (this.open = !1);
-    };
-  }
-  #e;
-  openChanged(e, i) {
-    e !== void 0 && (i ? this.setAttribute("role", "status") : this.removeAttribute("role"), this.#i(), this._anchorEl && this.#s(this._anchorEl));
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.#i();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.#i();
-  }
-  /**
-   * @internal
-   */
-  _anchorElChanged(e, i) {
-    e && this.#r(e), i && this.#a(i);
-  }
-  #a(e) {
-    e.addEventListener("click", this.#t, !0), this.#e = e.ariaLabel, e.ariaLabel = `${this.locale.toggletip.anchorLabel(e.ariaLabel || "")}`, this.#s(e);
-  }
-  #s(e) {
-    e.setAttribute("aria-expanded", this.open.toString()), e.setAttribute("data-expanded", this.open.toString());
-  }
-  #r(e) {
-    e.removeEventListener("click", this.#t, !0), e.ariaLabel && (e.ariaLabel = this.#e), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded");
-  }
-  #t;
-  #i() {
-    document.removeEventListener("click", this.#o), document.removeEventListener("keydown", this.#n), this.open && this.isConnected && (document.addEventListener("click", this.#o), document.addEventListener("keydown", this.#n));
-  }
-  #o;
-  #n;
+class n extends f(m) {
 }
-r([
-  a
-], s.prototype, "headline");
-r([
-  a({ mode: "boolean" })
-], s.prototype, "alternate");
-r([
-  a({ mode: "fromView" })
-], s.prototype, "placement");
-r([
-  a({ mode: "boolean" })
-], s.prototype, "open");
-const C = (n) => E("control"), _ = (n) => {
-  const e = n.tagFor(d), i = b();
-  return c`
-		${i}
-		<${e}
-			@keydown="${(t, { event: o }) => !(t.open && k(o))}"
-			class="${C}"
-			arrow
-			:anchor="${(t) => t._anchorEl}"
-			:open="${(t) => t.open}"
-			?alternate="${(t) => !t.alternate}"
-			placement="${(t) => t.placement}"
-			exportparts="vvd-theme-alternate"
-		>
-			<div class="content-wrapper">
-				${L((t) => t.headline, c`<h2 class="headline">${(t) => t.headline}</h2>`)}
-				<slot></slot>
-				<div class="action-items"><slot name="action-items"></slot></div>
-			</div>
-		</${e}>
-	`;
-}, $ = g(
-  "toggletip",
-  s,
-  _,
-  [h],
+l([
+  v
+], n.prototype, "connotation");
+l([
+  v
+], n.prototype, "size");
+const b = ({ connotation: r, size: a, paused: s }) => x(
+  "base",
+  ["disabled", !!s],
+  [`connotation-${r}`, !!r],
+  [`size-${a}`, !!a]
+), p = 44, y = o`<template>
+	<div
+		class="${(r) => r.paused ? "paused" : ""} ${b}"
+		${z({
+  role: "progressbar",
+  ariaValueNow: (r) => r.value,
+  ariaValueMin: (r) => r.min,
+  ariaValueMax: (r) => r.max
+})}
+	>
+		${c(
+  (r) => typeof r.value == "number",
+  o`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="determinate"
+						style="stroke-dasharray: ${(r) => p * r.percentComplete / 100}px ${p}px"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`
+)}
+		${c(
+  (r) => typeof r.value != "number",
+  o`
+				<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>`, k = g(
+  "progress-ring",
+  n,
+  y,
+  [],
   {
-    styles: x
+    styles: _
   }
-), j = f($);
+), B = d(
+  k
+);
 export {
-  s as T,
-  j as r,
-  $ as t
+  n as P,
+  k as p,
+  B as r
 };