@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.
- package/custom-elements.json +75 -1
- package/lib/breadcrumb/breadcrumb.d.ts +4 -1
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +5 -3
- package/package.json +1 -1
- package/shared/breadcrumb-item.cjs +162 -20
- package/shared/breadcrumb-item.js +163 -21
- package/shared/definition10.cjs +52 -68
- package/shared/definition10.js +54 -70
- package/shared/definition11.cjs +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition17.cjs +1 -1
- package/shared/definition17.js +1 -1
- package/shared/definition20.cjs +73 -54
- package/shared/definition20.js +73 -54
- package/shared/definition21.cjs +27 -12
- package/shared/definition21.js +27 -12
- package/shared/definition36.cjs +1 -1
- package/shared/definition36.js +1 -1
- package/shared/definition44.cjs +7 -0
- package/shared/definition44.js +7 -0
- package/shared/definition46.cjs +24 -9
- package/shared/definition46.js +24 -9
- package/shared/definition48.cjs +1 -1
- package/shared/definition48.js +1 -1
- package/shared/definition6.cjs +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition9.cjs +1 -19
- package/shared/definition9.js +2 -20
- package/shared/patterns/anchor.d.ts +18 -0
- package/shared/patterns/anchored.d.ts +4 -4
- package/shared/patterns/aria-global.d.ts +21 -0
- package/shared/text-anchor.cjs +84 -2
- package/shared/text-anchor.js +84 -2
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/shared/anchor.cjs +0 -90
- package/shared/anchor.js +0 -87
package/shared/definition48.js
CHANGED
|
@@ -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,
|
package/shared/definition6.cjs
CHANGED
|
@@ -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(--
|
|
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) => {
|
package/shared/definition6.js
CHANGED
|
@@ -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(--
|
|
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) => {
|
package/shared/definition9.cjs
CHANGED
|
@@ -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,
|
package/shared/definition9.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
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
|
|
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
|
-
"__#
|
|
18
|
-
"__#
|
|
19
|
-
"__#
|
|
20
|
-
"__#
|
|
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
|
+
}
|
package/shared/text-anchor.cjs
CHANGED
|
@@ -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
|
|
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
|
package/shared/text-anchor.js
CHANGED
|
@@ -1,7 +1,89 @@
|
|
|
1
1
|
import { A as AffixIcon } from './affix.js';
|
|
2
|
-
import {
|
|
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) => {
|
package/styles/core/all.css
CHANGED
package/styles/core/theme.css
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Thu, 10 Oct 2024 12:10:49 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Thu, 10 Oct 2024 12:10:49 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Thu, 10 Oct 2024 12:10:49 GMT
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* Do not edit directly
|
|
15
|
-
* Generated on
|
|
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
|
|
3
|
+
* Generated on Thu, 10 Oct 2024 12:10:49 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Thu, 10 Oct 2024 12:10:49 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Thu, 10 Oct 2024 12:10:49 GMT
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* Do not edit directly
|
|
15
|
-
* Generated on
|
|
15
|
+
* Generated on Thu, 10 Oct 2024 12:10:49 GMT
|
|
16
16
|
*/
|
|
17
17
|
@property --vvd-size-density {
|
|
18
18
|
syntax: "<integer>";
|
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;
|