@vonage/vivid 3.40.0 → 3.42.0

package/shared/definition8.js

@@ -1,13 +1,16 @@
-import { a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition25.js';
-import { f as focusRegistries } from './definition57.js';
-import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
-import { t as textAnchorTemplate } from './text-anchor.template.js';
-import { I as Icon } from './icon.js';
+import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
+import { B as Button, a as buttonRegistries } from './definition11.js';
+import { a as iconRegistries } from './definition26.js';
+import { C as Connotation } from './enums.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import './index2.js';
+import { L as Localized } from './localized.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { s as slotted } from './slotted.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n:host {\n  display: block;\n}\n\n.control {\n  overflow: hidden;\n  max-height: 160px;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-banner-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-banner-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-banner-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-banner-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-banner-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));\n  /* @cssprop [--vvd-banner-announcement-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas));\n}\n.control.connotation-warning {\n  /* @cssprop [--vvd-banner-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-banner-warning-primary-text=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text));\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n  /* @cssprop [--vvd-banner-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-banner-information-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas));\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.removing {\n  max-height: 0;\n}\n\n.header {\n  display: flex;\n  min-height: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n  align-items: center;\n  font: var(--vvd-typography-base-bold);\n  inline-size: 100%;\n}\n.header .content {\n  display: flex;\n  flex-grow: 1;\n  align-items: center;\n  justify-content: center;\n  column-gap: 16px;\n  inline-size: 100%;\n  padding-inline: 16px;\n}\n.header .content slot[name=icon] {\n  flex-shrink: 0;\n  font-size: 20px;\n  line-height: 1;\n}\n.header .content .action-items {\n  flex-shrink: 0;\n}\n.header .dismiss-button {\n  flex-shrink: 0;\n  margin-inline-end: 8px;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -20,46 +23,127 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class BreadcrumbItem extends BreadcrumbItem$1 {
+const connotationIconMap = /* @__PURE__ */ new Map([
+  [Connotation.Information, "info-solid"],
+  [Connotation.Announcement, "megaphone-solid"],
+  [Connotation.Success, "check-circle-solid"],
+  [Connotation.Warning, "warning-solid"],
+  [Connotation.Alert, "error-solid"]
+]);
+const defaultConnotation = (connotation = Connotation.Information) => connotationIconMap.get(connotation);
+class Banner extends FoundationElement {
   constructor() {
-    super();
+    super(...arguments);
+    this.dismissButtonAriaLabel = null;
+    this.role = null;
+    this.removable = false;
+    this.#handleRemoveEnd = () => {
+      this.$emit("removed");
+      this.parentElement && this.parentElement.removeChild(this);
+    };
+    this.#closeOnKeyDown = (e) => {
+      if (e.key !== "Escape" || !this.removable) {
+        return;
+      }
+      this.remove();
+    };
   }
+  get conditionedIcon() {
+    return this.icon ?? defaultConnotation(this.connotation);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", this.#closeOnKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", this.#closeOnKeyDown);
+  }
+  remove() {
+    this.$emit("removing");
+    const banner = this.shadowRoot && this.shadowRoot.querySelector(".control");
+    if (banner) {
+      banner.classList.add("removing");
+      banner.addEventListener("transitionend", this.#handleRemoveEnd);
+    }
+  }
+  #handleRemoveEnd;
+  #closeOnKeyDown;
 }
+__decorateClass([
+  attr({ attribute: "dismiss-aria-label" })
+], Banner.prototype, "dismissButtonAriaLabel", 2);
 __decorateClass([
   attr
-], BreadcrumbItem.prototype, "text", 2);
+], Banner.prototype, "role", 2);
+__decorateClass([
+  attr({ attribute: "action-href" })
+], Banner.prototype, "actionHref", 2);
+__decorateClass([
+  attr({ attribute: "action-text" })
+], Banner.prototype, "actionText", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], Banner.prototype, "removable", 2);
+__decorateClass([
+  attr({ attribute: "aria-live" })
+], Banner.prototype, "ariaLive", 2);
+__decorateClass([
+  attr()
+], Banner.prototype, "text", 2);
+__decorateClass([
+  attr()
+], Banner.prototype, "connotation", 2);
+__decorateClass([
+  observable
+], Banner.prototype, "actionItemsSlottedContent", 2);
+applyMixins(Banner, AffixIcon);
+applyMixins(Banner, Localized);
 
-const getClasses = (_) => classNames("base");
-const BreadcrumbItemTemplate = (context, definition) => {
-  const iconTag = context.tagFor(Icon);
+const getClasses = (_) => classNames(
+  "control",
+  [`connotation-${_.connotation}`, !!_.connotation]
+);
+function renderDismissButton(buttonTag) {
   return html`
-	<div role="listitem" class="${getClasses}">
-		${when(
-    (x) => x.text && !x.href,
-    html`${(x) => x.text}`
-  )}
-
-		${when(
-    (x) => x.text && x.href && x.href.length > 0,
-    html`${textAnchorTemplate(context)}`
-  )}
+	  <${buttonTag}
+	  		aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.banner.dismissButtonLabel}"
+			part="vvd-theme-alternate"
+			size="condensed"
+			class="dismiss-button"
+			icon="close-line"
+			@click="${(x) => x.remove()}">
+	  </${buttonTag}>`;
+}
+const BannerTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const buttonTag = context.tagFor(Button);
+  return html`
+	  <div class="${getClasses}" 
+	  tabindex="${(x) => x.removable || x.actionItemsSlottedContent && x.actionItemsSlottedContent.length ? "0" : null}">
+		  <header class="header">
+					<div class="content">
+            ${(x) => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}
+						<div class="banner-message"
+						 role="${(x) => x.role ? x.role : "status"}"
+						 aria-live="${(x) => x.ariaLive ? x.ariaLive : "polite"}">
+									${(x) => x.text}
+            </div>
+						<slot class="action-items" ${slotted("actionItemsSlottedContent")} name="action-items"></slot>
+					</div>
 
-		${when(
-    (x) => x.separator,
-    html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
-  )}
-	</div>`;
+			  ${when((x) => x.removable, renderDismissButton(buttonTag))}
+		  </header>
+	  </div>
+	`;
 };
 
-const breadcrumbItemDefinition = BreadcrumbItem.compose({
-  baseName: "breadcrumb-item",
-  template: BreadcrumbItemTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const bannerDefinition = Banner.compose({
+  baseName: "banner",
+  template: BannerTemplate,
+  styles
 });
-const breadcrumbItemRegistries = [breadcrumbItemDefinition(), ...iconRegistries, ...focusRegistries];
-const registerBreadcrumbItem = registerFactory(breadcrumbItemRegistries);
+const bannerRegistries = [bannerDefinition(), ...iconRegistries, ...buttonRegistries];
+const registerBanner = registerFactory(bannerRegistries);
 
-export { breadcrumbItemRegistries as a, breadcrumbItemDefinition as b, registerBreadcrumbItem as r };
+export { bannerRegistries as a, bannerDefinition as b, registerBanner as r };

package/shared/definition9.js

@@ -1,98 +1,65 @@
-import { F as FoundationElement, _ as __decorate, o as observable, h as html, r as registerFactory } from './index.js';
-import { s as slotted, e as elements } from './slotted.js';
+import { a as attr, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition26.js';
+import { f as focusRegistries } from './definition58.js';
 import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
+import { t as textAnchorTemplate } from './text-anchor.template.js';
+import { I as Icon } from './icon.js';
+import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
 
-/**
- * A Breadcrumb Custom HTML Element.
- * @slot - The default slot for the breadcrumb items
- * @csspart list - The element wrapping the slotted items
- *
- * @public
- */
-let Breadcrumb$1 = class Breadcrumb extends FoundationElement {
-    slottedBreadcrumbItemsChanged() {
-        if (this.$fastController.isConnected) {
-            if (this.slottedBreadcrumbItems === undefined ||
-                this.slottedBreadcrumbItems.length === 0) {
-                return;
-            }
-            const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
-            this.slottedBreadcrumbItems.forEach((item) => {
-                const itemIsLastNode = item === lastNode;
-                this.setItemSeparator(item, itemIsLastNode);
-                this.setAriaCurrent(item, itemIsLastNode);
-            });
-        }
-    }
-    setItemSeparator(item, isLastNode) {
-        if (item instanceof BreadcrumbItem$1) {
-            item.separator = !isLastNode;
-        }
-    }
-    /**
-     * Finds href on childnodes in the light DOM or shadow DOM.
-     * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
-     */
-    findChildWithHref(node) {
-        var _a, _b;
-        if (node.childElementCount > 0) {
-            return node.querySelector("a[href]");
-        }
-        else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
-            return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
-        }
-        else
-            return null;
-    }
-    /**
-     *  Sets ARIA Current for the current node
-     * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
-     * otherwise apply aria-current to the host element, with an href
-     */
-    setAriaCurrent(item, isLastNode) {
-        const childNodeWithHref = this.findChildWithHref(item);
-        if (childNodeWithHref === null &&
-            item.hasAttribute("href") &&
-            item instanceof BreadcrumbItem$1) {
-            isLastNode
-                ? item.setAttribute("aria-current", "page")
-                : item.removeAttribute("aria-current");
-        }
-        else if (childNodeWithHref !== null) {
-            isLastNode
-                ? childNodeWithHref.setAttribute("aria-current", "page")
-                : childNodeWithHref.removeAttribute("aria-current");
-        }
-    }
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
 };
-__decorate([
-    observable
-], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
+class BreadcrumbItem extends BreadcrumbItem$1 {
+  constructor() {
+    super();
+  }
+}
+__decorateClass([
+  attr
+], BreadcrumbItem.prototype, "text", 2);
 
-const breadcrumbTemplate = () => html`
-	<nav aria-label="breadcrumbs" class="base">
-    <div role="list" class="list">
-      <slot
-        ${slotted({
-  property: "slottedBreadcrumbItems",
-  filter: elements()
-})}
-      ></slot>
-    </div>
-	</nav>
-`;
+const getClasses = (_) => classNames("base");
+const BreadcrumbItemTemplate = (context, definition) => {
+  const iconTag = context.tagFor(Icon);
+  return html`
+	<div role="listitem" class="${getClasses}">
+		${when(
+    (x) => x.text && !x.href,
+    html`${(x) => x.text}`
+  )}
 
-const styles = ".list {\n  display: flex;\n}";
+		${when(
+    (x) => x.text && x.href && x.href.length > 0,
+    html`${textAnchorTemplate(context)}`
+  )}
 
-class Breadcrumb extends Breadcrumb$1 {
-}
+		${when(
+    (x) => x.separator,
+    html`<${iconTag} class="separator" name="chevron-right-solid"></${iconTag}>`
+  )}
+	</div>`;
+};
 
-const breadcrumbDefinition = Breadcrumb.compose({
-  baseName: "breadcrumb",
-  template: breadcrumbTemplate,
-  styles
+const breadcrumbItemDefinition = BreadcrumbItem.compose({
+  baseName: "breadcrumb-item",
+  template: BreadcrumbItemTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-const breadcrumbRegistries = [breadcrumbDefinition()];
-const registerBreadcrumb = registerFactory(breadcrumbRegistries);
+const breadcrumbItemRegistries = [breadcrumbItemDefinition(), ...iconRegistries, ...focusRegistries];
+const registerBreadcrumbItem = registerFactory(breadcrumbItemRegistries);
 
-export { breadcrumbRegistries as a, breadcrumbDefinition as b, registerBreadcrumb as r };
+export { breadcrumbItemRegistries as a, breadcrumbItemDefinition as b, registerBreadcrumbItem as r };

package/shared/enums.js

@@ -27,6 +27,7 @@ var Appearance = /* @__PURE__ */ ((Appearance2) => {
   Appearance2["Subtle"] = "subtle";
   Appearance2["Ghost"] = "ghost";
   Appearance2["Listitem"] = "listitem";
+  Appearance2["Elevated"] = "elevated";
   return Appearance2;
 })(Appearance || {});
 var Size = /* @__PURE__ */ ((Size2) => {

package/shared/icon.js

@@ -143,7 +143,7 @@ _curry2(function memoizeWith(mFn, fn) {
 const memoizeWith$1 = memoizeWith;
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.5.0";
+const ICONS_VERSION = "4.5.1";
 
 const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
     <g>
@@ -231,4 +231,4 @@ __decorateClass([
   volatile
 ], Icon.prototype, "iconUrl", 1);
 
-export { Icon as I };
+export { Icon as I, memoizeWith$1 as m };

package/shared/index.js

@@ -3425,7 +3425,7 @@ class ContainerImpl {
                 return resolver.resolve(current, this);
             }
         }
-        throw new Error(`Unable to resolve key: ${key}`);
+        throw new Error(`Unable to resolve key: ${String(key)}`);
     }
     getAll(key, searchAncestors = false) {
         validateKey(key);

package/shared/index2.js

@@ -3,7 +3,7 @@ import { a as attr, o as observable, h as html } from './index.js';
 import { w as when } from './when.js';
 import enUS from '../locales/en-US.js';
 
-const messageStyles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
+const messageStyles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n.message {\n  display: flex;\n  contain: inline-size;\n  font: var(--vvd-typography-base-condensed);\n  gap: 4px;\n  grid-column: 1/-1;\n}\n.message-text {\n  color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n  color: var(--_low-ink-color);\n}\n.message-icon {\n  font-size: 16px;\n}\n.success-message .message-icon {\n  color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n  color: var(--vvd-color-alert-500);\n}";
 
 var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;

package/shared/listbox.js

@@ -1,6 +1,6 @@
 import { k as keyArrowLeft, a as keyArrowRight } from './key-codes2.js';
 import { F as FoundationElement, O as Observable, _ as __decorate, a as attr, o as observable, D as DOM, n as nullableNumberConverter } from './index.js';
-import { i as isListboxOption } from './definition34.js';
+import { i as isListboxOption } from './definition35.js';
 import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { a as keySpace, b as keyEscape, k as keyEnter, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome } from './key-codes.js';

package/shared/localization/Locale.d.ts

@@ -1,10 +1,18 @@
 import type { DatePickerLocale } from '../date-picker/locale';
 import type { FilePickerLocale } from '../../lib/file-picker/locale';
+import type { AudioPlayerLocale } from '../../lib/audio-player/locale';
+import type { AlertLocale } from '../../lib/alert/locale';
 import type { DialogLocale } from '../../lib/dialog/locale';
+import type { BannerLocale } from '../../lib/banner/locale';
 import type { NumberFieldLocale } from '../../lib/number-field/locale';
+import type { SplitButtonLocale } from '../../lib/split-button/locale';
 export interface Locale {
     datePicker: DatePickerLocale;
     filePicker: FilePickerLocale;
+    audioPlayer: AudioPlayerLocale;
+    alert: AlertLocale;
     dialog: DialogLocale;
+    banner: BannerLocale;
     numberField: NumberFieldLocale;
+    splitButton: SplitButtonLocale;
 }

package/shared/patterns/form-elements/form-elements.d.ts

@@ -33,10 +33,10 @@ export declare function formElements<T extends {
         [x: string]: any;
         label?: string | undefined;
         errorValidationMessage: string;
-        "__#2@#forceErrorDisplay": boolean;
-        "__#2@#hasBeenTouched": boolean;
+        "__#1@#forceErrorDisplay": boolean;
+        "__#1@#hasBeenTouched": boolean;
         connectedCallback(): void;
-        "__#2@#handleInvalidEvent": () => void;
+        "__#1@#handleInvalidEvent": () => void;
         disconnectedCallback(): void;
         formResetCallback(): void;
         validate: () => void;
@@ -50,10 +50,10 @@ export declare function errorText<T extends {
     new (...args: any[]): {
         [x: string]: any;
         errorText?: string | undefined;
-        "__#3@#blockValidateCalls": boolean;
+        "__#2@#blockValidateCalls": boolean;
         errorTextChanged(_: string, newErrorText: string | undefined): void;
-        "__#3@#forceCustomError"(errorMessage: string): void;
-        "__#3@#clearCustomErrorAndRevalidate"(): void;
+        "__#2@#forceCustomError"(errorMessage: string): void;
+        "__#2@#clearCustomErrorAndRevalidate"(): void;
     };
 } & T;
 export {};

package/shared/presentationDate.js

@@ -1,10 +1,10 @@
-import { B as Button } from './definition10.js';
-import { P as Popup } from './definition59.js';
-import { T as TextField } from './definition52.js';
+import { B as Button } from './definition11.js';
+import { P as Popup } from './definition60.js';
+import { T as TextField } from './definition53.js';
 import './affix.js';
 import { f as focusTemplateFactory } from './focus2.js';
 import { a as FormElementHelperText } from './index2.js';
-import { D as Divider } from './definition20.js';
+import { D as Divider } from './definition21.js';
 import { h as html, F as FoundationElement, a as attr, o as observable, v as volatile, D as DOM } from './index.js';
 import { r as ref } from './ref.js';
 import { r as repeat } from './repeat.js';
@@ -14,7 +14,7 @@ import { L as Localized } from './localized.js';
 import { F as FormAssociated } from './form-associated.js';
 import { a as applyMixins } from './apply-mixins.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-block;\n  inline-size: 100%;\n}\n\n.control {\n  inline-size: 100%;\n}\n\n.dialog {\n  display: inline-flex;\n  flex-direction: column;\n  padding: 12px;\n  gap: 12px;\n}\n.dialog .footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px;\n  gap: 8px;\n}\n\n.segments {\n  display: flex;\n  gap: 24px;\n}\n\n.segment {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.segment .header {\n  display: flex;\n  align-items: center;\n  padding-block: 8px;\n}\n.segment .title {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n}\n.segment .title-action {\n  block-size: 24px;\n  border-radius: 6px;\n  font: var(--vvd-typography-base-extended);\n  padding-inline: 6px;\n}\n\n.calendar {\n  display: flex;\n  flex-direction: column;\n  margin-top: 8px;\n  gap: 4px;\n}\n.calendar .calendar-separator {\n  margin-inline: 10px;\n}\n.calendar .calendar-weekdays {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-weekday {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  block-size: 16px;\n  font: var(--vvd-typography-base-condensed);\n  inline-size: 40px;\n}\n.calendar .calendar-week {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-day {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 28px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base);\n  margin-inline: 6px;\n  --focus-inset: -2px;\n}\n.calendar .calendar-day.start, .calendar .calendar-day.end {\n  border: 2px solid var(--vvd-color-cta-50);\n  background-color: var(--vvd-color-cta-200);\n}\n.calendar .calendar-day::before, .calendar .calendar-day::after {\n  position: absolute;\n  z-index: -1;\n  display: block;\n  width: 20px;\n  height: 28px;\n}\n.calendar .calendar-day::before {\n  right: 50%;\n}\n.calendar .calendar-day::after {\n  left: 50%;\n}\n.calendar .calendar-day.range::before, .calendar .calendar-day.range::after {\n  background-color: var(--vvd-color-cta-50);\n}\n.calendar .calendar-day.range:not(.start)::before, .calendar .calendar-day.range:not(.end)::after {\n  content: \"\";\n}\n.calendar .calendar-day.outside-month, .calendar .calendar-day:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.months-separator {\n  margin-inline: -12px;\n}\n\n.month-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 34px;\n}\n.month-grid .months-row {\n  display: flex;\n  justify-content: center;\n  gap: 29px;\n}\n.month-grid .month {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 48px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base-extended);\n  text-transform: uppercase;\n}\n.month-grid .month:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n}\n.button {\n  /* @cssprop [--vvd-date-picker-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-date-picker-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-date-picker-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-date-picker-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));\n  /* @cssprop [--vvd-date-picker-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300));\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.button:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.button:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:disabled, .disabled) {\n  --_appearance-color-text: var(--_connotation-color-pale);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button .focus-indicator {\n  color: var(--vvd-color-canvas-text);\n  --focus-stroke-gap-color: transparent;\n}\n.button:focus-visible {\n  outline: none;\n}\n.button:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n.button.current {\n  border: 1px solid var(--vvd-color-neutral-200);\n}\n.button:disabled {\n  cursor: not-allowed;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-block;\n  inline-size: 100%;\n}\n\n.control {\n  inline-size: 100%;\n}\n\n.dialog {\n  display: inline-flex;\n  flex-direction: column;\n  padding: 12px;\n  gap: 12px;\n}\n.dialog .footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px;\n  gap: 8px;\n}\n\n.segments {\n  display: flex;\n  gap: 24px;\n}\n\n.segment {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.segment .header {\n  display: flex;\n  align-items: center;\n  padding-block: 8px;\n}\n.segment .title {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n}\n.segment .title-action {\n  block-size: 24px;\n  border-radius: 6px;\n  font: var(--vvd-typography-base-extended);\n  padding-inline: 6px;\n}\n\n.calendar {\n  display: flex;\n  flex-direction: column;\n  margin-top: 8px;\n  gap: 4px;\n}\n.calendar .calendar-separator {\n  margin-inline: 10px;\n}\n.calendar .calendar-weekdays {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-weekday {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  block-size: 16px;\n  font: var(--vvd-typography-base-condensed);\n  inline-size: 40px;\n}\n.calendar .calendar-week {\n  display: flex;\n  justify-content: center;\n}\n.calendar .calendar-day {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 28px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base);\n  margin-inline: 6px;\n  --focus-inset: -2px;\n}\n.calendar .calendar-day.start, .calendar .calendar-day.end {\n  border: 2px solid var(--vvd-color-cta-50);\n  background-color: var(--vvd-color-cta-200);\n}\n.calendar .calendar-day::before, .calendar .calendar-day::after {\n  position: absolute;\n  z-index: -1;\n  display: block;\n  width: 20px;\n  height: 28px;\n}\n.calendar .calendar-day::before {\n  right: 50%;\n}\n.calendar .calendar-day::after {\n  left: 50%;\n}\n.calendar .calendar-day.range::before, .calendar .calendar-day.range::after {\n  background-color: var(--vvd-color-cta-50);\n}\n.calendar .calendar-day.range:not(.start)::before, .calendar .calendar-day.range:not(.end)::after {\n  content: \"\";\n}\n.calendar .calendar-day.outside-month, .calendar .calendar-day:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.months-separator {\n  margin-inline: -12px;\n}\n\n.month-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 34px;\n}\n.month-grid .months-row {\n  display: flex;\n  justify-content: center;\n  gap: 29px;\n}\n.month-grid .month {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1/1;\n  block-size: 48px;\n  border-radius: 50%;\n  font: var(--vvd-typography-base-extended);\n  text-transform: uppercase;\n}\n.month-grid .month:disabled {\n  color: var(--vvd-color-neutral-400);\n}\n\n.button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n}\n.button {\n  /* @cssprop [--vvd-date-picker-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-date-picker-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-date-picker-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));\n  /* @cssprop [--vvd-date-picker-accent-dim=var(--vvd-color-neutral-200)] */\n  --_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));\n  /* @cssprop [--vvd-date-picker-accent-pale=var(--vvd-color-neutral-300)] */\n  --_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300));\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.button:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.button:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-pale);\n  --_appearance-color-outline: transparent;\n}\n.button:where(.selected, [aria-current]):where(:disabled, .disabled) {\n  --_appearance-color-text: var(--_connotation-color-pale);\n  --_appearance-color-fill: var(--_connotation-color-dim);\n  --_appearance-color-outline: transparent;\n}\n.button .focus-indicator {\n  color: var(--vvd-color-canvas-text);\n  --focus-stroke-gap-color: transparent;\n}\n.button:focus-visible {\n  outline: none;\n}\n.button:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n.button.current {\n  border: 1px solid var(--vvd-color-neutral-200);\n}\n.button:disabled {\n  cursor: not-allowed;\n}";
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -5368,6 +5368,7 @@ function renderCalendarGrid(context) {
 			${when(
         (x, c) => !c.parentContext.parentContext.parent._hideDatesOutsideMonth || !x.isOutsideMonth,
         html`
+		<span role="gridcell">
 			<button
 							class="${(x, c) => classNames(
           "calendar-day",
@@ -5379,7 +5380,6 @@ function renderCalendarGrid(context) {
           ["end", c.parentContext.parentContext.parent._isDateRangeEnd(x.date)],
           ["outside-month", x.isOutsideMonth]
         )}"
