@sebgroup/green-core 1.60.0 → 1.61.0

package/chunks/{chunk.HLWSHILT.js → chunk.27SYD4ZG.js}

@@ -1,12 +1,12 @@
 import {
   TransitionalStyles
-} from "./chunk.2RPIXTTF.js";
+} from "./chunk.U44LH2CF.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.VI2KPHVV.js";
+} from "./chunk.BYYROY6X.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";
@@ -64,7 +64,6 @@ var style = css`
       th {
         height: var(--gds-space-2xl);
         width: var(--gds-space-2xl);
-        background: var(--gds-sys-color-container-container-bright);
         box-sizing: border-box;
         text-align: center;
         font-weight: normal;
@@ -91,18 +90,17 @@ var style = css`
 
         &:not(.disabled):hover,
         &[aria-selected='true'] {
-          background: var(--gds-sys-color-base800);
+          background: var(--gds-color-l2-background-tertiary);
           cursor: pointer;
-          color: var(--gds-sys-color-base-white);
+          color: var(--gds-color-l2-content-tertiary);
         }
 
         &.today {
-          border-color: var(--gds-sys-color-base800);
+          border-color: var(--gds-color-l2-background-tertiary);
         }
 
         &.disabled {
-          background-color: var(--gds-sys-color-base100);
-          color: var(--gds-sys-color-base500);
+          color: var(--gds-color-l3-content-disabled);
           cursor: not-allowed;
         }
 

package/chunks/{chunk.4F2WAZKO.js → chunk.2HVQ24BJ.js}

