@vonage/vivid 3.51.0 → 3.53.0

package/shared/definition44.cjs

@@ -1,501 +1,14 @@
 'use strict';
 
 const index = require('./index.cjs');
-const direction = require('./direction.cjs');
-const numbers = require('./numbers.cjs');
-const formAssociated = require('./form-associated.cjs');
-const aria = require('./aria.cjs');
-const keyCodes = require('./key-codes.cjs');
-const aria$1 = require('./aria2.cjs');
-const ref = require('./ref.cjs');
+const definition = require('./definition15.cjs');
+const definition$1 = require('./definition41.cjs');
+const enums = require('./enums.cjs');
+const radio$1 = require('./radio.cjs');
 const classNames = require('./class-names.cjs');
+const when = require('./when.cjs');
 
-/**
- * Converts a pixel coordinate on the track to a percent of the track's range
- */
-function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction$1) {
-    let pct = numbers.limit(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
-    if (direction$1 === direction.Direction.rtl) {
-        pct = 1 - pct;
-    }
-    return pct;
-}
-
-class _Slider extends index.FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Slider:class)} component.
- *
- * @internal
- */
-class FormAssociatedSlider extends formAssociated.FormAssociated(_Slider) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
-}
-
-/**
- * The selection modes of a {@link @microsoft/fast-foundation#(Slider:class)}.
- * @public
- */
-const SliderMode = {
-    singleValue: "single-value",
-};
-/**
- * A Slider Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#slider | ARIA slider }.
- *
- * @slot track - The track of the slider
- * @slot track-start - The track-start visual indicator
- * @slot thumb - The slider thumb
- * @slot - The default slot for labels
- * @csspart positioning-region - The region used to position the elements of the slider
- * @csspart track-container - The region containing the track elements
- * @csspart track-start - The element wrapping the track start slot
- * @csspart thumb-container - The thumb container element which is programatically positioned
- * @fires change - Fires a custom 'change' event when the slider value changes
- *
- * @public
- */
-let Slider$1 = class Slider extends FormAssociatedSlider {
-    constructor() {
-        super(...arguments);
-        /**
-         * @internal
-         */
-        this.direction = direction.Direction.ltr;
-        /**
-         * @internal
-         */
-        this.isDragging = false;
-        /**
-         * @internal
-         */
-        this.trackWidth = 0;
-        /**
-         * @internal
-         */
-        this.trackMinWidth = 0;
-        /**
-         * @internal
-         */
-        this.trackHeight = 0;
-        /**
-         * @internal
-         */
-        this.trackLeft = 0;
-        /**
-         * @internal
-         */
-        this.trackMinHeight = 0;
-        /**
-         * Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
-         *
-         * @public
-         */
-        this.valueTextFormatter = () => null;
-        /**
-         * The minimum allowed value.
-         *
-         * @defaultValue - 0
-         * @public
-         * @remarks
-         * HTML Attribute: min
-         */
-        this.min = 0; // Map to proxy element.
-        /**
-         * The maximum allowed value.
-         *
-         * @defaultValue - 10
-         * @public
-         * @remarks
-         * HTML Attribute: max
-         */
-        this.max = 10; // Map to proxy element.
-        /**
-         * Value to increment or decrement via arrow keys, mouse click or drag.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: step
-         */
-        this.step = 1; // Map to proxy element.
-        /**
-         * The orientation of the slider.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: orientation
-         */
-        this.orientation = aria.Orientation.horizontal;
-        /**
-         * The selection mode.
-         *
-         * @public
-         * @remarks
-         * HTML Attribute: mode
-         */
-        this.mode = SliderMode.singleValue;
-        this.keypressHandler = (e) => {
-            if (this.readOnly) {
-                return;
-            }
-            if (e.key === keyCodes.keyHome) {
-                e.preventDefault();
-                this.value = `${this.min}`;
-            }
-            else if (e.key === keyCodes.keyEnd) {
-                e.preventDefault();
-                this.value = `${this.max}`;
-            }
-            else if (!e.shiftKey) {
-                switch (e.key) {
-                    case keyCodes.keyArrowRight:
-                    case keyCodes.keyArrowUp:
-                        e.preventDefault();
-                        this.increment();
-                        break;
-                    case keyCodes.keyArrowLeft:
-                    case keyCodes.keyArrowDown:
-                        e.preventDefault();
-                        this.decrement();
-                        break;
-                }
-            }
-        };
-        this.setupTrackConstraints = () => {
-            const clientRect = this.track.getBoundingClientRect();
-            this.trackWidth = this.track.clientWidth;
-            this.trackMinWidth = this.track.clientLeft;
-            this.trackHeight = clientRect.bottom;
-            this.trackMinHeight = clientRect.top;
-            this.trackLeft = this.getBoundingClientRect().left;
-            if (this.trackWidth === 0) {
-                this.trackWidth = 1;
-            }
-        };
-        this.setupListeners = (remove = false) => {
-            const eventAction = `${remove ? "remove" : "add"}EventListener`;
-            this[eventAction]("keydown", this.keypressHandler);
-            this[eventAction]("mousedown", this.handleMouseDown);
-            this.thumb[eventAction]("mousedown", this.handleThumbMouseDown, {
-                passive: true,
-            });
-            this.thumb[eventAction]("touchstart", this.handleThumbMouseDown, {
-                passive: true,
-            });
-            // removes handlers attached by mousedown handlers
-            if (remove) {
-                this.handleMouseDown(null);
-                this.handleThumbMouseDown(null);
-            }
-        };
-        /**
-         * @internal
-         */
-        this.initialValue = "";
-        /**
-         *  Handle mouse moves during a thumb drag operation
-         *  If the event handler is null it removes the events
-         */
-        this.handleThumbMouseDown = (event) => {
-            if (event) {
-                if (this.readOnly || this.disabled || event.defaultPrevented) {
-                    return;
-                }
-                event.target.focus();
-            }
-            const eventAction = `${event !== null ? "add" : "remove"}EventListener`;
-            window[eventAction]("mouseup", this.handleWindowMouseUp);
-            window[eventAction]("mousemove", this.handleMouseMove, { passive: true });
-            window[eventAction]("touchmove", this.handleMouseMove, { passive: true });
-            window[eventAction]("touchend", this.handleWindowMouseUp);
-            this.isDragging = event !== null;
-        };
-        /**
-         *  Handle mouse moves during a thumb drag operation
-         */
-        this.handleMouseMove = (e) => {
-            if (this.readOnly || this.disabled || e.defaultPrevented) {
-                return;
-            }
-            // update the value based on current position
-            const sourceEvent = window.TouchEvent && e instanceof TouchEvent
-                ? e.touches[0]
-                : e;
-            const eventValue = this.orientation === aria.Orientation.horizontal
-                ? sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft
-                : sourceEvent.pageY - document.documentElement.scrollTop;
-            this.value = `${this.calculateNewValue(eventValue)}`;
-        };
-        this.calculateNewValue = (rawValue) => {
-            // update the value based on current position
-            const newPosition = convertPixelToPercent(rawValue, this.orientation === aria.Orientation.horizontal
-                ? this.trackMinWidth
-                : this.trackMinHeight, this.orientation === aria.Orientation.horizontal
-                ? this.trackWidth
-                : this.trackHeight, this.direction);
-            const newValue = (this.max - this.min) * newPosition + this.min;
-            return this.convertToConstrainedValue(newValue);
-        };
-        /**
-         * Handle a window mouse up during a drag operation
-         */
-        this.handleWindowMouseUp = (event) => {
-            this.stopDragging();
-        };
-        this.stopDragging = () => {
-            this.isDragging = false;
-            this.handleMouseDown(null);
-            this.handleThumbMouseDown(null);
-        };
-        /**
-         *
-         * @param e - MouseEvent or null. If there is no event handler it will remove the events
-         */
-        this.handleMouseDown = (e) => {
-            const eventAction = `${e !== null ? "add" : "remove"}EventListener`;
-            if (e === null || (!this.disabled && !this.readOnly)) {
-                window[eventAction]("mouseup", this.handleWindowMouseUp);
-                window.document[eventAction]("mouseleave", this.handleWindowMouseUp);
-                window[eventAction]("mousemove", this.handleMouseMove);
-                if (e) {
-                    e.preventDefault();
-                    this.setupTrackConstraints();
-                    e.target.focus();
-                    const controlValue = this.orientation === aria.Orientation.horizontal
-                        ? e.pageX - document.documentElement.scrollLeft - this.trackLeft
-                        : e.pageY - document.documentElement.scrollTop;
-                    this.value = `${this.calculateNewValue(controlValue)}`;
-                }
-            }
-        };
-        this.convertToConstrainedValue = (value) => {
-            if (isNaN(value)) {
-                value = this.min;
-            }
-            /**
-             * The following logic intends to overcome the issue with math in JavaScript with regards to floating point numbers.
-             * This is needed as the `step` may be an integer but could also be a float. To accomplish this the step  is assumed to be a float
-             * and is converted to an integer by determining the number of decimal places it represent, multiplying it until it is an
-             * integer and then dividing it to get back to the correct number.
-             */
-            let constrainedValue = value - this.min;
-            const roundedConstrainedValue = Math.round(constrainedValue / this.step);
-            const remainderValue = constrainedValue -
-                (roundedConstrainedValue * (this.stepMultiplier * this.step)) /
-                    this.stepMultiplier;
-            constrainedValue =
-                remainderValue >= Number(this.step) / 2
-                    ? constrainedValue - remainderValue + Number(this.step)
-                    : constrainedValue - remainderValue;
-            return constrainedValue + this.min;
-        };
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
-    /**
-     * The value property, typed as a number.
-     *
-     * @public
-     */
-    get valueAsNumber() {
-        return parseFloat(super.value);
-    }
-    set valueAsNumber(next) {
-        this.value = next.toString();
-    }
-    /**
-     * @internal
-     */
-    valueChanged(previous, next) {
-        super.valueChanged(previous, next);
-        if (this.$fastController.isConnected) {
-            this.setThumbPositionForOrientation(this.direction);
-        }
-        this.$emit("change");
-    }
-    minChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.min = `${this.min}`;
-        }
-        this.validate();
-    }
-    maxChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.max = `${this.max}`;
-        }
-        this.validate();
-    }
-    stepChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.step = `${this.step}`;
-        }
-        this.updateStepMultiplier();
-        this.validate();
-    }
-    orientationChanged() {
-        if (this.$fastController.isConnected) {
-            this.setThumbPositionForOrientation(this.direction);
-        }
-    }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.proxy.setAttribute("type", "range");
-        this.direction = direction.getDirection(this);
-        this.updateStepMultiplier();
-        this.setupTrackConstraints();
-        this.setupListeners();
-        this.setupDefaultValue();
-        this.setThumbPositionForOrientation(this.direction);
-    }
-    /**
-     * @internal
-     */
-    disconnectedCallback() {
-        this.setupListeners(true);
-    }
-    /**
-     * Increment the value by the step
-     *
-     * @public
-     */
-    increment() {
-        const newVal = this.direction !== direction.Direction.rtl && this.orientation !== aria.Orientation.vertical
-            ? Number(this.value) + Number(this.step)
-            : Number(this.value) - Number(this.step);
-        const incrementedVal = this.convertToConstrainedValue(newVal);
-        const incrementedValString = incrementedVal < Number(this.max) ? `${incrementedVal}` : `${this.max}`;
-        this.value = incrementedValString;
-    }
-    /**
-     * Decrement the value by the step
-     *
-     * @public
-     */
-    decrement() {
-        const newVal = this.direction !== direction.Direction.rtl && this.orientation !== aria.Orientation.vertical
-            ? Number(this.value) - Number(this.step)
-            : Number(this.value) + Number(this.step);
-        const decrementedVal = this.convertToConstrainedValue(newVal);
-        const decrementedValString = decrementedVal > Number(this.min) ? `${decrementedVal}` : `${this.min}`;
-        this.value = decrementedValString;
-    }
-    /**
-     * Places the thumb based on the current value
-     *
-     * @public
-     * @param direction - writing mode
-     */
-    setThumbPositionForOrientation(direction) {
-        const newPct = convertPixelToPercent(Number(this.value), Number(this.min), Number(this.max), direction);
-        const percentage = (1 - newPct) * 100;
-        if (this.orientation === aria.Orientation.horizontal) {
-            this.position = this.isDragging
-                ? `right: ${percentage}%; transition: none;`
-                : `right: ${percentage}%; transition: all 0.2s ease;`;
-        }
-        else {
-            this.position = this.isDragging
-                ? `bottom: ${percentage}%; transition: none;`
-                : `bottom: ${percentage}%; transition: all 0.2s ease;`;
-        }
-    }
-    /**
-     * Update the step multiplier used to ensure rounding errors from steps that
-     * are not whole numbers
-     */
-    updateStepMultiplier() {
-        const stepString = this.step + "";
-        const decimalPlacesOfStep = !!(this.step % 1)
-            ? stepString.length - stepString.indexOf(".") - 1
-            : 0;
-        this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
-    }
-    get midpoint() {
-        return `${this.convertToConstrainedValue((this.max + this.min) / 2)}`;
-    }
-    setupDefaultValue() {
-        if (typeof this.value === "string") {
-            if (this.value.length === 0) {
-                this.initialValue = this.midpoint;
-            }
-            else {
-                const value = parseFloat(this.value);
-                if (!Number.isNaN(value) && (value < this.min || value > this.max)) {
-                    this.value = this.midpoint;
-                }
-            }
-        }
-    }
-};
-index.__decorate([
-    index.attr({ attribute: "readonly", mode: "boolean" })
-], Slider$1.prototype, "readOnly", void 0);
-index.__decorate([
-    index.observable
-], Slider$1.prototype, "direction", void 0);
-index.__decorate([
-    index.observable
-], Slider$1.prototype, "isDragging", void 0);
-index.__decorate([
-    index.observable
-], Slider$1.prototype, "position", void 0);
-index.__decorate([
-    index.observable
-], Slider$1.prototype, "trackWidth", void 0);
-index.__decorate([
-    index.observable
-], Slider$1.prototype, "trackMinWidth", void 0);
-index.__decorate([
-    index.observable
-], Slider$1.prototype, "trackHeight", void 0);
-index.__decorate([
-    index.observable
-], Slider$1.prototype, "trackLeft", void 0);
-index.__decorate([
-    index.observable
-], Slider$1.prototype, "trackMinHeight", void 0);
-index.__decorate([
-    index.observable
-], Slider$1.prototype, "valueTextFormatter", void 0);
-index.__decorate([
-    index.attr({ converter: index.nullableNumberConverter })
-], Slider$1.prototype, "min", void 0);
-index.__decorate([
-    index.attr({ converter: index.nullableNumberConverter })
-], Slider$1.prototype, "max", void 0);
-index.__decorate([
-    index.attr({ converter: index.nullableNumberConverter })
-], Slider$1.prototype, "step", void 0);
-index.__decorate([
-    index.attr
-], Slider$1.prototype, "orientation", void 0);
-index.__decorate([
-    index.attr
-], Slider$1.prototype, "mode", void 0);
-
-/**
- * This method keeps a given value within the bounds of a min and max value. If the value
- * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
- * the maximum will be returned. Otherwise, the value is returned un-changed.
- */
-/**
- * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
- * If value is greater than max, max will be returned.
- */
-function limit(min, max, value) {
-    return Math.min(Math.max(value, min), max);
-}
-
-const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;cursor:pointer;outline:none;user-select:none}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control .positioning-region{position:relative}.control .track{position:absolute;background:var(--_track-background-color);border-radius:4px}.control .track-start{position:absolute;left:0;background:var(--_track-start-background-color);block-size:100%;border-radius:inherit}.control[aria-orientation=horizontal]{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control[aria-orientation=horizontal] .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}.control[aria-orientation=horizontal] .track .mark{block-size:4px;inline-size:100%}.control[aria-orientation=vertical]{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control[aria-orientation=vertical] .positioning-region{block-size:100%}.control[aria-orientation=vertical] .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control[aria-orientation=vertical] .track .mark{block-size:100%;inline-size:4px}.control[aria-orientation=vertical] .track-start{top:0;block-size:auto;inline-size:100%}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.thumb-container{position:absolute;block-size:var(--_thumb-interaction-indicator-size);border-radius:50%;cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control[aria-orientation=horizontal] .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control[aria-orientation=vertical] .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);border-radius:inherit;content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);border-radius:inherit;content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}\n";
+const styles = ":host{display:flex}.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%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.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)}.base:where(.hover,: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:where(.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)}.base:where(.selected):where(.hover,: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:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -508,99 +21,136 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class Slider extends Slider$1 {
+class SelectableBox extends index.FoundationElement {
   constructor() {
     super(...arguments);
     this.ariaLabel = null;
-    this.ariaValuetext = null;
-    this.markers = false;
+    this.checked = false;
+    this.clickable = false;
+    this.clickableBox = false;
+    this.tight = false;
   }
   /**
-   * TO BE REMOVED WHEN UPGRADING TO FAST-FOUNDATION 3
-   * 
    * @internal
    */
-  valueChanged(previous, next) {
-    if (this.$fastController.isConnected) {
-      const nextAsNumber = parseFloat(next);
-      const value = limit(
-        this.min,
-        this.max,
-        this["convertToConstrainedValue"](nextAsNumber)
-      ).toString();
-      if (value !== next) {
-        this.value = value;
-        return;
-      }
-      super.valueChanged(previous, value);
-    }
+  _handleCheckedChange() {
+    if (this.controlType === "radio" && this.checked)
+      return;
+    this.checked = !this.checked;
+    if (this.clickableBox || this.clickable)
+      this.$emit("change");
+  }
+  /**
+   * @internal
+   */
+  _handleKeydown(event) {
+    if ((event.code === "Space" || event.code === "Enter") && (this.clickableBox || this.clickable))
+      return this._handleCheckedChange();
+    return true;
   }
 }
 __decorateClass([
   index.attr({ attribute: "aria-label" })
-], Slider.prototype, "ariaLabel", 2);
+], SelectableBox.prototype, "ariaLabel", 2);
 __decorateClass([
-  index.attr({ attribute: "aria-valuetext" })
-], Slider.prototype, "ariaValuetext", 2);
+  index.attr({ mode: "boolean" })
+], SelectableBox.prototype, "checked", 2);
 __decorateClass([
-  index.attr({
-    mode: "boolean"
-  })
-], Slider.prototype, "markers", 2);
+  index.attr({ mode: "boolean" })
+], SelectableBox.prototype, "clickable", 2);
+__decorateClass([
+  index.attr({ attribute: "clickable-box", mode: "boolean" })
+], SelectableBox.prototype, "clickableBox", 2);
 __decorateClass([
   index.attr
-], Slider.prototype, "connotation", 2);
+], SelectableBox.prototype, "connotation", 2);
+__decorateClass([
+  index.attr({ attribute: "control-type" })
+], SelectableBox.prototype, "controlType", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], SelectableBox.prototype, "tight", 2);
 
