@sebgroup/green-core 1.45.2 → 1.46.0

package/components/calendar/calendar.js

@@ -1,14 +1,14 @@
 import {
   GdsCalendar
-} from "../../chunks/chunk.PETZ4VFM.js";
-import "../../chunks/chunk.TQCUATGL.js";
+} from "../../chunks/chunk.H4RGB4NP.js";
+import "../../chunks/chunk.TMQYOMEN.js";
 import "../../chunks/chunk.TYGMNHNO.js";
-import "../../chunks/chunk.LYGRXFPS.js";
+import "../../chunks/chunk.DX6IFT6Y.js";
 import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.WIZDAKJ5.js";
+import "../../chunks/chunk.A5AE7PGK.js";
 import "../../chunks/chunk.JY3EKAVI.js";
 import "../../chunks/chunk.MLXMQIEV.js";
-import "../../chunks/chunk.CTY24X3K.js";
+import "../../chunks/chunk.DI23R63U.js";
 import "../../chunks/chunk.SEHSDSX2.js";
 export {
   GdsCalendar

package/components/calendar/calendar.trans.styles.js

@@ -1,7 +1,7 @@
 import {
   calendar_trans_styles_default,
-  register5 as register
-} from "../../chunks/chunk.TQCUATGL.js";
+  register4 as register
+} from "../../chunks/chunk.TMQYOMEN.js";
 import "../../chunks/chunk.JY3EKAVI.js";
 import "../../chunks/chunk.MLXMQIEV.js";
 import "../../chunks/chunk.SEHSDSX2.js";

package/components/calendar/functions.js

@@ -1,6 +1,6 @@
 import {
   renderMonthGridView
-} from "../../chunks/chunk.CTY24X3K.js";
+} from "../../chunks/chunk.DI23R63U.js";
 import "../../chunks/chunk.SEHSDSX2.js";
 export {
   renderMonthGridView

package/components/calendar/index.js

@@ -1,15 +1,15 @@
 import "../../chunks/chunk.DJ2OXJZN.js";
 import {
   GdsCalendar
-} from "../../chunks/chunk.PETZ4VFM.js";
-import "../../chunks/chunk.TQCUATGL.js";
+} from "../../chunks/chunk.H4RGB4NP.js";
+import "../../chunks/chunk.TMQYOMEN.js";
 import "../../chunks/chunk.TYGMNHNO.js";
-import "../../chunks/chunk.LYGRXFPS.js";
+import "../../chunks/chunk.DX6IFT6Y.js";
 import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.WIZDAKJ5.js";
+import "../../chunks/chunk.A5AE7PGK.js";
 import "../../chunks/chunk.JY3EKAVI.js";
 import "../../chunks/chunk.MLXMQIEV.js";
-import "../../chunks/chunk.CTY24X3K.js";
+import "../../chunks/chunk.DI23R63U.js";
 import "../../chunks/chunk.SEHSDSX2.js";
 export {
   GdsCalendar

package/components/card/card.d.ts

@@ -1,34 +1,34 @@
 import { GdsContainer } from '../container';
 /**
- * The `gds-card` is a custom element that provides a flexible card system.
- * It can be used to create a card with different styles and configurations.
- * The card can be customized with different properties like shadow, border, radius, and background.
- * It is designed to be used in different scenarios like displaying content, images, or other elements.
- * It can be used in combination with other elements like `gds-grid`, `gds-container`, `gds-img`, `gds-text` etc.
+ *  A container for content representing a single entity. e.g. a contact, article, or task.
+ *
+ * `gds-card` inherits all properties from `gds-container`, but comes with some predefined defaults
+ * and a shortcut property for specifiying different card variants.
  *
  * @element gds-card
  * @status beta
  *
  */
 export declare class GdsCard extends GdsContainer {
-    static styles: import("lit").CSSResult[][];
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     /**
-     * Controls the box-shadow property of the card.
+     * Controls the box-shadow property.
      *
-     * Shadow styles are as specified on the design system that range from xl-2xl, can be used like this:
+     * These are the available values you can use to define shadow size
      *
-     * ```html
-     * <gds-card shadow="s{xs} m{xs} l{s}"></gds-card>
-     * ```
-     * The above example will apply the shadow style of xs for small devices, xs for medium devices, and s for large devices.
+     * `xs`, `s`, `m`, `l`, `xl`
      *
-     * The shadow styles are predfied on the tokens and will be applied automativally based on the token value.
+     */
+    shadow?: string;
+    /**
+     * Shortcut for setting the border, background and text color of the card to the specified color variant, such as 'primary', 'secondary', 'tertiary', etc.
      *
-     * These are the available values you can use to define shadow
+     * You can find all available variants in the L2 section of the [Color System documentation page](./?path=/docs/style-colors--docs)
      *
-     * `XS`, `S`, `M`, `L`, `XL`
+     * Supports Style Expression syntax for setting the value responsively.
      *
      */
-    shadow?: string;
+    variant: string;
+    constructor();
     render(): any;
 }

package/components/card/card.js

@@ -1,11 +1,11 @@
 import {
   GdsCard
-} from "../../chunks/chunk.F5FKOKK2.js";
+} from "../../chunks/chunk.AMEJWHUO.js";
 import "../../chunks/chunk.WFKUYHQY.js";
