@vonage/vivid 4.14.0 → 4.14.2

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Dec 2024 11:54:04 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);
@@ -28,6 +28,45 @@
   background-color: var(--scrollbar-thumb-color);
 }
 
+.vvd-neutral-tint-elevation {
+  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);
+  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);
+  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);
+  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);
+  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);
+  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);
+  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);
+  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);
+  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);
+  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);
+  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);
+  --_vvd-tinted-shadow-surface-12dp: var(
+  	--vvd-neutral-tint-shadow-surface-12dp
+  );
+  --_vvd-tinted-shadow-surface-16dp: var(
+  	--vvd-neutral-tint-shadow-surface-16dp
+  );
+  --_vvd-tinted-shadow-surface-24dp: var(
+  	--vvd-neutral-tint-shadow-surface-24dp
+  );
+}
+.vvd-neutral-tint-elevation > * {
+  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);
+  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);
+  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);
+  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);
+  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);
+  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);
+  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);
+  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);
+  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);
+  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);
+  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);
+  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);
+  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);
+  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);
+}
+
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;
   font-size: unset;

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Dec 2024 11:54:04 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);
@@ -27,3 +27,42 @@
   border-radius: 4px;
   background-color: var(--scrollbar-thumb-color);
 }
+
+.vvd-neutral-tint-elevation {
+  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);
+  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);
+  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);
+  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);
+  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);
+  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);
+  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);
+  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);
+  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);
+  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);
+  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);
+  --_vvd-tinted-shadow-surface-12dp: var(
+  	--vvd-neutral-tint-shadow-surface-12dp
+  );
+  --_vvd-tinted-shadow-surface-16dp: var(
+  	--vvd-neutral-tint-shadow-surface-16dp
+  );
+  --_vvd-tinted-shadow-surface-24dp: var(
+  	--vvd-neutral-tint-shadow-surface-24dp
+  );
+}
+.vvd-neutral-tint-elevation > * {
+  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);
+  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);
+  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);
+  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);
+  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);
+  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);
+  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);
+  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);
+  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);
+  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);
+  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);
+  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);
+  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);
+  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);
+}

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Dec 2024 11:54:04 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Dec 2024 11:54:04 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 18 Dec 2024 11:54:04 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 18 Dec 2024 11:54:04 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 18 Dec 2024 11:54:04 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";
@@ -123,6 +123,20 @@
   --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);
   --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
   --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
+  --vvd-neutral-tint-color-surface-0dp: #191828;
+  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;
+  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;
+  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;
+  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;
+  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;
+  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;
+  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);
+  --vvd-neutral-tint-shadow-surface-2dp: none;
+  --vvd-neutral-tint-shadow-surface-4dp: none;
+  --vvd-neutral-tint-shadow-surface-8dp: none;
+  --vvd-neutral-tint-shadow-surface-12dp: none;
+  --vvd-neutral-tint-shadow-surface-16dp: none;
+  --vvd-neutral-tint-shadow-surface-24dp: none;
   --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;
   --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;
   --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;
@@ -244,4 +258,11 @@
   --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);
   --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
   --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
