@sebgroup/green-core 1.5.1 → 1.7.0

package/components/datepicker/datepicker.d.ts

@@ -43,6 +43,14 @@ export declare class GdsDatepicker extends GdsFormControlElement<Date> {
      * Whether to show a column of week numbers in the calendar.
      */
     showWeekNumbers: boolean;
+    /**
+     * Whether to use the small variant of the datepicker field.
+     */
+    size: 'small' | 'medium';
+    /**
+     * Whether to hide the label above the input field.
+     */
+    hideLabel: boolean;
     /**
      * The date format to use. Accepts a string with the characters `y`, `m` and `d` in any order, separated by a delimiter.
      * For example, `y-m-d` or `d/m/y`. All three characters must be present.

package/components/dropdown/dropdown.d.ts

@@ -3,14 +3,13 @@ import '../../primitives/listbox';
 import type { GdsOption, OptionsContainer } from '../../primitives/listbox';
 import '../../primitives/popover';
 import { GdsFormControlElement } from '../form-control';
-import { CSSResult } from 'lit';
 /**
  * @element gds-dropdown
  * A dropdown consist of a trigger button and a list of selectable options. It is used to select a single value from a list of options.
  *
  * @status beta
  *
- * @slot - Options for the dropdown. Accepts `gds-option` elements.
+ * @slot - Options for the dropdown. Accepts `gds-option` and `gds-menu-heading` elements.
  * @slot button - The trigger button for the dropdown. Custom content for the button can be assigned through this slot.
  * @slot sub-label - Renders between the label and the trigger button.
  * @slot message - Renders below the trigger button. Will be red if there is a validation error.
@@ -20,7 +19,7 @@ import { CSSResult } from 'lit';
  */
 export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<ValueT | ValueT[]> implements OptionsContainer {
     #private;
-    static styles: CSSResult;
+    static styles: import("lit").CSSResult;
     static shadowRootOptions: ShadowRootInit;
     /**
      * The label of the dropdown.
@@ -77,6 +76,15 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
      * are still readable and apply appropriate custom layout or truncation if neccecary.
      */
     syncPopoverWidth: boolean;
+    /**
+     * Size of the dropdown. Supports `medium` and `small`. There is no `large` size for dropdowns.
+     * `medium` is the default size.
+     */
+    size: 'medium' | 'small';
+    /**
+     * Whether to hide the label.
+     */
+    hideLabel: boolean;
     /**
      * Get the options of the dropdown.
      */

package/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './dropdown/dropdown';
 export * from '../primitives/listbox/option';
+export * from '../primitives/menu/menu-heading';
 export * from './context-menu/context-menu';
 export * from '../primitives/menu/menu-item';
 export * from './datepicker/datepicker';

package/generated/locales/sv.d.ts

@@ -8,16 +8,19 @@ export declare const templates: {
     s281846ef0421c71f: string;
     s39938ecdae568740: string;
     s407a88a592a0987c: string;
+    s46d6587089bd0356: string;
     s5052d10b539eabf0: string;
     s58bfb494feb8eb02: import("@lit/localize").StrResult;
     s5d929ff1619ac0c9: string;
     s5e8250fb85d64c23: string;
+    s62931b2a50168976: string;
     s63d040e37887f17e: string;
     s6cfed919e21ac6ac: string;
     s6d24cd19e23b8185: string;
     s74aa0319e62b2eb7: string;
     s7793b811d20184fe: string;
     s7fd3469f78111589: string;
+    s8ade4e9d5e804d6a: string;
     s9836b719fa8ef857: string;
     s987ac119fac8d621: string;
     sa6f2645578b2d2bc: string;
@@ -28,5 +31,6 @@ export declare const templates: {
     scb6b9cb49cf93277: string;
     sd898d99fd9c13de6: string;
     se0955919920ee87d: string;
+    se4129fd6b9d7b4c2: string;
     sf295af199c723ec8: string;
 };

package/index.js

@@ -37,6 +37,7 @@ import { property as property5, query, queryAsync, state as state4 } from "lit/d
 import { unsafeHTML as unsafeHTML2 } from "lit/directives/unsafe-html.js";
 import { when as when2 } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { classMap as classMap3 } from "lit/directives/class-map.js";
 import { msg as msg2, str, updateWhenLocaleChanges } from "@lit/localize";
 import "reflect-metadata";
 
@@ -143,10 +144,11 @@ function watchMediaQuery(q) {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-ea801b";
+var VER_SUFFIX = "-16d025";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
+    elementLookupTable.set(tagName, tagName);
     return customElement(tagName);
   }
   const versionedTagName = tagName + VER_SUFFIX;
@@ -419,7 +421,7 @@ var GdsListbox = class extends GdsElement {
     if (!__privateGet(this, _slotRef).value)
       return [];
     return unwrap(__privateGet(this, _slotRef).value).assignedElements().filter(
-      (o) => !o.hasAttribute("isplaceholder")
+      (o) => !o.hasAttribute("isplaceholder") && o.gdsElementName === "gds-option"
     ) || [];
   }
   /**
@@ -1125,6 +1127,8 @@ var GdsDropdown = class extends GdsFormControlElement {
     this.compareWith = (a, b) => a === b;
     this.searchFilter = (q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase());
     this.syncPopoverWidth = false;
+    this.size = "medium";
+    this.hideLabel = false;
     __privateAdd(this, _optionElements, void 0);
     /**
      * Event handler for filtering the options in the dropdown.
@@ -1237,7 +1241,7 @@ var GdsDropdown = class extends GdsFormControlElement {
     return html`
       ${this._tStyles}
       ${when2(
-      this.label,
+      this.label && !this.hideLabel,
       () => html`<label for="trigger">${this.label}</label>`
     )}
 
@@ -1251,6 +1255,8 @@ var GdsDropdown = class extends GdsFormControlElement {
         aria-owns="listbox"
         aria-controls="listbox"
         aria-expanded="${this.open}"
+        aria-label="${this.label}"
+        class=${classMap3({ small: this.size === "small" })}
       >
         <slot name="trigger">
           <span>${unsafeHTML2(this.displayValue)}</span>
@@ -1286,7 +1292,7 @@ var GdsDropdown = class extends GdsFormControlElement {
           @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
           @keydown=${__privateGet(this, _handleListboxKeyDown)}
         >
-          <slot gds-allow="gds-option"></slot>
+          <slot gds-allow="gds-option gds-menu-heading"></slot>
         </gds-listbox>
       </gds-popover>
     `;
@@ -1399,8 +1405,14 @@ __decorateClass([
   property5()
 ], GdsDropdown.prototype, "searchFilter", 2);
 __decorateClass([
-  property5({ type: Boolean })
+  property5({ type: Boolean, attribute: "sync-popover-width" })
 ], GdsDropdown.prototype, "syncPopoverWidth", 2);
+__decorateClass([
+  property5()
+], GdsDropdown.prototype, "size", 2);
+__decorateClass([
+  property5({ type: Boolean, attribute: "hide-label" })
+], GdsDropdown.prototype, "hideLabel", 2);
 __decorateClass([
   state4()
 ], GdsDropdown.prototype, "_tStyles", 2);
@@ -1434,10 +1446,48 @@ GdsDropdown = __decorateClass([
   gdsCustomElement("gds-dropdown")
 ], GdsDropdown);
 
+// libs/core/src/primitives/menu/menu-heading.ts
+import { html as html5 } from "lit";
+
+// libs/core/src/primitives/menu/menu-heading.styles.ts
+import { css as css5 } from "lit";
+var style5 = css5`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    :host {
+      padding: 0.5 1rem;
+      cursor: pointer;
+    }
+
+    :host(:hover) {
+      background-color: grey;
+    }
+  }
+`;
+var menu_heading_styles_default = style5;
+
+// libs/core/src/primitives/menu/menu-heading.ts
+var GdsMenuHeading = class extends GdsElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("inert", "true");
+    this.updateComplete.then(
+      () => TransitionalStyles.instance.apply(this, "gds-menu-heading")
+    );
+  }
+  render() {
+    return html5`<slot></slot>`;
+  }
+};
+GdsMenuHeading.styles = menu_heading_styles_default;
+GdsMenuHeading = __decorateClass([
+  gdsCustomElement("gds-menu-heading")
+], GdsMenuHeading);
+
 // libs/core/src/components/context-menu/context-menu.ts
 import { nothing } from "lit";
 import { msg as msg3 } from "@lit/localize";
-import { classMap as classMap3 } from "lit-html/directives/class-map.js";
+import { classMap as classMap4 } from "lit-html/directives/class-map.js";
 import { property as property6, queryAsync as queryAsync2, state as state6 } from "lit/decorators.js";
 
 // libs/core/src/primitives/menu/menu.ts
@@ -1459,7 +1509,7 @@ var GdsMenu = class extends GdsElement {
     if (!this.#slotRef.value)
       return [];
     return unwrap(this.#slotRef.value).assignedElements().filter(
-      (o) => !o.hasAttribute("isplaceholder")
+      (o) => !o.hasAttribute("isplaceholder") && o.gdsElementName === "gds-menu-item"
     ) || [];
   }
   /**
@@ -1507,7 +1557,7 @@ var GdsContextMenu = class extends GdsElement {
     return html`${this._tStyles}
       <button
         id="trigger"
-        class="icon border-0 small ${classMap3({ highlighted: this.open })}"
+        class="icon border-0 small ${classMap4({ highlighted: this.open })}"
         aria-label=${this.buttonLabel ?? this.label}
         aria-haspopup="menu"
         aria-controls="menu"
@@ -1531,7 +1581,7 @@ var GdsContextMenu = class extends GdsElement {
           aria-label=${this.label ?? this.buttonLabel}
           @gds-menu-item-click=${__privateMethod(this, _handleItemClick, handleItemClick_fn)}
         >
-          <slot allow="gds-menu-item"></slot>
+          <slot allow="gds-menu-item gds-menu-heading"></slot>
         </gds-menu>
       </gds-popover>`;
   }
@@ -1618,12 +1668,13 @@ import { when as when4 } from "lit/directives/when.js";
 import { until } from "lit/directives/until.js";
 import { map } from "lit/directives/map.js";
 import { repeat } from "lit/directives/repeat.js";
+import { classMap as classMap6 } from "lit/directives/class-map.js";
 import { nothing as nothing2 } from "lit";
 import { msg as msg5 } from "@lit/localize";
 
 // libs/core/src/primitives/calendar/calendar.ts
-import { html as html6 } from "lit";
-import { classMap as classMap4 } from "lit/directives/class-map.js";
+import { html as html7 } from "lit";
+import { classMap as classMap5 } from "lit/directives/class-map.js";
 import { when as when3 } from "lit/directives/when.js";
 import { property as property7, query as query2, state as state8 } from "lit/decorators.js";
 import { msg as msg4 } from "@lit/localize";
@@ -1644,7 +1695,7 @@ import {
   eachWeekOfInterval,
   eachDayOfInterval
 } from "date-fns";
-import { html as html5 } from "lit-html";
+import { html as html6 } from "lit-html";
 function renderMonthGridView(date, template) {
   const monthStart = startOfMonth(date);
   const monthEnd = endOfMonth(date);
@@ -1652,7 +1703,7 @@ function renderMonthGridView(date, template) {
     { start: monthStart, end: monthEnd },
     { weekStartsOn: 1 }
   );
-  return html5`${template(
+  return html6`${template(
     weeks.map((weekStartDay) => ({
       days: eachDayOfInterval({
         start: weekStartDay,
@@ -1663,8 +1714,8 @@ function renderMonthGridView(date, template) {
 }
 
 // libs/core/src/primitives/calendar/calendar.styles.ts
-import { css as css5 } from "lit";
-var style5 = css5`
+import { css as css6 } from "lit";
+var style6 = css6`
   @layer base, reset, transitional-styles;
   @layer base {
     td.disabled {
@@ -1676,7 +1727,7 @@ var style5 = css5`
     }
   }
 `;
-var calendar_styles_default = style5;
+var calendar_styles_default = style6;
 
 // libs/core/src/primitives/calendar/calendar.ts
 var _setSelectedDate, setSelectedDate_fn, _handleKeyDown, handleKeyDown_fn;
@@ -1685,7 +1736,6 @@ var GdsCalendar = class extends GdsElement {
     super(...arguments);
     __privateAdd(this, _setSelectedDate);
     __privateAdd(this, _handleKeyDown);
-    this.value = /* @__PURE__ */ new Date();
     this.min = new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1);
     this.max = new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 0, 1);
     this.focusedDate = /* @__PURE__ */ new Date();
@@ -1720,11 +1770,11 @@ var GdsCalendar = class extends GdsElement {
   }
   render() {
     const currentDate = /* @__PURE__ */ new Date();
-    return html6`${this._tStyles}
+    return html7`${this._tStyles}
       <table>
         <thead>
           <tr>
-            ${when3(this.showWeekNumbers, () => html6`<th></th>`)}
+            ${when3(this.showWeekNumbers, () => html7`<th></th>`)}
             <th>${msg4("Mon")}</th>
             <th>${msg4("Tue")}</th>
             <th>${msg4("Wed")}</th>
@@ -1737,27 +1787,27 @@ var GdsCalendar = class extends GdsElement {
         <tbody>
           ${renderMonthGridView(
       this.focusedDate,
-      (weeks) => html6`
+      (weeks) => html7`
               ${weeks.map(
-        (week) => html6`
+        (week) => html7`
                   <tr>
                     ${when3(
           this.showWeekNumbers,
-          () => html6`<td class="week-number">
+          () => html7`<td class="week-number">
                           ${getWeek(week.days[0])}
                         </td>`
         )}
                     ${week.days.map((day) => {
           const isDisabled = !isSameMonth(this.focusedDate, day) || day < this.min || day > this.max;
-          return html6`
+          return html7`
                         <td
-                          class="${classMap4({
+                          class="${classMap5({
             disabled: isDisabled,
             today: isSameDay(currentDate, day)
           })}"
                           ?disabled=${isDisabled}
                           tabindex="${isSameDay(this.focusedDate, day) ? 0 : -1}"
-                          aria-selected="${isSameDay(this.value, day)}"
+                          aria-selected="${this.value && isSameDay(this.value, day)}"
                           aria-label="${day.toDateString()}"
                           @click=${() => isDisabled ? null : __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, day)}
                           id="dateCell-${day.getDate()}"
@@ -1883,10 +1933,10 @@ GdsCalendar = __decorateClass([
 ], GdsCalendar);
 
 // libs/core/src/components/datepicker/date-part-spinner.ts
-import { LitElement as LitElement7 } from "lit";
+import { LitElement as LitElement6 } from "lit";
 import { property as property8, state as state9 } from "lit/decorators.js";
 var _inputBuffer, _increment, _decrement, _handleClick, _handleFocus, _handleBlur, _handleWheel, _handleKeyDown2, _focusNextSpinner, focusNextSpinner_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _formatNumber, formatNumber_fn, _clamp, clamp_fn, _clearInputBuffer, clearInputBuffer_fn;
-var GdsDatePartSpinner = class extends LitElement7 {
+var GdsDatePartSpinner = class extends LitElement6 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _focusNextSpinner);
@@ -1928,7 +1978,6 @@ var GdsDatePartSpinner = class extends LitElement7 {
       __privateMethod(this, _clearInputBuffer, clearInputBuffer_fn).call(this);
       this.value = __privateMethod(this, _clamp, clamp_fn).call(this, parseInt(this.value.toString()));
       __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
-      document.getSelection()?.removeAllRanges();
     });
     __privateAdd(this, _handleWheel, (e) => {
       e.stopPropagation();
@@ -2059,8 +2108,8 @@ GdsDatePartSpinner = __decorateClass([
 ], GdsDatePartSpinner);
 
 // libs/core/src/components/datepicker/datepicker.styles.ts
-import { css as css6 } from "lit";
-var styles = css6`
+import { css as css7 } from "lit";
+var styles = css7`
   @layer base, reset, transitional-styles;
   @layer base {
     label {
@@ -2078,7 +2127,7 @@ var dateConverter = {
     return value.toISOString();
   }
 };
-var _valueOnOpen, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _dispatchInputEvent, dispatchInputEvent_fn, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
+var _valueOnOpen, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _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() {
     super(...arguments);
@@ -2103,28 +2152,54 @@ var GdsDatepicker = class extends GdsFormControlElement {
     this.open = false;
     this.label = "";
     this.showWeekNumbers = false;
+    this.size = "medium";
+    this.hideLabel = 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");
     __privateAdd(this, _valueOnOpen, void 0);
+    __privateAdd(this, _handleFieldFocusOut, (e) => {
+      this._elTrigger.then((_) => {
+        const parent = e.relatedTarget?.parentElement;
+        if (parent === e.target)
+          return;
+        document.getSelection()?.removeAllRanges();
+      });
+    });
+    __privateAdd(this, _handleSpinnerFocus, (e) => {
+      this._elTrigger.then((field) => {
+        document.getSelection()?.removeAllRanges();
+        const range = new Range();
+        range.setStart(field.firstChild, 0);
+        range.setEnd(field.lastChild, 4);
+        document.getSelection()?.addRange(range);
+      });
+    });
     __privateAdd(this, _handleClipboardCopy, (e) => {
-      e.preventDefault();
-      e.clipboardData?.setData("text/plain", this.displayValue);
+      this._elTrigger.then((field) => {
+        if (e.currentTarget !== field)
+          return;
+        e.preventDefault();
+        e.clipboardData?.setData("text/plain", this.displayValue);
+      });
     });
     __privateAdd(this, _handleClipboardPaste, (e) => {
-      e.preventDefault();
-      const pasted = e.clipboardData?.getData("text/plain");
-      if (!pasted)
-        return;
-      const pastedDate = new Date(pasted);
-      if (pastedDate.toString() === "Invalid Date")
-        return;
-      this.value = pastedDate;
-      __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+      this._elTrigger.then((field) => {
+        if (e.currentTarget !== field)
+          return;
+        e.preventDefault();
+        const pasted = e.clipboardData?.getData("text/plain");
+        if (!pasted)
+          return;
+        const pastedDate = new Date(pasted);
+        if (pastedDate.toString() === "Invalid Date")
+          return;
+        this.value = pastedDate;
+        __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+      });
     });
     __privateAdd(this, _handleFieldClick, (e) => {
       this._elSpinners[0].focus();
-      window.getSelection()?.selectAllChildren(this._elSpinners[0]);
     });
     __privateAdd(this, _handleCalendarChange, (e) => {
       e.stopPropagation();
@@ -2166,7 +2241,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
         return;
       this.open = e.detail.open;
       if (e.detail.reason === "close") {
-        this.value = (await this._elCalendar).focusedDate;
+        this.value = (await this._elCalendar).value;
         __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
       }
       if (e.detail.reason === "cancel") {
@@ -2228,7 +2303,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
    * Get a string representation of the currently displayed value in the input field. The formatting will match the dateformat attribute.
    */
   get displayValue() {
-    return this._elInput.innerText;
+    return this._elInput.innerText.replace(/\s+/g, "");
   }
   /**
    * A reference to a date cell element (<td>) inside the shadow root of the calendar primitive.
@@ -2243,18 +2318,24 @@ var GdsDatepicker = class extends GdsFormControlElement {
   }
   render() {
     return html`${this._tStyles}
-      <label for="spinner-0" id="label">${this.label}</label>
+      ${when4(
+      this.label && !this.hideLabel,
+      () => html`<label for="spinner-0" id="label">${this.label}</label>`
+    )}
 
       <div class="form-info"><slot name="sub-label"></slot></div>
 
       <div
-        class="field"
+        class=${classMap6({ field: true, small: this.size === "small" })}
         id="trigger"
         @click=${__privateGet(this, _handleFieldClick)}
         @copy=${__privateGet(this, _handleClipboardCopy)}
         @paste=${__privateGet(this, _handleClipboardPaste)}
       >
-        <div class="input">
+        <div
+          class=${classMap6({ input: true, "is-placeholder": !this.value })}
+          @focusout=${__privateGet(this, _handleFieldFocusOut)}
+        >
           ${join(
       map(
         this._dateFormatLayout.layout,
@@ -2268,6 +2349,11 @@ var GdsDatepicker = class extends GdsFormControlElement {
                   aria-describedby="label"
                   @keydown=${__privateGet(this, _handleSpinnerKeydown)}
                   @change=${(e) => __privateGet(this, _handleSpinnerChange).call(this, e.detail.value, f.name)}
+                  @focus=${__privateGet(this, _handleSpinnerFocus)}
+                  @touchend=${(e) => {
+          this.open = true;
+          e.preventDefault();
+        }}
                 ></gds-date-part-spinner>`
       ),
       html`<span>${this._dateFormatLayout.delimiter}</span>`
@@ -2282,14 +2368,11 @@ var GdsDatepicker = class extends GdsFormControlElement {
           aria-describedby="label"
           @click=${() => this.open = !this.open}
         >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512"
-            style="width:100%;height:100%"
-          >
-            <path
-              d="M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z "
-            />
+          <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>
         </button>
       </div>
@@ -2300,9 +2383,10 @@ var GdsDatepicker = class extends GdsFormControlElement {
         .triggerRef=${this._elTrigger}
         .open=${this.open}
         @gds-ui-state=${__privateGet(this, _handlePopoverStateChange)}
+        label=${this.label}
         id="calendar-popover"
         .placement=${"bottom-end"}
-        .calcMinWidth=${() => "390px"}
+        .calcMinWidth=${() => this.showWeekNumbers ? "350px" : "305px"}
         @focusin=${async (e) => {
       const isPopover = e.target?.id === "calendar-popover";
       if (!isPopover)
@@ -2311,13 +2395,19 @@ var GdsDatepicker = class extends GdsFormControlElement {
     }}
       >
         <div class="header">
-          <button @click=${__privateGet(this, _handleDecrementFocusedMonth)}>
+          <button
+            @click=${__privateGet(this, _handleDecrementFocusedMonth)}
+            aria-label=${msg5("Previous month")}
+          >
             <i class="icon prev"></i>
           </button>
           <gds-dropdown
             .value=${this._focusedMonth.toString()}
             @change=${__privateGet(this, _handleMonthChange)}
-            aria-label="${msg5("Month")}"
+            label="${msg5("Month")}"
+            style="width:120px"
+            size="small"
+            hide-label
           >
             <gds-option value="0">${msg5("January")}</gds-option>
             <gds-option value="1">${msg5("February")}</gds-option>
@@ -2335,7 +2425,9 @@ var GdsDatepicker = class extends GdsFormControlElement {
           <gds-dropdown
             .value=${this._focusedYear.toString()}
             @change=${__privateGet(this, _handleYearChange)}
-            aria-label="${msg5("Year")}"
+            label="${msg5("Year")}"
+            size="small"
+            hide-label
           >
             ${repeat(
       __privateGet(this, _years, years_get),
@@ -2343,7 +2435,10 @@ var GdsDatepicker = class extends GdsFormControlElement {
       (year) => html`<gds-option value=${year}>${year}</gds-option>`
     )}
           </gds-dropdown>
-          <button @click=${__privateGet(this, _handleIncrementFocusedMonth)}>
+          <button
+            @click=${__privateGet(this, _handleIncrementFocusedMonth)}
+            aria-label=${msg5("Next month")}
+          >
             <i class="icon next"></i>
           </button>
         </div>
@@ -2476,6 +2571,8 @@ dispatchInputEvent_fn = function() {
     })
   );
 };
+_handleFieldFocusOut = new WeakMap();
+_handleSpinnerFocus = new WeakMap();
 _handleClipboardCopy = new WeakMap();
 _handleClipboardPaste = new WeakMap();
 _handleFieldClick = new WeakMap();
@@ -2547,8 +2644,14 @@ __decorateClass([
   property9()
 ], GdsDatepicker.prototype, "label", 2);
 __decorateClass([
-  property9({ type: Boolean })
+  property9({ type: Boolean, attribute: "show-week-numbers" })
 ], GdsDatepicker.prototype, "showWeekNumbers", 2);
+__decorateClass([
+  property9()
+], GdsDatepicker.prototype, "size", 2);
+__decorateClass([
+  property9({ type: Boolean, attribute: "hide-label" })
+], GdsDatepicker.prototype, "hideLabel", 2);
 __decorateClass([
   property9()
 ], GdsDatepicker.prototype, "dateformat", 1);
@@ -2592,6 +2695,7 @@ export {
   GdsContextMenu,
   GdsDatepicker,
   GdsDropdown,
+  GdsMenuHeading,
   GdsMenuItem,
   GdsOption,
   VER_SUFFIX,

package/localization.js

@@ -29,16 +29,19 @@ var templates = {
   "s281846ef0421c71f": `November`,
   "s39938ecdae568740": `September`,
   "s407a88a592a0987c": `Augusti`,
+  "s46d6587089bd0356": `N\xE4sta m\xE5nad`,
   "s5052d10b539eabf0": `Mars`,
   "s58bfb494feb8eb02": str`${0} valda`,
   "s5d929ff1619ac0c9": `S\xF6k`,
   "s5e8250fb85d64c23": `St\xE4ng`,
+  "s62931b2a50168976": `F\xF6reg\xE5ende m\xE5nad`,
   "s63d040e37887f17e": `Idag`,
   "s6cfed919e21ac6ac": `Tor`,
   "s6d24cd19e23b8185": `Tis`,
   "s74aa0319e62b2eb7": `Ons`,
   "s7793b811d20184fe": `December`,
   "s7fd3469f78111589": `\xD6ppna meny`,
+  "s8ade4e9d5e804d6a": `F\xF6rsta tillg\xE4ngliga datum`,
   "s9836b719fa8ef857": `L\xF6r`,
   "s987ac119fac8d621": `S\xF6n`,
   "sa6f2645578b2d2bc": `\xC5r`,
@@ -49,6 +52,7 @@ var templates = {
   "scb6b9cb49cf93277": `April`,
   "sd898d99fd9c13de6": `S\xF6k i listan av val`,
   "se0955919920ee87d": `Dag`,
+  "se4129fd6b9d7b4c2": `Sista tillg\xE4ngliga datum`,
   "sf295af199c723ec8": `Fre`
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/calendar/calendar.d.ts

@@ -15,7 +15,7 @@ export declare class GdsCalendar extends GdsElement {
     /**
      * The currently selected date.
      */
-    value: Date;
+    value?: Date;
     /**
      * The minimum date that can be selected.
      */

package/primitives/listbox/option.d.ts

@@ -1,11 +1,10 @@
-import { LitElement } from 'lit';
 import { GdsElement } from '../../gds-element';
 import 'reflect-metadata';
 export interface OptionsContainer extends HTMLElement {
     options: GdsOption[];
     multiple: boolean;
 }
-declare const GdsOption_base: (new (...args: any[]) => LitElement) & typeof GdsElement;
+declare const GdsOption_base: (new (...args: any[]) => import("lit").LitElement) & typeof GdsElement;
 /**
  * @element gds-option
  * @internal

package/primitives/menu/menu-heading.d.ts

@@ -0,0 +1,6 @@
+import { GdsElement } from '../../gds-element';
+export declare class GdsMenuHeading extends GdsElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/primitives/menu/menu-heading.styles.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;

package/transitional-styles.js

@@ -70,11 +70,10 @@ var option_trans_styles_default = `/**
 @layer base, reset, transitional-styles;
 @layer transitional-styles {
   :host {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
     padding-bottom: 0.75rem;
     padding-top: 0.75rem;
-    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
     line-height: 1.25;
     cursor: pointer;
     display: flex;
@@ -83,22 +82,19 @@ var option_trans_styles_default = `/**
        -moz-user-select: none;
             user-select: none;
   }
-  :host:not(:disabled, .disabled, [aria-disabled]):hover {
-    background-color: #199be3;
-    color: rgb(255, 255, 255);
-    --background: #199be3;
-    --color: rgb(255, 255, 255);
-    border-color: #199be3;
+  :host:hover, :host:focus-visible {
+    background-color: var(--gds-ref-pallet-base200);
   }
-  :host[aria-selected], :host:active, :host.active, :host.active:hover, :host:active:hover {
-    background-color: rgb(0, 122, 199);
-    color: rgb(255, 255, 255);
-    --background: rgb(0, 122, 199);
-    --color: rgb(255, 255, 255);
-    border-color: rgb(0, 122, 199);
+  :host:active {
+    background-color: var(--gds-ref-pallet-base300);
   }
-  :host.active.sg-highlighted {
+  :host:focus {
+    outline-color: #000;
+    outline-offset: -0.25rem;
+  }
+  :host.active.sg-highlighted, :host[aria-selected=true] {
     background: var(--gds-ref-pallet-base800);
+    color: #fff;
   }
   :host(:hover),
   :host(:focus-visible) {
@@ -146,10 +142,33 @@ var option_trans_styles_default = `/**
   }
 }`;
 
+// libs/core/src/primitives/menu/menu-heading.trans.styles.scss
+var menu_heading_trans_styles_default = `@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  :host {
+    padding: 0.75rem 1rem;
+    background-color: var(--gds-ref-pallet-base300);
+    color: var(--gds-ref-pallet-base800);
+    display: flex;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+  :host([aria-hidden=true]) {
+    display: none;
+  }
+}`;
+
 // libs/core/src/primitives/listbox/listbox.trans.styles.ts
 function register() {
   TransitionalStyles.instance.register("gds-listbox", listbox_trans_styles_default.toString());
   TransitionalStyles.instance.register("gds-option", option_trans_styles_default.toString());
+  TransitionalStyles.instance.register(
+    "gds-menu-heading",
+    menu_heading_trans_styles_default.toString()
+  );
 }
 
 // libs/core/src/primitives/popover/popover.trans.styles.scss
@@ -1967,6 +1986,7 @@ a.button.tertiary.danger:focus-visible {
     width: 2rem;
     border-radius: 50%;
     position: relative;
+    --color: var(--gds-sys-color-base);
   }
   .close:not(:disabled):not(.disabled) > div::after, .close:not(:disabled):not(.disabled) > div::before {
     height: 0.789375rem;
@@ -2028,9 +2048,7 @@ a.button.tertiary.danger:focus-visible {
     visibility: visible;
   }
   header {
-    border-bottom: 1px solid var(--border-color);
     display: flex;
-    padding: 0.25rem 0.75rem;
   }
   @media (min-width: 36em) {
     header {
@@ -2038,13 +2056,14 @@ a.button.tertiary.danger:focus-visible {
     }
   }
   header button.close {
-    margin: -0.25rem;
+    margin: 0rem;
+    padding: 0;
   }
   header h2 {
     flex-grow: 1;
-    font-weight: 500;
+    font-weight: 400;
     line-height: 1.5;
-    margin: 0;
+    margin: 0.25rem 0 0 0.75rem;
   }
   dialog {
     --z-index: var(--sg-z-index-popover);
@@ -2057,7 +2076,6 @@ a.button.tertiary.danger:focus-visible {
     position: fixed;
     visibility: hidden;
     z-index: var(--z-index);
-    border-width: 0;
     inset: 0;
     overflow: hidden;
     padding: 0;
@@ -2109,8 +2127,10 @@ a.button.tertiary.danger:focus-visible {
   }
   @media (max-width: 35.98em) {
     dialog {
-      border-radius: 0.5rem;
       max-height: 80svh;
+      border-radius: 0.25rem;
+      border: 1px solid var(--border-color);
+      padding-bottom: 0;
     }
     dialog.v-kb-visible {
       inset-block-end: auto;
@@ -2366,6 +2386,22 @@ var dropdown_trans_styles_default = `/**
   input[type=week][aria-disabled=true]::placeholder {
     color: var(--text-disabled-color);
   }
+  input:not([type]):hover,
+  input[type=date]:hover,
+  input[type=datetime]:hover,
+  input[type=datetime-local]:hover,
+  input[type=email]:hover,
+  input[type=month]:hover,
+  input[type=number]:hover,
+  input[type=password]:hover,
+  input[type=search]:hover,
+  input[type=tel]:hover,
+  input[type=text]:hover,
+  input[type=time]:hover,
+  input[type=url]:hover,
+  input[type=week]:hover {
+    background-color: var(--gds-ref-pallet-base100);
+  }
   input[type=number] {
     -moz-appearance: textfield;
   }
@@ -2574,10 +2610,10 @@ var dropdown_trans_styles_default = `/**
     border-left: solid 2px var(--gds-ref-pallet-base800);
     content: "";
     display: block;
-    height: 0.75rem;
-    width: 0.75rem;
+    height: 0.5rem;
+    width: 0.5rem;
     position: relative;
-    top: -0.1875rem;
+    top: -0.15rem;
     transform: translate(75%, 0) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, -1);
     transition: transform 300ms ease-in;
     flex-shrink: 0;
@@ -2588,6 +2624,12 @@ var dropdown_trans_styles_default = `/**
   button:hover::after {
     border-color: currentColor;
   }
+  button.small {
+    font-size: 0.875rem;
+  }
+  button:hover {
+    background: var(--gds-ref-pallet-base300);
+  }
   label {
     display: block;
     font-weight: 500;
@@ -2830,16 +2872,12 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
     :host table {
       border-spacing: 0;
     }
-    @media (max-width: 35.98em) {
-      :host table {
-        width: 100%;
-      }
-    }
     :host table tr th,
     :host table tr td {
-      height: 2.5rem;
+      height: 2.75rem;
       text-align: center;
-      width: 2.5rem;
+      width: 2.75rem;
+      box-sizing: border-box;
     }
     :host table thead th {
       background: var(--sg-bg-level-2);
@@ -2879,23 +2917,23 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
       color: var(--gds-sys-color-font);
       cursor: pointer;
     }
-    :host table tbody tr td:focus-visible:not(.disabled) {
-      border: solid 1px var(--sg-bg-level-2);
-      border-radius: 4px;
-      cursor: pointer;
-      position: relative;
-      z-index: 0;
-    }
-    :host table tbody tr td:focus-visible:not(.disabled):focus:not(:focus-visible) {
+    :host table tbody tr td:focus-visible:focus:not(:focus-visible) {
       box-shadow: none;
       outline: 0;
     }
-    :host table tbody tr td:focus-visible:not(.disabled):focus, :host table tbody tr td:focus-visible:not(.disabled):focus-visible {
+    :host table tbody tr td:focus-visible:focus, :host table tbody tr td:focus-visible:focus-visible {
       outline-color: var(--gds-sys-color-focus-outline);
       outline-style: solid;
       outline-width: 0.125rem;
       outline-offset: 0.125rem;
     }
+    :host table tbody tr td:focus-visible:not(.disabled) {
+      border: solid 1px var(--sg-bg-level-2);
+      border-radius: 4px;
+      cursor: pointer;
+      position: relative;
+      z-index: 0;
+    }
     :host table tbody tr td[aria-selected=true] {
       background: var(--gds-ref-pallet-base800);
       border: solid 1px var(--sg-bg-level-2);
@@ -2916,6 +2954,8 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
       color: hsl(var(--sg-hsl-disabled-color));
       cursor: not-allowed;
       font-weight: 400;
+      border-radius: 4px;
+      border: solid 1px var(--sg-bg-level-2);
     }
     :host table tbody tr td.disabled.sg-date-holiday {
       color: hsla(var(--sg-hsl-red-2), 0.25);
@@ -2927,7 +2967,7 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
   }
   @layer _modifiers {
     .week-number {
-      border-right: solid 1px var(--sg-grey-300);
+      border-right: solid 1px var(--gds-ref-pallet-base300);
       font-weight: 400;
       pointer-events: none;
     }
@@ -3038,28 +3078,29 @@ i.sg-icon.sg-icon-ellipsis::before {
   }
   .field {
     border-radius: var(--sg-border-radius);
+    border: solid var(--sg-border-width) var(--sg-border-color);
+    --border-color: var(--sg-border-color);
     align-items: center;
     background-color: var(--sg-form-control-bg);
     box-sizing: border-box;
     color: var(--sg-text-primary);
     display: flex;
-    justify-content: center;
     justify-content: space-between;
+    align-items: stretch;
     margin: 0.5rem 0;
     min-height: 2.75rem;
+    cursor: text;
+  }
+  .field:hover {
+    background-color: var(--gds-ref-pallet-base100);
   }
   .field .input {
     padding-left: 1rem;
     padding-right: 1rem;
-    padding-bottom: 0.75rem;
-    padding-top: 0.75rem;
-    border-top: solid var(--sg-border-width) var(--sg-border-color);
-    border-bottom: solid var(--sg-border-width) var(--sg-border-color);
-    border-left: solid var(--sg-border-width) var(--sg-border-color);
-    --border-color: var(--sg-border-color);
-    border-radius: var(--sg-border-radius) 0 0 var(--sg-border-radius);
+    border-radius: var(--sg-border-radius);
     flex-grow: 1;
-    isolation: isolate;
+    display: flex;
+    align-items: center;
   }
   .field .input:focus:not(:focus-visible) {
     box-shadow: none;
@@ -3071,16 +3112,25 @@ i.sg-icon.sg-icon-ellipsis::before {
     outline-width: 0.125rem;
     outline-offset: 0.125rem;
   }
-  .field span {
-    cursor: default;
+  .field .input::-moz-selection, .field .input span::-moz-selection {
+    background: transparent;
+  }
+  .field .input::selection,
+  .field .input span::selection {
+    background: transparent;
+  }
+  .field .input.is-placeholder {
+    opacity: 0;
+  }
+  .field .input.is-placeholder:hover, .field .input.is-placeholder:focus, .field .input.is-placeholder:has(:focus) {
+    opacity: 0.7;
   }
   .field [role=spinbutton] {
-    cursor: default;
     display: inline-block;
   }
   .field [role=spinbutton]:focus {
-    background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);
     outline: none;
+    background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);
   }
   .field [role=spinbutton]::-moz-selection {
     background: transparent;
@@ -3089,16 +3139,15 @@ i.sg-icon.sg-icon-ellipsis::before {
     background: transparent;
   }
   .field button {
+    border-radius: var(--sg-border-radius);
     -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
-    background: var(--intent-info-background);
     border: 0;
-    border-radius: 0 var(--sg-border-radius) var(--sg-border-radius) 0;
     box-sizing: border-box;
     cursor: pointer;
-    padding: 0.7rem 1rem;
-    width: 3rem;
+    width: 2.75rem;
+    background: transparent;
   }
   .field button:focus:not(:focus-visible) {
     box-shadow: none;
@@ -3110,8 +3159,23 @@ i.sg-icon.sg-icon-ellipsis::before {
     outline-width: 0.125rem;
     outline-offset: 0.125rem;
   }
-  .field button svg path {
-    fill: #fff;
+  .field button:hover {
+    background: var(--gds-ref-pallet-base300);
+  }
+  .field button svg {
+    width: 1rem;
+    height: 1rem;
+  }
+  .field button svg > * {
+    fill: none;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2px;
+  }
+  .field.small {
+    min-height: 2rem;
+    font-size: 0.875rem;
   }
   :host(:invalid) .field + .form-info {
     position: relative;
@@ -3142,6 +3206,11 @@ i.sg-icon.sg-icon-ellipsis::before {
     display: flex;
     justify-content: space-between;
   }
+  @media (max-width: 35.98em) {
+    .header {
+      padding-top: 0;
+    }
+  }
   .header > * {
     margin-left: 0.25rem;
     margin-right: 0.25rem;
@@ -3151,14 +3220,32 @@ i.sg-icon.sg-icon-ellipsis::before {
     flex: 1 1;
   }
   .header button {
+    border-radius: var(--sg-border-radius);
     -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
     background: transparent;
     border: 0;
     cursor: pointer;
-    padding: 0.7rem 1rem;
-    width: 3rem;
+    padding: 0.5rem 0.5rem;
+    width: 2.75rem;
+    margin: 0.125rem 0.25rem;
+  }
+  .header button:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0;
+  }
+  .header button:focus, .header button:focus-visible {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
+  .header button:hover {
+    background: var(--gds-ref-pallet-base300);
+  }
+  .header button:focus-visible {
+    outline-offset: 0;
   }
   .header button .icon::before {
     background: none;
@@ -3166,16 +3253,16 @@ i.sg-icon.sg-icon-ellipsis::before {
     border-left: 2px solid;
     content: "";
     display: block;
-    height: 12px;
+    height: 8px;
     margin-top: 2px;
-    width: 12px;
+    width: 8px;
   }
   .header button .icon.prev::before {
-    margin-left: -4px;
+    margin-left: 3px;
     transform: translate(75%) rotate(45deg) scaleZ(-1);
   }
   .header button .icon.next::before {
-    margin-left: -10px;
+    margin-left: -1px;
     transform: translate(75%) rotate(-135deg) scaleZ(-1);
   }
   .footer {
@@ -3201,10 +3288,23 @@ i.sg-icon.sg-icon-ellipsis::before {
     font-weight: 500;
     padding: 0.5rem 0.75rem;
   }
+  .footer button:focus:not(:focus-visible) {
+    box-shadow: none;
+    outline: 0;
+  }
+  .footer button:focus, .footer button:focus-visible {
+    outline-color: var(--gds-sys-color-focus-outline);
+    outline-style: solid;
+    outline-width: 0.125rem;
+    outline-offset: 0.125rem;
+  }
   .footer button:hover {
     background: var(--intent-info-background);
     color: #fff;
   }
+  .footer .clear {
+    margin-right: auto;
+  }
 }`;
 
 // libs/core/src/components/datepicker/datepicker.trans.styles.ts
@@ -3215,7 +3315,7 @@ function register6() {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-ea801b";
+var VER_SUFFIX = "-16d025";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {

package/utils/testing/index.d.ts

@@ -36,4 +36,4 @@ export declare function conditionToBeTrue(condition: () => boolean): Promise<voi
 export declare function isWebKit(): boolean;
 export declare function isChromium(): boolean;
 export declare function isFirefox(): boolean;
-export declare function onlyDate(date: Date): string;
+export declare function onlyDate(date: Date | undefined): string | undefined;