@vonage/vivid 3.0.0-next.119 → 3.0.0-next.120

package/calendar-event/index.js

@@ -1,109 +1,9 @@
-import { E as _export, i as descriptors, e as global$1, n as functionUncurryThis, y as hasOwnProperty_1, r as isCallable$1, o as objectDefineProperty, a8 as copyConstructorProperties$1, P as objectIsPrototypeOf, X as toString$1, h as html, d as designSystem, g as getPrefix } from '../shared/index.js';
-import { C as CalendarEvent } from '../shared/calendar-event.js';
+import { r as registerCalendarEvent } from '../shared/definition13.js';
+import '../shared/index.js';
+import '../shared/calendar-event.js';
 import '../shared/es.object.assign.js';
-import { w as when } from '../shared/when.js';
-import { c as classNames } from '../shared/class-names.js';
+import '../shared/to-string.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 14 Dec 2022 14:20:57 GMT\n */\n:host {\n  display: contents;\n}\n\n.base {\n  /* 4 as the indentation limit */\n  /* per cell divider */\n  /* per cell divider */\n  --vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);\n  position: absolute;\n  z-index: var(--vvd-calendar-event--overlap-count);\n  top: calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));\n  overflow: hidden;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  inline-size: calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));\n  margin-block-start: 2px;\n  margin-inline-end: 8px;\n  margin-inline-start: min(var(--vvd-calendar-event--indent), 32px);\n  max-block-size: calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px);\n}\n.base.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-neutral-800);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-cta-800);\n  --_connotation-color-soft: var(--vvd-color-cta-100);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-success-800);\n  --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-alert-800);\n  --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning-300);\n  --_connotation-color-primary-text: var(--vvd-color-canvas-text);\n  --_connotation-color-contrast: var(--vvd-color-warning-800);\n  --_connotation-color-soft: var(--vvd-color-warning-100);\n}\n.base.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-announcement-800);\n  --_connotation-color-soft: var(--vvd-color-announcement-100);\n}\n.base:not(.connotation-accent, .connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-announcement) {\n  --_connotation-color-primary: var(--vvd-color-information-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-contrast: var(--vvd-color-information-800);\n  --_connotation-color-soft: var(--vvd-color-information-100);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base.appearance-subtle {\n  --_appearance-color-text: var(--_connotation-color-contrast);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n@supports (contain: content) {\n  .base {\n    contain: strict;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n.base:focus {\n  z-index: 2000;\n  filter: var(--vvd-shadow-surface-8dp);\n  outline: none;\n}\n\nh2 {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed-bold);\n}\nh2 > strong {\n  font: inherit;\n}\n\np {\n  margin: 0;\n  font: var(--vvd-typography-base-condensed);\n}";
-
-var $ = _export;
-var DESCRIPTORS = descriptors;
-var global = global$1;
-var uncurryThis = functionUncurryThis;
-var hasOwn = hasOwnProperty_1;
-var isCallable = isCallable$1;
-var isPrototypeOf = objectIsPrototypeOf;
-var toString = toString$1;
-var defineProperty = objectDefineProperty.f;
-var copyConstructorProperties = copyConstructorProperties$1;
-
-var NativeSymbol = global.Symbol;
-var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
-
-if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototype) ||
-  // Safari 12 bug
-  NativeSymbol().description !== undefined
-)) {
-  var EmptyStringDescriptionStore = {};
-  // wrap Symbol constructor for correct work with undefined description
-  var SymbolWrapper = function Symbol() {
-    var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString(arguments[0]);
-    var result = isPrototypeOf(SymbolPrototype, this)
-      ? new NativeSymbol(description)
-      // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
-      : description === undefined ? NativeSymbol() : NativeSymbol(description);
-    if (description === '') EmptyStringDescriptionStore[result] = true;
-    return result;
-  };
-
-  copyConstructorProperties(SymbolWrapper, NativeSymbol);
-  SymbolWrapper.prototype = SymbolPrototype;
-  SymbolPrototype.constructor = SymbolWrapper;
-
-  var NATIVE_SYMBOL = String(NativeSymbol('test')) == 'Symbol(test)';
-  var thisSymbolValue = uncurryThis(SymbolPrototype.valueOf);
-  var symbolDescriptiveString = uncurryThis(SymbolPrototype.toString);
-  var regexp = /^Symbol\((.*)\)[^)]+$/;
-  var replace = uncurryThis(''.replace);
-  var stringSlice = uncurryThis(''.slice);
-
-  defineProperty(SymbolPrototype, 'description', {
-    configurable: true,
-    get: function description() {
-      var symbol = thisSymbolValue(this);
-      if (hasOwn(EmptyStringDescriptionStore, symbol)) return '';
-      var string = symbolDescriptiveString(symbol);
-      var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace(string, regexp, '$1');
-      return desc === '' ? undefined : desc;
-    }
-  });
-
-  $({ global: true, constructor: true, forced: true }, {
-    Symbol: SymbolWrapper
-  });
-}
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3;
-const getClasses = ({
-  connotation,
-  appearance
-}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)]);
-const getStyles = ({
-  start,
-  duration,
-  overlapCount
-}) => {
-  const stylesObj = Object.assign(Object.assign(Object.assign({}, overlapCount && {
-    '--vvd-calendar-event--overlap-count': overlapCount
-  }), start && {
-    '--vvd-calendar-event--start': start
-  }), duration && {
-    '--vvd-calendar-event--duration': duration
-  });
-  return Object.entries(stylesObj).map(entry => entry.join(':')).join(';');
-};
-const CalendarEventTemplate = () => html(_t || (_t = _`
-<div
-  style="${0}"
-  class="${0}"
-  role="button"
-  tabindex="0"
->
-  ${0}
-  ${0}
-</div>`), getStyles, getClasses, when(x => x.heading, html(_t2 || (_t2 = _`<h2><strong>${0}</strong></h2>`), x => x.heading)), when(x => x.description, html(_t3 || (_t3 = _`<p>${0}</p>`), x => x.description)));
-
-const vividCalendarEvent = CalendarEvent.compose({
-  baseName: 'calendar-event',
-  template: CalendarEventTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
-designSystem.withPrefix(getPrefix(import.meta.url)).register(vividCalendarEvent());
-
-export { vividCalendarEvent };
+registerCalendarEvent();

package/card/index.js

@@ -1,120 +1,13 @@
-import '../shared/es.promise.resolve.js';
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, V as observable, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
-import { l as loadComponentsModules } from '../shared/index2.js';
-import { I as Icon } from '../shared/icon.js';
-import { E as Elevation } from '../shared/elevation.js';
-import { s as slotted } from '../shared/slotted.js';
-import { w as when } from '../shared/when.js';
-import { c as classNames } from '../shared/class-names.js';
+import { r as registerCard } from '../shared/definition14.js';
+import '../shared/index.js';
+import '../shared/definition3.js';
+import '../shared/icon.js';
+import '../shared/to-string.js';
 import '../shared/string-trim.js';
 import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+import '../shared/definition15.js';
+import '../shared/slotted.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 14 Dec 2022 14:20:57 GMT\n */\n:host {\n  display: flex;\n}\n\n.base {\n  border-radius: 6px;\n  inline-size: 100%;\n  text-align: start;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-canvas-text);\n}\n\n.main-content {\n  display: flex;\n  flex-flow: column;\n  padding: 24px;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 8px;\n}\n.header-content {\n  flex: 1;\n}\n.header-wrapper {\n  display: flex;\n  gap: 8px;\n}\n.header-headline, .header-subtitle {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-headline {\n  font: var(--vvd-typography-heading-4);\n  -webkit-line-clamp: var(--headline-line-clamp);\n}\n.header-subtitle {\n  font: var(--vvd-typography-base);\n  -webkit-line-clamp: var(--subtitle-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subtitle,\n.text {\n  color: var(--vvd-color-neutral-600);\n  font: var(--vvd-typography-base);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 24px;\n  margin-top: auto;\n  padding-inline: 24px;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -8px;\n  margin-inline-end: -8px;\n  margin-inline-start: auto;\n}";
-
-class Card extends FoundationElement {}
-__decorate([attr, __metadata("design:type", String)], Card.prototype, "headline", void 0);
-__decorate([attr, __metadata("design:type", String)], Card.prototype, "subtitle", void 0);
-__decorate([attr, __metadata("design:type", String)], Card.prototype, "text", void 0);
-__decorate([attr, __metadata("design:type", String)], Card.prototype, "icon", void 0);
-__decorate([attr, __metadata("design:type", Number)], Card.prototype, "elevation", void 0);
-__decorate([observable, __metadata("design:type", Array)], Card.prototype, "footerSlottedContent", void 0);
-__decorate([observable, __metadata("design:type", Array)], Card.prototype, "graphicSlottedContent", void 0);
-__decorate([observable, __metadata("design:type", Array)], Card.prototype, "hasMetaSlottedContent", void 0);
-
-let _2 = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8;
-const getClasses = _ => classNames('base', ['hide-footer', !_.footerSlottedContent || !_.footerSlottedContent.length], ['hide-header', shouldHideHeader(_)]);
-function renderHeaderIcon(iconTag) {
-  return html(_t || (_t = _2`
-	  <${0} class="icon" inline name="${0}"></${0}>`), iconTag, x => x.icon, iconTag);
-}
-function Headline() {
-  return html(_t2 || (_t2 = _2`
-		<div class="header-headline">${0}</div>
-	`), x => x.headline);
-}
-function Subtitle() {
-  return html(_t3 || (_t3 = _2`
-		<div class="header-subtitle">${0}</div>
-	`), x => x.subtitle);
-}
-function headerContent() {
-  return html(_t4 || (_t4 = _2`
-		<div class="header-content">
-			${0}
-			${0}
-		</div>
-	`), when(x => x.headline, Headline()), when(x => x.subtitle, Subtitle()));
-}
-function renderHeader(iconTag) {
-  return html(_t5 || (_t5 = _2`
-		<header class="header">
-			<slot name="graphic" ${0}>${0}</slot>
-			${0}
-		</header>`), slotted('graphicSlottedContent'), when(x => x.icon, renderHeaderIcon(iconTag)), when(x => x.headline || x.subtitle, headerContent()));
-}
-function shouldHideHeader(card) {
-  return !card.headline && !card.subtitle && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
-}
-function renderMetaSlot() {
-  return html(_t6 || (_t6 = _2`
-		<slot name="meta" ${0}></slot>
-	`), slotted('metaSlottedContent'));
-}
-function text() {
-  return html(_t7 || (_t7 = _2`
-		<div class="text">${0}</div>
-	`), x => x.text);
-}
-const CardTemplate = context => {
-  const elevationTag = context.tagFor(Elevation);
-  const iconTag = context.tagFor(Icon);
-  return html(_t8 || (_t8 = _2`
-	<${0} dp=${0}>
-
-		<div class="${0}">
-			<div class="wrapper">
-				<div class="vwc-card-media">
-					<slot name="media"></slot>
-				</div>
-				<slot name="main">
-					<div class="main-content">
-						<div class="header-wrapper">
-							${0}
-							${0}
-						</div>
-						${0}
-					</div>
-				</slot>
-				<div class="footer">
-					<slot name="footer" ${0}></slot>
-				</div>
-			</div>
-		</div>
-
-	</${0}>
-`), elevationTag, x => {
-    var _a;
-    return (_a = x.elevation) !== null && _a !== void 0 ? _a : '4';
-  }, getClasses, renderHeader(iconTag), renderMetaSlot(), when(x => x.text, text()), slotted('footerSlottedContent'), elevationTag);
-};
-
-const prefix = getPrefix(import.meta.url);
-const vividCard = Card.compose({
-  baseName: 'card',
-  template: CardTemplate,
-  styles: css_248z
-});
-(async () => {
-  await loadComponentsModules(['icon', 'elevation'], prefix);
-  designSystem.withPrefix(prefix).register(vividCard());
-})();
-
-export { vividCard };
+registerCard();

package/checkbox/index.js

@@ -1,178 +1,16 @@
-import '../shared/es.promise.resolve.js';
-import { F as FoundationElement, _ as __decorate, a as attr, V as observable, b as __metadata, h as html, g as getPrefix, d as designSystem } from '../shared/index.js';
-import { l as loadComponentsModules } from '../shared/index2.js';
-import { C as CheckableFormAssociated } from '../shared/form-associated.js';
-import { a as keySpace$1 } from '../shared/key-codes.js';
-import { f as focusTemplateFactory } from '../shared/focus.js';
-import { I as Icon } from '../shared/icon.js';
-import { w as when } from '../shared/when.js';
-import { c as classNames } from '../shared/class-names.js';
-import '../shared/focus2.js';
+import { r as registerCheckbox } from '../shared/definition16.js';
+import '../shared/index.js';
+import '../shared/definition3.js';
+import '../shared/icon.js';
+import '../shared/to-string.js';
 import '../shared/string-trim.js';
 import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+import '../shared/definition4.js';
+import '../shared/focus.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
+import '../shared/focus2.js';
 
-class _Checkbox extends FoundationElement {
-}
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Checkbox:class)} component.
- *
- * @internal
- */
-class FormAssociatedCheckbox extends CheckableFormAssociated(_Checkbox) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
-    }
-}
-
-/**
- * A Checkbox Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
- *
- * @slot checked-indicator - The checked indicator
- * @slot indeterminate-indicator - The indeterminate indicator
- * @slot - The default slot for the label
- * @csspart control - The element representing the visual checkbox control
- * @csspart label - The label
- * @fires change - Emits a custom change event when the checked state changes
- *
- * @public
- */
-class Checkbox$1 extends FormAssociatedCheckbox {
-    constructor() {
-        super();
-        /**
-         * The element's value to be included in form submission when checked.
-         * Default to "on" to reach parity with input[type="checkbox"]
-         *
-         * @internal
-         */
-        this.initialValue = "on";
-        /**
-         * The indeterminate state of the control
-         */
-        this.indeterminate = false;
-        /**
-         * @internal
-         */
-        this.keypressHandler = (e) => {
-            if (this.readOnly) {
-                return;
-            }
-            switch (e.key) {
-                case keySpace$1:
-                    if (this.indeterminate) {
-                        this.indeterminate = false;
-                    }
-                    this.checked = !this.checked;
-                    break;
-            }
-        };
-        /**
-         * @internal
-         */
-        this.clickHandler = (e) => {
-            if (!this.disabled && !this.readOnly) {
-                if (this.indeterminate) {
-                    this.indeterminate = false;
-                }
-                this.checked = !this.checked;
-            }
-        };
-        this.proxy.setAttribute("type", "checkbox");
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
-}
-__decorate([
-    attr({ attribute: "readonly", mode: "boolean" })
-], Checkbox$1.prototype, "readOnly", void 0);
-__decorate([
-    observable
-], Checkbox$1.prototype, "defaultSlottedNodes", void 0);
-__decorate([
-    observable
-], Checkbox$1.prototype, "indeterminate", void 0);
-
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 14 Dec 2022 14:20:57 GMT\n */\n.base {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  vertical-align: middle;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n  --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n  --_connotation-color-backdrop: var(--vvd-color-canvas);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:checked, .checked):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-neutral-800);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-500);\n}\n@supports selector(:focus-visible) {\n  .base:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n}\n\n.control {\n  position: relative;\n  display: flex;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n}\n\n.indicator {\n  font-size: 16px;\n}\n.base:not(.checked) .indicator.checkmark {\n  display: none;\n}\n\n.base:not(.indeterminate) .indicator.minus, .base.checked .indicator.minus {\n  display: none;\n}\n\nlabel {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.base:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
-
-const keySpace = ' ';
-class Checkbox extends Checkbox$1 {
-  constructor() {
-    super(...arguments);
-    this.keypressHandler = e => {
-      switch (e.key) {
-        case keySpace:
-          if (this.indeterminate) {
-            this.indeterminate = false;
-          }
-          this.checked = !this.checked;
-          break;
-      }
-    };
-    this.clickHandler = () => {
-      if (!this.disabled && !this.readOnly) {
-        if (this.indeterminate) {
-          this.indeterminate = false;
-        }
-        this.checked = !this.checked;
-      }
-    };
-  }
-}
-__decorate([attr, __metadata("design:type", String)], Checkbox.prototype, "label", void 0);
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
-const getClasses = ({
-  readOnly,
-  checked,
-  disabled,
-  indeterminate
-}) => classNames('base', ['readonly', Boolean(readOnly)], ['checked', Boolean(checked) || Boolean(indeterminate)], ['disabled', Boolean(disabled)]);
-const CheckboxTemplate = context => {
-  const focusTemplate = focusTemplateFactory(context);
-  const iconTag = context.tagFor(Icon);
-  return html(_t || (_t = _`<span
-  role="checkbox"
-  aria-checked="${0}"
-  aria-required="${0}"
-  aria-disabled="${0}"
-  aria-readonly="${0}"
-  tabindex="${0}"
-  @keypress="${0}"
-  @click="${0}"
-  class="${0}"
-  >
-    <div class="control">
-			${0}
-			${0}
-      ${0}
-    </div>
-
-    ${0}
-
-  </span>`), x => x.checked, x => x.required, x => x.disabled, x => x.readOnly, x => x.disabled ? null : 0, (x, c) => x.keypressHandler(c.event), x => x.clickHandler(), getClasses, when(x => x.checked, html(_t2 || (_t2 = _`<${0} name="check-solid"></${0}>`), iconTag, iconTag)), when(x => x.indeterminate, html(_t3 || (_t3 = _`<${0} name="minus-solid"></${0}>`), iconTag, iconTag)), () => focusTemplate, when(x => x.label, html(_t4 || (_t4 = _`<label>${0}</label>`), x => x.label)));
-};
-
-const prefix = getPrefix(import.meta.url);
-const vividCheckbox = Checkbox.compose({
-  baseName: 'checkbox',
-  template: CheckboxTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
-(async () => {
-  await loadComponentsModules(['icon', 'focus'], prefix);
-  designSystem.withPrefix(prefix).register(vividCheckbox());
-})();
-
-export { vividCheckbox };
+registerCheckbox();