@sebgroup/green-core 1.21.2 → 1.22.0

package/chunks/{chunk.CNYIFSDX.js → chunk.IA3JFKY2.js}

@@ -1,6 +1,6 @@
 import {
   tokens
-} from "./chunk.HT7H7ZIV.js";
+} from "./chunk.VH7TVVFL.js";
 import {
   GdsFormControlElement
 } from "./chunk.MZSK66DN.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.KBYQYDL3.js";
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   gdsCustomElement,
   html
@@ -23,8 +23,10 @@ import {
 
 // libs/core/src/components/button/button.ts
 import { nothing as nothing2, unsafeCSS } from "lit";
+import { html as staticHtml, literal } from "lit/static-html.js";
 import { property, query } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { classMap } from "lit/directives/class-map.js";
 
 // libs/core/src/utils/directives/forward-attributes.ts
@@ -105,7 +107,7 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
 }
 
 @layer core {
-  button {
+  .button {
     --gds-sys-transition-properties: color !important;
 
     align-items: center;
@@ -136,6 +138,7 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
     padding-block: var(--_padding-block);
     padding-inline: var(--_padding-inline);
     position: relative;
+    text-decoration: none;
     transition: var(--_transition);
     transition-property: color, border-color;
 
@@ -178,20 +181,20 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
     }
   }
 
-  button slot:not([name]) {
+  .button slot:not([name]) {
     display: inline-block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  button.icon slot {
+  .button.icon slot {
     display: contents;
   }
 }
 
 @layer ranks {
-  :host([rank*='secondary']) button {
+  :host([rank*='secondary']) .button {
     --_color-bg: var(--gds-sys-color-content-content-inverse);
     --_color-text: var(--gds-sys-color-content-content);
     --_color-border: var(--gds-sys-color-stroke-stroke);
@@ -201,7 +204,7 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
     }
   }
 
-  :host([rank*='tertiary']) button {
+  :host([rank*='tertiary']) .button {
     --_color-bg: transparent;
     --_color-text: var(--gds-sys-color-content-content);
     --_color-border: transparent;
@@ -216,7 +219,7 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
     }
   }
 
-  button.circle {
+  .button.circle {
     display: flex;
     align-items: center;
     height: var(--_size);
@@ -229,20 +232,20 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
 }
 
 @layer sizes {
-  :host([size='small']) button {
+  :host([size='small']) .button {
     --_padding-inline: var(--gds-sys-space-padding-l);
     --_padding-block: var(--gds-sys-space-padding-s);
     --_size: 2rem;
     font-size: 0.875rem;
   }
 
-  :host([size='medium']) button {
+  :host([size='medium']) .button {
     --_padding-inline: var(--gds-sys-space-padding-l);
     --_padding-block: var(--gds-sys-space-padding-m);
     --_size: 2.5rem;
   }
 
-  :host([size='large']) button {
+  :host([size='large']) .button {
     --_padding-inline: var(--gds-sys-space-padding-xl);
     --_padding-block: var(--gds-sys-space-padding-m);
     --_size: 3rem;
@@ -250,7 +253,7 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
 }
 
 @layer variants {
-  :host([rank='primary'][variant='positive']) button {
+  :host([rank='primary'][variant='positive']) .button {
     --_bg: var(--gds-sys-color-container-container-positive);
     --_color-bg: var(--_bg);
     --_color-border: var(--_bg);
@@ -268,7 +271,7 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
     }
   }
 
-  :host([rank='secondary'][variant='positive']) button {
+  :host([rank='secondary'][variant='positive']) .button {
     --_color-bg: var(--gds-sys-color-content-content-inverse);
     --_color-text: var(--gds-sys-color-content-content-positive);
     --_color-border: var(--gds-sys-color-stroke-stroke-positive);
@@ -284,7 +287,7 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
     }
   }
 
-  :host([rank='tertiary'][variant='positive']) button {
+  :host([rank='tertiary'][variant='positive']) .button {
     --_color-bg: transparent;
     --_color-text: var(--gds-sys-color-content-content-positive);
     --_color-border: transparent;
@@ -302,7 +305,7 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
     }
   }
 
-  :host([rank='primary'][variant='negative']) button {
+  :host([rank='primary'][variant='negative']) .button {
     --_bg: var(--gds-sys-color-container-container-negative);
     --_color-bg: var(--_bg);
     --_color-text: var(--gds-sys-color-status-negative-on-negative);
@@ -321,7 +324,7 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
     }
   }
 
-  :host([rank='secondary'][variant='negative']) button {
+  :host([rank='secondary'][variant='negative']) .button {
     --_color-bg: var(--gds-sys-color-content-content-inverse);
     --_color-text: var(--gds-sys-color-content-content-negative);
     --_color-border: var(--gds-sys-color-stroke-stroke-negative);
@@ -337,7 +340,7 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
     }
   }
 
-  :host([rank='tertiary'][variant='negative']) button {
+  :host([rank='tertiary'][variant='negative']) .button {
     --_color-bg: transparent;
     --_color-text: var(--gds-sys-color-content-content-negative);
     --_color-border: transparent;
@@ -357,7 +360,7 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
 }
 
 @layer disabled {
-  button:disabled {
+  .button:disabled {
     --_color-bg: var(--gds-sys-color-container-container-disabled);
     border-color: var(--_color-bg);
     color: var(--gds-sys-color-content-content-disabled);
@@ -382,15 +385,18 @@ function stripWhitespace(extendedTag) {
 
 // libs/core/src/components/button/button.ts
 var html2 = stripWhitespace(html);
-var _isIconButton, _mainSlotChange, _handleClick;
+var _isIconButton, _isLink, isLink_get, _defaultRel, defaultRel_get, _mainSlotChange, _handleClick;
 var GdsButton = class extends GdsFormControlElement {
   constructor() {
     super();
+    __privateAdd(this, _isLink);
+    __privateAdd(this, _defaultRel);
     this.disabled = false;
     this.rank = "primary";
     this.variant = "neutral";
     this.size = "medium";
     this.label = "";
+    this.href = "";
     __privateAdd(this, _isIconButton, false);
     // Check if the button is an icon button.
     __privateAdd(this, _mainSlotChange, () => {
@@ -409,7 +415,7 @@ var GdsButton = class extends GdsFormControlElement {
           detail: e
         })
       );
-      if (this.form) {
+      if (this.form && !__privateGet(this, _isLink, isLink_get)) {
         if (this.type === "submit") {
           this.form.requestSubmit();
         } else if (this.type === "reset") {
@@ -426,6 +432,7 @@ var GdsButton = class extends GdsFormControlElement {
   }
   render() {
     const buttonClasses = {
+      button: true,
       circle: __privateGet(this, _isIconButton),
       icon: __privateGet(this, _isIconButton),
       small: this.size === "small",
@@ -436,14 +443,19 @@ var GdsButton = class extends GdsFormControlElement {
       secondary: this.rank === "secondary",
       tertiary: this.rank === "tertiary"
     };
-    return html2`
-      <button
+    const tag = __privateGet(this, _isLink, isLink_get) ? literal`a` : literal`button`;
+    return staticHtml`
+      <${tag}
         class=${classMap(buttonClasses)}
-        ?type="${this.type}"
+        type="${ifDefined(__privateGet(this, _isLink, isLink_get) ? void 0 : this.type)}"
         ?disabled="${this.disabled}"
-        @click="${__privateGet(this, _handleClick)}"
         aria-label=${this.label || nothing2}
+        href=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.href : void 0)}
+        target=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.target : void 0)}
+        rel=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.rel || __privateGet(this, _defaultRel, defaultRel_get) : void 0)}
+        download=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.download : void 0)}
         part="_button"
+        @click="${__privateGet(this, _handleClick)}"
         ${forwardAttributes(
       (attr) => attr.name.startsWith("gds-aria") || attr.name === "gds-role"
     )}
@@ -455,11 +467,19 @@ var GdsButton = class extends GdsFormControlElement {
       !this._isUsingTransitionalStyles,
       () => html2`<gds-ripple></gds-ripple>`
     )}
-      </button>
+      </${tag}>
     `;
   }
 };
 _isIconButton = new WeakMap();
+_isLink = new WeakSet();
+isLink_get = function() {
+  return this.href.length > 0;
+};
+_defaultRel = new WeakSet();
+defaultRel_get = function() {
+  return this.target === "_blank" ? "noreferrer noopener" : void 0;
+};
 _mainSlotChange = new WeakMap();
 _handleClick = new WeakMap();
 GdsButton.styles = [tokens, unsafeCSS(button_style_default)];
@@ -488,6 +508,18 @@ __decorateClass([
 __decorateClass([
   property()
 ], GdsButton.prototype, "label", 2);
+__decorateClass([
+  property()
+], GdsButton.prototype, "href", 2);
+__decorateClass([
+  property()
+], GdsButton.prototype, "target", 2);
+__decorateClass([
+  property()
+], GdsButton.prototype, "rel", 2);
+__decorateClass([
+  property()
+], GdsButton.prototype, "download", 2);
 __decorateClass([
   query("slot:not([name])")
 ], GdsButton.prototype, "_mainSlot", 2);

package/chunks/{chunk.VRM45KID.js → chunk.KPUOGILQ.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.SXNGHD2S.js → chunk.LR3W2NRF.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk.MZSK66DN.js";
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";
@@ -46,6 +46,7 @@ var styles = css`
 `;
 
 // libs/core/src/components/datepicker/datepicker.ts
+import isSameDay from "date-fns/isSameDay";
 var _valueOnOpen, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _handleFieldFocusOut, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
 var GdsDatepicker = class extends GdsFormControlElement {
   constructor() {
@@ -168,12 +169,19 @@ var GdsDatepicker = class extends GdsFormControlElement {
         return;
       this.open = e.detail.open;
       if (e.detail.reason === "close") {
-        this.value = (await this._elCalendar).value;
+        const calValue = (await this._elCalendar).value;
+        const hasChanged = !isSameDay(
+          calValue || /* @__PURE__ */ new Date(0),
+          __privateGet(this, _valueOnOpen) || /* @__PURE__ */ new Date(0)
+        );
+        if (hasChanged) {
+          this.value = calValue;
+          __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
+        }
         if (this.value) {
           this._focusedMonth = this.value.getMonth();
           this._focusedYear = this.value.getFullYear();
         }
-        __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
       }
       if (e.detail.reason === "cancel") {
         this.value = __privateGet(this, _valueOnOpen);
@@ -260,7 +268,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
 
       <div
         class=${classMap({ field: true, small: this.size === "small" })}
-        id="trigger"
+        id="field"
         @click=${__privateGet(this, _handleFieldClick)}
         @copy=${__privateGet(this, _handleClipboardCopy)}
         @paste=${__privateGet(this, _handleClipboardPaste)}
@@ -299,14 +307,8 @@ var GdsDatepicker = class extends GdsFormControlElement {
           aria-expanded=${this.open}
           aria-controls="calendar-popover"
           aria-describedby="label"
-          @click=${() => this.open = !this.open}
         >
-          <svg viewBox="0 0 24 24" inert>
-            <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
-            <line x1="16" y1="2" x2="16" y2="6" />
-            <line x1="8" y1="2" x2="8" y2="6" />
-            <line x1="3" y1="10" x2="21" y2="10" />
-          </svg>
+          <gds-icon-calendar></gds-icon-calendar>
         </button>
       </div>
 
@@ -314,12 +316,14 @@ var GdsDatepicker = class extends GdsFormControlElement {
 
       <gds-popover
         .triggerRef=${this._elTrigger}
+        .anchorRef=${this._elField}
         .open=${this.open}
         @gds-ui-state=${__privateGet(this, _handlePopoverStateChange)}
         label=${this.label}
         id="calendar-popover"
         .placement=${"bottom-end"}
         .calcMinWidth=${() => this.showWeekNumbers ? "350px" : "305px"}
+        .useModalInMobileView=${true}
         @focusin=${async (e) => {
       var _a;
       const isPopover = ((_a = e.target) == null ? void 0 : _a.id) === "calendar-popover";
@@ -333,7 +337,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
             @click=${__privateGet(this, _handleDecrementFocusedMonth)}
             aria-label=${msg("Previous month")}
           >
-            <i class="icon prev"></i>
+            <gds-icon-chevron-left></gds-icon-chevron-left>
           </button>
           <gds-dropdown
             .value=${this._focusedMonth.toString()}
@@ -375,7 +379,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
             @click=${__privateGet(this, _handleIncrementFocusedMonth)}
             aria-label=${msg("Next month")}
           >
-            <i class="icon next"></i>
+            <gds-icon-chevron-right></gds-icon-chevron-right>
           </button>
         </div>
 
@@ -394,25 +398,27 @@ var GdsDatepicker = class extends GdsFormControlElement {
         ></gds-calendar>
 
         <div class="footer">
-          <button
-            class="tertiary clear"
+          <gds-button
+            rank="tertiary"
+            size="small"
             @click=${() => {
       this.value = void 0;
       __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
     }}
           >
             ${msg("Clear")}
-          </button>
+          </gds-button>
           ${until(__privateMethod(this, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn).call(this), nothing)}
-          <button
-            class="tertiary today"
+          <gds-button
+            rank="tertiary"
+            size="small"
             @click=${() => {
       this.value = /* @__PURE__ */ new Date();
       __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
     }}
           >
             ${msg("Today")}
-          </button>
+          </gds-button>
         </div>
       </gds-popover> `;
   }
@@ -455,9 +461,9 @@ renderBackToValidRangeButton_fn = async function() {
   }
   return html`${when(
     buttonTxt.length > 0,
-    () => html`<button class="tertiary back-to-range" @click=${buttonAction}>
+    () => html`<gds-button rank="tertiary" size="small" @click=${buttonAction}>
           ${buttonTxt}
-        </button>`,
+        </gds-button>`,
     () => nothing
   )}`;
 };
@@ -616,8 +622,11 @@ __decorateClass([
   queryAsync("#calendar")
 ], GdsDatepicker.prototype, "_elCalendar", 2);
 __decorateClass([
-  queryAsync("#trigger")
+  queryAsync("#calendar-button")
 ], GdsDatepicker.prototype, "_elTrigger", 2);
+__decorateClass([
+  queryAsync("#field")
+], GdsDatepicker.prototype, "_elField", 2);
 __decorateClass([
   queryAll("[role=spinbutton]")
 ], GdsDatepicker.prototype, "_elSpinners", 2);

package/chunks/{chunk.W2GCNYHE.js → chunk.OODZSCCL.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.KBYQYDL3.js";
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   observeLightDOM
 } from "./chunk.WM7HBMMV.js";
@@ -205,32 +205,29 @@ var GdsDropdown = class extends GdsFormControlElement {
 
       <span class="form-info"><slot name="sub-label"></slot></span>
 
-      <button
-        id="trigger"
-        @click="${() => this.open = !this.open}"
-        aria-haspopup="listbox"
-        role="combobox"
-        aria-owns="listbox"
-        aria-controls="listbox"
-        aria-expanded="${this.open}"
-        aria-label="${this.label}"
-        class=${classMap({ small: this.size === "small" })}
-      >
-        <slot name="trigger">
-          <span>${unsafeHTML(this.displayValue)}</span>
-        </slot>
-      </button>
-
-      <span class="form-info"><slot name="message"></slot></span>
-
       <gds-popover
         .label=${this.label}
         .open=${this.open}
-        .triggerRef=${this._elTriggerBtnAsync}
         .calcMaxWidth=${(trigger) => this.syncPopoverWidth ? `${trigger.offsetWidth}px` : `auto`}
         .calcMaxHeight=${(_trigger) => `${this.maxHeight}px`}
+        .useModalInMobileView=${true}
         @gds-ui-state=${(e) => this.open = e.detail.open}
       >
+        <button
+          id="trigger"
+          slot="trigger"
+          aria-haspopup="listbox"
+          role="combobox"
+          aria-owns="listbox"
+          aria-controls="listbox"
+          aria-expanded="${this.open}"
+          aria-label="${this.label}"
+          class=${classMap({ small: this.size === "small" })}
+        >
+          <slot name="trigger">
+            <span>${unsafeHTML(this.displayValue)}</span>
+          </slot>
+        </button>
         ${when(
       this.searchable,
       () => html`<input
@@ -254,6 +251,8 @@ var GdsDropdown = class extends GdsFormControlElement {
           <slot gds-allow="gds-option gds-menu-heading"></slot>
         </gds-listbox>
       </gds-popover>
+
+      <span class="form-info"><slot name="message"></slot></span>
     `;
   }
   _handleLightDOMChange() {
@@ -383,9 +382,6 @@ __decorateClass([
 __decorateClass([
   query("#trigger")
 ], GdsDropdown.prototype, "_elTriggerBtn", 2);
-__decorateClass([
-  queryAsync("#trigger")
-], GdsDropdown.prototype, "_elTriggerBtnAsync", 2);
 __decorateClass([
   queryAsync("#listbox")
 ], GdsDropdown.prototype, "_elListbox", 2);

package/chunks/{chunk.Q3IGOBT4.js → chunk.OQYSWRQN.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.375BWME4.js";
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";