@sebgroup/green-core 1.76.1 → 1.76.3

package/components/badge/badge.style.js

@@ -6,15 +6,15 @@ const style = css`
   }
 
   slot[name='lead']::slotted(*) {
-    line-height: var(--gds-space-m);
+    line-height: var(--gds-sys-space-m);
   }
 
   :host([notification]) slot[name='trail']::slotted(*) {
-    line-height: var(--gds-space-s);
+    line-height: var(--gds-sys-space-s);
   }
 
   :host([notification]) slot[name='lead']::slotted(*) {
-    line-height: var(--gds-space-s);
+    line-height: var(--gds-sys-space-s);
   }
 `;
 var badge_style_default = style;

package/components/button/button.style.css.js

@@ -1,2 +1,2 @@
-const styles = "@layer tokens, core, a11y, ranks, sizes, variants, disabled;\n\n@layer a11y {\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n}\n\n@layer core {\n  :host {\n    display: inline-flex;\n    max-width: 100%;\n  }\n\n  .button {\n    --_block-size: var(--gds-space-3xl);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    block-size: var(--_block-size);\n    background-color: var(--gds-color-l3-background-primary);\n    color: var(--gds-color-l3-content-primary);\n    border-radius: var(--gds-space-max);\n    font-family: inherit;\n    font-size: var(--gds-text-size-detail-m);\n    line-height: var(--gds-text-line-height-detail-m);\n    font-weight: var(--gds-text-weight-book);\n    gap: var(--gds-space-s);\n    outline-color: transparent;\n    outline-offset: var(--gds-space-3xs);\n    outline-style: solid;\n    outline-width: var(--gds-space-3xs);\n    padding-block: var(--gds-space-s);\n    padding-inline: var(--gds-space-l);\n    position: relative;\n    text-decoration: none;\n    transition-property: color, border-colorm, background;\n    transition-duration: 0.2s;\n    flex: 1;\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-tertiary);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-primary),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-primary),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &:not(.circle) slot:not([name]) {\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n}\n\n.button.circle {\n  aspect-ratio: 1 / 1;\n  padding: 0;\n  min-block-size: var(--_block-size);\n  min-inline-size: var(--_block-size);\n}\n\n.button:disabled {\n  pointer-events: none;\n  background-color: var(--gds-color-l3-background-disabled);\n  color: var(--gds-color-l3-content-disabled);\n}\n\n@layer ranks {\n  :host([rank*='secondary']) .button {\n    background-color: var(--gds-color-l3-background-secondary);\n    color: var(--gds-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-secondary),\n          var(--gds-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-secondary),\n        var(--gds-color-l3-states-light-pressed)\n      );\n    }\n  }\n\n  :host([rank*='tertiary']) .button {\n    background-color: transparent;\n    color: var(--gds-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        transparent,\n        var(--gds-color-l3-states-light-pressed)\n      );\n    }\n  }\n}\n\n@layer sizes {\n  :host([size='xs']) .button {\n    --_block-size: var(--gds-space-l);\n    font-size: var(--gds-text-size-detail-s);\n    line-height: var(--gds-text-line-height-detail-s);\n    padding-inline: var(--gds-space-m);\n  }\n\n  :host([size='small']) .button {\n    --_block-size: var(--gds-space-xl);\n    font-size: var(--gds-text-size-detail-s);\n    line-height: var(--gds-text-line-height-detail-s);\n    padding-inline: var(--gds-space-m);\n  }\n\n  :host([size='medium']) .button {\n    --_block-size: var(--gds-space-2xl);\n    font-size: var(--gds-text-size-detail-m);\n    line-height: var(--gds-text-line-height-detail-m);\n  }\n}\n\n@layer variants {\n  .positive {\n    background-color: var(--gds-color-l3-background-positive);\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-positive);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-positive),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-positive),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-color-l3-background-positive-secondary);\n      color: var(--gds-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-color-l3-background-positive-secondary),\n            var(--gds-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-positive-secondary),\n          var(--gds-color-l3-states-positive-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-positive-pressed)\n        );\n      }\n    }\n  }\n\n  .negative {\n    background-color: var(--gds-color-l3-background-negative);\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-negative);\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-negative),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-negative),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-color-l3-background-negative-secondary);\n      color: var(--gds-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-color-l3-background-negative-secondary),\n            var(--gds-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-negative-secondary),\n          var(--gds-color-l3-states-negative-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-negative-pressed)\n        );\n      }\n    }\n  }\n}\n";
+const styles = "@layer tokens, core, a11y, ranks, sizes, variants, disabled;\n\n@layer a11y {\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n}\n\n@layer core {\n  :host {\n    display: inline-flex;\n    max-width: 100%;\n  }\n\n  .button {\n    --_block-size: var(--gds-sys-space-3xl);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    block-size: var(--_block-size);\n    background-color: var(--gds-sys-color-l3-background-primary);\n    color: var(--gds-sys-color-l3-content-primary);\n    border-radius: var(--gds-sys-space-max);\n    font-family: inherit;\n    font-size: var(--gds-sys-text-size-detail-m);\n    line-height: var(--gds-sys-text-line-height-detail-m);\n    font-weight: var(--gds-sys-text-weight-book);\n    gap: var(--gds-sys-space-s);\n    outline-color: transparent;\n    outline-offset: var(--gds-sys-space-3xs);\n    outline-style: solid;\n    outline-width: var(--gds-sys-space-3xs);\n    padding-block: var(--gds-sys-space-s);\n    padding-inline: var(--gds-sys-space-l);\n    position: relative;\n    text-decoration: none;\n    transition-property: color, border-colorm, background;\n    transition-duration: 0.2s;\n    flex: 1;\n\n    &:focus {\n      outline-color: var(--gds-sys-color-l3-content-tertiary);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-sys-color-l3-background-primary),\n          var(--gds-sys-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-sys-color-l3-background-primary),\n        var(--gds-sys-color-l3-states-dark-pressed)\n      );\n    }\n\n    &:not(.circle) slot:not([name]) {\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n}\n\n.button.circle {\n  aspect-ratio: 1 / 1;\n  padding: 0;\n  min-block-size: var(--_block-size);\n  min-inline-size: var(--_block-size);\n}\n\n.button:disabled {\n  pointer-events: none;\n  background-color: var(--gds-sys-color-l3-background-disabled);\n  color: var(--gds-sys-color-l3-content-disabled);\n}\n\n@layer ranks {\n  :host([rank*='secondary']) .button {\n    background-color: var(--gds-sys-color-l3-background-secondary);\n    color: var(--gds-sys-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-sys-color-l3-background-secondary),\n          var(--gds-sys-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-sys-color-l3-background-secondary),\n        var(--gds-sys-color-l3-states-light-pressed)\n      );\n    }\n  }\n\n  :host([rank*='tertiary']) .button {\n    background-color: transparent;\n    color: var(--gds-sys-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-sys-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        transparent,\n        var(--gds-sys-color-l3-states-light-pressed)\n      );\n    }\n  }\n}\n\n@layer sizes {\n  :host([size='xs']) .button {\n    --_block-size: var(--gds-sys-space-l);\n    font-size: var(--gds-sys-text-size-detail-s);\n    line-height: var(--gds-sys-text-line-height-detail-s);\n    padding-inline: var(--gds-sys-space-m);\n  }\n\n  :host([size='small']) .button {\n    --_block-size: var(--gds-sys-space-xl);\n    font-size: var(--gds-sys-text-size-detail-s);\n    line-height: var(--gds-sys-text-line-height-detail-s);\n    padding-inline: var(--gds-sys-space-m);\n  }\n\n  :host([size='medium']) .button {\n    --_block-size: var(--gds-sys-space-2xl);\n    font-size: var(--gds-sys-text-size-detail-m);\n    line-height: var(--gds-sys-text-line-height-detail-m);\n  }\n}\n\n@layer variants {\n  .positive {\n    background-color: var(--gds-sys-color-l3-background-positive);\n\n    &:focus {\n      outline-color: var(--gds-sys-color-l3-content-positive);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-sys-color-l3-background-positive),\n          var(--gds-sys-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-sys-color-l3-background-positive),\n        var(--gds-sys-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-sys-color-l3-background-positive-secondary);\n      color: var(--gds-sys-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-sys-color-l3-background-positive-secondary),\n            var(--gds-sys-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-sys-color-l3-background-positive-secondary),\n          var(--gds-sys-color-l3-states-positive-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-sys-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-sys-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-sys-color-l3-states-positive-pressed)\n        );\n      }\n    }\n  }\n\n  .negative {\n    background-color: var(--gds-sys-color-l3-background-negative);\n\n    &:focus {\n      outline-color: var(--gds-sys-color-l3-content-negative);\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-sys-color-l3-background-negative),\n          var(--gds-sys-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-sys-color-l3-background-negative),\n        var(--gds-sys-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-sys-color-l3-background-negative-secondary);\n      color: var(--gds-sys-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-sys-color-l3-background-negative-secondary),\n            var(--gds-sys-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-sys-color-l3-background-negative-secondary),\n          var(--gds-sys-color-l3-states-negative-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-sys-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-sys-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-sys-color-l3-states-negative-pressed)\n        );\n      }\n    }\n  }\n}\n";
 export default styles;