@@ -12,9 +12,9 @@ import {
 var IconBack = class extends GdsIcon {
 };
 /** @private */
-IconBack._regularSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M19.609 4.09151C19.368 3.96011 19.0745 3.97087 18.8437 4.11957L7.59372 11.3696C7.37946 11.5077 7.25 11.7451 7.25 12C7.25 12.2549 7.37946 12.4924 7.59372 12.6304L18.8437 19.8804C19.0745 20.0291 19.368 20.0399 19.609 19.9085C19.85 19.7771 20 19.5245 20 19.25V4.75C20 4.47549 19.85 4.22292 19.609 4.09151ZM4.75 4C4.33579 4 4 4.33579 4 4.75V19.25C4 19.6642 4.33579 20 4.75 20C5.16421 20 5.5 19.6642 5.5 19.25V4.75C5.5 4.33579 5.16421 4 4.75 4ZM18.5 6.12558V17.8744L9.38453 12L18.5 6.12558Z" fill="black"/>`;
+IconBack._regularSVG = `<path fill-rule="evenodd" clip-rule="evenodd" d="M19.609 4.09151C19.368 3.96011 19.0745 3.97087 18.8437 4.11957L7.59372 11.3696C7.37946 11.5077 7.25 11.7451 7.25 12C7.25 12.2549 7.37946 12.4924 7.59372 12.6304L18.8437 19.8804C19.0745 20.0291 19.368 20.0399 19.609 19.9085C19.85 19.7771 20 19.5245 20 19.25V4.75C20 4.47549 19.85 4.22292 19.609 4.09151ZM4.75 4C4.33579 4 4 4.33579 4 4.75V19.25C4 19.6642 4.33579 20 4.75 20C5.16421 20 5.5 19.6642 5.5 19.25V4.75C5.5 4.33579 5.16421 4 4.75 4ZM18.5 6.12558V17.8744L9.38453 12L18.5 6.12558Z" fill="currentColor"/>`;
 /** @private */
-IconBack._solidSVG = `<path d="M18.8437 4.11957C19.0745 3.97087 19.368 3.96011 19.609 4.09151C19.85 4.22292 20 4.47549 20 4.75V19.25C20 19.5245 19.85 19.7771 19.609 19.9085C19.368 20.0399 19.0745 20.0291 18.8437 19.8804L7.59372 12.6304C7.37946 12.4923 7.25 12.2549 7.25 12C7.25 11.7451 7.37946 11.5077 7.59372 11.3696L18.8437 4.11957Z" fill="black"/><path d="M4 4.75C4 4.33579 4.33579 4 4.75 4C5.16421 4 5.5 4.33579 5.5 4.75V19.25C5.5 19.6642 5.16421 20 4.75 20C4.33579 20 4 19.6642 4 19.25V4.75Z" fill="black"/>`;
+IconBack._solidSVG = `<path d="M18.8437 4.11957C19.0745 3.97087 19.368 3.96011 19.609 4.09151C19.85 4.22292 20 4.47549 20 4.75V19.25C20 19.5245 19.85 19.7771 19.609 19.9085C19.368 20.0399 19.0745 20.0291 18.8437 19.8804L7.59372 12.6304C7.37946 12.4923 7.25 12.2549 7.25 12C7.25 11.7451 7.37946 11.5077 7.59372 11.3696L18.8437 4.11957Z" fill="currentColor"/><path d="M4 4.75C4 4.33579 4.33579 4 4.75 4C5.16421 4 5.5 4.33579 5.5 4.75V19.25C5.5 19.6642 5.16421 20 4.75 20C4.33579 20 4 19.6642 4 19.25V4.75Z" fill="currentColor"/>`;
 /** @private */
 IconBack._name = "back";
 IconBack = __decorateClass([

package/chunks/{chunk.BRHKDNFD.js → chunk.3HGZ5B5Q.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.C3ECHGX7.js";
 import {
   GdsFormControlElement
-} from "./chunk.JYQY43ZR.js";
+} from "./chunk.Z3MHP5MN.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";

package/chunks/{chunk.TVJYFYLU.js → chunk.43JUKB53.js}

@@ -38,7 +38,7 @@ var style = css`
 
   @layer base {
     :host(:not(:last-child)) {
-      border-bottom: 1px solid var(--gds-sys-color-border-stroke-variant2);
+      border-bottom: 1px solid var(--gds-color-l2-border-primary);
     }
 
     :host div {
@@ -54,22 +54,44 @@ var style = css`
       gap: 1ch;
       max-width: 100%;
       box-sizing: border-box;
+      position: relative;
+      transition:
+        background-color 0.2s,
+        border-color 0.2s,
+        color 0.2s,
+        outline-color 422ms;
+
+      &::before {
+        content: ' ';
+        display: flex;
+        inset: var(--gds-space-2xs);
+        position: absolute;
+        border: var(--gds-space-3xs) solid currentColor;
+        border-radius: var(--gds-space-xs);
+        opacity: 0;
+        visitility: hidden;
+        pointer-events: none;
+        transition: opacity 422ms;
+      }
     }
 
-    :host([highlighted]) div {
-      background-color: var(--gds-sys-color-container-container-shade1);
-      color: var(--gds-sys-color-content-content-inverse);
+    :host([highlighted]) {
+      background-color: var(--gds-color-l2-background-tertiary);
+      color: var(--gds-color-l2-content-tertiary);
     }
 
     :host(:hover:not([highlighted])) div {
-      background-color: var(--gds-sys-color-container-container-dim1);
+      background-color: var(--gds-color-l3-background-secondary);
     }
 
     :host(:focus-visible) {
-      outline: auto;
-      outline-offset: -6px;
-      outline-color: currentColor;
-      outline-width: 2px;
+      outline: none;
+
+      div::before {
+        inset: var(--gds-space-2xs);
+        opacity: 1;
+        visivility: visible;
+      }
     }
 
     :host([aria-hidden='true']) div {
@@ -81,7 +103,7 @@ var style = css`
       align-items: center;
       justify-content: center;
       height: 1lh;
-      width: auto;
+      width: 1lh;
       box-sizing: border-box;
       position: relative;
       aspect-ratio: 1/1;
@@ -94,7 +116,7 @@ var style = css`
 
         gds-icon-checkmark {
           &::part(icon) {
-            color: var(--gds-sys-color-base-white);
+            color: var(--gds-color-l2-content-tertiary);
             stroke-width: var(--gds-space-2xs);
           }
         }

package/chunks/{chunk.SHITJ27X.js → chunk.5L6LO6VX.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.2RPIXTTF.js";
+} from "./chunk.U44LH2CF.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";

package/chunks/{chunk.RXOV7ZV4.js → chunk.77RJTA43.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.WM7HBMMV.js";
 import {
   TransitionalStyles
-} from "./chunk.2RPIXTTF.js";
+} from "./chunk.U44LH2CF.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";

package/chunks/{chunk.4VYS7SYU.js → chunk.A2VYZXDP.js}

@@ -1,12 +1,12 @@
 import {
   forwardAttributes
-} from "./chunk.BGWGCMCR.js";
+} from "./chunk.BHWBJIPJ.js";
 import {
   GdsFormControlElement
-} from "./chunk.JYQY43ZR.js";
+} from "./chunk.Z3MHP5MN.js";
 import {
   tokens
-} from "./chunk.VI2KPHVV.js";
+} from "./chunk.BYYROY6X.js";
 import {
   gdsCustomElement,
   html
@@ -196,6 +196,12 @@ var GdsInput = class extends GdsFormControlElement {
           composed: true
         })
       );
