@vonage/vivid 4.7.0 → 4.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/custom-elements.json +75 -1
  2. package/lib/breadcrumb/breadcrumb.d.ts +4 -1
  3. package/lib/breadcrumb-item/breadcrumb-item.d.ts +5 -3
  4. package/package.json +1 -1
  5. package/shared/breadcrumb-item.cjs +162 -20
  6. package/shared/breadcrumb-item.js +163 -21
  7. package/shared/definition10.cjs +52 -68
  8. package/shared/definition10.js +54 -70
  9. package/shared/definition11.cjs +1 -1
  10. package/shared/definition11.js +1 -1
  11. package/shared/definition17.cjs +1 -1
  12. package/shared/definition17.js +1 -1
  13. package/shared/definition20.cjs +73 -54
  14. package/shared/definition20.js +73 -54
  15. package/shared/definition21.cjs +27 -12
  16. package/shared/definition21.js +27 -12
  17. package/shared/definition36.cjs +1 -1
  18. package/shared/definition36.js +1 -1
  19. package/shared/definition44.cjs +7 -0
  20. package/shared/definition44.js +7 -0
  21. package/shared/definition46.cjs +24 -9
  22. package/shared/definition46.js +24 -9
  23. package/shared/definition48.cjs +1 -1
  24. package/shared/definition48.js +1 -1
  25. package/shared/definition6.cjs +1 -1
  26. package/shared/definition6.js +1 -1
  27. package/shared/definition9.cjs +1 -19
  28. package/shared/definition9.js +2 -20
  29. package/shared/patterns/anchor.d.ts +18 -0
  30. package/shared/patterns/anchored.d.ts +4 -4
  31. package/shared/patterns/aria-global.d.ts +21 -0
  32. package/shared/text-anchor.cjs +84 -2
  33. package/shared/text-anchor.js +84 -2
  34. package/styles/core/all.css +1 -1
  35. package/styles/core/theme.css +1 -1
  36. package/styles/core/typography.css +1 -1
  37. package/styles/tokens/theme-dark.css +4 -4
  38. package/styles/tokens/theme-light.css +4 -4
  39. package/styles/tokens/vivid-2-compat.css +1 -1
  40. package/shared/anchor.cjs +0 -90
  41. package/shared/anchor.js +0 -87
@@ -66,7 +66,7 @@ __decorateClass([
66
66
  ], SplitButton.prototype, "indicatorAriaLabel");
67
67
  applyMixins(SplitButton, AffixIcon, Localized);
68
68
 