package/components/calendar/calendar.styles.js

@@ -10,17 +10,18 @@ const style = css`
     }
 
     :host table {
-      border-spacing: var(--gds-space-2xs);
+      border-spacing: var(--gds-sys-space-2xs);
       flex-grow: 1;
       width: 100%;
       padding: 1ch;
     }
 
     thead {
-      box-shadow: 0 var(--gds-space-4xs) 0 0 var(--gds-color-l2-border-primary);
+      box-shadow: 0 var(--gds-sys-space-4xs) 0 0
+        var(--gds-sys-color-l2-border-primary);
       th {
-        height: var(--gds-space-2xl);
-        width: var(--gds-space-2xl);
+        height: var(--gds-sys-space-2xl);
+        width: var(--gds-sys-space-2xl);
         box-sizing: border-box;
         text-align: center;
         font-weight: normal;
@@ -30,34 +31,34 @@ const style = css`
     tbody {
       td {
         position: relative;
-        height: var(--gds-space-3xl);
-        width: var(--gds-space-3xl);
+        height: var(--gds-sys-space-3xl);
+        width: var(--gds-sys-space-3xl);
         box-sizing: border-box;
         text-align: center;
         user-select: none;
-        border-width: var(--gds-space-3xs);
+        border-width: var(--gds-sys-space-3xs);
         border-style: solid;
         border-color: transparent;
-        border-radius: var(--gds-space-2xs);
+        border-radius: var(--gds-sys-space-2xs);
         transition: background 0.2s;
         outline-style: solid;
         outline-color: transparent;
         outline-width: 0px;
-        outline-offset: var(--gds-space-3xs);
+        outline-offset: var(--gds-sys-space-3xs);
 
         &:not(.disabled):hover,
         &[aria-selected='true'] {
-          background: var(--gds-color-l2-background-tertiary);
+          background: var(--gds-sys-color-l2-background-tertiary);
           cursor: pointer;
-          color: var(--gds-color-l2-content-tertiary);
+          color: var(--gds-sys-color-l2-content-tertiary);
         }
 
         &.today {
-          border-color: var(--gds-color-l2-background-tertiary);
+          border-color: var(--gds-sys-color-l2-background-tertiary);
         }
 
         &.disabled {
-          color: var(--gds-color-l3-content-disabled);
+          color: var(--gds-sys-color-l3-content-disabled);
           cursor: not-allowed;
         }
 
@@ -66,19 +67,19 @@ const style = css`
         }
 
         &:focus-visible {
-          outline-color: var(--gds-color-l2-content-primary);
-          outline-width: var(--gds-space-3xs);
+          outline-color: var(--gds-sys-color-l2-content-primary);
+          outline-width: var(--gds-sys-space-3xs);
         }
       }
 
       .indicator-dot {
         display: flex;
         position: absolute;
-        width: var(--gds-space-2xs);
-        height: var(--gds-space-2xs);
-        border-radius: var(--gds-space-max);
+        width: var(--gds-sys-space-2xs);
+        height: var(--gds-sys-space-2xs);
+        border-radius: var(--gds-sys-space-max);
         background-color: var(--_color, currentColor);
-        inset: var(--gds-space-2xs) var(--gds-space-2xs) auto auto;
+        inset: var(--gds-sys-space-2xs) var(--gds-sys-space-2xs) auto auto;
       }
     }
   }

package/components/card/card.component.js

@@ -30,7 +30,7 @@ GdsCard.styles = [
         border-color: var(--_border-color);
         background-color: var(--_background-color);
         color: var(--_color);
-        border-width: var(--gds-space-4xs);
+        border-width: var(--gds-sys-space-4xs);
         border-style: solid;
         display: flex;
         flex-direction: column;
@@ -47,9 +47,9 @@ __decorateClass([
   styleExpressionProperty({
     styleTemplate: function(_prop, v) {
       return `
-      --_border-color: var(--gds-color-l${this.level}-background-${v});
-      --_background-color: var(--gds-color-l${this.level}-background-${v});
-      --_color: var(--gds-color-l${this.level}-content-${v});
+      --_border-color: var(--gds-sys-color-l${this.level}-background-${v});
+      --_background-color: var(--gds-sys-color-l${this.level}-background-${v});
+      --_color: var(--gds-sys-color-l${this.level}-content-${v});
       `;
     }
   })

package/components/datepicker/datepicker.component.d.ts

@@ -61,6 +61,10 @@ declare class Datepicker extends GdsFormControlElement<Date> {
      * An array of dates that should be disabled in the calendar.
      */
     disabledDates?: Date[];
+    /**
+     * Whether the supporting text should be displayed or not.
+     */
+    showExtendedSupportingText: boolean;
     /**
      * Get the currently focused date in the calendar popover. If no date is focused, or the calendar popover
      * is closed, the value will be undefined.

package/components/datepicker/datepicker.component.js

@@ -70,6 +70,7 @@ let Datepicker = class extends GdsFormControlElement {
     this.showWeekNumbers = false;
     this.hideLabel = false;
     this.disabledWeekends = false;
+    this.showExtendedSupportingText = false;
     this._focusedMonth = (/* @__PURE__ */ new Date()).getMonth();
     this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
     this._dateFormatLayout = __privateMethod(this, _parseDateFormat, parseDateFormat_fn).call(this, "y-m-d");
@@ -278,7 +279,10 @@ let Datepicker = class extends GdsFormControlElement {
     return html`
       ${when(
       !this.plain,
-      () => html`<gds-form-control-header class="size-${this.size}">
+      () => html`<gds-form-control-header
+            class="size-${this.size}"
+            .showExtendedSupportingText="${this.showExtendedSupportingText}"
+          >
             <label id="label" for="spinner-0" slot="label">${this.label}</label>
             ${when(
         this.supportingText.length > 0,
@@ -698,6 +702,13 @@ __decorateClass([
 __decorateClass([
   property({ converter: dateArrayConverter, attribute: "disabled-dates" })
 ], Datepicker.prototype, "disabledDates", 2);
+__decorateClass([
+  property({
+    attribute: "show-extended-supporting-text",
+    type: Boolean,
+    reflect: true
+  })
+], Datepicker.prototype, "showExtendedSupportingText", 2);
 __decorateClass([
   queryAsync("#calendar-button")
 ], Datepicker.prototype, "test_calendarButton", 2);

package/components/datepicker/datepicker.styles.js

@@ -13,14 +13,14 @@ const styles = css`
       align-items: center;
       justify-content: flex-start;
       inline-size: 11ch;
-      gap: var(--gds-space-4xs);
-      font-size: var(--gds-text-size-detail-s);
-      font-weight: var(--gds-text-weight-regular);
+      gap: var(--gds-sys-space-4xs);
+      font-size: var(--gds-sys-text-size-detail-s);
+      font-weight: var(--gds-sys-text-weight-regular);
     }
 
     :host([size='small']) .spinners {
-      font-size: var(--gds-text-size-detail-s);
-      line-height: var(--gds-text-line-height-detail-s);
+      font-size: var(--gds-sys-text-size-detail-s);
+      line-height: var(--gds-sys-text-line-height-detail-s);
     }
 
     .spinner {
@@ -30,16 +30,16 @@ const styles = css`
       text-align: center;
       height: 100%;
       box-sizing: border-box;
-      /* border-radius: var(--gds-space-2xs); */
+      /* border-radius: var(--gds-sys-space-2xs); */
       outline: none;
-      padding-block: var(--gds-space-3xs);
+      padding-block: var(--gds-sys-space-3xs);
       text-transform: uppercase;
       line-height: 1;
       text-align: center;
 
       &:focus {
-        background-color: var(--gds-color-l3-background-primary);
-        color: var(--gds-color-l3-content-primary);
+        background-color: var(--gds-color-l2-background-tertiary);
+        color: var(--gds-color-l2-content-tertiary);
       }
     }
   }

package/components/datepicker/datepicker.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    contain: layout;\n    isolation: isolate;\n    gap: var(--gds-space-xs);\n  }\n  [role=spinbutton] {\n    display: inline-block;\n  }\n  [role=spinbutton]:focus {\n    background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);\n    outline: none;\n  }\n  [role=spinbutton]::-moz-selection {\n    background: transparent;\n  }\n  [role=spinbutton]::selection {\n    background: transparent;\n  }\n}";
+const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    contain: layout;\n    isolation: isolate;\n    gap: var(--gds-sys-space-xs);\n  }\n  [role=spinbutton] {\n    display: inline-block;\n  }\n  [role=spinbutton]:focus {\n    background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);\n    outline: none;\n  }\n  [role=spinbutton]::-moz-selection {\n    background: transparent;\n  }\n  [role=spinbutton]::selection {\n    background: transparent;\n  }\n}";
 export default styles;