-import "../../chunks/chunk.D74GU56T.js";
-import "../../chunks/chunk.6UWYSL2J.js";
-import "../../chunks/chunk.LYGRXFPS.js";
-import "../../chunks/chunk.WIZDAKJ5.js";
+import "../../chunks/chunk.7EUIGIIS.js";
+import "../../chunks/chunk.H2KG3F2S.js";
+import "../../chunks/chunk.DX6IFT6Y.js";
+import "../../chunks/chunk.A5AE7PGK.js";
 import "../../chunks/chunk.JY3EKAVI.js";
 import "../../chunks/chunk.MLXMQIEV.js";
 import "../../chunks/chunk.SEHSDSX2.js";

package/components/card/index.js

@@ -1,12 +1,12 @@
 import "../../chunks/chunk.ALFDKEVN.js";
 import {
   GdsCard
-} from "../../chunks/chunk.F5FKOKK2.js";
+} from "../../chunks/chunk.AMEJWHUO.js";
 import "../../chunks/chunk.WFKUYHQY.js";
-import "../../chunks/chunk.D74GU56T.js";
-import "../../chunks/chunk.6UWYSL2J.js";
-import "../../chunks/chunk.LYGRXFPS.js";
-import "../../chunks/chunk.WIZDAKJ5.js";
+import "../../chunks/chunk.7EUIGIIS.js";
+import "../../chunks/chunk.H2KG3F2S.js";
+import "../../chunks/chunk.DX6IFT6Y.js";
+import "../../chunks/chunk.A5AE7PGK.js";
 import "../../chunks/chunk.JY3EKAVI.js";
 import "../../chunks/chunk.MLXMQIEV.js";
 import "../../chunks/chunk.SEHSDSX2.js";

package/components/coachmark/coachmark.js

@@ -1,8 +1,8 @@
 import {
   GdsCoachmark
-} from "../../chunks/chunk.KJHR5IQT.js";
+} from "../../chunks/chunk.AFDCAE4H.js";
 import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.WIZDAKJ5.js";
+import "../../chunks/chunk.A5AE7PGK.js";
 import "../../chunks/chunk.JY3EKAVI.js";
 import "../../chunks/chunk.MLXMQIEV.js";
 import "../../chunks/chunk.SEHSDSX2.js";

package/components/coachmark/index.js

@@ -1,8 +1,8 @@
 import {
   GdsCoachmark
-} from "../../chunks/chunk.KJHR5IQT.js";
+} from "../../chunks/chunk.AFDCAE4H.js";
 import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.WIZDAKJ5.js";
+import "../../chunks/chunk.A5AE7PGK.js";
 import "../../chunks/chunk.JY3EKAVI.js";
 import "../../chunks/chunk.MLXMQIEV.js";
 import "../../chunks/chunk.SEHSDSX2.js";

package/components/container/container.d.ts