69
- const styles = ":host{--_vvd-split-button-accent-firm-wrapper: var( --vvd-split-button-accent-firm );--_vvd-split-button-cta-firm-wrapper: var( --vvd-split-button-cta-firm );--_vvd-split-button-success-firm-wrapper: var( --vvd-split-button-success-firm );--_vvd-split-button-alert-firm-wrapper: var( --vvd-split-button-alert-firm );--_vvd-split-button-announcement-firm-wrapper: var( --vvd-split-button-announcement-firm )}:where(.control,.indicator):not(.appearance-filled,.appearance-outlined){--vvd-split-button-accent-firm: var( --_vvd-split-button-accent-firm-wrapper, var(--vvd-split-button-accent-primary) );--vvd-split-button-cta-firm: var( --_vvd-split-button-cta-firm-wrapper, var(--vvd-split-button-cta-primary) );--vvd-split-button-success-firm: var( --_vvd-split-button-success-firm-wrapper, var(--vvd-split-button-success-primary) );--vvd-split-button-alert-firm: var( --_vvd-split-button-alert-firm-wrapper, var(--vvd-split-button-alert-primary) );--vvd-split-button-announcement-firm: var( --_vvd-split-button-announcement-firm-wrapper, var(--vvd-split-button-announcement-primary) )}:host{display:inline-block}.base{display:inline-flex;justify-content:flex-start;inline-size:inherit}.control.connotation-cta,.indicator.connotation-cta{--_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success,.indicator.connotation-success{--_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert,.indicator.connotation-alert{--_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50))}.control.connotation-announcement,.indicator.connotation-announcement{--_connotation-color-primary: var(--vvd-split-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-split-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-split-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-split-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-split-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-split-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-split-button-announcement-faint, var(--vvd-color-announcement-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement),.indicator:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled,.indicator.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined,.indicator.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.indicator{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)),.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-filled,.indicator:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined,.indicator:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled),.indicator:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled,.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined,.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)),.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control,.indicator{display:inline-flex;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--_appearance-color-outline);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle}@supports (user-select: none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-inline-end:0;border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap)}.control:not(.appearance-filled){--focus-stroke-gap-color: transparent}.control.appearance-outlined{--focus-inset: -1px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_split-button-block-size)}}.control:not(.icon-only){flex-grow:1;inline-size:inherit}.control.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-super-condensed:not(.icon-only){--_split-button-icon-gap: 4px;padding-inline:8px}.control.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed:not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:12px}.control.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control.size-expanded:not(.icon-only){--_split-button-icon-gap: 10px;padding-inline:20px}.control:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_border-radius: 8px}.control:not(.shape-pill).size-super-condensed,.control:not(.shape-pill).super-condensed{--_border-radius: 4px}.control.shape-pill{--_border-radius: 24px}.control .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.indicator{position:relative;border-bottom-right-radius:var(--_border-radius);border-inline-start:0;border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate}.indicator:not(.appearance-filled){--focus-stroke-gap-color: transparent}.indicator.appearance-outlined{--focus-inset: 1px}.indicator:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.indicator:not(:disabled){cursor:pointer}.indicator:disabled{cursor:not-allowed}.indicator:before{position:absolute;background-color:var(--_appearance-color-text);content:\"\";inline-size:1px;inset-inline-start:0;opacity:.35}.indicator:not(.appearance-filled,.appearance-outlined):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined):before{block-size:100%}.indicator.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.shape-pill){--_border-radius: 8px}.indicator:not(.shape-pill).size-super-condensed,.indicator:not(.shape-pill).super-condensed{--_border-radius: 4px}.indicator.shape-pill{--_border-radius: 24px}.icon{line-height:1}.icon-trailing .icon{order:1}.control>.icon{font-size:calc(var(--_split-button-block-size) / 2)}";
69
+ const styles = ":host{--_vvd-split-button-accent-firm-wrapper: var( --vvd-split-button-accent-firm );--_vvd-split-button-cta-firm-wrapper: var( --vvd-split-button-cta-firm );--_vvd-split-button-success-firm-wrapper: var( --vvd-split-button-success-firm );--_vvd-split-button-alert-firm-wrapper: var( --vvd-split-button-alert-firm );--_vvd-split-button-announcement-firm-wrapper: var( --vvd-split-button-announcement-firm )}:where(.control,.indicator):not(.appearance-filled,.appearance-outlined){--vvd-split-button-accent-firm: var( --_vvd-split-button-accent-firm-wrapper, var(--vvd-split-button-accent-primary) );--vvd-split-button-cta-firm: var( --_vvd-split-button-cta-firm-wrapper, var(--vvd-split-button-cta-primary) );--vvd-split-button-success-firm: var( --_vvd-split-button-success-firm-wrapper, var(--vvd-split-button-success-primary) );--vvd-split-button-alert-firm: var( --_vvd-split-button-alert-firm-wrapper, var(--vvd-split-button-alert-primary) );--vvd-split-button-announcement-firm: var( --_vvd-split-button-announcement-firm-wrapper, var(--vvd-split-button-announcement-primary) )}:host{display:inline-block}.base{display:inline-flex;justify-content:flex-start;inline-size:inherit}.control.connotation-cta,.indicator.connotation-cta{--_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success,.indicator.connotation-success{--_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert,.indicator.connotation-alert{--_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50))}.control.connotation-announcement,.indicator.connotation-announcement{--_connotation-color-primary: var(--vvd-split-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-split-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-split-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-split-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-split-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-split-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-split-button-announcement-faint, var(--vvd-color-announcement-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement),.indicator:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled,.indicator.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined,.indicator.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control,.indicator{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined,.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)),.indicator:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-filled,.indicator:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined,.indicator:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled),.indicator:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled,.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined,.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)),.indicator:where(:active,[aria-expanded=true]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control,.indicator{display:inline-flex;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--_appearance-color-outline);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle}@supports (user-select: none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-inline-end:0;border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap)}.control:not(.appearance-filled){--focus-stroke-gap-color: transparent}.control.appearance-outlined{--focus-inset: -1px}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_split-button-block-size)}}.control:not(.icon-only){flex-grow:1;inline-size:inherit}.control.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-super-condensed:not(.icon-only){--_split-button-icon-gap: 4px;padding-inline:8px}.control.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed:not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:12px}.control.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control.size-expanded:not(.icon-only){--_split-button-icon-gap: 10px;padding-inline:20px}.control:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_border-radius: 8px}.control:not(.shape-pill).size-super-condensed,.control:not(.shape-pill).super-condensed{--_border-radius: 4px}.control.shape-pill{--_border-radius: 24px}.control .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.indicator{position:relative;border-bottom-right-radius:var(--_border-radius);border-inline-start:0;border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate}.indicator:not(.appearance-filled){--focus-stroke-gap-color: transparent}.indicator.appearance-outlined{--focus-inset: 1px}.indicator:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.indicator:not(:disabled){cursor:pointer}.indicator:disabled{cursor:not-allowed}.indicator:before{position:absolute;background-color:var(--_appearance-color-text);content:\"\";inline-size:1px;inset-inline-start:0;opacity:.35}.indicator:not(.appearance-filled,.appearance-outlined):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined):before{block-size:100%}.indicator.size-super-condensed{--_split-button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_split-button-inline-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended)}.indicator:not(.shape-pill){--_border-radius: 8px}.indicator:not(.shape-pill).size-super-condensed,.indicator:not(.shape-pill).super-condensed{--_border-radius: 4px}.indicator.shape-pill{--_border-radius: 24px}.icon{line-height:1}.icon-trailing .icon{order:1}.control>.icon{font-size:calc(var(--_split-button-block-size) / 2)}";
70
70
 
