@vonage/vivid 5.15.0 → 5.16.0

package/unbundled/definition33.cjs

@@ -0,0 +1,261 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+const require_data_grid_options = require("./data-grid.options.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+//#region src/lib/table/table.scss?inline
+var table_default = ":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}";
+//#endregion
+//#region src/lib/table/table-head.scss?inline
+var table_head_default = ":host{display:table-header-group}";
+//#endregion
+//#region src/lib/table/table-body.scss?inline
+var table_body_default = ":host{display:table-row-group}";
+//#endregion
+//#region src/lib/table/table-row.scss?inline
+var table_row_default = ":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.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-row-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-row-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-row-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-row-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-data-grid-row-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-data-grid-row-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-data-grid-row-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-row-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-row-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-row-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-row-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-row-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-data-grid-row-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-data-grid-row-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-data-grid-row-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-row-accent-dim,var(--vvd-color-neutral-200))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:contents}";
+//#endregion
+//#region src/lib/table/table-header-cell.scss?inline
+var table_header_cell_default = ":host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;display:table-cell}:host.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-cell-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-cell-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-cell-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-data-grid-cell-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-data-grid-cell-cta-faint,var(--vvd-color-cta-50));--_connotation-color-pale:var(--vvd-data-grid-cell-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-cell-cta-dim,var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-cell-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-cell-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-cell-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-data-grid-cell-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-data-grid-cell-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-pale:var(--vvd-data-grid-cell-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-cell-accent-dim,var(--vvd-color-neutral-200))}:host{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}:host{--_table-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_table-cell-default-white-space:nowrap}: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}";
+//#endregion
+//#region src/lib/table/table-cell.scss?inline
+var table_cell_default = ":host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;display:table-cell}:host.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-cell-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-cell-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-cell-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-data-grid-cell-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-data-grid-cell-cta-faint,var(--vvd-color-cta-50));--_connotation-color-pale:var(--vvd-data-grid-cell-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-cell-cta-dim,var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-cell-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-cell-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-cell-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-data-grid-cell-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-data-grid-cell-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-pale:var(--vvd-data-grid-cell-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-cell-accent-dim,var(--vvd-color-neutral-200))}:host{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}: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}";
+//#endregion
+//#region src/lib/table/table.ts
+/**
+* @public
+* @component table
+* @slot - Default slot.
+*/
+var Table = class extends require_vivid_element.VividElement {};
+//#endregion
+//#region src/lib/table/table.template.ts
+var TableTemplate = (context) => {
+	return _microsoft_fast_element.html`
+		<template role="table">
+			<div part="inner-container" class="table-inner-container">
+				<div part="content" class="table-content">
+					<slot></slot>
+				</div>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-head.ts
+var tableHeadName = "table-head";
+/**
+* @public
+* @component table-head
+* @slot - Default slot.
+*/
+var TableHead = class extends require_vivid_element.VividElement {};
+//#endregion
+//#region src/lib/table/table-head.template.ts
+var TableHeadTemplate = (context) => {
+	return _microsoft_fast_element.html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-body.ts
+/**
+* @public
+* @component table-body
+* @slot - Default slot.
+*/
+var TableBody = class extends require_vivid_element.VividElement {};
+//#endregion
+//#region src/lib/table/table-body.template.ts
+var TableBodyTemplate = (context) => {
+	return _microsoft_fast_element.html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-row.ts
+/**
+* @public
+* @component table-row
+* @slot - Default slot.
+*/
+var TableRow = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {};
+//#endregion
+//#region src/lib/table/table-row.template.ts
+var TableRowTemplate = (context) => {
+	return _microsoft_fast_element.html`
+		<template
+			${require_host_semantics.applyHostSemantics({ role: "row" })}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-header-cell.ts
+/**
+* @public
+* @component table-header-cell
+* @slot - Default slot.
+* @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
+*/
+var TableHeaderCell = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {};
+//#endregion
+//#region src/lib/table/table-header-cell.template.ts
+var TableHeaderCellTemplate = (context) => {
+	const tableHeadTag = context.tagForNonDependency(tableHeadName);
+	return _microsoft_fast_element.html`
+		<template
+			${require_host_semantics.applyHostSemantics({ role: (x) => x.closest(tableHeadTag) !== null ? require_data_grid_options.DataGridCellRole.columnheader : require_data_grid_options.DataGridCellRole.rowheader })}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-cell.ts
+/**
+* @public
+* @component table-cell
+* @slot - Default slot.
+* @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
+*/
+var TableCell = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {};
+//#endregion
+//#region src/lib/table/table-cell.template.ts
+var TableCellTemplate = (context) => {
+	return _microsoft_fast_element.html`
+		<template
+			${require_host_semantics.applyHostSemantics({ role: () => "cell" })}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/definition.ts
+/**
+* @internal
+*/
+var tableCellDefinition = require_vivid_element.defineVividComponent("table-cell", TableCell, TableCellTemplate, [], { styles: table_cell_default });
+/**
+* @internal
+*/
+var tableHeaderCellDefinition = require_vivid_element.defineVividComponent("table-header-cell", TableHeaderCell, TableHeaderCellTemplate, [], { styles: table_header_cell_default });
+/**
+* @internal
+*/
+var tableRowDefinition = require_vivid_element.defineVividComponent("table-row", TableRow, TableRowTemplate, [], { styles: table_row_default });
+/**
+* @internal
+*/
+var tableBodyDefinition = require_vivid_element.defineVividComponent("table-body", TableBody, TableBodyTemplate, [], { styles: table_body_default });
+/**
+* @internal
+*/
+var tableHeadDefinition = require_vivid_element.defineVividComponent("table-head", TableHead, TableHeadTemplate, [], { styles: table_head_default });
+/**
+* @internal
+*/
+var tableDefinition = require_vivid_element.defineVividComponent("table", Table, TableTemplate, [
+	tableCellDefinition,
+	tableHeaderCellDefinition,
+	tableRowDefinition,
+	tableHeadDefinition,
+	tableBodyDefinition
+], { styles: table_default });
+/**
+* Registers the table element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerTable = require_vivid_element.createRegisterFunction(tableDefinition);
+//#endregion
+Object.defineProperty(exports, "Table", {
+	enumerable: true,
+	get: function() {
+		return Table;
+	}
+});
+Object.defineProperty(exports, "TableBody", {
+	enumerable: true,
+	get: function() {
+		return TableBody;
+	}
+});
+Object.defineProperty(exports, "TableCell", {
+	enumerable: true,
+	get: function() {
+		return TableCell;
+	}
+});
+Object.defineProperty(exports, "TableHead", {
+	enumerable: true,
+	get: function() {
+		return TableHead;
+	}
+});
+Object.defineProperty(exports, "TableHeaderCell", {
+	enumerable: true,
+	get: function() {
+		return TableHeaderCell;
+	}
+});
+Object.defineProperty(exports, "TableRow", {
+	enumerable: true,
+	get: function() {
+		return TableRow;
+	}
+});
+Object.defineProperty(exports, "registerTable", {
+	enumerable: true,
+	get: function() {
+		return registerTable;
+	}
+});
+Object.defineProperty(exports, "tableBodyDefinition", {
+	enumerable: true,
+	get: function() {
+		return tableBodyDefinition;
+	}
+});
+Object.defineProperty(exports, "tableCellDefinition", {
+	enumerable: true,
+	get: function() {
+		return tableCellDefinition;
+	}
+});
+Object.defineProperty(exports, "tableDefinition", {
+	enumerable: true,
+	get: function() {
+		return tableDefinition;
+	}
+});
+Object.defineProperty(exports, "tableHeadDefinition", {
+	enumerable: true,
+	get: function() {
+		return tableHeadDefinition;
+	}
+});
+Object.defineProperty(exports, "tableHeaderCellDefinition", {
+	enumerable: true,
+	get: function() {
+		return tableHeaderCellDefinition;
+	}
+});
+Object.defineProperty(exports, "tableRowDefinition", {
+	enumerable: true,
+	get: function() {
+		return tableRowDefinition;
+	}
+});

package/unbundled/definition33.js

@@ -0,0 +1,183 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
+import { t as DataGridCellRole } from "./data-grid.options.js";
+import { html } from "@microsoft/fast-element";
+//#region src/lib/table/table.scss?inline
+var table_default = ":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}";
+//#endregion
+//#region src/lib/table/table-head.scss?inline
+var table_head_default = ":host{display:table-header-group}";
+//#endregion
+//#region src/lib/table/table-body.scss?inline
+var table_body_default = ":host{display:table-row-group}";
+//#endregion
+//#region src/lib/table/table-row.scss?inline
+var table_row_default = ":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.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-row-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-row-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-row-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-row-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-data-grid-row-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-data-grid-row-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-data-grid-row-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-row-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-row-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-row-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-row-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-row-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-data-grid-row-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-data-grid-row-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-data-grid-row-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-row-accent-dim,var(--vvd-color-neutral-200))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base{box-sizing:border-box;width:100%;color:var(--vvd-color-canvas-text);display:contents}";
+//#endregion
+//#region src/lib/table/table-header-cell.scss?inline
+var table_header_cell_default = ":host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;display:table-cell}:host.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-cell-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-cell-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-cell-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-data-grid-cell-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-data-grid-cell-cta-faint,var(--vvd-color-cta-50));--_connotation-color-pale:var(--vvd-data-grid-cell-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-cell-cta-dim,var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-cell-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-cell-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-cell-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-data-grid-cell-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-data-grid-cell-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-pale:var(--vvd-data-grid-cell-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-cell-accent-dim,var(--vvd-color-neutral-200))}:host{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}:host{--_table-cell-default-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8));--_table-cell-default-white-space:nowrap}: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}";
+//#endregion
+//#region src/lib/table/table-cell.scss?inline
+var table_cell_default = ":host{border-bottom:1px solid var(--vvd-color-neutral-300);vertical-align:middle;display:table-cell}:host.connotation-cta{--_connotation-color-primary:var(--vvd-data-grid-cell-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-data-grid-cell-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-data-grid-cell-cta-firm,var(--vvd-color-cta-600));--_connotation-color-soft:var(--vvd-data-grid-cell-cta-soft,var(--vvd-color-cta-100));--_connotation-color-faint:var(--vvd-data-grid-cell-cta-faint,var(--vvd-color-cta-50));--_connotation-color-pale:var(--vvd-data-grid-cell-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-data-grid-cell-cta-dim,var(--vvd-color-cta-200))}:host:not(.connotation-cta){--_connotation-color-primary:var(--vvd-data-grid-cell-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-data-grid-cell-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-data-grid-cell-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-data-grid-cell-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-data-grid-cell-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-data-grid-cell-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-pale:var(--vvd-data-grid-cell-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-data-grid-cell-accent-dim,var(--vvd-color-neutral-200))}:host{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){:host:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}:host.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}:host.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){:host.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}:host.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}: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}";
+//#endregion
+//#region src/lib/table/table.ts
+/**
+* @public
+* @component table
+* @slot - Default slot.
+*/
+var Table = class extends VividElement {};
+//#endregion
+//#region src/lib/table/table.template.ts
+var TableTemplate = (context) => {
+	return html`
+		<template role="table">
+			<div part="inner-container" class="table-inner-container">
+				<div part="content" class="table-content">
+					<slot></slot>
+				</div>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-head.ts
+var tableHeadName = "table-head";
+/**
+* @public
+* @component table-head
+* @slot - Default slot.
+*/
+var TableHead = class extends VividElement {};
+//#endregion
+//#region src/lib/table/table-head.template.ts
+var TableHeadTemplate = (context) => {
+	return html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-body.ts
+/**
+* @public
+* @component table-body
+* @slot - Default slot.
+*/
+var TableBody = class extends VividElement {};
+//#endregion
+//#region src/lib/table/table-body.template.ts
+var TableBodyTemplate = (context) => {
+	return html`
+		<template>
+			<slot></slot>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-row.ts
+/**
+* @public
+* @component table-row
+* @slot - Default slot.
+*/
+var TableRow = class extends HostSemantics(VividElement) {};
+//#endregion
+//#region src/lib/table/table-row.template.ts
+var TableRowTemplate = (context) => {
+	return html`
+		<template
+			${applyHostSemantics({ role: "row" })}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-header-cell.ts
+/**
+* @public
+* @component table-header-cell
+* @slot - Default slot.
+* @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
+*/
+var TableHeaderCell = class extends HostSemantics(VividElement) {};
+//#endregion
+//#region src/lib/table/table-header-cell.template.ts
+var TableHeaderCellTemplate = (context) => {
+	const tableHeadTag = context.tagForNonDependency(tableHeadName);
+	return html`
+		<template
+			${applyHostSemantics({ role: (x) => x.closest(tableHeadTag) !== null ? DataGridCellRole.columnheader : DataGridCellRole.rowheader })}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/table-cell.ts
+/**
+* @public
+* @component table-cell
+* @slot - Default slot.
+* @event {CustomEvent<HTMLElement>} cell-focused - Fires when the cell or its contents receive focus
+*/
+var TableCell = class extends HostSemantics(VividElement) {};
+//#endregion
+//#region src/lib/table/table-cell.template.ts
+var TableCellTemplate = (context) => {
+	return html`
+		<template
+			${applyHostSemantics({ role: () => "cell" })}
+		>
+			<div class="base">
+				<slot></slot>
+			</div>
+		</template>
+	`;
+};
+//#endregion
+//#region src/lib/table/definition.ts
+/**
+* @internal
+*/
+var tableCellDefinition = defineVividComponent("table-cell", TableCell, TableCellTemplate, [], { styles: table_cell_default });
+/**
+* @internal
+*/
+var tableHeaderCellDefinition = defineVividComponent("table-header-cell", TableHeaderCell, TableHeaderCellTemplate, [], { styles: table_header_cell_default });
+/**
+* @internal
+*/
+var tableRowDefinition = defineVividComponent("table-row", TableRow, TableRowTemplate, [], { styles: table_row_default });
+/**
+* @internal
+*/
+var tableBodyDefinition = defineVividComponent("table-body", TableBody, TableBodyTemplate, [], { styles: table_body_default });
+/**
+* @internal
+*/
+var tableHeadDefinition = defineVividComponent("table-head", TableHead, TableHeadTemplate, [], { styles: table_head_default });
+/**
+* @internal
+*/
+var tableDefinition = defineVividComponent("table", Table, TableTemplate, [
+	tableCellDefinition,
+	tableHeaderCellDefinition,
+	tableRowDefinition,
+	tableHeadDefinition,
+	tableBodyDefinition
+], { styles: table_default });
+/**
+* Registers the table element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerTable = createRegisterFunction(tableDefinition);
+//#endregion
+export { tableHeadDefinition as a, TableCell as c, TableBody as d, TableHead as f, tableDefinition as i, TableHeaderCell as l, tableBodyDefinition as n, tableHeaderCellDefinition as o, Table as p, tableCellDefinition as r, tableRowDefinition as s, registerTable as t, TableRow as u };

package/unbundled/definition34.cjs

@@ -0,0 +1,46 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+const require_divider = require("./divider.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/divider/divider.scss?inline
+var divider_default = ":host{display:block}.base{--_connotation-color-soft:var(--vvd-divider-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-divider-accent-dim,var(--vvd-color-neutral-200));display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}";
+//#endregion
+//#region src/lib/divider/divider.template.ts
+var getClasses = ({ orientation, appearance }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`${orientation}`, Boolean(orientation)], [`appearance-${appearance}`, Boolean(appearance)]);
+var getAriaOrientation = ({ role, orientation }) => role === require_divider.DividerRole.presentation ? null : orientation;
+var DividerTemplate = _microsoft_fast_element.html`<template
+	${require_host_semantics.applyHostSemantics({
+	role: (x) => x.role || require_divider.DividerRole.separator,
+	ariaHidden: true,
+	ariaOrientation: getAriaOrientation
+})}
+>
+	<span class="${getClasses}"></span
+></template>`;
+//#endregion
+//#region src/lib/divider/definition.ts
+/**
+* @internal
+*/
+var dividerDefinition = require_vivid_element.defineVividComponent("divider", require_divider.Divider, DividerTemplate, [], { styles: divider_default });
+/**
+* Registers the divider elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerDivider = require_vivid_element.createRegisterFunction(dividerDefinition);
+//#endregion
+Object.defineProperty(exports, "dividerDefinition", {
+	enumerable: true,
+	get: function() {
+		return dividerDefinition;
+	}
+});
+Object.defineProperty(exports, "registerDivider", {
+	enumerable: true,
+	get: function() {
+		return registerDivider;
+	}
+});

package/unbundled/definition34.js

@@ -0,0 +1,33 @@
+import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-element.js";
+import { n as applyHostSemantics } from "./host-semantics.js";
+import { n as DividerRole, t as Divider } from "./divider.js";
+import { html } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/divider/divider.scss?inline
+var divider_default = ":host{display:block}.base{--_connotation-color-soft:var(--vvd-divider-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-dim:var(--vvd-divider-accent-dim,var(--vvd-color-neutral-200));display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}";
+//#endregion
+//#region src/lib/divider/divider.template.ts
+var getClasses = ({ orientation, appearance }) => classNames("base", [`${orientation}`, Boolean(orientation)], [`appearance-${appearance}`, Boolean(appearance)]);
+var getAriaOrientation = ({ role, orientation }) => role === DividerRole.presentation ? null : orientation;
+//#endregion
+//#region src/lib/divider/definition.ts
+/**
+* @internal
+*/
+var dividerDefinition = defineVividComponent("divider", Divider, html`<template
+	${applyHostSemantics({
+	role: (x) => x.role || DividerRole.separator,
+	ariaHidden: true,
+	ariaOrientation: getAriaOrientation
+})}
+>
+	<span class="${getClasses}"></span
+></template>`, [], { styles: divider_default });
+/**
+* Registers the divider elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerDivider = createRegisterFunction(dividerDefinition);
+//#endregion
+export { registerDivider as n, dividerDefinition as t };