+  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);
+  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);
 }

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Dec 2024 11:54:04 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 18 Dec 2024 11:54:04 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 18 Dec 2024 11:54:04 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 /**
  * Do not edit directly
- * Generated on Wed, 18 Dec 2024 11:54:04 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";
@@ -130,6 +130,13 @@
   --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);
   --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
   --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
+  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);
+  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);
+  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);
   --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;
   --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;
   --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;
@@ -244,4 +251,18 @@
   --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);
   --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
   --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
+  --vvd-neutral-tint-color-surface-0dp: #191828;
+  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;
+  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;
+  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;
+  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;
+  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;
+  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;
+  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);
+  --vvd-neutral-tint-shadow-surface-2dp: none;
+  --vvd-neutral-tint-shadow-surface-4dp: none;
+  --vvd-neutral-tint-shadow-surface-8dp: none;
+  --vvd-neutral-tint-shadow-surface-12dp: none;
+  --vvd-neutral-tint-shadow-surface-16dp: none;
+  --vvd-neutral-tint-shadow-surface-24dp: none;
 }

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 18 Dec 2024 11:54:04 GMT
+ * Generated on Tue, 28 Jan 2025 12:08:04 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/text-anchor/index.cjs

@@ -1,17 +1,17 @@
 'use strict';
 
 const definition = require('../shared/definition27.cjs');
-const defineVividComponent = require('../shared/defineVividComponent.cjs');
+const vividElement = require('../shared/vivid-element.cjs');
 const textAnchor = require('../shared/text-anchor.cjs');
 const textAnchor_template = require('../shared/text-anchor.template.cjs');
 
-const textAnchorDefinition = defineVividComponent.defineVividComponent(
+const textAnchorDefinition = vividElement.defineVividComponent(
   "text-anchor",
   textAnchor.TextAnchor,
   textAnchor_template.textAnchorTemplate,
   [definition.iconDefinition],
   {}
 );
-const registerTextAnchor = defineVividComponent.createRegisterFunction(textAnchorDefinition);
+const registerTextAnchor = vividElement.createRegisterFunction(textAnchorDefinition);
 
 registerTextAnchor();

package/text-anchor/index.js

@@ -1,5 +1,5 @@
 import { i as iconDefinition } from '../shared/definition27.js';
-import { f as createRegisterFunction, d as defineVividComponent } from '../shared/defineVividComponent.js';
+import { f as createRegisterFunction, d as defineVividComponent } from '../shared/vivid-element.js';
 import { T as TextAnchor } from '../shared/text-anchor.js';
 import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
 

package/lib/listbox/definition.d.ts

@@ -1,2 +0,0 @@
-export type { LisboxAppearance } from './listbox';
-export declare const registerListbox: (prefix?: string) => void;

package/lib/listbox/listbox.d.ts

@@ -1,14 +0,0 @@
-import { ListboxElement as FoundationListboxElement } from '@microsoft/fast-foundation';
-import type { Appearance, Shape } from '../enums';
-export type LisboxAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;
-type ListboxShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
-export declare class Listbox extends FoundationListboxElement {
-    #private;
-    appearance?: LisboxAppearance;
-    orientation?: 'horizontal' | 'vertical';
-    orientationChanged(): void;
-    shape?: ListboxShape;
-    slottedOptionsChanged(prev: Element[] | undefined, next: Element[]): void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-}
-export {};

package/lib/listbox/listbox.template.d.ts

@@ -1,2 +0,0 @@
-import type { Listbox } from './listbox';
-export declare const ListboxTemplate: import("@microsoft/fast-element").ViewTemplate<Listbox, any>;

package/listbox/index.cjs

@@ -1,54 +0,0 @@
-'use strict';
-
-const definition = require('../shared/definition35.cjs');
-const defineVividComponent = require('../shared/defineVividComponent.cjs');
-const listbox = require('../shared/listbox2.cjs');
-const slotted = require('../shared/slotted.cjs');
-const classNames = require('../shared/class-names.cjs');
-
-const getClasses = ({ appearance, shape, disabled, orientation }) => classNames.classNames(
-  "base",
-  ["disabled", disabled],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape) && orientation === "horizontal"],
-  [`orientation-${orientation}`, Boolean(orientation)]
-);
-const ListboxTemplate = defineVividComponent.html`
-	<template
-		aria-activedescendant="${(x) => x.ariaActiveDescendant}"
-		aria-multiselectable="${(x) => x.ariaMultiSelectable}"
-		aria-orientation="${(x) => x.ariaOrientation}"
-		aria-label="listbox"
-		role="listbox"
-		@click="${(x, c) => x.clickHandler(c.event)}"
-		@focusin="${(x, c) => x.focusinHandler(c.event)}"
-		@keydown="${(x, c) => x.keydownHandler(c.event)}"
-		@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
-		tabindex="${(x) => !x.disabled ? "0" : null}"
-	>
-		<div class="${getClasses}">
-			<slot
-				${slotted.slotted({
-  filter: listbox.ListboxElement.slottedOptionFilter,
-  flatten: true,
-  property: "slottedOptions"
-})}
-			></slot>
-		</div>
-	</template>
-`;
-
-const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .base{--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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
-
-const listboxDefinition = defineVividComponent.defineVividComponent(
-  "listbox",
-  listbox.Listbox,
-  ListboxTemplate,
-  [definition.listboxOptionDefinition],
-  {
-    styles
-  }
-);
-const registerListbox = defineVividComponent.createRegisterFunction(listboxDefinition);
-
-registerListbox();

package/listbox/index.js

@@ -1,52 +0,0 @@
-import { l as listboxOptionDefinition } from '../shared/definition35.js';
-import { h as html, f as createRegisterFunction, d as defineVividComponent } from '../shared/defineVividComponent.js';
-import { L as ListboxElement, a as Listbox } from '../shared/listbox2.js';
-import { s as slotted } from '../shared/slotted.js';
-import { c as classNames } from '../shared/class-names.js';
-
-const getClasses = ({ appearance, shape, disabled, orientation }) => classNames(
-  "base",
-  ["disabled", disabled],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape) && orientation === "horizontal"],
-  [`orientation-${orientation}`, Boolean(orientation)]
-);
-const ListboxTemplate = html`
-	<template
-		aria-activedescendant="${(x) => x.ariaActiveDescendant}"
-		aria-multiselectable="${(x) => x.ariaMultiSelectable}"
-		aria-orientation="${(x) => x.ariaOrientation}"
-		aria-label="listbox"
-		role="listbox"
-		@click="${(x, c) => x.clickHandler(c.event)}"
-		@focusin="${(x, c) => x.focusinHandler(c.event)}"
-		@keydown="${(x, c) => x.keydownHandler(c.event)}"
-		@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
-		tabindex="${(x) => !x.disabled ? "0" : null}"
-	>
-		<div class="${getClasses}">
-			<slot
-				${slotted({
-  filter: ListboxElement.slottedOptionFilter,
-  flatten: true,
-  property: "slottedOptions"
-})}
-			></slot>
-		</div>
-	</template>
-`;
-
-const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .base{--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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
-
-const listboxDefinition = defineVividComponent(
-  "listbox",
-  Listbox,
-  ListboxTemplate,
-  [listboxOptionDefinition],
-  {
-    styles
-  }
-);
-const registerListbox = createRegisterFunction(listboxDefinition);
-
-registerListbox();

package/shared/aria-global2.cjs

@@ -1,75 +0,0 @@
-'use strict';
-
-const foundationElement = require('./foundation-element.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
-
-/**
- * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
- * The following global states and properties are supported by all roles and by all base markup elements.
- * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
- *
- * This is intended to be used as a mixin. Be sure you extend FASTElement.
- *
- * @public
- */
-class ARIAGlobalStatesAndProperties {
-}
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-atomic" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-busy" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-controls" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-current" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-describedby" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-details" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-disabled" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-errormessage" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-flowto" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-haspopup" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-hidden" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-invalid" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-keyshortcuts" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-label" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-labelledby" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-live" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-owns" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-relevant" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
-foundationElement.__decorate([
-    defineVividComponent.attr({ attribute: "aria-roledescription" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
-
-exports.ARIAGlobalStatesAndProperties = ARIAGlobalStatesAndProperties;

package/shared/aria-global2.js

@@ -1,73 +0,0 @@
-import { _ as __decorate } from './foundation-element.js';
-import { a as attr } from './defineVividComponent.js';
-
-/**
- * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
- * The following global states and properties are supported by all roles and by all base markup elements.
- * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
- *
- * This is intended to be used as a mixin. Be sure you extend FASTElement.
- *
- * @public
- */
-class ARIAGlobalStatesAndProperties {
-}
-__decorate([
-    attr({ attribute: "aria-atomic" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
-__decorate([
-    attr({ attribute: "aria-busy" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
-__decorate([
-    attr({ attribute: "aria-controls" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
-__decorate([
-    attr({ attribute: "aria-current" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
-__decorate([
-    attr({ attribute: "aria-describedby" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
-__decorate([
-    attr({ attribute: "aria-details" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
-__decorate([
-    attr({ attribute: "aria-disabled" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
-__decorate([
-    attr({ attribute: "aria-errormessage" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
-__decorate([
-    attr({ attribute: "aria-flowto" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
-__decorate([
-    attr({ attribute: "aria-haspopup" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
-__decorate([
-    attr({ attribute: "aria-hidden" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
-__decorate([
-    attr({ attribute: "aria-invalid" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
-__decorate([
-    attr({ attribute: "aria-keyshortcuts" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
-__decorate([
-    attr({ attribute: "aria-label" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
-__decorate([
-    attr({ attribute: "aria-labelledby" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
-__decorate([
-    attr({ attribute: "aria-live" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
-__decorate([
-    attr({ attribute: "aria-owns" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
-__decorate([
-    attr({ attribute: "aria-relevant" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
-__decorate([
-    attr({ attribute: "aria-roledescription" })
-], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
-
-export { ARIAGlobalStatesAndProperties as A };