@vonage/vivid 5.9.0 → 5.10.0

package/selectable-box/index.js

@@ -1,136 +1,144 @@
 import { C as h, c as u } from "../bundled/definition8.js";
-import { R as x, a as _ } from "../bundled/definition18.js";
-import { V as m, a as c, h as n, c as k, d as g } from "../bundled/vivid-element.js";
+import { R as _, a as x } from "../bundled/definition18.js";
+import { V as m, a as r, h as i, c as k, d as g } from "../bundled/vivid-element.js";
 import { D as $, d as p } from "../bundled/delegates-aria.js";
-import { C as i } from "../bundled/enums.js";
+import { C as s } from "../bundled/enums.js";
 import { w as v } from "../bundled/when.js";
 import { c as y } from "../bundled/class-names.js";
-const C = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
-var B = Object.defineProperty, r = (a, e, o, s) => {
-  for (var t = void 0, d = a.length - 1, b; d >= 0; d--)
-    (b = a[d]) && (t = b(e, o, t) || t);
-  return t && B(e, o, t), t;
+const B = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
+var C = Object.defineProperty, c = (a, o, e, d) => {
+  for (var l = void 0, n = a.length - 1, b; n >= 0; n--)
+    (b = a[n]) && (l = b(o, e, l) || l);
+  return l && C(o, e, l), l;
 };
-class l extends $(m) {
+class t extends $(m) {
   constructor() {
-    super(...arguments), this.checked = !1, this.clickableBox = !1, this.controlPlacement = "end-stacked", this.tight = !1;
+    super(...arguments), this.checked = !1, this.clickableBox = !1, this.controlPlacement = "end-stacked", this.tight = !1, this.disabled = !1;
   }
   /**
    * @internal
    */
   _handleCheckedChange() {
-    this.controlType === "radio" && this.checked || (this.checked = !this.checked, this.clickableBox && this.$emit("change"));
+    this.disabled || this.controlType === "radio" && this.checked || (this.checked = !this.checked, this.clickableBox && this.$emit("change"));
   }
   /**
    * @internal
    */
-  _handleKeydown(e) {
-    return (e.code === "Space" || e.code === "Enter") && this.clickableBox ? this._handleCheckedChange() : !0;
+  _handleKeydown(o) {
+    return this.disabled ? !0 : (o.code === "Space" || o.code === "Enter") && this.clickableBox ? this._handleCheckedChange() : !0;
   }
 }
-r([
-  c({ mode: "boolean" })
-], l.prototype, "checked");
-r([
-  c({ attribute: "clickable-box", mode: "boolean" })
-], l.prototype, "clickableBox");
-r([
-  c
-], l.prototype, "connotation");
-r([
-  c({ attribute: "control-type" })
-], l.prototype, "controlType");
-r([
-  c({ attribute: "control-placement", mode: "fromView" })
-], l.prototype, "controlPlacement");
-r([
-  c({ mode: "boolean" })
-], l.prototype, "tight");
+c([
+  r({ mode: "boolean" })
+], t.prototype, "checked");
+c([
+  r({ attribute: "clickable-box", mode: "boolean" })
+], t.prototype, "clickableBox");
+c([
+  r
+], t.prototype, "connotation");
+c([
+  r({ attribute: "control-type" })
+], t.prototype, "controlType");
+c([
+  r({ attribute: "control-placement", mode: "fromView" })
+], t.prototype, "controlPlacement");
+c([
+  r({ mode: "boolean" })
+], t.prototype, "tight");
+c([
+  r({ mode: "boolean" })
+], t.prototype, "disabled");
 const w = ({
   connotation: a,
-  tight: e,
-  checked: o,
-  clickableBox: s,
-  controlPlacement: t
+  tight: o,
+  checked: e,
+  clickableBox: d,
+  controlPlacement: l,
+  disabled: n
 }) => y(
   "base",
   [`connotation-${a}`, !!a],
-  ["tight", e],
-  ["selected", o],
-  ["clickable", s],
-  ["readonly", !s],
-  [`control-placement-${t}`, !!t]
+  ["tight", o],
+  ["selected", e],
+  ["clickable", d],
+  ["readonly", !d],
+  [`control-placement-${l}`, !!l],
+  ["disabled", n]
 );
 function f(a) {
   a.clickableBox || a._handleCheckedChange();
 }
 function T(a) {
-  const e = a.tagFor(h);
-  return n`${v(
-    (o) => o.controlType !== "radio",
-    n`
-		<${e}
+  const o = a.tagFor(h);
+  return i`${v(
+    (e) => e.controlType !== "radio",
+    i`
+		<${o}
 			${p(
       {
-        ariaLabel: (o) => !o.clickableBox && o.ariaLabel ? o.ariaLabel : null
+        ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null
       },
       { onlySpecified: !0 }
     )}
-			@change="${(o) => f(o)}"
-			class="control checkbox ${(o) => o.controlPlacement}"
-			connotation="${(o) => o.connotation === "cta" ? i.CTA : i.Accent}"
-			:checked="${(o) => o.checked}"
-			inert="${(o) => o.clickableBox ? !0 : null}"
-		></${e}>`
+			@change="${(e) => f(e)}"
+			class="control checkbox ${(e) => e.controlPlacement}"
+			connotation="${(e) => e.connotation === "cta" ? s.CTA : s.Accent}"
+			:checked="${(e) => e.checked}"
+			?disabled="${(e) => e.disabled}"
+			inert="${(e) => e.clickableBox ? !0 : null}"
+		></${o}>`
   )} `;
 }
 function L(a) {
-  const e = a.tagFor(x);
-  return n`${v(
-    (o) => o.controlType === "radio",
-    n`
-		<${e}
+  const o = a.tagFor(_);
+  return i`${v(
+    (e) => e.controlType === "radio",
+    i`
+		<${o}
 			${p(
       {
-        ariaLabel: (o) => !o.clickableBox && o.ariaLabel ? o.ariaLabel : null
+        ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null
       },
       { onlySpecified: !0 }
     )}
-			@change="${(o) => f(o)}"
-			class="control radio ${(o) => o.controlPlacement}"
-			connotation="${(o) => o.connotation === "cta" ? i.CTA : i.Accent}"
-			:checked="${(o) => o.checked}"
-			inert="${(o) => o.clickableBox ? !0 : null}"
-		></${e}>`
+			@change="${(e) => f(e)}"
+			class="control radio ${(e) => e.controlPlacement}"
+			connotation="${(e) => e.connotation === "cta" ? s.CTA : s.Accent}"
+			:checked="${(e) => e.checked}"
+			?disabled="${(e) => e.disabled}"
+			inert="${(e) => e.clickableBox ? !0 : null}"
+		></${o}>`
   )} `;
 }
-const A = (a) => n`<template>
+const A = (a) => i`<template>
 		<div
 			class="${w}"
-			tabindex="${(e) => e.clickableBox ? "0" : null}"
+			tabindex="${(o) => o.clickableBox && !o.disabled ? "0" : null}"
 			${p({
-  role: (e) => e.clickableBox ? "button" : null,
-  ariaPressed: (e) => e.clickableBox ? e.checked ? "true" : "false" : null,
-  ariaLabel: (e) => e.clickableBox ? e.ariaLabel : null
+  role: (o) => o.clickableBox ? "button" : null,
+  ariaPressed: (o) => o.clickableBox ? o.checked ? "true" : "false" : null,
+  ariaLabel: (o) => o.clickableBox ? o.ariaLabel : null,
+  ariaDisabled: (o) => o.clickableBox && o.disabled ? "true" : null
 })}
-			@keydown="${(e, o) => e._handleKeydown(o.event)}"
-			@click="${(e) => e.clickableBox ? e._handleCheckedChange() : null}"
+			@keydown="${(o, e) => o._handleKeydown(e.event)}"
+			@click="${(o) => o.clickableBox ? o._handleCheckedChange() : null}"
 		>
 			${T(a)} ${L(a)}
 			<slot></slot>
 		</div>
-	</template>`, P = g(
+	</template>`, D = g(
   "selectable-box",
-  l,
+  t,
   A,
-  [u, _],
+  [u, x],
   {
-    styles: C,
+    styles: B,
     shadowOptions: {
       delegatesFocus: !0
     }
   }
-), S = k(
-  P
+), P = k(
+  D
 );
-S();
+P();

package/shared/utils/slottable-request.d.ts

@@ -0,0 +1,7 @@
+export declare const removeSymbol: unique symbol;
+export interface SlottableRequestEvent<T = unknown> extends Event {
+    readonly data: T | typeof removeSymbol;
+    readonly name: string;
+    readonly slotName: string;
+}
+export declare function dispatchSlottableRequest<T>(target: EventTarget, name: string, slotName: string, data: T | typeof removeSymbol): void;

package/status/definition.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const icon_definition = require('../icon/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const affix = require('../unbundled/affix.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const enums = require('../unbundled/enums.cjs');
+
+const styles = ".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}";
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Status extends affix.AffixIcon(vividElement.VividElement) {
+}
+__decorateClass([
+  fastElement.attr
+], Status.prototype, "status");
+__decorateClass([
+  fastElement.attr
+], Status.prototype, "connotation");
+
+const DEFAULT_ICON_BY_CONNOTATION = {
+  [enums.Connotation.Success]: "check-circle-solid",
+  [enums.Connotation.Information]: "info-solid",
+  [enums.Connotation.Warning]: "warning-solid",
+  [enums.Connotation.Alert]: "error-solid"
+};
+const getClasses = ({ connotation }) => fastWebUtilities.classNames("base", connotation ? `connotation-${connotation}` : "");
+function getEffectiveIcon(status) {
+  if (status.icon) {
+    return status.icon;
+  }
+  return status.connotation ? DEFAULT_ICON_BY_CONNOTATION[status.connotation] : void 0;
+}
+function getHeaderTemplate() {
+  return fastElement.html`<div class="headline">${(x) => x.status}</div>`;
+}
+const StatusTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  return fastElement.html`
+		<div class="${getClasses}">
+			${(x) => affixIconTemplate(getEffectiveIcon(x), affix.IconWrapper.Slot)}
+			<div class="text">
+				${fastElement.when((x) => x.status, getHeaderTemplate())}
+				<div class="description">
+					<slot></slot>
+				</div>
+			</div>
+		</div>
+	`;
+};
+
+const statusDefinition = vividElement.defineVividComponent(
+  "status",
+  Status,
+  StatusTemplate,
+  [icon_definition.iconDefinition],
+  {
+    styles
+  }
+);
+const registerStatus = vividElement.createRegisterFunction(statusDefinition);
+
+exports.VwcStatusElement = Status;
+exports.registerStatus = registerStatus;
+exports.statusDefinition = statusDefinition;

package/status/definition.js

@@ -0,0 +1,70 @@
+import { iconDefinition } from '../icon/definition.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, when, html } from '@microsoft/fast-element';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { C as Connotation } from '../unbundled/enums.js';
+
+const styles = ".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}";
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Status extends AffixIcon(VividElement) {
+}
+__decorateClass([
+  attr
+], Status.prototype, "status");
+__decorateClass([
+  attr
+], Status.prototype, "connotation");
+
+const DEFAULT_ICON_BY_CONNOTATION = {
+  [Connotation.Success]: "check-circle-solid",
+  [Connotation.Information]: "info-solid",
+  [Connotation.Warning]: "warning-solid",
+  [Connotation.Alert]: "error-solid"
+};
+const getClasses = ({ connotation }) => classNames("base", connotation ? `connotation-${connotation}` : "");
+function getEffectiveIcon(status) {
+  if (status.icon) {
+    return status.icon;
+  }
+  return status.connotation ? DEFAULT_ICON_BY_CONNOTATION[status.connotation] : void 0;
+}
+function getHeaderTemplate() {
+  return html`<div class="headline">${(x) => x.status}</div>`;
+}
+const StatusTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html`
+		<div class="${getClasses}">
+			${(x) => affixIconTemplate(getEffectiveIcon(x), IconWrapper.Slot)}
+			<div class="text">
+				${when((x) => x.status, getHeaderTemplate())}
+				<div class="description">
+					<slot></slot>
+				</div>
+			</div>
+		</div>
+	`;
+};
+
+const statusDefinition = defineVividComponent(
+  "status",
+  Status,
+  StatusTemplate,
+  [iconDefinition],
+  {
+    styles
+  }
+);
+const registerStatus = createRegisterFunction(statusDefinition);
+
+export { Status as VwcStatusElement, registerStatus, statusDefinition };

package/status/index.cjs

@@ -0,0 +1,11 @@
+"use strict";const d=require("../bundled/definition2.cjs"),n=require("../bundled/vivid-element.cjs"),c=require("../bundled/affix.cjs"),i=require("../bundled/enums.cjs"),f=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs"),m=".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}";var p=Object.defineProperty,l=(o,e,t,C)=>{for(var a=void 0,r=o.length-1,v;r>=0;r--)(v=o[r])&&(a=v(e,t,a)||a);return a&&p(e,t,a),a};class s extends c.AffixIcon(n.VividElement){}l([n.attr],s.prototype,"status");l([n.attr],s.prototype,"connotation");const _={[i.Connotation.Success]:"check-circle-solid",[i.Connotation.Information]:"info-solid",[i.Connotation.Warning]:"warning-solid",[i.Connotation.Alert]:"error-solid"},g=({connotation:o})=>u.classNames("base",o?`connotation-${o}`:"");function x(o){return o.icon?o.icon:o.connotation?_[o.connotation]:void 0}function w(){return n.html`<div class="headline">${o=>o.status}</div>`}const y=o=>{const e=c.affixIconTemplateFactory(o);return n.html`
+		<div class="${g}">
+			${t=>e(x(t),c.IconWrapper.Slot)}
+			<div class="text">
+				${f.when(t=>t.status,w())}
+				<div class="description">
+					<slot></slot>
+				</div>
+			</div>
+		</div>
+	`},b=n.defineVividComponent("status",s,y,[d.iconDefinition],{styles:m}),h=n.createRegisterFunction(b);h();

package/status/index.js

@@ -0,0 +1,55 @@
+import { i as d } from "../bundled/definition2.js";
+import { V as f, a as s, h as v, c as m, d as p } from "../bundled/vivid-element.js";
+import { b as u, a as _, I as g } from "../bundled/affix.js";
+import { C as r } from "../bundled/enums.js";
+import { w as x } from "../bundled/when.js";
+import { c as w } from "../bundled/class-names.js";
+const b = ".base.connotation-information{--_connotation-color-intermediate: var(--vvd-status-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-status-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-status-information-fierce, var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-status-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-status-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-status-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-status-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-status-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-status-alert-fierce, var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate: var(--vvd-status-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-status-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-status-success-fierce, var(--vvd-color-success-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base{display:inline-flex;align-items:center;column-gap:8px}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.8)}.text{display:flex;min-width:0;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}";
+var y = Object.defineProperty, l = (o, a, t, $) => {
+  for (var n = void 0, e = o.length - 1, c; e >= 0; e--)
+    (c = o[e]) && (n = c(a, t, n) || n);
+  return n && y(a, t, n), n;
+};
+class i extends u(f) {
+}
+l([
+  s
+], i.prototype, "status");
+l([
+  s
+], i.prototype, "connotation");
+const h = {
+  [r.Success]: "check-circle-solid",
+  [r.Information]: "info-solid",
+  [r.Warning]: "warning-solid",
+  [r.Alert]: "error-solid"
+}, I = ({ connotation: o }) => w("base", o ? `connotation-${o}` : "");
+function C(o) {
+  return o.icon ? o.icon : o.connotation ? h[o.connotation] : void 0;
+}
+function T() {
+  return v`<div class="headline">${(o) => o.status}</div>`;
+}
+const N = (o) => {
+  const a = _(o);
+  return v`
+		<div class="${I}">
+			${(t) => a(C(t), g.Slot)}
+			<div class="text">
+				${x((t) => t.status, T())}
+				<div class="description">
+					<slot></slot>
+				</div>
+			</div>
+		</div>
+	`;
+}, O = p(
+  "status",
+  i,
+  N,
+  [d],
+  {
+    styles: b
+  }
+), S = m(O);
+S();

package/styles/core/all.css

@@ -1,10 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/theme.css

@@ -1,10 +1,10 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 .vvd-root {
   background-color: var(--vvd-color-canvas);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Dec 2025 18:08:08 GMT
+ * Generated on Tue, 10 Feb 2026 14:55:49 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {