@vonage/vivid 3.40.0 → 3.42.0

package/shared/definition29.js

@@ -1,97 +1,60 @@
-import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition25.js';
-import { f as focusRegistries } from './definition57.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { I as Icon } from './icon.js';
-import { f as focusTemplateFactory } from './focus2.js';
-import { r as ref } from './ref.js';
-import { w as when } from './when.js';
+import { h as html, r as registerFactory } from './index.js';
+import { P as Popup, p as popupRegistries } from './definition60.js';
+import { M as Menu, a as menuItemRegistries } from './definition28.js';
+import { s as slotted } from './slotted.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.control {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-inline: 16px;\n  text-decoration: none;\n  vertical-align: middle;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control: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.control: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.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\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(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control {\n  /* @cssprop [--vvd-nav-disclosure-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-nav-disclosure-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-nav-disclosure-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-nav-disclosure-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-nav-disclosure-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control .toggleIcon {\n  margin-inline-start: auto;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  border-inline-start: 1px solid var(--vvd-color-neutral-200);\n  gap: 4px;\n  margin-block: 4px;\n  margin-inline-start: 20px;\n  padding-inline-start: 12px;\n}\n\ndetails > summary {\n  list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n  display: none;\n}";
+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  box-sizing: border-box;\n  flex-direction: column;\n  gap: 8px;\n  inline-size: max-content;\n  max-block-size: var(--menu-block-size, 408px);\n  max-inline-size: var(--menu-max-inline-size);\n  min-inline-size: var(--menu-min-inline-size);\n  overflow-x: hidden;\n  overflow-y: auto;\n  padding-block: 8px;\n}\n\n::slotted(a) {\n  color: var(--vvd-color-canvas-text);\n  text-decoration: none;\n}\n\n::slotted(a[role=menuitem]:focus) {\n  display: block;\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 3px currentColor;\n  outline: 2px solid currentColor;\n  outline-offset: -2px;\n}\n\n.header {\n  padding-block-start: 8px;\n  padding-inline: 16px;\n}\n.hide-header .header {\n  display: none;\n}\n\n.hide-body .body {\n  display: none;\n}\n\n.action-items {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding-inline: 8px;\n}\n.hide-actions .action-items {\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;
-};
-class NavDisclosure extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.ariaCurrent = null;
-    this.#onToggle = () => {
-      this.open = this.details.open;
-      this.$emit("toggle", void 0, { bubbles: false });
-    };
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.details.addEventListener("toggle", this.#onToggle);
-    this.details.open = this.open;
+const getClasses = ({
+  headerSlottedContent,
+  actionItemsSlottedContent,
+  items
+}) => classNames(
+  "base",
+  ["hide-header", !headerSlottedContent?.length],
+  ["hide-actions", !actionItemsSlottedContent?.length],
+  ["hide-body", items && !items.length]
+);
+const MenuTemplate = (context) => {
+  const popupTag = context.tagFor(Popup);
+  function handlePopupEvents(x, e, state) {
+    e.stopPropagation();
+    x.open = state;
   }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.details.removeEventListener("toggle", this.#onToggle);
-  }
-  #onToggle;
-}
-__decorateClass([
-  attr
-], NavDisclosure.prototype, "label", 2);
-__decorateClass([
-  attr({ mode: "boolean" })
-], NavDisclosure.prototype, "open", 2);
-__decorateClass([
-  attr({ attribute: "aria-current" })
-], NavDisclosure.prototype, "ariaCurrent", 2);
-applyMixins(NavDisclosure, AffixIcon);
-
-function getAriaCurrent(ariaCurrent, open) {
-  return ariaCurrent && !open;
-}
-const NavDisclosureTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const focusTemplate = focusTemplateFactory(context);
-  const iconTag = context.tagFor(Icon);
-  return html`<details class="base" ${ref("details")} ?open=${(x) => x.open}>
-        <summary class="control"
-            role="button"
-            aria-controls="disclosure-content"
-			aria-expanded="${(x) => x.open}"
-			?aria-current=${(x) => getAriaCurrent(x.ariaCurrent, x.open)}>
-					${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-            ${(x) => x.label}
-						<slot name="meta"></slot>
-			${when((x) => x.open, html`<${iconTag} class="toggleIcon" name='chevron-up-solid'></${iconTag}>`)}
-			${when((x) => !x.open, html`<${iconTag} class="toggleIcon" name='chevron-down-solid'></${iconTag}>`)}
-			${() => focusTemplate}
-        </summary>
-        <div class="content" id="disclosure-content">
-			<slot></slot>
-		</div>
-    </details>
-	`;
+  return html`
+		<template>
+			<${popupTag}
+				:placement=${(x) => x.placement}
+				:open=${(x) => x.open}
+				:anchor=${(x) => x.anchor}
+				@vwc-popup:open="${(x, c) => handlePopupEvents(x, c.event, true)}"
+				@vwc-popup:close="${(x, c) => handlePopupEvents(x, c.event, false)}"
+			>
+			<div class="${getClasses}">
+				<div class="header">
+					<slot name="header" ${slotted("headerSlottedContent")}></slot>
+				</div>
+				<div
+					class="body"
+					role="menu"
+					@keydown="${(x, c) => x.handleMenuKeyDown(c.event)}"
+					@focusout="${(x, c) => x.handleFocusOut(c.event)}"
+				>
+					<slot ${slotted("items")}></slot>
+				</div>
+				<footer class="action-items"><slot name="action-items"  ${slotted("actionItemsSlottedContent")}></slot></footer>
+			</div>
+		</${popupTag}>
+	</template>`;
 };
 