-							role="gridcell"
 							?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(x.date)}"
 							tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
 							aria-selected="${(x, c) => c.parentContext.parentContext.parent._isDateAriaSelected(x.date)}"
@@ -5394,7 +5394,8 @@ function renderCalendarGrid(context) {
         )}"
 						>
 							${() => focusTemplate} ${(x) => x.label}
-						</button>`
+						</button>
+		</span>`
       )}
 				</div>
 			`
@@ -5422,6 +5423,7 @@ function renderMonthPickerGrid(context) {
 					${repeat(
       (x) => x,
       html`
+			<span role="gridcell">
 							<button
 								class="${(x, c) => classNames(
         "month",
@@ -5441,7 +5443,6 @@ function renderMonthPickerGrid(context) {
           )
         ]
       )}"
-								role="gridcell"
 								tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(x.month, c.parentContext.parentContext.parent._tabbableMonth) ? 2 : -1}"
 								aria-label="${(x) => x.monthName}"
 								aria-selected="${(x, c) => areMonthsEqual(
@@ -5459,6 +5460,7 @@ function renderMonthPickerGrid(context) {
 							>
 								${() => focusTemplate} ${(x) => x.label}
 							</button>
+				</span>
 						`
     )}
 				</div>

package/shared/text-field.js

@@ -1,3 +1,3 @@
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n  --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: min-content 1fr max-content;\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.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\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(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\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)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-text-field-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-text-field-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-field-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-field-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-field-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-text-field-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-text-field-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-success-faint, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-field-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-text-field-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-text-field-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-field-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-field-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-field-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-text-field-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-text-field-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-alert-faint, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-field-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-alert-soft, var(--vvd-color-alert-100));\n}\n.base:not(.connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-text-field-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-field-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-text-field-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-text-field-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-field-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-text-field-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label:not(slot),\n.label::slotted(label) {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  grid-row: 1;\n}\n.char-count + .label:not(slot),\n.char-count + .label::slotted(label) {\n  grid-column: 1/3;\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 3/4;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  padding-block: 0;\n  transition: color 0.2s, background-color 0.2s;\n  /* Shape */\n}\n.fieldset::after {\n  position: absolute;\n  display: block;\n  block-size: 100%;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inline-size: 100%;\n  pointer-events: none;\n  transition: box-shadow 0.2s;\n}\n.fieldset:focus-visible {\n  outline: none;\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n  border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n  border-radius: 24px;\n}\n\n.wrapper {\n  block-size: 100%;\n  border-radius: inherit;\n  inline-size: 100%;\n}\n.wrapper:focus-visible {\n  outline: none;\n}\n\n.control:not(slot), .control::slotted(input) {\n  width: 100%;\n  box-sizing: border-box;\n  border: 0 none;\n  appearance: none; /* for box-shadow visibility on IOS */\n  background-color: transparent;\n  block-size: 100%;\n  border-radius: inherit;\n  color: inherit;\n  font: inherit;\n  padding-block: 0;\n  padding-inline-end: var(--_text-field-gutter);\n  padding-inline-start: var(--_text-field-gutter);\n}\n.control:not(slot):disabled, .control::slotted(input:disabled) {\n  cursor: not-allowed;\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control:not(slot)::placeholder {\n  opacity: 1 !important; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_low-ink-color) !important; /* 1. sets text fill to current `color` for safari */\n}\n.control:not(slot):focus-visible, .control::slotted(input:focus-visible) {\n  outline: none;\n}\n.has-icon .control:not(slot), .has-icon .control::slotted(input) {\n  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: var(--_text-field-icon-size);\n  inset-block-start: 50%;\n  inset-inline-start: calc(100% + var(--_text-field-gutter));\n  line-height: 1;\n  transform: translateY(-50%);\n}\n\n.leading-items-wrapper {\n  position: relative;\n}\n.base.no-leading .leading-items-wrapper {\n  display: none;\n}\n\n.action-items-wrapper {\n  margin-inline-end: 4px;\n}\n.base:not(.action-items) .action-items-wrapper {\n  display: none;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.wrapper:not(:focus-visible, :focus-within) > .focus-indicator, .fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n  --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: min-content 1fr max-content;\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.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\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(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\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)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-600);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-text-field-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-text-field-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-field-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-field-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-text-field-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-text-field-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-text-field-success-faint=var(--vvd-color-success-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-success-faint, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-text-field-success-soft=var(--vvd-color-success-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-text-field-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-text-field-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-field-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-field-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-text-field-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-text-field-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-text-field-alert-faint=var(--vvd-color-alert-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-alert-faint, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-text-field-alert-soft=var(--vvd-color-alert-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-alert-soft, var(--vvd-color-alert-100));\n}\n.base:not(.connotation-success, .connotation-alert) {\n  /* @cssprop [--vvd-text-field-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-field-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-text-field-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-text-field-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-text-field-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-text-field-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-text-field-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label:not(slot),\n.label::slotted(label) {\n  color: var(--vvd-color-canvas-text);\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  grid-row: 1;\n}\n.char-count + .label:not(slot),\n.char-count + .label::slotted(label) {\n  grid-column: 1/3;\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 3/4;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  padding-block: 0;\n  transition: color 0.2s, background-color 0.2s;\n  /* Shape */\n}\n.fieldset::after {\n  position: absolute;\n  display: block;\n  block-size: 100%;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inline-size: 100%;\n  pointer-events: none;\n  transition: box-shadow 0.2s;\n}\n.fieldset:focus-visible {\n  outline: none;\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n  border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n  border-radius: 24px;\n}\n\n.wrapper {\n  block-size: 100%;\n  border-radius: inherit;\n  inline-size: 100%;\n}\n.wrapper:focus-visible {\n  outline: none;\n}\n\n.control:not(slot), .control::slotted(input) {\n  width: 100%;\n  box-sizing: border-box;\n  border: 0 none;\n  appearance: none; /* for box-shadow visibility on IOS */\n  background-color: transparent;\n  block-size: 100%;\n  border-radius: inherit;\n  color: inherit;\n  font: inherit;\n  padding-block: 0;\n  padding-inline-end: var(--_text-field-gutter);\n  padding-inline-start: var(--_text-field-gutter);\n}\n.control:not(slot):disabled, .control::slotted(input:disabled) {\n  cursor: not-allowed;\n  opacity: 1; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control:not(slot)::placeholder {\n  opacity: 1 !important; /* 2. correct opacity on iOS */\n  -webkit-text-fill-color: var(--_low-ink-color) !important; /* 1. sets text fill to current `color` for safari */\n}\n.control:not(slot):focus-visible, .control::slotted(input:focus-visible) {\n  outline: none;\n}\n.has-icon .control:not(slot), .has-icon .control::slotted(input) {\n  padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: var(--_text-field-icon-size);\n  inset-block-start: 50%;\n  inset-inline-start: calc(100% + var(--_text-field-gutter));\n  line-height: 1;\n  transform: translateY(-50%);\n}\n\n.leading-items-wrapper {\n  position: relative;\n}\n.base.no-leading .leading-items-wrapper {\n  display: none;\n}\n\n.action-items-wrapper {\n  margin-inline-end: 4px;\n}\n.base:not(.action-items) .action-items-wrapper {\n  display: none;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.wrapper:not(:focus-visible, :focus-within) > .focus-indicator, .fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
 
 export { styles as s };

package/side-drawer/index.js

@@ -1,4 +1,4 @@
-import { r as registerSideDrawer } from '../shared/definition42.js';
+import { r as registerSideDrawer } from '../shared/definition43.js';
 import '../shared/index.js';
 import '../shared/when.js';
 import '../shared/class-names.js';

package/slider/index.js

@@ -1,6 +1,6 @@
-import { r as registerSlider } from '../shared/definition43.js';
+import { r as registerSlider } from '../shared/definition44.js';
 import '../shared/index.js';
-import '../shared/definition57.js';
+import '../shared/definition58.js';
 import '../shared/focus.js';
 import '../shared/direction.js';
 import '../shared/numbers.js';
@@ -8,8 +8,8 @@ import '../shared/form-associated.js';
 import '../shared/key-codes.js';
 import '../shared/aria.js';
 import '../shared/focus2.js';
-import '../shared/ref.js';
 import '../shared/aria2.js';
+import '../shared/ref.js';
 import '../shared/class-names.js';
 
 registerSlider();