@ds-autonomie/web-components 2.19.0 → 2.21.0

package/dist/internal/components/date-field/date-field.d.ts

@@ -28,6 +28,7 @@ export default class DSAInternalDateField extends ShoelaceElement implements Sho
     private lastPressedKey;
     private internalValueChange;
     private previousTentativeDate;
+    private previousSpinbuttonValue;
     /** The parent element accessible name */
     parentName: string;
     /** A description for accessibility */

package/dist/internal/components/date-field/date-field.js

@@ -55,6 +55,7 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         this.lastPressedKey = '';
         this.internalValueChange = false;
         this.previousTentativeDate = '';
+        this.previousSpinbuttonValue = new WeakMap();
         /** The parent element accessible name */
         this.parentName = '';
         /** A description for accessibility */
@@ -165,11 +166,12 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         const allEmpty = tempSelectedDay === '' &&
             tempSelectedMonth === '' &&
             tempSelectedYear === '';
+        const isTentativeDateValid = isValidDate(tentativeDate);
         if (allEmpty) {
             this.setCustomValidity('');
             this.value = '';
         }
-        else if (!isValidDate(tentativeDate)) {
+        else if (!isTentativeDateValid) {
             this.setCustomValidity(this.localize.term('invalidDate'));
             this.value = '';
         }
@@ -179,7 +181,7 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         }
         this.internalValueChange = true;
         this.formControlController.updateValidity();
