@vonage/vivid 2.36.3 → 3.0.0-next.100

package/fab/index.js

@@ -0,0 +1,100 @@
+import '../icon/index.js';
+import '../focus/index.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
+import { B as Button } from '../shared/button.js';
+import { a as applyMixins } from '../shared/apply-mixins.js';
+import { f as focusTemplateFactory } from '../shared/focus2.js';
+import { r as ref } from '../shared/ref.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/string-trim.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/focus.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-keys.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
+import '../shared/aria-global.js';
+import '../shared/start-end.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 15 Nov 2022 13:39:19 GMT\n */\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background: var(--_appearance-color-fill, var(--_elevation-fill));\n  block-size: var(--_fab-block-size);\n  border-radius: var(--_fab-border-radius);\n  color: var(--_appearance-color-text, var(--vvd-color-canvas-text));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  font: var(--vvd-typography-base-bold);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\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-contrast: var(--vvd-color-neutral-800);\n  --_connotation-color-fierce: var(--vvd-color-neutral-700);\n  --_connotation-color-firm: var(--vvd-color-canvas-text);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-600);\n  --_connotation-color-contrast: var(--vvd-color-cta-800);\n  --_connotation-color-fierce: var(--vvd-color-cta-700);\n  --_connotation-color-firm: var(--vvd-color-cta-600);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\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.control: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: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control.size-Expanded {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) + 16));\n}\n.control:not(.size-expanded) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):hover {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n.size-expanded .icon {\n  font-size: 24px;\n}\n.icon:not(.size-expanded) .icon {\n  font-size: 20px;\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+
+class Fab extends Button {}
+__decorate([attr, __metadata("design:type", String)], Fab.prototype, "connotation", void 0);
+__decorate([attr, __metadata("design:type", String)], Fab.prototype, "size", void 0);
+__decorate([attr, __metadata("design:type", String)], Fab.prototype, "label", void 0);
+applyMixins(Fab, AffixIconWithTrailing);
+
+let _ = t => t,
+  _t;
+const getClasses = ({
+  connotation,
+  size,
+  icon,
+  label,
+  iconTrailing,
+  disabled
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, Boolean(size)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing], ['disabled', disabled]);
+const FabTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`
+        <button
+            class="${0} "
+            ?autofocus="${0}"
+            ?disabled="${0}"
+            form="${0}"
+            formaction="${0}"
+            formenctype="${0}"
+            formmethod="${0}"
+            formnovalidate="${0}"
+            formtarget="${0}"
+            name="${0}"
+            type="${0}"
+            value="${0}"
+            aria-atomic="${0}"
+            aria-busy="${0}"
+            aria-controls="${0}"
+            aria-current="${0}"
+            aria-describedby="${0}"
+            aria-details="${0}"
+            aria-disabled="${0}"
+            aria-errormessage="${0}"
+            aria-expanded="${0}"
+            aria-flowto="${0}"
+            aria-haspopup="${0}"
+            aria-hidden="${0}"
+            aria-invalid="${0}"
+            aria-keyshortcuts="${0}"
+            aria-label="${0}"
+            aria-labelledby="${0}"
+            aria-live="${0}"
+            aria-owns="${0}"
+            aria-pressed="${0}"
+            aria-relevant="${0}"
+            aria-roledescription="${0}"
+            ${0}
+        >
+            ${0}
+            ${0}
+            ${0}
+        </button>
+`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, x => affixIconTemplate(x.icon), x => x.label);
+};
+
+const vividFab = Fab.compose({
+  baseName: 'fab',
+  template: FabTemplate,
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+designSystem.register(vividFab());
+
+export { vividFab };

package/focus/index.js

@@ -0,0 +1,18 @@
+import { h as html, d as designSystem } from '../shared/index.js';
+import { F as Focus } from '../shared/focus.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 15 Nov 2022 13:39:19 GMT\n */\n:host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: var(--focus-inset, 0);\n  outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n  outline-offset: -2px;\n}";
+
+let _ = t => t,
+  _t;
+const focusTemplate = () => html(_t || (_t = _`
+        <span class="control"></span>`));
+
+const vividFocus = Focus.compose({
+  baseName: 'focus',
+  template: focusTemplate,
+  styles: css_248z
+});
+designSystem.register(vividFocus());
+
+export { vividFocus };

package/header/index.js

@@ -0,0 +1,61 @@
+import { E as Elevation } from '../shared/index3.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import '../shared/web.dom-collections.iterator.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/export.js';
+import '../shared/object-keys.js';
+import '../shared/iterators.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 15 Nov 2022 13:39:19 GMT\n */\n.base {\n  z-index: 1;\n  block-size: calc(calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1))) + calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 16)));\n  font: var(--vvd-typography-heading-4);\n  inline-size: 100%;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  block-size: inherit;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n  --vvd-header-block-size: calc(calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1))) + calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 16)));\n}";
+
+class Header extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.elevationShadow = false;
+    this.alternate = false;
+  }
+}
+__decorate([attr({
+  attribute: 'elevation-shadow',
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Header.prototype, "elevationShadow", void 0);
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Header.prototype, "alternate", void 0);
+
+let _ = t => t,
+  _t;
+const getPartAlternate = ({
+  alternate
+}) => classNames(['vvd-theme-alternate', Boolean(alternate)]);
+const headerTemplate = context => {
+  const elevationTag = context.tagFor(Elevation);
+  return html(_t || (_t = _`
+    <${0} dp="4" ?no-shadow=${0}>
+      <header class="base" part="base">
+        <!-- a container is needed to distinguish the surface background color of the
+        element from its shadow when applying elevation with alternate -->
+        <div class="container" part="${0}">
+          <section class="header-content">
+            <slot></slot>
+          </section>
+          <section class="header-content">
+            <slot name="action-items"></slot>
+          </section>
+        </div>
+      </header>
+    </${0}>
+    <div class="app-content">
+      <slot name="app-content"></slot>
+    </div>
+	`), elevationTag, x => !x.elevationShadow, getPartAlternate, elevationTag);
+};
+
+const vividHeader = Header.compose({
+  baseName: 'header',
+  template: headerTemplate,
+  styles: css_248z
+});
+designSystem.register(vividHeader());
+
+export { vividHeader };

package/icon/index.js

@@ -0,0 +1,36 @@
+import { h as html, d as designSystem } from '../shared/index.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/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/string-trim.js';
+import '../shared/_has.js';
+
+var css_248z = ":host {\n  display: inline-block;\n  vertical-align: sub;\n}\n\n.control {\n  display: flex;\n  margin: unset;\n  block-size: var(--_icon-block-size);\n  color: currentColor;\n  contain: strict;\n  inline-size: var(--_icon-block-size);\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.control.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement-500);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.control.connotation-information {\n  --_connotation-color-primary: var(--vvd-color-information-500);\n}\n\n.control[class*=connotation] {\n  color: var(--_connotation-color-primary);\n}\n\nsvg {\n  margin: auto;\n  block-size: inherit;\n  inline-size: inherit;\n}\n\n/* Size */\n.control:not(.size-condensed):not(.size-normal):not(.size-expanded) {\n  --_icon-block-size: 1em;\n}\n\n.control.size-condensed {\n  --_icon-block-size: calc(calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1))) - calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 16)));\n}\n\n.control.size-normal {\n  --_icon-block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 16));\n}\n\n.control.size-expanded {\n  --_icon-block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 8));\n}";
+
+let _ = t => t,
+  _t,
+  _t2;
+const getClasses = ({
+  connotation,
+  size
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, Boolean(size)]);
+const iconTemplate = () => html(_t || (_t = _`
+  <figure class="${0}">
+		${0}
+  </figure>
+	`), getClasses, when(x => isValidString(x.svg), x => html(_t2 || (_t2 = _`${0}`), x.svg)));
+function isValidString(value) {
+  return typeof value === 'string' && value.length > 0;
+}
+
+const vividIcon = Icon.compose({
+  baseName: 'icon',
+  template: iconTemplate,
+  styles: css_248z
+});
+designSystem.register(vividIcon());
+
+export { vividIcon };

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/components';
+export * from './shared/design-system';

package/index.js

@@ -1,64 +1,76 @@
-export { VWCIconButtonToggle as VWCIconButtonToggle } from "@vonage/vwc-icon-button-toggle";
-export { VWCNotchedOutline as VWCNotchedOutline } from "@vonage/vwc-notched-outline";
-export { VWCSchemeSelect as VWCSchemeSelect } from "@vonage/vwc-scheme-select";
-export { VWCTopAppBarFixed as VWCTopAppBarFixed } from "@vonage/vwc-top-app-bar-fixed";
-export { VWCAudio as VWCAudio } from "@vonage/vwc-audio";
-export { VWCButtonToggleGroup as VWCButtonToggleGroup } from "@vonage/vwc-button-toggle-group";
-export { VWCCard as VWCCard } from "@vonage/vwc-card";
-export { VWCCheckbox as VWCCheckbox } from "@vonage/vwc-checkbox";
-export { VWCCircularProgress as VWCCircularProgress } from "@vonage/vwc-circular-progress";
-export { VWCDatepicker as VWCDatepicker } from "@vonage/vwc-datepicker";
-export { VWCDialog as VWCDialog } from "@vonage/vwc-dialog";
-export { VWCFab as VWCFab } from "@vonage/vwc-fab";
-export { VWCFilePicker as VWCFilePicker } from "@vonage/vwc-file-picker";
-export { VWCFormfield as VWCFormfield } from "@vonage/vwc-formfield";
-export { VWCHelperMessage as VWCHelperMessage } from "@vonage/vwc-helper-message";
-export { VWCIconButton as VWCIconButton } from "@vonage/vwc-icon-button";
-export { VWCIcon as VWCIcon } from "@vonage/vwc-icon";
-export { VWCKeypad as VWCKeypad } from "@vonage/vwc-keypad";
-export { Layout as VWCLayout } from "@vonage/vwc-layout";
-export { VWCLinearProgress as VWCLinearProgress } from "@vonage/vwc-linear-progress";
-export { VWCMenu as VWCMenu } from "@vonage/vwc-menu";
-export { VWCNote as VWCNote } from "@vonage/vwc-note";
-export { VWCPagination as VWCPagination } from "@vonage/vwc-pagination";
-export { VWCRadio as VWCRadio } from "@vonage/vwc-radio";
-export { VWCSlider as VWCSlider } from "@vonage/vwc-slider";
-export { VWCSnackbar as VWCSnackbar } from "@vonage/vwc-snackbar";
-export { VWCDropdown as VWCDropdown } from "@vonage/vwc-dropdown";
-export { VWCSurface as VWCSurface } from "@vonage/vwc-surface";
-export { VWCSwitch as VWCSwitch } from "@vonage/vwc-switch";
-export { VWCElevation as VWCElevation } from "@vonage/vwc-elevation";
-export { VWCTextArea as VWCTextarea } from "@vonage/vwc-textarea";
-export { VWCThemeSwitch as VWCThemeSwitch } from "@vonage/vwc-theme-switch";
-export { VWCTopAppBar as VWCTopAppBar } from "@vonage/vwc-top-app-bar";
-export { VWCAccordion as VWCAccordion } from "@vonage/vwc-accordion";
-export { VWCActionGroup as VWCActionGroup } from "@vonage/vwc-action-group";
-export { VWCBadge as VWCBadge } from "@vonage/vwc-badge";
-export { VWCDrawer as VWCDrawer } from "@vonage/vwc-drawer";
-export { VWCPopup as VWCPopup } from "@vonage/vwc-popup";
-export { VWCSelect as VWCSelect } from "@vonage/vwc-select";
-export { VWCSideDrawer as VWCSideDrawer } from "@vonage/vwc-side-drawer";
-export { VWCTag as VWCTag } from "@vonage/vwc-tags/vwc-tag";
-export { VWCEmptyState as VWCEmptyState } from "@vonage/vwc-empty-state";
-export { VWCText as VWCText } from "@vonage/vwc-text";
-export { VwcTooltip as VWCTooltip } from "@vonage/vwc-tooltip";
-export { VWCBanner as VWCBanner } from "@vonage/vwc-banner";
-export { VWCButton as VWCButton } from "@vonage/vwc-button";
-export { VWCExpansionPanel as VWCExpansionPanel } from "@vonage/vwc-expansion-panel";
-export { VwcMediaController as VWCMediaController } from "@vonage/vwc-media-controller";
-export { VWCScrubBar as VWCScrubBar } from "@vonage/vwc-media-controller/vwc-scrub-bar";
-export { VWCCarouselItem as VWCCarouselItem } from "@vonage/vwc-carousel/vwc-carousel-item";
-export { VWCCarousel as VWCCarousel } from "@vonage/vwc-carousel";
-export { VWCTabBar as VWCTabBar } from "@vonage/vwc-tab-bar";
-export { VWCTab as VWCTab } from "@vonage/vwc-tab-bar/vwc-tab";
-export { GRID_COMPONENT as VWCDataGrid } from "@vonage/vwc-data-grid";
-export { VWCTextField as VWCTextfield } from "@vonage/vwc-textfield";
-export { VWCCalendarEvent as VWCCalendarEvent } from "@vonage/vwc-calendar/vwc-calendar-event";
-export { VWCCalendar as VWCCalendar } from "@vonage/vwc-calendar";
-export { VWCCheckListItem as VWCCheckListItem } from "@vonage/vwc-list/vwc-check-list-item";
-export { VWCListExpansionPanel as VWCListExpansionPanel } from "@vonage/vwc-list/vwc-list-expansion-panel";
-export { VWCListItem as VWCListItem } from "@vonage/vwc-list/vwc-list-item";
-export { VWCList as VWCList } from "@vonage/vwc-list";
-export { VWCRadioListItem as VWCRadioListItem } from "@vonage/vwc-list/vwc-radio-list-item";
-export { default as VVDCore } from "@vonage/vvd-core";
-export { default as VVDContext } from "@vonage/vvd-context";
+export { vividAccordion } from './accordion/index.js';
+export { vividAccordionItem } from './accordion-item/index.js';
+export { vividActionGroup } from './action-group/index.js';
+export { vividAvatar } from './avatar/index.js';
+export { vividBadge } from './badge/index.js';
+export { vividBanner } from './banner/index.js';
+export { vividBreadcrumb } from './breadcrumb/index.js';
+export { vividBreadcrumbItem } from './breadcrumb-item/index.js';
+export { v as vividButton } from './shared/index2.js';
+export { vividCalendar } from './calendar/index.js';
+export { vividCalendarEvent } from './calendar-event/index.js';
+export { vividCard } from './card/index.js';
+export { vividCheckbox } from './checkbox/index.js';
+export { v as vividElevation } from './shared/index3.js';
+export { vividDialog } from './dialog/index.js';
+export { v as vividDivider } from './shared/index4.js';
+export { vividFab } from './fab/index.js';
+export { vividIcon } from './icon/index.js';
+export { vividLayout } from './layout/index.js';
+export { vividListbox } from './listbox/index.js';
+export { v as vividListboxOption } from './shared/index5.js';
+export { vividMenu } from './menu/index.js';
+export { v as vividMenuItem } from './shared/index7.js';
+export { vividNav } from './nav/index.js';
+export { vividNavDisclosure } from './nav-disclosure/index.js';
+export { vividNavItem } from './nav-item/index.js';
+export { vividNote } from './note/index.js';
+export { v as vividPopup } from './shared/index6.js';
+export { vividProgress } from './progress/index.js';
+export { vividProgressRing } from './progress-ring/index.js';
+export { vividRadio } from './radio/index.js';
+export { vividRadioGroup } from './radio-group/index.js';
+export { vividSideDrawer } from './side-drawer/index.js';
+export { vividSlider } from './slider/index.js';
+export { vividSwitch } from './switch/index.js';
+export { vividTextfield } from './text-field/index.js';
+export { vividTextArea } from './text-area/index.js';
+export { vividTooltip } from './tooltip/index.js';
+export { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
+import './shared/class-names.js';
+import './focus/index.js';
+import './shared/focus.js';
+import './shared/web.dom-collections.iterator.js';
+import './shared/export.js';
+import './shared/object-keys.js';
+import './shared/iterators.js';
+import './shared/affix.js';
+import './shared/icon.js';
+import './shared/to-string.js';
+import './shared/string-trim.js';
+import './shared/_has.js';
+import './shared/apply-mixins.js';
+import './shared/focus2.js';
+import './shared/when.js';
+import './shared/enums.js';
+import './shared/button.js';
+import './shared/form-associated.js';
+import './shared/key-codes.js';
+import './shared/aria-global.js';
+import './shared/start-end.js';
+import './shared/ref.js';
+import './shared/slotted.js';
+import './shared/breadcrumb-item.js';
+import './shared/anchor.js';
+import './shared/text-anchor.template.js';
+import './shared/calendar-event.js';
+import './shared/es.object.assign.js';
+import './shared/aria.js';
+import './shared/numbers.js';
+import './shared/dom.js';
+import './shared/direction.js';
+import './shared/text-anchor.js';
+import './shared/base-progress.js';
+import './shared/radio.js';
+import './shared/es.regexp.to-string.js';
+import './shared/form-elements.js';

package/layout/index.js

@@ -0,0 +1,43 @@
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { c as classNames } from '../shared/class-names.js';
+
+var AUTO_SIZING;
+(function (AUTO_SIZING) {
+  AUTO_SIZING["Fit"] = "fit";
+  AUTO_SIZING["Fill"] = "fill";
+})(AUTO_SIZING || (AUTO_SIZING = {}));
+class Layout extends FoundationElement {}
+__decorate([attr, __metadata("design:type", String)], Layout.prototype, "gutters", void 0);
+__decorate([attr({
+  attribute: 'column-basis'
+}), __metadata("design:type", String)], Layout.prototype, "columnBasis", void 0);
+__decorate([attr({
+  attribute: 'column-spacing'
+}), __metadata("design:type", String)], Layout.prototype, "columnSpacing", void 0);
+__decorate([attr({
+  attribute: 'auto-sizing'
+}), __metadata("design:type", String)], Layout.prototype, "autoSizing", void 0);
+
+var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: min-content;\n}\n.control.column-basis-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n  gap: 16px;\n}\n.control.column-spacing-small-inline {\n  gap: 0 16px;\n}\n.control.column-spacing-small-block {\n  gap: 16px 0;\n}\n.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block), .control.column-spacing-medium {\n  gap: 24px;\n}\n.control.column-spacing-medium-inline {\n  gap: 0 24px;\n}\n.control.column-spacing-medium-block {\n  gap: 24px 0;\n}\n.control.column-spacing-large {\n  gap: 32px;\n}\n.control.column-spacing-large-inline {\n  gap: 0 32px;\n}\n.control.column-spacing-large-block {\n  gap: 32px 0;\n}\n.control.gutters-small {\n  margin: 16px;\n}\n.control.gutters-small-inline {\n  margin: 0 16px;\n}\n.control.gutters-small-block {\n  margin: 16px 0;\n}\n.control.gutters-medium {\n  margin: 24px;\n}\n.control.gutters-medium-inline {\n  margin: 0 24px;\n}\n.control.gutters-medium-block {\n  margin: 24px 0;\n}\n.control.gutters-large {\n  margin: 32px;\n}\n.control.gutters-large-inline {\n  margin: 0 32px;\n}\n.control.gutters-large-block {\n  margin: 32px 0;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
+
+let _ = t => t,
+  _t;
+const getClasses = ({
+  columnBasis,
+  gutters,
+  columnSpacing,
+  autoSizing
+}) => classNames('control', [`column-basis-${columnBasis}`, Boolean(columnBasis)], [`gutters-${gutters}`, Boolean(gutters)], [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)], [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]);
+const layoutTemplate = () => html(_t || (_t = _`
+        <div class="${0}">
+			<slot></slot>
+		</div>`), getClasses);
+
+const vividLayout = Layout.compose({
+  baseName: 'layout',
+  template: layoutTemplate,
+  styles: css_248z
+});
+designSystem.register(vividLayout());
+
+export { vividLayout };

