@sebgroup/green-core 1.6.0 → 1.8.0

package/README.md

@@ -1,112 +1,75 @@
-# ![image](https://user-images.githubusercontent.com/11420341/121186039-f6eeda00-c866-11eb-9d80-21d01d065f0a.png) green
+<h1 align="center">
+    <a href="https://seb.io">
+        <img src="https://github.com/sebgroup/green/assets/11420341/2fc122ba-54fc-4f22-b96d-d405079d6e50">
+    </a>
+    <br/>
+    <br/>
+    Green Design System
+</h1>
 
-Green is an opinionated design system for building content and functionality for SEB. It builds on a set of principles and techniques aimed at maximizing code quality, code reuse, consistency and collaboration.
+<p align="center">Green is an open-source design system built by SEB.<p>
+<p align="center"><a href="https://github.com/sebgroup/green/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-Apache2.0-005FAC"/></a> <a href="https://semver.org/"><img src="https://img.shields.io/badge/semantic%20versioning-006D31"/></a> <a href="https://nx.dev/"><img src="https://img.shields.io/badge/maintained%20with-nx-006D31"/></a> <a href="https://github.com/sebgroup/green/blob/main/CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-006D31"/></a></p>
 
+## Getting started
 
-## View
+If you are new to Green, checkout [@sebgroup/green-core](https://github.com/sebgroup/green/tree/main/libs/core).
 
-View the components in our [Storybook](https://sebgroup.github.io/green/latest/chlorophyll/)
+We also provide components for the following technologies:
 
+- [React](https://github.com/sebgroup/green/tree/main/libs/react)
+- [Angular](https://github.com/sebgroup/green/tree/main/libs/react)
 
-## Philosophy
+If you're trying to find something specific, here's a full list of packages that we support!
 
-Dream big! Start small! Learn fast!
+| Package name                                                                                      | Description                                                             |
+| ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| [@sebgroup/green-core](https://github.com/sebgroup/green/tree/main/libs/core)                     | Webcomponent library built with [Lit](https://lit.dev)                  |
+| [@sebgroup/green-react](https://github.com/sebgroup/green/tree/main/libs/react)                   | React component library                                                 |
+| [@sebgroup/green-angular](https://github.com/sebgroup/green/tree/main/libs/angular)               | Angular component library                                               |
+| [@sebgroup/chlorophyll](https://github.com/sebgroup/green/tree/main/libs/chlorophyll)             | Styling framework                                                       |
+| [@sebgroup/green-tokens](https://github.com/sebgroup/green/tree/main/libs/tokens)                 | Design Tokens package                                                   |
+| [@sebgroup/green-charts](https://github.com/sebgroup/green/tree/main/libs/charts)                 | An SEB wrapper of [Billboard.js](https://naver.github.io/billboard.js/) |
+| [@sebgroup/green-react-charts](https://github.com/sebgroup/green/tree/main/libs/react-charts)     | A React version of the charts wrapper                                   |
+| [@sebgroup/green-angular-charts](https://github.com/sebgroup/green/tree/main/libs/angular-charts) | An Angular version of the charts wrapper                                |
 
+## 📋 Table of content
 
-### We only build what we need
+- [Documentation](https://github.com/sebgroup/green/tree/main?tab=readme-ov-file#documentation)
+- [Working from SEB](https://github.com/sebgroup/green/tree/main?tab=readme-ov-file#working-from-seb)
+- [Contribute](https://github.com/sebgroup/green/tree/main?tab=readme-ov-file#contribute)
+- [Working locally with this repo](https://github.com/sebgroup/green/tree/main?tab=readme-ov-file#working-locally-with-this-repo)
 
-If no-one needs a component, we will not build it. If someone needs a component, we will build it. This means that some things in Design Library might not make it into Green. It all depends on what gets used.
+## 📚 Documentation
 
+Documentation currently resides in a few different locations:
 
-### Ease of use, not ease of build
+- [User Interface Guidelines (Design Library)](https://designlibrary.sebgroup.com/)
+- [Storybook (@sebgroup/chlorophyll)](https://sebgroup.github.io/green/latest/chlorophyll/)
+- [Storybook (@sebgroup/green-core)](https://sebgroup.github.io/green/latest/core/)
+- [Storybook (@sebgroup/green-react)](https://sebgroup.github.io/green/latest/react/)
+- [Storybook (@sebgroup/green-angular)](https://sebgroup.github.io/green/latest/angular/)
 
-The components of Green will be used more times than one. This puts a multiplier on the value of every hour spent improving ease of use.
+## 🏦 Working from SEB
 
+Working from SEB and on SEB machines you need to setup things in a specific way for everything to work smooth. Checkout our [Developer Guidelines](https://github.sebank.se/pages/seb-common/Developer-garden/detail_pages/green.html) over at Developer Garden.
 
-### Minimum possible flexibility, but _not_ less
+## 🎉 Contribute
 
-Flexibility means decisions must be made. This puts strain on every user of a system. Green goes the other way: Minimum flexibility, maximum clarity. If our users cannot do what they need, we solve that specific problem in a generalized way - no more, no less. Remember: The most flexible system possible is your terminal.
+We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our [Contributing Guide](https://github.com/sebgroup/green/blob/main/CONTRIBUTING.md)! 👀
 
+## 🔨 Working locally with this repo
 
-### We don't solve problems we do not have
+### Start Storybook locally
 
-If something _might_ be a performance problem, that is ok. If something _might_ give a to large payload, that is ok. When we suspect a problem, we measure it. If it _is_ a problem, we fix it. See [premature optimization](https://xkcd.com/1691/)
-
-
-### We work from right to left
-
-If something can be deployed, we deploy. Then, if a PR needs a review, we review. Then, and only then, if something can be built, we build. Flow is more important than speed.
-
-
-## The design process
-
-Green is tightly integrated with the design process. The design responsible are part of the team so that decisions can be made effectively and by those most suited.
-
-For the most part we follow the existing design. When changes have to be made for practical reasons, clarity, uniformity, accessibility or any other reason, the design responsible make the call and the change is integrated.
-
-This can, and will, lead to minor inconsistencies in different parts of our offering, especially as Green is not yet (even close to) at 100% adoption. This is fine. Far larger inconsistencies already exist in our current, digital ecosystem. We therefore prioritise the ability to keep moving forward and improve our customers' experience over delaying for the sake of consistency.
-
-In the long run, consistency will be achieved by automating the roll-out of changes, be they visual, functional or qualitative, to keep all parts of our offering on the latest version. When we go Green, we stay green.
-
-
-## Develop
-
-### Yarn
-
-This mono repo is based on `nx` and uses `yarn` instead of `npm`. If you are unused to yarn, see the following instructions:
-
-#### Install yarn
-
-```bash
-npm install yarn -g
-```
-Use the -g flag to install it globally on your computer.
-
-
-#### Install dependencies
-
-```bash
-yarn
-```
-
-#### Add a dependency to a workspace
-
-All projects use a common set of dependencies so if you want to add `leftpad` to the chlorophyll project, just run:
-
-```bash
-yarn add leftpad
-```
-
-#### Run a command in `package.json`
-
-Unlike `npm`, `yarn` doesn't require the `run` command. So if you want to run `lint` in your package or in the project root, simply type:
+To start Storybooks locally on your machine you run the following command:
 
 ```bash
-yarn lint
+npx nx run [PROJECT]:storybook
 ```
 
-### How to contribute?
-
-- Clone the project locally from GitHub - `git clone https://github.com/sebgroup/green.git`.
-- Create a new branch each time - `git checkout -b "DESCRIPTIVE NAME"`.
-- Commit with the Semantic everything inscructions underneath.
-- Pull the latest - `git pull`.
-- Push eveything - `git push`.
-- Make a pull request in GitHub - `https://github.com/sebgroup/green/compare`.
+Where you replace `[PROJECT]` with a folder name from `green\libs`.
 
-### Semantic everything
-
-All projects in Green use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) to power [semantic releases](https://semantic-release.gitbook.io/semantic-release/). In order to simplify using this format, install:
-
-```bash
-npm install git-cz -g
-```
-
-To commit, just run `git-cz` in the terminal. Always try to add reference to an issue in the longer description with # and the issue number. Eg `#1337`. 
-
-### Start Storybook
-
-You start the common storybooks with these commands:
+So to start Storybook for each component library run:
 
 ```bash
 npx nx run chlorophyll:storybook
@@ -114,38 +77,14 @@ npx nx run react:storybook
 npx nx run angular:storybook
 ```
 
-Or the general `npx nx run [PROJECT]:storybook` where you replace `[PROJECT]` with a folder name from `green\libs`.
-
 If you install nx globally you can omit the npx above.
 
 ```bash
+# Install nx globally
 npm install nx -g
-```
 
-#### Build
-
-If you want to build the files to see how the output looks use `build-storybook`:
-
-```bash
-npx nx run chlorophyll:build-storybook
-npx nx run react:build-storybook
-npx nx run angular:build-storybook
+# And start the storybooks
+nx run chlorophyll:storybook
+nx run react:storybook
+nx run angular:storybook
 ```
-
-### On SEB Windows computer
-
-For the moment, `yarn` is difficult to use within the SEB environment, so instead you can install the dependencies using `npm`:
-
-```bash
-$ npm i --force
-```
-
-The `--force` flag is necessary in this case to convince `npm` that sub-dependency conflicts are OK.
-
-Don't commit the generated `package-lock.json` file, since we already have a `yarn.lock` file.
-
-If you need to add a new dependency, the `yarn.lock` file needs to be updated, and in that case you still need to use `yarn`. You can do this by temporarily disconnecting from the SEB network, or by using a non-SEB computer.
-
-## Git
-
-We reccommend using [GitHub Desktop](https://desktop.github.com/), as it will work smoothly with both on-prem GitHub and external GitHub without any manual configuration of proxies and certificates. Ask for help on Teams if you need assistance!

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/components/grouped-list/grouped-list.d.ts

@@ -0,0 +1,17 @@
+import { GdsElement } from '../../gds-element';
+import './list-item';
+/**
+ * @element gds-grouped-list
+ * @status beta
+ *
+ * Grouped lists are used to list many datapoints with labels in a structured way.
+ */
+export declare class GdsGroupedList extends GdsElement {
+    private _tStyles?;
+    /**
+     * The label for the list that will render in the shadowDOM as the first <li> element in the list with the class `gds-list-heading`
+     */
+    label: string;
+    connectedCallback(): void;
+    render(): any;
+}

package/components/grouped-list/grouped-list.trans.styles.d.ts

@@ -0,0 +1,2 @@
+export declare function register(): void;
+export default register;

package/components/grouped-list/list-item.d.ts

@@ -0,0 +1,11 @@
+import { GdsElement } from '../../gds-element';
+/**
+ * @element gds-list-item
+ * @status beta
+ *
+ * Used with `gds-grouped-list` to create a list items.
+ */
+export declare class GdsListItem extends GdsElement {
+    connectedCallback(): void;
+    render(): any;
+}

package/components/index.d.ts

@@ -4,3 +4,4 @@ export * from '../primitives/menu/menu-heading';
 export * from './context-menu/context-menu';
 export * from '../primitives/menu/menu-item';
 export * from './datepicker/datepicker';
+export * from './grouped-list/grouped-list';

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";
 
@@ -76,8 +77,8 @@ function watch(propertyName, options) {
     const { update } = proto;
     const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
     proto.update = function(changedProps) {
-      watchedProperties.forEach((property10) => {
-        const key = property10;
+      watchedProperties.forEach((property11) => {
+        const key = property11;
         if (changedProps.has(key)) {
           const oldValue = changedProps.get(key);
           const newValue = this[key];
@@ -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 = "-3d880b";
 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);
@@ -2653,10 +2691,62 @@ __decorateClass([
 GdsDatepicker = __decorateClass([
   gdsCustomElement("gds-datepicker")
 ], GdsDatepicker);
+
+// libs/core/src/components/grouped-list/grouped-list.ts
+import { state as state11, property as property10 } from "lit/decorators.js";
+import { when as when5 } from "lit/directives/when.js";
+
+// libs/core/src/components/grouped-list/list-item.ts
+var GdsListItem = class extends GdsElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "listitem");
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+GdsListItem = __decorateClass([
+  gdsCustomElement("gds-list-item")
+], GdsListItem);
+
+// libs/core/src/components/grouped-list/grouped-list.ts
+var GdsGroupedList = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    constrainSlots(this);
+    TransitionalStyles.instance.apply(this, "gds-grouped-list");
+  }
+  render() {
+    return html`${this._tStyles}${when5(
+      this.label,
+      () => html`<div class="gds-list-heading" aria-hidden="true" id="label">
+            ${this.label}
+          </div>`
+    )}
+      <div role="list" aria-labelledby="label">
+        <slot gds-allow="gds-list-item"></slot>
+      </div>`;
+  }
+};
+__decorateClass([
+  state11()
+], GdsGroupedList.prototype, "_tStyles", 2);
+__decorateClass([
+  property10()
+], GdsGroupedList.prototype, "label", 2);
+GdsGroupedList = __decorateClass([
+  gdsCustomElement("gds-grouped-list")
+], GdsGroupedList);
 export {
   GdsContextMenu,
   GdsDatepicker,
   GdsDropdown,
+  GdsGroupedList,
   GdsMenuHeading,
   GdsMenuItem,
   GdsOption,

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.8.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

@@ -21,6 +21,12 @@ var listbox_trans_styles_default = `/**
 * Use \`add-focus\` instead
 */
 /** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
+/** 
+  * @deprecated in favor of Grouped list component
+  */
+/** 
+  * @deprecated in favor of Grouped list component
+  */
 @layer base, reset, transitional-styles;
 @layer transitional-styles {
   :host {
@@ -70,11 +76,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 +88,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) {
@@ -150,14 +152,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 +2054,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 +2062,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 +2082,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 +2133,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 +2392,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 +2616,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 +2630,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 +2878,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 +2923,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 +2960,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 +2973,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 +3084,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 +3118,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 +3145,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 +3165,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 +3212,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 +3226,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 +3259,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 +3294,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
@@ -3241,10 +3318,42 @@ function register6() {
   TransitionalStyles.instance.register("gds-datepicker", datepicker_trans_styles_default.toString());
 }
 
+// libs/core/src/components/grouped-list/grouped-list.trans.styles.scss
+var grouped_list_trans_styles_default = `@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  @layer _base, _overrides;
+  :host {
+    display: block;
+    list-style: none;
+  }
+  @layer _base {
+    .gds-list-heading {
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      background-color: var(--gds-ref-pallet-base200, #e9e9e9);
+    }
+    ::slotted([gds-element=gds-list-item]) {
+      all: revert;
+      display: flex;
+      gap: 0.25rem;
+      justify-content: space-between;
+      padding: 1rem;
+      border-bottom: 1px solid var(--gds-ref-pallet-base200, #e9e9e9);
+    }
+  }
+  @layer _overrides {}
+}`;
+
+// libs/core/src/components/grouped-list/grouped-list.trans.styles.ts
+function register7() {
+  TransitionalStyles.instance.register("gds-grouped-list", grouped_list_trans_styles_default.toString());
+}
+
 // 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 = "-3d880b";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {
@@ -3281,6 +3390,7 @@ var registerTransitionalStyles = () => {
   register4();
   register5();
   register6();
+  register7();
 };
 function supportsConstructedStylesheets() {
   try {

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;