@sebgroup/green-core 1.64.0 → 1.65.0

package/chunks/{chunk.UDMQ6ZPV.js → chunk.25ME3RJJ.js}

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

package/chunks/{chunk.YYLPMTLX.js → chunk.2NIJ42AV.js}

@@ -1,12 +1,12 @@
 import {
   GdsContainer
-} from "./chunk.AXMGASII.js";
+} from "./chunk.CIUHRMH7.js";
 import {
   styleExpressionProperty
 } from "./chunk.K4KPKUH4.js";
 import {
   tokens
-} from "./chunk.2XGJAHBM.js";
+} from "./chunk.LVFKJRDS.js";
 import {
   gdsCustomElement,
   html

package/chunks/{chunk.DPXMDOM6.js → chunk.3CV43MWE.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.K4KPKUH4.js";
 import {
   tokens
-} from "./chunk.2XGJAHBM.js";
+} from "./chunk.LVFKJRDS.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.ECUZICLN.js → chunk.4V2MDCOG.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.CGNUY4TK.js";
+} from "./chunk.IEWLS75F.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.6OBCHB45.js → chunk.5GKJYSBV.js}

@@ -1,6 +1,6 @@
 import {
   tokens
-} from "./chunk.2XGJAHBM.js";
+} from "./chunk.LVFKJRDS.js";
 import {
   gdsCustomElement
 } from "./chunk.QK3R23GV.js";

package/chunks/{chunk.CJPQT2NX.js → chunk.76CTWWTO.js}