@@ -12,12 +12,13 @@ import { GdsElement } from '../../gds-element';
 export declare class GdsContainer extends GdsElement {
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     /**
-     * Controls the display property of the container.
+     * Controls the display property.
      * Supports all valid CSS display values.
      */
     display: string;
     /**
-     * The level of the container can be used to apply background and color styles from the corresponding level.
+     * The level of the container is used to resolve the color tokens from the corresponding level.
+     * Check the [Color System documentation page](./?path=/docs/style-colors--docs) for more information.
      *
      * Default value for `gds-container` is set to `2`.
      *
@@ -26,17 +27,17 @@ export declare class GdsContainer extends GdsElement {
      * */
     level: string;
     /**
-     * Controls the `place-items` property of the container.
+     * Controls the `place-items` property.
      * Supports all valid CSS `place-items` values.
      */
     'place-items'?: string;
     /**
-     * Controls the `place-content` property of the container.
+     * Controls the `place-content` property.
      * Supports all valid CSS `place-content` values.
      */
     'place-content'?: string;
     /**
-     * Controls the color property of the container.
+     * Controls the color property.
      * Supports all the color tokens from the design system.
      *
      * ```html
@@ -47,7 +48,7 @@ export declare class GdsContainer extends GdsElement {
      */
     color?: string;
     /**
-     * Controls the background property of the card.
+     * Controls the background property.
      * Supports all the color tokens from the design system.
      *
      * Adding transparency to the background color:
@@ -60,7 +61,7 @@ export declare class GdsContainer extends GdsElement {
      */
     background?: string;
     /**
-     * Controls the border property of the card.
+     * Controls the border property.
      * Supports all tokens from the design system.
      *
      * @property border
@@ -84,10 +85,18 @@ export declare class GdsContainer extends GdsElement {
      * ```
      */
     border?: string;
+    /**
+     * Controls the border-color property.
+     * Supports all the color tokens from the design system.
+     */
     'border-color'?: string;
+    /**
+     * Controls the border-width property.
+     * Supports all the border style values.
+     */
     'border-width'?: string;
     /**
-     * Controls the border-radius property of the container.
+     * Controls the border-radius property.
      * Supports all the size tokens from the design system.
      *
      * You can apply radius in each corner like this:
@@ -111,7 +120,7 @@ export declare class GdsContainer extends GdsElement {
      */
     'border-radius'?: string;
     /**
-     * Controls the opacity property of the container.
+     * Controls the opacity property.
      *
      * You can apply opacity like this:
      *
@@ -127,7 +136,7 @@ export declare class GdsContainer extends GdsElement {
      * You can apply padding in each side like this:
      *
      * ```html
-     * <gds-flex padding="xl"></gds-flex>
+     * <gds-container padding="xl"></gds-container>
      * ```
      *
      * `xl` in this case will be applied to all breakpoints and sides.
@@ -135,7 +144,7 @@ export declare class GdsContainer extends GdsElement {
      * Padding also support breakpoint syntax like this:
      *
      * ```html
-     * <gds-flex padding="xs{s} m{m} l{xl}"></gds-flex>
+     * <gds-container padding="xs{s} m{m} l{xl}"></gds-container>
      * ```
      *
      * The above example will apply the padding style of `xs` for `small` devices, `m` for `medium` devices, and `xl` for large devices.
@@ -145,181 +154,142 @@ export declare class GdsContainer extends GdsElement {
     'padding-inline'?: string;
     'padding-block'?: string;
     /**
-     * Controls the margin of the text.
+     * Controls the margin property.
      * Supports all the default margin values.
      */
     margin?: string;
     /**
-     * Controls the position property of the flex.
+     * Controls the position property.
      * Supports all valid CSS position values.
      */
     position?: string;
     /**
-     * Controls the inset property of the flex.
+     * Controls the inset property.
      * Supports all valid CSS inset values.
      */
     inset?: string;
     /**
-     * Controls the overflow property of the flex.
+     * Controls the overflow property.
      * Supports all valid CSS overflow values.
      */
     overflow?: string;
     /**
-     * Controls the grid-column property of the flex.
-     * Supports all valid CSS grid-column values.
-     * Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
-     *
-     * ```html
-     * <gds-flex grid-column="2 / -1"></gds-flex>
-     * ```
-     *
-     * The above example will apply the grid-column style of `2 / -1`.
-     * The column can be applied to the flex using shorthand like grid-column="1 / 2"
-     *
-     * The column also support breakpoint syntax like this:
-     *
-     * ```html
-     * <gds-flex grid-column="s{1 / 2} m{2 / 3} l{3 / 4}"></gds-flex>
-     * ```
-     */
-    'grid-column'?: string;
-    /**
-     * Controls the grid-row property of the flex.
-     * Supports all valid CSS grid-row values.
-     *
-     * Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
-     *
-     * ```html
-     * <gds-flex grid-row="2 / -1"></gds-flex>
-     * ```
-     *
-     * The above example will apply the grid-row style of `2 / -1`.
-     * The row can be applied to the flex using shorthand like grid-row="1 / 2"
-     *
-     * The row also support breakpoint syntax like this:
-     *
-     * ```html
-     * <gds-flex grid-row="s{1 / 2} m{2 / 3} l{3 / 4}"></gds-flex>
-     * ```
-     */
-    'grid-row'?: string;
-    /**
-     * Controls the height property of the flex.
+     * Controls the height property.
      * Supports all valid CSS height values.
      *
      * @property height
      */
     height?: string;
     /**
-     * Controls the `max-height` property of the flex.
+     * Controls the `max-height` property.
      * Supports all valid CSS `max-height` values.
      *
      * @property max-height
      */
     'max-height'?: string;
     /**
-     * Controls the `min-height` property of the flex.
+     * Controls the `min-height` property.
      * Supports all valid CSS `min-height` values.
      *
      * @property min-height
      */
     'min-height'?: string;
     /**
-     * Controls the `block-size` property of the flex.
+     * Controls the `block-size` property.
      * Supports only tokens.
      *
      * @property block-size
      */
     'block-size'?: string;
     /**
-     * Controls the `min-block-size` property of the flex.
+     * Controls the `min-block-size` property.
      * Supports only tokens.
      *
      * @property min-block-size
      */
     'min-block-size'?: string;
     /**
-     * Controls the width property of the flex.
+     * Controls the width property.
      * Supports all valid CSS height values.
      *
      *  @property width
      */
     width?: string;
     /**
-     * Controls the `max-width` property of the flex.
+     * Controls the `max-width` property.
      * Supports all valid CSS `max-width` values.
      *
      * @property max-width
      */
     'max-width'?: string;
     /**
-     * Controls the `min-width` property of the flex.
+     * Controls the `min-width` property.
      * Supports all valid CSS `min-width` values.
      *
      * @property min-width
      */
     'min-width'?: string;
     /**
-     * Controls the `inline-size` property of the flex.
+     * Controls the `inline-size` property.
      * Supports only token
      *
      * @property inline-size
      */
     'inline-size'?: string;
     /**
-     * Controls the cursor property of the flex.
+     * Controls the cursor property.
      * Supports all valid CSS cursor values.
      */
     cursor?: string;
     /**
-     * Controls the `pointer-events` property of the flex.
+     * Controls the `pointer-events` property.
      * Supports all valid CSS `pointer-events` values.
      *
      * @property pointer-events
      */
     'pointer-events'?: string;
     /**
-     * Controls the `user-select` property of the flex.
+     * Controls the `user-select` property.
      * Supports all valid CSS `user-select` values.
      *
      * @property user-select
      */
     'user-select'?: string;
     /**
-     * Controls the z-index property of the flex.
+     * Controls the z-index property.
      * Supports all valid CSS z-index values.
      */
     'z-index'?: string;
     /**
-     * Controls the `transform` property of the flex.
+     * Controls the `transform` property.
      * Supports all valid CSS `transform` values.
      *
      * @property transform
      */
     transform?: string;
     /**
-     * Controls the `transform-style` property of the flex.
+     * Controls the `transform-style` property.
      * Supports all valid CSS `transform-style` values.
      *
      * @property transform-style
      */
     'transform-style'?: string;
     /**
-     * Controls the `transition` property of the flex.
+     * Controls the `transition` property.
      * Supports all valid CSS `transition` values.
      *
      * @property transition
      */
     transition?: string;
     /**
-     * Controls the `transition-behavior` property of the flex.
+     * Controls the `transition-behavior` property.
      * Supports all valid CSS `transition-behavior` values.
      *
      * @property transition-behavior
      */
     'transition-behavior'?: string;
     /**
-     * Controls the `animation` property of the flex.
+     * Controls the `animation` property.
      * Supports all valid CSS `animation` values.
      *
      * @property animation
@@ -370,5 +340,44 @@ export declare class GdsContainer extends GdsElement {
      * @property weight
      */
     'font-weight'?: string;
+    /**
+     * Controls the grid-column property.
+     * Supports all valid CSS grid-column values.
+     * Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
+     *
+     * ```html
+     * <gds-container grid-column="2 / -1"></gds-container>
+     * ```
+     *
+     * The above example will apply the grid-column style of `2 / -1`.
+     * The column can be applied using shorthand like grid-column="1 / 2"
+     *
+     * The column also support breakpoint syntax like this:
+     *
+     * ```html
+     * <gds-container grid-column="s{1 / 2} m{2 / 3} l{3 / 4}"></gds-container>
+     * ```
+     */
+    'grid-column'?: string;
+    /**
+     * Controls the grid-row property.
+     * Supports all valid CSS grid-row values.
+     *
+     * Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
+     *
+     * ```html
+     * <gds-container grid-row="2 / -1"></gds-container>
+     * ```
+     *
+     * The above example will apply the grid-row style of `2 / -1`.
+     * The row can be applied using shorthand like grid-row="1 / 2"
+     *
+     * The row also support breakpoint syntax like this:
+     *
+     * ```html
+     * <gds-container grid-row="s{1 / 2} m{2 / 3} l{3 / 4}"></gds-container>
+     * ```
+     */
+    'grid-row'?: string;
     render(): any;
 }