+      this.dispatchEvent(
+        new Event("input", {
+          bubbles: true,
+          composed: true
+        })
+      );
     });
   }
   connectedCallback() {
@@ -216,6 +222,7 @@ var GdsInput = class extends GdsFormControlElement {
 };
 _renderDefault = new WeakSet();
 renderDefault_fn = function() {
+  var _a;
   return html`
       <gds-form-control-header class="size-${this.size}">
         <label for="input" slot="label">${this.label}</label>
@@ -253,8 +260,8 @@ renderDefault_fn = function() {
 
       <gds-form-control-footer
         class="size-${this.size}"
-        .charCounter=${__privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get) && this.maxlength - this.value.length}
-        .validationMessage=${this.invalid && this.validationMessage}
+        .charCounter=${__privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get) && this.maxlength - (((_a = this.value) == null ? void 0 : _a.length) || 0)}
+        .validationMessage=${this.invalid && (this.errorMessage || this.validationMessage)}
       ></gds-form-control-footer>
     `;
 };
@@ -307,7 +314,8 @@ renderNativeInput_fn = function() {
 };
 _renderClearButton = new WeakSet();
 renderClearButton_fn = function() {
-  if (this.clearable && this.value.length > 0)
+  var _a;
+  if (this.clearable && (((_a = this.value) == null ? void 0 : _a.length) || 0) > 0)
     return html`
         <gds-button
           size="${this.size === "small" ? "xs" : "small"}"

package/chunks/{chunk.KSBQGJ4N.js → chunk.B525N4J3.js}

@@ -12,9 +12,9 @@ import {
 var IconPause = class extends GdsIcon {
 };
 /** @private */
-IconPause._regularSVG = `<path d="M4.75 4.75C4.75 4.19772 5.19772 3.75 5.75 3.75H8.25C8.80228 3.75 9.25 4.19772 9.25 4.75V19.25C9.25 19.8023 8.80228 20.25 8.25 20.25H5.75C5.19772 20.25 4.75 19.8023 4.75 19.25V4.75Z" stroke="black" stroke-width="1.5" stroke-linejoin="round"/><path d="M14.75 4.75C14.75 4.19772 15.1977 3.75 15.75 3.75H18.25C18.8023 3.75 19.25 4.19772 19.25 4.75V19.25C19.25 19.8023 18.8023 20.25 18.25 20.25H15.75C15.1977 20.25 14.75 19.8023 14.75 19.25V4.75Z" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>`;
+IconPause._regularSVG = `<path d="M4.75 4.75C4.75 4.19772 5.19772 3.75 5.75 3.75H8.25C8.80228 3.75 9.25 4.19772 9.25 4.75V19.25C9.25 19.8023 8.80228 20.25 8.25 20.25H5.75C5.19772 20.25 4.75 19.8023 4.75 19.25V4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M14.75 4.75C14.75 4.19772 15.1977 3.75 15.75 3.75H18.25C18.8023 3.75 19.25 4.19772 19.25 4.75V19.25C19.25 19.8023 18.8023 20.25 18.25 20.25H15.75C15.1977 20.25 14.75 19.8023 14.75 19.25V4.75Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>`;
 /** @private */
-IconPause._solidSVG = `<path d="M4.75 3C4.33579 3 4 3.33579 4 3.75V20.25C4 20.6642 4.33579 21 4.75 21H9.25C9.66421 21 10 20.6642 10 20.25V3.75C10 3.33579 9.66421 3 9.25 3H4.75Z" fill="black"/><path d="M14.75 3C14.3358 3 14 3.33579 14 3.75V20.25C14 20.6642 14.3358 21 14.75 21H19.25C19.6642 21 20 20.6642 20 20.25V3.75C20 3.33579 19.6642 3 19.25 3H14.75Z" fill="black"/>`;
+IconPause._solidSVG = `<path d="M4.75 3C4.33579 3 4 3.33579 4 3.75V20.25C4 20.6642 4.33579 21 4.75 21H9.25C9.66421 21 10 20.6642 10 20.25V3.75C10 3.33579 9.66421 3 9.25 3H4.75Z" fill="currentColor"/><path d="M14.75 3C14.3358 3 14 3.33579 14 3.75V20.25C14 20.6642 14.3358 21 14.75 21H19.25C19.6642 21 20 20.6642 20 20.25V3.75C20 3.33579 19.6642 3 19.25 3H14.75Z" fill="currentColor"/>`;
 /** @private */
 IconPause._name = "pause";
 IconPause = __decorateClass([

package/chunks/{chunk.2Z4W2TRI.js → chunk.B7X4UWIN.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.H2KG3F2S.js";
 import {
   tokens
-} from "./chunk.VI2KPHVV.js";
+} from "./chunk.BYYROY6X.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";

package/chunks/{chunk.BGWGCMCR.js → chunk.BHWBJIPJ.js}

@@ -1,15 +1,15 @@
 import {
   GdsFormControlElement
-} from "./chunk.JYQY43ZR.js";
+} from "./chunk.Z3MHP5MN.js";
 import {
   observeLightDOM
 } from "./chunk.WM7HBMMV.js";
 import {
   TransitionalStyles
-} from "./chunk.2RPIXTTF.js";
+} from "./chunk.U44LH2CF.js";
 import {
   tokens
-} from "./chunk.VI2KPHVV.js";
+} from "./chunk.BYYROY6X.js";
 import {
   gdsCustomElement,
   html
@@ -130,12 +130,14 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
       }
     }
 
