@uh-design-system/component-library 0.3.1 → 0.4.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/dist/cjs/component-library.cjs.js +1 -1
- package/dist/cjs/ds-accordion_3.cjs.entry.js +11 -10
- package/dist/cjs/ds-link-with-arrow.cjs.entry.js +3 -3
- package/dist/cjs/ds-link.cjs.entry.js +3 -3
- package/dist/cjs/ds-text-input.cjs.entry.js +3 -3
- package/dist/cjs/ds-visually-hidden.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/00-foundations/typography/stories/typography.stories.js +110 -0
- package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.css +11 -3
- package/dist/collection/components/01-base-components/ds-accordion/ds-accordion.js +6 -6
- package/dist/collection/components/01-base-components/ds-button/ds-button.css +127 -63
- package/dist/collection/components/01-base-components/ds-button/ds-button.js +22 -1
- package/dist/collection/components/01-base-components/ds-button/stories/ds-button.examples.stories.js +6 -0
- package/dist/collection/components/01-base-components/ds-button/stories/ds-button.features.stories.js +10 -0
- package/dist/collection/components/01-base-components/ds-icon/ds-icon.js +2 -2
- package/dist/collection/components/01-base-components/ds-link/ds-link.css +91 -25
- package/dist/collection/components/01-base-components/ds-link/ds-link.js +3 -3
- package/dist/collection/components/01-base-components/ds-link/stories/ds-link.stories.js +1 -1
- package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.css +86 -20
- package/dist/collection/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.js +3 -3
- package/dist/collection/components/01-base-components/ds-link-with-arrow/stories/ds-arrow-link.stories.js +1 -1
- package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.css +30 -11
- package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js +3 -3
- package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.js +1 -1
- package/dist/collection/utils/typography/typographyUtils.js +21 -0
- package/dist/component-library/component-library.css +1 -1
- package/dist/component-library/component-library.esm.js +1 -1
- package/dist/component-library/ds-accordion_3.entry.js +1 -1
- package/dist/component-library/ds-link-with-arrow.entry.js +1 -1
- package/dist/component-library/ds-link.entry.js +1 -1
- package/dist/component-library/ds-text-input.entry.js +1 -1
- package/dist/component-library/ds-visually-hidden.entry.js +1 -1
- package/dist/components/ds-accordion.js +7 -7
- package/dist/components/ds-button2.js +4 -2
- package/dist/components/ds-icon2.js +2 -2
- package/dist/components/ds-link-with-arrow.js +4 -4
- package/dist/components/ds-link.js +4 -4
- package/dist/components/ds-text-input.js +4 -4
- package/dist/components/ds-visually-hidden2.js +1 -1
- package/dist/esm/component-library.js +1 -1
- package/dist/esm/ds-accordion_3.entry.js +11 -10
- package/dist/esm/ds-link-with-arrow.entry.js +3 -3
- package/dist/esm/ds-link.entry.js +3 -3
- package/dist/esm/ds-text-input.entry.js +3 -3
- package/dist/esm/ds-visually-hidden.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/00-foundations/typography/stories/typography.stories.d.ts +9 -0
- package/dist/types/components/01-base-components/ds-button/ds-button.d.ts +1 -0
- package/dist/types/components/01-base-components/ds-button/stories/ds-button.examples.stories.d.ts +1 -0
- package/dist/types/components/01-base-components/ds-button/stories/ds-button.features.stories.d.ts +3 -0
- package/dist/types/components/01-base-components/ds-link/ds-link.d.ts +1 -1
- package/dist/types/components/01-base-components/ds-link-with-arrow/ds-link-with-arrow.d.ts +1 -1
- package/dist/types/components.d.ts +6 -4
- package/dist/types/utils/typography/typographyUtils.d.ts +1 -0
- package/package.json +2 -4
|
@@ -19,7 +19,7 @@ var patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["ds-visually-hidden.cjs",[[1,"ds-visually-hidden"]]],["ds-accordion_3.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"
|
|
22
|
+
return index.bootstrapLazy([["ds-visually-hidden.cjs",[[1,"ds-visually-hidden"]]],["ds-accordion_3.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"fullWidth":[4,"full-width"],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"title"],"role":[1],"hidden":[4],"message":[32]}]]],["ds-text-input.cjs",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"dsId":[1,"id"],"name":[1],"disabled":[4],"optional":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"optionalText":[1,"optional-text"],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]],["ds-link.cjs",[[1,"ds-link",{"text":[1],"size":[1],"variant":[1],"weight":[1],"icon":[1025],"iconPosition":[1025,"icon-position"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"]}]]],["ds-link-with-arrow.cjs",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -6,7 +6,7 @@ const index = require('./index-bfa0f441.js');
|
|
|
6
6
|
const index$1 = require('./index-5b0b9d4c.js');
|
|
7
7
|
const attributes = require('./attributes-f7831329.js');
|
|
8
8
|
|
|
9
|
-
const dsAccordionCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-accordion__open-button{color:var(--ds-textColor-default);outline:var(--ds-borderWidth-thick) solid transparent;fill:var(--ds-textColor-default);position:relative;all:unset;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);position:relative;width:100%}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before,.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{content:\"\";position:absolute;top:0;width:var(--ds-spacing-small);height:100%}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before{left:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{right:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover{cursor:pointer}.ds-accordion__open-button:hover,.ds-accordion__open-button:hover::before,.ds-accordion__open-button:hover::after{background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843))}.ds-accordion__open-button:active,.ds-accordion__open-button:active::before,.ds-accordion__open-button:active::after{background:var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078))}.ds-accordion__open-button:focus-visible{
|
|
9
|
+
const dsAccordionCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-accordion__open-button{color:var(--ds-textColor-default);outline:var(--ds-borderWidth-thick) solid transparent;fill:var(--ds-textColor-default);position:relative;all:unset;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);position:relative;width:100%}.ds-accordion__open-button:focus-visible,.ds-accordion__open-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before,.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{content:\"\";position:absolute;top:0;width:var(--ds-spacing-small);height:100%}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before{left:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after{right:calc(var(--ds-spacing-small) * -1)}.ds-accordion__open-button:hover{cursor:pointer}.ds-accordion__open-button:hover,.ds-accordion__open-button:hover::before,.ds-accordion__open-button:hover::after{background:var(--ds-bgColor-transparent-onLight-hover, rgba(0, 0, 0, 0.1019607843))}.ds-accordion__open-button:active,.ds-accordion__open-button:active::before,.ds-accordion__open-button:active::after{background:var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078))}.ds-accordion__open-button:focus-visible{z-index:1}.ds-accordion__open-button.ds-accordion--default{padding:var(--ds-spacing-small) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__open-button.ds-accordion--compact{font-size:var(--ds-fontSize-16);padding:var(--ds-spacing-xSmall) var(--ds-spacing-small) var(--ds-spacing-xSmall) var(--ds-spacing-small);line-height:var(--ds-lineHeight-large);font-weight:var(--ds-fontWeight-semibold)}.ds-accordion__open-button.ds-accordion--border-aligned:not(:focus-visible){padding-inline:0;margin-inline:var(--ds-spacing-small);position:relative;width:calc(100% - var(--ds-spacing-large))}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border){border-top:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC)}:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible{border-top-color:transparent}.ds-accordion__open-button[aria-expanded=false]{border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC)}.ds-accordion__panel--border-aligned{position:relative;width:calc(100% - 32px)}.ds-accordion__panel--border-aligned::before{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;left:0px;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--border-aligned::after{display:inline-block;content:\" \";position:absolute;bottom:-1px;height:1px;right:0px;background:var(--ds-palette-white);width:var(--ds-spacing-small)}.ds-accordion__panel--expanded{display:block;border-bottom:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);padding-inline:var(--ds-spacing-small)}::slotted([slot=header]){color:var(--ds-textColor-default)}.ds-accordion__content{color:var(--ds-textColor-default, #1A1A1A);font-family:var(--ds-fontFamily-body);padding-block:var(--ds-spacing-small)}.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-xLarge);letter-spacing:var(--ds-letterSpacing-wide)}@media (min-width: 30rem){.ds-accordion__content .ds-accordion--default{font-size:var(--ds-fontSize-18)}}.ds-accordion__content .ds-accordion--compact{font-size:var(--fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);letter-spacing:var(--letterSpacing-wide)}.ds-accordion__close-button{display:flex;flex-direction:row;gap:var(--ds-spacing-2xSmall);font-family:var(--ds-fontFamily-body);letter-spacing:var(--ds-letterSpacing-wide);width:max-content}";
|
|
10
10
|
const DsAccordionStyle0 = dsAccordionCss;
|
|
11
11
|
|
|
12
12
|
const DsAccordion = class {
|
|
@@ -55,18 +55,18 @@ const DsAccordion = class {
|
|
|
55
55
|
render() {
|
|
56
56
|
const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
|
|
57
57
|
const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
|
|
58
|
-
return (index.h("div", { key: '
|
|
58
|
+
return (index.h("div", { key: '830fb0965ea8904b662280b775a159528d7ddc03', class: index$1.classNames('ds-accordion', `ds-accordion--${this.variant}`, {
|
|
59
59
|
'ds-accordion--border-aligned': this.borderAligned
|
|
60
|
-
}), role: "presentation" }, index.h("div", { key: '
|
|
60
|
+
}), role: "presentation" }, index.h("div", { key: 'a3d6e538dda9513bfb578379cced370be686ce62', class: "ds-accordion__item" }, index.h("div", { key: '7c7819bf62cdffb9ac4a8c4f7b1609b31efcdd68', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, index.h("button", { key: '2e2a9fdfced241b23bdcfb444777cdd2fd0a764c', class: index$1.classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
|
|
61
61
|
'ds-accordion--border-aligned': this.borderAligned,
|
|
62
62
|
'ds-accordion--hide-top-border': this.hideTopBorder
|
|
63
|
-
}), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, index.h("span", { key: '
|
|
63
|
+
}), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, index.h("span", { key: 'eca6297dd43b58849c8b46f66034ec51bb20bf1e', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
|
|
64
64
|
index.h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" })
|
|
65
|
-
: index.h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), index.h("slot", { key: '
|
|
65
|
+
: index.h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), index.h("slot", { key: '9ddb913b968b8bbbe47d4be341766503fdcf4df7', name: "header" }))), index.h("div", { key: '21cee953529ccd21487b7ac0001aac10bf3d563e', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: index$1.classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
|
|
66
66
|
'ds-accordion__panel--border-aligned': this.borderAligned,
|
|
67
67
|
'ds-accordion__panel--expanded': this.isExpanded
|
|
68
|
-
}), hidden: !this.isExpanded }, index.h("div", { key: '
|
|
69
|
-
index.h("ds-button", { key: '
|
|
68
|
+
}), hidden: !this.isExpanded }, index.h("div", { key: 'a9d5dfdbf190936156b0b37b6ef2b877741f6ae1', class: "ds-accordion__content" }, index.h("slot", { key: '34ca29ec15581a470fe2c740fceea9fcdc7cb64a', name: "content" })), this.useCloseButton &&
|
|
69
|
+
index.h("ds-button", { key: '1dfa2fad990fc6651a620efd8b3169346bb08648', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: index$1.classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
|
|
70
70
|
'ds-accordion--border-aligned': this.borderAligned
|
|
71
71
|
}), fontWeight: 'semiBold', variant: 'supplementary', colour: 'black', icon: 'keyboard_arrow_up', iconPosition: 'start', onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: 'button' })))));
|
|
72
72
|
}
|
|
@@ -76,7 +76,7 @@ const DsAccordion = class {
|
|
|
76
76
|
};
|
|
77
77
|
DsAccordion.style = DsAccordionStyle0;
|
|
78
78
|
|
|
79
|
-
const dsButtonCss = ".sc-ds-button-h{display:inline-block}.ds-button.sc-ds-button{align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-bold);outline:4px solid transparent;border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}.ds-button.sc-ds-button:focus{outline-offset:2px;outline-width:2px}.ds-button.icon-only.sc-ds-button{padding-left:0;padding-right:0;aspect-ratio:1;justify-content:center}.ds-button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.primary.blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}.ds-button.primary.blue[aria-disabled=true].sc-ds-button,.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}.ds-button.primary.black[aria-disabled=true].sc-ds-button,.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}.ds-button.primary.white[aria-disabled=true].sc-ds-button,.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}.ds-button.secondary.blue[aria-disabled=true].sc-ds-button,.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}.ds-button.secondary.black[aria-disabled=true].sc-ds-button,.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}.ds-button.secondary.white[aria-disabled=true].sc-ds-button,.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary);padding-right:0;padding-left:0}.ds-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}.ds-button.supplementary.blue[aria-disabled=true].sc-ds-button,.ds-button.supplementary.blue.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default);padding-right:0;padding-left:0}.ds-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}.ds-button.supplementary.black[aria-disabled=true].sc-ds-button,.ds-button.supplementary.black.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white);padding-right:0;padding-left:0}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}.ds-button.supplementary.white[aria-disabled=true].sc-ds-button,.ds-button.supplementary.white.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.small.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}.ds-button.small.icon-only.sc-ds-button{width:32px}.ds-button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}";
|
|
79
|
+
const dsButtonCss = ".sc-ds-button-h{display:inline-block}[full-width].sc-ds-button-h{width:100%}.ds-button.sc-ds-button{width:100%;align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-bold);outline:4px solid transparent;justify-content:center}.ds-button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}.ds-button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}.ds-button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}.ds-button.sc-ds-button:not(.small):not(.secondary){border-width:0px;font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - 0px)}.ds-button.sc-ds-button:not(.small).secondary{border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) calc(var(--ds-spacing-small) - var(--ds-borderWidth-thick))}.ds-button.sc-ds-button:not(.small).icon-only{padding-left:0;padding-right:0}.ds-button.small.sc-ds-button:not(.secondary){border-width:0px;font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - 0px)}.ds-button.small.secondary.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) calc(var(--ds-spacing-2xSmall) - var(--ds-borderWidth-thin))}.ds-button.small.icon-only.sc-ds-button{padding-left:0;padding-right:0;width:32px}.ds-button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}.ds-button.primary.blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.blue.sc-ds-button:focus-visible,.ds-button.primary.blue.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-button.primary.blue.sc-ds-button:active,.ds-button.primary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}.ds-button.primary.blue[aria-disabled=true].sc-ds-button,.ds-button.primary.blue.disabled.sc-ds-button,.ds-button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}.ds-button.primary.black.sc-ds-button:focus-visible,.ds-button.primary.black.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}.ds-button.primary.black.sc-ds-button:active,.ds-button.primary.black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}.ds-button.primary.black[aria-disabled=true].sc-ds-button,.ds-button.primary.black.disabled.sc-ds-button,.ds-button.primary.black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.primary.white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}.ds-button.primary.white.sc-ds-button:focus-visible,.ds-button.primary.white.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.primary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}.ds-button.primary.white.sc-ds-button:active,.ds-button.primary.white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}.ds-button.primary.white[aria-disabled=true].sc-ds-button,.ds-button.primary.white.disabled.sc-ds-button,.ds-button.primary.white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.secondary.blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}.ds-button.secondary.blue.sc-ds-button:focus-visible,.ds-button.secondary.blue.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.secondary.blue.sc-ds-button:active,.ds-button.secondary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.secondary.blue[aria-disabled=true].sc-ds-button,.ds-button.secondary.blue.disabled.sc-ds-button,.ds-button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}.ds-button.secondary.black.sc-ds-button:focus-visible,.ds-button.secondary.black.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.secondary.black.sc-ds-button:active,.ds-button.secondary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.secondary.black[aria-disabled=true].sc-ds-button,.ds-button.secondary.black.disabled.sc-ds-button,.ds-button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}.ds-button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}.ds-button.secondary.white.sc-ds-button:focus-visible,.ds-button.secondary.white.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.secondary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.secondary.white.sc-ds-button:active,.ds-button.secondary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.secondary.white[aria-disabled=true].sc-ds-button,.ds-button.secondary.white.disabled.sc-ds-button,.ds-button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}.ds-button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary)}.ds-button.supplementary.blue.sc-ds-button:focus-visible,.ds-button.supplementary.blue.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-button.supplementary.blue.sc-ds-button:active,.ds-button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}.ds-button.supplementary.blue.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.blue.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.blue[aria-disabled=true].sc-ds-button,.ds-button.supplementary.blue.disabled.sc-ds-button,.ds-button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default)}.ds-button.supplementary.black.sc-ds-button:focus-visible,.ds-button.supplementary.black.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-button.supplementary.black.sc-ds-button:active,.ds-button.supplementary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-button.supplementary.black.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.black.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.black[aria-disabled=true].sc-ds-button,.ds-button.supplementary.black.disabled.sc-ds-button,.ds-button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}.ds-button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white)}.ds-button.supplementary.white.sc-ds-button:focus-visible,.ds-button.supplementary.white.sc-ds-button:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}.ds-button.supplementary.white.sc-ds-button:active,.ds-button.supplementary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}.ds-button.supplementary.white.sc-ds-button:not(.small){padding-right:var(--ds-borderWidth-thick);padding-left:var(--ds-borderWidth-thick)}.ds-button.supplementary.white.small.sc-ds-button{padding-right:var(--ds-borderWidth-thin);padding-left:var(--ds-borderWidth-thin)}.ds-button.supplementary.white[aria-disabled=true].sc-ds-button,.ds-button.supplementary.white.disabled.sc-ds-button,.ds-button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}.ds-button.icon-only.sc-ds-button{aspect-ratio:1;justify-content:center}";
|
|
80
80
|
const DsButtonStyle0 = dsButtonCss;
|
|
81
81
|
|
|
82
82
|
const DsButton = class {
|
|
@@ -96,6 +96,7 @@ const DsButton = class {
|
|
|
96
96
|
iconPosition = 'start';
|
|
97
97
|
type = 'button';
|
|
98
98
|
disabled = false;
|
|
99
|
+
fullWidth = false;
|
|
99
100
|
ariaDisabled = 'false';
|
|
100
101
|
componentWillLoad() {
|
|
101
102
|
this.inheritedAttributes = {
|
|
@@ -145,7 +146,7 @@ const DsButton = class {
|
|
|
145
146
|
});
|
|
146
147
|
const iconSize = this.size === 'small' ? '1rem' : undefined;
|
|
147
148
|
const isDisabled = this.disabled || this.ariaDisabled === 'true';
|
|
148
|
-
return (index.h("button", { key: '
|
|
149
|
+
return (index.h("button", { key: '57b49111cb6e4957d1cd69cdfd09b99fe620b614', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false', ...this.inheritedAttributes }, index.h("slot", { key: '56532d67c5a1df5e831025422db0c886bd731db0', name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '6028ee6b589400340f21411b252c7ba85732fa1c', name: this.icon, size: iconSize })), this.value && index.h("span", { key: '8b98003443f13f88f76b9a9a611eb1abc4daee74', class: "button-value" }, this.value), index.h("slot", { key: '35ad0a3aa154b8afba9bd50ffe30c1e25a37f382', name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '7eebd8b5754c0dd1d3d6a435234728518a16a405', name: this.icon, size: iconSize }))));
|
|
149
150
|
}
|
|
150
151
|
};
|
|
151
152
|
DsButton.style = DsButtonStyle0;
|
|
@@ -1074,7 +1075,7 @@ const DsIcon = class {
|
|
|
1074
1075
|
}
|
|
1075
1076
|
}
|
|
1076
1077
|
render() {
|
|
1077
|
-
return (index.h(index.Fragment, { key: '
|
|
1078
|
+
return (index.h(index.Fragment, { key: 'cc6f636f46e631b82570aaa156bbced5e7c23fc6' }, index.h("span", { key: 'c3305714b164807c119ff1e9ab4d9496dd3eb105', class: 'ds-icon--container', innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
|
|
1078
1079
|
}
|
|
1079
1080
|
};
|
|
1080
1081
|
DsIcon.style = DsIconStyle0;
|
|
@@ -8,7 +8,7 @@ const attributes = require('./attributes-f7831329.js');
|
|
|
8
8
|
const utils = require('./utils-8b73aa91.js');
|
|
9
9
|
const linkUtils = require('./linkUtils-695da37c.js');
|
|
10
10
|
|
|
11
|
-
const dsLinkWithArrowCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px}:root{--ds-fontFamily-heading:\"Open Sans\", sans-serif;--ds-fontFamily-body:\"Open Sans\", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:-2;--ds-letterSpacing-tight:-1.4;--ds-letterSpacing-normal:-0.4;--ds-letterSpacing-wide:0;--ds-letterSpacing-xWide:0.4;--ds-lineHeight-small:1;--ds-lineHeight-medium:1.2;--ds-lineHeight-large:1.5;--ds-lineHeight-xLarge:1.75;--ds-fontWidth-normal:100;--ds-fontWidth-condense:90;--ds-number-style:proportional-figures;}@supports (font-variation-settings: normal){:root{--ds-fontFamily-heading:\"Open Sans Variable\", sans-serif;--ds-fontFamily-body:\"Open Sans Variable\", sans-serif}}.bodyText{line-height:
|
|
11
|
+
const dsLinkWithArrowCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px}:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-fontFamily-heading:\"Open Sans\", sans-serif;--ds-fontFamily-body:\"Open Sans\", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:-2;--ds-letterSpacing-tight:-1.4;--ds-letterSpacing-normal:-0.4;--ds-letterSpacing-wide:0;--ds-letterSpacing-xWide:0.4;--ds-lineHeight-small:1;--ds-lineHeight-medium:1.2;--ds-lineHeight-large:1.5;--ds-lineHeight-xLarge:1.75;--ds-fontWidth-normal:100;--ds-fontWidth-condense:90;--ds-number-style:proportional-figures;}@supports (font-variation-settings: normal){:root{--ds-fontFamily-heading:\"Open Sans Variable\", sans-serif;--ds-fontFamily-body:\"Open Sans Variable\", sans-serif}}:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-bodyText--2xLarge{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--2xLarge{font-size:var(--ds-fontSize-22)}}.ds-bodyText--xLarge{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--xLarge{font-size:var(--ds-fontSize-20)}}.ds-bodyText--large{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--large{font-size:var(--ds-fontSize-18)}}.ds-bodyText--medium{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--medium{font-size:var(--ds-fontSize-16)}}.ds-bodyText--small{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--small{font-size:var(--ds-fontSize-14)}}:host{display:inline-block}.ds-link-with-arrow{display:inline-flex;align-items:center;color:var(--ds-textColor-link);letter-spacing:var(--ds-letterSpacing-wide);font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-16);text-decoration-line:none}.ds-link-with-arrow:focus-visible,.ds-link-with-arrow:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}@media (min-width: 30rem){.ds-link-with-arrow{font-size:var(--ds-fontSize-18)}}.ds-link-with-arrow__icon{display:inline-flex;width:2em;height:2em;line-height:0;align-items:center;justify-content:center;color:var(--ds-textColor-white);background-color:var(--ds-bgColor-primary)}.ds-link-with-arrow__icon--start{margin-right:var(--ds-spacing-xSmall)}.ds-link-with-arrow__icon--end{margin-left:var(--ds-spacing-xSmall)}:hover slot>.ds-link-with-arrow__icon{outline:10px solid;background-color:var(--ds-bgColor-primary-hover)}:active slot>.ds-link-with-arrow__icon{background-color:var(--ds-bgColor-primary-active)}.ds-link-with-arrow:hover,.ds-link-with-arrow:active{text-decoration-line: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-with-arrow:hover{color:var(--ds-textColor-link-hover)}.ds-link-with-arrow:active,.ds-link-with-arrow:focus-visible{color:var(--ds-textColor-link-active)}";
|
|
12
12
|
const DsLinkWithArrowStyle0 = dsLinkWithArrowCss;
|
|
13
13
|
|
|
14
14
|
const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
|
|
@@ -25,7 +25,7 @@ const DsLinkWithArrow = class {
|
|
|
25
25
|
iconPosition = 'start';
|
|
26
26
|
href;
|
|
27
27
|
target;
|
|
28
|
-
|
|
28
|
+
language;
|
|
29
29
|
componentWillLoad() {
|
|
30
30
|
this.inheritedAttributes = attributes.inheritAriaAttributes(this.el);
|
|
31
31
|
if (linkUtils.opensInNewTab(this.target)) {
|
|
@@ -39,7 +39,7 @@ const DsLinkWithArrow = class {
|
|
|
39
39
|
'ds-link-with-arrow__icon--start': this.iconPosition === 'start',
|
|
40
40
|
'ds-link-with-arrow__icon--end': this.iconPosition === 'end',
|
|
41
41
|
});
|
|
42
|
-
return (index.h("a", { key: '
|
|
42
|
+
return (index.h("a", { key: 'aa1a1272c0323f286e590f1a366f2101410a58c3', href: this.href, class: classes, rel: this.rel, target: this.target, ...this.inheritedAttributes }, index.h("slot", { key: 'e348b24c8c5418cf0f33e18c5337066b6eb579a2', name: "iconStart" }, this.iconPosition === 'start' && index.h("ds-icon", { key: 'e523092b3dc32f936139c53e74195b927a219c0f', name: this.icon, class: iconClasses, size: "1.4em" })), this.text, index.h("slot", { key: '0ec9d65ee348aa75108f9d87474551b6b3c4a0bb', name: "iconStart" }, this.iconPosition === 'end' && index.h("ds-icon", { key: '55b5ef6cc061bea9f68d784e4e9fb0ebdac0002c', name: this.icon, class: iconClasses, size: "1.4em" })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: '8c92b801ac0a1d52e12fead3c89703d41f90fa6a', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
45
|
DsLinkWithArrow.style = DsLinkWithArrowStyle0;
|
|
@@ -8,7 +8,7 @@ const attributes = require('./attributes-f7831329.js');
|
|
|
8
8
|
const utils = require('./utils-8b73aa91.js');
|
|
9
9
|
const linkUtils = require('./linkUtils-695da37c.js');
|
|
10
10
|
|
|
11
|
-
const dsLinkCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px}:root{--ds-fontFamily-heading:\"Open Sans\", sans-serif;--ds-fontFamily-body:\"Open Sans\", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:-2;--ds-letterSpacing-tight:-1.4;--ds-letterSpacing-normal:-0.4;--ds-letterSpacing-wide:0;--ds-letterSpacing-xWide:0.4;--ds-lineHeight-small:1;--ds-lineHeight-medium:1.2;--ds-lineHeight-large:1.5;--ds-lineHeight-xLarge:1.75;--ds-fontWidth-normal:100;--ds-fontWidth-condense:90;--ds-number-style:proportional-figures;}@supports (font-variation-settings: normal){:root{--ds-fontFamily-heading:\"Open Sans Variable\", sans-serif;--ds-fontFamily-body:\"Open Sans Variable\", sans-serif}}.bodyText{line-height:
|
|
11
|
+
const dsLinkCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-borderWidth-none:0px;--ds-borderWidth-hairline:1px;--ds-borderWidth-thin:2px;--ds-borderWidth-thick:4px;--ds-borderWidth-xThick:8px;--ds-borderRadius-none:0px}:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}:root{--ds-fontFamily-heading:\"Open Sans\", sans-serif;--ds-fontFamily-body:\"Open Sans\", sans-serif;--ds-fontSize-12:12px;--ds-fontSize-14:14px;--ds-fontSize-16:16px;--ds-fontSize-18:18px;--ds-fontSize-20:20px;--ds-fontSize-22:22px;--ds-fontSize-24:24px;--ds-fontSize-26:26px;--ds-fontSize-30:30px;--ds-fontSize-32:32px;--ds-fontSize-36:36px;--ds-fontSize-40:40px;--ds-fontSize-48:48px;--ds-fontSize-56:56px;--ds-fontSize-64:64px;--ds-fontWeight-regular:400;--ds-fontWeight-semibold:600;--ds-fontWeight-semiboldPlus:650;--ds-fontWeight-bold:700;--ds-letterSpacing-xTight:-2;--ds-letterSpacing-tight:-1.4;--ds-letterSpacing-normal:-0.4;--ds-letterSpacing-wide:0;--ds-letterSpacing-xWide:0.4;--ds-lineHeight-small:1;--ds-lineHeight-medium:1.2;--ds-lineHeight-large:1.5;--ds-lineHeight-xLarge:1.75;--ds-fontWidth-normal:100;--ds-fontWidth-condense:90;--ds-number-style:proportional-figures;}@supports (font-variation-settings: normal){:root{--ds-fontFamily-heading:\"Open Sans Variable\", sans-serif;--ds-fontFamily-body:\"Open Sans Variable\", sans-serif}}:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-bodyText--2xLarge{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-20);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--2xLarge{font-size:var(--ds-fontSize-22)}}.ds-bodyText--xLarge{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--xLarge{font-size:var(--ds-fontSize-20)}}.ds-bodyText--large{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--large{font-size:var(--ds-fontSize-18)}}.ds-bodyText--medium{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--medium{font-size:var(--ds-fontSize-16)}}.ds-bodyText--small{color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-12);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}@media (min-width: 30rem){.ds-bodyText--small{font-size:var(--ds-fontSize-14)}}:host{display:inline-block}.ds-link{display:inline-flex;align-items:center;color:var(--ds-textColor-link);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);text-decoration-line: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:focus-visible,.ds-link:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-link--semibold{font-weight:var(--ds-fontWeight-semibold)}.ds-link--bold{font-weight:var(--ds-fontWeight-bold)}.ds-link__icon{height:1em;width:1em}.ds-link__icon--start-inline{margin-right:var(--ds-spacing-3xSmall)}.ds-link__icon--start-standalone{margin-right:var(--ds-spacing-2xSmall)}.ds-link__icon--end-inline{margin-left:var(--ds-spacing-3xSmall)}.ds-link__icon--end-standalone{margin-left:var(--ds-spacing-2xSmall)}.ds-link:hover,.ds-link:active{text-decoration-thickness:13%;text-underline-offset:12%}.ds-link:hover{color:var(--ds-textColor-link-hover)}.ds-link:active{color:var(--ds-textColor-link-active)}.ds-link:visited{color:var(--ds-textColor-link-visited)}.ds-link--standalone{color:var(--ds-textColor-link);text-decoration-line:none}.ds-link--standalone:hover,.ds-link--standalone:active{text-decoration-line:underline}.ds-link--standalone:hover{color:var(--ds-textColor-link-hover)}.ds-link--standalone:active{color:var(--ds-textColor-link-active)}.ds-link--standalone:focus-visible{color:var(--ds-textColor-link)}.ds-link--standalone:visited{color:var(--ds-textColor-link)}";
|
|
12
12
|
const DsLinkStyle0 = dsLinkCss;
|
|
13
13
|
|
|
14
14
|
const visuallyHiddenAssistiveTextIdGenerator = utils.idGenerator('visually-hidden-assistive-text');
|
|
@@ -29,7 +29,7 @@ const DsLink = class {
|
|
|
29
29
|
href;
|
|
30
30
|
target;
|
|
31
31
|
download;
|
|
32
|
-
|
|
32
|
+
language;
|
|
33
33
|
componentWillLoad() {
|
|
34
34
|
this.inheritedAttributes = attributes.inheritAriaAttributes(this.el);
|
|
35
35
|
if (linkUtils.opensInNewTab(this.target)) {
|
|
@@ -46,7 +46,7 @@ const DsLink = class {
|
|
|
46
46
|
[`ds-link__icon--start-${this.variant}`]: this.iconPosition === 'start',
|
|
47
47
|
[`ds-link__icon--end-${this.variant}`]: this.iconPosition === 'end',
|
|
48
48
|
});
|
|
49
|
-
return (index.h("a", { key: '
|
|
49
|
+
return (index.h("a", { key: 'd8922731378178b2c927796fdc636fc26d4cbaea', href: this.href, class: classes, rel: this.rel, target: this.target, download: this.download, ...this.inheritedAttributes }, index.h("slot", { key: 'dfbd079b80132f7751501da7e47bb0f1aec4590a', name: "iconStart" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '2b3d864df8c04b340b0251c9ac185be918f7bb16', name: this.icon, class: iconClasses, size: "1em" })), this.text, index.h("slot", { key: '2fc2e4a3be8b83d545b27ae19096ffc5fbb72c0e', name: "iconEnd" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '9592ce7c0222bd3c739943fb9b6a37b92e67618c', name: this.icon, class: iconClasses, size: "1em" })), linkUtils.opensInNewTab(this.target) && (index.h("ds-visually-hidden", { key: '43c55dded281f4e3a084ceb64edf695707309494', id: this.visuallyHiddenAssistiveTextId }, linkUtils.visuallyHiddenAssistiveText(this.language ?? document.documentElement.lang)))));
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
52
|
DsLink.style = DsLinkStyle0;
|
|
@@ -6,7 +6,7 @@ const index = require('./index-bfa0f441.js');
|
|
|
6
6
|
const index$1 = require('./index-5b0b9d4c.js');
|
|
7
7
|
const utils = require('./utils-8b73aa91.js');
|
|
8
8
|
|
|
9
|
-
const dsTextInputCss = ".sc-ds-text-input:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.ds-input--label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-input--label-container.sc-ds-text-input label.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-input--label-container.sc-ds-text-input label.required.sc-ds-text-input::after{content:\" *\";color:var(--ds-textColor-secondary)}.ds-input--label-container.sc-ds-text-input label.optional.sc-ds-text-input::after{content:\" (\" attr(data-optional-text, \"optional\") \")\";color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-input--label-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);display:block;margin-block-start:var(--ds-spacing-3xSmall);color:var(--ds-textColor-secondary)}.ds-input--container.sc-ds-text-input{box-sizing:border-box;width:100%;display:inline-flex;position:relative;align-items:center;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);padding-inline:var(--ds-spacing-xSmall)}.ds-input--container.invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-input--container.valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-input--container.sc-ds-text-input:has(input:active){outline:none}.ds-input--container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:readonly){border-color:var(--ds-borderColor-
|
|
9
|
+
const dsTextInputCss = ".sc-ds-text-input:root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-text-input-h{display:block;width:288px}@media (min-width: 75rem){.sc-ds-text-input-h{width:320px}}.ds-input--label-container.sc-ds-text-input{margin-block-end:var(--ds-spacing-2xSmall)}.ds-input--label-container.sc-ds-text-input label.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-input--label-container.sc-ds-text-input label.required.sc-ds-text-input::after{content:\" *\";color:var(--ds-textColor-secondary)}.ds-input--label-container.sc-ds-text-input label.optional.sc-ds-text-input::after{content:\" (\" attr(data-optional-text, \"optional\") \")\";color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular)}.ds-input--label-container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);display:block;margin-block-start:var(--ds-spacing-3xSmall);color:var(--ds-textColor-secondary)}.ds-input--container.sc-ds-text-input{box-sizing:border-box;width:100%;display:inline-flex;position:relative;align-items:center;border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default);padding-inline:var(--ds-spacing-xSmall)}.ds-input--container.sc-ds-text-input:focus-visible,.ds-input--container.sc-ds-text-input:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-input--container.invalid.sc-ds-text-input{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.sc-ds-text-input:hover:not(.ds-input--container.invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-input--container.invalid.active.sc-ds-text-input{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-input--container.valid.sc-ds-text-input{background-color:var(--ds-bgColor-success);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.sc-ds-text-input:hover:not(.ds-input--container.valid:focus-within){background-color:var(--ds-bgColor-success-hover);border-color:var(--ds-borderColor-success)}.ds-input--container.valid.active.sc-ds-text-input{background-color:var(--ds-bgColor-success-active);border-color:var(--ds-borderColor-success)}.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.disabled.sc-ds-text-input{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-input--container.sc-ds-text-input:has(input:active){outline:none}.ds-input--container.sc-ds-text-input:has(input:active):not:has(input:disabled,input.sc-ds-text-input:readonly){border-color:var(--ds-borderColor-default)}.ds-input--container.active.sc-ds-text-input:not(.ds-input--container.disabled,.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.invalid.sc-ds-text-input,.ds-input--container.valid).sc-ds-text-input{border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-active)}.ds-input--container.sc-ds-text-input:hover:not(.ds-input--container.disabled,.ds-input--container.readonly.sc-ds-text-input,.ds-input--container.active.sc-ds-text-input,.ds-input--container.invalid.sc-ds-text-input,.ds-input--container.valid.sc-ds-text-input,.ds-input--container.sc-ds-text-input:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-input--container.sc-ds-text-input:focus-within:not(.ds-input--container:focus-within.invalid,.ds-input--container.sc-ds-text-input:focus-within.valid,.ds-input--container.sc-ds-text-input:focus-within.readonly){border-color:var(--ds-borderColor-primary)}.ds-input--container.sc-ds-text-input:focus-within *.sc-ds-text-input>ds-button.suffix.sc-ds-text-input>button.sc-ds-text-input:focus-visible{background-clip:padding-box;outline-offset:-5px;box-shadow:none;height:var(--ds-spacing-xLarge);background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);width:100%;box-sizing:border-box;background-color:unset;flex-grow:1;height:var(--ds-spacing-xLarge);line-height:var(--ds-fontSize-24);color:var(--ds-textColor-default);border:none;padding-block:var(--ds-spacing-4xSmall)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled{color:var(--ds-textColor-disabled-onLight)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::placeholder{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-secondary)}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input:focus{outline:none;border:none}.ds-input--container.sc-ds-text-input>input[type=number].sc-ds-text-input{-moz-appearance:textfield}.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-decoration,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-cancel-button,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-button,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-search-results-decoration,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-inner-spin-button,.ds-input--container.sc-ds-text-input>input.sc-ds-text-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(span.prefix,ds-icon.prefix).sc-ds-text-input>input.sc-ds-text-input{padding-inline-start:var(--ds-spacing-2xSmall)}.ds-input--container.sc-ds-text-input:has(ds-button.suffix){padding-inline-end:unset}.ds-input--container.sc-ds-text-input span.prefix.sc-ds-text-input,.ds-input--container.sc-ds-text-input span.suffix.sc-ds-text-input{color:var(--ds-palette-black-70)}.ds-input--container.sc-ds-text-input ds-icon.prefix.sc-ds-text-input,.ds-input--container.sc-ds-text-input-s>[slot=prefix],.ds-input--container .sc-ds-text-input-s>[slot=prefix]{height:1.5rem;color:var(--ds-textColor-default)}.ds-input--container.sc-ds-text-input ds-button.suffix.sc-ds-text-input{margin-top:calc(var(--ds-spacing-3xSmall) * -1);margin-right:calc(var(--ds-spacing-4xSmall) * -1);max-height:40px}.error-text--container.sc-ds-text-input,.success-text--container.sc-ds-text-input{display:flex;align-items:center;margin-top:var(--ds-spacing-2xSmall);gap:var(--ds-spacing-2xSmall)}.error-text--container.sc-ds-text-input ds-icon.sc-ds-text-input,.success-text--container.sc-ds-text-input ds-icon.sc-ds-text-input{display:block;height:1.5rem}.error-text--container.sc-ds-text-input small.sc-ds-text-input,.success-text--container.sc-ds-text-input small.sc-ds-text-input{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.error-text--container.sc-ds-text-input{color:var(--ds-textColor-danger)}.success-text--container.sc-ds-text-input{color:var(--ds-textColor-success)}";
|
|
10
10
|
const DsTextInputStyle0 = dsTextInputCss;
|
|
11
11
|
|
|
12
12
|
const INPUT_TYPE_ICONS_MAP = {
|
|
@@ -115,14 +115,14 @@ const DsTextInput = class {
|
|
|
115
115
|
}
|
|
116
116
|
render() {
|
|
117
117
|
const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
|
|
118
|
-
return (index.h(index.Fragment, { key: '
|
|
118
|
+
return (index.h(index.Fragment, { key: 'fe9d038685d4912e0b760bed83e21a6ae8582535' }, index.h("div", { key: '4c4a662fcbcbf2c9a04986ad44b018736c8ba0d7', class: "ds-input--label-container" }, index.h("slot", { key: '8fea3c6a05e3f5314eae43c2f2eeedc47735278a', name: "label" }, index.h("label", { key: '33aa9fa1ab0eba6c36b0e882d8a71000a2a2ff40', "data-optional-text": this.optionalText, class: index$1.classNames({ required: this.required, optional: this.optional }), htmlFor: this.dsId }, this.label)), index.h("slot", { key: '13f7adf5a85a2f2d8d5f3e7b829ff86707f75a3d', name: "help-text" }, index.h("small", { key: '3595ee7deb43919aeabb938a2f0cc0ce78ca181d', id: this.assistiveTextId }, this.assistiveText), index.h("ds-visually-hidden", { key: '001fd7a38ef2034f7e650e86d00d5a30ee217c17', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), index.h("div", { key: 'ec9f2c0d6ff40bd6c8a4618ec238e966a0756c19', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: index$1.classNames('ds-input--container', {
|
|
119
119
|
disabled: this.disabled,
|
|
120
120
|
readonly: this.readonly,
|
|
121
121
|
valid: !!this.successText,
|
|
122
122
|
invalid: !!this.errorText,
|
|
123
123
|
focus: this.hasFocus,
|
|
124
124
|
active: !!this.inputActive,
|
|
125
|
-
}) }, this.renderPrefixContent(), index.h("input", { key: '
|
|
125
|
+
}) }, this.renderPrefixContent(), index.h("input", { key: '1cd22b415c330cb50c4c9663f6dec3a1e99e256b', ref: e => (this.inputElement = e), id: this.dsId, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
|
|
126
126
|
index$1.classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
|
|
127
127
|
[this.successTextId]: this.successText,
|
|
128
128
|
[this.errorTextId]: this.errorText,
|
|
@@ -12,7 +12,7 @@ const DsVisuallyHidden = class {
|
|
|
12
12
|
index.registerInstance(this, hostRef);
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (index.h("slot", { key: '
|
|
15
|
+
return (index.h("slot", { key: '3a7edab043d1612c06a4eb6fedacec27216f3be3' }));
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
DsVisuallyHidden.style = DsVisuallyHiddenStyle0;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["ds-visually-hidden.cjs",[[1,"ds-visually-hidden"]]],["ds-accordion_3.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"
|
|
11
|
+
return index.bootstrapLazy([["ds-visually-hidden.cjs",[[1,"ds-visually-hidden"]]],["ds-accordion_3.cjs",[[1,"ds-accordion",{"variant":[1],"borderAligned":[4,"border-aligned"],"openByDefault":[4,"open-by-default"],"accordionId":[1,"accordion-id"],"headingLevel":[2,"heading-level"],"useCloseButton":[4,"use-close-button"],"closeButtonLabel":[1,"close-button-label"],"hideTopBorder":[4,"hide-top-border"],"isExpanded":[32]},null,{"isExpanded":["watchHandler"]}],[6,"ds-button",{"value":[1],"variant":[1],"colour":[1],"size":[1],"fontWeight":[1,"font-weight"],"icon":[1],"iconPosition":[1,"icon-position"],"type":[1],"disabled":[4],"fullWidth":[4,"full-width"],"ariaDisabled":[1,"aria-disabled"]}],[1,"ds-icon",{"name":[1],"colour":[1],"size":[1],"dsTitle":[1,"title"],"role":[1],"hidden":[4],"message":[32]}]]],["ds-text-input.cjs",[[6,"ds-text-input",{"label":[1],"placeholder":[1],"dsId":[1,"id"],"name":[1],"disabled":[4],"optional":[4],"required":[4],"readonly":[4],"value":[1],"min":[2],"max":[2],"maxlength":[2],"pattern":[1],"autocomplete":[1],"optionalText":[1,"optional-text"],"errorText":[1,"error-text"],"successText":[1,"success-text"],"assistiveText":[1,"assistive-text"],"actionButtonAriaLabel":[1,"action-button-aria-label"],"hiddenAssistiveText":[1,"hidden-assistive-text"],"prefixText":[1,"prefix-text"],"suffixText":[1,"suffix-text"],"icon":[1],"type":[1],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelledby"],"ariaDescribedby":[1,"aria-describedby"],"hasFocus":[32],"clearButtonVisible":[32],"passwordInputVisible":[32],"inputActive":[32],"togglePasswordVisibility":[64],"clearInput":[64]}]]],["ds-link.cjs",[[1,"ds-link",{"text":[1],"size":[1],"variant":[1],"weight":[1],"icon":[1025],"iconPosition":[1025,"icon-position"],"href":[1],"target":[1],"download":[4],"language":[1,"lang"]}]]],["ds-link-with-arrow.cjs",[[1,"ds-link-with-arrow",{"text":[1],"iconPosition":[1,"icon-position"],"href":[1],"target":[1],"language":[1,"lang"]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import "../_typography.scss";
|
|
2
|
+
import "../_base.scss";
|
|
3
|
+
import "../_headings.scss";
|
|
4
|
+
import "../_bodyText.scss";
|
|
5
|
+
import { getTypographyVariables, createCategorySection, categories } from "../../../../utils/typography/typographyUtils";
|
|
6
|
+
import { html } from "lit";
|
|
7
|
+
import { generateLoremIpsum } from "../../../../utils/utils";
|
|
8
|
+
const meta = {
|
|
9
|
+
title: 'Foundations/Typography',
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
export const TokenClasses = {
|
|
13
|
+
argTypes: {
|
|
14
|
+
headingExample: {
|
|
15
|
+
name: 'Heading',
|
|
16
|
+
control: 'text',
|
|
17
|
+
},
|
|
18
|
+
textExample: {
|
|
19
|
+
name: 'Text',
|
|
20
|
+
control: 'text',
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
args: {
|
|
24
|
+
headingExample: generateLoremIpsum(),
|
|
25
|
+
textExample: generateLoremIpsum({ paragraphs: 2, wordsPerParagraph: 20, consistent: true }),
|
|
26
|
+
},
|
|
27
|
+
render: ({ headingExample, textExample }) => html `
|
|
28
|
+
<div>
|
|
29
|
+
<h2>Heading styles</h2>
|
|
30
|
+
<div class="ds-heading--2xLarge">${headingExample} </div>
|
|
31
|
+
<div class="ds-heading--xLarge">${headingExample} </div>
|
|
32
|
+
<div class="ds-heading--large">${headingExample} </div>
|
|
33
|
+
<div class="ds-heading--medium">${headingExample} </div>
|
|
34
|
+
<div class="ds-heading--small">${headingExample} </div>
|
|
35
|
+
<div class="ds-heading--xSmall">${headingExample} </div>
|
|
36
|
+
|
|
37
|
+
<h2>Text Styles</h2>
|
|
38
|
+
<h3>Regular</h3>
|
|
39
|
+
<p class="ds-text--2xl-regular">${textExample} (2XL Regular) </p>
|
|
40
|
+
<p class="ds-text--xl-regular">${textExample} (XL Regular) </p>
|
|
41
|
+
<p class="ds-text--lg-regular">${textExample} (Large Regular) </p>
|
|
42
|
+
<p class="ds-text--md-regular">${textExample} (Medium Regular) </p>
|
|
43
|
+
<p class="ds-text--sm-regular">${textExample} (Small Regular) </p>
|
|
44
|
+
<p class="ds-text--xs-regular">${textExample} (XS Regular) </p>
|
|
45
|
+
<h3>SemiBold</h3>
|
|
46
|
+
<p class="ds-text--2xl-semibold">${textExample} (2XL Semibold) </p>
|
|
47
|
+
<p class="ds-text--xl-semibold">${textExample} (XL Semibold) </p>
|
|
48
|
+
<p class="ds-text--lg-semibold">${textExample} (Large Semibold) </p>
|
|
49
|
+
<p class="ds-text--md-semibold">${textExample} (Medium Semibold) </p>
|
|
50
|
+
<p class="ds-text--sm-semibold">${textExample} (Small Semibold) </p>
|
|
51
|
+
<p class="ds-text--xs-semibold">${textExample} (XS Semibold) </p>
|
|
52
|
+
<h3>Bold</h3>
|
|
53
|
+
<p class="ds-text--2xl-bold">${textExample} (2XL Bold) </p>
|
|
54
|
+
<p class="ds-text--xl-bold">${textExample} (XL Bold) </p>
|
|
55
|
+
<p class="ds-text--lg-bold">${textExample} (Large Bold) </p>
|
|
56
|
+
<p class="ds-text--md-bold">${textExample} (Medium Bold) </p>
|
|
57
|
+
<p class="ds-text--sm-bold">${textExample} (Small Bold) </p>
|
|
58
|
+
<p class="ds-text--xs-bold">${textExample} (XS Bold) </p>
|
|
59
|
+
|
|
60
|
+
<h2>Bodytext</h2>
|
|
61
|
+
<p class="ds-bodyText--2xLarge">${textExample} (2xLarge) </p>
|
|
62
|
+
<p class="ds-bodyText--xLarge">${textExample} (xLarge) </p>
|
|
63
|
+
<p class="ds-bodyText--large">${textExample} (large) </p>
|
|
64
|
+
<p class="ds-bodyText--medium">${textExample} (medium) </p>
|
|
65
|
+
<p class="ds-bodyText--small">${textExample} (small) </p>
|
|
66
|
+
|
|
67
|
+
<h2>Fontweight</h2>
|
|
68
|
+
<p class="ds-font--regular">${textExample} (Regular) </p>
|
|
69
|
+
<p class="ds-font--semibold">${textExample} (Semibold) </p>
|
|
70
|
+
<p class="ds-font--semibold-plus">${textExample} (SemiboldPlus) </p>
|
|
71
|
+
<p class="ds-font--bold">${textExample} (Bold) </p>
|
|
72
|
+
|
|
73
|
+
<h2>LetterSpacing</h2>
|
|
74
|
+
<p class="ds-tracking--xtight">${textExample} (xTight Spacing) </p>
|
|
75
|
+
<p class="ds-tracking--tight">${textExample} (Tight Spacing) </p>
|
|
76
|
+
<p class="ds-tracking--normal">${textExample} (Normal Spacing) </p>
|
|
77
|
+
<p class="ds-tracking--wide">${textExample} (Wide Spacing) </p>
|
|
78
|
+
<p class="ds-tracking--xwide">${textExample} (xWide Spacing) </p>
|
|
79
|
+
|
|
80
|
+
<h2>Lineheight</h2>
|
|
81
|
+
<p class="ds-leading--small">${textExample} (Small Line Height) </p>
|
|
82
|
+
<p class="ds-leading--medium">${textExample} (Medium Line Height) </p>
|
|
83
|
+
<p class="ds-leading--large">${textExample} (Large Line Height) </p>
|
|
84
|
+
<p class="ds-leading--xLarge">${textExample} (xLarge Line Height) </p>
|
|
85
|
+
</div>
|
|
86
|
+
`,
|
|
87
|
+
};
|
|
88
|
+
const renderTypography = () => {
|
|
89
|
+
const container = document.createElement('div');
|
|
90
|
+
const typographyVariables = getTypographyVariables();
|
|
91
|
+
const renderedCategories = new Set();
|
|
92
|
+
const categoryNames = [...new Set(Object.values(categories)), 'Other'];
|
|
93
|
+
categoryNames.forEach(category => {
|
|
94
|
+
const categoryTypo = typographyVariables.filter(spacing => spacing.category === category);
|
|
95
|
+
if (categoryTypo.length > 0) {
|
|
96
|
+
container.appendChild(createCategorySection(category, categoryTypo, renderedCategories));
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
return container;
|
|
100
|
+
};
|
|
101
|
+
export const Typography = {
|
|
102
|
+
parameters: {
|
|
103
|
+
docs: {
|
|
104
|
+
source: {
|
|
105
|
+
code: renderTypography().outerHTML,
|
|
106
|
+
},
|
|
107
|
+
},
|
|
108
|
+
},
|
|
109
|
+
render: renderTypography,
|
|
110
|
+
};
|
|
@@ -20,6 +20,13 @@
|
|
|
20
20
|
position: relative;
|
|
21
21
|
width: 100%;
|
|
22
22
|
}
|
|
23
|
+
.ds-accordion__open-button:focus-visible, .ds-accordion__open-button:focus-within {
|
|
24
|
+
box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
|
|
25
|
+
outline-color: var(--ds-borderColor-black);
|
|
26
|
+
outline-offset: var(--ds-borderWidth-thin);
|
|
27
|
+
outline-style: solid;
|
|
28
|
+
outline-width: var(--ds-borderWidth-thin);
|
|
29
|
+
}
|
|
23
30
|
.ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::before, .ds-accordion__open-button:hover:not(:focus-visible).ds-accordion--border-aligned::after {
|
|
24
31
|
content: "";
|
|
25
32
|
position: absolute;
|
|
@@ -43,8 +50,6 @@
|
|
|
43
50
|
background: var(--ds-bgColor-transparent-onLight-active, rgba(0, 0, 0, 0.1490196078));
|
|
44
51
|
}
|
|
45
52
|
.ds-accordion__open-button:focus-visible {
|
|
46
|
-
box-shadow: 0 0 0 2px var(--ds-borderColor-black);
|
|
47
|
-
outline-color: var(--ds-borderColor-white);
|
|
48
53
|
z-index: 1;
|
|
49
54
|
}
|
|
50
55
|
.ds-accordion__open-button.ds-accordion--default {
|
|
@@ -70,6 +75,9 @@
|
|
|
70
75
|
:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border) {
|
|
71
76
|
border-top: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
|
|
72
77
|
}
|
|
78
|
+
:host(:first-child) .ds-accordion__open-button:not(.ds-accordion--hide-top-border):focus-visible {
|
|
79
|
+
border-top-color: transparent;
|
|
80
|
+
}
|
|
73
81
|
.ds-accordion__open-button[aria-expanded=false] {
|
|
74
82
|
border-bottom: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light, #CCCCCC);
|
|
75
83
|
}
|
|
@@ -137,5 +145,5 @@
|
|
|
137
145
|
gap: var(--ds-spacing-2xSmall);
|
|
138
146
|
font-family: var(--ds-fontFamily-body);
|
|
139
147
|
letter-spacing: var(--ds-letterSpacing-wide);
|
|
140
|
-
width:
|
|
148
|
+
width: max-content;
|
|
141
149
|
}
|
|
@@ -43,18 +43,18 @@ export class DsAccordion {
|
|
|
43
43
|
render() {
|
|
44
44
|
const iconSize = this.variant === 'compact' ? '1.5rem' : '2rem';
|
|
45
45
|
const buttonSize = this.variant === 'compact' ? 'small' : 'medium';
|
|
46
|
-
return (h("div", { key: '
|
|
46
|
+
return (h("div", { key: '830fb0965ea8904b662280b775a159528d7ddc03', class: classNames('ds-accordion', `ds-accordion--${this.variant}`, {
|
|
47
47
|
'ds-accordion--border-aligned': this.borderAligned
|
|
48
|
-
}), role: "presentation" }, h("div", { key: '
|
|
48
|
+
}), role: "presentation" }, h("div", { key: 'a3d6e538dda9513bfb578379cced370be686ce62', class: "ds-accordion__item" }, h("div", { key: '7c7819bf62cdffb9ac4a8c4f7b1609b31efcdd68', role: "heading", "aria-level": this.headingLevel, class: "ds-accordion__title" }, h("button", { key: '2e2a9fdfced241b23bdcfb444777cdd2fd0a764c', class: classNames('ds-accordion__open-button', `ds-accordion--${this.variant}`, {
|
|
49
49
|
'ds-accordion--border-aligned': this.borderAligned,
|
|
50
50
|
'ds-accordion--hide-top-border': this.hideTopBorder
|
|
51
|
-
}), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: '
|
|
51
|
+
}), onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `${this.accordionId}-panel`, id: this.accordionId, ref: (el) => this.headerButtonRef = el }, h("span", { key: 'eca6297dd43b58849c8b46f66034ec51bb20bf1e', class: "ds-accordion__icon", "aria-hidden": "true" }, this.isExpanded ?
|
|
52
52
|
h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_up" })
|
|
53
|
-
: h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: '
|
|
53
|
+
: h("ds-icon", { size: iconSize, hidden: true, name: "keyboard_arrow_down" })), h("slot", { key: '9ddb913b968b8bbbe47d4be341766503fdcf4df7', name: "header" }))), h("div", { key: '21cee953529ccd21487b7ac0001aac10bf3d563e', id: `${this.accordionId}-panel`, role: "region", "aria-labelledby": this.accordionId, class: classNames('ds-accordion__panel', `ds-accordion__panel--${this.variant}`, {
|
|
54
54
|
'ds-accordion__panel--border-aligned': this.borderAligned,
|
|
55
55
|
'ds-accordion__panel--expanded': this.isExpanded
|
|
56
|
-
}), hidden: !this.isExpanded }, h("div", { key: '
|
|
57
|
-
h("ds-button", { key: '
|
|
56
|
+
}), hidden: !this.isExpanded }, h("div", { key: 'a9d5dfdbf190936156b0b37b6ef2b877741f6ae1', class: "ds-accordion__content" }, h("slot", { key: '34ca29ec15581a470fe2c740fceea9fcdc7cb64a', name: "content" })), this.useCloseButton &&
|
|
57
|
+
h("ds-button", { key: '1dfa2fad990fc6651a620efd8b3169346bb08648', "aria-labelledby": `${this.accordionId}-close-button ${this.accordionId}`, id: `${this.accordionId}-close-button`, class: classNames('ds-accordion__close-button', `ds-accordion--${this.variant}`, {
|
|
58
58
|
'ds-accordion--border-aligned': this.borderAligned
|
|
59
59
|
}), fontWeight: 'semiBold', variant: 'supplementary', colour: 'black', icon: 'keyboard_arrow_up', iconPosition: 'start', onClick: this.handleClick, onKeyDown: this.handleKeyDown, value: this.closeButtonLabel, size: buttonSize, type: 'button' })))));
|
|
60
60
|
}
|