package/components/container/container.js

@@ -1,9 +1,9 @@
 import {
   GdsContainer
-} from "../../chunks/chunk.D74GU56T.js";
-import "../../chunks/chunk.6UWYSL2J.js";
-import "../../chunks/chunk.LYGRXFPS.js";
-import "../../chunks/chunk.WIZDAKJ5.js";
+} from "../../chunks/chunk.7EUIGIIS.js";
+import "../../chunks/chunk.H2KG3F2S.js";
+import "../../chunks/chunk.DX6IFT6Y.js";
+import "../../chunks/chunk.A5AE7PGK.js";
 import "../../chunks/chunk.JY3EKAVI.js";
 import "../../chunks/chunk.MLXMQIEV.js";
 import "../../chunks/chunk.SEHSDSX2.js";

package/components/container/index.js

@@ -1,10 +1,10 @@
 import "../../chunks/chunk.WFKUYHQY.js";
 import {
   GdsContainer
-} from "../../chunks/chunk.D74GU56T.js";
-import "../../chunks/chunk.6UWYSL2J.js";
-import "../../chunks/chunk.LYGRXFPS.js";
-import "../../chunks/chunk.WIZDAKJ5.js";
+} from "../../chunks/chunk.7EUIGIIS.js";
+import "../../chunks/chunk.H2KG3F2S.js";
+import "../../chunks/chunk.DX6IFT6Y.js";
+import "../../chunks/chunk.A5AE7PGK.js";
 import "../../chunks/chunk.JY3EKAVI.js";
 import "../../chunks/chunk.MLXMQIEV.js";
 import "../../chunks/chunk.SEHSDSX2.js";

