@sebgroup/green-core 1.60.1 → 1.61.0

package/chunks/{chunk.MRBX5PXE.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.LOIMPU3C.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.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.IGE2PH6T.js → chunk.A2VYZXDP.js}

@@ -1,12 +1,12 @@
 import {
   forwardAttributes
-} from "./chunk.VV4IKVAK.js";
+} from "./chunk.BHWBJIPJ.js";
 import {
   GdsFormControlElement
-} from "./chunk.JYQY43ZR.js";
+} from "./chunk.Z3MHP5MN.js";
 import {
   tokens
-} from "./chunk.LOIMPU3C.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.3YTTW5RI.js → chunk.B7X4UWIN.js}

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

package/chunks/{chunk.VV4IKVAK.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.LOIMPU3C.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 {