@vonage/vivid 5.27.0 → 5.28.0

package/shared/localization/Locale.d.ts

@@ -21,6 +21,7 @@ import { CharCountLocale } from '../patterns/char-count/locale';
 import { DataGridLocale } from '../../lib/data-grid/locale';
 import { PaginationLocale } from '../../lib/pagination/locale';
 import { TagLocale } from '../../lib/tag/locale';
+import { TableSortingButtonLocale } from '../../lib/table/locale';
 import { Connotation } from '../../lib/enums';
 import { ToggletipLocale } from '../../lib/toggletip/locale';
 import { SimpleColorPickerLocale } from '../../lib/simple-color-picker/locale';
@@ -61,6 +62,7 @@ export interface Locale {
     dataGrid: DataGridLocale;
     pagination: PaginationLocale;
     tag: TagLocale;
+    tableSortingButton: TableSortingButtonLocale;
     toggletip: ToggletipLocale;
     baseColorPicker: BaseColorPickerLocale;
     simpleColorPicker: SimpleColorPickerLocale;

package/table/index.cjs

@@ -1,4 +1,4 @@
-const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/decorate.cjs"),n=require("../bundled/definition2.cjs"),r=require("../bundled/icon.cjs"),i=require("../bundled/host-semantics.cjs"),a=require("../bundled/delegates-aria.cjs"),o=require("../bundled/data-grid.options.cjs");var s=`:host{border-collapse:collapse;border-spacing:0;inline-size:100%}.table-inner-container{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.table-inner-container ::-webkit-scrollbar{width:4px}.table-inner-container ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.table-inner-container ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.table-inner-container{inline-size:100%;display:block;overflow-x:auto}.table-content{inline-size:100%;display:table;overflow-x:auto}`,c=`button{aspect-ratio:1;cursor:pointer;background:0 0;border:none;border-radius:8px}button: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))}`,l=`:host{display:table-header-group}`,u=`:host{display:table-row-group}`,d=`:host{display:table-row}@media (hover:hover){:host:hover{background-color:var(--vvd-color-neutral-200)}}:host[selected]{background-color:var(--_appearance-color-fill)}.base{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:contents}`,f=`:host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;--_table-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_table-cell-default-white-space:nowrap;display:table-cell}:host([role=columnheader]){border-bottom-color:var(--vvd-color-canvas-text)}:host(:focus-visible){outline:none}.base{box-sizing:border-box;block-size:100%;color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));padding:0;flex-direction:column;justify-content:center;padding-block:4px;padding-inline:12px;display:flex;overflow:hidden}:host(:focus-visible) .base{--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))}slot{text-overflow:ellipsis;inline-size:100%;white-space:var(--table-cell-white-space,var(--_table-cell-default-white-space));flex:none;display:block;overflow:hidden}`,p=`:host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;display:table-cell}:host:not([cell-type=columnheader]){--_table-cell-default-block-size:100%;--_table-cell-default-white-space:normal}:host[selected]{background-color:var(--_appearance-color-fill)}:host(:focus-visible){outline:none}.base{box-sizing:border-box;block-size:100%;color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));flex-direction:column;justify-content:center;padding-block:4px;padding-inline:12px;display:flex;overflow:hidden}:host(:focus-visible) .base{--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))}slot{flex:none;inline-size:100%;display:block}`,m=class extends e.t{},h=()=>e.p`
+const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/decorate.cjs"),r=require("../bundled/definition2.cjs"),i=require("../bundled/icon.cjs"),a=require("../bundled/host-semantics.cjs"),o=require("../bundled/delegates-aria.cjs"),s=require("../bundled/data-grid.options.cjs");var c=`:host{border-collapse:collapse;border-spacing:0;inline-size:100%}.table-inner-container{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.table-inner-container ::-webkit-scrollbar{width:4px}.table-inner-container ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.table-inner-container ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.table-inner-container{inline-size:100%;display:block;overflow-x:auto}.table-content{inline-size:100%;display:table;overflow-x:auto}`,l=`button{aspect-ratio:1;cursor:pointer;background:0 0;border:none;border-radius:8px}button: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))}`,u=`:host{display:table-header-group}`,d=`:host{display:table-row-group}`,f=`:host{display:table-row}@media (hover:hover){:host:hover{background-color:var(--vvd-color-neutral-200)}}:host[selected]{background-color:var(--_appearance-color-fill)}.base{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:contents}`,p=`:host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;--_table-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_table-cell-default-white-space:nowrap;display:table-cell}:host([role=columnheader]){border-bottom-color:var(--vvd-color-canvas-text)}:host(:focus-visible){outline:none}.base{box-sizing:border-box;block-size:100%;color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));padding:0;flex-direction:column;justify-content:center;padding-block:4px;padding-inline:12px;display:flex;overflow:hidden}:host(:focus-visible) .base{--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))}slot{text-overflow:ellipsis;inline-size:100%;white-space:var(--table-cell-white-space,var(--_table-cell-default-white-space));flex:none;display:block;overflow:hidden}`,m=`:host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;display:table-cell}:host:not([cell-type=columnheader]){--_table-cell-default-block-size:100%;--_table-cell-default-white-space:normal}:host[selected]{background-color:var(--_appearance-color-fill)}:host(:focus-visible){outline:none}.base{box-sizing:border-box;block-size:100%;color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));flex-direction:column;justify-content:center;padding-block:4px;padding-inline:12px;display:flex;overflow:hidden}:host(:focus-visible) .base{--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))}slot{flex:none;inline-size:100%;display:block}`,h=class extends t.t{},g=()=>t.p`
 		<template role="table">
 			<div part="inner-container" class="table-inner-container">
 				<div part="content" class="table-content">
@@ -6,47 +6,47 @@ const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/decorate.c
 				</div>
 			</div>
 		</template>
-	`,g=`table-head`,_=class extends e.t{},v=()=>e.p`
+	`,_=`table-head`,v=class extends t.t{},y=()=>t.p`
 		<template>
 			<slot></slot>
 		</template>
-	`,y=class extends e.t{},b=()=>e.p`
+	`,b=class extends t.t{},x=()=>t.p`
 		<template>
 			<slot></slot>
 		</template>
-	`,x=class extends i.t(e.t){},S=()=>e.p`
+	`,S=class extends a.t(t.t){},C=()=>t.p`
 		<template
-			${i.n({role:`row`})}
+			${a.n({role:`row`})}
 		>
 			<div class="base connotation-accent appearance-listitem with-idle">
 				<slot></slot>
 			</div>
 		</template>
-	`,C=class extends i.t(e.t){connectedCallback(){super.connectedCallback(),this.addEventListener(`sort`,this.#e)}#e(e){let t=e.detail;t===`asc`?this.setAttribute(`aria-sort`,`ascending`):t===`desc`?this.setAttribute(`aria-sort`,`descending`):t===`none`?this.setAttribute(`aria-sort`,`none`):this.removeAttribute(`aria-sort`)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`sort`,this.#e)}},w=t=>{let n=t.tagForNonDependency(g);return e.p`
+	`,w=class extends a.t(t.t){connectedCallback(){super.connectedCallback(),this.addEventListener(`sort`,this.#e)}#e(e){let t=e.detail;t===`asc`?this.setAttribute(`aria-sort`,`ascending`):t===`desc`?this.setAttribute(`aria-sort`,`descending`):t===`none`?this.setAttribute(`aria-sort`,`none`):this.removeAttribute(`aria-sort`)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(`sort`,this.#e)}},T=e=>{let n=e.tagForNonDependency(_);return t.p`
 		<template
 			class="connotation-accent appearance-listitem with-idle"
-			${i.n({role:e=>e.closest(n)===null?o.t.rowheader:o.t.columnheader})}
+			${a.n({role:e=>e.closest(n)===null?s.t.rowheader:s.t.columnheader})}
 		>
 			<div class="base">
 				<slot></slot>
 			</div>
 		</template>
-	`},T=class extends i.t(e.t){},E=()=>e.p`
+	`},E=class extends a.t(t.t){},D=()=>t.p`
 		<template
 			class="connotation-accent appearance-listitem with-idle"
-			${i.n({role:()=>`cell`})}
+			${a.n({role:()=>`cell`})}
 		>
 			<div class="base">
 				<slot></slot>
 			</div>
 		</template>
-	`,D=class extends a.t(e.t){get#e(){return!this.direction||this.direction===`none`?`asc`:this.direction===`asc`?`desc`:`none`}toggleSort(){this.$emit(`sort`,this.#e)&&(this.direction=this.#e,this.dispatchEvent(new CustomEvent(`sort`,{detail:this.direction,bubbles:!0,composed:!0})))}};t.t([e.m],D.prototype,`direction`,void 0);var O=t=>{let n=t.tagFor(r.t);return e.p`
-		<template
-			@click="${e=>e.toggleSort()}"
-			${i.n({role:`button`})}
-		>
-			<button>
-				${t=>{switch(t.direction){case`asc`:return e.p`<${n} name="sort-asc-line"></${n}>`;case`desc`:return e.p`<${n} name="sort-desc-line"></${n}>`;default:return e.p`<${n} name="sort-line"></${n}>`}}}
+	`,O=class extends e.t(o.t(t.t)){get#e(){return!this.direction||this.direction===`none`?`asc`:this.direction===`asc`?`desc`:`none`}toggleSort(){this.$emit(`sort`,this.#e)&&(this.direction=this.#e,this.dispatchEvent(new CustomEvent(`sort`,{detail:this.direction,bubbles:!0,composed:!0})))}};n.t([t.m],O.prototype,`direction`,void 0);var k=e=>{switch(e.direction){case`asc`:return`ascending`;case`desc`:return`descending`;default:return`none`}},A=e=>{let t=k(e),{sortStatus:n,sortInstruction:r}=e.locale.tableSortingButton;return`${n[t]} ${r[t]}`},j=e=>{let n=e.tagFor(i.t);return t.p`
+		<template @click="${e=>e.toggleSort()}">
+			<button
+				type="button"
+				${o.n({ariaLabel:e=>e.ariaLabel||A(e)})}
+			>
+				${e=>{switch(e.direction){case`asc`:return t.p`<${n} name="sort-asc-line"></${n}>`;case`desc`:return t.p`<${n} name="sort-desc-line"></${n}>`;default:return t.p`<${n} name="sort-line"></${n}>`}}}
 			</button>
 		</template>
-	`},k=e.u(`table-cell`,T,E,[],{styles:p}),A=e.u(`table-header-cell`,C,w,[],{styles:f}),j=e.u(`table-row`,x,S,[],{styles:d}),M=e.u(`table-body`,y,b,[],{styles:u}),N=e.u(`table-head`,_,v,[],{styles:l}),P=e.u(`table-sorting-button`,D,O,[n.t],{styles:c}),F=e.u(`table`,m,h,[k,A,j,N,M,P],{styles:s});e.d(F)();
+	`},M=t.u(`table-cell`,E,D,[],{styles:m}),N=t.u(`table-header-cell`,w,T,[],{styles:p}),P=t.u(`table-row`,S,C,[],{styles:f}),F=t.u(`table-body`,b,x,[],{styles:d}),I=t.u(`table-head`,v,y,[],{styles:u}),L=t.u(`table-sorting-button`,O,j,[r.t],{styles:l}),R=t.u(`table`,h,g,[M,N,P,I,F,L],{styles:c});t.d(R)();