package/lib/accordion/accordion.d.ts

@@ -0,0 +1,9 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class Accordion extends FoundationElement {
+    private accordionItems;
+    multi: boolean;
+    constructor();
+    connectedCallback(): void;
+    private handleOpened;
+    closeAll(): void;
+}

package/lib/accordion/accordion.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Accordion } from './accordion';
+export declare const AccordionTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Accordion>;

package/lib/accordion/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividAccordion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/accordion-item/accordion-item.d.ts

@@ -0,0 +1,13 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+export declare class AccordionItem extends FoundationElement {
+    heading?: string;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    noIndicator: boolean;
+    meta?: string;
+    open: boolean;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    private emitEvent;
+}
+export interface AccordionItem extends AffixIconWithTrailing {
+}

package/lib/accordion-item/accordion-item.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { AccordionItem } from './accordion-item';
+export declare const AccordionItemTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<AccordionItem>;

package/lib/accordion-item/index.d.ts

@@ -0,0 +1,4 @@
+import '../icon';
+import '../focus';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/action-group/action-group.d.ts

@@ -0,0 +1,10 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Appearance, Shape } from '../enums.js';
+export declare type ActionGroupAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
+declare type ActionGroupShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+export declare class ActionGroup extends FoundationElement {
+    shape?: ActionGroupShape;
+    appearance?: ActionGroupAppearance;
+    tight: boolean;
+}
+export {};

