@ds-autonomie/web-components 2.3.0 → 2.4.0

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

@@ -48,6 +48,8 @@ export class FormControlLayout extends ShoelaceElement {
         this.form = '';
         /** Makes the form control a required field. */
         this.required = false;
+        /** Provides an accessible description for the element */
+        this.description = '';
     }
     renderInput() {
         return html ``;
@@ -63,9 +65,12 @@ export class FormControlLayout extends ShoelaceElement {
         const hasHelpTextSlot = this.hasSlotController.test('help-text');
         const hasLabel = this.label ? true : !!hasLabelSlot;
         const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
-        if (!hasLabel) {
+        if (!hasLabel && !this.title) {
             a11yWarning('Form controls require a label attribute or a label slot for accessibility');
         }
+        if (this.error && !this.errorMessage) {
+            a11yWarning('Form controls requires an error-message attribute for accessibility when the error attribute is set');
+        }
         return html `
         <div
           part="form-control"
@@ -109,6 +114,14 @@ export class FormControlLayout extends ShoelaceElement {
           </slot>
   
           ${this.renderCounter()}
+
+          ${this.description !== ''
+            ? html `
+                  <p id="description" classname="form-control__description">
+                    ${this.description}
+                  </p>
+                `
+            : ''}
   
           ${this.error && !this.disabled && this.errorMessage !== ''
             ? renderFormElementErrors(this.errorMessage)
@@ -139,9 +152,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], FormControlLayout.prototype, "disabled", void 0);
-__decorate([
-    property()
-], FormControlLayout.prototype, "lang", void 0);
 __decorate([
     property()
 ], FormControlLayout.prototype, "placeholder", void 0);
@@ -173,3 +183,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], FormControlLayout.prototype, "required", void 0);
+__decorate([
+    property({ attribute: 'description' })
+], FormControlLayout.prototype, "description", void 0);

package/dist/internal/components/form-toggle-button/form-toggle-button.d.ts

@@ -3,6 +3,7 @@ import '../../../components/icon/icon';
 import { ShoelaceElement } from '../../shoelace-element';
 export declare class FormToggleButton extends ShoelaceElement {
     static styles: CSSResultGroup;
+    private readonly hasSlotController;
     button: HTMLInputElement;
     protected type: 'radio' | 'checkbox';
     /**

package/dist/internal/components/form-toggle-button/form-toggle-button.js

@@ -9,12 +9,15 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { html } from 'lit/static-html.js';
 import '../../../components/icon/icon';
+import { a11yWarning } from '../../a11y-warning';
 import { ShoelaceElement } from '../../shoelace-element';
+import { HasSlotController } from '../../slot';
 import { watch } from '../../watch';
 import styles from './form-toggle-button.styles';
 export class FormToggleButton extends ShoelaceElement {
     constructor() {
         super(...arguments);
+        this.hasSlotController = new HasSlotController(this, '[default]');
         /**
          * @internal The button's checked state. This is exposed as an "internal" attribute so we can reflect it, making
          * it easier to style in button groups.
@@ -65,6 +68,9 @@ export class FormToggleButton extends ShoelaceElement {
         const isDisabled = this.disabled || this.parentDisabled;
         const isReadonly = this.readonly || this.parentReadonly;
         const isDeactivated = isDisabled || isReadonly;
+        if (!this.hasSlotController.test('[default]')) {
+            a11yWarning(`<dsa-${this.type}-card> requires an accessible name in the default slot for accessibility`);
+        }
         return html `
       <div part="base">
         <button

package/dist/internal/components/radio-icon/radio-icon.styles.js

@@ -83,4 +83,13 @@ export default css `
     border-color: var(--dsa-wc-radio-border-color-readonly);
     background-color: var(--dsa-wc-radio-color-readonly);
   }
+
+  @media (forced-colors: active) {
+    .radio__control--checked {
+      border-color: Highlight;
+    }
+    .radio__control--checked .radio__inner {
+      background-color: Highlight;
+    }
+  }
 `;

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

@@ -177,6 +177,11 @@ export default css `
     animation-duration: 1s;
   }
 
+  /* Description text for screen readers */
+  .form-control__description {
+    display: none;
+  }
+
   @keyframes tada {
     from {
       transform: scale3d(1, 1, 1);

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

@@ -358,7 +358,7 @@
   --dsa-wc-tab-color-disabled: var(--dsa-color-tab-disabled);
   --dsa-wc-tab-color-hover: var(--dsa-color-tab-hover);
   --dsa-wc-tab-color-active-tab: var(--dsa-color-tab-active);
-  --dsa-wc-tab-padding: var(--dsa-spacing-16) var(--dsa-spacing-24);
+  --dsa-wc-tab-padding: var(--dsa-spacing-12) var(--dsa-spacing-24);
   --dsa-wc-tab-closable-padding-inline-start: var(--dsa-spacing-8);
   --dsa-wc-tab-close-size: var(--dsa-spacing-16);
   --dsa-wc-tab-close-padding: 0;
@@ -380,6 +380,13 @@
   );
   --dsa-wc-icon-button-border-radius: var(--dsa-radius-4);
   --dsa-wc-icon-button-padding: var(--dsa-spacing-8);
+  --dsa-wc-icon-button-size--2xsmall: 0.625rem;
+  --dsa-wc-icon-button-size--xsmall: 0.75rem;
+  --dsa-wc-icon-button-size--small: 0.875rem;
+  --dsa-wc-icon-button-size--medium: 1rem;
+  --dsa-wc-icon-button-size--large: 1.25rem;
+  --dsa-wc-icon-button-size--xlarge: 1.5rem;
+  --dsa-wc-icon-button-size--2xlarge: 2.25rem;
   --dsa-wc-card-color: var(--dsa-color-card-on-background);
   --dsa-wc-card-body-font: var(--dsa-font-medium-normal);
   --dsa-wc-card-title-font: var(--dsa-font-medium-bold);
@@ -410,8 +417,8 @@
   --dsa-wc-download-card-document-info-color: var(
     --dsa-color-text-on-base-secondary
   );
-  --dsa-wc-download-card-icon-color: var(--dsa-color-link-on-base-default);
-  --dsa-wc-download-card-icon-size: 24px;
+  --dsa-wc-download-card-icon-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-download-card-icon-size: 1.5rem;
   --dsa-wc-download-card-border-width: 1px;
   --dsa-wc-download-card-border-color: var(--dsa-color-border-default);
   --dsa-wc-download-card-border-color-hover: var(--dsa-color-border-hover);
@@ -419,6 +426,12 @@
   --dsa-wc-download-card-border-color-active: var(
     --dsa-color-background-selected
   );
+  --dsa-wc-download-link-icon-size--xlarge: 2rem;
+  --dsa-wc-download-link-icon-size--large: 1.75rem;
+  --dsa-wc-download-link-icon-size--medium: 1.5rem;
+  --dsa-wc-download-link-icon-size--small: 1.25rem;
+  --dsa-wc-download-link-icon-size--xsmall: 1rem;
+  --dsa-wc-download-link-icon-size--2xsmall: 0.875rem;
   --dsa-wc-menu-background-color: var(--dsa-color-background-base);
   --dsa-wc-menu-border: solid 1px var(--dsa-color-border-default);
   --dsa-wc-menu-border-radius: var(--dsa-spacing-4);
@@ -521,17 +534,15 @@
     var(--dsa-spacing-8);
   --dsa-wc-option-prefix-suffix-inline-padding: var(--dsa-spacing-8);
   --dsa-wc-option-large-prefix-suffix-inline-padding: var(--dsa-spacing-12);
-  --dsa-wc-badge-font: var(--dsa-font-x-small-bold);
   --dsa-wc-badge-small-font: var(--dsa-font-2x-small-bold);
-  --dsa-wc-badge-dot-padding: 8px;
-  --dsa-wc-badge-dot-small-padding: 4px;
-  --dsa-wc-badge-text-padding: 6px 9px;
-  --dsa-wc-badge-text-small-padding: 3px 5px;
-  --dsa-wc-badge-padding: 6px 9px;
-  --dsa-wc-badge-small-padding: 3px 5px;
-  --dsa-wc-badge-text-min-width: 24px;
-  --dsa-wc-badge-text-small-min-width: 16px;
-  --dsa-wc-badge-border-radius: 32px;
+  --dsa-wc-badge-medium-font: var(--dsa-font-x-small-bold);
+  --dsa-wc-badge-dot-small-padding: 0.25rem;
+  --dsa-wc-badge-dot-medium-padding: 0.5rem;
+  --dsa-wc-badge-text-small-padding: 0.125rem 0.5rem;
+  --dsa-wc-badge-text-medium-padding: 0.35rem 0.7rem;
+  --dsa-wc-badge-text-medium-min-width: 1.5rem;
+  --dsa-wc-badge-text-small-min-width: 1rem;
+  --dsa-wc-badge-border-radius: 2rem;
   --dsa-wc-badge-background-color-primary: var(
     --dsa-color-badge-background-default
   );
@@ -1205,14 +1216,14 @@
   --dsa-wc-tag-border-radius: var(--dsa-radius-32);
   --dsa-wc-tag-icon-spacing: var(--dsa-spacing-4);
   --dsa-wc-tag-small-font-size: var(--dsa-font-x-small-normal);
-  --dsa-wc-tag-small-height: 24px;
-  --dsa-wc-tag-small-padding-y: 0.5rem;
+  --dsa-wc-tag-small-height: 1.5rem;
+  --dsa-wc-tag-small-padding: 0 0.5rem;
   --dsa-wc-tag-medium-font-size: var(--dsa-font-small-normal);
-  --dsa-wc-tag-medium-height: 32px;
-  --dsa-wc-tag-medium-padding-y: 0.75rem;
+  --dsa-wc-tag-medium-height: 2rem;
+  --dsa-wc-tag-medium-padding: 0 0.75rem;
   --dsa-wc-tag-large-font-size: var(--dsa-font-medium-normal);
-  --dsa-wc-tag-large-height: 40px;
-  --dsa-wc-tag-large-padding-y: 1rem;
+  --dsa-wc-tag-large-height: 2.5rem;
+  --dsa-wc-tag-large-padding: 0 1rem;
   --dsa-wc-tag-green-700-on-base: var(
     --dsa-color-tag-simple-green-on-dark-background
   );
@@ -1370,6 +1381,7 @@
   --dsa-wc-breadcrumb-item-spacing: 0.5rem;
   --dsa-wc-breadcrumb-item-separator-margin-y: 0.5rem;
   --dsa-wc-breadcrumb-item-icon-color: var(--dsa-color-icon-on-base-default);
+  --dsa-wc-breadcrumb-item-icon-size: 1.125rem;
   --dsa-wc-breadcrumb-item-text-decoration-thickness: 0.125rem;
   --dsa-wc-breadcrumb-item-text-underline-offset: 4px;
   --dsa-wc-breadcrumb-item-outline-offset: 3px;
@@ -1562,9 +1574,7 @@
   --dsa-wc-error-text-icon-padding-small: 1.5px;
   --dsa-wc-error-text-icon-padding-large: 1.5px;
   --dsa-wc-error-text-icon-color: var(--dsa-color-icon-error);
-  --dsa-wc-error-text-icon-size: 0.833rem;
-  --dsa-wc-error-text-icon-size-small: 0.729rem;
-  --dsa-wc-error-text-icon-size-large: 0.938rem;
+  --dsa-wc-error-text-icon-size: 1.25em;
   --dsa-wc-error-text-color: var(--dsa-color-input-label-error);
   --dsa-wc-error-text-font: var(--dsa-font-x-small-normal);
   --dsa-wc-error-text-font-small: var(--dsa-font-2x-small-normal);
@@ -1590,6 +1600,7 @@
   --dsa-wc-accordion-disabled-icon-color: var(
     --dsa-color-icon-on-base-disabled
   );
+  --dsa-wc-accordion-icon-size: 1.125rem;
   --dsa-wc-accordion-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-accordion-disabled-color: var(--dsa-color-text-on-base-disabled);
   --dsa-wc-accordion-font: var(--dsa-font-medium-normal);
@@ -1618,6 +1629,7 @@
   --dsa-wc-select-listbox-border-color: var(--dsa-color-border-default);
   --dsa-wc-select-listbox-background-color: var(--dsa-color-background-base);
   --dsa-wc-select-icon-margin: 0.75rem;
+  --dsa-wc-select-icon-size: 1rem;
   --dsa-wc-multiselect-tag-margin-inline-start: 0.25rem;
   --dsa-wc-multiselect-tag-background: var(
     --dsa-color-tag-multiselect-background
@@ -1647,6 +1659,7 @@
   --dsa-wc-combobox-expand-icon-error-color: var(
     --dsa-color-icon-on-base-error
   );
+  --dsa-wc-combobox-expand-icon-size: 1.125rem;
   --dsa-wc-combobox-clear-button-focus-ring: solid 2px
     var(--dsa-wc-focus-ring-color);
   --dsa-wc-drawer-overlay-color: var(--dsa-color-surface-overlay);
@@ -1934,6 +1947,19 @@
   );
   --dsa-wc-header-search-mobile-input-font: var(--dsa-font-small-normal);
   --dsa-wc-header-search-input-font: var(--dsa-font-medium-normal);
+  --dsa-wc-page-header-background: var(--dsa-color-surface-layer);
+  --dsa-wc-page-header-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-page-header-padding-x-mobile: var(--dsa-spacing-16);
+  --dsa-wc-page-header-padding-x-desktop: 80px;
+  --dsa-wc-page-header-title-icon-size-mobile: 2.5rem;
+  --dsa-wc-page-header-title-icon-size-desktop: 2rem;
+  --dsa-wc-page-header-title-font-mobile: var(--dsa-font-large-bold);
+  --dsa-wc-page-header-title-font-desktop: var(--dsa-font-x-large-bold);
+  --dsa-wc-page-header-subtitle-font: var(--dsa-font-medium-normal);
+  --dsa-wc-page-header-secondary-text-font: var(--dsa-font-small-normal);
+  --dsa-wc-page-header-secondary-text-color: var(
+    --dsa-color-text-on-base-secondary
+  );
   --dsa-wc-profile-button-border-radius: 40px;
   --dsa-wc-profile-button-font: var(--dsa-font-small-normal);
   --dsa-wc-profile-button-background: var(--dsa-color-background-base);
@@ -1969,7 +1995,6 @@
     --dsa-color-table-header-cell-default-background
   );
   --dsa-wc-table-header-row-color: var(--dsa-color-text-on-base-primary);
-  --dsa-wc-table-header-row-height: 2.5rem;
   --dsa-wc-table-cell-padding-y: var(--dsa-spacing-4);
   --dsa-wc-table-cell-padding-x: var(--dsa-spacing-8);
   --dsa-wc-table-cell-border-color: var(--dsa-color-divider-background);
@@ -2064,12 +2089,13 @@
   --dsa-wc-filter-button-hover-background-color: var(
     --dsa-color-primitive-colors-identity-purple-100
   );
+  --dsa-wc-filter-button-icon-size: 1.125rem;
   --dsa-wc-filter-button-drawer-min-height: var(--dsa-spacing-48);
   --dsa-wc-filter-button-drawer-padding: var(--dsa-spacing-8)
     var(--dsa-spacing-12);
   --dsa-filter-panel-min-width: 280px;
   --dsa-filter-panel-max-height: 760px;
-  --dsa-wc-calendar-width: 280px;
+  --dsa-wc-calendar-width: 17.5rem;
   --dsa-wc-calendar-radius: var(--dsa-radius-4);
   --dsa-wc-calendar-background-color: var(--dsa-color-background-base);
   --dsa-wc-calendar-font-color: var(--dsa-color-text-on-base-primary);
@@ -2079,7 +2105,7 @@
   --dsa-wc-calendar-header-color: var(--dsa-color-text-on-base-secondary);
   --dsa-wc-calendar-cell-font: var(--dsa-font-small-normal);
   --dsa-wc-calendar-cell-color: var(--dsa-color-text-on-base-primary);
-  --dsa-wc-calendar-cell-size: 36px;
+  --dsa-wc-calendar-cell-size: 2.25rem;
   --dsa-wc-calendar-cell-padding: var(--dsa-spacing-8);
   --dsa-wc-calendar-cell-overflow-color: var(
     --dsa-color-primitive-colors-neutral-650
@@ -2243,12 +2269,21 @@
   border-bottom-style: solid;
   transition: border-width 0.1s ease-out;
 }
-.dsa-link--with-prefix,
-.dsa-link--with-suffix {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--dsa-spacing-8);
+.dsa-link--with-prefix > dsa-icon,
+.dsa-link--with-suffix > dsa-icon {
+  margin-bottom: -0.1875rem;
+}
+.dsa-link--with-prefix > dsa-icon {
+  margin-right: var(--dsa-spacing-4);
+}
+.dsa-link--with-suffix > dsa-icon {
+  margin-left: var(--dsa-spacing-4);
+}
+.dsa-link--with-prefix.dsa-link--with-suffix > dsa-icon:first-of-type {
+  margin-left: 0;
+}
+.dsa-link--with-prefix.dsa-link--with-suffix > dsa-icon:last-of-type {
+  margin-right: 0;
 }
 .dsa-link--on-sitemap {
   transition: none;
@@ -2273,6 +2308,7 @@
     var(--dsa-wc-link-underline-thickness) *
       var(--dsa-wc-link-hover-underline-thickness-multiplier)
   );
+  margin-bottom: 0;
 }
 .dsa-link--with-prefix:hover,
 .dsa-link--with-suffix:hover {
@@ -2404,3 +2440,60 @@
   width: 360px;
   grid-template-columns: repeat(4, 1fr);
 }
+
+.dsa-table {
+  width: 100%;
+  border-spacing: 0;
+}
+.dsa-table .dsa-table-header-row,
+.dsa-table .dsa-table-row {
+  block-size: var(--dsa-wc-table-row-medium-height);
+}
+.dsa-table--small .dsa-table-header-row,
+.dsa-table--small .dsa-table-row {
+  block-size: var(--dsa-wc-table-row-small-height);
+}
+.dsa-table--large .dsa-table-header-row,
+.dsa-table--large .dsa-table-row {
+  block-size: var(--dsa-wc-table-row-large-height);
+}
+.dsa-table-header-row {
+  font: var(--dsa-wc-table-header-row-font);
+  background: var(--dsa-wc-table-header-row-background);
+  color: var(--dsa-wc-table-header-row-color);
+}
+.dsa-table-row {
+  border: none;
+  background: var(--dsa-wc-table-row-background);
+  font: var(--dsa-wc-table-row-font);
+  color: var(--dsa-wc-table-row-color);
+}
+.dsa-table-row:hover {
+  background: var(--dsa-wc-table-row-hover-background);
+}
+.dsa-table-header-cell[colspan]:not([colspan="1"]) {
+  text-align: center;
+}
+.dsa-table-header-cell,
+.dsa-table-cell {
+  box-sizing: border-box;
+  padding: var(--dsa-wc-table-header-cell-padding-y)
+    var(--dsa-wc-table-header-cell-padding-x);
+  vertical-align: middle;
+  text-align: start;
+  border-block-end: var(--dsa-wc-table-cell-border-size) solid
+    var(--dsa-wc-table-cell-border-color);
+}
+.dsa-table-header-cell {
+  padding: var(--dsa-wc-table-header-cell-padding-y)
+    var(--dsa-wc-table-header-cell-padding-x);
+}
+.dsa-table-cell {
+  padding: var(--dsa-wc-table-cell-padding-y) var(--dsa-wc-table-cell-padding-x);
+}
+.dsa-table-header-cell--hover {
+  background: var(--dsa-wc-table-header-cell-background-hover);
+}
+.dsa-table-cell--hover {
+  background: var(--dsa-wc-table-row-hover-background);
+}