@@ -1,15 +1,15 @@
 import {
   GdsFormControlElement
-} from "./chunk.TURR45PB.js";
+} from "./chunk.VA6TUMR2.js";
 import {
   observeLightDOM
 } from "./chunk.WM7HBMMV.js";
 import {
   TransitionalStyles
-} from "./chunk.CGNUY4TK.js";
+} from "./chunk.IEWLS75F.js";
 import {
   tokens
-} from "./chunk.2XGJAHBM.js";
+} from "./chunk.LVFKJRDS.js";
 import {
   gdsCustomElement,
   html
@@ -122,7 +122,7 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
     flex: 1;
 
     &:focus {
-      outline-color: color-mix(in srgb, currentcolor, #000 100%);
+      outline-color: var(--gds-color-l3-content-tertiary);
 
       &:not(:focus-visible) {
         outline-color: transparent;
@@ -244,6 +244,14 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
   .positive {
     background-color: var(--gds-color-l3-background-positive);
 
+    &:focus {
+      outline-color: var(--gds-color-l3-content-positive);
+
+      &:not(:focus-visible) {
+        outline-color: transparent;
+      }
+    }
+
     @media (pointer: fine) {
       &:hover {
         background-color: color-mix(
@@ -312,6 +320,13 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
   .negative {
     background-color: var(--gds-color-l3-background-negative);
 
+    &:focus {
+      outline-color: var(--gds-color-l3-content-negative);
+      &:not(:focus-visible) {
+        outline-color: transparent;
+      }
+    }
+
     @media (pointer: fine) {
       &:hover {
         background-color: color-mix(

package/chunks/{chunk.UBQF2XNY.js → chunk.7C7Y6WAE.js}

@@ -4,13 +4,13 @@ import {
 } from "./chunk.ZRKILGXZ.js";
 import {
   TransitionalStyles
-} from "./chunk.CGNUY4TK.js";
+} from "./chunk.IEWLS75F.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.2XGJAHBM.js";
+} from "./chunk.LVFKJRDS.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.GHQJQMIT.js → chunk.7E76OQO4.js}

@@ -1,12 +1,12 @@
 import {
   GdsFlex
-} from "./chunk.6OI7CI4L.js";
+} from "./chunk.NVBMHHKJ.js";
 import {
   styleExpressionProperty
 } from "./chunk.K4KPKUH4.js";
 import {
   tokens
-} from "./chunk.2XGJAHBM.js";
+} from "./chunk.LVFKJRDS.js";
 import {
   gdsCustomElement
 } from "./chunk.QK3R23GV.js";

package/chunks/{chunk.FKS2NX4H.js → chunk.7IJ45CPT.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.UEJZWDMS.js";
 import {
   GdsContainer
-} from "./chunk.AXMGASII.js";
+} from "./chunk.CIUHRMH7.js";
 import {
   styleExpressionProperty
 } from "./chunk.K4KPKUH4.js";
 import {
   tokens
-} from "./chunk.2XGJAHBM.js";
+} from "./chunk.LVFKJRDS.js";
 import {
   gdsCustomElement
 } from "./chunk.QK3R23GV.js";

package/chunks/{chunk.RZ7ZIX2E.js → chunk.AYJHEQ2T.js}

@@ -1,6 +1,6 @@
 import {
   GdsFormControlElement
-} from "./chunk.TURR45PB.js";
+} from "./chunk.VA6TUMR2.js";
 import {
   observeLightDOM
 } from "./chunk.WM7HBMMV.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.2XGJAHBM.js";
+} from "./chunk.LVFKJRDS.js";
 import {
   gdsCustomElement,
   html

package/chunks/{chunk.XCRRXI2A.js → chunk.BIWJJ7RK.js}

@@ -1,12 +1,12 @@
 import {
   TransitionalStyles
-} from "./chunk.CGNUY4TK.js";
+} from "./chunk.IEWLS75F.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.2XGJAHBM.js";
+} from "./chunk.LVFKJRDS.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.C2QMTTFS.js → chunk.C3QNLD2U.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.CGNUY4TK.js";
+} from "./chunk.IEWLS75F.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.AXMGASII.js → chunk.CIUHRMH7.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.K4KPKUH4.js";
 import {
   tokens
-} from "./chunk.2XGJAHBM.js";
+} from "./chunk.LVFKJRDS.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.YXUQ3IEC.js → chunk.CPR6XAI3.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.E62NOHQC.js";
 import {
   TransitionalStyles
-} from "./chunk.CGNUY4TK.js";
+} from "./chunk.IEWLS75F.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/chunk.DO27JKTH.js

@@ -0,0 +1,324 @@
+import {
+  GdsFormControlElement
+} from "./chunk.VA6TUMR2.js";
+import {
+  observeLightDOM
+} from "./chunk.WM7HBMMV.js";
+import {
+  watch
+} from "./chunk.TYGMNHNO.js";
+import {
+  tokens
+} from "./chunk.LVFKJRDS.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.QK3R23GV.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.SEHSDSX2.js";
+
+// libs/core/src/components/select/select.ts
+import { localized } from "@lit/localize";
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+// libs/core/src/components/select/select.styles.ts
+import { css } from "lit";
+var styles = css`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      contain: layout;
+      isolation: isolate;
+      gap: var(--gds-space-xs);
+    }
+
+    .select-container {
+      display: contents;
+    }
+
+    select,
+    ::slotted(select) {
+      appearance: none;
+      outline: none;
+      border: none;
+      font: inherit;
+      flex: 1;
+      box-sizing: border-box;
+      background: transparent;
+      height: 100%;
+      opacity: 0;
+      position: absolute;
+      z-index: 1;
+      inset: 0;
+
+      &::-ms-expand {
+        display: none;
+      }
+    }
+
+    select[multiple] {
+      opacity: 1;
+      position: relative;
+      width: 100%;
+    }
+
+    label {
+      flex: 1;
+    }
+  }
+`;
+
+// libs/core/src/components/select/select.ts
+var _isValueInitialized, _handleSelectElementChange, _setValueFromSelectElement, setValueFromSelectElement_fn, _renderFieldContents, renderFieldContents_fn, _renderSlotLead, renderSlotLead_fn, _renderMainLabel, renderMainLabel_fn, _renderMainSlot, renderMainSlot_fn, _renderChevron, renderChevron_fn;
+var GdsSelect = class extends GdsFormControlElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _setValueFromSelectElement);
+    /**
+     * Renders the main content area of the select field.
+     * Composes the field from various sub-elements.
+     */
+    __privateAdd(this, _renderFieldContents);
+    /**
+     * Renders the leading slot content if provided.
+     */
+    __privateAdd(this, _renderSlotLead);
+    /**
+     * Renders the main label text for single-select mode.
+     * Shows either selected option text or placeholder.
+     */
+    __privateAdd(this, _renderMainLabel);
+    /**
+     * Renders the main slot and select container.
+     * The select container is where the native select is moved to.
+     */
+    __privateAdd(this, _renderMainSlot);
+    /**
+     * Renders the chevron icon button for single-select mode.
+     * Provides visual indication of dropdown functionality.
+     */
+    __privateAdd(this, _renderChevron);
+    this.supportingText = "";
+    this.size = "large";
+    __privateAdd(this, _isValueInitialized, false);
+    __privateAdd(this, _handleSelectElementChange, (e) => {
+      e.stopPropagation();
+      __privateMethod(this, _setValueFromSelectElement, setValueFromSelectElement_fn).call(this);
+      requestAnimationFrame(() => {
+        this.dispatchEvent(
+          new CustomEvent("input", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true
+          })
+        );
+        this.dispatchEvent(
+          new CustomEvent("change", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true
+          })
+        );
+      });
+    });
+  }
+  get value() {
+    return this._internalValue;
+  }
+  set value(value) {
+    __privateGet(this, _isValueInitialized) || __privateSet(this, _isValueInitialized, true);
+    this._internalValue = value;
+  }
+  /**
+   * Returns the display value for the select component.
+   * For single-select mode, this is the selected option text.
+   * For multi-select mode, this is a comma-separated list of selected option texts.
+   */
+  get displayValue() {
+    if (!this.selectElement)
+      return "";
+    return Array.from(this.selectElement.selectedOptions).map((o) => o.text).join(", ");
+  }
+  /**
+   * Wheter the select element is in multiple selection mode.
+   */
+  get multiple() {
+    var _a, _b;
+    return (_b = (_a = this.selectElement) == null ? void 0 : _a.multiple) != null ? _b : false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateComplete.then(() => {
+      this._captureDOM();
+      this._handleValueChange();
+    });
+  }
+  render() {
+    const CLASSES = {
+      multiple: this.multiple
+    };
+    return html`
+      <gds-form-control-header class="size-${this.size}">
+        <label for="select" slot="label" id="label-text">${this.label}</label>
+        <span slot="supporting-text" id="supporting-text">
+          ${this.supportingText}
+        </span>
+      </gds-form-control-header>
+
+      <gds-field-base
+        .size=${this.size}
+        .disabled=${this.disabled}
+        .invalid=${this.invalid}
+        .multiline=${this.multiple}
+        align-items=${this.multiple ? "flex-start" : "center"}
+        class=${classMap(CLASSES)}
+      >
+        ${__privateMethod(this, _renderFieldContents, renderFieldContents_fn).call(this)}
+      </gds-field-base>
+
+      <gds-form-control-footer
+        class="size-${this.size}"
+        .validationMessage=${this.invalid && (this.errorMessage || this.validationMessage)}
+      ></gds-form-control-footer>
+    `;
+  }
+  _captureDOM() {
+    if (!this.shadowRoot || this.childNodes.length === 0 || !this._elSelectContainer)
+      return;
+    const cloned = Array.from(this.children).filter((n) => n.nodeName === "SELECT").map((node) => {
+      const clone = node.cloneNode(true);
+      clone.addEventListener("change", __privateGet(this, _handleSelectElementChange));
+      clone.addEventListener("input", __privateGet(this, _handleSelectElementChange));
+      clone.setAttribute(
+        "aria-describedby",
+        "supporting-text extended-supporting-text sub-label message"
+      );
+      clone.setAttribute("id", "select");
+      if (!__privateGet(this, _isValueInitialized))
+        this.value = clone.value;
+      return clone;
+    });
+    this._elSelectContainer.replaceChildren(...cloned);
+  }
+  /**
+   * Handles form reset events by selecting the first option.
+   */
+  formResetCallback() {
+    if (!this.selectElement)
+      return;
+    if (this.selectElement.multiple) {
+      Array.from(this.selectElement.options).forEach((option) => {
+        option.selected = false;
+      });
+      this.value = [];
+    } else {
+      const firstOption = this.selectElement.options[0];
+      if (firstOption) {
+        this.value = firstOption.value;
+        this.selectElement.value = firstOption.value;
+      }
+    }
+  }
+  _getValidityAnchor() {
+    return this.selectElement;
+  }
+  _handleValueChange() {
+    if (!this.selectElement)
+      return;
+    if (this.multiple) {
+      const valArr = this.value || [];
+      Array.from(this.selectElement.options).forEach((option) => {
+        option.selected = valArr.includes(option.value);
+      });
+    } else
+      this.selectElement.value = this.value;
+    this.requestUpdate();
+  }
+};
+_isValueInitialized = new WeakMap();
+_handleSelectElementChange = new WeakMap();
+_setValueFromSelectElement = new WeakSet();
+setValueFromSelectElement_fn = function() {
+  if (!this.selectElement)
+    return;
+  if (this.multiple) {
+    const selectedOptions = Array.from(this.selectElement.selectedOptions);
+    this.value = selectedOptions.map((o) => o.value);
+  } else {
+    this.value = this.selectElement.value;
+  }
+};
+_renderFieldContents = new WeakSet();
+renderFieldContents_fn = function() {
+  const elements = [
+    __privateMethod(this, _renderSlotLead, renderSlotLead_fn).call(this),
+    __privateMethod(this, _renderMainSlot, renderMainSlot_fn).call(this),
+    __privateMethod(this, _renderMainLabel, renderMainLabel_fn).call(this),
+    __privateMethod(this, _renderChevron, renderChevron_fn).call(this)
+  ];
+  return elements.map((element) => html`${element}`);
+};
+_renderSlotLead = new WeakSet();
+renderSlotLead_fn = function() {
+  return html`<slot name="lead" slot="lead"></slot>`;
+};
+_renderMainLabel = new WeakSet();
+renderMainLabel_fn = function() {
+  if (!this.multiple) {
+    return html`<label id="placeholder">${this.displayValue}</label>`;
+  }
+};
+_renderMainSlot = new WeakSet();
+renderMainSlot_fn = function() {
+  return html`<div class="select-container"></div>`;
+};
+_renderChevron = new WeakSet();
+renderChevron_fn = function() {
+  if (!this.multiple) {
+    return html` <gds-icon-chevron-bottom></gds-icon-chevron-bottom> `;
+  }
+};
+GdsSelect.styles = [tokens, styles];
+__decorateClass([
+  property({ attribute: "supporting-text" })
+], GdsSelect.prototype, "supportingText", 2);
+__decorateClass([
+  property({ type: String })
+], GdsSelect.prototype, "size", 2);
+__decorateClass([
+  query("select")
+], GdsSelect.prototype, "selectElement", 2);
+__decorateClass([
+  property()
+], GdsSelect.prototype, "value", 1);
+__decorateClass([
+  query(".select-container")
+], GdsSelect.prototype, "_elSelectContainer", 2);
+__decorateClass([
+  observeLightDOM({
+    childList: true,
+    subtree: true,
+    attributes: true,
+    characterData: true
+  })
+], GdsSelect.prototype, "_captureDOM", 1);
+__decorateClass([
+  watch("value")
+], GdsSelect.prototype, "_handleValueChange", 1);
+GdsSelect = __decorateClass([
+  gdsCustomElement("gds-select"),
+  localized()
+], GdsSelect);
+
+export {
+  GdsSelect
+};