71
71
  const getClasses = ({
72
72
  connotation,
@@ -6,7 +6,7 @@ const icon = require('./icon.cjs');
6
6
  const when = require('./when.cjs');
7
7
  const classNames = require('./class-names.cjs');
8
8
 
9
- const styles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}";
9
+ const styles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}";
10
10
 
11
11
  var __defProp = Object.defineProperty;
12
12
  var __decorateClass = (decorators, target, key, kind) => {
@@ -4,7 +4,7 @@ import { I as Icon } from './icon.js';
4
4
  import { w as when } from './when.js';
5
5
  import { c as classNames } from './class-names.js';
6
6
 
7
- const styles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}";
7
+ const styles = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}";
8
8
 
9
9
  var __defProp = Object.defineProperty;
10
10
  var __decorateClass = (decorators, target, key, kind) => {
@@ -10,24 +10,6 @@ const classNames = require('./class-names.cjs');
10
10
 
11
11
  const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
12
12
 
13
- var __defProp = Object.defineProperty;
14
- var __decorateClass = (decorators, target, key, kind) => {
15
- var result = void 0 ;
16
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
17
- if (decorator = decorators[i])
18
- result = (decorator(target, key, result) ) || result;
19
- if (result) __defProp(target, key, result);
20
- return result;
21
- };
22
- class BreadcrumbItem extends breadcrumbItem.BreadcrumbItem {
23
- constructor() {
24
- super();
25
- }
26
- }
27
- __decorateClass([
28
- index.attr
29
- ], BreadcrumbItem.prototype, "text");
30
-
31
13
  const getClasses = (_) => classNames.classNames("base");
32
14
  const BreadcrumbItemTemplate = (context, definition) => {
33
15
  const iconTag = context.tagFor(icon.Icon);
@@ -44,7 +26,7 @@ const BreadcrumbItemTemplate = (context, definition) => {
44
26
  </div>`;
45
27
  };
46
28
 
47
- const breadcrumbItemDefinition = BreadcrumbItem.compose({
29
+ const breadcrumbItemDefinition = breadcrumbItem.BreadcrumbItem.compose({
48
30
  baseName: "breadcrumb-item",
49
31
  template: BreadcrumbItemTemplate,
50
32
  styles,
@@ -1,6 +1,6 @@
1
- import { a as attr, h as html, r as registerFactory } from './index.js';
1
+ import { h as html, r as registerFactory } from './index.js';
2
2
  import { a as iconRegistries } from './definition27.js';
3
- import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
3
+ import { B as BreadcrumbItem } from './breadcrumb-item.js';
4
4
  import { t as textAnchorTemplate } from './text-anchor.template.js';
5
5
  import { I as Icon } from './icon.js';
6
6
  import { w as when } from './when.js';
@@ -8,24 +8,6 @@ import { c as classNames } from './class-names.js';
8
8
 
9
9
  const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
10
10
 
11
- var __defProp = Object.defineProperty;
12
- var __decorateClass = (decorators, target, key, kind) => {
13
- var result = void 0 ;
14
- for (var i = decorators.length - 1, decorator; i >= 0; i--)
15
- if (decorator = decorators[i])
16
- result = (decorator(target, key, result) ) || result;
17
- if (result) __defProp(target, key, result);
18
- return result;
19
- };
20
- class BreadcrumbItem extends BreadcrumbItem$1 {
21
- constructor() {
22
- super();
23
- }
24
- }
25
- __decorateClass([
26
- attr
27
- ], BreadcrumbItem.prototype, "text");
28
-
29
11
  const getClasses = (_) => classNames("base");
30
12
  const BreadcrumbItemTemplate = (context, definition) => {
31
13
  const iconTag = context.tagFor(Icon);
@@ -0,0 +1,18 @@
1
+ import { ARIAGlobalStatesAndProperties } from './aria-global';
2
+ export declare class Anchor {
3
+ download: string;
4
+ href: string;
5
+ hreflang: string;
6
+ ping: string;
7
+ referrerpolicy: string;
8
+ rel: string;
9
+ target: '_self' | '_blank' | '_parent' | '_top';
10
+ type: string;
11
+ }
12
+ export declare class DelegatesARIALink {
13
+ ariaExpanded: 'true' | 'false' | string | null;
14
+ }
15
+ export interface DelegatesARIALink extends ARIAGlobalStatesAndProperties {
16
+ }
17
+ export interface Anchor extends DelegatesARIALink {
18
+ }
@@ -14,10 +14,10 @@ export declare function anchored<T extends {
14
14
  _slottedAnchor?: HTMLElement[] | undefined;
15
15
  _slottedAnchorChanged(): void;
16
16
  _anchorEl?: HTMLElement | undefined;
17
- "__#6@#updateAnchorEl": () => void;
18
- "__#6@#observer"?: MutationObserver | undefined;
19
- "__#6@#observeMissingAnchor": (anchorId: string) => void;
20
- "__#6@#cleanupObserverIfNeeded": () => void;
17
+ "__#7@#updateAnchorEl": () => void;
18
+ "__#7@#observer"?: MutationObserver | undefined;
19
+ "__#7@#observeMissingAnchor": (anchorId: string) => void;
20
+ "__#7@#cleanupObserverIfNeeded": () => void;
21
21
  connectedCallback(): void;
22
22
  disconnectedCallback(): void;
23
23
  };
@@ -0,0 +1,21 @@
1
+ export declare class ARIAGlobalStatesAndProperties {
2
+ ariaAtomic: 'true' | 'false' | string | null;
3
+ ariaBusy: 'true' | 'false' | string | null;
4
+ ariaControls: string | null;
5
+ ariaCurrent: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | string | null;
6
+ ariaDescribedby: string | null;
7
+ ariaDetails: string | null;
8
+ ariaDisabled: 'true' | 'false' | string | null;
9
+ ariaErrormessage: string | null;
10
+ ariaFlowto: string | null;
11
+ ariaHaspopup: 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | string | null;
12
+ ariaHidden: 'false' | 'true' | string | null;
13
+ ariaInvalid: 'false' | 'true' | 'grammar' | 'spelling' | string | null;
14
+ ariaKeyshortcuts: string | null;
15
+ ariaLabel: string | null;
16
+ ariaLabelledby: string | null;
17
+ ariaLive: 'assertive' | 'off' | 'polite' | string | null;
18
+ ariaOwns: string | null;
19
+ ariaRelevant: 'additions' | 'additions text' | 'all' | 'removals' | 'text' | string | null;
20
+ ariaRoledescription: string | null;
21
+ }
@@ -1,9 +1,91 @@
1
1
  'use strict';
2
2
 
3
3
  const affix = require('./affix.cjs');
4
- const anchor = require('./anchor.cjs');
5
4
  const index = require('./index.cjs');
6
5
  const applyMixins = require('./apply-mixins.cjs');
6
+ const ariaGlobal = require('./aria-global.cjs');
7
+ const startEnd = require('./start-end.cjs');
8
+
9
+ /**
10
+ * An Anchor Custom HTML Element.
11
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
12
+ *
13
+ * @slot start - Content which can be provided before the anchor content
14
+ * @slot end - Content which can be provided after the anchor content
15
+ * @slot - The default slot for anchor content
16
+ * @csspart control - The anchor element
17
+ * @csspart content - The element wrapping anchor content
18
+ *
19
+ * @public
20
+ */
21
+ class Anchor extends index.FoundationElement {
22
+ constructor() {
23
+ super(...arguments);
24
+ /**
25
+ * Overrides the focus call for where delegatesFocus is unsupported.
26
+ * This check works for Chrome, Edge Chromium, FireFox, and Safari
27
+ * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
28
+ */
29
+ this.handleUnsupportedDelegatesFocus = () => {
30
+ var _a;
31
+ // Check to see if delegatesFocus is supported
32
+ if (window.ShadowRoot &&
33
+ !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
34
+ ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
35
+ this.focus = () => {
36
+ var _a;
37
+ (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
38
+ };
39
+ }
40
+ };
41
+ }
42
+ /**
43
+ * @internal
44
+ */
45
+ connectedCallback() {
46
+ super.connectedCallback();
47
+ this.handleUnsupportedDelegatesFocus();
48
+ }
49
+ }
50
+ index.__decorate([
51
+ index.attr
52
+ ], Anchor.prototype, "download", void 0);
53
+ index.__decorate([
54
+ index.attr
55
+ ], Anchor.prototype, "href", void 0);
56
+ index.__decorate([
57
+ index.attr
58
+ ], Anchor.prototype, "hreflang", void 0);
59
+ index.__decorate([
60
+ index.attr
61
+ ], Anchor.prototype, "ping", void 0);
62
+ index.__decorate([
63
+ index.attr
64
+ ], Anchor.prototype, "referrerpolicy", void 0);
65
+ index.__decorate([
66
+ index.attr
67
+ ], Anchor.prototype, "rel", void 0);
68
+ index.__decorate([
69
+ index.attr
70
+ ], Anchor.prototype, "target", void 0);
71
+ index.__decorate([
72
+ index.attr
73
+ ], Anchor.prototype, "type", void 0);
74
+ index.__decorate([
75
+ index.observable
76
+ ], Anchor.prototype, "defaultSlottedContent", void 0);
77
+ /**
78
+ * Includes ARIA states and properties relating to the ARIA link role
79
+ *
80
+ * @public
81
+ */
82
+ class DelegatesARIALink {
83
+ }
84
+ index.__decorate([
85
+ index.attr({ attribute: "aria-expanded" })
86
+ ], DelegatesARIALink.prototype, "ariaExpanded", void 0);
87
+ applyMixins.applyMixins(DelegatesARIALink, ariaGlobal.ARIAGlobalStatesAndProperties);
88
+ applyMixins.applyMixins(Anchor, startEnd.StartEnd, DelegatesARIALink);
7
89
 
8
90
  var __defProp = Object.defineProperty;
9
91
  var __decorateClass = (decorators, target, key, kind) => {
@@ -14,7 +96,7 @@ var __decorateClass = (decorators, target, key, kind) => {
14
96
  if (result) __defProp(target, key, result);
15
97
  return result;
16
98
  };
17
- class TextAnchor extends anchor.Anchor {
99
+ class TextAnchor extends Anchor {
18
100
  /**
19
101
  * Allows subclasses to provide a body template that will be rendered inside the anchor.
20
102
  * @internal
@@ -1,7 +1,89 @@
1
1
  import { A as AffixIcon } from './affix.js';
2
- import { A as Anchor } from './anchor.js';
3
- import { a as attr } from './index.js';
2
+ import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
4
3
  import { a as applyMixins } from './apply-mixins.js';
4
+ import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
5
+ import { S as StartEnd } from './start-end.js';
6
+
7
+ /**
8
+ * An Anchor Custom HTML Element.
9
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
10
+ *
11
+ * @slot start - Content which can be provided before the anchor content
12
+ * @slot end - Content which can be provided after the anchor content
13
+ * @slot - The default slot for anchor content
14
+ * @csspart control - The anchor element
15
+ * @csspart content - The element wrapping anchor content
16
+ *
17
+ * @public
18
+ */
19
+ class Anchor extends FoundationElement {
20
+ constructor() {
21
+ super(...arguments);
22
+ /**
23
+ * Overrides the focus call for where delegatesFocus is unsupported.
24
+ * This check works for Chrome, Edge Chromium, FireFox, and Safari
25
+ * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
26
+ */
27
+ this.handleUnsupportedDelegatesFocus = () => {
28
+ var _a;
29
+ // Check to see if delegatesFocus is supported
30
+ if (window.ShadowRoot &&
31
+ !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
32
+ ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
33
+ this.focus = () => {
34
+ var _a;
35
+ (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
36
+ };
37
+ }
38
+ };
39
+ }
40
+ /**
41
+ * @internal
42
+ */
43
+ connectedCallback() {
44
+ super.connectedCallback();
45
+ this.handleUnsupportedDelegatesFocus();
46
+ }
47
+ }
48
+ __decorate([
49
+ attr
50
+ ], Anchor.prototype, "download", void 0);
51
+ __decorate([
52
+ attr
53
+ ], Anchor.prototype, "href", void 0);
54
+ __decorate([
55
+ attr
56
+ ], Anchor.prototype, "hreflang", void 0);
57
+ __decorate([
58
+ attr
59
+ ], Anchor.prototype, "ping", void 0);
60
+ __decorate([
61
+ attr
62
+ ], Anchor.prototype, "referrerpolicy", void 0);
63
+ __decorate([
64
+ attr
65
+ ], Anchor.prototype, "rel", void 0);
66
+ __decorate([
67
+ attr
68
+ ], Anchor.prototype, "target", void 0);
69
+ __decorate([
70
+ attr
71
+ ], Anchor.prototype, "type", void 0);
72
+ __decorate([
73
+ observable
74
+ ], Anchor.prototype, "defaultSlottedContent", void 0);
75
+ /**
76
+ * Includes ARIA states and properties relating to the ARIA link role
77
+ *
78
+ * @public
79
+ */
80
+ class DelegatesARIALink {
81
+ }
82
+ __decorate([
83
+ attr({ attribute: "aria-expanded" })
84
+ ], DelegatesARIALink.prototype, "ariaExpanded", void 0);
85
+ applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
86
+ applyMixins(Anchor, StartEnd, DelegatesARIALink);
5
87
 
6
88
  var __defProp = Object.defineProperty;
7
89
  var __decorateClass = (decorators, target, key, kind) => {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 07 Oct 2024 13:48:37 GMT
3
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
4
4
  */
5
5
  .vvd-root {
6
6
  color-scheme: var(--vvd-color-scheme);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 07 Oct 2024 13:48:37 GMT
3
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
4
4
  */
5
5
  .vvd-root {
6
6
  color-scheme: var(--vvd-color-scheme);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 07 Oct 2024 13:48:37 GMT
3
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
4
4
  */
5
5
  .vvd-root:root {
6
6
  --vvd-size-font-scale-base: 1rem;
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 07 Oct 2024 13:48:37 GMT
3
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Mon, 07 Oct 2024 13:48:37 GMT
7
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Mon, 07 Oct 2024 13:48:37 GMT
11
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Mon, 07 Oct 2024 13:48:37 GMT
15
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 07 Oct 2024 13:48:37 GMT
3
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Mon, 07 Oct 2024 13:48:37 GMT
7
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Mon, 07 Oct 2024 13:48:37 GMT
11
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Mon, 07 Oct 2024 13:48:37 GMT
15
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Mon, 07 Oct 2024 13:48:37 GMT
3
+ * Generated on Thu, 10 Oct 2024 12:10:49 GMT
4
4
  */
5
5
  .vvd-root, ::part(vvd-root),
6
6
  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
package/shared/anchor.cjs DELETED
@@ -1,90 +0,0 @@
1
- 'use strict';
2
-
3
- const index = require('./index.cjs');
4
- const applyMixins = require('./apply-mixins.cjs');
5
- const ariaGlobal = require('./aria-global.cjs');
6
- const startEnd = require('./start-end.cjs');
7
-
8
- /**
9
- * An Anchor Custom HTML Element.
10
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
11
- *
12
- * @slot start - Content which can be provided before the anchor content
13
- * @slot end - Content which can be provided after the anchor content
14
- * @slot - The default slot for anchor content
15
- * @csspart control - The anchor element
16
- * @csspart content - The element wrapping anchor content
17
- *
18
- * @public
19
- */
20
- class Anchor extends index.FoundationElement {
21
- constructor() {
22
- super(...arguments);
23
- /**
24
- * Overrides the focus call for where delegatesFocus is unsupported.
25
- * This check works for Chrome, Edge Chromium, FireFox, and Safari
26
- * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
27
- */
28
- this.handleUnsupportedDelegatesFocus = () => {
29
- var _a;
30
- // Check to see if delegatesFocus is supported
31
- if (window.ShadowRoot &&
32
- !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
33
- ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
34
- this.focus = () => {
35
- var _a;
36
- (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
37
- };
38
- }
39
- };
40
- }
41
- /**
42
- * @internal
43
- */
44
- connectedCallback() {
45
- super.connectedCallback();
46
- this.handleUnsupportedDelegatesFocus();
47
- }
48
- }
49
- index.__decorate([
50
- index.attr
51
- ], Anchor.prototype, "download", void 0);
52
- index.__decorate([
53
- index.attr
54
- ], Anchor.prototype, "href", void 0);
55
- index.__decorate([
56
- index.attr
57
- ], Anchor.prototype, "hreflang", void 0);
58
- index.__decorate([
59
- index.attr
60
- ], Anchor.prototype, "ping", void 0);
61
- index.__decorate([
62
- index.attr
63
- ], Anchor.prototype, "referrerpolicy", void 0);
64
- index.__decorate([
65
- index.attr
66
- ], Anchor.prototype, "rel", void 0);
67
- index.__decorate([
68
- index.attr
69
- ], Anchor.prototype, "target", void 0);
70
- index.__decorate([
71
- index.attr
72
- ], Anchor.prototype, "type", void 0);
73
- index.__decorate([
74
- index.observable
75
- ], Anchor.prototype, "defaultSlottedContent", void 0);
76
- /**
77
- * Includes ARIA states and properties relating to the ARIA link role
78
- *
79
- * @public
80
- */
81
- class DelegatesARIALink {
82
- }
83
- index.__decorate([
84
- index.attr({ attribute: "aria-expanded" })
85
- ], DelegatesARIALink.prototype, "ariaExpanded", void 0);
86
- applyMixins.applyMixins(DelegatesARIALink, ariaGlobal.ARIAGlobalStatesAndProperties);
87
- applyMixins.applyMixins(Anchor, startEnd.StartEnd, DelegatesARIALink);
88
-
89
- exports.Anchor = Anchor;
90
- exports.DelegatesARIALink = DelegatesARIALink;