@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/definition22.cjs

@@ -0,0 +1,174 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_definition = require("./definition2.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_linkable = require("./linkable.cjs");
+const require_enums = require("./enums.cjs");
+const require_definition$1 = require("./definition8.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/card/card.scss?inline
+var card_default = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
+//#endregion
+//#region src/lib/card/card.ts
+/**
+* @public
+* @component card
+* @slot graphic - The graphic slot overrides the icon property.
+* @slot media - The media slot is mainly for images or video content above the card header.
+* @slot meta - The meta slot is for action content in the card header.
+* @slot footer - The footer slot is for content in the card footer.
+* @slot main - Assign nodes to main slot to fully override a card's predefined flow and style with your own.
+* @testQuery headline headline
+*/
+var Card = class extends require_linkable.Linkable(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.clickableCard = false;
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.attr], Card.prototype, "appearance", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Card.prototype, "headline", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Card.prototype, "subtitle", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Card.prototype, "text", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Card.prototype, "icon", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Card.prototype, "elevation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	mode: "boolean",
+	attribute: "clickable-card"
+})], Card.prototype, "clickableCard", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Card.prototype, "footerSlottedContent", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Card.prototype, "graphicSlottedContent", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Card.prototype, "hasMetaSlottedContent", void 0);
+//#endregion
+//#region src/lib/card/card.template.ts
+var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("base", ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length], ["hide-header", shouldHideHeader(_)]);
+function renderHeaderIcon(iconTag) {
+	return _microsoft_fast_element.html`
+		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
+}
+function Headline() {
+	return _microsoft_fast_element.html`
+		<div class="header-headline" id="card-headline">${(x) => x.headline}</div>
+	`;
+}
+function Subtitle() {
+	return _microsoft_fast_element.html` <div class="header-subtitle">${(x) => x.subtitle}</div> `;
+}
+function headerContent() {
+	return _microsoft_fast_element.html`
+		<div class="header-content">
+			${(0, _microsoft_fast_element.when)((x) => x.headline, Headline())}
+			${(0, _microsoft_fast_element.when)((x) => x.subtitle, Subtitle())}
+		</div>
+	`;
+}
+/**
+header
+*/
+function renderHeader(iconTag) {
+	return _microsoft_fast_element.html` <div class="header">
+		<slot name="graphic" ${(0, _microsoft_fast_element.slotted)("graphicSlottedContent")}
+			>${(0, _microsoft_fast_element.when)((x) => x.icon, renderHeaderIcon(iconTag))}</slot
+		>
+		${(0, _microsoft_fast_element.when)((x) => x.headline || x.subtitle, headerContent())}
+	</div>`;
+}
+function shouldHideHeader(card) {
+	return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
+}
+function renderMetaSlot() {
+	return _microsoft_fast_element.html` <slot name="meta" ${(0, _microsoft_fast_element.slotted)("metaSlottedContent")}></slot> `;
+}
+function text() {
+	return _microsoft_fast_element.html` <div class="text">${(x) => x.text}</div> `;
+}
+function renderButtonElement(content) {
+	return _microsoft_fast_element.html`<button
+		class="${getClasses}"
+		type="button"
+		${require_delegates_aria.delegateAria()}
+		aria-labelledby="${(x) => x.headline ? "card-headline" : null}"
+	>
+		${content}
+	</button>`;
+}
+function renderCardBaseElement(x, content) {
+	if (x.href) return x._renderLinkElement(content, getClasses);
+	else if (x.clickableCard) return renderButtonElement(content);
+	else return _microsoft_fast_element.html`<div
+			class="${getClasses}"
+			aria-labelledby="${(x) => x.headline ? "card-headline" : null}"
+		>
+			${content}
+		</div>`;
+}
+function renderCardContent(context) {
+	const iconTag = context.tagFor(require_definition.Icon);
+	return _microsoft_fast_element.html`
+		${(x) => renderCardBaseElement(x, _microsoft_fast_element.html`<div class="wrapper">
+					<div class="vwc-card-media">
+						<slot name="media"></slot>
+					</div>
+					<slot name="main">
+						<div class="main-content">
+							<div class="header-wrapper">
+								${renderHeader(iconTag)} ${renderMetaSlot()}
+							</div>
+							${(0, _microsoft_fast_element.when)((x) => x.text, text())}
+						</div>
+					</slot>
+					<div class="footer">
+						<slot name="footer" ${(0, _microsoft_fast_element.slotted)("footerSlottedContent")}></slot>
+					</div>
+				</div> `)}
+	`;
+}
+var CardTemplate = (context) => {
+	const elevationTag = context.tagFor(require_definition$1.Elevation);
+	return _microsoft_fast_element.html`
+		${(0, _microsoft_fast_element.when)((x) => x.appearance !== require_enums.Appearance.Ghost && x.appearance !== require_enums.Appearance.Outlined, _microsoft_fast_element.html`
+			<${elevationTag} dp=${(x) => x.elevation ?? "4"}>
+			  ${renderCardContent(context)}
+			</${elevationTag}>
+		`)}
+		${(0, _microsoft_fast_element.when)((x) => x.appearance === require_enums.Appearance.Outlined, _microsoft_fast_element.html`
+			<${elevationTag} dp='0')}>
+			  ${renderCardContent(context)}
+			</${elevationTag}>
+		`)}
+		${(0, _microsoft_fast_element.when)((x) => x.appearance === require_enums.Appearance.Ghost, _microsoft_fast_element.html` ${renderCardContent(context)} `)}
+	`;
+};
+//#endregion
+//#region src/lib/card/definition.ts
+/**
+* @internal
+*/
+var cardDefinition = require_vivid_element.defineVividComponent("card", Card, CardTemplate, [require_definition.iconDefinition, require_definition$1.elevationDefinition], { styles: card_default });
+/**
+* Registers the card elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerCard = require_vivid_element.createRegisterFunction(cardDefinition);
+//#endregion
+Object.defineProperty(exports, "Card", {
+	enumerable: true,
+	get: function() {
+		return Card;
+	}
+});
+Object.defineProperty(exports, "cardDefinition", {
+	enumerable: true,
+	get: function() {
+		return cardDefinition;
+	}
+});
+Object.defineProperty(exports, "registerCard", {
+	enumerable: true,
+	get: function() {
+		return registerCard;
+	}
+});

package/unbundled/definition22.js

@@ -0,0 +1,156 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { t as __decorate } from "./decorate.js";
+import { n as delegateAria } from "./delegates-aria.js";
+import { t as Linkable } from "./linkable.js";
+import { t as Appearance } from "./enums.js";
+import { r as Elevation, t as elevationDefinition } from "./definition8.js";
+import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/card/card.scss?inline
+var card_default = ":host{--_vvd-tinted-shadow-surface-0dp:drop-shadow(1px 0px 0px var(--card-border-color)) drop-shadow(0px 1px 0px var(--card-border-color)) drop-shadow(0px -1px 0px var(--card-border-color)) drop-shadow(-1px 0px 0px var(--card-border-color));display:flex}.base{text-align:start;border:0;border-radius:8px;outline:none;inline-size:100%;padding:0;text-decoration:none}.base:is(button,a):not(:disabled){cursor:pointer}.base:is(button,a):disabled{cursor:not-allowed}.base:is(button,a):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.wrapper{border-radius:inherit;block-size:100%;color:var(--vvd-color-canvas-text);--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent;flex-flow:column;display:flex;overflow:hidden}@media (hover:hover){.wrapper:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.wrapper.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.wrapper:active:where(:not(.disabled,:disabled)),.wrapper.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.wrapper{--_connotation-color-primary:var(--vvd-card-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-card-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-card-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-card-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-card-cta-soft,var(--vvd-color-cta-100))}@media (hover:hover){.base:is(button,a):hover>.wrapper{background-color:var(--_appearance-color-fill)}}.main-content{flex-flow:column;padding:24px;display:flex}.header{flex:1;align-items:flex-start;gap:8px;display:flex}.header-content{flex:1}.header-wrapper{gap:8px;display:flex}.header-headline,.header-subtitle{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.header-headline{font:var(--vvd-typography-heading-4);-webkit-line-clamp:var(--headline-line-clamp)}.header-subtitle{font:var(--vvd-typography-base);-webkit-line-clamp:var(--subtitle-line-clamp)}.hide-header .header{display:none}.header-subtitle,.text{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base)}.text{margin-top:12px;padding-right:8px}.footer{padding-bottom:24px;flex-direction:column;align-items:flex-end;margin-top:auto;padding-inline:24px;display:inline-flex}.hide-footer .footer{display:none}::slotted([slot=graphic i]),.icon{flex-shrink:0;align-self:baseline;margin-block-start:4px}.icon{font-size:20px}::slotted([slot=meta i]){flex-shrink:0;align-self:flex-start;margin-block-start:-8px;margin-inline:auto -8px}";
+//#endregion
+//#region src/lib/card/card.ts
+/**
+* @public
+* @component card
+* @slot graphic - The graphic slot overrides the icon property.
+* @slot media - The media slot is mainly for images or video content above the card header.
+* @slot meta - The meta slot is for action content in the card header.
+* @slot footer - The footer slot is for content in the card footer.
+* @slot main - Assign nodes to main slot to fully override a card's predefined flow and style with your own.
+* @testQuery headline headline
+*/
+var Card = class extends Linkable(VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.clickableCard = false;
+	}
+};
+__decorate([attr], Card.prototype, "appearance", void 0);
+__decorate([attr], Card.prototype, "headline", void 0);
+__decorate([attr], Card.prototype, "subtitle", void 0);
+__decorate([attr], Card.prototype, "text", void 0);
+__decorate([attr], Card.prototype, "icon", void 0);
+__decorate([attr], Card.prototype, "elevation", void 0);
+__decorate([attr({
+	mode: "boolean",
+	attribute: "clickable-card"
+})], Card.prototype, "clickableCard", void 0);
+__decorate([observable], Card.prototype, "footerSlottedContent", void 0);
+__decorate([observable], Card.prototype, "graphicSlottedContent", void 0);
+__decorate([observable], Card.prototype, "hasMetaSlottedContent", void 0);
+//#endregion
+//#region src/lib/card/card.template.ts
+var getClasses = (_) => classNames("base", ["hide-footer", !_.footerSlottedContent || !_.footerSlottedContent.length], ["hide-header", shouldHideHeader(_)]);
+function renderHeaderIcon(iconTag) {
+	return html`
+		<${iconTag} class="icon" inline name="${(x) => x.icon}"></${iconTag}>`;
+}
+function Headline() {
+	return html`
+		<div class="header-headline" id="card-headline">${(x) => x.headline}</div>
+	`;
+}
+function Subtitle() {
+	return html` <div class="header-subtitle">${(x) => x.subtitle}</div> `;
+}
+function headerContent() {
+	return html`
+		<div class="header-content">
+			${when((x) => x.headline, Headline())}
+			${when((x) => x.subtitle, Subtitle())}
+		</div>
+	`;
+}
+/**
+header
+*/
+function renderHeader(iconTag) {
+	return html` <div class="header">
+		<slot name="graphic" ${slotted("graphicSlottedContent")}
+			>${when((x) => x.icon, renderHeaderIcon(iconTag))}</slot
+		>
+		${when((x) => x.headline || x.subtitle, headerContent())}
+	</div>`;
+}
+function shouldHideHeader(card) {
+	return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
+}
+function renderMetaSlot() {
+	return html` <slot name="meta" ${slotted("metaSlottedContent")}></slot> `;
+}
+function text() {
+	return html` <div class="text">${(x) => x.text}</div> `;
+}
+function renderButtonElement(content) {
+	return html`<button
+		class="${getClasses}"
+		type="button"
+		${delegateAria()}
+		aria-labelledby="${(x) => x.headline ? "card-headline" : null}"
+	>
+		${content}
+	</button>`;
+}
+function renderCardBaseElement(x, content) {
+	if (x.href) return x._renderLinkElement(content, getClasses);
+	else if (x.clickableCard) return renderButtonElement(content);
+	else return html`<div
+			class="${getClasses}"
+			aria-labelledby="${(x) => x.headline ? "card-headline" : null}"
+		>
+			${content}
+		</div>`;
+}
+function renderCardContent(context) {
+	const iconTag = context.tagFor(Icon);
+	return html`
+		${(x) => renderCardBaseElement(x, html`<div class="wrapper">
+					<div class="vwc-card-media">
+						<slot name="media"></slot>
+					</div>
+					<slot name="main">
+						<div class="main-content">
+							<div class="header-wrapper">
+								${renderHeader(iconTag)} ${renderMetaSlot()}
+							</div>
+							${when((x) => x.text, text())}
+						</div>
+					</slot>
+					<div class="footer">
+						<slot name="footer" ${slotted("footerSlottedContent")}></slot>
+					</div>
+				</div> `)}
+	`;
+}
+var CardTemplate = (context) => {
+	const elevationTag = context.tagFor(Elevation);
+	return html`
+		${when((x) => x.appearance !== Appearance.Ghost && x.appearance !== Appearance.Outlined, html`
+			<${elevationTag} dp=${(x) => x.elevation ?? "4"}>
+			  ${renderCardContent(context)}
+			</${elevationTag}>
+		`)}
+		${when((x) => x.appearance === Appearance.Outlined, html`
+			<${elevationTag} dp='0')}>
+			  ${renderCardContent(context)}
+			</${elevationTag}>
+		`)}
+		${when((x) => x.appearance === Appearance.Ghost, html` ${renderCardContent(context)} `)}
+	`;
+};
+//#endregion
+//#region src/lib/card/definition.ts
+/**
+* @internal
+*/
+var cardDefinition = defineVividComponent("card", Card, CardTemplate, [iconDefinition, elevationDefinition], { styles: card_default });
+/**
+* Registers the card elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerCard = createRegisterFunction(cardDefinition);
+//#endregion
+export { registerCard as n, Card as r, cardDefinition as t };

package/unbundled/definition23.cjs

@@ -0,0 +1,161 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_definition = require("./definition2.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_form_associated = require("./form-associated.cjs");
+const require_form_element = require("./form-element.cjs");
+const require_with_success_text = require("./with-success-text.cjs");
+const require_with_error_text = require("./with-error-text.cjs");
+const require_mixins = require("./mixins.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/checkbox/checkbox.scss?inline
+var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}";
+/**
+* @public
+* @component checkbox
+* @slot - The default slot allows you to use rich content as the checkbox's label.
+* @slot helper-text - Describes how to use the checkbox. Alternative to the `helper-text` attribute.
+* @event {CustomEvent<undefined>} change - Emitted when the checked state changes.
+* @event {CustomEvent<undefined>} input - Emitted when the checked state changes.
+* @vueModel modelValue checked change `event.currentTarget.checked`
+* @testAction check check #control
+* @testAction uncheck uncheck #control
+* @testQuery checked checkedState "checked"
+* @testQuery unchecked checkedState "unchecked"
+* @testQuery indeterminate checkedState "indeterminate"
+* @testRef control shadow div.control
+*/
+var Checkbox = class extends require_delegates_aria.DelegatesAria(require_mixins.WithFeedback(require_with_error_text.WithErrorText(require_with_success_text.WithSuccessText(require_form_element.FormElement(require_form_associated.CheckableFormAssociated(require_vivid_element.VividElement)))))) {
+	/**
+	* @internal
+	*/
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
+	}
+	constructor() {
+		super();
+		this.tabindex = null;
+		this.proxy = document.createElement("input");
+		this.initialValue = "on";
+		this.defaultSlottedNodes = [];
+		this.indeterminate = false;
+		this.keypressHandler = (event) => {
+			if (event.target instanceof HTMLAnchorElement) return true;
+			if (!this.disabled && !this.readOnly) switch (event.key) {
+				case " ":
+					if (this.indeterminate) this.indeterminate = false;
+					this.checked = !this.checked;
+					break;
+			}
+			return false;
+		};
+		this.clickHandler = (event) => {
+			if (event.target instanceof HTMLAnchorElement) return true;
+			if (!this.disabled && !this.readOnly) {
+				if (this.indeterminate) this.indeterminate = false;
+				this.checked = !this.checked;
+			}
+			return false;
+		};
+		this.proxy.setAttribute("type", "checkbox");
+	}
+	/**
+	* @internal
+	*/
+	ariaCheckedChanged(oldValue, newValue) {
+		super.ariaCheckedChanged(oldValue, newValue);
+		if (this.ariaChecked === "mixed") this.indeterminate = true;
+		else {
+			this.indeterminate = false;
+			this.checked = this.ariaChecked === "true" ? true : false;
+		}
+	}
+	/**
+	* @internal
+	*/
+	checkedChanged(prev, next) {
+		super.checkedChanged(prev, next);
+		this.ariaChecked = next == true ? "true" : "false";
+		if (prev !== void 0) this.$emit("input");
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "tabindex" })], Checkbox.prototype, "tabindex", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Checkbox.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "readonly",
+	mode: "boolean"
+})], Checkbox.prototype, "readOnly", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Checkbox.prototype, "defaultSlottedNodes", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "indeterminate",
+	mode: "boolean"
+})], Checkbox.prototype, "indeterminate", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Checkbox.prototype, "slottedContent", void 0);
+//#endregion
+//#region src/lib/checkbox/checkbox.template.ts
+var getClasses = ({ connotation, readOnly, checked, disabled, indeterminate, errorValidationMessage, successText, label, slottedContent }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["readonly", Boolean(readOnly)], ["checked", Boolean(checked) || Boolean(indeterminate)], ["disabled", Boolean(disabled)], ["error connotation-alert", Boolean(errorValidationMessage)], ["success connotation-success", !!successText], ["hide-label", !label && !slottedContent?.length]);
+var CheckboxTemplate = (context) => {
+	const iconTag = context.tagFor(require_definition.Icon);
+	return _microsoft_fast_element.html`<template>
+		<div
+			class="${getClasses}"
+			aria-describedby="${(x) => x._feedbackDescribedBy}"
+			${require_delegates_aria.delegateAria({
+		role: "checkbox",
+		ariaChecked: (x) => x.indeterminate ? "mixed" : x.checked,
+		ariaRequired: (x) => x.required,
+		ariaDisabled: (x) => x.disabled,
+		ariaReadOnly: (x) => x.readOnly
+	})}
+			tabindex="${(x) => x.tabindex !== null ? x.tabindex : x.disabled ? null : 0}"
+			@keypress="${(x, c) => x.keypressHandler(c.event)}"
+			@click="${(x, c) => x.clickHandler(c.event)}"
+		>
+			<div class="control">
+				${(0, _microsoft_fast_element.when)((x) => x.checked && !x.indeterminate, _microsoft_fast_element.html`<${iconTag} name="check-solid" class="icon"></${iconTag}>`)}
+				${(0, _microsoft_fast_element.when)((x) => x.indeterminate, _microsoft_fast_element.html`<${iconTag} name="minus-solid" class="icon"></${iconTag}>`)}
+			</div>
+			${_microsoft_fast_element.html`<label
+				>${(x) => x.label}<slot ${(0, _microsoft_fast_element.slotted)("slottedContent")}></slot
+			></label>`}
+		</div>
+		${(x) => x._getFeedbackTemplate(context)}
+	</template>`;
+};
+//#endregion
+//#region src/lib/checkbox/definition.ts
+/**
+* @internal
+*/
+var checkboxDefinition = require_vivid_element.defineVividComponent("checkbox", Checkbox, CheckboxTemplate, [require_definition.iconDefinition, require_mixins.feedbackMessageDefinition], {
+	styles: checkbox_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the checkbox elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerCheckbox = require_vivid_element.createRegisterFunction(checkboxDefinition);
+//#endregion
+Object.defineProperty(exports, "Checkbox", {
+	enumerable: true,
+	get: function() {
+		return Checkbox;
+	}
+});
+Object.defineProperty(exports, "checkboxDefinition", {
+	enumerable: true,
+	get: function() {
+		return checkboxDefinition;
+	}
+});
+Object.defineProperty(exports, "registerCheckbox", {
+	enumerable: true,
+	get: function() {
+		return registerCheckbox;
+	}
+});

package/unbundled/definition23.js

@@ -0,0 +1,143 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { r as Icon, t as iconDefinition } from "./definition2.js";
+import { t as __decorate } from "./decorate.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as CheckableFormAssociated } from "./form-associated.js";
+import { t as FormElement } from "./form-element.js";
+import { t as WithSuccessText } from "./with-success-text.js";
+import { t as WithErrorText } from "./with-error-text.js";
+import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
+import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/checkbox/checkbox.scss?inline
+var checkbox_default = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.base{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}";
+/**
+* @public
+* @component checkbox
+* @slot - The default slot allows you to use rich content as the checkbox's label.
+* @slot helper-text - Describes how to use the checkbox. Alternative to the `helper-text` attribute.
+* @event {CustomEvent<undefined>} change - Emitted when the checked state changes.
+* @event {CustomEvent<undefined>} input - Emitted when the checked state changes.
+* @vueModel modelValue checked change `event.currentTarget.checked`
+* @testAction check check #control
+* @testAction uncheck uncheck #control
+* @testQuery checked checkedState "checked"
+* @testQuery unchecked checkedState "unchecked"
+* @testQuery indeterminate checkedState "indeterminate"
+* @testRef control shadow div.control
+*/
+var Checkbox = class extends DelegatesAria(WithFeedback(WithErrorText(WithSuccessText(FormElement(CheckableFormAssociated(VividElement)))))) {
+	/**
+	* @internal
+	*/
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		if (this.proxy instanceof HTMLInputElement) this.proxy.readOnly = this.readOnly;
+	}
+	constructor() {
+		super();
+		this.tabindex = null;
+		this.proxy = document.createElement("input");
+		this.initialValue = "on";
+		this.defaultSlottedNodes = [];
+		this.indeterminate = false;
+		this.keypressHandler = (event) => {
+			if (event.target instanceof HTMLAnchorElement) return true;
+			if (!this.disabled && !this.readOnly) switch (event.key) {
+				case " ":
+					if (this.indeterminate) this.indeterminate = false;
+					this.checked = !this.checked;
+					break;
+			}
+			return false;
+		};
+		this.clickHandler = (event) => {
+			if (event.target instanceof HTMLAnchorElement) return true;
+			if (!this.disabled && !this.readOnly) {
+				if (this.indeterminate) this.indeterminate = false;
+				this.checked = !this.checked;
+			}
+			return false;
+		};
+		this.proxy.setAttribute("type", "checkbox");
+	}
+	/**
+	* @internal
+	*/
+	ariaCheckedChanged(oldValue, newValue) {
+		super.ariaCheckedChanged(oldValue, newValue);
+		if (this.ariaChecked === "mixed") this.indeterminate = true;
+		else {
+			this.indeterminate = false;
+			this.checked = this.ariaChecked === "true" ? true : false;
+		}
+	}
+	/**
+	* @internal
+	*/
+	checkedChanged(prev, next) {
+		super.checkedChanged(prev, next);
+		this.ariaChecked = next == true ? "true" : "false";
+		if (prev !== void 0) this.$emit("input");
+	}
+};
+__decorate([attr({ attribute: "tabindex" })], Checkbox.prototype, "tabindex", void 0);
+__decorate([attr], Checkbox.prototype, "connotation", void 0);
+__decorate([attr({
+	attribute: "readonly",
+	mode: "boolean"
+})], Checkbox.prototype, "readOnly", void 0);
+__decorate([observable], Checkbox.prototype, "defaultSlottedNodes", void 0);
+__decorate([attr({
+	attribute: "indeterminate",
+	mode: "boolean"
+})], Checkbox.prototype, "indeterminate", void 0);
+__decorate([observable], Checkbox.prototype, "slottedContent", void 0);
+//#endregion
+//#region src/lib/checkbox/checkbox.template.ts
+var getClasses = ({ connotation, readOnly, checked, disabled, indeterminate, errorValidationMessage, successText, label, slottedContent }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["readonly", Boolean(readOnly)], ["checked", Boolean(checked) || Boolean(indeterminate)], ["disabled", Boolean(disabled)], ["error connotation-alert", Boolean(errorValidationMessage)], ["success connotation-success", !!successText], ["hide-label", !label && !slottedContent?.length]);
+var CheckboxTemplate = (context) => {
+	const iconTag = context.tagFor(Icon);
+	return html`<template>
+		<div
+			class="${getClasses}"
+			aria-describedby="${(x) => x._feedbackDescribedBy}"
+			${delegateAria({
+		role: "checkbox",
+		ariaChecked: (x) => x.indeterminate ? "mixed" : x.checked,
+		ariaRequired: (x) => x.required,
+		ariaDisabled: (x) => x.disabled,
+		ariaReadOnly: (x) => x.readOnly
+	})}
+			tabindex="${(x) => x.tabindex !== null ? x.tabindex : x.disabled ? null : 0}"
+			@keypress="${(x, c) => x.keypressHandler(c.event)}"
+			@click="${(x, c) => x.clickHandler(c.event)}"
+		>
+			<div class="control">
+				${when((x) => x.checked && !x.indeterminate, html`<${iconTag} name="check-solid" class="icon"></${iconTag}>`)}
+				${when((x) => x.indeterminate, html`<${iconTag} name="minus-solid" class="icon"></${iconTag}>`)}
+			</div>
+			${html`<label
+				>${(x) => x.label}<slot ${slotted("slottedContent")}></slot
+			></label>`}
+		</div>
+		${(x) => x._getFeedbackTemplate(context)}
+	</template>`;
+};
+//#endregion
+//#region src/lib/checkbox/definition.ts
+/**
+* @internal
+*/
+var checkboxDefinition = defineVividComponent("checkbox", Checkbox, CheckboxTemplate, [iconDefinition, feedbackMessageDefinition], {
+	styles: checkbox_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the checkbox elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerCheckbox = createRegisterFunction(checkboxDefinition);
+//#endregion
+export { registerCheckbox as n, Checkbox as r, checkboxDefinition as t };