package/lib/action-group/action-group.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { ActionGroup } from './action-group';
+export declare const ActionGroupTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<ActionGroup>;

package/lib/action-group/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividActionGroup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/avatar/avatar.d.ts

@@ -0,0 +1,15 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Appearance, Connotation, Shape, Size } from '../enums.js';
+export declare type AvatarConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
+export declare type AvatarAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined>;
+declare type AvatarShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+declare type AvatarSize = Extract<Size, Size.Condensed | Size.Normal | Size.Expanded>;
+export declare class Avatar extends FoundationElement {
+    connotation?: AvatarConnotation;
+    shape?: AvatarShape;
+    appearance?: AvatarAppearance;
+    size?: AvatarSize;
+    icon?: string;
+    name?: string;
+}
+export {};

package/lib/avatar/avatar.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Avatar } from './avatar';
+export declare const AvatarTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Avatar>;

package/lib/avatar/index.d.ts

@@ -0,0 +1,3 @@
+import '../icon';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividAvatar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/badge/badge.d.ts

@@ -0,0 +1,15 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+import type { Appearance, Connotation, Shape } from '../enums.js';
+declare type BadgeConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information>;
+declare type BadgeAppearance = Extract<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
+declare type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+export declare class Badge extends FoundationElement {
+    connotation?: BadgeConnotation;
+    shape?: BadgeShape;
+    appearance?: BadgeAppearance;
+    text?: string;
+}
+export interface Badge extends AffixIconWithTrailing {
+}
+export {};