package/chunks/{chunk.EXH47S7D.js → chunk.G4HNP6TT.js}

@@ -4,16 +4,16 @@ import {
 } from "./chunk.C3ECHGX7.js";
 import {
   GdsFormControlElement
-} from "./chunk.TURR45PB.js";
+} from "./chunk.VA6TUMR2.js";
 import {
   TransitionalStyles
-} from "./chunk.CGNUY4TK.js";
+} from "./chunk.IEWLS75F.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.2XGJAHBM.js";
+} from "./chunk.LVFKJRDS.js";
 import {
   gdsCustomElement,
   html
@@ -54,12 +54,18 @@ var styles = css`
       min-width: 200px;
     }
 
+    ::part(_button) {
+      outline-offset: -1px;
+    }
+
     .spinners {
       display: flex;
       align-items: center;
       justify-content: flex-start;
-      min-width: 10ch;
-      gap: var(--gds-space-2xs);
+      inline-size: 11ch;
+      gap: var(--gds-space-4xs);
+      font-size: var(--gds-text-size-detail-s);
+      font-weight: var(--gds-text-weight-regular);
     }
 
     .spinner {
@@ -69,9 +75,8 @@ var styles = css`
       text-align: center;
       height: 100%;
       box-sizing: border-box;
-      border-radius: var(--gds-space-2xs);
+      /* border-radius: var(--gds-space-2xs); */
       outline: none;
-      padding-inline: var(--gds-space-2xs);
       padding-block: var(--gds-space-3xs);
       text-transform: uppercase;
       line-height: 1;
@@ -81,14 +86,6 @@ var styles = css`
         background-color: var(--gds-color-l3-background-primary);
         color: var(--gds-color-l3-content-primary);
       }
-
-      &[data-max-width='4'] {
-        width: calc(4ch + (var(--gds-space-2xs) * 2));
-      }
-
-      &[data-max-width='2'] {
-        width: calc(2ch + (var(--gds-space-2xs) * 2));
-      }
     }
   }
 `;
@@ -293,6 +290,12 @@ var GdsDatepicker = class extends GdsFormControlElement {
   get type() {
     return "gds-datepicker";
   }
+  get value() {
+    return this._internalValue;
+  }
+  set value(value) {
+    this._internalValue = value;
+  }
   get dateformat() {
     return this._dateFormatLayout.layout.map((f) => f.token).join(this._dateFormatLayout.delimiter);
   }
@@ -391,6 +394,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
           slot="action"
           size="${this.size === "small" ? "xs" : "small"}"
           rank="tertiary"
+          variant=${this.invalid ? "negative" : ""}
           aria-label="${msg("Open calendar modal")}"
           aria-haspopup="menu"
           aria-expanded=${this.open}
@@ -398,7 +402,14 @@ var GdsDatepicker = class extends GdsFormControlElement {
           aria-describedby="label"
           .disabled=${this.disabled}
         >
-          <gds-icon-calender-add></gds-icon-calender-add>
+          ${when(
+      this.size === "small",
+      () => html`<gds-icon-calender-add
+                height="16"
+                stroke="2"
+              ></gds-icon-calender-add>`,
+      () => html`<gds-icon-calender-add></gds-icon-calender-add>`
+    )}
         </gds-button>
       </gds-field-base>
 
@@ -705,7 +716,7 @@ isValueOutsideRange_get = function() {
 GdsDatepicker.styles = [tokens, styles];
 __decorateClass([
   property({ converter: dateConverter })
-], GdsDatepicker.prototype, "value", 2);
+], GdsDatepicker.prototype, "value", 1);
 __decorateClass([
   property({ converter: dateConverter })
 ], GdsDatepicker.prototype, "min", 2);