@ds-autonomie/web-components 2.3.1 → 2.4.1

package/cdn/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/cdn/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/cdn/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);
+}