@sebgroup/green-core 1.6.0 → 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,7 +3,6 @@ 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.
@@ -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/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,7 +144,7 @@ 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 = "-f9a04d";
+var VER_SUFFIX = "-16d025";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -1126,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.
@@ -1238,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>`
     )}
 
@@ -1252,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>
@@ -1400,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);
@@ -1476,7 +1487,7 @@ GdsMenuHeading = __decorateClass([
 // 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
@@ -1546,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"
@@ -1657,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 html7 } from "lit";
-import { classMap as classMap4 } from "lit/directives/class-map.js";
+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";
@@ -1724,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();
@@ -1790,13 +1801,13 @@ var GdsCalendar = class extends GdsElement {
           const isDisabled = !isSameMonth(this.focusedDate, day) || day < this.min || day > this.max;
           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()}"
@@ -2141,6 +2152,8 @@ 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");
@@ -2228,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") {
@@ -2290,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.
@@ -2305,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" @focusout=${__privateGet(this, _handleFieldFocusOut)}>
+        <div
+          class=${classMap6({ input: true, "is-placeholder": !this.value })}
+          @focusout=${__privateGet(this, _handleFieldFocusOut)}
+        >
           ${join(
       map(
         this._dateFormatLayout.layout,
@@ -2331,6 +2350,10 @@ var GdsDatepicker = class extends GdsFormControlElement {
                   @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>`
@@ -2345,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>
@@ -2363,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)
@@ -2374,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>
@@ -2398,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),
@@ -2406,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>
@@ -2612,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);

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.6.0",
+  "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/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:focus {
+    outline-color: #000;
+    outline-offset: -0.25rem;
   }
-  :host.active.sg-highlighted {
+  :host.active.sg-highlighted, :host[aria-selected=true] {
     background: var(--gds-ref-pallet-base800);
+    color: #fff;
   }
   :host(:hover),
   :host(:focus-visible) {
@@ -150,14 +146,15 @@ var option_trans_styles_default = `/**
 var menu_heading_trans_styles_default = `@layer base, reset, transitional-styles;
 @layer transitional-styles {
   :host {
-    padding: 0.5rem 1rem;
-    background-color: var(--gds-ref-pallet-base100);
+    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;
@@ -2051,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 {
@@ -2061,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);
@@ -2080,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;
@@ -2132,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;
@@ -2389,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;
   }
@@ -2597,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;
@@ -2611,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;
@@ -2853,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);
@@ -2902,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);
@@ -2939,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);
@@ -2950,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;
     }
@@ -3061,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;
@@ -3094,17 +3112,20 @@ i.sg-icon.sg-icon-ellipsis::before {
     outline-width: 0.125rem;
     outline-offset: 0.125rem;
   }
-  .field .input::-moz-selection {
+  .field .input::-moz-selection, .field .input span::-moz-selection {
     background: transparent;
   }
-  .field .input::selection {
+  .field .input::selection,
+  .field .input span::selection {
     background: transparent;
   }
-  .field span {
-    cursor: text;
+  .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: text;
     display: inline-block;
   }
   .field [role=spinbutton]:focus {
@@ -3118,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;
@@ -3139,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;
@@ -3171,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;
@@ -3180,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;
@@ -3195,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 {
@@ -3230,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
@@ -3244,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 = "-f9a04d";
+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;