@vonage/vivid 5.15.1 → 5.16.0

package/unbundled/definition6.cjs

@@ -1,56 +1,88 @@
-'use strict';
-
-const vividElement = require('./vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Elevation extends vividElement.VividElement {
-}
-__decorateClass([
-  fastElement.attr
-], Elevation.prototype, "dp");
-__decorateClass([
-  fastElement.attr({ attribute: "no-shadow", mode: "boolean" })
-], Elevation.prototype, "noShadow");
-__decorateClass([
-  fastElement.attr({ attribute: "not-relative", mode: "boolean" })
-], Elevation.prototype, "notRelative");
-
-const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}";
-
-const getClasses = ({ dp, noShadow, notRelative }) => fastWebUtilities.classNames(
-  "control",
-  [`dp-${dp}`, Boolean(dp)],
-  ["no-shadow", Boolean(noShadow)],
-  ["not-relative", Boolean(notRelative)]
-);
-const elevationTemplate = fastElement.html` <div
-	class="${getClasses}"
-	part="base"
->
-	<slot></slot>
-</div>`;
-
-const elevationDefinition = vividElement.defineVividComponent(
-  "elevation",
-  Elevation,
-  elevationTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerElevation = vividElement.createRegisterFunction(elevationDefinition);
-
-exports.Elevation = Elevation;
-exports.elevationDefinition = elevationDefinition;
-exports.registerElevation = registerElevation;
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_base_progress = require("./base-progress.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/progress-ring/progress-ring.scss?inline
+var progress_ring_default = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.connotation-cta{--_connotation-color-firm:var(--vvd-progress-ring-cta-firm,var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm:var(--vvd-progress-ring-alert-firm,var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm:var(--vvd-progress-ring-success-firm,var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm:var(--vvd-progress-ring-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}";
+//#endregion
+//#region src/lib/progress-ring/progress-ring.ts
+/**
+* @public
+* @component progress-ring
+*/
+var ProgressRing = class extends require_delegates_aria.DelegatesAria(require_base_progress.BaseProgress) {};
+require_decorate.__decorate([_microsoft_fast_element.attr], ProgressRing.prototype, "connotation", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], ProgressRing.prototype, "size", void 0);
+//#endregion
+//#region src/lib/progress-ring/progress-ring.template.ts
+var getClasses = ({ connotation, size, paused }) => (0, _microsoft_fast_web_utilities.classNames)("base", ["disabled", !!paused], [`connotation-${connotation}`, !!connotation], [`size-${size}`, !!size]);
+var progressSegments = 44;
+var ProgressRingTemplate = _microsoft_fast_element.html`<template>
+	<div
+		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
+		${require_delegates_aria.delegateAria({
+	role: "progressbar",
+	ariaValueNow: (x) => x.value,
+	ariaValueMin: (x) => x.min,
+	ariaValueMax: (x) => x.max
+})}
+	>
+		${(0, _microsoft_fast_element.when)((x) => typeof x.value === "number", _microsoft_fast_element.html`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="determinate"
+						style="stroke-dasharray: ${(x) => progressSegments * x.percentComplete / 100}px ${progressSegments}px"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`)}
+		${(0, _microsoft_fast_element.when)((x) => typeof x.value !== "number", _microsoft_fast_element.html`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="indeterminate-indicator-1"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`)}
+	</div>
+</template>`;
+//#endregion
+//#region src/lib/progress-ring/definition.ts
+/**
+* @internal
+*/
+var progressRingDefinition = require_vivid_element.defineVividComponent("progress-ring", ProgressRing, ProgressRingTemplate, [], { styles: progress_ring_default });
+/**
+* Registers the progress-ring  elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerProgressRing = require_vivid_element.createRegisterFunction(progressRingDefinition);
+//#endregion
+Object.defineProperty(exports, "ProgressRing", {
+	enumerable: true,
+	get: function() {
+		return ProgressRing;
+	}
+});
+Object.defineProperty(exports, "progressRingDefinition", {
+	enumerable: true,
+	get: function() {
+		return progressRingDefinition;
+	}
+});
+Object.defineProperty(exports, "registerProgressRing", {
+	enumerable: true,
+	get: function() {
+		return registerProgressRing;
+	}
+});

package/unbundled/definition6.js

@@ -1,52 +1,69 @@
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from './vivid-element.js';
-import { attr, html } from '@microsoft/fast-element';
-import { classNames } from '@microsoft/fast-web-utilities';
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class Elevation extends VividElement {
-}
-__decorateClass([
-  attr
-], Elevation.prototype, "dp");
-__decorateClass([
-  attr({ attribute: "no-shadow", mode: "boolean" })
-], Elevation.prototype, "noShadow");
-__decorateClass([
-  attr({ attribute: "not-relative", mode: "boolean" })
-], Elevation.prototype, "notRelative");
-
-const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--_vvd-tinted-color-surface-0dp, var(--vvd-color-surface-0dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-0dp, var(--vvd-shadow-surface-0dp))}.control.dp-4{--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp))}.control.dp-8{--_elevation-fill: var(--_vvd-tinted-color-surface-8dp, var(--vvd-color-surface-8dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-8dp, var(--vvd-shadow-surface-8dp))}.control.dp-12{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}.control.dp-16{--_elevation-fill: var(--_vvd-tinted-color-surface-16dp, var(--vvd-color-surface-16dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-16dp, var(--vvd-shadow-surface-16dp))}.control.dp-24{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--_vvd-tinted-color-surface-2dp, var(--vvd-color-surface-2dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-2dp, var(--vvd-shadow-surface-2dp))}.control ::slotted(*){isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;border-radius:inherit;background:var(--_elevation-fill);block-size:100%;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control:not(.not-relative) ::slotted(*){position:relative}.control.no-shadow ::slotted(*):before{filter:none}";
-
-const getClasses = ({ dp, noShadow, notRelative }) => classNames(
-  "control",
-  [`dp-${dp}`, Boolean(dp)],
-  ["no-shadow", Boolean(noShadow)],
-  ["not-relative", Boolean(notRelative)]
-);
-const elevationTemplate = html` <div
-	class="${getClasses}"
-	part="base"
->
-	<slot></slot>
-</div>`;
-
-const elevationDefinition = defineVividComponent(
-  "elevation",
-  Elevation,
-  elevationTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerElevation = createRegisterFunction(elevationDefinition);
-
-export { Elevation as E, elevationDefinition as e, registerElevation as r };
+import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as BaseProgress } from "./base-progress.js";
+import { attr, html, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/progress-ring/progress-ring.scss?inline
+var progress_ring_default = ":host{--_vvd-progress-ring-accent-firm-wrapper:var(--vvd-progress-ring-accent-firm);--_vvd-progress-ring-cta-firm-wrapper:var(--vvd-progress-ring-cta-firm);--_vvd-progress-ring-alert-firm-wrapper:var(--vvd-progress-ring-alert-firm);--_vvd-progress-ring-success-firm-wrapper:var(--vvd-progress-ring-success-firm)}.base{--vvd-progress-ring-accent-firm:var(--_vvd-progress-ring-accent-firm-wrapper,var(--vvd-progress-ring-accent-primary));--vvd-progress-ring-cta-firm:var(--_vvd-progress-ring-cta-firm-wrapper,var(--vvd-progress-ring-cta-primary));--vvd-progress-ring-alert-firm:var(--_vvd-progress-ring-alert-firm-wrapper,var(--vvd-progress-ring-alert-primary));--vvd-progress-ring-success-firm:var(--_vvd-progress-ring-success-firm-wrapper,var(--vvd-progress-ring-success-primary))}.base.connotation-cta{--_connotation-color-firm:var(--vvd-progress-ring-cta-firm,var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm:var(--vvd-progress-ring-alert-firm,var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm:var(--vvd-progress-ring-success-firm,var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm:var(--vvd-progress-ring-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base.size--6{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size--4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base.size--3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.base.size--2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size--1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.base.size-1{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.base.size-2{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-3{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.base.size-4{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.base.size-5{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base{block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none;align-items:center}.progress{width:100%;height:100%}.background{fill:none;stroke:#0000;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;transform:rotate(-90deg)}.indeterminate-indicator-1{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform-origin:50%;transition:all .2s ease-in-out;animation:2s linear infinite spin-infinite;transform:rotate(-90deg)}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01 43.97;transform:rotate(0)}50%{stroke-dasharray:21.99 21.99;transform:rotate(450deg)}to{stroke-dasharray:.01 43.97;transform:rotate(1080deg)}}";
+//#endregion
+//#region src/lib/progress-ring/progress-ring.ts
+/**
+* @public
+* @component progress-ring
+*/
+var ProgressRing = class extends DelegatesAria(BaseProgress) {};
+__decorate([attr], ProgressRing.prototype, "connotation", void 0);
+__decorate([attr], ProgressRing.prototype, "size", void 0);
+//#endregion
+//#region src/lib/progress-ring/progress-ring.template.ts
+var getClasses = ({ connotation, size, paused }) => classNames("base", ["disabled", !!paused], [`connotation-${connotation}`, !!connotation], [`size-${size}`, !!size]);
+var progressSegments = 44;
+//#endregion
+//#region src/lib/progress-ring/definition.ts
+/**
+* @internal
+*/
+var progressRingDefinition = defineVividComponent("progress-ring", ProgressRing, html`<template>
+	<div
+		class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
+		${delegateAria({
+	role: "progressbar",
+	ariaValueNow: (x) => x.value,
+	ariaValueMin: (x) => x.min,
+	ariaValueMax: (x) => x.max
+})}
+	>
+		${when((x) => typeof x.value === "number", html`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="determinate"
+						style="stroke-dasharray: ${(x) => progressSegments * x.percentComplete / 100}px ${progressSegments}px"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`)}
+		${when((x) => typeof x.value !== "number", html`
+				<svg class="progress" viewBox="0 0 16 16">
+					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
+					<circle
+						class="indeterminate-indicator-1"
+						cx="8px"
+						cy="8px"
+						r="7px"
+					></circle>
+				</svg>
+			`)}
+	</div>
+</template>`, [], { styles: progress_ring_default });
+/**
+* Registers the progress-ring  elements with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerProgressRing = createRegisterFunction(progressRingDefinition);
+//#endregion
+export { registerProgressRing as n, ProgressRing as r, progressRingDefinition as t };

package/unbundled/definition60.cjs

@@ -0,0 +1,149 @@
+require("./chunk.cjs");
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_enums = require("./enums.cjs");
+const require_definition = require("./definition23.cjs");
+const require_definition$1 = require("./definition53.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/selectable-box/selectable-box.scss?inline
+var selectable_box_default = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}";
+//#endregion
+//#region src/lib/selectable-box/selectable-box.ts
+/**
+* @public
+* @component selectable-box
+* @slot default - Slot for box's content.
+* @event {CustomEvent<undefined>} change - Fired when the checked state changes
+* @testAction check check #control
+* @testAction uncheck uncheck #control
+* @testQuery checked checked true
+* @testQuery unchecked checked false
+* @testRef control nestedShadow [data-vvd-component].control div.control
+*/
+var SelectableBox = class extends require_delegates_aria.DelegatesAria(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.clickableBox = false;
+		this.controlPlacement = "end-stacked";
+		this.tight = false;
+		this.disabled = false;
+	}
+	/**
+	* @internal
+	*/
+	_handleCheckedChange() {
+		if (this.disabled) return;
+		if (this.controlType === "radio" && this.checked) return;
+		this.checked = !this.checked;
+		if (this.clickableBox) this.$emit("change");
+	}
+	/**
+	* @internal
+	*/
+	_handleKeydown(event) {
+		if (this.disabled) return true;
+		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) return this._handleCheckedChange();
+		return true;
+	}
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SelectableBox.prototype, "checked", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "clickable-box",
+	mode: "boolean"
+})], SelectableBox.prototype, "clickableBox", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], SelectableBox.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "control-type" })], SelectableBox.prototype, "controlType", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
+	attribute: "control-placement",
+	mode: "fromView"
+})], SelectableBox.prototype, "controlPlacement", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SelectableBox.prototype, "tight", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], SelectableBox.prototype, "disabled", void 0);
+//#endregion
+//#region src/lib/selectable-box/selectable-box.template.ts
+var getClasses = ({ connotation, tight, checked, clickableBox, controlPlacement, disabled }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], ["tight", tight], ["selected", checked], ["clickable", clickableBox], ["readonly", !clickableBox], [`control-placement-${controlPlacement}`, Boolean(controlPlacement)], ["disabled", disabled]);
+function handleControlChange(x) {
+	if (!x.clickableBox) x._handleCheckedChange();
+}
+function checkbox(context) {
+	const checkboxTag = context.tagFor(require_definition.Checkbox);
+	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => x.controlType !== "radio", _microsoft_fast_element.html`
+		<${checkboxTag}
+			${require_delegates_aria.delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
+			@change="${(x) => handleControlChange(x)}"
+			class="control checkbox ${(x) => x.controlPlacement}"
+			connotation="${(x) => x.connotation === "cta" ? require_enums.Connotation.CTA : require_enums.Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			?disabled="${(x) => x.disabled}"
+			inert="${(x) => x.clickableBox ? true : null}"
+		></${checkboxTag}>`)} `;
+}
+function radio(context) {
+	const radioTag = context.tagFor(require_definition$1.Radio);
+	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => x.controlType === "radio", _microsoft_fast_element.html`
+		<${radioTag}
+			${require_delegates_aria.delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
+			@change="${(x) => handleControlChange(x)}"
+			class="control radio ${(x) => x.controlPlacement}"
+			connotation="${(x) => x.connotation === "cta" ? require_enums.Connotation.CTA : require_enums.Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			?disabled="${(x) => x.disabled}"
+			inert="${(x) => x.clickableBox ? true : null}"
+		></${radioTag}>`)} `;
+}
+var SelectableBoxTemplate = (context) => {
+	return _microsoft_fast_element.html`<template>
+		<div
+			class="${getClasses}"
+			tabindex="${(x) => x.clickableBox && !x.disabled ? "0" : null}"
+			${require_delegates_aria.delegateAria({
+		role: (x) => x.clickableBox ? "button" : null,
+		ariaPressed: (x) => x.clickableBox ? x.checked ? "true" : "false" : null,
+		ariaLabel: (x) => x.clickableBox ? x.ariaLabel : null,
+		ariaDisabled: (x) => x.clickableBox && x.disabled ? "true" : null
+	})}
+			@keydown="${(x, c) => x._handleKeydown(c.event)}"
+			@click="${(x) => x.clickableBox ? x._handleCheckedChange() : null}"
+		>
+			${checkbox(context)} ${radio(context)}
+			<slot></slot>
+		</div>
+	</template>`;
+};
+//#endregion
+//#region src/lib/selectable-box/definition.ts
+/**
+* @internal
+*/
+var selectableBoxDefinition = require_vivid_element.defineVividComponent("selectable-box", SelectableBox, SelectableBoxTemplate, [require_definition.checkboxDefinition, require_definition$1.radioDefinition], {
+	styles: selectable_box_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the selectable-box element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerSelectableBox = require_vivid_element.createRegisterFunction(selectableBoxDefinition);
+//#endregion
+Object.defineProperty(exports, "SelectableBox", {
+	enumerable: true,
+	get: function() {
+		return SelectableBox;
+	}
+});
+Object.defineProperty(exports, "registerSelectableBox", {
+	enumerable: true,
+	get: function() {
+		return registerSelectableBox;
+	}
+});
+Object.defineProperty(exports, "selectableBoxDefinition", {
+	enumerable: true,
+	get: function() {
+		return selectableBoxDefinition;
+	}
+});

package/unbundled/definition60.js

@@ -0,0 +1,131 @@
+import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { r as Connotation } from "./enums.js";
+import { r as Checkbox, t as checkboxDefinition } from "./definition23.js";
+import { r as Radio, t as radioDefinition } from "./definition53.js";
+import { attr, html, when } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/selectable-box/selectable-box.scss?inline
+var selectable_box_default = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}";
+//#endregion
+//#region src/lib/selectable-box/selectable-box.ts
+/**
+* @public
+* @component selectable-box
+* @slot default - Slot for box's content.
+* @event {CustomEvent<undefined>} change - Fired when the checked state changes
+* @testAction check check #control
+* @testAction uncheck uncheck #control
+* @testQuery checked checked true
+* @testQuery unchecked checked false
+* @testRef control nestedShadow [data-vvd-component].control div.control
+*/
+var SelectableBox = class extends DelegatesAria(VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.clickableBox = false;
+		this.controlPlacement = "end-stacked";
+		this.tight = false;
+		this.disabled = false;
+	}
+	/**
+	* @internal
+	*/
+	_handleCheckedChange() {
+		if (this.disabled) return;
+		if (this.controlType === "radio" && this.checked) return;
+		this.checked = !this.checked;
+		if (this.clickableBox) this.$emit("change");
+	}
+	/**
+	* @internal
+	*/
+	_handleKeydown(event) {
+		if (this.disabled) return true;
+		if ((event.code === "Space" || event.code === "Enter") && this.clickableBox) return this._handleCheckedChange();
+		return true;
+	}
+};
+__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "checked", void 0);
+__decorate([attr({
+	attribute: "clickable-box",
+	mode: "boolean"
+})], SelectableBox.prototype, "clickableBox", void 0);
+__decorate([attr], SelectableBox.prototype, "connotation", void 0);
+__decorate([attr({ attribute: "control-type" })], SelectableBox.prototype, "controlType", void 0);
+__decorate([attr({
+	attribute: "control-placement",
+	mode: "fromView"
+})], SelectableBox.prototype, "controlPlacement", void 0);
+__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "tight", void 0);
+__decorate([attr({ mode: "boolean" })], SelectableBox.prototype, "disabled", void 0);
+//#endregion
+//#region src/lib/selectable-box/selectable-box.template.ts
+var getClasses = ({ connotation, tight, checked, clickableBox, controlPlacement, disabled }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], ["tight", tight], ["selected", checked], ["clickable", clickableBox], ["readonly", !clickableBox], [`control-placement-${controlPlacement}`, Boolean(controlPlacement)], ["disabled", disabled]);
+function handleControlChange(x) {
+	if (!x.clickableBox) x._handleCheckedChange();
+}
+function checkbox(context) {
+	const checkboxTag = context.tagFor(Checkbox);
+	return html`${when((x) => x.controlType !== "radio", html`
+		<${checkboxTag}
+			${delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
+			@change="${(x) => handleControlChange(x)}"
+			class="control checkbox ${(x) => x.controlPlacement}"
+			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			?disabled="${(x) => x.disabled}"
+			inert="${(x) => x.clickableBox ? true : null}"
+		></${checkboxTag}>`)} `;
+}
+function radio(context) {
+	const radioTag = context.tagFor(Radio);
+	return html`${when((x) => x.controlType === "radio", html`
+		<${radioTag}
+			${delegateAria({ ariaLabel: (x) => !x.clickableBox && x.ariaLabel ? x.ariaLabel : null }, { onlySpecified: true })}
+			@change="${(x) => handleControlChange(x)}"
+			class="control radio ${(x) => x.controlPlacement}"
+			connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			?disabled="${(x) => x.disabled}"
+			inert="${(x) => x.clickableBox ? true : null}"
+		></${radioTag}>`)} `;
+}
+var SelectableBoxTemplate = (context) => {
+	return html`<template>
+		<div
+			class="${getClasses}"
+			tabindex="${(x) => x.clickableBox && !x.disabled ? "0" : null}"
+			${delegateAria({
+		role: (x) => x.clickableBox ? "button" : null,
+		ariaPressed: (x) => x.clickableBox ? x.checked ? "true" : "false" : null,
+		ariaLabel: (x) => x.clickableBox ? x.ariaLabel : null,
+		ariaDisabled: (x) => x.clickableBox && x.disabled ? "true" : null
+	})}
+			@keydown="${(x, c) => x._handleKeydown(c.event)}"
+			@click="${(x) => x.clickableBox ? x._handleCheckedChange() : null}"
+		>
+			${checkbox(context)} ${radio(context)}
+			<slot></slot>
+		</div>
+	</template>`;
+};
+//#endregion
+//#region src/lib/selectable-box/definition.ts
+/**
+* @internal
+*/
+var selectableBoxDefinition = defineVividComponent("selectable-box", SelectableBox, SelectableBoxTemplate, [checkboxDefinition, radioDefinition], {
+	styles: selectable_box_default,
+	shadowOptions: { delegatesFocus: true }
+});
+/**
+* Registers the selectable-box element with the design system.
+*
+* @param prefix - the prefix to use for the component name
+*/
+var registerSelectableBox = createRegisterFunction(selectableBoxDefinition);
+//#endregion
+export { selectableBoxDefinition as n, SelectableBox as r, registerSelectableBox as t };