-const navDisclosureDefinition = NavDisclosure.compose({
-  baseName: "nav-disclosure",
-  template: NavDisclosureTemplate,
+const menuDefinition = Menu.compose({
+  baseName: "menu",
+  template: MenuTemplate,
   styles
 });
-const navDisclosureRegistries = [navDisclosureDefinition(), ...iconRegistries, ...focusRegistries];
-const registerNavDisclosure = registerFactory(navDisclosureRegistries);
+const menuRegistries = [menuDefinition(), ...popupRegistries, ...menuItemRegistries];
+const registerMenu = registerFactory(menuRegistries);
 
-export { navDisclosureRegistries as a, navDisclosureDefinition as n, registerNavDisclosure as r };
+export { menuRegistries as a, menuDefinition as m, registerMenu as r };

package/shared/definition3.js

@@ -1,7 +1,7 @@
 import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.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:host {\n  display: inline-block;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  inline-size: inherit;\n  vertical-align: middle;\n}\n.base {\n  /* @cssprop [--vvd-action-group-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-action-group-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-action-group-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-action-group-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-action-group-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50));\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::before {\n  position: absolute;\n  z-index: 1;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inset: 0;\n  pointer-events: none;\n}\n.base:not(.tight) {\n  padding: 4px;\n  column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.base.shape-pill {\n  border-radius: 24px;\n}\n\n/* Separator */\n::slotted([role=separator]) {\n  align-self: stretch;\n  margin-block: 4px;\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  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  inline-size: inherit;\n  vertical-align: middle;\n}\n.base {\n  /* @cssprop [--vvd-action-group-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-action-group-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-action-group-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-action-group-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-action-group-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50));\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::before {\n  position: absolute;\n  z-index: 1;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inset: 0;\n  pointer-events: none;\n}\n.base:not(.tight) {\n  padding: 4px;\n  column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.base.shape-pill {\n  border-radius: 24px;\n}\n\n/* Separator */\n::slotted([role=separator]) {\n  align-self: stretch;\n  margin-block: 4px;\n}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition30.js

@@ -1,33 +1,97 @@
-import { h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition25.js';
-import { f as focusRegistries } from './definition57.js';
-import { A as AffixIcon } from './affix.js';
-import { T as TextAnchor } from './text-anchor.js';
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition26.js';
+import { f as focusRegistries } from './definition58.js';
+import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { t as textAnchorTemplate } from './text-anchor.template.js';
+import { I as Icon } from './icon.js';
+import { f as focusTemplateFactory } from './focus2.js';
+import { r as ref } from './ref.js';
+import { w as when } from './when.js';
 
-const styles = "/**\n * Do not edit directly\n * Generated on Wed, 01 Nov 2023 12:16:28 GMT\n */\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  text-decoration: none;\n  vertical-align: middle;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control: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.control: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.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\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(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control {\n  /* @cssprop [--vvd-nav-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-nav-item-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-nav-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-nav-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-nav-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control.icon-only {\n  display: flex;\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  place-content: center;\n}\n.control:not(.icon-only) {\n  padding-inline: 16px;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n.control {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  padding-inline: 16px;\n  text-decoration: none;\n  vertical-align: middle;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control: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.control: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.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):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 {\n  /* @cssprop [--vvd-nav-disclosure-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-nav-disclosure-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-nav-disclosure-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-nav-disclosure-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-nav-disclosure-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control .toggleIcon {\n  margin-inline-start: auto;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}\n\n.content {\n  display: flex;\n  flex-direction: column;\n  border-inline-start: 1px solid var(--vvd-color-neutral-200);\n  gap: 4px;\n  margin-block: 4px;\n  margin-inline-start: 20px;\n  padding-inline-start: 12px;\n}\n\ndetails > summary {\n  list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n  display: none;\n}";
 
-class NavItem extends TextAnchor {
-  getBodyTemplate() {
-    return html`<slot name="meta"></slot>`;
+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;
+};
+class NavDisclosure extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.ariaCurrent = null;
+    this.#onToggle = () => {
+      this.open = this.details.open;
+      this.$emit("toggle", void 0, { bubbles: false });
+    };
   }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.details.addEventListener("toggle", this.#onToggle);
+    this.details.open = this.open;
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.details.removeEventListener("toggle", this.#onToggle);
+  }
+  #onToggle;
 }
-applyMixins(NavItem, AffixIcon);
+__decorateClass([
+  attr
+], NavDisclosure.prototype, "label", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], NavDisclosure.prototype, "open", 2);
+__decorateClass([
+  attr({ attribute: "aria-current" })
+], NavDisclosure.prototype, "ariaCurrent", 2);
+applyMixins(NavDisclosure, AffixIcon);
 
-const NavItemTemplate = (context, definition) => html`
-      ${textAnchorTemplate(context)}
-    `;
+function getAriaCurrent(ariaCurrent, open) {
+  return ariaCurrent && !open;
+}
+const NavDisclosureTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  const iconTag = context.tagFor(Icon);
+  return html`<details class="base" ${ref("details")} ?open=${(x) => x.open}>
+        <summary class="control"
+            role="button"
+            aria-controls="disclosure-content"
+			aria-expanded="${(x) => x.open}"
+			?aria-current=${(x) => getAriaCurrent(x.ariaCurrent, x.open)}>
+					${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+            ${(x) => x.label}
+						<slot name="meta"></slot>
+			${when((x) => x.open, html`<${iconTag} class="toggleIcon" name='chevron-up-solid'></${iconTag}>`)}
+			${when((x) => !x.open, html`<${iconTag} class="toggleIcon" name='chevron-down-solid'></${iconTag}>`)}
+			${() => focusTemplate}
+        </summary>
+        <div class="content" id="disclosure-content">
+			<slot></slot>
+		</div>
+    </details>
+	`;
+};
 
-const navItemDefinition = NavItem.compose({
-  baseName: "nav-item",
-  template: NavItemTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const navDisclosureDefinition = NavDisclosure.compose({
+  baseName: "nav-disclosure",
+  template: NavDisclosureTemplate,
+  styles
 });
-const navItemRegistries = [navItemDefinition(), ...iconRegistries, ...focusRegistries];
-const registerNavItem = registerFactory(navItemRegistries);
+const navDisclosureRegistries = [navDisclosureDefinition(), ...iconRegistries, ...focusRegistries];
+const registerNavDisclosure = registerFactory(navDisclosureRegistries);
 
-export { navItemRegistries as a, navItemDefinition as n, registerNavItem as r };
+export { navDisclosureRegistries as a, navDisclosureDefinition as n, registerNavDisclosure as r };

package/shared/definition31.js

@@ -1,20 +1,33 @@
-import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition26.js';
+import { f as focusRegistries } from './definition58.js';
+import { A as AffixIcon } from './affix.js';
+import { T as TextAnchor } from './text-anchor.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { t as textAnchorTemplate } from './text-anchor.template.js';
 
-const styles = "nav {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Thu, 30 Nov 2023 11:42:28 GMT\n */\n.control {\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 12px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  text-decoration: none;\n  vertical-align: middle;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.control: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.control: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.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):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 {\n  /* @cssprop [--vvd-nav-item-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-nav-item-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-nav-item-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-nav-item-accent-faint=var(--vvd-color-neutral-50)] */\n  --_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));\n  /* @cssprop [--vvd-nav-item-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-nav-item-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control.icon-only {\n  display: flex;\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n  place-content: center;\n}\n.control:not(.icon-only) {\n  padding-inline: 16px;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\nslot[name=icon] {\n  font-size: 20px;\n  line-height: 1;\n}";
 
-class Nav extends FoundationElement {
+class NavItem extends TextAnchor {
+  getBodyTemplate() {
+    return html`<slot name="meta"></slot>`;
+  }
 }
+applyMixins(NavItem, AffixIcon);
 
-const NavTemplate = () => html`
-		<nav><slot></slot></nav>
+const NavItemTemplate = (context, definition) => html`
+      ${textAnchorTemplate(context)}
     `;
 
-const navDefinition = Nav.compose({
-  baseName: "nav",
-  template: NavTemplate,
-  styles
+const navItemDefinition = NavItem.compose({
+  baseName: "nav-item",
+  template: NavItemTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-const navRegistries = [navDefinition()];
-const registerNav = registerFactory(navRegistries);
+const navItemRegistries = [navItemDefinition(), ...iconRegistries, ...focusRegistries];
+const registerNavItem = registerFactory(navItemRegistries);
 
-export { navRegistries as a, navDefinition as n, registerNav as r };
+export { navItemRegistries as a, navItemDefinition as n, registerNavItem as r };

package/shared/definition32.js

@@ -1,60 +1,20 @@
-import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition25.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import './index2.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
+import { F as FoundationElement, h as html, r as registerFactory } from './index.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: flex-start;\n  padding: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 16px;\n}\n.base.connotation-success {\n  /* @cssprop [--vvd-note-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-note-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-note-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-note-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-note-success-backdrop, var(--vvd-color-success-50));\n}\n.base.connotation-information {\n  /* @cssprop [--vvd-note-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-note-information-primary, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-note-information-intermediate=var(--vvd-color-information-500)] */\n  --_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));\n  /* @cssprop [--vvd-note-information-backdrop=var(--vvd-color-information-50)] */\n  --_connotation-color-backdrop: var(--vvd-note-information-backdrop, var(--vvd-color-information-50));\n}\n.base.connotation-alert {\n  /* @cssprop [--vvd-note-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-note-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-note-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-note-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-note-alert-backdrop, var(--vvd-color-alert-50));\n}\n.base.connotation-warning {\n  /* @cssprop [--vvd-note-warning-primary=var(--vvd-color-warning-300)] */\n  --_connotation-color-primary: var(--vvd-note-warning-primary, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-note-warning-intermediate=var(--vvd-color-warning-300)] */\n  --_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));\n  /* @cssprop [--vvd-note-warning-backdrop=var(--vvd-color-warning-50)] */\n  --_connotation-color-backdrop: var(--vvd-note-warning-backdrop, var(--vvd-color-warning-50));\n}\n.base:not(.connotation-success, .connotation-information, .connotation-alert, .connotation-warning) {\n  /* @cssprop [--vvd-note-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-note-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-note-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-note-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-note-accent-backdrop, var(--vvd-color-canvas));\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@supports (contain: content) {\n  .base {\n    contain: content;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n\nslot[name=icon] {\n  color: var(--_appearance-color-outline);\n  font-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n\n.text {\n  display: flex;\n  min-height: 24px;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 4px;\n  text-align: start;\n}\n.text .headline {\n  font: var(--vvd-typography-base-bold);\n}\n.text .message {\n  font: var(--vvd-typography-base);\n}";
+const styles = "nav {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\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;
-};
-class Note extends FoundationElement {
+class Nav extends FoundationElement {
 }
-__decorateClass([
-  attr
-], Note.prototype, "headline", 2);
-__decorateClass([
-  attr
-], Note.prototype, "connotation", 2);
-applyMixins(Note, AffixIcon);
 
-const getClasses = ({ connotation }) => classNames(
-  "base",
-  `connotation-${connotation}`
-);
-function getHeaderTemplate() {
-  return html`<div class="headline">${(x) => x.headline}</div>`;
-}
-const NoteTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html`
-    <div class="${getClasses}">
-			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-			<div class="text">
-	        ${when((x) => x.headline, getHeaderTemplate())}
-			    <slot class="message"></slot>
-			</div>
-    </div>
-`;
-};
+const NavTemplate = () => html`
+		<nav><slot></slot></nav>
+    `;
 
-const noteDefinition = Note.compose({
-  baseName: "note",
-  template: NoteTemplate,
+const navDefinition = Nav.compose({
+  baseName: "nav",
+  template: NavTemplate,
   styles
 });
-const noteRegistries = [noteDefinition(), ...iconRegistries];
-const registerNote = registerFactory(noteRegistries);
+const navRegistries = [navDefinition()];
+const registerNav = registerFactory(navRegistries);
 
-export { noteRegistries as a, noteDefinition as n, registerNote as r };
+export { navRegistries as a, navDefinition as n, registerNav as r };