package/lib/badge/badge.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Badge } from './badge';
+export declare const badgeTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Badge>;

package/lib/badge/index.d.ts

@@ -0,0 +1,3 @@
+import '../icon';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/banner/banner.d.ts

@@ -0,0 +1,20 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { Connotation } from '../enums';
+import { AffixIcon } from '../../shared/patterns/affix';
+export declare type BannerConnotation = Connotation.Information | Connotation.Announcement | Connotation.Success | Connotation.Warning | Connotation.Alert;
+export declare class Banner extends FoundationElement {
+    #private;
+    actionHref: string | undefined;
+    actionText: string | undefined;
+    removable: boolean;
+    ariaLive: any;
+    role: string | undefined;
+    text: string | undefined;
+    connotation: BannerConnotation | undefined;
+    get conditionedIcon(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    remove(): void;
+}
+export interface Banner extends AffixIcon {
+}

package/lib/banner/banner.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Banner } from './banner';
+export declare const BannerTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Banner>;

package/lib/banner/index.d.ts

@@ -0,0 +1,3 @@
+import '../button';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividBanner: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,3 @@
+import { Breadcrumb as FoundationElement } from '@microsoft/fast-foundation';
+export declare class Breadcrumb extends FoundationElement {
+}

package/lib/breadcrumb/breadcrumb.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { Breadcrumb } from './breadcrumb';
+export declare const breadcrumbTemplate: FoundationElementTemplate<ViewTemplate<Breadcrumb>>;

package/lib/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividBreadcrumb: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/breadcrumb-item/breadcrumb-item.d.ts

@@ -0,0 +1,5 @@
+import { BreadcrumbItem as FastBreadcrumbItem } from '@microsoft/fast-foundation';
+export declare class BreadcrumbItem extends FastBreadcrumbItem {
+    text?: string;
+    constructor();
+}

package/lib/breadcrumb-item/breadcrumb-item.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { BreadcrumbItem } from './breadcrumb-item';
+export declare const BreadcrumbItemTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<BreadcrumbItem>;