package/components/details/details.styles.js

@@ -4,11 +4,11 @@ const styles = css`
   @layer base, reset;
   @layer base {
     .details {
-      border-bottom: solid var(--gds-space-4xs)
-        var(--gds-color-l2-border-primary);
-      font-size: var(--gds-text-size-body-m);
-      line-height: var(--gds-text-line-height-body-m);
-      color: var(--gds-color-l2-content-secondary);
+      border-bottom: solid var(--gds-sys-space-4xs)
+        var(--gds-sys-color-l2-border-primary);
+      font-size: var(--gds-sys-text-size-body-m);
+      line-height: var(--gds-sys-text-line-height-body-m);
+      color: var(--gds-sys-color-l2-content-secondary);
       transition: border-color 240ms linear;
     }
 
@@ -18,14 +18,14 @@ const styles = css`
       align-items: center;
       list-style: none;
       user-select: none;
-      outline-offset: var(--gds-space-2xs);
+      outline-offset: var(--gds-sys-space-2xs);
       outline-color: currentColor;
       transition: all 120ms;
-      color: var(--gds-color-l2-content-primary);
+      color: var(--gds-sys-color-l2-content-primary);
     }
 
     .summary-icon {
-      border-radius: var(--gds-space-max);
+      border-radius: var(--gds-sys-space-max);
       background-color: transparent;
       transition: all 280ms;
       aspect-ratio: 1;
@@ -38,7 +38,7 @@ const styles = css`
     .summary-icon::after {
       content: '';
       position: absolute;
-      border-radius: var(--gds-space-max);
+      border-radius: var(--gds-sys-space-max);
       transition: all 280ms;
       inset: 0;
       scale: 0.9;
@@ -47,12 +47,12 @@ const styles = css`
       background-color: color-mix(
         in srgb,
         transparent,
-        var(--gds-color-l3-states-light-hover)
+        var(--gds-sys-color-l3-states-light-hover)
       );
     }
 
     .summary:focus {
-      outline-color: var(--gds-color-l3-content-tertiary);
+      outline-color: var(--gds-sys-color-l3-content-tertiary);
 
       &:not(:focus-visible) {
         outline-color: transparent;
@@ -73,41 +73,41 @@ const styles = css`
 
       .details:hover,
       .details:focus-within {
-        border-color: var(--gds-color-l2-border-quaternary);
+        border-color: var(--gds-sys-color-l2-border-quaternary);
       }
     }
 
     .summary-label {
-      font-size: var(--gds-text-size-heading-xs);
-      line-height: var(--gds-text-line-height-heading-xs);
-      font-weight: var(--gds-text-weight-regular);
-      padding-block: var(--gds-space-m);
+      font-size: var(--gds-sys-text-size-heading-xs);
+      line-height: var(--gds-sys-text-line-height-heading-xs);
+      font-weight: var(--gds-sys-text-weight-regular);
+      padding-block: var(--gds-sys-space-m);
       cursor: pointer;
       flex: 1;
       outline: none;
     }
 
     .details.small .summary-label {
-      font-size: var(--gds-text-size-heading-2xs);
-      line-height: var(--gds-text-line-height-heading-2xs);
-      padding-block: var(--gds-space-s);
+      font-size: var(--gds-sys-text-size-heading-2xs);
+      line-height: var(--gds-sys-text-line-height-heading-2xs);
+      padding-block: var(--gds-sys-space-s);
     }
 
     .details.small .content {
-      font-size: var(--gds-text-size-heading-2xs);
-      line-height: var(--gds-text-line-height-heading-2xs);
+      font-size: var(--gds-sys-text-size-heading-2xs);
+      line-height: var(--gds-sys-text-line-height-heading-2xs);
     }
 
     .details:focus-visible {
-      border-radius: var(--gds-space-2xs);
+      border-radius: var(--gds-sys-space-2xs);
     }
 
     .details.open .content {
-      padding-block-end: var(--gds-space-l);
+      padding-block-end: var(--gds-sys-space-l);
     }
 
     .details.small.open .content {
-      padding-block-end: var(--gds-space-s);
+      padding-block-end: var(--gds-sys-space-s);
     }
 
     .content {

package/components/div/div.component.js

@@ -60,7 +60,7 @@ __decorateClass([
         style2 = this_["border-style"] || "solid",
         color = this_["border-color"] || "primary"
       ] = values;
-      const sizeCss = `var(--gds-space-${size})`;
+      const sizeCss = `var(--gds-sys-space-${size})`;
       const colorCss = parseColorValue(color, "border", this_.level);
       return `border: ${sizeCss} ${style2} ${colorCss};`;
     }
@@ -99,15 +99,15 @@ __decorateClass([
   styleExpressionProperty({
     styleTemplate: (_prop, values) => {
       const size = values[0];
-      const styleSize = `font-size: var(--gds-text-size-${size});`;
-      const styleLine = `line-height: var(--gds-text-line-height-${size});`;
+      const styleSize = `font-size: var(--gds-sys-text-size-${size});`;
+      const styleLine = `line-height: var(--gds-sys-text-line-height-${size});`;
       return styleSize + styleLine;
     }
   })
 ], GdsDiv.prototype, "font-size", 2);
 __decorateClass([
   styleExpressionProperty({
-    valueTemplate: (v) => `var(--gds-text-weight-${v})`
+    valueTemplate: (v) => `var(--gds-sys-text-weight-${v})`
   })
 ], GdsDiv.prototype, "font-weight", 2);
 __decorateClass([

package/components/div/div.style.js

@@ -6,13 +6,13 @@ const style = css`
     box-sizing: border-box;
     border-style: solid;
     border-width: 0;
-    border-color: var(--gds-color-l2-border-primary);
+    border-color: var(--gds-sys-color-l2-border-primary);
   }
   :host(:focus-visible) {
     outline-color: color-mix(in srgb, currentcolor, #000 100%);
-    outline-offset: var(--gds-space-3xs);
+    outline-offset: var(--gds-sys-space-3xs);
     outline-style: solid;
-    outline-width: var(--gds-space-3xs);
+    outline-width: var(--gds-sys-space-3xs);
   }
 `;
 var div_style_default = style;

package/components/divider/divider.component.js

@@ -32,7 +32,7 @@ __decorateClass([
 __decorateClass([
   styleExpressionProperty({
     property: "--_size",
-    valueTemplate: (v) => `var(--gds-space-${v})`
+    valueTemplate: (v) => `var(--gds-sys-space-${v})`
   })
 ], GdsDivider.prototype, "size", 2);
 __decorateClass([

package/components/dropdown/dropdown.component.d.ts

@@ -107,6 +107,10 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
      * Whether to disable the mobile styles.
      */
     disableMobileStyles: boolean;
+    /**
+     * Whether the supporting text should be displayed or not.
+     */
+    showExtendedSupportingText: boolean;
     /**
      * Get the options of the dropdown.
      */

package/components/dropdown/dropdown.component.js

@@ -52,6 +52,7 @@ let GdsDropdown = class extends GdsFormControlElement {
     this.hideLabel = false;
     this.plain = false;
     this.disableMobileStyles = false;
+    this.showExtendedSupportingText = false;
     __privateAdd(this, _optionElements, void 0);
     __privateAdd(this, _renderCombobox, () => {
       return html`
@@ -298,7 +299,10 @@ let GdsDropdown = class extends GdsFormControlElement {
       ${when(
       !this.plain && !this.hideLabel,
       () => html`
-          <gds-form-control-header class="size-${this.size}">
+          <gds-form-control-header
+            class="size-${this.size}"
+            .showExtendedSupportingText="${this.showExtendedSupportingText}"
+          >
             <label id="label" for="trigger" slot="label">${this.label}</label>
             ${when(
         this.supportingText.length > 0,
@@ -336,10 +340,7 @@ let GdsDropdown = class extends GdsFormControlElement {
         >
           <slot name="lead" slot="lead"></slot>
           ${this.combobox && !this.multiple ? __privateGet(this, _renderCombobox).call(this) : __privateGet(this, _renderTriggerButton).call(this)}
-          <gds-icon-chevron-bottom
-            slot="trail"
-            label=${msg("Expand")}
-          ></gds-icon-chevron-bottom>
+          <gds-icon-chevron-bottom slot="trail"></gds-icon-chevron-bottom>
         </gds-field-base>
 
         ${when(
@@ -517,6 +518,13 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], GdsDropdown.prototype, "disableMobileStyles", 2);
+__decorateClass([
+  property({
+    attribute: "show-extended-supporting-text",
+    type: Boolean,
+    reflect: true
+  })
+], GdsDropdown.prototype, "showExtendedSupportingText", 2);
 __decorateClass([
   query("#trigger")
 ], GdsDropdown.prototype, "_elTriggerBtn", 2);

package/components/dropdown/dropdown.styles.js

@@ -33,33 +33,33 @@ const style = css`
     }
 
     input[type='text'] {
-      border-radius: var(--gds-space-xs);
+      border-radius: var(--gds-sys-space-xs);
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       font-size: inherit;
       line-height: inherit;
       border: none;
       outline: none;
-      color: var(--gds-color-l3-content-disabled);
-      border-color: var(--gds-color-l3-border-tertiary);
-      border-width: 0 0 var(--gds-space-4xs) 0;
+      color: var(--gds-sys-color-l3-content-disabled);
+      border-color: var(--gds-sys-color-l3-border-tertiary);
+      border-width: 0 0 var(--gds-sys-space-4xs) 0;
       border-style: solid;
       width: 100%;
-      padding: var(--gds-space-m);
-      font-weight: var(--gds-text-weight-regular);
+      padding: var(--gds-sys-space-m);
+      font-weight: var(--gds-sys-text-weight-regular);
       flex: 1;
       box-sizing: border-box;
       font-family: inherit;
 
       &:focus {
-        border-color: var(--gds-color-l3-border-secondary);
-        color: var(--gds-color-l3-content-tertiary);
+        border-color: var(--gds-sys-color-l3-border-secondary);
+        color: var(--gds-sys-color-l3-content-tertiary);
       }
 
       &::placeholder {
         font-family: inherit;
-        font-weight: var(--gds-text-weight-book);
-        color: var(--gds-color-l3-content-disabled);
+        font-weight: var(--gds-sys-text-weight-book);
+        color: var(--gds-sys-color-l3-content-disabled);
       }
     }
 

package/components/fab/fab.styles.js

@@ -5,11 +5,11 @@ const style = css`
     display: flex;
     z-index: 1050;
     position: fixed;
-    inset: auto var(--gds-space-3xl) var(--gds-space-3xl) auto;
+    inset: auto var(--gds-sys-space-3xl) var(--gds-sys-space-3xl) auto;
   }
   .button {
     box-shadow: var(--gds-shadow-m);
-    block-size: calc(var(--_block-size) + var(--gds-space-xs));
+    block-size: calc(var(--_block-size) + var(--gds-sys-space-xs));
     width: max-content;
   }
 `;

package/components/flex/flex.styles.js

@@ -6,7 +6,7 @@ const style = css`
     box-sizing: border-box;
     border-style: solid;
     border-width: 0;
-    border-color: var(--gds-color-l2-border-primary);
+    border-color: var(--gds-sys-color-l2-border-primary);
   }
 `;
 var flex_styles_default = style;

package/components/img/img.component.js

@@ -29,7 +29,7 @@ __decorateClass([
 __decorateClass([
   styleExpressionProperty({
     property: "border-radius",
-    valueTemplate: (v) => `var(--gds-space-${v})`
+    valueTemplate: (v) => `var(--gds-sys-space-${v})`
   })
 ], GdsImg.prototype, "border-radius", 2);
 __decorateClass([

package/components/link/link.styles.js

@@ -20,7 +20,7 @@ const style = css`
       color: currentColor;
       outline-offset: 4px;
       outline-color: currentColor;
-      font-weight: var(--gds-text-weight-book);
+      font-weight: var(--gds-sys-text-weight-book);
       transition: all 0.2s ease-in-out;
 
       &:hover {

package/components/menu-button/menu-button.styles.js

@@ -5,13 +5,13 @@ const style = css`
 
   @layer tokens {
     :host {
-      --_gap: var(--gds-space-xs);
+      --_gap: var(--gds-sys-space-xs);
 
-      --_padding-inline: var(--gds-space-m);
-      --_padding-block: var(--gds-space-xs);
+      --_padding-inline: var(--gds-sys-space-m);
+      --_padding-block: var(--gds-sys-space-xs);
 
       --_color-bg: transparent;
-      --_color-text: var(--gds-color-l3-content-tertiary);
+      --_color-text: var(--gds-sys-color-l3-content-tertiary);
       --_color-border: transparent;
 
       --_font-size: 1rem;
@@ -75,18 +75,18 @@ const style = css`
         background-color: color-mix(
           in srgb,
           transparent,
-          var(--gds-color-l3-states-light-hover)
+          var(--gds-sys-color-l3-states-light-hover)
         );
-        --_color-border: var(--gds-color-l3-border-secondary);
+        --_color-border: var(--gds-sys-color-l3-border-secondary);
       }
 
       &.selected {
         background-color: color-mix(
           in srgb,
           transparent,
-          var(--gds-color-l3-states-light-hover)
+          var(--gds-sys-color-l3-states-light-hover)
         );
-        --_color-border: var(--gds-color-l3-border-primary);
+        --_color-border: var(--gds-sys-color-l3-border-primary);
       }
 
       slot:not([name]) {
@@ -99,7 +99,7 @@ const style = css`
     .compact {
       display: flex;
       flex-direction: column;
-      --_padding-inline: var(--gds-space-s);
+      --_padding-inline: var(--gds-sys-space-s);
       --_gap: 1px;
       font-size: 0.875rem;
       height: 56px;
@@ -120,7 +120,7 @@ const style = css`
 
   :disabled {
     border-color: var(--_color-bg);
-    color: var(--gds-color-l3-content-disabled);
+    color: var(--gds-sys-color-l3-content-disabled);
     pointer-events: none;
   }