@vonage/vivid 3.31.0 → 3.34.0

package/shared/definition28.js

@@ -1,56 +1,97 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { E as Elevation, e as elevationRegistries } from './definition8.js';
-import { c as classNames } from './class-names.js';
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition24.js';
+import { f as focusRegistries } from './definition55.js';
+import { A as AffixIcon, a as affixIconTemplateFactory } 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';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 GMT\n */\n.base {\n  z-index: 1;\n  block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n  font: var(--vvd-typography-heading-4);\n  inline-size: 100%;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  background-color: var(--header-bg-color, var(--vvd-color-canvas));\n  block-size: inherit;\n  color: var(--vvd-color-canvas-text);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n  --vvd-header-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 04 Sep 2023 12:44:18 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\n.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 Header extends FoundationElement {
+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.elevationShadow = false;
-    this.alternate = false;
+    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;
 }
-__decorate([attr({
-  attribute: 'elevation-shadow',
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Header.prototype, "elevationShadow", void 0);
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Header.prototype, "alternate", void 0);
+__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 getPartAlternate = ({
-  alternate
-}) => classNames(['vvd-theme-alternate', Boolean(alternate)]);
-const headerTemplate = context => {
-  const elevationTag = context.tagFor(Elevation);
-  return html`
-    <${elevationTag} dp="4" ?no-shadow=${x => !x.elevationShadow}>
-      <header class="base" part="base">
-        <!-- a container is needed to distinguish the surface background color of the
-        element from its shadow when applying elevation with alternate -->
-        <div class="container" part="${getPartAlternate}">
-          <section class="header-content">
-            <slot></slot>
-          </section>
-          <section class="header-content">
-            <slot name="action-items"></slot>
-          </section>
-        </div>
-      </header>
-    </${elevationTag}>
-    <div class="app-content">
-      <slot name="app-content"></slot>
-    </div>
+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)}
+            ${(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 headerDefinition = Header.compose({
-  baseName: 'header',
-  template: headerTemplate,
-  styles: css_248z
+const navDisclosureDefinition = NavDisclosure.compose({
+  baseName: "nav-disclosure",
+  template: NavDisclosureTemplate,
+  styles
 });
-const headerRegistries = [headerDefinition(), ...elevationRegistries];
-const registerHeader = registerFactory(headerRegistries);
+const navDisclosureRegistries = [navDisclosureDefinition(), ...iconRegistries, ...focusRegistries];
+const registerNavDisclosure = registerFactory(navDisclosureRegistries);
 
-export { headerRegistries as a, headerDefinition as h, registerHeader as r };
+export { navDisclosureRegistries as a, navDisclosureDefinition as n, registerNavDisclosure as r };

package/shared/definition29.js

@@ -1,46 +1,33 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { c as classNames } from './class-names.js';
+import { h as html, r as registerFactory } from './index.js';
+import { a as iconRegistries } from './definition24.js';
+import { f as focusRegistries } from './definition55.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';
 
-var AUTO_SIZING;
-(function (AUTO_SIZING) {
-  AUTO_SIZING["Fit"] = "fit";
-  AUTO_SIZING["Fill"] = "fill";
-})(AUTO_SIZING || (AUTO_SIZING = {}));
-class Layout extends FoundationElement {}
-__decorate([attr, __metadata("design:type", String)], Layout.prototype, "gutters", void 0);
-__decorate([attr({
-  attribute: 'column-basis'
-}), __metadata("design:type", String)], Layout.prototype, "columnBasis", void 0);
-__decorate([attr({
-  attribute: 'column-spacing'
-}), __metadata("design:type", String)], Layout.prototype, "columnSpacing", void 0);
-__decorate([attr({
-  attribute: 'row-spacing'
-}), __metadata("design:type", String)], Layout.prototype, "rowSpacing", void 0);
-__decorate([attr({
-  attribute: 'auto-sizing'
-}), __metadata("design:type", String)], Layout.prototype, "autoSizing", void 0);
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 04 Sep 2023 12:44:18 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\n.icon {\n  font-size: 20px;\n  line-height: 1;\n}";
 
-var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: var(--layout-grid-template-rows, min-content);\n}\n.control.column-basis-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n  column-gap: var(--layout-column-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.column-spacing-small-inline {\n  column-gap: var(--layout-column-gap, 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.column-spacing-small-block {\n  column-gap: var(--layout-column-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0);\n}\n.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block), .control.column-spacing-medium {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.column-spacing-medium-inline {\n  column-gap: var(--layout-column-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.column-spacing-medium-block {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0);\n}\n.control.column-spacing-large {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.column-spacing-large-inline {\n  column-gap: var(--layout-column-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.column-spacing-large-block {\n  column-gap: var(--layout-column-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0);\n}\n.control.row-spacing-small {\n  row-gap: var(--layout-row-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.row-spacing-small-inline {\n  row-gap: var(--layout-row-gap, 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))));\n}\n.control.row-spacing-small-block {\n  row-gap: var(--layout-row-gap, calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0);\n}\n.control:not(.row-spacing-small):not(.row-spacing-small-inline):not(.row-spacing-small-block):not(.row-spacing-medium):not(.row-spacing-medium-inline):not(.row-spacing-medium-block):not(.row-spacing-large):not(.row-spacing-large-inline):not(.row-spacing-large-block), .control.row-spacing-medium {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.row-spacing-medium-inline {\n  row-gap: var(--layout-row-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.row-spacing-medium-block {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0);\n}\n.control.row-spacing-large {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.row-spacing-large-inline {\n  row-gap: var(--layout-row-gap, 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)));\n}\n.control.row-spacing-large-block {\n  row-gap: var(--layout-row-gap, calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0);\n}\n.control.gutters-small {\n  margin: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.gutters-small-inline {\n  margin: 0 calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));\n}\n.control.gutters-small-block {\n  margin: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) - calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16))) 0;\n}\n.control.gutters-medium {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.gutters-medium-inline {\n  margin: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.gutters-medium-block {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)) 0;\n}\n.control.gutters-large {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.gutters-large-inline {\n  margin: 0 calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.gutters-large-block {\n  margin: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) 0;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
+class NavItem extends TextAnchor {
+  getBodyTemplate() {
+    return html`<slot name="meta"></slot>`;
+  }
+}
+applyMixins(NavItem, AffixIcon);
 
-const getClasses = ({
-  columnBasis,
-  gutters,
-  columnSpacing,
-  autoSizing,
-  rowSpacing
-}) => classNames('control', [`column-basis-${columnBasis}`, Boolean(columnBasis)], [`gutters-${gutters}`, Boolean(gutters)], [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)], [`row-spacing-${rowSpacing ? rowSpacing : columnSpacing}`, Boolean(rowSpacing) || Boolean(columnSpacing)], [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]);
-const layoutTemplate = () => html`
-        <div class="${getClasses}">
-			<slot></slot>
-		</div>`;
+const NavItemTemplate = (context, definition) => html`
+      ${textAnchorTemplate(context)}
+    `;
 
-const layoutDefinition = Layout.compose({
-  baseName: 'layout',
-  template: layoutTemplate,
-  styles: css_248z
+const navItemDefinition = NavItem.compose({
+  baseName: "nav-item",
+  template: NavItemTemplate,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true
+  }
 });
-const layoutRegistries = [layoutDefinition()];
-const registerLayout = registerFactory(layoutRegistries);
+const navItemRegistries = [navItemDefinition(), ...iconRegistries, ...focusRegistries];
+const registerNavItem = registerFactory(navItemRegistries);
 
-export { layoutRegistries as a, layoutDefinition as l, registerLayout as r };
+export { navItemRegistries as a, navItemDefinition as n, registerNavItem as r };

package/shared/definition3.js

@@ -1,31 +1,68 @@
-import { h as html, r as registerFactory } from './index.js';
-import { I as Icon } from './icon.js';
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
 
-var css_248z = ":host {\n  display: inline-block;\n  vertical-align: sub;\n}\n\n.control {\n  display: flex;\n  margin: unset;\n  block-size: var(--_icon-block-size);\n  color: currentColor;\n  contain: strict;\n  inline-size: var(--_icon-block-size);\n}\n.control.connotation-accent {\n  /* @cssprop [--vvd-icon-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text));\n}\n.control.connotation-announcement {\n  /* @cssprop [--vvd-icon-announcement-primary=var(--vvd-color-announcement-500)] */\n  --_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500));\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-icon-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-icon-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-icon-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500));\n}\n.control.connotation-information {\n  /* @cssprop [--vvd-icon-information-primary=var(--vvd-color-information-500)] */\n  --_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500));\n}\n.control.size--6 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.size--5 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n.control.size--4 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.control.size--3 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.control.size--2 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.control.size--1 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 4));\n}\n.control.size-0 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.control.size-1 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 4));\n}\n.control.size-2 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.control.size-3 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 12));\n}\n.control.size-4 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.control.size-5 {\n  --_icon-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n}\n.control:not(.size--6, .size--5, .size--4, .size--3, .size--2, .size--1, .size-0, .size-1, .size-2, .size-3, .size-4, .size-5) {\n  --_icon-block-size: 1em;\n}\n\n.control[class*=connotation] {\n  color: var(--_connotation-color-primary);\n}\n\nslot, svg, ::slotted(:where(svg, img)) {\n  margin: auto;\n  block-size: inherit;\n  inline-size: inherit;\n}";
+const styles = "/**\n * Do not edit directly\n * Generated on Mon, 04 Sep 2023 12:44:18 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 getClasses = ({
-  connotation,
-  size
-}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, Boolean(size)]);
-const iconTemplate = () => html`
-
-	<figure class="${getClasses}">
-		<slot>
-			${when(x => !x.iconLoaded, html`<img alt="${x => x.name}" src="${x => x.iconUrl}"/>`)}
-			${when(x => x.iconLoaded && x._svg, x => html`${x._svg}`)}
-		</slot>
-	</figure>
+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 ActionGroup extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.tight = false;
+    this.role = null;
+    this.ariaLabel = null;
+  }
+}
+__decorateClass([
+  attr
+], ActionGroup.prototype, "shape", 2);
+__decorateClass([
+  attr
+], ActionGroup.prototype, "appearance", 2);
+__decorateClass([
+  attr({
+    mode: "boolean"
+  })
+], ActionGroup.prototype, "tight", 2);
+__decorateClass([
+  attr()
+], ActionGroup.prototype, "role", 2);
+__decorateClass([
+  attr({ attribute: "aria-label" })
+], ActionGroup.prototype, "ariaLabel", 2);
 
-`;
+const getClasses = ({
+  appearance,
+  shape,
+  tight
+}) => classNames(
+  "base",
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`shape-${shape}`, Boolean(shape)],
+  ["tight", tight]
+);
+const ActionGroupTemplate = () => html`
+<div class="${getClasses}" 
+	role="${(x) => x.role ? x.role : "group"}" 
+	aria-label="${(x) => x.ariaLabel}">
+  <slot></slot>
+</div>`;
 
-const iconDefinition = Icon.compose({
-  baseName: 'icon',
-  template: iconTemplate,
-  styles: css_248z
+const actionGroupDefinition = ActionGroup.compose({
+  baseName: "action-group",
+  template: ActionGroupTemplate,
+  styles
 });
-const iconRegistries = [iconDefinition()];
-const registerIcon = registerFactory(iconRegistries);
+const actionGroupRegistries = [actionGroupDefinition()];
+const registerActionGroup = registerFactory(actionGroupRegistries);
 
-export { iconDefinition as a, iconRegistries as i, registerIcon as r };
+export { actionGroupDefinition as a, actionGroupRegistries as b, registerActionGroup as r };