@vonage/vivid 5.15.1 → 5.17.0

package/select/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition19.cjs");e.registerSelect();
+require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`),require(`../bundled/definition18.cjs`).t();

package/select/index.js

@@ -1,2 +1,6 @@
-import { r } from "../bundled/definition19.js";
-r();
+import "../bundled/vivid-element.js";
+import "../bundled/definition2.js";
+import { t as e } from "../bundled/definition18.js";
+//#region src/lib/select/index.ts
+e();
+//#endregion

package/selectable-box/definition.cjs

@@ -1,174 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const checkbox_definition = require('../checkbox/definition.cjs');
-const radio_definition = require('../radio/definition.cjs');
-const vividElement = require('../unbundled/vivid-element.cjs');
-const fastElement = require('@microsoft/fast-element');
-const delegatesAria = require('../unbundled/delegates-aria.cjs');
-const fastWebUtilities = require('@microsoft/fast-web-utilities');
-const enums = require('../unbundled/enums.cjs');
-
-const styles = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media(hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media(hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
-
-var __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 SelectableBox extends delegatesAria.DelegatesAria(vividElement.VividElement) {
-  constructor() {
-    super(...arguments);
-    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;
-  }
-}
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], SelectableBox.prototype, "checked");
-__decorateClass([
-  fastElement.attr({ attribute: "clickable-box", mode: "boolean" })
-], SelectableBox.prototype, "clickableBox");
-__decorateClass([
-  fastElement.attr
-], SelectableBox.prototype, "connotation");
-__decorateClass([
-  fastElement.attr({ attribute: "control-type" })
-], SelectableBox.prototype, "controlType");
-__decorateClass([
-  fastElement.attr({ attribute: "control-placement", mode: "fromView" })
-], SelectableBox.prototype, "controlPlacement");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], SelectableBox.prototype, "tight");
-__decorateClass([
-  fastElement.attr({ mode: "boolean" })
-], SelectableBox.prototype, "disabled");
-
-const getClasses = ({
-  connotation,
-  tight,
-  checked,
-  clickableBox,
-  controlPlacement,
-  disabled
-}) => fastWebUtilities.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_definition.VwcCheckboxElement);
-  return fastElement.html`${fastElement.when(
-    (x) => x.controlType !== "radio",
-    fastElement.html`
-		<${checkboxTag}
-			${delegatesAria.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" ? enums.Connotation.CTA : 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(radio_definition.VwcRadioElement);
-  return fastElement.html`${fastElement.when(
-    (x) => x.controlType === "radio",
-    fastElement.html`
-		<${radioTag}
-			${delegatesAria.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" ? enums.Connotation.CTA : enums.Connotation.Accent}"
-			:checked="${(x) => x.checked}"
-			?disabled="${(x) => x.disabled}"
-			inert="${(x) => x.clickableBox ? true : null}"
-		></${radioTag}>`
-  )} `;
-}
-const SelectableBoxTemplate = (context) => {
-  return fastElement.html`<template>
-		<div
-			class="${getClasses}"
-			tabindex="${(x) => x.clickableBox && !x.disabled ? "0" : null}"
-			${delegatesAria.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>`;
-};
-
-const selectableBoxDefinition = vividElement.defineVividComponent(
-  "selectable-box",
-  SelectableBox,
-  SelectableBoxTemplate,
-  [checkbox_definition.checkboxDefinition, radio_definition.radioDefinition],
-  {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerSelectableBox = vividElement.createRegisterFunction(
-  selectableBoxDefinition
-);
-
-exports.VwcSelectableBoxElement = SelectableBox;
-exports.registerSelectableBox = registerSelectableBox;
-exports.selectableBoxDefinition = selectableBoxDefinition;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition60.cjs");
+exports.VwcSelectableBoxElement = require_definition$1.SelectableBox;
+exports.registerSelectableBox = require_definition$1.registerSelectableBox;
+exports.selectableBoxDefinition = require_definition$1.selectableBoxDefinition;

package/selectable-box/definition.js

@@ -1,168 +1,3 @@
-import { VwcCheckboxElement as Checkbox, checkboxDefinition } from '../checkbox/definition.js';
-import { VwcRadioElement as Radio, radioDefinition } from '../radio/definition.js';
-import { V as VividElement, c as createRegisterFunction, d as defineVividComponent } from '../unbundled/vivid-element.js';
-import { attr, html, when } from '@microsoft/fast-element';
-import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
-import { classNames } from '@microsoft/fast-web-utilities';
-import { C as Connotation } from '../unbundled/enums.js';
-
-const styles = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all: var(--vvd-selectable-box-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all: var(--vvd-selectable-box-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}@media(hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}@media(hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base{--control-offset: calc(var(--selectable-box-spacing, 16px) + 36px)}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);border-radius:8px;background-color:var(--_appearance-color-fill);inline-size:100%;text-align:start}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.selected{background-color:var(--selectable-box-checked-bg, var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing, 16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing, 16px)}";
-
-var __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 SelectableBox extends DelegatesAria(VividElement) {
-  constructor() {
-    super(...arguments);
-    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;
-  }
-}
-__decorateClass([
-  attr({ mode: "boolean" })
-], SelectableBox.prototype, "checked");
-__decorateClass([
-  attr({ attribute: "clickable-box", mode: "boolean" })
-], SelectableBox.prototype, "clickableBox");
-__decorateClass([
-  attr
-], SelectableBox.prototype, "connotation");
-__decorateClass([
-  attr({ attribute: "control-type" })
-], SelectableBox.prototype, "controlType");
-__decorateClass([
-  attr({ attribute: "control-placement", mode: "fromView" })
-], SelectableBox.prototype, "controlPlacement");
-__decorateClass([
-  attr({ mode: "boolean" })
-], SelectableBox.prototype, "tight");
-__decorateClass([
-  attr({ mode: "boolean" })
-], SelectableBox.prototype, "disabled");
-
-const 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}>`
-  )} `;
-}
-const 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>`;
-};
-
-const selectableBoxDefinition = defineVividComponent(
-  "selectable-box",
-  SelectableBox,
-  SelectableBoxTemplate,
-  [checkboxDefinition, radioDefinition],
-  {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerSelectableBox = createRegisterFunction(
-  selectableBoxDefinition
-);
-
+import "../unbundled/definition2.js";
+import { n as selectableBoxDefinition, r as SelectableBox, t as registerSelectableBox } from "../unbundled/definition60.js";
 export { SelectableBox as VwcSelectableBoxElement, registerSelectableBox, selectableBoxDefinition };

package/selectable-box/index.cjs

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