package/table/index.js

@@ -1,12 +1,13 @@
-import { d as e, m as t, p as n, t as r, u as i } from "../bundled/vivid-element.js";
-import { t as a } from "../bundled/decorate.js";
-import { t as o } from "../bundled/definition2.js";
-import { t as s } from "../bundled/icon.js";
-import { n as c, t as l } from "../bundled/host-semantics.js";
-import { t as u } from "../bundled/delegates-aria.js";
-import { t as d } from "../bundled/data-grid.options.js";
+import { t as e } from "../bundled/localized.js";
+import { d as t, m as n, p as r, t as i, u as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/decorate.js";
+import { t as s } from "../bundled/definition2.js";
+import { t as c } from "../bundled/icon.js";
+import { n as l, t as u } from "../bundled/host-semantics.js";
+import { n as d, t as f } from "../bundled/delegates-aria.js";
+import { t as p } from "../bundled/data-grid.options.js";
 //#region src/lib/table/table.scss?inline
-var f = ":host{border-collapse:collapse;border-spacing:0;inline-size:100%}.table-inner-container{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.table-inner-container ::-webkit-scrollbar{width:4px}.table-inner-container ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.table-inner-container ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.table-inner-container{inline-size:100%;display:block;overflow-x:auto}.table-content{inline-size:100%;display:table;overflow-x:auto}", p = "button{aspect-ratio:1;cursor:pointer;background:0 0;border:none;border-radius:8px}button: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))}", m = ":host{display:table-header-group}", h = ":host{display:table-row-group}", g = ":host{display:table-row}@media (hover:hover){:host:hover{background-color:var(--vvd-color-neutral-200)}}:host[selected]{background-color:var(--_appearance-color-fill)}.base{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:contents}", _ = ":host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;--_table-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_table-cell-default-white-space:nowrap;display:table-cell}:host([role=columnheader]){border-bottom-color:var(--vvd-color-canvas-text)}:host(:focus-visible){outline:none}.base{box-sizing:border-box;block-size:100%;color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));padding:0;flex-direction:column;justify-content:center;padding-block:4px;padding-inline:12px;display:flex;overflow:hidden}:host(:focus-visible) .base{--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))}slot{text-overflow:ellipsis;inline-size:100%;white-space:var(--table-cell-white-space,var(--_table-cell-default-white-space));flex:none;display:block;overflow:hidden}", v = ":host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;display:table-cell}:host:not([cell-type=columnheader]){--_table-cell-default-block-size:100%;--_table-cell-default-white-space:normal}:host[selected]{background-color:var(--_appearance-color-fill)}:host(:focus-visible){outline:none}.base{box-sizing:border-box;block-size:100%;color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));flex-direction:column;justify-content:center;padding-block:4px;padding-inline:12px;display:flex;overflow:hidden}:host(:focus-visible) .base{--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))}slot{flex:none;inline-size:100%;display:block}", y = class extends r {}, b = () => n`
+var m = ":host{border-collapse:collapse;border-spacing:0;inline-size:100%}.table-inner-container{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.table-inner-container ::-webkit-scrollbar{width:4px}.table-inner-container ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.table-inner-container ::-webkit-scrollbar-thumb{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.table-inner-container{inline-size:100%;display:block;overflow-x:auto}.table-content{inline-size:100%;display:table;overflow-x:auto}", h = "button{aspect-ratio:1;cursor:pointer;background:0 0;border:none;border-radius:8px}button: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))}", g = ":host{display:table-header-group}", _ = ":host{display:table-row-group}", v = ":host{display:table-row}@media (hover:hover){:host:hover{background-color:var(--vvd-color-neutral-200)}}:host[selected]{background-color:var(--_appearance-color-fill)}.base{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:contents}", y = ":host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;--_table-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_table-cell-default-white-space:nowrap;display:table-cell}:host([role=columnheader]){border-bottom-color:var(--vvd-color-canvas-text)}:host(:focus-visible){outline:none}.base{box-sizing:border-box;block-size:100%;color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));padding:0;flex-direction:column;justify-content:center;padding-block:4px;padding-inline:12px;display:flex;overflow:hidden}:host(:focus-visible) .base{--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))}slot{text-overflow:ellipsis;inline-size:100%;white-space:var(--table-cell-white-space,var(--_table-cell-default-white-space));flex:none;display:block;overflow:hidden}", b = ":host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;display:table-cell}:host:not([cell-type=columnheader]){--_table-cell-default-block-size:100%;--_table-cell-default-white-space:normal}:host[selected]{background-color:var(--_appearance-color-fill)}:host(:focus-visible){outline:none}.base{box-sizing:border-box;block-size:100%;color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));flex-direction:column;justify-content:center;padding-block:4px;padding-inline:12px;display:flex;overflow:hidden}:host(:focus-visible) .base{--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))}slot{flex:none;inline-size:100%;display:block}", x = class extends i {}, S = () => r`
 		<template role="table">
 			<div part="inner-container" class="table-inner-container">
 				<div part="content" class="table-content">
@@ -14,23 +15,23 @@ var f = ":host{border-collapse:collapse;border-spacing:0;inline-size:100%}.table
 				</div>
 			</div>
 		</template>
-	`, x = "table-head", S = class extends r {}, C = () => n`
+	`, C = "table-head", w = class extends i {}, T = () => r`
 		<template>
 			<slot></slot>
 		</template>
-	`, w = class extends r {}, T = () => n`
+	`, E = class extends i {}, D = () => r`
 		<template>
 			<slot></slot>
 		</template>
-	`, E = class extends l(r) {}, D = () => n`
+	`, O = class extends u(i) {}, k = () => r`
 		<template
-			${c({ role: "row" })}
+			${l({ role: "row" })}
 		>
 			<div class="base connotation-accent appearance-listitem with-idle">
 				<slot></slot>
 			</div>
 		</template>
-	`, O = class extends l(r) {
+	`, A = class extends u(i) {
 	connectedCallback() {
 		super.connectedCallback(), this.addEventListener("sort", this.#e);
 	}
@@ -41,28 +42,28 @@ var f = ":host{border-collapse:collapse;border-spacing:0;inline-size:100%}.table
 	disconnectedCallback() {
 		super.disconnectedCallback(), this.removeEventListener("sort", this.#e);
 	}
-}, k = (e) => {
-	let t = e.tagForNonDependency(x);
-	return n`
+}, j = (e) => {
+	let t = e.tagForNonDependency(C);
+	return r`
 		<template
 			class="connotation-accent appearance-listitem with-idle"
-			${c({ role: (e) => e.closest(t) === null ? d.rowheader : d.columnheader })}
+			${l({ role: (e) => e.closest(t) === null ? p.rowheader : p.columnheader })}
 		>
 			<div class="base">
 				<slot></slot>
 			</div>
 		</template>
 	`;
-}, A = class extends l(r) {}, j = () => n`
+}, M = class extends u(i) {}, N = () => r`
 		<template
 			class="connotation-accent appearance-listitem with-idle"
-			${c({ role: () => "cell" })}
+			${l({ role: () => "cell" })}
 		>
 			<div class="base">
 				<slot></slot>
 			</div>
 		</template>
-	`, M = class extends u(r) {
+	`, P = class extends e(f(i)) {
 	get #e() {
 		return !this.direction || this.direction === "none" ? "asc" : this.direction === "asc" ? "desc" : "none";
 	}
@@ -74,36 +75,45 @@ var f = ":host{border-collapse:collapse;border-spacing:0;inline-size:100%}.table
 		})));
 	}
 };
-a([t], M.prototype, "direction", void 0);
+o([n], P.prototype, "direction", void 0);
 //#endregion
 //#region src/lib/table/table-sorting-button.template.ts
-var N = (e) => {
-	let t = e.tagFor(s);
-	return n`
-		<template
-			@click="${(e) => e.toggleSort()}"
-			${c({ role: "button" })}
-		>
-			<button>
+var F = (e) => {
+	switch (e.direction) {
+		case "asc": return "ascending";
+		case "desc": return "descending";
+		default: return "none";
+	}
+}, I = (e) => {
+	let t = F(e), { sortStatus: n, sortInstruction: r } = e.locale.tableSortingButton;
+	return `${n[t]} ${r[t]}`;
+}, L = (e) => {
+	let t = e.tagFor(c);
+	return r`
+		<template @click="${(e) => e.toggleSort()}">
+			<button
+				type="button"
+				${d({ ariaLabel: (e) => e.ariaLabel || I(e) })}
+			>
 				${(e) => {
 		switch (e.direction) {
-			case "asc": return n`<${t} name="sort-asc-line"></${t}>`;
-			case "desc": return n`<${t} name="sort-desc-line"></${t}>`;
-			default: return n`<${t} name="sort-line"></${t}>`;
+			case "asc": return r`<${t} name="sort-asc-line"></${t}>`;
+			case "desc": return r`<${t} name="sort-desc-line"></${t}>`;
+			default: return r`<${t} name="sort-line"></${t}>`;
 		}
 	}}
 			</button>
 		</template>
 	`;
-}, P = i("table-cell", A, j, [], { styles: v }), F = i("table-header-cell", O, k, [], { styles: _ }), I = i("table-row", E, D, [], { styles: g }), L = i("table-body", w, T, [], { styles: h }), R = i("table-head", S, C, [], { styles: m }), z = i("table-sorting-button", M, N, [o], { styles: p }), B = i("table", y, b, [
-	P,
-	F,
-	I,
+}, R = a("table-cell", M, N, [], { styles: b }), z = a("table-header-cell", A, j, [], { styles: y }), B = a("table-row", O, k, [], { styles: v }), V = a("table-body", E, D, [], { styles: _ }), H = a("table-head", w, T, [], { styles: g }), U = a("table-sorting-button", P, L, [s], { styles: h }), W = a("table", x, S, [
 	R,
-	L,
-	z
-], { styles: f });
+	z,
+	B,
+	H,
+	V,
+	U
+], { styles: m });
 //#endregion
 //#region src/lib/table/index.ts
-e(B)();
+t(W)();
 //#endregion

package/unbundled/decorate.cjs

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.143.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.147.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/unbundled/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.143.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.147.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/unbundled/definition.cjs

@@ -3,7 +3,7 @@ const require_icon = require("./icon.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/icon/icon.scss?inline
-var icon_default = ":host{vertical-align:sub;display:inline-block}.control.size--6{--_icon-block-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))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}";
+var icon_default = ":host{vertical-align:sub;display:inline-block}.control.size--7{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--6{--_icon-block-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))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--7,.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}";
 //#endregion
 //#region src/lib/icon/icon.template.ts
 var iconTemplate = () => {

package/unbundled/definition.js

@@ -3,7 +3,7 @@ import { t as Icon } from "./icon.js";
 import { html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/icon/icon.scss?inline
-var icon_default = ":host{vertical-align:sub;display:inline-block}.control.size--6{--_icon-block-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))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}";
+var icon_default = ":host{vertical-align:sub;display:inline-block}.control.size--7{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--6{--_icon-block-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))}.control.size--5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_icon-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--7,.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size:1em}.control{margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size);display:flex}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){block-size:inherit;inline-size:inherit;margin:auto}";
 //#endregion
 //#region src/lib/icon/icon.template.ts
 var iconTemplate = () => {

package/unbundled/definition14.cjs

@@ -21,7 +21,7 @@ var avatarAppearance = require_component_enum.componentEnum([
 /**
 * @public
 * @component avatar
-* @slot graphic - Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
+* @slot graphic - Assign nodes to the graphic slot to set a graphic media of any kind (e.g., image, illustration, etc.).
 * @slot icon - The preferred way to add an icon to the component.
 */
 var Avatar = class extends require_linkable.Linkable(require_vivid_element.VividElement) {

package/unbundled/definition14.js

@@ -21,7 +21,7 @@ var avatarAppearance = componentEnum([
 /**
 * @public
 * @component avatar
-* @slot graphic - Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
+* @slot graphic - Assign nodes to the graphic slot to set a graphic media of any kind (e.g., image, illustration, etc.).
 * @slot icon - The preferred way to add an icon to the component.
 */
 var Avatar = class extends Linkable(VividElement) {

package/unbundled/definition15.cjs

@@ -38,18 +38,23 @@ require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "si
 require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "appearance", void 0);
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Badge.prototype, "count", void 0);
 require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "text", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "text-secondary" })], Badge.prototype, "textSecondary", void 0);
 //#endregion
 //#region src/lib/badge/badge.scss?inline
-var badge_default = ":host{display:inline-flex}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed-bold);vertical-align:middle;justify-content:center;align-items:center;column-gap:8px;display:inline-flex}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;place-content:center;padding-inline:0}@supports (aspect-ratio:1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:not(.dot){block-size:var(--_badge-block-size);inline-size:100%;min-inline-size:var(--_badge-block-size);padding-inline:var(--_badge-padding-inline)}.base.dot{block-size:calc(var(--_badge-block-size) / 2);contain:size;inline-size:calc(var(--_badge-block-size) / 2);border-radius:50%}.base:not(.size-expanded){--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base:not(.size-expanded):not(.count){--_badge-padding-inline:8px}.base:not(.size-expanded).count{--_badge-padding-inline:6px}.base.size-expanded{--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_badge-padding-inline:8px}.text{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_badge-block-size) / 1.6667);flex-shrink:0;line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}";
+var badge_default = ":host{display:inline-flex}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed-bold);vertical-align:middle;justify-content:center;align-items:center;column-gap:8px;display:inline-flex}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;place-content:center;padding-inline:0}@supports (aspect-ratio:1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:not(.dot){block-size:var(--_badge-block-size);inline-size:100%;min-inline-size:var(--_badge-block-size);padding-inline:var(--_badge-padding-inline)}.base.dot{block-size:calc(var(--_badge-block-size) / 2);contain:size;inline-size:calc(var(--_badge-block-size) / 2);border-radius:50%}.base:not(.size-expanded){--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base:not(.size-expanded):not(.count){--_badge-padding-inline:8px}.base:not(.size-expanded).count{--_badge-padding-inline:6px}.base.size-expanded{--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_badge-padding-inline:8px}.content{column-gap:4px;max-inline-size:100%;display:flex;overflow:hidden}.text,.text-secondary{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}.text-secondary{font:var(--vvd-typography-base-condensed)}slot[name=icon]{font-size:calc(var(--_badge-block-size) / 1.6667);flex-shrink:0;line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}";
 //#endregion
 //#region src/lib/badge/badge.template.ts
 var badgeTemplate = (context) => {
 	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
 	return _microsoft_fast_element.html`<span
-		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${badgeConnotation.parse(x.connotation)}`, `appearance-${badgeAppearance.parse(x.appearance)}`, "with-idle", [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.size}`, Boolean(x.size)], ["icon-trailing", x.iconTrailing], ["icon-only", !x.text && (Boolean(x.icon) || Boolean(x.iconSlottedContent?.length))], ["count", x.count], ["dot", !x.text && !x.icon && !x.iconSlottedContent?.length])}"
+		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("base", `connotation-${badgeConnotation.parse(x.connotation)}`, `appearance-${badgeAppearance.parse(x.appearance)}`, "with-idle", [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.size}`, Boolean(x.size)], ["icon-trailing", x.iconTrailing], ["icon-only", !x.text && !x.textSecondary && (Boolean(x.icon) || Boolean(x.iconSlottedContent?.length))], ["count", x.count], ["dot", !x.text && !x.textSecondary && !x.icon && !x.iconSlottedContent?.length])}"
 	>
 		${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
-		${(0, _microsoft_fast_element.when)((x) => x.text, (x) => _microsoft_fast_element.html`<span class="text">${x.text}</span>`)}
+		${(0, _microsoft_fast_element.when)((x) => x.text || x.textSecondary, _microsoft_fast_element.html`<span class="content"
+				>${(0, _microsoft_fast_element.when)((x) => x.text, _microsoft_fast_element.html`<span class="text">${(x) => x.text}</span>`)}${(x) => x.text && x.textSecondary ? " " : ""}${(0, _microsoft_fast_element.when)((x) => x.textSecondary, _microsoft_fast_element.html`<span class="text-secondary"
+						>${(x) => x.textSecondary}</span
+					>`)}</span
+			>`)}
 	</span>`;
 };
 //#endregion

package/unbundled/definition15.js

@@ -38,18 +38,23 @@ __decorate([attr], Badge.prototype, "size", void 0);
 __decorate([attr], Badge.prototype, "appearance", void 0);
 __decorate([attr({ mode: "boolean" })], Badge.prototype, "count", void 0);
 __decorate([attr], Badge.prototype, "text", void 0);
+__decorate([attr({ attribute: "text-secondary" })], Badge.prototype, "textSecondary", void 0);
 //#endregion
 //#region src/lib/badge/badge.scss?inline
-var badge_default = ":host{display:inline-flex}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed-bold);vertical-align:middle;justify-content:center;align-items:center;column-gap:8px;display:inline-flex}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;place-content:center;padding-inline:0}@supports (aspect-ratio:1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:not(.dot){block-size:var(--_badge-block-size);inline-size:100%;min-inline-size:var(--_badge-block-size);padding-inline:var(--_badge-padding-inline)}.base.dot{block-size:calc(var(--_badge-block-size) / 2);contain:size;inline-size:calc(var(--_badge-block-size) / 2);border-radius:50%}.base:not(.size-expanded){--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base:not(.size-expanded):not(.count){--_badge-padding-inline:8px}.base:not(.size-expanded).count{--_badge-padding-inline:6px}.base.size-expanded{--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_badge-padding-inline:8px}.text{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_badge-block-size) / 1.6667);flex-shrink:0;line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}";
+var badge_default = ":host{display:inline-flex}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed-bold);vertical-align:middle;justify-content:center;align-items:center;column-gap:8px;display:inline-flex}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;place-content:center;padding-inline:0}@supports (aspect-ratio:1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:not(.dot){block-size:var(--_badge-block-size);inline-size:100%;min-inline-size:var(--_badge-block-size);padding-inline:var(--_badge-padding-inline)}.base.dot{block-size:calc(var(--_badge-block-size) / 2);contain:size;inline-size:calc(var(--_badge-block-size) / 2);border-radius:50%}.base:not(.size-expanded){--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base:not(.size-expanded):not(.count){--_badge-padding-inline:8px}.base:not(.size-expanded).count{--_badge-padding-inline:6px}.base.size-expanded{--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));--_badge-padding-inline:8px}.content{column-gap:4px;max-inline-size:100%;display:flex;overflow:hidden}.text,.text-secondary{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}.text-secondary{font:var(--vvd-typography-base-condensed)}slot[name=icon]{font-size:calc(var(--_badge-block-size) / 1.6667);flex-shrink:0;line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}";
 //#endregion
 //#region src/lib/badge/badge.template.ts
 var badgeTemplate = (context) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 	return html`<span
-		class="${(x) => classNames("base", `connotation-${badgeConnotation.parse(x.connotation)}`, `appearance-${badgeAppearance.parse(x.appearance)}`, "with-idle", [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.size}`, Boolean(x.size)], ["icon-trailing", x.iconTrailing], ["icon-only", !x.text && (Boolean(x.icon) || Boolean(x.iconSlottedContent?.length))], ["count", x.count], ["dot", !x.text && !x.icon && !x.iconSlottedContent?.length])}"
+		class="${(x) => classNames("base", `connotation-${badgeConnotation.parse(x.connotation)}`, `appearance-${badgeAppearance.parse(x.appearance)}`, "with-idle", [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.size}`, Boolean(x.size)], ["icon-trailing", x.iconTrailing], ["icon-only", !x.text && !x.textSecondary && (Boolean(x.icon) || Boolean(x.iconSlottedContent?.length))], ["count", x.count], ["dot", !x.text && !x.textSecondary && !x.icon && !x.iconSlottedContent?.length])}"
 	>
 		${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-		${when((x) => x.text, (x) => html`<span class="text">${x.text}</span>`)}
+		${when((x) => x.text || x.textSecondary, html`<span class="content"
+				>${when((x) => x.text, html`<span class="text">${(x) => x.text}</span>`)}${(x) => x.text && x.textSecondary ? " " : ""}${when((x) => x.textSecondary, html`<span class="text-secondary"
+						>${(x) => x.textSecondary}</span
+					>`)}</span
+			>`)}
 	</span>`;
 };
 //#endregion

package/unbundled/definition2.cjs

@@ -21,7 +21,7 @@ var accordionItemAppearance = require_component_enum.componentEnum([
 * @slot icon - The preferred way to add an icon to the component.
 * @slot meta - Used to add additional content to the heading.
 * @slot heading - Used to add content to the heading.
-* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the button is invoked
+* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the Accordion Item is toggled by the user.
 * @testSelector byHeading byHeading
 * @testAction expand toggleAccordionItem true
 * @testAction collapse toggleAccordionItem false

package/unbundled/definition2.js

@@ -21,7 +21,7 @@ var accordionItemAppearance = componentEnum([
 * @slot icon - The preferred way to add an icon to the component.
 * @slot meta - Used to add additional content to the heading.
 * @slot heading - Used to add content to the heading.
-* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the button is invoked
+* @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the Accordion Item is toggled by the user.
 * @testSelector byHeading byHeading
 * @testAction expand toggleAccordionItem true
 * @testAction collapse toggleAccordionItem false

package/unbundled/definition24.cjs

@@ -7,7 +7,7 @@ const require_anchored = require("./anchored.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/toggletip/toggletip.scss?inline
-var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:4px 0 0}.text-secondary:first-child{margin-block-start:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}";
+var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:8px 12px}.content{font:var(--vvd-typography-base-bold)}.has-headline .content{font:var(--vvd-typography-base)}.headline{font:var(--vvd-typography-base-bold);margin:0 0 2px}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:0}.text-secondary:first-child{margin-block-start:0}.action-items{justify-content:flex-end;gap:8px;display:flex}::slotted([slot=action-items]){margin-block-start:12px}";
 //#endregion
 //#region src/lib/toggletip/toggletip.ts
 /**
@@ -98,7 +98,7 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "fromView
 require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Toggletip.prototype, "open", void 0);
 //#endregion
 //#region src/lib/toggletip/toggletip.template.ts
-var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control");
+var getClasses = (x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["has-headline", x.headline !== void 0]);
 var ToggletipTemplate = (context) => {
 	const popup = context.tagFor(require_definition.Popup);
 	const anchorSlotTemplate = require_anchored.anchorSlotTemplateFactory();
@@ -109,7 +109,7 @@ var ToggletipTemplate = (context) => {
 		if (x.open && require_dialog.handleEscapeKeyAndStopPropogation(event)) return false;
 		return true;
 	}}"
-			class="${getClasses}"
+			class="${(x) => getClasses(x)}"
 			arrow
 			:anchor="${(x) => x._anchorEl}"
 			:open="${(x) => x.open}"
@@ -120,7 +120,7 @@ var ToggletipTemplate = (context) => {
 			<div class="content-wrapper">
 				${(0, _microsoft_fast_element.when)((x) => x.headline, _microsoft_fast_element.html`<h2 class="headline">${(x) => x.headline}</h2>`)}
 				${(0, _microsoft_fast_element.when)((x) => x.textSecondary, _microsoft_fast_element.html`<p class="text-secondary">${(x) => x.textSecondary}</p>`)}
-				<slot></slot>
+				<span class="content"><slot></slot></span>
 				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>
 		</${popup}>

package/unbundled/definition24.js

@@ -7,7 +7,7 @@ import { i as setAnchorExpanded, n as anchorSlotTemplateFactory, r as clearAncho
 import { Updates, attr, html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
 //#region src/lib/toggletip/toggletip.scss?inline
-var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:4px 0 0}.text-secondary:first-child{margin-block-start:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}";
+var toggletip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:8px 12px}.content{font:var(--vvd-typography-base-bold)}.has-headline .content{font:var(--vvd-typography-base)}.headline{font:var(--vvd-typography-base-bold);margin:0 0 2px}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:0}.text-secondary:first-child{margin-block-start:0}.action-items{justify-content:flex-end;gap:8px;display:flex}::slotted([slot=action-items]){margin-block-start:12px}";
 //#endregion
 //#region src/lib/toggletip/toggletip.ts
 /**
@@ -98,7 +98,7 @@ __decorate([attr({ mode: "fromView" })], Toggletip.prototype, "placement", void
 __decorate([attr({ mode: "boolean" })], Toggletip.prototype, "open", void 0);
 //#endregion
 //#region src/lib/toggletip/toggletip.template.ts
-var getClasses = (_) => classNames("control");
+var getClasses = (x) => classNames("control", ["has-headline", x.headline !== void 0]);
 var ToggletipTemplate = (context) => {
 	const popup = context.tagFor(Popup);
 	const anchorSlotTemplate = anchorSlotTemplateFactory();
@@ -109,7 +109,7 @@ var ToggletipTemplate = (context) => {
 		if (x.open && handleEscapeKeyAndStopPropogation(event)) return false;
 		return true;
 	}}"
-			class="${getClasses}"
+			class="${(x) => getClasses(x)}"
 			arrow
 			:anchor="${(x) => x._anchorEl}"
 			:open="${(x) => x.open}"
@@ -120,7 +120,7 @@ var ToggletipTemplate = (context) => {
 			<div class="content-wrapper">
 				${when((x) => x.headline, html`<h2 class="headline">${(x) => x.headline}</h2>`)}
 				${when((x) => x.textSecondary, html`<p class="text-secondary">${(x) => x.textSecondary}</p>`)}
-				<slot></slot>
+				<span class="content"><slot></slot></span>
 				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>
 		</${popup}>

package/unbundled/definition25.cjs

@@ -26,7 +26,11 @@ var ContextualHelpTemplate = (context) => {
 	const toggletipTag = context.tagFor(require_definition$1.Toggletip);
 	const iconTag = context.tagFor(require_icon.Icon);
 	return _microsoft_fast_element.html`
-		<${toggletipTag} class="base" exportparts="vvd-theme-alternate">
+		<${toggletipTag}
+			class="base"
+			exportparts="vvd-theme-alternate"
+			placement="${(x) => x.placement}"
+		>
 			<button class="${getClasses}" slot="anchor">
         <slot name="icon" slot="icon">
           <${iconTag} name="help-solid"></${iconTag}>

package/unbundled/definition25.js

@@ -26,7 +26,11 @@ var ContextualHelpTemplate = (context) => {
 	const toggletipTag = context.tagFor(Toggletip);
 	const iconTag = context.tagFor(Icon);
 	return html`
-		<${toggletipTag} class="base" exportparts="vvd-theme-alternate">
+		<${toggletipTag}
+			class="base"
+			exportparts="vvd-theme-alternate"
+			placement="${(x) => x.placement}"
+		>
 			<button class="${getClasses}" slot="anchor">
         <slot name="icon" slot="icon">
           <${iconTag} name="help-solid"></${iconTag}>

package/unbundled/definition27.cjs

@@ -8,7 +8,7 @@ const require_randomId = require("./randomId.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
 //#region src/lib/tooltip/tooltip.scss?inline
-var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:4px;padding:8px 12px;display:flex}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}";
+var tooltip_default = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size,auto);box-sizing:border-box;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size,30ch);flex-direction:column;align-items:flex-start;gap:2px;padding:8px 12px;display:flex}.control:not(.has-text) .text{display:none}.content{display:contents}.has-text .content{font:var(--vvd-typography-base)}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}";
 //#endregion
 //#region src/lib/tooltip/tooltip.ts
 /**
@@ -116,13 +116,14 @@ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean"
 require_decorate.__decorate([_microsoft_fast_element.observable], Tooltip.prototype, "_defaultSlotContent", void 0);
 //#endregion
 //#region src/lib/tooltip/tooltip.template.ts
+var getClasses = (x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["has-text", x.text !== void 0], ["open", x.open]);
 var TooltipTemplate = (context) => {
 	const popupTag = context.tagFor(require_definition.Popup);
 	const anchorSlotTemplate = require_anchored.anchorSlotTemplateFactory();
 	return _microsoft_fast_element.html`
 ${anchorSlotTemplate}
 ${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<span slot="_description" id="${(x) => x._descriptionId}">${(x) => x.text}</span><span slot="_description-secondary" id="${(x) => x._descriptionSecondaryId}">${(x) => x.textSecondary}</span>`)}
-<${popupTag} class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("control", ["open", x.open])}" arrow alternate
+<${popupTag} class="${(x) => getClasses(x)}" arrow alternate
 	:placement=${(x) => x.placement}
 	:anchor="${(x) => x._anchorEl}"
 	:open="${(x) => x.open}"
@@ -135,12 +136,14 @@ ${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<span slot="_de
 		${(0, _microsoft_fast_element.when)((x) => x.textSecondary, _microsoft_fast_element.html`<span class="text-secondary"
 				><slot name="_description-secondary"></slot
 			></span>`)}
-		<slot
-			${(0, _microsoft_fast_element.slotted)({
+		<span class="content"
+			><slot
+				${(0, _microsoft_fast_element.slotted)({
 		property: "_defaultSlotContent",
 		filter: (0, _microsoft_fast_element.elements)()
 	})}
-		></slot>
+			></slot
+		></span>
 		<slot name="kbd-shortcut"
 			${(0, _microsoft_fast_element.slotted)({
 		property: "_kbdShortcutSlotted",