npm - @uh-design-system/component-library - Versions diffs - 1.5.1-rc.0 → 1.5.2-rc.0 - Mend

@uh-design-system/component-library 1.5.1-rc.0 → 1.5.2-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2244) hide show

package/dist/collection/components/01-base-components/ds-tag/ds-tag.css CHANGED Viewed

@@ -4,24 +4,24 @@
   display: block;
 }
-.ds-tag__0Yjiso {
+.ds-tag__b8qnxH {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-tag__0Yjiso:focus-visible {
+.ds-tag__b8qnxH:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-tag__0Yjiso:focus-within {
+.ds-tag__b8qnxH:focus-within {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-tag__0Yjiso {
+.ds-tag__b8qnxH {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -30,87 +30,87 @@
   padding: calc(var(--ds-spacing-4xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--default {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--default {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-neutral);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--default:has(.ds-tag__0Yjiso__link:hover) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--default:has(.ds-tag__b8qnxH__link:hover) {
   background-color: var(--ds-bgColor-neutral-hover);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--default:has(.ds-tag__0Yjiso__link:active) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--default:has(.ds-tag__b8qnxH__link:active) {
   background-color: var(--ds-bgColor-neutral-active);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--black {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--black {
   color: var(--ds-textColor-white);
   background-color: var(--ds-bgColor-black);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--black:has(.ds-tag__0Yjiso__link:hover) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--black:has(.ds-tag__b8qnxH__link:hover) {
   background-color: var(--ds-bgColor-black-hover);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--black:has(.ds-tag__0Yjiso__link:active) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--black:has(.ds-tag__b8qnxH__link:active) {
   background-color: var(--ds-bgColor-black-active);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--white {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--white {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--white:has(.ds-tag__0Yjiso__link:hover) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--white:has(.ds-tag__b8qnxH__link:hover) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--white:has(.ds-tag__0Yjiso__link:active) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--white:has(.ds-tag__b8qnxH__link:active) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--info {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--info {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-info);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--info:has(.ds-tag__0Yjiso__link:hover) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--info:has(.ds-tag__b8qnxH__link:hover) {
   background-color: var(--ds-bgColor-info-hover);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--info:has(.ds-tag__0Yjiso__link:active) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--info:has(.ds-tag__b8qnxH__link:active) {
   background-color: var(--ds-bgColor-info-active);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--danger {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--danger {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--danger:has(.ds-tag__0Yjiso__link:hover) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--danger:has(.ds-tag__b8qnxH__link:hover) {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--danger:has(.ds-tag__0Yjiso__link:active) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--danger:has(.ds-tag__b8qnxH__link:active) {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--attention {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--attention {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-attention);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--attention:has(.ds-tag__0Yjiso__link:hover) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--attention:has(.ds-tag__b8qnxH__link:hover) {
   background-color: var(--ds-bgColor-attention-hover);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--attention:has(.ds-tag__0Yjiso__link:active) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--attention:has(.ds-tag__b8qnxH__link:active) {
   background-color: var(--ds-bgColor-attention-active);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--success {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--success {
   color: var(--ds-textColor-default);
   background-color: var(--ds-bgColor-success);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--success:has(.ds-tag__0Yjiso__link:hover) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--success:has(.ds-tag__b8qnxH__link:hover) {
   background-color: var(--ds-bgColor-success-hover);
 }
-.ds-tag__0Yjiso.ds-tag__0Yjiso--success:has(.ds-tag__0Yjiso__link:active) {
+.ds-tag__b8qnxH.ds-tag__b8qnxH--success:has(.ds-tag__b8qnxH__link:active) {
   background-color: var(--ds-bgColor-success-active);
 }
-.ds-tag__0Yjiso__text {
+.ds-tag__b8qnxH__text {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-semibold);
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-tag__0Yjiso__link {
+.ds-tag__b8qnxH__link {
   display: contents;
 }
-.ds-tag__0Yjiso__link::part(link):focus-visible {
+.ds-tag__b8qnxH__link::part(link):focus-visible {
   box-shadow: none;
   outline: none;
   outline-offset: none;

package/dist/collection/components/01-base-components/ds-tag-group/ds-tag-group.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.ds-tag-group__0Yjiso__tags {
+.ds-tag-group__b8qnxH__tags {
   display: inline-flex;
   flex-flow: row wrap;
   gap: var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);

package/dist/collection/components/01-base-components/ds-text-area/ds-text-area.css CHANGED Viewed

@@ -7,11 +7,11 @@
 :host {
   display: inline-block;
 }
-:host:has(.ds-text-area__0Yjiso__container--full-width) {
+:host:has(.ds-text-area__b8qnxH__container--full-width) {
   width: 100%;
 }
-.ds-text-area__0Yjiso {
+.ds-text-area__b8qnxH {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -19,17 +19,17 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-text-area__0Yjiso__container:focus-visible {
+.ds-text-area__b8qnxH__container:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-text-area__0Yjiso__container:focus-within {
+.ds-text-area__b8qnxH__container:focus-within {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-text-area__0Yjiso__container {
+.ds-text-area__b8qnxH__container {
   box-sizing: border-box;
   display: inline-flex;
   position: relative;
@@ -39,74 +39,74 @@
   border-color: var(--ds-borderColor-default);
   padding: 0;
 }
-.ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--invalid {
+.ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--invalid:hover:not(.ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--invalid:focus-within) {
+.ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--invalid:hover:not(.ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--invalid.ds-text-area__0Yjiso__container--active {
+.ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--invalid.ds-text-area__b8qnxH__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-area__0Yjiso__container--valid {
+.ds-text-area__b8qnxH__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__0Yjiso__container--valid:hover:not(.ds-text-area__0Yjiso__container--valid:focus-within) {
+.ds-text-area__b8qnxH__container--valid:hover:not(.ds-text-area__b8qnxH__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__0Yjiso__container--valid.ds-text-area__0Yjiso__container--active {
+.ds-text-area__b8qnxH__container--valid.ds-text-area__b8qnxH__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-area__0Yjiso__container--readonly, .ds-text-area__0Yjiso__container--disabled {
+.ds-text-area__b8qnxH__container--readonly, .ds-text-area__b8qnxH__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-area__0Yjiso__container:focus-within:not(.ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--invalid, .ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--valid, .ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--readonly) {
+.ds-text-area__b8qnxH__container:focus-within:not(.ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--invalid, .ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--valid, .ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-text-area__0Yjiso__container:hover:not(.ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--disabled, .ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--readonly, .ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--active, .ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--invalid, .ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--valid, .ds-text-area__0Yjiso__container:focus-within) {
+.ds-text-area__b8qnxH__container:hover:not(.ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--disabled, .ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--readonly, .ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--active, .ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--invalid, .ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--valid, .ds-text-area__b8qnxH__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-area__0Yjiso__container.active:not(.ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--disabled, .ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--readonly, .ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--invalid, .ds-text-area__0Yjiso__container.ds-text-area__0Yjiso__container--valid) {
+.ds-text-area__b8qnxH__container.active:not(.ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--disabled, .ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--readonly, .ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--invalid, .ds-text-area__b8qnxH__container.ds-text-area__b8qnxH__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-area__0Yjiso__container--full-width {
+.ds-text-area__b8qnxH__container--full-width {
   width: 100%;
 }
-.ds-text-area__0Yjiso__external-button,
-.ds-text-area__0Yjiso ::slotted([slot=suffix]) {
+.ds-text-area__b8qnxH__external-button,
+.ds-text-area__b8qnxH ::slotted([slot=suffix]) {
   margin-inline-start: var(--ds-spacing-xSmall);
   align-self: flex-start;
 }
-.ds-text-area__0Yjiso__validity-container {
+.ds-text-area__b8qnxH__validity-container {
   align-items: center;
   width: 100%;
   font-size: var(--ds-fontSize-14);
 }
-.ds-text-area__0Yjiso__validity-container--has-character-limit {
+.ds-text-area__b8qnxH__validity-container--has-character-limit {
   display: flex;
   gap: var(--ds-spacing-small);
   justify-content: space-between;
 }
-.ds-text-area__0Yjiso__character-count {
+.ds-text-area__b8qnxH__character-count {
   margin-top: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__0Yjiso__character-count--over-limit {
+.ds-text-area__b8qnxH__character-count--over-limit {
   color: var(--ds-textColor-danger);
 }
-.ds-text-area__0Yjiso__character-count > small {
+.ds-text-area__b8qnxH__character-count > small {
   display: inline-block;
   font-size: inherit;
 }
-.ds-text-area__0Yjiso__textarea {
+.ds-text-area__b8qnxH__textarea {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -121,7 +121,7 @@
   border: none;
   padding: var(--ds-spacing-2xSmall);
 }
-.ds-text-area__0Yjiso__textarea::placeholder {
+.ds-text-area__b8qnxH__textarea::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -129,33 +129,33 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-area__0Yjiso__textarea:disabled {
+.ds-text-area__b8qnxH__textarea:disabled {
   color: var(--ds-textColor-disabled-onLight);
   background-color: var(--ds-bgColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-text-area__0Yjiso__textarea:disabled::placeholder {
+.ds-text-area__b8qnxH__textarea:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-area__0Yjiso__textarea:focus {
+.ds-text-area__b8qnxH__textarea:focus {
   outline: none;
   border: none;
 }
-.ds-text-area__0Yjiso__textarea--resize-both {
+.ds-text-area__b8qnxH__textarea--resize-both {
   resize: both;
 }
-.ds-text-area__0Yjiso__textarea--resize-auto, .ds-text-area__0Yjiso__textarea--resize-none {
+.ds-text-area__b8qnxH__textarea--resize-auto, .ds-text-area__b8qnxH__textarea--resize-none {
   resize: none;
 }
-.ds-text-area__0Yjiso__textarea--resize-auto {
+.ds-text-area__b8qnxH__textarea--resize-auto {
   overflow: hidden;
 }
-.ds-text-area__0Yjiso__textarea--resize-vertical {
+.ds-text-area__b8qnxH__textarea--resize-vertical {
   resize: vertical;
 }
-.ds-text-area__0Yjiso__textarea--resize-horizontal {
+.ds-text-area__b8qnxH__textarea--resize-horizontal {
   resize: horizontal;
 }
-.ds-text-area__0Yjiso__textarea--full-width {
+.ds-text-area__b8qnxH__textarea--full-width {
   width: 100%;
 }

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.css CHANGED Viewed

@@ -13,11 +13,11 @@
     width: 320px;
   }
 }
-:host:has(.ds-text-input__0Yjiso--full-width) {
+:host:has(.ds-text-input__b8qnxH--full-width) {
   width: 100%;
 }
-.ds-text-input__0Yjiso {
+.ds-text-input__b8qnxH {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -25,10 +25,10 @@
   font-size: var(--ds-fontSize-16);
   display: block;
 }
-.ds-text-input__0Yjiso__label-container {
+.ds-text-input__b8qnxH__label-container {
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__0Yjiso__label-container label {
+.ds-text-input__b8qnxH__label-container label {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-semibold);
@@ -36,7 +36,7 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-default);
 }
-.ds-text-input__0Yjiso__label-container small {
+.ds-text-input__b8qnxH__label-container small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);
@@ -46,17 +46,7 @@
   margin-block-start: var(--ds-spacing-3xSmall);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-input__0Yjiso__container:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
-  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
-}
-.ds-text-input__0Yjiso__container:focus-within {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
-  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
-}
-.ds-text-input__0Yjiso__container {
+.ds-text-input__b8qnxH__container {
   box-sizing: border-box;
   width: 100%;
   display: inline-flex;
@@ -68,65 +58,63 @@
   border-color: var(--ds-borderColor-default);
   padding-inline: var(--ds-spacing-xSmall);
 }
-.ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--invalid {
+.ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--invalid:hover:not(.ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--invalid:focus-within) {
+.ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--invalid:hover:not(.ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--invalid.ds-text-input__0Yjiso__container--active {
+.ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--invalid.ds-text-input__b8qnxH__container--active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--valid {
+.ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--valid {
   background-color: var(--ds-bgColor-success);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--valid:hover:not(.ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--valid:focus-within) {
+.ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--valid:hover:not(.ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--valid:focus-within) {
   background-color: var(--ds-bgColor-success-hover);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--valid .ds-text-input__0Yjiso__container--active {
+.ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--valid .ds-text-input__b8qnxH__container--active {
   background-color: var(--ds-bgColor-success-active);
   border-color: var(--ds-borderColor-success);
 }
-.ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--readonly, .ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--disabled {
+.ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--readonly, .ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-text-input__0Yjiso__container:has(span.ds-text-input__0Yjiso__prefix, .ds-text-input__0Yjiso__icon) {
+.ds-text-input__b8qnxH__container:has(span.ds-text-input__b8qnxH__prefix, .ds-text-input__b8qnxH__icon) {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__0Yjiso__container:has(.ds-text-input__0Yjiso__button) {
+.ds-text-input__b8qnxH__container:has(.ds-text-input__b8qnxH__button) {
   padding-inline-end: unset;
 }
-.ds-text-input__0Yjiso__container:has(input:active):not:has(input:disabled, input:read-only) {
+.ds-text-input__b8qnxH__container:has(input:active):not:has(input:disabled, input:read-only) {
   border-color: var(--ds-borderColor-default);
 }
-.ds-text-input__0Yjiso__container:has(input:active) {
+.ds-text-input__b8qnxH__container:has(input:active) {
   outline: none;
 }
-.ds-text-input__0Yjiso__container.active:not(.ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--disabled, .ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--readonly, .ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--invalid, .ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--valid) {
+.ds-text-input__b8qnxH__container.active:not(.ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--disabled, .ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--readonly, .ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--invalid, .ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--valid) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-text-input__0Yjiso__container:hover:not(.ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--disabled, .ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--readonly, .ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--active, .ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--invalid, .ds-text-input__0Yjiso__container.ds-text-input__0Yjiso__container--valid, .ds-text-input__0Yjiso__container:focus-within) {
+.ds-text-input__b8qnxH__container:hover:not(.ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--disabled, .ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--readonly, .ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--active, .ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--invalid, .ds-text-input__b8qnxH__container.ds-text-input__b8qnxH__container--valid, .ds-text-input__b8qnxH__container:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-text-input__0Yjiso__container:focus-within:not(.ds-text-input__0Yjiso__container:focus-within.ds-text-input__0Yjiso__container--invalid, .ds-text-input__0Yjiso__container:focus-within.ds-text-input__0Yjiso__container--valid, .ds-text-input__0Yjiso__container:focus-within.ds-text-input__0Yjiso__container--readonly) {
-  border-color: var(--ds-borderColor-primary);
+.ds-text-input__b8qnxH__container:has(> input:focus) {
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-text-input__0Yjiso__container:focus-within * > .ds-text-input__0Yjiso__button > button: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-text-input__b8qnxH__container:has(> input:focus):not(.ds-text-input__b8qnxH__container:has(> input:focus).ds-text-input__b8qnxH__container--invalid, .ds-text-input__b8qnxH__container:has(> input:focus).ds-text-input__b8qnxH__container--valid, .ds-text-input__b8qnxH__container:has(> input:focus).ds-text-input__b8qnxH__container--readonly) {
+  border-color: var(--ds-borderColor-primary);
 }
-.ds-text-input__0Yjiso__container > input {
+.ds-text-input__b8qnxH__container > input {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -143,7 +131,7 @@
   padding-block: var(--ds-spacing-4xSmall);
   padding-inline: 0;
 }
-.ds-text-input__0Yjiso__container > input::placeholder {
+.ds-text-input__b8qnxH__container > input::placeholder {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
   font-weight: var(--ds-fontWeight-regular);
@@ -151,36 +139,39 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-secondary);
 }
-.ds-text-input__0Yjiso__container > input:disabled {
+.ds-text-input__b8qnxH__container > input:disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-input__0Yjiso__container > input:disabled::placeholder {
+.ds-text-input__b8qnxH__container > input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-text-input__0Yjiso__container > input:focus {
+.ds-text-input__b8qnxH__container > input:focus {
   outline: none;
   border: none;
 }
-.ds-text-input__0Yjiso__container > input[type=number] {
+.ds-text-input__b8qnxH__container > input[type=number] {
   appearance: textfield;
 }
-.ds-text-input__0Yjiso__container > input::-webkit-search-decoration, .ds-text-input__0Yjiso__container > input::-webkit-search-cancel-button, .ds-text-input__0Yjiso__container > input::-webkit-search-results-button, .ds-text-input__0Yjiso__container > input::-webkit-search-results-decoration, .ds-text-input__0Yjiso__container > input::-webkit-inner-spin-button, .ds-text-input__0Yjiso__container > input::-webkit-outer-spin-button {
+.ds-text-input__b8qnxH__container > input::-webkit-search-decoration, .ds-text-input__b8qnxH__container > input::-webkit-search-cancel-button, .ds-text-input__b8qnxH__container > input::-webkit-search-results-button, .ds-text-input__b8qnxH__container > input::-webkit-search-results-decoration, .ds-text-input__b8qnxH__container > input::-webkit-inner-spin-button, .ds-text-input__b8qnxH__container > input::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
-.ds-text-input__0Yjiso__container:has(span.ds-text-input__0Yjiso__prefix, .ds-text-input__0Yjiso__icon) > input {
+.ds-text-input__b8qnxH__container:has(span.ds-text-input__b8qnxH__prefix, .ds-text-input__b8qnxH__icon) > input {
   padding-inline-start: var(--ds-spacing-2xSmall);
 }
-.ds-text-input__0Yjiso__container span.ds-text-input__0Yjiso__prefix, .ds-text-input__0Yjiso__container span.ds-text-input__0Yjiso__suffix {
+.ds-text-input__b8qnxH__container span.ds-text-input__b8qnxH__prefix, .ds-text-input__b8qnxH__container span.ds-text-input__b8qnxH__suffix {
   font-family: var(--ds-fontFamily-body);
   color: var(--ds-textColor-link-standalone);
 }
-.ds-text-input__0Yjiso__container .ds-text-input__0Yjiso__icon, .ds-text-input__0Yjiso__container ::slotted([slot=prefix]) {
+.ds-text-input__b8qnxH__container .ds-text-input__b8qnxH__icon, .ds-text-input__b8qnxH__container ::slotted([slot=prefix]) {
   height: 1.5rem;
   color: var(--ds-textColor-default);
 }
-.ds-text-input__0Yjiso__container .ds-text-input__0Yjiso__button {
-  margin-top: calc(var(--ds-spacing-3xSmall) * -1);
-  margin-right: calc(var(--ds-spacing-4xSmall) * -1);
+.ds-text-input__b8qnxH__container .ds-text-input__b8qnxH__button {
   max-height: 40px;
+}
+.ds-text-input__b8qnxH__container .ds-text-input__b8qnxH__button:has(button:focus) {
+  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 * 2);
 }

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js CHANGED Viewed

@@ -242,7 +242,7 @@ export class DsTextInput extends Mixin(componentFactory('ds-text-input', { stopR
         const DsButton = transformTagName('ds-button', 'ds-text-input', this.el);
         if (actionButtonIcon) {
             const ariaLabel = this.getActionButtonAriaLabel();
-            return (h("slot", { name: "suffix" }, h(DsButton, { ref: el => (this.suffixButtonElement = el), dsVariant: "supplementary", dsColour: "black", class: `${baseClass}__button`, dsDisabled: false, dsIcon: actionButtonIcon, dsIconTitle: ariaLabel, dsIconAriaLabel: ariaLabel, onClick: this.handleActionButtonClicked, dsAriaPressed: ariaPressed, ...ifDefined('dsAriaLabel', ariaLabel) })));
+            return (h("slot", { name: "suffix" }, h(DsButton, { ref: el => (this.suffixButtonElement = el), dsVariant: "supplementary", dsColour: "black", class: `${baseClass}__button`, dsDisabled: false, dsIcon: actionButtonIcon, dsIconTitle: ariaLabel, dsIconAriaLabel: ariaLabel, dsInInput: true, dsNoFocusRing: true, onClick: this.handleActionButtonClicked, dsAriaPressed: ariaPressed, ...ifDefined('dsAriaLabel', ariaLabel) })));
         }
         return null;
     }
@@ -261,7 +261,7 @@ export class DsTextInput extends Mixin(componentFactory('ds-text-input', { stopR
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaLabelledby = this.dsAriaLabelledby || attrAriaLabelledby;
         const ariaDescribedby = this.dsAriaDescribedby || attrAriaDescribedby;
-        return (h(Fragment, { key: 'fccd8aa55db309c162cc26d991eff81c21581129' }, h(DsControlLabel, { key: '7138322a1f4a103954b09ae50ff67f9e3cd10754', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText }, h("slot", { key: 'af89c9cd17d05b66ee050b30240988fcfcd3286c', name: "label" }), h("slot", { key: '77af55ac539fb8b8d95ec024f542f6a2ce24b5dd', name: "assistiveText" })), h("div", { key: '4e036a7c8c51d4eacfd616dbaf514261ed794619', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames(containerClass, {
+        return (h(Fragment, { key: '42d03fca47ffc9d3dffc349f43cda146fe9ed321' }, h(DsControlLabel, { key: '4934dcad5e95ea8ac57ac0b0f32212703addff84', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: this.visuallyHiddenAssistiveTextId, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText }, h("slot", { key: 'e320d27624df14b6e29c5063d011d66c9c2a0f07', name: "label" }), h("slot", { key: '00b76caaae38e3075bbda7343df8f41fc2879216', name: "assistiveText" })), h("div", { key: 'a0f4535aa2a60378172717244bfc023d0a3c95d4', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames(containerClass, {
                 [`${containerClass}--disabled`]: this.dsDisabled,
                 [`${containerClass}--readonly`]: this.dsReadonly,
                 [`${containerClass}--valid`]: !!this.dsSuccessText,
@@ -269,12 +269,12 @@ export class DsTextInput extends Mixin(componentFactory('ds-text-input', { stopR
                 [`${containerClass}--focus`]: this.hasFocus,
                 [`${containerClass}--active`]: !!this.inputActive,
                 [`${baseClass}--full-width`]: this.dsFullWidth,
-            }) }, this.renderPrefixContent(baseClass), h("input", { key: 'dac488025dd29d22bed34be5e3f3e7cefc5cee58', ref: el => (this.inputElement = el), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, required: this.dsRequired, readonly: this.dsReadonly, value: this.internalValue, type: inputType, min: this.dsMin, max: this.dsMax, maxlength: this.dsMaxLength, pattern: this.dsPattern, step: this.dsStep, placeholder: this.dsPlaceholder, autocomplete: this.dsAutocomplete, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby ||
+            }) }, this.renderPrefixContent(baseClass), h("input", { key: 'ec029d9463b84ee7bd31d2e5f4225b6dd6430a52', ref: el => (this.inputElement = el), id: this.dsId, name: this.dsName, form: this.dsForm, disabled: this.dsDisabled, required: this.dsRequired, readonly: this.dsReadonly, value: this.internalValue, type: inputType, min: this.dsMin, max: this.dsMax, maxlength: this.dsMaxLength, pattern: this.dsPattern, step: this.dsStep, placeholder: this.dsPlaceholder, autocomplete: this.dsAutocomplete, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onInvalid: this.handleInvalid, ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', ariaLabelledby), ...ifDefined('aria-describedby', ariaDescribedby ||
                 classNames({
                     [this.assistiveTextId]: !!this.dsAssistiveText,
                     [this.visuallyHiddenAssistiveTextId]: !!this.dsHiddenAssistiveText,
                     [this.validityId]: !!this.dsErrorText || !!this.dsSuccessText,
-                })), "aria-invalid": this.dsInvalid || this.dsErrorText ? 'true' : 'false', ...restAttributes }), this.renderSuffixContent(baseClass)), h("slot", { key: 'fc1bdeef99168ac8bdff630f32597f99d1e2d35d', name: "validity" }, h(DsInputValidity, { key: '01a48bda0561e8e14c7148c1e8c7cb0f0c127b3e', id: this.validityId, dsText: this.validityText, dsType: this.validityType }))));
+                })), "aria-invalid": this.dsInvalid || this.dsErrorText ? 'true' : 'false', ...restAttributes }), this.renderSuffixContent(baseClass)), h("slot", { key: '6f44a10eb18c6b837a9029784af55d8a2633822f', name: "validity" }, h(DsInputValidity, { key: '98dc913928ce9b72783cdd8d5fd1688ab139376f', id: this.validityId, dsText: this.validityText, dsType: this.validityType }))));
     }
     static get is() { return "ds-text-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-visually-hidden/ds-visually-hidden.css CHANGED Viewed

@@ -2,7 +2,7 @@
   position: absolute;
 }
-.ds-visually-hidden__0Yjiso {
+.ds-visually-hidden__b8qnxH {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;

package/dist/collection/utils/utils.js CHANGED Viewed

@@ -140,3 +140,6 @@ export const injectMatomoScript = (appName) => {
     }
     (document.head ?? document.documentElement).appendChild(g);
 };
+export const isEventWithinElement = (event, elem) => {
+    return event.composedPath().includes(elem);
+};