npm - @uh-design-system/component-library - Versions diffs - 1.4.0-rc.1 → 1.4.0-rc.2 - Mend

@uh-design-system/component-library 1.4.0-rc.1 → 1.4.0-rc.2

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 (2332) hide show

package/dist/components/p-BXMhXLUf.js ADDED Viewed

@@ -0,0 +1,158 @@
+import { p as proxyCustomElement, M as Mixin, c as createEvent, h } from './p-GalXVdFP.js';
+import { c as classNames } from './p-BfTCfPZ1.js';
+import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
+import { o as opensInNewTab, v as visuallyHiddenAssistiveText } from './p-CFr-8gB_.js';
+import { i as idGenerator, t as transformTagName, a as ifDefined, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
+import { l as linkFactory } from './p-Bg3rizUf.js';
+import { c as cx } from './p-C34PGDVY.js';
+import { d as defineCustomElement$2 } from './p-DIxFOW85.js';
+import { d as defineCustomElement$1 } from './p-Cq_RwLX7.js';
+const dsLinkCtaCss = ".ds-no-style-leak *{all:unset;box-sizing:border-box;display:block}:host{display:inline-block;vertical-align:middle}.ds-link-cta__oSBnIJ{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-semibold);outline:4px solid transparent;justify-content:center;cursor:pointer;user-select:none;--webkit-user-select:none}.ds-link-cta__oSBnIJ[aria-disabled=true]{cursor:default;pointer-events:none;background-color:transparent !important;border-color:transparent !important;color:var(--ds-textColor-disabled-onLight) !important}.ds-link-cta__oSBnIJ__text{padding:0 var(--ds-spacing-3xSmall, 4px);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);text-decoration-line:var(--ds-link-cta-text-decoration, underline);text-decoration-style:solid;text-decoration-skip-ink:auto;text-decoration-thickness:7%;text-underline-offset:12%;text-underline-position:from-font}.ds-link-cta__oSBnIJ--no-text .ds-link-cta__oSBnIJ__text{padding:0}.ds-link-cta__oSBnIJ:has(.ds-link-cta__oSBnIJ__spinner):not(.ds-link-cta__oSBnIJ--small) .ds-link-cta__oSBnIJ__value{margin-left:var(--ds-spacing-3xSmall)}.ds-link-cta__oSBnIJ--icon-only{aspect-ratio:1;justify-content:center}.ds-link-cta__oSBnIJ:has(.ds-link-cta__oSBnIJ__text:empty){width:var(--ds-link-cta-min-height);aspect-ratio:1;padding-left:0;padding-right:0}.ds-link-cta__oSBnIJ:has(.ds-link-cta__oSBnIJ__text:empty) .ds-link-cta__oSBnIJ__icon{margin:0}.ds-link-cta__oSBnIJ:not(.ds-link-cta__oSBnIJ--small):not(.ds-link-cta__oSBnIJ--secondary):not(.ds-link-cta__oSBnIJ--supplementary){border-width:0;border-style:none;font-size:var(--ds-fontSize-18);min-height:2.75rem;min-width:var(--ds-link-cta-min-width, auto);padding-block:var(--ds-link-cta-padding-block, var(--ds-spacing-3xSmall));padding-inline:var(--ds-link-cta-padding-inline-start, var(--ds-link-cta-padding-inline, var(--ds-spacing-xSmall))) var(--ds-link-cta-padding-inline-end, var(--ds-link-cta-padding-inline, var(--ds-spacing-xSmall)))}.ds-link-cta__oSBnIJ:not(.ds-link-cta__oSBnIJ--small).ds-link-cta__oSBnIJ--secondary{border-width:var(--ds-borderWidth-thin);border-style:solid;font-size:var(--ds-fontSize-18);min-height:2.75rem;min-width:var(--ds-link-cta-min-width, auto);padding-block:var(--ds-link-cta-padding-block, var(--ds-spacing-3xSmall));padding-inline:var(--ds-link-cta-padding-inline-start, var(--ds-link-cta-padding-inline, var(--ds-spacing-xSmall))) var(--ds-link-cta-padding-inline-end, var(--ds-link-cta-padding-inline, var(--ds-spacing-xSmall)))}.ds-link-cta__oSBnIJ:not(.ds-link-cta__oSBnIJ--small).ds-link-cta__oSBnIJ--supplementary{border-width:0;border-style:none;font-size:var(--ds-fontSize-18);min-height:2.75rem;min-width:var(--ds-link-cta-min-width, auto);padding-block:var(--ds-link-cta-padding-block, var(--ds-spacing-3xSmall));padding-inline:var(--ds-link-cta-padding-inline-start, var(--ds-link-cta-padding-inline, var(--ds-spacing-xSmall))) var(--ds-link-cta-padding-inline-end, var(--ds-link-cta-padding-inline, var(--ds-spacing-xSmall)))}.ds-link-cta__oSBnIJ:not(.ds-link-cta__oSBnIJ--small).ds-link-cta__oSBnIJ--icon-only{padding-left:0;padding-right:0}.ds-link-cta__oSBnIJ--small:not(.ds-link-cta__oSBnIJ--secondary):not(.ds-link-cta__oSBnIJ--supplementary){border-width:0;border-style:none;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);min-height:2rem;min-width:var(--ds-link-cta-min-width, auto);padding-block:var(--ds-link-cta-padding-block, var(--ds-spacing-4xSmall));padding-inline:var(--ds-link-cta-padding-inline-start, var(--ds-link-cta-padding-inline, var(--ds-spacing-2xSmall))) var(--ds-link-cta-padding-inline-end, var(--ds-link-cta-padding-inline, var(--ds-spacing-2xSmall)))}.ds-link-cta__oSBnIJ--small.ds-link-cta__oSBnIJ--secondary{border-width:var(--ds-borderWidth-thin);border-style:solid;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);min-height:2rem;min-width:var(--ds-link-cta-min-width, auto);padding-block:var(--ds-link-cta-padding-block, var(--ds-spacing-4xSmall));padding-inline:var(--ds-link-cta-padding-inline-start, var(--ds-link-cta-padding-inline, var(--ds-spacing-2xSmall))) var(--ds-link-cta-padding-inline-end, var(--ds-link-cta-padding-inline, var(--ds-spacing-2xSmall)))}.ds-link-cta__oSBnIJ--small.ds-link-cta__oSBnIJ--supplementary{border-width:0;border-style:none;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);min-height:2rem;min-width:var(--ds-link-cta-min-width, auto);padding-block:var(--ds-link-cta-padding-block, var(--ds-spacing-4xSmall));padding-inline:var(--ds-link-cta-padding-inline-start, var(--ds-link-cta-padding-inline, var(--ds-spacing-2xSmall))) var(--ds-link-cta-padding-inline-end, var(--ds-link-cta-padding-inline, var(--ds-spacing-2xSmall)))}.ds-link-cta__oSBnIJ--small.ds-link-cta__oSBnIJ--icon-only{padding-left:0;padding-right:0;width:32px}.ds-link-cta__oSBnIJ--small .ds-link-cta__oSBnIJ__icon{width:var(--ds-link-cta-icon-size, auto);height:var(--ds-link-cta-icon-size, 1rem)}.ds-link-cta__oSBnIJ__icon--start{margin-right:var(--ds-spacing-3xSmall);margin-left:0}.ds-link-cta__oSBnIJ__icon--end{margin-left:var(--ds-spacing-3xSmall);margin-right:0}.ds-link-cta__oSBnIJ--no-text .ds-link-cta__oSBnIJ__icon--start,.ds-link-cta__oSBnIJ--no-text .ds-link-cta__oSBnIJ__icon--end{margin:0}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--primary.ds-link-cta__oSBnIJ--blue:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--primary.ds-link-cta__oSBnIJ--blue{background-color:var(--ds-link-cta-bg-color, var(--ds-bgColor-primary));border-color:transparent;color:var(--ds-link-cta-text-color, var(--ds-textColor-white))}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--primary.ds-link-cta__oSBnIJ--blue:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--primary.ds-link-cta__oSBnIJ--blue:active{background-color:var(--ds-bgColor-primary-active)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--primary.ds-link-cta__oSBnIJ--black:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--primary.ds-link-cta__oSBnIJ--black{background-color:var(--ds-link-cta-bg-color, var(--ds-bgColor-black));border-color:transparent;color:var(--ds-link-cta-text-color, var(--ds-textColor-white))}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--primary.ds-link-cta__oSBnIJ--black:hover{background-color:var(--ds-bgColor-black-hover)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--primary.ds-link-cta__oSBnIJ--black:active{background-color:var(--ds-bgColor-black-active)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--primary.ds-link-cta__oSBnIJ--white:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--primary.ds-link-cta__oSBnIJ--white{background-color:var(--ds-link-cta-bg-color, var(--ds-bgColor-white));border-color:transparent;color:var(--ds-link-cta-text-color, var(--ds-textColor-default))}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--primary.ds-link-cta__oSBnIJ--white:hover{background-color:var(--ds-bgColor-white-hover)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--primary.ds-link-cta__oSBnIJ--white:active{background-color:var(--ds-bgColor-white-active)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--secondary.ds-link-cta__oSBnIJ--blue:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--secondary.ds-link-cta__oSBnIJ--blue{background-color:var(--ds-link-cta-bg-color, var(--ds-bgColor-secondary));border-color:var(--ds-borderColor-primary);color:var(--ds-link-cta-text-color, var(--ds-textColor-primary))}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--secondary.ds-link-cta__oSBnIJ--blue:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--secondary.ds-link-cta__oSBnIJ--blue:active{background-color:var(--ds-bgColor-secondary-active)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--secondary.ds-link-cta__oSBnIJ--black:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--secondary.ds-link-cta__oSBnIJ--black{background-color:var(--ds-link-cta-bg-color, transparent);border-color:var(--ds-borderColor-black);color:var(--ds-link-cta-text-color, var(--ds-textColor-default))}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--secondary.ds-link-cta__oSBnIJ--black:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--secondary.ds-link-cta__oSBnIJ--black:active{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--secondary.ds-link-cta__oSBnIJ--white:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--secondary.ds-link-cta__oSBnIJ--white{background-color:var(--ds-link-cta-bg-color, transparent);border-color:var(--ds-borderColor-white);color:var(--ds-link-cta-text-color, var(--ds-textColor-white))}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--secondary.ds-link-cta__oSBnIJ--white:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--secondary.ds-link-cta__oSBnIJ--white:active{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--supplementary.ds-link-cta__oSBnIJ--blue:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--supplementary.ds-link-cta__oSBnIJ--blue{background-color:var(--ds-link-cta-bg-color, transparent);border-color:transparent;color:var(--ds-link-cta-text-color, var(--ds-textColor-primary))}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--supplementary.ds-link-cta__oSBnIJ--blue:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--supplementary.ds-link-cta__oSBnIJ--blue:active{background-color:var(--ds-bgColor-secondary-active)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--supplementary.ds-link-cta__oSBnIJ--black:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--supplementary.ds-link-cta__oSBnIJ--black{background-color:var(--ds-link-cta-bg-color, transparent);border-color:transparent;color:var(--ds-link-cta-text-color, var(--ds-textColor-default))}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--supplementary.ds-link-cta__oSBnIJ--black:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--supplementary.ds-link-cta__oSBnIJ--black:active{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--supplementary.ds-link-cta__oSBnIJ--white:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--supplementary.ds-link-cta__oSBnIJ--white{background-color:var(--ds-link-cta-bg-color, transparent);border-color:transparent;color:var(--ds-link-cta-text-color, var(--ds-textColor-white))}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--supplementary.ds-link-cta__oSBnIJ--white:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-link-cta__oSBnIJ.ds-link-cta__oSBnIJ--supplementary.ds-link-cta__oSBnIJ--white:active{background-color:var(--ds-bgColor-transparent-onDark-active)}";
+const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
+const DsLinkCta = proxyCustomElement(class DsLinkCta extends Mixin(linkFactory) {
+    constructor(registerHost) {
+        super(false);
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.dsClick = createEvent(this, "dsClick");
+    }
+    inheritedAttributes = {};
+    linkEl;
+    visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
+    get el() { return this; }
+    dsText;
+    dsVariant = 'primary';
+    dsColour = 'blue';
+    dsSize = 'medium';
+    dsHideIcon = false;
+    dsIcon;
+    dsIconPosition = 'end';
+    dsTag = 'a';
+    dsTabIndex;
+    dsDisabled = false;
+    rel;
+    icon = 'arrow_forward';
+    get currentIcon() {
+        if (this.dsIcon) {
+            return this.dsIcon;
+        }
+        return this.icon;
+    }
+    get linkAttributes() {
+        if (this.dsTag !== 'a')
+            return {};
+        return {
+            href: this.dsHref,
+            hrefLang: this.dsHrefLang,
+            rel: this.rel || this.dsRel,
+            target: this.dsTarget,
+            download: this.dsDownload,
+        };
+    }
+    updateIcon(dsTarget) {
+        if (opensInNewTab(dsTarget)) {
+            this.icon = 'arrow_outward';
+            this.rel = 'noopener noreferrer';
+        }
+        else {
+            this.icon = 'arrow_forward';
+            this.rel = undefined;
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = {
+            ...inheritAttributes(this, this.el),
+            ...inheritAriaAttributes(this.el),
+        };
+        this.updateIcon(this.dsTarget);
+    }
+    onTargetChanged(newValue) {
+        this.updateIcon(newValue);
+    }
+    handleKeyDown = (event) => {
+        switch (event.key) {
+            case ' ':
+                event.preventDefault();
+                this.linkEl?.click();
+                break;
+            case 'Enter':
+                if (this.dsTag === 'span' || !this.dsHref) {
+                    this.linkEl?.click();
+                }
+                break;
+        }
+    };
+    render() {
+        const baseClass = cx('ds-link-cta');
+        const classes = classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsColour}`, `${baseClass}--${this.dsSize}`, {
+            [`${baseClass}--no-text`]: !this.dsText || this.dsText.trim() === '',
+        });
+        const linkTextClasses = classNames(`${baseClass}__text`);
+        const iconClasses = classNames(`${baseClass}__icon`, `${baseClass}__icon--${this.dsIconPosition}`);
+        const DsIcon = transformTagName('ds-icon', 'ds-link-cta', this.el);
+        const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-link-cta', this.el);
+        const { ['aria-label']: attrAriaLabel, ['aria-labelledby']: attrAriaLabelledby, ...restAttributes } = this.inheritedAttributes;
+        const ariaLabel = this.dsAriaLabel || attrAriaLabel;
+        const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
+        const iconElement = !this.dsHideIcon && h(DsIcon, { key: 'befca4b24feba14346cfe4751260f69b6cdcdb5d', dsName: this.currentIcon, class: iconClasses, dsCustomSize: this.dsSize === 'medium' ? '1.5rem' : '1.25rem' });
+        const tabindex = this.dsTabIndex !== undefined ? this.dsTabIndex : this.dsTag === 'a' && !this.dsHref ? '0' : undefined;
+        const role = this.dsTag === 'span' ? 'link' : undefined;
+        return (h(this.dsTag, { key: '71fd52486ed2b718114fb2945161e05f6951cd8b', ref: el => (this.linkEl = el), part: "link", class: classes, onKeyDown: this.handleKeyDown, tabindex: tabindex, ...ifDefined('role', role), ...ifDefined('aria-disabled', this.dsDisabled ? 'true' : undefined), ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...restAttributes, ...this.linkAttributes }, this.dsIconPosition === 'start' && iconElement, h("span", { key: '4ad4eb09a2101b027a8ee020523deeeafb06e18b', class: linkTextClasses }, this.dsText), this.dsIconPosition === 'end' && iconElement, opensInNewTab(this.dsTarget) && (h(DsVisuallyHidden, { key: 'a9f32bbf9fa32b93b6b98ab24f198620018dcf62', id: this.visuallyHiddenAssistiveTextId, dsTag: "span" }, visuallyHiddenAssistiveText()))));
+    }
+    static get watchers() { return {
+        "dsTarget": ["onTargetChanged"]
+    }; }
+    static get style() { return dsLinkCtaCss; }
+}, [257, "ds-link-cta", {
+        "dsRel": [1, "ds-rel"],
+        "dsHrefLang": [1, "ds-href-lang"],
+        "dsHref": [1, "ds-href"],
+        "dsTarget": [1, "ds-target"],
+        "dsDownload": [4, "ds-download"],
+        "dsAriaLabel": [1, "ds-aria-label"],
+        "dsAriaLabelledby": [1, "ds-aria-labelledby"],
+        "dsText": [1, "ds-text"],
+        "dsVariant": [1, "ds-variant"],
+        "dsColour": [1, "ds-colour"],
+        "dsSize": [1, "ds-size"],
+        "dsHideIcon": [4, "ds-hide-icon"],
+        "dsIcon": [1, "ds-icon"],
+        "dsIconPosition": [1, "ds-icon-position"],
+        "dsTag": [1, "ds-tag"],
+        "dsTabIndex": [1, "ds-tab-index"],
+        "dsDisabled": [4, "ds-disabled"],
+        "rel": [32],
+        "icon": [32]
+    }, [[0, "click", "handleClick"]], {
+        "dsTarget": ["onTargetChanged"]
+    }]);
+declareComponentDependencies([h("ds-icon", { dsName: "" }), h("ds-visually-hidden", null)]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-link-cta", "ds-icon", "ds-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-link-cta":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsLinkCta);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ds-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+export { DsLinkCta as D, defineCustomElement as d };

package/dist/components/p-Bg3rizUf.js ADDED Viewed

@@ -0,0 +1,32 @@
+import './p-GalXVdFP.js';
+const linkFactory = (Base) => {
+    const BaseLink = class extends Base {
+        constructor() {
+            super();
+        }
+        dsClick;
+        dsRel;
+        dsHrefLang;
+        dsHref;
+        dsTarget;
+        dsDownload;
+        dsAriaLabel;
+        dsAriaLabelledby;
+        handleClick(event) {
+            this.dsClick.emit(event);
+        }
+        get linkProps() {
+            return {
+                dsHref: this.dsHref,
+                dsHrefLang: this.dsHrefLang,
+                dsRel: this.dsRel,
+                dsTarget: this.dsTarget,
+                dsDownload: this.dsDownload,
+            };
+        }
+    };
+    return BaseLink;
+};
+export { linkFactory as l };

package/dist/components/p-BtwuVYMk.js ADDED Viewed

@@ -0,0 +1,40 @@
+import { p as proxyCustomElement, H, h } from './p-GalXVdFP.js';
+import { c as cx } from './p-C34PGDVY.js';
+import { i as idGenerator } from './p-J5Ghj1_T.js';
+const dsAssistiveTextCss = ".ds-assistive-text__oSBnIJ.sc-ds-assistive-text{display:inline-block;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-block-start:var(--ds-spacing-3xSmall)}";
+const dsAssistiveTextIdGenerator = idGenerator('ds-assistive-text');
+const DsAssistiveText = proxyCustomElement(class DsAssistiveText extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+    }
+    dsId = dsAssistiveTextIdGenerator.next().value;
+    dsText;
+    render() {
+        const baseClass = cx('ds-assistive-text');
+        return (h("small", { key: 'f9da763e0bb66c8a888a2344152923e89c13670a', class: baseClass, id: this.dsId }, h("slot", { key: '913fc3b11626c517805ddf12da782d99294a0195' }, this.dsText)));
+    }
+    static get style() { return dsAssistiveTextCss; }
+}, [262, "ds-assistive-text", {
+        "dsId": [1, "ds-id"],
+        "dsText": [1, "ds-text"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-assistive-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-assistive-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsAssistiveText);
+            }
+            break;
+    } });
+}
+export { DsAssistiveText as D, defineCustomElement as d };

package/dist/components/p-C34PGDVY.js ADDED Viewed

@@ -0,0 +1,5 @@
+import { E as Env } from './p-GalXVdFP.js';
+const cx = (className) => `${className}__${Env.PACKAGE_VERSION}`;
+export { cx as c };

package/dist/components/p-C3xcmSbZ.js ADDED Viewed

@@ -0,0 +1,158 @@
+import { p as proxyCustomElement, M as Mixin, c as createEvent, h } from './p-GalXVdFP.js';
+import { c as cx } from './p-C34PGDVY.js';
+import { c as classNames } from './p-BfTCfPZ1.js';
+import { t as transformTagName, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
+import { t as tabsFactory } from './p-D1DYiRu4.js';
+import { d as defineCustomElement$1 } from './p-DIxFOW85.js';
+const colourNames = ['default', 'neutral', 'white', 'primary', 'info', 'danger', 'success', 'attention'];
+const iconStates = ['hover', 'active'];
+const getIconColourVariable = (name, state) => `ds-iconColor-${name}${state ? `-${state}` : ''}`;
+const baseIconColours = colourNames.map(name => getIconColourVariable(name));
+baseIconColours.reduce((acc, curr) => {
+    acc.push(curr);
+    iconStates.forEach(state => {
+        acc.push(getIconColourVariable(curr, state));
+    });
+    return acc;
+}, []);
+const dsTabCss = ".ds-no-style-leak.sc-ds-tab *.sc-ds-tab{all:unset;box-sizing:border-box;display:block}.sc-ds-tab-h{display:contents}.ds-tab__oSBnIJ.sc-ds-tab{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative;display:inline-flex;flex-direction:row;flex-shrink:0;min-width:44px;min-height:44px;padding:var(--ds-spacing-xSmall);background-color:var(--ds-bgColor-transparent-onLight);color:var(--ds-textColor-secondary);font-variant-numeric:lining-nums proportional-nums;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-style:normal;font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);cursor:default}@media (min-width: 60rem){.ds-tab__oSBnIJ.sc-ds-tab{font-size:var(--ds-fontSize-18)}}.ds-tab__oSBnIJ--selected.sc-ds-tab,.ds-tab__oSBnIJ.sc-ds-tab:hover:not(.ds-tab__oSBnIJ--selected),.ds-tab__oSBnIJ.sc-ds-tab:active:not(.ds-tab__oSBnIJ--selected){color:var(--ds-textColor-default)}.ds-tab__oSBnIJ--container.sc-ds-tab:focus-visible{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 1)}.ds-tab__oSBnIJ--container.ds-tab__oSBnIJ--selected.sc-ds-tab{background-color:var(--ds-bgColor-white)}.ds-tab__oSBnIJ--container.ds-tab__oSBnIJ--selected.sc-ds-tab::after{content:\"\";position:absolute;top:0;left:0;right:0;border-block-start:var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary)}.ds-tab__oSBnIJ--container.ds-tab__oSBnIJ--selected.sc-ds-tab:not(:focus-visible)::before{content:\"\";position:absolute;inset:0;border-inline:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default)}.ds-tab__oSBnIJ--container.sc-ds-tab:hover:not(.ds-tab__oSBnIJ--selected){background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-tab__oSBnIJ--container.sc-ds-tab:active:not(.ds-tab__oSBnIJ--selected){background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-tab__oSBnIJ--line.sc-ds-tab:focus-visible .ds-tab__oSBnIJ__content.sc-ds-tab{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-tab__oSBnIJ--line.ds-tab__oSBnIJ--selected.sc-ds-tab::after{content:\"\";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary)}.ds-tab__oSBnIJ--line.sc-ds-tab:hover:not(.ds-tab__oSBnIJ--selected)::after{content:\"\";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-default)}.ds-tab__oSBnIJ--line.sc-ds-tab:active:not(.ds-tab__oSBnIJ--selected)::after{content:\"\";position:absolute;bottom:0;left:0;right:0;border-block-end:var(--ds-borderWidth-thick) solid var(--ds-borderColor-black)}.ds-tab__oSBnIJ.sc-ds-tab .ds-tab__oSBnIJ__content.sc-ds-tab{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:var(--ds-spacing-2xSmall)}";
+const DsTab = proxyCustomElement(class DsTab extends Mixin(tabsFactory) {
+    constructor(registerHost) {
+        super(false);
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.dsTabClick = createEvent(this, "dsTabClick");
+        this.dsTabFocus = createEvent(this, "dsTabFocus");
+    }
+    get el() { return this; }
+    tablist = null;
+    tabElement;
+    dsTabClick;
+    dsTabFocus;
+    dsId;
+    dsTabPanelId;
+    dsText;
+    dsIconStart;
+    dsIconEnd;
+    dsIconEndColour;
+    hasPrefixSlot = false;
+    hasContentSlot = false;
+    hasSuffixSlot = false;
+    isHovered = false;
+    isActive = false;
+    get DsTablist() {
+        return transformTagName('ds-tablist', 'ds-tab', this.el);
+    }
+    get DsIcon() {
+        return transformTagName('ds-icon', 'ds-tab', this.el);
+    }
+    get iconInteractionState() {
+        if (this.isActive)
+            return 'active';
+        if (this.isHovered)
+            return 'hover';
+        return undefined;
+    }
+    get iconColour() {
+        if (!this.dsIconEndColour)
+            return undefined;
+        return getIconColourVariable(this.dsIconEndColour, this.iconInteractionState);
+    }
+    async setFocus() {
+        this.tabElement?.focus({ preventScroll: true });
+    }
+    handleMouseEnter() {
+        this.isHovered = true;
+    }
+    handleMouseLeave() {
+        this.isHovered = false;
+    }
+    handleMouseDown() {
+        this.isActive = true;
+    }
+    handleMouseUp() {
+        this.isActive = false;
+    }
+    handleFocusIn() {
+        this.dsTabFocus.emit({ tabId: this.dsId });
+    }
+    handleClick() {
+        if (this.context?.currentTab === this.dsId)
+            return;
+        this.dsTabClick.emit({ tabId: this.dsId, tabPanelId: this.dsTabPanelId });
+    }
+    checkSlot = (stateName, selector) => {
+        this[stateName] = this.el.querySelector(selector) !== null;
+    };
+    checkPrefixSlot = () => this.checkSlot('hasPrefixSlot', '[slot="prefix"]');
+    checkContentSlot = () => this.checkSlot('hasContentSlot', '[slot="content"]');
+    checkSuffixSlot = () => this.checkSlot('hasSuffixSlot', '[slot="suffix"]');
+    connectedCallback() {
+        this.tablist = this.el.closest(this.DsTablist);
+        if (this.tablist) {
+            this.tablist.tabConnected();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.tablist) {
+            this.tablist.tabDisconnected();
+        }
+        this.tablist = null;
+    }
+    componentDidLoad() {
+        this.checkPrefixSlot();
+        this.checkContentSlot();
+        this.checkSuffixSlot();
+    }
+    render() {
+        const baseClass = cx('ds-tab');
+        const isSelected = this.context?.currentTab === this.dsId;
+        const classes = classNames(baseClass, {
+            [`${baseClass}--container`]: this.context?.variant === 'container',
+            [`${baseClass}--line`]: this.context?.variant === 'line',
+            [`${baseClass}--selected`]: isSelected,
+        });
+        return (h("div", { key: '1fbc41f2d6654c367ec02206e550fd749d6794b8', ref: elem => (this.tabElement = elem), class: classes, role: "tab", "aria-controls": this.dsTabPanelId, "aria-selected": String(isSelected), tabIndex: isSelected ? 0 : -1 }, h("div", { key: '5bb747568c268122a7bc86ae4ae8a01191441b88', class: `${baseClass}__content` }, h("slot", { key: 'd9229905e2578d66c25ddd782288982d8945779c', name: "prefix", onSlotchange: this.checkPrefixSlot }, !this.hasPrefixSlot && this.dsIconStart && h(this.DsIcon, { key: 'a84247bb0f42bf41b724baa0fda285d2afc80356', dsName: this.dsIconStart })), h("slot", { key: 'b27957b33646cc050f3d155cd0ef92d80ce41dab', name: "content", onSlotchange: this.checkContentSlot }, !this.hasContentSlot && h("span", { key: 'efbc2f4c46ace18ff104978097ac893045e40cd5' }, this.dsText)), h("slot", { key: '5daa646e7d12b185f9d55d04889f717a5556bcc5', name: "suffix", onSlotchange: this.checkSuffixSlot }, !this.hasSuffixSlot && this.dsIconEnd && h(this.DsIcon, { key: 'c7fe446b2fce539f08f1409c674f714992e5f36e', dsName: this.dsIconEnd, dsColour: this.iconColour })))));
+    }
+    static get style() { return dsTabCss; }
+}, [262, "ds-tab", {
+        "dsId": [1, "ds-id"],
+        "dsTabPanelId": [1, "ds-tab-panel-id"],
+        "dsText": [1, "ds-text"],
+        "dsIconStart": [1, "ds-icon-start"],
+        "dsIconEnd": [1, "ds-icon-end"],
+        "dsIconEndColour": [1, "ds-icon-end-colour"],
+        "context": [32],
+        "hasPrefixSlot": [32],
+        "hasContentSlot": [32],
+        "hasSuffixSlot": [32],
+        "isHovered": [32],
+        "isActive": [32],
+        "setFocus": [64]
+    }, [[1, "mouseenter", "handleMouseEnter"], [1, "mouseleave", "handleMouseLeave"], [1, "mousedown", "handleMouseDown"], [1, "mouseup", "handleMouseUp"], [0, "focusin", "handleFocusIn"], [0, "click", "handleClick"]]]);
+declareComponentDependencies([h("ds-icon", { dsName: "" })]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ds-tab", "ds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ds-tab":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DsTab);
+            }
+            break;
+        case "ds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+export { DsTab as D, defineCustomElement as d };

package/dist/components/p-C9U2JkHS.js ADDED Viewed

@@ -0,0 +1,48 @@
+import { t as transformTagName } from './p-J5Ghj1_T.js';
+const CONTEXT_KEY = '__ds_tabs_context__';
+const CONTEXT_UPDATE_EVENT = 'dsTabsContextUpdate';
+function getChildSelector(parentElement) {
+    const tabListTag = transformTagName('ds-tablist', 'ds-tabs', parentElement);
+    const tabPanelTag = transformTagName('ds-tabpanel', 'ds-tabs', parentElement);
+    const tabTag = transformTagName('ds-tab', 'ds-tabs', parentElement);
+    return [tabListTag, tabPanelTag, tabTag].join(', ');
+}
+function isInCurrentTabsBoundary(child, currentTabsElement) {
+    const tabsTag = transformTagName('ds-tabs', 'ds-tabs', currentTabsElement);
+    const closestTabs = child.closest(tabsTag);
+    return closestTabs instanceof HTMLElement && closestTabs === currentTabsElement;
+}
+function dispatchContextUpdate(element, context) {
+    element.dispatchEvent(new CustomEvent(CONTEXT_UPDATE_EVENT, {
+        bubbles: false,
+        detail: { ...context },
+    }));
+}
+function storeTabsContext(element, context) {
+    element[CONTEXT_KEY] = context;
+}
+function provideTabsContext(element, context) {
+    storeTabsContext(element, context);
+    const childSelector = getChildSelector(element);
+    const children = element.querySelectorAll(childSelector);
+    children.forEach(child => {
+        if (isInCurrentTabsBoundary(child, element)) {
+            dispatchContextUpdate(child, context);
+        }
+    });
+}
+function consumeTabsContext(element) {
+    let parent = element.parentElement;
+    while (parent) {
+        if (parent[CONTEXT_KEY]) {
+            const context = parent[CONTEXT_KEY];
+            return context;
+        }
+        parent = parent.parentElement;
+    }
+    console.warn(`${element.tagName} must be used inside ds-tabs component`);
+    return null;
+}
+export { CONTEXT_UPDATE_EVENT as C, consumeTabsContext as c, provideTabsContext as p, storeTabsContext as s };