package/components/context-menu/context-menu.js

@@ -1,21 +1,21 @@
 import {
   GdsContextMenu
-} from "../../chunks/chunk.RDVMJXOX.js";
+} from "../../chunks/chunk.PZWVZWJM.js";
 import "../../chunks/chunk.UF6IEONX.js";
-import "../../chunks/chunk.NQWZXYYF.js";
-import "../../chunks/chunk.BNN7YRU6.js";
-import "../../chunks/chunk.MIY5GV6X.js";
-import "../../chunks/chunk.27E4EAEK.js";
+import "../../chunks/chunk.BV5Z5JDM.js";
+import "../../chunks/chunk.XHVJ5DAO.js";
+import "../../chunks/chunk.67DBEXTS.js";
+import "../../chunks/chunk.U53LM7EE.js";
 import "../../chunks/chunk.ZJVOZRT5.js";
-import "../../chunks/chunk.OX3LMJ5T.js";
-import "../../chunks/chunk.KHBQF3ZP.js";
-import "../../chunks/chunk.3M4TJLMO.js";
-import "../../chunks/chunk.ZZGUHY3S.js";
+import "../../chunks/chunk.3SMIMF4W.js";
+import "../../chunks/chunk.IML5XHKU.js";
+import "../../chunks/chunk.QU7M4SPM.js";
+import "../../chunks/chunk.WJWQ3WQA.js";
 import "../../chunks/chunk.WM7HBMMV.js";