-const getClasses = ({ disabled, connotation }) => classNames.classNames(
-  "control",
-  ["disabled", Boolean(disabled)],
-  [`connotation-${connotation}`, Boolean(connotation)]
+const getClasses = ({
+  connotation,
+  tight,
+  checked,
+  clickableBox,
+  clickable
+}) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  ["tight", tight],
+  ["selected", checked],
+  ["clickable", clickableBox || clickable],
+  ["readonly", !clickableBox && !clickable]
 );
-const getMarkersTemplate = (isHorizontal, numMarkers) => {
-  const placeholder = isHorizontal ? ["right", "center", "", "100% repeat-x"] : ["bottom", "top", "100%", "repeat-y"];
-  return index.html`
-	<div class="mark" style="
-	background: linear-gradient(to ${placeholder[0]}, currentcolor 3px, transparent 0px)
-	0px ${placeholder[1]} / ${placeholder[2]} calc((100% - 3px) / ${numMarkers}) ${placeholder[3]}
-	"></div>`;
-};
-const SliderTemplate = () => {
-  return index.html`<template role="${(x) => x.ariaLabel ? "presentation" : null}">
-	<div
-		role="slider"
-		tabindex="${(x) => x.disabled ? null : 0}"
-		aria-label="${(x) => x.ariaLabel}"
-		aria-valuetext="${(x) => x.ariaValuetext || x.valueTextFormatter(x.value)}"
-		aria-valuenow="${(x) => x.value}"
-		aria-valuemin="${(x) => x.min}"
-		aria-valuemax="${(x) => x.max}"
-		aria-disabled="${(x) => x.disabled ? true : void 0}"
-		aria-orientation="${(x) => x.orientation}"
-		class="${getClasses} ${(x) => x.orientation}"
-	>
-		<div class="positioning-region">
-			<div ${ref.ref("track")} class="track">
-				<div class="track-start" style="${(x) => x.position}"></div>
-				${(x) => x.markers ? getMarkersTemplate(x.orientation === aria$1.Orientation.horizontal, Math.floor((x.max - x.min) / x.step)) : void 0}
-			</div>
-			<div ${ref.ref("thumb")} class="thumb-container" style="${(x) => x.position}">
-			</div>
+function handleControlChange(x) {
+  if (!x.clickableBox)
+    x._handleCheckedChange();
+}
+function checkbox(context) {
+  const checkboxTag = context.tagFor(definition.Checkbox);
+  return index.html`${when.when(
+    (x) => x.controlType !== "radio",
+    index.html`
+		<${checkboxTag}
+			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
+			@change="${(x) => handleControlChange(x)}"
+			class="control checkbox"
+			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			inert="${(x) => x.clickableBox || x.clickable ? true : null}"
+		></${checkboxTag}>`
+  )} `;
+}
+function radio(context) {
+  const radioTag = context.tagFor(radio$1.Radio);
+  return index.html`${when.when(
+    (x) => x.controlType === "radio",
+    index.html`
+		<${radioTag}
+			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
+			@change="${(x) => handleControlChange(x)}"
+			class="control radio"
+			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
+			:checked="${(x) => x.checked}"
+			inert="${(x) => x.clickableBox || x.clickable ? true : null}"
+		></${radioTag}>`
+  )} `;
+}
+const SelectableBoxTemplate = (context) => {
+  return index.html`<template role="presentation">
+		<div
+			class="${getClasses}"
+			tabindex="${(x) => x.clickableBox || x.clickable ? "0" : null}"
+			role="${(x) => x.clickableBox || x.clickable ? "button" : null}"
+			aria-pressed="${(x) => (x.clickableBox || x.clickable) && x.checked ? x.checked : null}"
+			aria-label="${(x) => x.clickableBox || x.clickable ? x.ariaLabel : null}"
+			@keydown="${(x, c) => x._handleKeydown(c.event)}"
+			@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
+		>
+			${checkbox(context)} ${radio(context)}
+			<slot></slot>
 		</div>
-	</div>`;
+	</template>`;
 };
 
-const sliderDefinition = Slider.compose({
-  baseName: "slider",
-  template: SliderTemplate,
+const selectableBoxDefinition = SelectableBox.compose({
+  baseName: "selectable-box",
+  template: SelectableBoxTemplate,
   styles,
   shadowOptions: {
     delegatesFocus: true
   }
 });
-const sliderRegistries = [sliderDefinition()];
-const registerSlider = index.registerFactory(sliderRegistries);
+const selectableBoxRegistries = [
+  selectableBoxDefinition(),
+  ...definition.checkboxRegistries,
+  ...definition$1.radioRegistries
+];
+const registerSelectableBox = index.registerFactory(selectableBoxRegistries);
 
-exports.Slider = Slider;
-exports.registerSlider = registerSlider;
-exports.sliderDefinition = sliderDefinition;
-exports.sliderRegistries = sliderRegistries;
+exports.registerSelectableBox = registerSelectableBox;
+exports.selectableBoxDefinition = selectableBoxDefinition;
+exports.selectableBoxRegistries = selectableBoxRegistries;