-    &:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--gds-color-l3-background-primary),
-        var(--gds-color-l3-states-dark-hover)
-      );
+    @media (pointer: fine) {
+      &:hover {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-color-l3-background-primary),
+          var(--gds-color-l3-states-dark-hover)
+        );
+      }
     }
 
     &:active {
@@ -173,12 +175,14 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
     background-color: var(--gds-color-l3-background-secondary);
     color: var(--gds-color-l3-content-tertiary);
 
-    &:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--gds-color-l3-background-secondary),
-        var(--gds-color-l3-states-light-hover)
-      );
+    @media (pointer: fine) {
+      &:hover {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-color-l3-background-secondary),
+          var(--gds-color-l3-states-light-hover)
+        );
+      }
     }
 
     &:active {
@@ -194,12 +198,14 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
     background-color: transparent;
     color: var(--gds-color-l3-content-tertiary);
 
-    &:hover {
-      background-color: color-mix(
-        in srgb,
-        transparent,
-        var(--gds-color-l3-states-light-hover)
-      );
+    @media (pointer: fine) {
+      &:hover {
+        background-color: color-mix(
+          in srgb,
+          transparent,
+          var(--gds-color-l3-states-light-hover)
+        );
+      }
     }
 
     &:active {
@@ -238,12 +244,14 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
   .positive {
     background-color: var(--gds-color-l3-background-positive);
 
-    &:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--gds-color-l3-background-positive),
-        var(--gds-color-l3-states-dark-hover)
-      );
+    @media (pointer: fine) {
+      &:hover {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-color-l3-background-positive),
+          var(--gds-color-l3-states-dark-hover)
+        );
+      }
     }
 
     &:active {
@@ -258,12 +266,14 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
       background-color: var(--gds-color-l3-background-positive-secondary);
       color: var(--gds-color-l3-content-positive);
 
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          var(--gds-color-l3-background-positive-secondary),
-          var(--gds-color-l3-states-positive-hover)
-        );
+      @media (pointer: fine) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-color-l3-background-positive-secondary),
+            var(--gds-color-l3-states-positive-hover)
+          );
+        }
       }
 
       &:active {
@@ -279,12 +289,14 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
       background-color: transparent;
       color: var(--gds-color-l3-content-positive);
 
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          transparent,
-          var(--gds-color-l3-states-positive-hover)
-        );
+      @media (pointer: fine) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            transparent,
+            var(--gds-color-l3-states-positive-hover)
+          );
+        }
       }
 
       &:active {
@@ -300,12 +312,14 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
   .negative {
     background-color: var(--gds-color-l3-background-negative);
 
-    &:hover {
-      background-color: color-mix(
-        in srgb,
-        var(--gds-color-l3-background-negative),
-        var(--gds-color-l3-states-dark-hover)
-      );
+    @media (pointer: fine) {
+      &:hover {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-color-l3-background-negative),
+          var(--gds-color-l3-states-dark-hover)
+        );
+      }
     }
 
     &:active {
@@ -320,12 +334,14 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
       background-color: var(--gds-color-l3-background-negative-secondary);
       color: var(--gds-color-l3-content-negative);
 
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          var(--gds-color-l3-background-negative-secondary),
-          var(--gds-color-l3-states-negative-hover)
-        );
+      @media (pointer: fine) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-color-l3-background-negative-secondary),
+            var(--gds-color-l3-states-negative-hover)
+          );
+        }
       }
 
       &:active {
@@ -341,12 +357,14 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
       background-color: transparent;
       color: var(--gds-color-l3-content-negative);
 
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          transparent,
-          var(--gds-color-l3-states-negative-hover)
-        );
+      @media (pointer: fine) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            transparent,
+            var(--gds-color-l3-states-negative-hover)
+          );
+        }
       }
 
       &:active {