@ds-autonomie/web-components 2.5.1 → 2.7.0

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

@@ -8,6 +8,7 @@ export default css `
       'field field field' 1fr
       'helpText helpText counter'
       'errorText errorText errorText'
+      'successText successText successText'
       / auto 1fr auto;
     border: none;
     padding: 0;
@@ -76,6 +77,13 @@ export default css `
     gap: var(--dsa-spacing-4);
   }
 
+  .form-control .form-control__success-text {
+    grid-area: successText;
+    display: flex;
+    flex-direction: column;
+    gap: var(--dsa-spacing-4);
+  }
+
   .form-control--has-label .form-control__label {
     display: inline-flex;
     gap: 4px;
@@ -94,6 +102,10 @@ export default css `
     color: var(--dsa-wc-error-text-color);
   }
 
+  .form-control--success .form-control__label {
+    color: var(--dsa-wc-success-text-color);
+  }
+
   /* Small */
   .form-control--has-label.form-control--small .form-control__label {
     font: var(--dsa-wc-form-font-small);
@@ -107,7 +119,8 @@ export default css `
 
   .form-control--small .form-control__help-text,
   .form-control--small .form-control__counter,
-  .form-control--small .form-control__error-text {
+  .form-control--small .form-control__error-text,
+  .form-control--small .form-control__success-text {
     font: var(--dsa-wc-error-text-font-small);
   }
 
@@ -116,7 +129,8 @@ export default css `
     padding-top: var(--dsa-spacing-4);
   }
 
-  .form-control.form-control--small .form-control__error-text {
+  .form-control.form-control--small .form-control__error-text,
+  .form-control.form-control--small .form-control__success-text {
     padding-top: var(--dsa-spacing-8);
   }
 
@@ -133,7 +147,8 @@ export default css `
 
   .form-control--medium .form-control__help-text,
   .form-control--medium .form-control__counter,
-  .form-control--medium .form-control__error-text {
+  .form-control--medium .form-control__error-text,
+  .form-control--medium .form-control__success-text {
     font: var(--dsa-wc-error-text-font);
   }
 
@@ -142,7 +157,8 @@ export default css `
     padding-top: var(--dsa-spacing-8);
   }
 
-  .form-control.form-control--medium .form-control__error-text {
+  .form-control.form-control--medium .form-control__error-text,
+  .form-control.form-control--medium .form-control__success-text {
     padding-top: var(--dsa-spacing-12);
   }
 
@@ -159,7 +175,8 @@ export default css `
 
   .form-control--large .form-control__help-text,
   .form-control--large .form-control__counter,
-  .form-control--large .form-control__error-text {
+  .form-control--large .form-control__error-text,
+  .form-control--large .form-control__success-text {
     font: var(--dsa-wc-error-text-font-large);
   }
 
@@ -168,7 +185,8 @@ export default css `
     padding-top: var(--dsa-spacing-8);
   }
 
-  .form-control.form-control--large .form-control__error-text {
+  .form-control.form-control--large .form-control__error-text,
+  .form-control.form-control--large .form-control__success-text {
     padding-top: var(--dsa-spacing-12);
   }
 

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

@@ -477,7 +477,9 @@
   --dsa-wc-menu-item-font: var(--dsa-font-small-normal);
   --dsa-wc-menu-item-font-current: var(--dsa-font-small-bold);
   --dsa-wc-menu-item-small-font: var(--dsa-font-x-small-normal);
+  --dsa-wc-menu-item-small-font-current: var(--dsa-font-x-small-bold);
   --dsa-wc-menu-item-large-font: var(--dsa-font-medium-normal);
+  --dsa-wc-menu-item-large-font-current: var(--dsa-font-medium-bold);
   --dsa-wc-menu-item-color: var(--dsa-color-text-on-base-primary);
   --dsa-wc-menu-item-disabled-color: var(--dsa-color-text-on-base-disabled);
   --dsa-wc-menu-item-background-color: var(--dsa-color-background-base);
@@ -1607,6 +1609,12 @@
   --dsa-wc-input-on-layer-read-only-border-color: var(
     --dsa-color-input-on-layer-read-only-border
   );
+  --dsa-wc-input-success-border-color: var(
+    --dsa-color-primitive-colors-feedback-success-500
+  );
+  --dsa-wc-input-success-background-color: var(
+    --dsa-color-primitive-colors-feedback-success-200
+  );
   --dsa-wc-input-mask-clear-icon-margin-inline-start: 0.5em;
   --dsa-wc-input-mask-clear-icon-z-index: 1;
   --dsa-wc-input-mask-placeholder-letter-spacing: 0.125rem;
@@ -1671,6 +1679,9 @@
   --dsa-wc-error-text-font: var(--dsa-font-x-small-normal);
   --dsa-wc-error-text-font-small: var(--dsa-font-2x-small-normal);
   --dsa-wc-error-text-font-large: var(--dsa-font-small-normal);
+  --dsa-wc-success-text-color: var(
+    --dsa-color-primitive-colors-feedback-success-500
+  );
   --dsa-wc-error-message-panel-container-background-color: var(
     --dsa-color-alert-background-neutral
   );
@@ -1688,24 +1699,38 @@
   --dsa-wc-error-message-panel-description-color: var(
     --dsa-color-text-on-base-primary
   );
+  --dsa-wc-accordion-border-radius: var(--dsa-spacing-4);
+  --dsa-wc-accordion-header-border-radius: 3px;
+  --dsa-wc-accordion-closed-header-hover-border-radius: 3px;
+  --dsa-wc-accordion-header-hover-border-radius: 3px 3px 0px 0px;
+  --dsa-wc-accordion-padding: 1rem;
+  --dsa-wc-accordion-font: var(--dsa-font-medium-normal);
+  --dsa-wc-accordion-color: var(--dsa-color-text-on-base-primary);
+  --dsa-wc-accordion-background-color: var(--dsa-color-background-base);
+  --dsa-wc-accordion-border-color: var(--dsa-color-accordion-default-border);
+  --dsa-wc-accordion-icon-size: 1.25rem;
+  --dsa-wc-accordion-small-icon-size: 1rem;
   --dsa-wc-accordion-icon-color: var(--dsa-color-icon-on-base-default);
   --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);
-  --dsa-wc-accordion-border-color: var(--dsa-color-border-default);
+  --dsa-wc-accordion-filled-background-color: var(--dsa-color-surface-layer);
+  --dsa-wc-accordion-filled-disabled-color: var(
+    --dsa-color-primitive-colors-neutral-600
+  );
+  --dsa-wc-accordion-filled-disabled-background-color: var(
+    --dsa-color-primitive-colors-neutral-400
+  );
+  --dsa-wc-accordion-summary-padding: 7px 0px;
+  --dsa-wc-accordion-summary-font: var(--dsa-font-large-bold);
+  --dsa-wc-accordion-small-summary-font: var(--dsa-font-medium-bold);
   --dsa-wc-accordion-hover-border-color: var(--dsa-color-border-hover);
   --dsa-wc-accordion-focus-border: 3px solid
     var(--dsa-color-primitive-colors-system-focus-500);
   --dsa-wc-accordion-header-hover-background-color: var(
     --dsa-color-accordion-hover-background
   );
-  --dsa-wc-accordion-padding: 1rem;
-  --dsa-wc-accordion-background-color: var(--dsa-color-background-base);
-  --dsa-wc-accordion-border-radius: var(--dsa-spacing-4);
   --dsa-wc-select-padding-x: var(--dsa-spacing-12);
   --dsa-wc-select-padding-y: var(--dsa-spacing-4);
   --dsa-wc-select-padding: var(--dsa-wc-select-padding-y)
@@ -2123,7 +2148,8 @@
   --dsa-wc-table-expanded-row-height: 3rem;
   --dsa-wc-table-expanded-row-padding-y: var(--dsa-spacing-16);
   --dsa-wc-table-expanded-row-padding-x: var(--dsa-spacing-24);
-  --dsa-wc-table-expanded-row-top-shadow: inset 0px 11px 8px -8px hsla(0, 0%, 60%, 0.25);
+  --dsa-wc-table-expanded-row-top-shadow: inset 0px 11px 8px -8px
+    hsla(0, 0%, 60%, 0.25);
   --dsa-wc-table-expanded-row-bottom-shadow: inset 0px -11px 10px -12px
     hsla(0, 0%, 60%, 0.25);
   --dsa-wc-pagination-font: var(--dsa-font-small-normal);
@@ -2534,20 +2560,19 @@
 }
 
 .dsa-table {
+  --internal-dsa-table-row-height: var(--dsa-wc-table-row-medium-height);
   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);
+  block-size: var(--internal-dsa-table-row-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--small {
+  --internal-dsa-table-row-height: 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--large {
+  --internal-dsa-table-row-height: var(--dsa-wc-table-row-large-height);
 }
 .dsa-table-header-row {
   font: var(--dsa-wc-table-header-row-font);
@@ -2568,6 +2593,7 @@
 }
 .dsa-table-header-cell,
 .dsa-table-cell {
+  background: inherit;
   box-sizing: border-box;
   padding: var(--dsa-wc-table-header-cell-padding-y)
     var(--dsa-wc-table-header-cell-padding-x);
@@ -2589,3 +2615,47 @@
 .dsa-table-cell--hover {
   background: var(--dsa-wc-table-row-hover-background);
 }
+.dsa-table--sticky-header .dsa-table-header-row .dsa-table-header-cell {
+  position: sticky;
+  z-index: 2;
+}
+.dsa-table--sticky-header
+  .dsa-table-header-row:nth-of-type(1)
+  .dsa-table-header-cell {
+  top: 0;
+}
+.dsa-table--sticky-header
+  .dsa-table-header-row:nth-of-type(2)
+  .dsa-table-header-cell {
+  top: var(--internal-dsa-table-row-height);
+}
+.dsa-table--sticky-header
+  .dsa-table-header-row:nth-of-type(3)
+  .dsa-table-header-cell {
+  top: calc(var(--internal-dsa-table-row-height) * 2);
+}
+.dsa-table--sticky-column-1 {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  min-width: var(--dsa-table-sticky-column-1-width);
+}
+.dsa-table--sticky-column-2 {
+  position: sticky;
+  left: var(--dsa-table-sticky-column-1-width, 0);
+  z-index: 1;
+  min-width: var(--dsa-table-sticky-column-2-width);
+}
+.dsa-table--sticky-column-3 {
+  position: sticky;
+  left: calc(
+    var(--dsa-table-sticky-column-1-width, 0) +
+      var(--dsa-table-sticky-column-2-width, 0)
+  );
+  z-index: 1;
+}
+.dsa-table-header-row .dsa-table-header-cell.dsa-table--sticky-column-1,
+.dsa-table-header-row .dsa-table-header-cell.dsa-table--sticky-column-2,
+.dsa-table-header-row .dsa-table-header-cell.dsa-table--sticky-column-3 {
+  z-index: 3;
+}