@ds-autonomie/web-components 2.20.0 → 2.21.0

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/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/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);