-        if (!isValidDate(tentativeDate)) {
+        if (!isTentativeDateValid) {
             this.formControlController.emitInvalidEvent(event);
         }
         // Emit change event if the value has changed, or if the individual inputs have changed AND they are all filled or all empty (if the date is invalid the value will be reset to an empty string)
@@ -206,6 +208,7 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
     }
     handleSpinbuttonKeydown(event) {
         const currentInput = event.currentTarget;
+        this.previousSpinbuttonValue.set(currentInput, currentInput.value);
         this.lastPressedKey = event.key;
         // Hack to prevent dead keys input on Firefox/Safari
         if (event.key === 'Dead') {
@@ -231,12 +234,19 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
         }
     }
     handleSpinbuttonInput(event) {
+        var _a;
         event.stopPropagation();
         const currentTarget = event.currentTarget;
+        const previousSpinbuttonValue = (_a = this.previousSpinbuttonValue.get(currentTarget)) !== null && _a !== void 0 ? _a : '';
         if (Number(currentTarget.value) > Number(currentTarget.max)) {
-            currentTarget.value = currentTarget.value.slice(-1);
+            const shouldKeepPreviousValue = currentTarget === this.yearInput && previousSpinbuttonValue !== '';
+            currentTarget.value = shouldKeepPreviousValue
+                ? previousSpinbuttonValue
+                : currentTarget.value.slice(-1);
             event.preventDefault();
-            this.focusNextSpinbutton(currentTarget);
+            if (!shouldKeepPreviousValue) {
+                this.focusNextSpinbutton(currentTarget);
+            }
         }
         // Zeros padding
         if (currentTarget.value !== '') {
@@ -255,8 +265,13 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
                 break;
         }
         // If adding another character would increase the value over the maximum, focus on next input
+        const shouldMoveToNextBecauseLeadingZero = currentTarget !== this.yearInput &&
+            previousSpinbuttonValue === '00' &&
+            currentTarget.value !== '00' &&
+            currentTarget.value.startsWith('0');
         if (!['ArrowUp', 'ArrowDown'].includes(this.lastPressedKey) &&
-            Number(`${currentTarget.value}0`) > Number(currentTarget.max)) {
+            (shouldMoveToNextBecauseLeadingZero ||
+                Number(`${currentTarget.value}0`) > Number(currentTarget.max))) {
             this.focusNextSpinbutton(currentTarget);
         }
         this.setCustomValidity('');
@@ -302,9 +317,10 @@ let DSAInternalDateField = class DSAInternalDateField extends ShoelaceElement {
                 this.selectedYear = '';
             }
             else {
-                this.selectedDay = `${getDateFromISO(this.value).getDate()}`.padStart(2, '0');
-                this.selectedMonth = `${getDateFromISO(this.value).getMonth() + 1}`.padStart(2, '0');
-                this.selectedYear = `${getDateFromISO(this.value).getFullYear()}`.padStart(4, '0');
+                const parsedDate = getDateFromISO(this.value);
+                this.selectedDay = `${parsedDate.getDate()}`.padStart(2, '0');
+                this.selectedMonth = `${parsedDate.getMonth() + 1}`.padStart(2, '0');
+                this.selectedYear = `${parsedDate.getFullYear()}`.padStart(4, '0');
             }
             yield this.updateComplete;
             this.setCustomValidity('');

package/dist/internal/components/form-control/form-control-layout.js

@@ -73,13 +73,14 @@ export class FormControlLayout extends ShoelaceElement {
         const hasHelpTextSlot = this.hasSlotController.test('help-text');
         const hasLabel = this.label ? true : !!hasLabelSlot;
         const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
+        const { error, disabled, success, size, variant, required, description, errorMessage, helpText, label, } = this;
         if (this.title) {
             console.warn('The `title` attribute is deprecated since it can cause redundant enunciation by screen readers, and will be removed in the next major release. Please use the accessible-name attribute instead.');
         }
         if (!hasLabel && !this.accessibleName && !this.title) {
             a11yWarning('Form controls require a label attribute or a label slot for accessibility');
         }
-        if (this.error && !this.errorMessage) {
+        if (error && !errorMessage) {
             a11yWarning('Form controls requires an error-message attribute for accessibility when the error attribute is set');
         }
         return html `
@@ -87,14 +88,14 @@ export class FormControlLayout extends ShoelaceElement {
           part="form-control"
           class=${classMap({
             'form-control': true,
-            'form-control--error': this.error,
-            'form-control--success': this.success && !this.error,
-            'form-control--small': this.size === 'small',
-            'form-control--medium': this.size === 'medium',
-            'form-control--large': this.size === 'large',
+            'form-control--error': error,
+            'form-control--success': success && !error,
+            'form-control--small': size === 'small',
+            'form-control--medium': size === 'medium',
+            'form-control--large': size === 'large',
             'form-control--has-label': hasLabel,
             'form-control--has-help-text': hasHelpText,
-            'form-control--on-floating-menu': this.variant === 'floating',
+            'form-control--on-floating-menu': variant === 'floating',
         })}
         >
           <label
@@ -105,10 +106,10 @@ export class FormControlLayout extends ShoelaceElement {
             aria-hidden=${ifDefined(hasLabel ? undefined : 'true')}
             @click=${this.handleLabelClick}
           >
-            ${this.required
+            ${required
             ? html `<span class="form-control__label-required">*</span>`
             : ''}
-            <slot name="label">${this.label}</slot>
+            <slot name="label">${label}</slot>
           </label>
           <slot name="tooltip" class="form-control__tooltip"></slot>
   
@@ -124,24 +125,24 @@ export class FormControlLayout extends ShoelaceElement {
               name="help-text"
               part="form-control-help-text"
             >
-              ${this.helpText}
+              ${helpText}
             </slot>
           </div>
   
           ${this.renderCounter()}
 
-          ${this.description !== ''
+          ${description !== ''
             ? html `
                   <p id="description" class="form-control__description">
-                    ${this.description}
+                    ${description}
                   </p>
                 `
             : ''}
   
-          ${this.error && !this.disabled && this.errorMessage !== ''
-            ? renderFormElementErrors(this.errorMessage, this.variant)
+          ${error && !disabled && errorMessage !== ''
+            ? renderFormElementErrors(errorMessage, variant)
             : ''}
-          ${this.success ? this.renderSuccessMessage() : ''}
+          ${success ? this.renderSuccessMessage() : ''}
           </div>
         </div>
       `;

package/dist/internal/components/input-base/input-base.js

@@ -244,13 +244,14 @@ export class InputBase extends FormControlLayout {
         this.formControlController.updateValidity();
     }
     renderSuccessMessage() {
-        if (Array.isArray(this.successMessage) && this.successMessage.length > 1) {
+        const { successMessage } = this;
+        if (Array.isArray(successMessage) && successMessage.length > 1) {
             return html ` <div
         id="success-text"
         class="form-control__success-text"
         role="list"
       >
-        ${this.successMessage.map((message) => {
+        ${successMessage.map((message) => {
                 return html `
             <dsa-success-text role="listitem"> ${message} </dsa-success-text>
           `;
@@ -259,7 +260,7 @@ export class InputBase extends FormControlLayout {
         }
         else {
             return html ` <div id="success-text" class="form-control__success-text">
-        <dsa-success-text> ${this.successMessage} </dsa-success-text>
+        <dsa-success-text> ${successMessage} </dsa-success-text>
       </div>`;
         }
     }

package/dist/internal/components/input-base/input-base.styles.js

@@ -67,11 +67,11 @@ export default css `
     color: var(--dsa-wc-input-on-layer-text-field-input-color-disabled);
   }
 
-  .input--error.input--on-layer:not(.input--disabled):not(.input--readonly) {
+  .input--on-layer.input--error:not(.input--disabled):not(.input--readonly) {
     background-color: var(--dsa-wc-input-on-layer-background-color-error);
     border-color: var(--dsa-wc-input-on-layer-border-color-error);
   }
-  .input--error.input--on-layer:hover:not(.input--disabled):not(
+  .input--on-layer.input--error:hover:not(.input--disabled):not(
       .input--readonly
     ) {
     border-color: var(--dsa-wc-input-on-layer-border-color-error-hover);
@@ -110,11 +110,11 @@ export default css `
     border-color: var(--dsa-wc-input-on-base-read-only-border-color);
   }
 
-  .input--error.input--on-base:not(.input--disabled):not(.input--readonly) {
+  .input--on-base.input--error:not(.input--disabled):not(.input--readonly) {
     background-color: var(--dsa-wc-input-on-base-background-color-error);
     border-color: var(--dsa-wc-input-on-base-border-color-error);
   }
-  .input--error.input--on-base:hover:not(.input--disabled):not(
+  .input--on-base.input--error:hover:not(.input--disabled):not(
       .input--readonly
     ) {
     border-color: var(--dsa-wc-input-on-base-border-color-error-hover);
@@ -154,13 +154,13 @@ export default css `
     border-color: var(--dsa-wc-input-on-floating-read-only-border-color);
   }
 
-  .input--error.input--on-floating-menu:not(.input--disabled):not(
+  .input--on-floating-menu.input--error:not(.input--disabled):not(
       .input--readonly
     ) {
     background-color: var(--dsa-wc-input-on-floating-background-color-error);
     border-color: var(--dsa-wc-input-on-floating-border-color-error);
   }
-  .input--error.input--on-floating-menu:hover:not(.input--disabled):not(
+  .input--on-floating-menu.input--error:hover:not(.input--disabled):not(
       .input--readonly
     ) {
     border-color: var(--dsa-wc-input-on-floating-border-color-error-hover);

package/dist/styles/form-control.styles.js

@@ -20,29 +20,29 @@ export default css `
     column-gap: var(--dsa-spacing-4);
   }
 
-  .form-control .form-control__label {
+  .form-control__label {
     grid-area: label;
     display: none;
     color: var(--dsa-color-input-label-default);
   }
 
-  .form-control .form-control__tooltip {
+  .form-control__tooltip {
     display: inline-block;
     grid-area: tooltip;
   }
 
-  .form-control .form-control__field {
+  .form-control__field {
     grid-area: field;
   }
 
-  .form-control .form-control__options {
+  .form-control__options {
     display: inline-flex;
     flex-direction: column;
     gap: var(--dsa-wc-toggle-group-spacing);
   }
 
-  .form-control.form-control--has-buttons .form-control__options,
-  .form-control.form-control--has-cards .form-control__options {
+  .form-control--has-buttons .form-control__options,
+  .form-control--has-cards .form-control__options {
     gap: var(--dsa-spacing-8);
   }
   .form-control:not(.form-control--options-horizontal).form-control--has-buttons
@@ -61,30 +61,31 @@ export default css `
     flex-flow: row wrap;
   }
 
-  .form-control .form-control__help-text {
+  .form-control__help-text {
     grid-area: helpText;
     display: none;
   }
 
-  .form-control .form-control__counter {
+  .form-control__counter {
     grid-area: counter;
     margin-inline-start: auto;
     color: var(--dsa-color-input-helper);
     animation-delay: 0s;
   }
 
-  .form-control .form-control__error-text {
-    grid-area: errorText;
+  .form-control__error-text,
+  .form-control__success-text {
     display: flex;
     flex-direction: column;
     gap: var(--dsa-spacing-4);
   }
 
-  .form-control .form-control__success-text {
+  .form-control__error-text {
+    grid-area: errorText;
+  }
+
+  .form-control__success-text {
     grid-area: successText;
-    display: flex;
-    flex-direction: column;
-    gap: var(--dsa-spacing-4);
   }
 
   .form-control--has-label .form-control__label {
@@ -115,7 +116,7 @@ export default css `
     padding-bottom: var(--dsa-spacing-4);
   }
 
-  .form-control.form-control--small .form-control__tooltip {
+  .form-control--small .form-control__tooltip {
     font: var(--dsa-wc-form-font-small);
     --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
   }
@@ -127,13 +128,13 @@ export default css `
     font: var(--dsa-wc-error-text-font-small);
   }
 
-  .form-control.form-control--small .form-control__help-text,
-  .form-control.form-control--small .form-control__counter {
+  .form-control--small .form-control__help-text,
+  .form-control--small .form-control__counter {
     padding-top: var(--dsa-spacing-4);
   }
 
-  .form-control.form-control--small .form-control__error-text,
-  .form-control.form-control--small .form-control__success-text {
+  .form-control--small .form-control__error-text,
+  .form-control--small .form-control__success-text {
     padding-top: var(--dsa-spacing-8);
   }
 
@@ -143,7 +144,7 @@ export default css `
     padding-bottom: var(--dsa-spacing-8);
   }
 
-  .form-control.form-control--medium .form-control__tooltip {
+  .form-control--medium .form-control__tooltip {
     font: var(--dsa-wc-form-font);
     --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
   }
@@ -155,13 +156,15 @@ export default css `
     font: var(--dsa-wc-error-text-font);
   }
 
-  .form-control.form-control--medium .form-control__help-text,
-  .form-control.form-control--medium .form-control__counter {
+  .form-control--medium .form-control__help-text,
+  .form-control--medium .form-control__counter {
     padding-top: var(--dsa-spacing-8);
   }
 
-  .form-control.form-control--medium .form-control__error-text,
-  .form-control.form-control--medium .form-control__success-text {
+  .form-control--medium .form-control__error-text,
+  .form-control--medium .form-control__success-text,
+  .form-control--large .form-control__error-text,
+  .form-control--large .form-control__success-text {
     padding-top: var(--dsa-spacing-12);
   }
 
@@ -171,7 +174,7 @@ export default css `
     padding-bottom: var(--dsa-spacing-8);
   }
 
-  .form-control.form-control--large .form-control__tooltip {
+  .form-control--large .form-control__tooltip {
     font: var(--dsa-wc-form-font-large);
     --dsa-wc-internal-icon-button-padding: var(--dsa-spacing-2);
   }
@@ -183,19 +186,14 @@ export default css `
     font: var(--dsa-wc-error-text-font-large);
   }
 
-  .form-control.form-control--large .form-control__help-text,
-  .form-control.form-control--large .form-control__counter {
+  .form-control--large .form-control__help-text,
+  .form-control--large .form-control__counter {
     padding-top: var(--dsa-spacing-8);
   }
 
-  .form-control.form-control--large .form-control__error-text,
-  .form-control.form-control--large .form-control__success-text {
-    padding-top: var(--dsa-spacing-12);
-  }
-
   .form-control__counter--animated {
-    animation-name: tada;
-    animation-duration: 1s;
+    animation: tada 1s;
+    will-change: transform;
   }
 
   /* On Floating Menu */

package/dist/templates/utilities/decorator.js

@@ -70,7 +70,7 @@ export const withPageTemplate = (story) => html `
       margin: 24px 16px 80px;
     }
     .placeholder {
-      color: red;
+      color: var(--dsa-color-primitive-colors-feedback-error-500);
     }
   </style>
   <div class="layout">

package/dist/templates/utilities/header.js

@@ -19,7 +19,7 @@ export const templatePageHeader = (title, withActions = false) => {
         gap: var(--dsa-spacing-24);
       }
       .title-1 {
-        font: var(--dsa-font-title-xl-bold);
+        font: var(--dsa-font-headline-m-bold);
       }
       .action-bar {
         display: flex;

package/dist/templates/utilities/template-story-config.js

@@ -3,9 +3,6 @@ export const templateStoryConfig = {
     parameters: {
         layout: 'fullscreen',
     },
-    globals: {
-        viewport: { value: 'reset' },
-    },
     decorators: [withPageTemplate],
     args: {
         story_actions: true,

package/dist/themes/dsa-wc-theme.css

@@ -608,8 +608,8 @@
   --dsa-wc-badge-medium-font: var(--dsa-font-body-xs-bold);
   --dsa-wc-badge-dot-small-padding: 0.25rem;
   --dsa-wc-badge-dot-medium-padding: 0.5rem;
-  --dsa-wc-badge-text-small-padding: 0.1875rem 0.3125rem;
-  --dsa-wc-badge-text-medium-padding: 0.375rem 0.5625rem;
+  --dsa-wc-badge-text-small-padding: 0.1875rem 0.25rem;
+  --dsa-wc-badge-text-medium-padding: 0.375rem 0.5rem;
   --dsa-wc-badge-text-medium-min-width: 1.5rem;
   --dsa-wc-badge-text-small-min-width: 1rem;
   --dsa-wc-badge-border-radius: 2rem;
@@ -2493,11 +2493,9 @@
   --dsa-font-2x-small-bold: var(--dsa-font-body-2-xs-bold);
   --dsa-font-2x-small-normal: var(--dsa-font-body-2-xs-normal);
   --dsa-font-x-small-bold: var(--dsa-font-body-xs-bold);
-  --dsa-font-x-small-bold-underline: var(--dsa-font-body-xs-bold-underline);
   --dsa-font-x-small-normal: var(--dsa-font-body-xs-normal);
   --dsa-font-small-bold: var(--dsa-font-body-s-bold);
   --dsa-font-small-normal: var(--dsa-font-body-s-normal);
-  --dsa-font-small-normal-underline: var(--dsa-font-body-s-normal-underline);
   --dsa-font-medium-bold: var(--dsa-font-body-m-bold);
   --dsa-font-medium-normal: var(--dsa-font-body-m-normal);
   --dsa-font-large-bold: var(--dsa-font-title-s-bold);