@uh-design-system/component-library 1.7.1-rc.0 → 1.7.1-rc.1

package/dist/collection/components/01-base-components/ds-option/ds-option.css

@@ -1,4 +1,4 @@
-.ds-option__owcjsm {
+.ds-option__0apwgA {
   display: flex;
   align-items: center;
   justify-content: normal;
@@ -13,37 +13,37 @@
   line-height: var(--ds-lineHeight-large);
   letter-spacing: var(--ds-letterSpacing-wide);
 }
-.ds-option__owcjsm:not(.ds-option__owcjsm--multiple) {
+.ds-option__0apwgA:not(.ds-option__0apwgA--multiple) {
   justify-content: space-between;
 }
-.ds-option__owcjsm--hidden {
+.ds-option__0apwgA--hidden {
   display: none;
 }
-.ds-option__owcjsm--disabled {
+.ds-option__0apwgA--disabled {
   cursor: not-allowed;
   user-select: none;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__owcjsm:hover:not(.ds-option__owcjsm--disabled) {
+.ds-option__0apwgA:hover:not(.ds-option__0apwgA--disabled) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-option__owcjsm:active:not(.ds-option__owcjsm--disabled) {
+.ds-option__0apwgA:active:not(.ds-option__0apwgA--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-option__owcjsm--active {
+.ds-option__0apwgA--active {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-black);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-white);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 1);
 }
-.ds-option__owcjsm--active.ds-option__owcjsm--selected:not(.ds-option__owcjsm--multiple) {
+.ds-option__0apwgA--active.ds-option__0apwgA--selected:not(.ds-option__0apwgA--multiple) {
   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-option__owcjsm--multiple.ds-option__owcjsm--disabled {
+.ds-option__0apwgA--multiple.ds-option__0apwgA--disabled {
   color: var(--ds-textColor-default);
 }
-.ds-option__owcjsm--multiple .ds-option__owcjsm__checkbox {
+.ds-option__0apwgA--multiple .ds-option__0apwgA__checkbox {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -56,44 +56,44 @@
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-option__owcjsm--multiple.ds-option__owcjsm--disabled .ds-option__owcjsm__checkbox {
+.ds-option__0apwgA--multiple.ds-option__0apwgA--disabled .ds-option__0apwgA__checkbox {
   border-color: var(--ds-borderColor-transparent);
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-option__owcjsm--multiple.ds-option__owcjsm--disabled:not(.ds-option__owcjsm--selected) .ds-option__owcjsm__checkbox {
+.ds-option__0apwgA--multiple.ds-option__0apwgA--disabled:not(.ds-option__0apwgA--selected) .ds-option__0apwgA__checkbox {
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-option__owcjsm--selected .ds-option__owcjsm__checkbox {
+.ds-option__0apwgA--selected .ds-option__0apwgA__checkbox {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
   color: var(--ds-textColor-white);
   padding: var(--ds-spacing-4xSmall);
 }
-.ds-option__owcjsm--selected:not(.ds-option__owcjsm--multiple) {
+.ds-option__0apwgA--selected:not(.ds-option__0apwgA--multiple) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
 }
-.ds-option__owcjsm--selected:not(.ds-option__owcjsm--multiple).ds-option__owcjsm--disabled {
+.ds-option__0apwgA--selected:not(.ds-option__0apwgA--multiple).ds-option__0apwgA--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__owcjsm--selected:not(.ds-option__owcjsm--multiple) .ds-option__owcjsm__description {
+.ds-option__0apwgA--selected:not(.ds-option__0apwgA--multiple) .ds-option__0apwgA__description {
   color: var(--ds-textColor-white);
 }
-.ds-option__owcjsm--selected:not(.ds-option__owcjsm--multiple) .ds-option__owcjsm__check-icon {
+.ds-option__0apwgA--selected:not(.ds-option__0apwgA--multiple) .ds-option__0apwgA__check-icon {
   visibility: visible;
   color: var(--ds-textColor-white);
 }
-.ds-option__owcjsm--selected:not(.ds-option__owcjsm--multiple).ds-option__owcjsm--disabled .ds-option__owcjsm__check-icon {
+.ds-option__0apwgA--selected:not(.ds-option__0apwgA--multiple).ds-option__0apwgA--disabled .ds-option__0apwgA__check-icon {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-option__owcjsm--selected:not(.ds-option__owcjsm--multiple):hover:not(.ds-option__owcjsm--disabled) {
+.ds-option__0apwgA--selected:not(.ds-option__0apwgA--multiple):hover:not(.ds-option__0apwgA--disabled) {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-option__owcjsm--selected:not(.ds-option__owcjsm--multiple):active:not(.ds-option__owcjsm--disabled) {
+.ds-option__0apwgA--selected:not(.ds-option__0apwgA--multiple):active:not(.ds-option__0apwgA--disabled) {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-option__owcjsm__label {
+.ds-option__0apwgA__label {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
@@ -102,14 +102,14 @@
   grid-column: 1;
   grid-row: 1;
 }
-.ds-option__owcjsm__check-icon {
+.ds-option__0apwgA__check-icon {
   margin-left: var(--ds-spacing-small);
   flex-shrink: 0;
   display: flex;
   align-items: center;
   height: 100%;
 }
-.ds-option__owcjsm__description {
+.ds-option__0apwgA__description {
   color: var(--ds-textColor-secondary);
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
@@ -118,6 +118,6 @@
   grid-column: 1;
   grid-row: 2;
 }
-.ds-option__owcjsm__description:not(:empty) {
+.ds-option__0apwgA__description:not(:empty) {
   display: block;
 }

package/dist/collection/components/01-base-components/ds-option/ds-option.js

@@ -95,13 +95,13 @@ export class DsOption extends Mixin(componentFactory('ds-option')) {
     render() {
         const baseClass = cx('ds-option');
         const DsIcon = transformTagName('ds-icon', 'ds-option', this.el);
-        return (h("div", { key: '06dbe206da0933ad0f7d0a9ef1254dcc4ffa5296', ref: el => (this.optionRef = el), id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: '4a9f09f8fc5b43ece3d31c57d5e24a31b0c1494a', ref: el => (this.optionRef = el), id: this.dsId, class: classNames(baseClass, {
                 [`${baseClass}--multiple`]: this.isMultiple,
                 [`${baseClass}--active`]: this.dsActive,
                 [`${baseClass}--selected`]: this.dsSelected,
                 [`${baseClass}--disabled`]: this.dsDisabled,
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex, ...this.inheritedAttributes }, this.isMultiple && (h("span", { key: '9fc824a92b03d862ca9864d929b3bbde03e3b8f8', class: `${baseClass}__checkbox` }, this.dsSelected && (h(DsIcon, { key: 'c730cf3926c677d744e7c25f023f941275144e79', class: `${baseClass}__checkbox__icon`, dsName: "check_small", dsSize: "1.25rem", dsColour: this.dsDisabled ? 'ds-textColor-disabled-onLight' : 'ds-textColor-white' })))), h("span", { key: '41f6a2ca4b9b8f79c2f0e5501312df1f8e178b7c' }, h("span", { key: 'f55053553a85fc167b43d5faac3680d3b448ec9d', class: `${baseClass}__label`, ref: el => (this.optionLabelTextRef = el) }, h("slot", { key: '68321ee802967c5f229ca0effec568c1beb6aebb' }, this.dsLabel)), this.dsDescription && h("span", { key: 'a1f3fae6c54a820741fa44f3154e804edc269233', class: `${baseClass}__description` }, this.dsDescription)), !this.isMultiple && this.dsSelected && h(DsIcon, { key: 'dde7f1b47b5d92d2479c92b5d059b0424160e27c', dsName: "check", class: `${baseClass}__check-icon` })));
+            }), role: "option", "aria-selected": String(this.dsSelected), "aria-disabled": String(this.dsDisabled), "aria-hidden": String(this.dsHidden), tabIndex: this.internalTabIndex, ...this.inheritedAttributes }, this.isMultiple && (h("span", { key: '22a75398d91461f70e26f7815e6559515cd58b1c', class: `${baseClass}__checkbox` }, this.dsSelected && (h(DsIcon, { key: 'b5071297fbe1227ae87185fec1bf9eed955d9089', class: `${baseClass}__checkbox__icon`, dsName: "check_small", dsSize: "1.25rem", dsColour: this.dsDisabled ? 'ds-textColor-disabled-onLight' : 'ds-textColor-white' })))), h("span", { key: '1c391ebafe9a103695bef19ce71b3e6c010bc801' }, h("span", { key: '5bc808891633782f60b8a22c81a302e5d4abef6c', class: `${baseClass}__label`, ref: el => (this.optionLabelTextRef = el) }, h("slot", { key: '9f8e051fd73727730c6ba87e1f26c96fdd6d4088' }, this.dsLabel)), this.dsDescription && h("span", { key: '29be0a35a517fe4aef303bbbd589836062c261eb', class: `${baseClass}__description` }, this.dsDescription)), !this.isMultiple && this.dsSelected && h(DsIcon, { key: 'a41d71f2d7e1c10ab87d2c79b2595f40daa64f82', dsName: "check", class: `${baseClass}__check-icon` })));
     }
     static get is() { return "ds-option"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-option-group/ds-option-group.css

@@ -1,14 +1,14 @@
-.ds-option-group__owcjsm {
+.ds-option-group__0apwgA {
   display: block;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-option-group__owcjsm--hidden {
+.ds-option-group__0apwgA--hidden {
   display: none;
 }
-.ds-option-group__owcjsm ul {
+.ds-option-group__0apwgA ul {
   padding: 0;
 }
-.ds-option-group__owcjsm__label {
+.ds-option-group__0apwgA__label {
   position: sticky;
   display: block;
   top: 0;
@@ -19,6 +19,6 @@
   font-weight: var(--ds-fontWeight-semibold);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-option-group__owcjsm__label__shadow {
+.ds-option-group__0apwgA__label__shadow {
   box-shadow: var(--ds-shadow-overflow);
 }

package/dist/collection/components/01-base-components/ds-option-group/ds-option-group.js

@@ -36,9 +36,9 @@ export class DsOptionGroup extends Mixin(componentFactory('ds-option-group')) {
     }
     render() {
         const baseClass = cx('ds-option-group');
-        return (h("div", { key: '52223bab5fbf6ebc5f2704df1fd6d8d5d1ae9175', class: classNames(`${baseClass}`, {
+        return (h("div", { key: 'cb8a39b348628cc69fcc3e8c38e0058c41d202e8', class: classNames(`${baseClass}`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, h("div", { key: '7909f575ab855df82dac8957c46c42e14468e64c', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), h("slot", { key: '0102c6419e9cdbe821a284f573877673306c60e4' })));
+            }), role: "group", "aria-labelledby": this.groupId, ...this.inheritedAttributes }, h("div", { key: '253175c5064ec652da1f70919241c7792c3736b9', class: `${baseClass}__label`, id: this.groupId }, this.dsLabel), h("slot", { key: '3201be9059b13f94302a1263c8acfb3923937dee' })));
     }
     static get is() { return "ds-option-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-options/ds-options.css

@@ -1,10 +1,10 @@
-.ds-options__owcjsm__inner {
+.ds-options__0apwgA__inner {
   max-height: 20rem;
   overflow: hidden;
   box-sizing: border-box;
 }
 
-.ds-options__owcjsm {
+.ds-options__0apwgA {
   position: relative;
   width: 100%;
   padding: 0;
@@ -12,10 +12,10 @@
   z-index: 0;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-options__owcjsm:focus {
+.ds-options__0apwgA:focus {
   outline: none;
 }
-.ds-options__owcjsm__inner {
+.ds-options__0apwgA__inner {
   overflow-y: auto;
   list-style-type: none;
   padding: 0;
@@ -25,7 +25,7 @@
   display: flex;
   flex-direction: column;
 }
-.ds-options__owcjsm__top-scrim, .ds-options__owcjsm__bottom-scrim {
+.ds-options__0apwgA__top-scrim, .ds-options__0apwgA__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -36,23 +36,23 @@
   z-index: 1;
   display: none;
 }
-.ds-options__owcjsm__top-scrim {
+.ds-options__0apwgA__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-options__owcjsm__bottom-scrim {
+.ds-options__0apwgA__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-options__owcjsm.has-top-scrim .ds-options__owcjsm__top-scrim {
+.ds-options__0apwgA.has-top-scrim .ds-options__0apwgA__top-scrim {
   display: block;
 }
-.ds-options__owcjsm.has-bottom-scrim .ds-options__owcjsm__bottom-scrim {
+.ds-options__0apwgA.has-bottom-scrim .ds-options__0apwgA__bottom-scrim {
   display: block;
 }
-.ds-options__owcjsm li {
+.ds-options__0apwgA li {
   cursor: pointer;
 }
-.ds-options__owcjsm li:hover {
+.ds-options__0apwgA li:hover {
   background-color: var(--ds-palette-black-05);
 }

package/dist/collection/components/01-base-components/ds-options/ds-options.js

@@ -132,10 +132,10 @@ export class DsOptions extends Mixin(componentFactory('ds-options')) {
     };
     render() {
         const baseClass = cx('ds-options');
-        return (h("div", { key: 'dc47c6e6c9eab9b1400cfa4a4012b82e6285235d', id: this.dsId, class: classNames(baseClass, {
+        return (h("div", { key: '13bb56393b5fd245468270f268122d407f5bcf4c', id: this.dsId, class: classNames(baseClass, {
                 'has-bottom-scrim': this.hasBottomScrim,
                 'has-top-scrim': this.hasTopScrim,
-            }), role: "listbox", tabindex: 0, onKeyDown: this.handleKeyDown, ref: el => (this.optionsListRef = el), onScroll: this.handleScroll, onFocus: this.updateScrimClasses, "aria-multiselectable": this.dsAriaMultiselectable ? 'true' : 'false', "aria-label": this.dsAriaMultiselectable ? multiselectable() : undefined, "aria-labelledby": [this.dsLabelId, this.dsId].filter(Boolean).join(' '), ...this.inheritedAttributes }, h("div", { key: '4f61b2da92fcc2b4b727b5d49c208bff1110a5c6', class: `${baseClass}__inner`, ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '6dffb0fc9496028456719028116f8f412b6a0a33', class: `${baseClass}__top-scrim`, "aria-hidden": "true" }), h("slot", { key: '5da25768a5b5c21cedbcb955d787ac453c60c904' }), h("div", { key: '97f423ca553638698f5ff2eba26c41ef7b6e4899', class: `${baseClass}__bottom-scrim`, "aria-hidden": "true" }))));
+            }), role: "listbox", tabindex: 0, onKeyDown: this.handleKeyDown, ref: el => (this.optionsListRef = el), onScroll: this.handleScroll, onFocus: this.updateScrimClasses, "aria-multiselectable": this.dsAriaMultiselectable ? 'true' : 'false', "aria-label": this.dsAriaMultiselectable ? multiselectable() : undefined, "aria-labelledby": [this.dsLabelId, this.dsId].filter(Boolean).join(' '), ...this.inheritedAttributes }, h("div", { key: 'a61ead1e1986c7141c4421134463dd46abf23f3f', class: `${baseClass}__inner`, ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '75f5121c80ddbbb18d99c69feb5f4eb802d49520', class: `${baseClass}__top-scrim`, "aria-hidden": "true" }), h("slot", { key: '73caaa9bac5866c7e5a82afc0365aaf0f7cb6269' }), h("div", { key: '0367ba74e1816e7444b7bdf5ad2803b85aa01b04', class: `${baseClass}__bottom-scrim`, "aria-hidden": "true" }))));
     }
     static get is() { return "ds-options"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-options-message/ds-options-message.css

@@ -1,4 +1,4 @@
-.ds-options-message__owcjsm {
+.ds-options-message__0apwgA {
   display: flex;
   flex-direction: column;
   padding: var(--ds-spacing-2xSmall);
@@ -9,14 +9,14 @@
   justify-content: center;
   font-family: var(--ds-fontFamily-body);
 }
-.ds-options-message__owcjsm__error {
+.ds-options-message__0apwgA__error {
   color: var(--ds-textColor-danger);
   text-align: center;
 }
-.ds-options-message__owcjsm__error__icon {
+.ds-options-message__0apwgA__error__icon {
   display: inline-block;
 }
-.ds-options-message__owcjsm__error__title, .ds-options-message__owcjsm__no-results__title {
+.ds-options-message__0apwgA__error__title, .ds-options-message__0apwgA__no-results__title {
   text-align: center;
   color: var(--ds-textColor-default);
   font-size: var(--ds-fontSize-18);
@@ -24,10 +24,10 @@
   margin-top: var(--ds-spacing-xSmall);
   margin-bottom: var(--ds-spacing-2xSmall);
 }
-.ds-options-message__owcjsm__no-results__title {
+.ds-options-message__0apwgA__no-results__title {
   hyphens: auto;
 }
-.ds-options-message__owcjsm__error__text, .ds-options-message__owcjsm__no-results__text {
+.ds-options-message__0apwgA__error__text, .ds-options-message__0apwgA__no-results__text {
   color: var(--ds-textColor-default);
   text-align: center;
   font-size: var(--ds-fontSize-16);

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-ellipsis/ds-pagination-ellipsis.css

@@ -10,7 +10,7 @@
   justify-content: center;
 }
 
-.ds-pagination-ellipsis__owcjsm {
+.ds-pagination-ellipsis__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-ellipsis/ds-pagination-ellipsis.js

@@ -11,7 +11,7 @@ export class DsPaginationEllipsis extends Mixin(paginationFactory) {
         const variant = this.paginationContext?.variant || 'medium';
         const hostClass = cx(`ds-pagination-ellipsis-variant--${variant}`);
         const ariaLabel = this.paginationContext?.texts.ellipsis || 'Ellipsis';
-        return (h(Host, { key: '502c97eb5def01ac6855f8c9ba7c072680cdecb4', class: hostClass }, h("span", { key: 'e6e928d30830e155d4365cf7cf4197d08f3632b7', class: baseClass, role: "img", "aria-label": ariaLabel }, "\u2026")));
+        return (h(Host, { key: '4b98f1812f5aaee957f8638d2a4f4544c872c3d0', class: hostClass }, h("span", { key: '8b97d96483daffa7c3cb483d0e4cb5731056d1cf', class: baseClass, role: "img", "aria-label": ariaLabel }, "\u2026")));
     }
     static get is() { return "ds-pagination-ellipsis"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-item/ds-pagination-item.css

@@ -1,4 +1,4 @@
-.ds-pagination-item__owcjsm {
+.ds-pagination-item__0apwgA {
   display: inline-flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
@@ -6,13 +6,13 @@
   --ds-link-cta-text-decoration: none;
   --ds-link-cta-icon-size: 1.25rem; /* 20px */
 }
-.ds-pagination-item__owcjsm--disabled {
+.ds-pagination-item__0apwgA--disabled {
   cursor: default;
 }
 
-:host([slot=full]) .ds-pagination-item__owcjsm--previous {
+:host([slot=full]) .ds-pagination-item__0apwgA--previous {
   --ds-link-cta-padding-inline-start: var(--ds-spacing-3xSmall); /* 4px */
 }
-:host([slot=full]) .ds-pagination-item__owcjsm--next {
+:host([slot=full]) .ds-pagination-item__0apwgA--next {
   --ds-link-cta-padding-inline-end: var(--ds-spacing-3xSmall); /* 4px */
 }

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page/ds-pagination-page.css

@@ -3,14 +3,14 @@
   align-items: center;
 }
 
-.ds-pagination-page__owcjsm {
+.ds-pagination-page__0apwgA {
   --ds-link-cta-padding-inline: var(--ds-spacing-2xSmall);
   --ds-link-cta-padding-block: 0;
   --ds-link-cta-text-decoration: none;
   --ds-link-cta-icon-size: 1.25rem; /* 20px */
 }
 
-.ds-pagination-page__owcjsm--current {
+.ds-pagination-page__0apwgA--current {
   align-items: center;
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
@@ -22,16 +22,16 @@
   pointer-events: none;
 }
 
-.ds-pagination-page__owcjsm--current.ds-link-cta__owcjsm--black {
+.ds-pagination-page__0apwgA--current.ds-link-cta__0apwgA--black {
   background-color: var(--ds-bgColor-black);
 }
 
-.ds-pagination-page__owcjsm--current.ds-link-cta__owcjsm--white {
+.ds-pagination-page__0apwgA--current.ds-link-cta__0apwgA--white {
   background-color: var(--ds-bgColor-white);
   color: var(--ds-textColor-default);
 }
 
-.ds-pagination-page__owcjsm--current .ds-link-cta__owcjsm__text {
+.ds-pagination-page__0apwgA--current .ds-link-cta__0apwgA__text {
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
   padding: 0;

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page/ds-pagination-page.js

@@ -30,6 +30,9 @@ export class DsPaginationPage extends Mixin(paginationFactory) {
     get DsLinkCta() {
         return transformTagName('ds-link-cta', 'ds-pagination-page', this.el);
     }
+    get DsVisuallyHidden() {
+        return transformTagName('ds-visually-hidden', 'ds-pagination-page', this.el);
+    }
     render() {
         if (!this.paginationContext) {
             return h(Host, null);
@@ -53,7 +56,7 @@ export class DsPaginationPage extends Mixin(paginationFactory) {
             'dsAriaLabel': this.ariaLabel,
             'dsHideIcon': true,
         };
-        return (h(Host, null, this.isCurrent ? (h("span", { class: `${classes} ${linkBaseClass}--${this.paginationContext.colour}`, "aria-current": "page", "aria-label": this.ariaLabel }, h("span", { class: `${linkBaseClass}__text` }, String(this.dsPage)))) : (h(this.DsLinkCta, { ...linkProps }))));
+        return (h(Host, null, this.isCurrent ? (h("span", { class: `${classes} ${linkBaseClass}--${this.paginationContext.colour}` }, h(this.DsVisuallyHidden, { dsTag: "span", "aria-current": "page" }, this.ariaLabel), h("span", { class: `${linkBaseClass}__text`, "aria-hidden": "true" }, String(this.dsPage)))) : (h(this.DsLinkCta, { ...linkProps }))));
     }
     static get is() { return "ds-pagination-page"; }
     static get encapsulation() { return "scoped"; }
@@ -168,4 +171,4 @@ export class DsPaginationPage extends Mixin(paginationFactory) {
     }
     static get elementRef() { return "el"; }
 }
-declareComponentDependencies([h("ds-link-cta", { dsText: "" })]);
+declareComponentDependencies([h("ds-link-cta", { dsText: "" }), h("ds-visually-hidden", null)]);

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination-page-info/ds-pagination-page-info.css

@@ -10,7 +10,7 @@
   justify-content: center;
 }
 
-.ds-pagination-page-info__owcjsm {
+.ds-pagination-page-info__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination.css

@@ -14,7 +14,7 @@
   }
 }
 
-.ds-pagination__owcjsm {
+.ds-pagination__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -27,54 +27,54 @@
   gap: var(--ds-spacing-3xSmall);
   flex-wrap: wrap;
 }
-.ds-pagination__owcjsm__compact slot, .ds-pagination__owcjsm__full slot {
+.ds-pagination__0apwgA__compact slot, .ds-pagination__0apwgA__full slot {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-3xSmall);
   flex-wrap: wrap;
 }
-.ds-pagination__owcjsm--compact .ds-pagination__owcjsm__compact, .ds-pagination__owcjsm--auto .ds-pagination__owcjsm__compact {
+.ds-pagination__0apwgA--compact .ds-pagination__0apwgA__compact, .ds-pagination__0apwgA--auto .ds-pagination__0apwgA__compact {
   width: 100%;
 }
 @media (min-width: 30rem) {
-  .ds-pagination__owcjsm--compact .ds-pagination__owcjsm__compact, .ds-pagination__owcjsm--auto .ds-pagination__owcjsm__compact {
+  .ds-pagination__0apwgA--compact .ds-pagination__0apwgA__compact, .ds-pagination__0apwgA--auto .ds-pagination__0apwgA__compact {
     width: auto;
   }
 }
-.ds-pagination__owcjsm--compact .ds-pagination__owcjsm__compact slot, .ds-pagination__owcjsm--auto .ds-pagination__owcjsm__compact slot {
+.ds-pagination__0apwgA--compact .ds-pagination__0apwgA__compact slot, .ds-pagination__0apwgA--auto .ds-pagination__0apwgA__compact slot {
   display: grid;
   grid-template-columns: min-content min-content auto min-content min-content;
   gap: var(--ds-spacing-3xSmall);
   align-items: center;
   width: 100%;
 }
-.ds-pagination__owcjsm ::slotted([class*=pagination-page-info]) {
+.ds-pagination__0apwgA ::slotted([class*=pagination-page-info]) {
   padding: 0 var(--ds-spacing-small);
   font-weight: var(--ds-fontWeight-semibold);
   text-align: center;
   align-self: center;
   white-space: nowrap;
 }
-.ds-pagination__owcjsm--white {
+.ds-pagination__0apwgA--white {
   --ds-pagination-ellipsis-colour: var(--ds-textColor-white);
 }
-.ds-pagination__owcjsm--white ::slotted([class*=pagination-page-info]) {
+.ds-pagination__0apwgA--white ::slotted([class*=pagination-page-info]) {
   color: var(--ds-textColor-white);
 }
-.ds-pagination__owcjsm--compact .ds-pagination__owcjsm__full {
+.ds-pagination__0apwgA--compact .ds-pagination__0apwgA__full {
   display: none;
 }
-.ds-pagination__owcjsm--full .ds-pagination__owcjsm__compact {
+.ds-pagination__0apwgA--full .ds-pagination__0apwgA__compact {
   display: none;
 }
-.ds-pagination__owcjsm--auto .ds-pagination__owcjsm__full {
+.ds-pagination__0apwgA--auto .ds-pagination__0apwgA__full {
   display: none;
 }
 @media (min-width: 60rem) {
-  .ds-pagination__owcjsm--auto .ds-pagination__owcjsm__full {
+  .ds-pagination__0apwgA--auto .ds-pagination__0apwgA__full {
     display: contents;
   }
-  .ds-pagination__owcjsm--auto .ds-pagination__owcjsm__compact {
+  .ds-pagination__0apwgA--auto .ds-pagination__0apwgA__compact {
     display: none;
   }
 }

package/dist/collection/components/01-base-components/ds-pagination/ds-pagination.js

@@ -82,10 +82,10 @@ export class DsPagination extends Mixin(componentFactory('ds-pagination', { stop
         const classes = classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsLayout}`, `${baseClass}--${this.dsColour}`);
         const fontSize = this.dsVariant === 'small' ? 'var(--ds-fontSize-16)' : 'var(--ds-fontSize-18)';
         const minSize = this.dsVariant === 'small' ? 'var(--ds-spacing-large)' : 'calc(var(--ds-spacing-large) + var(--ds-spacing-xSmall))';
-        return (h("nav", { key: 'd6f4c55f6c76f7228be599b82e374afdcd5e65e3', class: classes, "aria-label": this.dsAriaLabel || pagination(), style: {
+        return (h("nav", { key: 'a518e5c01b64c3570ce8d3f02bc3bc19e439290e', class: classes, "aria-label": this.dsAriaLabel || pagination(), style: {
                 '--ds-pagination-font-size': fontSize,
                 '--ds-link-cta-min-width': minSize,
-            } }, h("div", { key: '0e90d104d1c4de83daf87f68991585b185c1338a', class: `${baseClass}__compact` }, h("slot", { key: '2b596870f3b8d3b646ba7e1fecca3bc5f923da86', name: "compact", onSlotchange: () => this.updateContext() })), h("div", { key: 'da211a880cbfef874fb8c5a9ea26261659ac1a63', class: `${baseClass}__full` }, h("slot", { key: '33a17c2b208424df85efe1c204d4c98fcbe15b78', name: "full", onSlotchange: () => this.updateContext() }))));
+            } }, h("div", { key: '393205559cdf4ac61b2e5f7b7bb123a2cdcc7b10', class: `${baseClass}__compact` }, h("slot", { key: '48f399ce3a2513054ea4a0105a6a70d82cbca872', name: "compact", onSlotchange: () => this.updateContext() })), h("div", { key: '2b1c91c0094ff9dea34cc35375f3d827a44bcce1', class: `${baseClass}__full` }, h("slot", { key: 'f5d91f5ae1d998a9824df9c47a3c93b3e210010f', name: "full", onSlotchange: () => this.updateContext() }))));
     }
     static get is() { return "ds-pagination"; }
     static get encapsulation() { return "shadow"; }