-import "../../chunks/chunk.TQCUATGL.js";
+import "../../chunks/chunk.TMQYOMEN.js";
 import "../../chunks/chunk.TYGMNHNO.js";
 import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.WIZDAKJ5.js";
+import "../../chunks/chunk.A5AE7PGK.js";
 import "../../chunks/chunk.JY3EKAVI.js";
 import "../../chunks/chunk.MLXMQIEV.js";
 import "../../chunks/chunk.SEHSDSX2.js";

package/components/context-menu/context-menu.trans.styles.js

@@ -1,7 +1,7 @@
 import {
   context_menu_trans_styles_default,
-  register4 as register
-} from "../../chunks/chunk.TQCUATGL.js";
+  register3 as register
+} from "../../chunks/chunk.TMQYOMEN.js";
 import "../../chunks/chunk.JY3EKAVI.js";
 import "../../chunks/chunk.MLXMQIEV.js";
 import "../../chunks/chunk.SEHSDSX2.js";

package/components/context-menu/index.js

@@ -1,26 +1,26 @@
 import {
   GdsMenuHeading
-} from "../../chunks/chunk.AR3CTTGT.js";
+} from "../../chunks/chunk.7BIJLPQV.js";
 import {
   GdsContextMenu
-} from "../../chunks/chunk.RDVMJXOX.js";
+} from "../../chunks/chunk.PZWVZWJM.js";
 import "../../chunks/chunk.UF6IEONX.js";
-import "../../chunks/chunk.NQWZXYYF.js";
+import "../../chunks/chunk.BV5Z5JDM.js";
 import {
   GdsMenuItem
-} from "../../chunks/chunk.BNN7YRU6.js";
-import "../../chunks/chunk.MIY5GV6X.js";
-import "../../chunks/chunk.27E4EAEK.js";
+} from "../../chunks/chunk.XHVJ5DAO.js";
+import "../../chunks/chunk.67DBEXTS.js";
+import "../../chunks/chunk.U53LM7EE.js";
 import "../../chunks/chunk.ZJVOZRT5.js";
-import "../../chunks/chunk.OX3LMJ5T.js";
-import "../../chunks/chunk.KHBQF3ZP.js";
-import "../../chunks/chunk.3M4TJLMO.js";
-import "../../chunks/chunk.ZZGUHY3S.js";
+import "../../chunks/chunk.3SMIMF4W.js";
+import "../../chunks/chunk.IML5XHKU.js";
+import "../../chunks/chunk.QU7M4SPM.js";
+import "../../chunks/chunk.WJWQ3WQA.js";
 import "../../chunks/chunk.WM7HBMMV.js";
-import "../../chunks/chunk.TQCUATGL.js";
+import "../../chunks/chunk.TMQYOMEN.js";
 import "../../chunks/chunk.TYGMNHNO.js";
 import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.WIZDAKJ5.js";
+import "../../chunks/chunk.A5AE7PGK.js";
 import "../../chunks/chunk.JY3EKAVI.js";
 import "../../chunks/chunk.MLXMQIEV.js";
 import "../../chunks/chunk.SEHSDSX2.js";

package/components/datepicker/datepicker.d.ts

@@ -1,12 +1,12 @@
 import { GdsFormControlElement } from '../form/form-control';
-import '../popover';
-import '../calendar';
-import '../../components/dropdown';
-import './date-part-spinner';
 import '../../components/button';
+import '../../components/dropdown';
+import '../calendar';
 import '../icon/icons/calendar';
 import '../icon/icons/chevron-left';
 import '../icon/icons/chevron-right';
+import '../popover';
+import './date-part-spinner';
 /**
  * @element gds-datepicker
  * A form control that allows the user to select a date.