@sebgroup/green-core 1.42.0 → 1.43.1

package/components/layout/mask/mask.js

@@ -0,0 +1,18 @@
+import {
+  GdsMask
+} from "../../../chunks/chunk.ALUL3Z4L.js";
+import "../../../chunks/chunk.A23HHQDO.js";
+import "../../../chunks/chunk.I5ZVUUCK.js";
+import "../../../chunks/chunk.OJK4O3JQ.js";
+import "../../../chunks/chunk.CKHSQ3NZ.js";
+import "../../../chunks/chunk.XKACXVCM.js";
+import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.RC3RN452.js";
+import "../../../chunks/chunk.ZQ4D5K7J.js";
+import "../../../chunks/chunk.W7CV3QYI.js";
+import "../../../chunks/chunk.YO24ZYAD.js";
+import "../../../chunks/chunk.VOYMQ322.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsMask
+};

package/components/media/img/img.d.ts

@@ -17,20 +17,20 @@ export declare class GdsImg extends GdsElement {
      *
      * You can apply the aspect ratio like this:
      * ```html
-     * <gds-img ratio="16/9"></gds-img>
+     * <gds-img aspect-ratio="16/9"></gds-img>
      * ```
      * The above example will apply the aspect ratio of 16/9.
      *
      * You can also apply different aspect ratios for different screen sizes like this:
      * ```html
-     * <gds-img ratio="l{16/9} m{4/3} s{1/1}"></gds-img>
+     * <gds-img aspect-ratio="l{16/9} m{4/3} s{1/1}"></gds-img>
      * ```
      *
      * The above example will apply the aspect ratio of 16/9 for large screens, 4/3 for medium screens, and 1/1 for small screens.
      *
      * @property ratio
      */
-    ratio?: string;
+    'aspect-ratio'?: string;
     /**
      * Controls the `object-position` of the img.
      * Supports all common CSS values.
@@ -85,14 +85,14 @@ export declare class GdsImg extends GdsElement {
      *
      * You can apply fit like this:
      * ```html
-     * <gds-img fit="cover"></gds-img>
+     * <gds-img object-fit="cover"></gds-img>
      * ```
      *
      *  The above example will apply the object-fit style of cover.
      *
      * @property fit
      */
-    fit?: string;
+    'object-fit'?: string;
     /**
      * The image source URL.
      *
@@ -111,12 +111,12 @@ export declare class GdsImg extends GdsElement {
      *
      * You can apply radius in each corner like this:
      * ```html
-     * <gds-img radius="none none m m" ></gds-img>
+     * <gds-img border-radius="none none m m" ></gds-img>
      * ```
      *
      * Also for different breakpoints like this:
      * ```html
-     * <gds-img radius="s{xs} m{xs} l{s}"></gds-img>
+     * <gds-img border-radius="s{xs} m{xs} l{s}"></gds-img>
      * ```
      *
      * Each corner can have a different radius value and also different values for different breakpoints.
@@ -124,14 +124,14 @@ export declare class GdsImg extends GdsElement {
      *
      * @example
      * ```html
-     * <gds-img radius="m"></gds-img>
-     * <gds-img radius="s{0 0 xs} m{0 xs 0 xs} l{s}" >
+     * <gds-img border-radius="m"></gds-img>
+     * <gds-img border-radius="s{0 0 xs} m{0 xs 0 xs} l{s}" >
      *    Specific breakpoints and sides
      * </gds-img>
      * ```
      *
      * @property radius
      */
-    radius?: string;
+    'border-radius'?: string;
     render(): any;
 }

package/components/media/img/img.js

@@ -1,10 +1,9 @@
 import {
   GdsImg
-} from "../../../chunks/chunk.G3YUUPNZ.js";
-import "../../../chunks/chunk.NKSKWGNM.js";
-import "../../../chunks/chunk.U6OZ3R3W.js";
-import "../../../chunks/chunk.3DNQAQ3I.js";
+} from "../../../chunks/chunk.LSSS5CKS.js";
+import "../../../chunks/chunk.XKACXVCM.js";
 import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.RC3RN452.js";
 import "../../../chunks/chunk.ZQ4D5K7J.js";
 import "../../../chunks/chunk.W7CV3QYI.js";
 import "../../../chunks/chunk.YO24ZYAD.js";

package/components/media/img/index.js

@@ -1,10 +1,9 @@
 import {
   GdsImg
-} from "../../../chunks/chunk.G3YUUPNZ.js";
-import "../../../chunks/chunk.NKSKWGNM.js";
-import "../../../chunks/chunk.U6OZ3R3W.js";
-import "../../../chunks/chunk.3DNQAQ3I.js";
+} from "../../../chunks/chunk.LSSS5CKS.js";
+import "../../../chunks/chunk.XKACXVCM.js";
 import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.RC3RN452.js";
 import "../../../chunks/chunk.ZQ4D5K7J.js";
 import "../../../chunks/chunk.W7CV3QYI.js";
 import "../../../chunks/chunk.YO24ZYAD.js";

package/components/media/video/index.js

@@ -1,10 +1,9 @@
 import {
   GdsVideo
-} from "../../../chunks/chunk.MBOWSQFX.js";
-import "../../../chunks/chunk.SXGACXKX.js";
-import "../../../chunks/chunk.U6OZ3R3W.js";
-import "../../../chunks/chunk.3DNQAQ3I.js";
+} from "../../../chunks/chunk.A7Q7YZEN.js";
+import "../../../chunks/chunk.XKACXVCM.js";
 import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.RC3RN452.js";
 import "../../../chunks/chunk.ZQ4D5K7J.js";
 import "../../../chunks/chunk.W7CV3QYI.js";
 import "../../../chunks/chunk.YO24ZYAD.js";

package/components/media/video/video.d.ts

@@ -16,7 +16,7 @@ export declare class GdsVideo extends GdsElement {
      * You can apply the aspect ratio like this:
      *
      * ```html
-     * <gds-video ratio="16/9"></gds-video>
+     * <gds-video aspect-ratio="16/9"></gds-video>
      * ```
      *
      * The above example will apply the aspect ratio of 16/9.
@@ -24,20 +24,20 @@ export declare class GdsVideo extends GdsElement {
      * You can also apply different aspect ratios for different screen sizes like this:
      *
      * ```html
-     * <gds-video ratio="l{16/9} m{4/3} s{1/1}"></gds-video>
+     * <gds-video aspect-ratio="l{16/9} m{4/3} s{1/1}"></gds-video>
      * ```
      *
      *  The above example will apply the aspect ratio of 16/9 for large screens, 4/3 for medium screens, and 1/1 for small screens.
      *
      * @property ratio
      */
-    ratio?: string;
+    'aspect-ratio'?: string;
     /**
      * Controls the `object-position` of the video.
      * Supports all common CSS values.
      * @property position
      */
-    position?: string;
+    'object-position'?: string;
     /**
      * Controls the inset property of the container.
      * Supports all valid CSS inset values.
@@ -86,21 +86,21 @@ export declare class GdsVideo extends GdsElement {
      * You can apply fit like this:
      *
      * ```html
-     * <gds-img fit="cover"></gds-img>
+     * <gds-img object-fit="cover"></gds-img>
      * ```
      *
      *  The above example will apply the object-fit style of cover.
      *
      * @property fit
      */
-    fit?: string;
+    'object-fit'?: string;
     /**
      * Controls the pointer-events property of the video.
      * Supports all valid CSS pointer-events values.
      *
      * @property events
      */
-    events?: string;
+    'pointer-events'?: string;
     /**
      * Controls the border-radius property of the video.
      * Supports all the size tokens from the design system.
@@ -109,19 +109,19 @@ export declare class GdsVideo extends GdsElement {
      * You can apply radius in each corner like this:
      *
      * ```html
-     * <gds-container radius="none none m m" ></gds-container>
+     * <gds-container border-radius="none none m m" ></gds-container>
      * ```
      *
      * Also for different breakpoints like this:
      *
      * ```html
-     * <gds-container radius="s{none none xs} m{none xs none xs} l{s}" ></gds-container>
+     * <gds-container border-radius="s{none none xs} m{none xs none xs} l{s}" ></gds-container>
      * ```
      *
      * Each corner can have a different radius value and also different values for different breakpoints.
      * @property radius
      */
-    radius?: string;
+    'border-radius'?: string;
     src?: string;
     poster?: string;
     muted?: boolean;

package/components/media/video/video.js

@@ -1,10 +1,9 @@
 import {
   GdsVideo
-} from "../../../chunks/chunk.MBOWSQFX.js";
-import "../../../chunks/chunk.SXGACXKX.js";
-import "../../../chunks/chunk.U6OZ3R3W.js";
-import "../../../chunks/chunk.3DNQAQ3I.js";
+} from "../../../chunks/chunk.A7Q7YZEN.js";
+import "../../../chunks/chunk.XKACXVCM.js";
 import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.RC3RN452.js";
 import "../../../chunks/chunk.ZQ4D5K7J.js";
 import "../../../chunks/chunk.W7CV3QYI.js";
 import "../../../chunks/chunk.YO24ZYAD.js";

package/components/menu-button/index.js

@@ -1,14 +1,14 @@
 import {
-  MenuButton
-} from "../../chunks/chunk.27FXJC7Z.js";
+  GdsMenuButton
+} from "../../chunks/chunk.Y55XQFFO.js";
 import "../../chunks/chunk.7TCXY7BP.js";
 import "../../chunks/chunk.KBYQYDL3.js";
-import "../../chunks/chunk.3DNQAQ3I.js";
+import "../../chunks/chunk.RC3RN452.js";
 import "../../chunks/chunk.ZQ4D5K7J.js";
 import "../../chunks/chunk.W7CV3QYI.js";
 import "../../chunks/chunk.YO24ZYAD.js";
 import "../../chunks/chunk.VOYMQ322.js";
 import "../../chunks/chunk.5VURDMKE.js";
 export {
-  MenuButton
+  GdsMenuButton
 };

package/components/menu-button/menu-button.d.ts

@@ -11,7 +11,7 @@ import { GdsElement } from '../../gds-element';
  *
  * @csspart main-slot - The main slot of the button, between the lead and trail slots.
  */
-export declare class MenuButton extends GdsElement {
+export declare class GdsMenuButton extends GdsElement {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     static shadowRootOptions: ShadowRootInit;

package/components/menu-button/menu-button.js

@@ -1,14 +1,14 @@
 import {
-  MenuButton
-} from "../../chunks/chunk.27FXJC7Z.js";
+  GdsMenuButton
+} from "../../chunks/chunk.Y55XQFFO.js";
 import "../../chunks/chunk.7TCXY7BP.js";
 import "../../chunks/chunk.KBYQYDL3.js";
-import "../../chunks/chunk.3DNQAQ3I.js";
+import "../../chunks/chunk.RC3RN452.js";
 import "../../chunks/chunk.ZQ4D5K7J.js";
 import "../../chunks/chunk.W7CV3QYI.js";
 import "../../chunks/chunk.YO24ZYAD.js";
 import "../../chunks/chunk.VOYMQ322.js";
 import "../../chunks/chunk.5VURDMKE.js";
 export {
-  MenuButton
+  GdsMenuButton
 };

package/components/segmented-control/index.js

@@ -1,15 +1,15 @@
 import {
   GdsSegmentedControl
-} from "../../chunks/chunk.RHDKSFLQ.js";
+} from "../../chunks/chunk.N74HN5IK.js";
 import "../../chunks/chunk.TSDZQZBY.js";
-import "../../chunks/chunk.XF5K6ZIH.js";
+import "../../chunks/chunk.GLIXAC4R.js";
 import "../../chunks/chunk.VHN4JEZC.js";
 import "../../chunks/chunk.PZ3JKDIQ.js";
 import "../../chunks/chunk.Q6BGQYZP.js";
 import "../../chunks/chunk.IGJXZGV4.js";
 import "../../chunks/chunk.3XCSDEVC.js";
-import "../../chunks/chunk.3DNQAQ3I.js";
 import "../../chunks/chunk.2WO4NHJ2.js";
+import "../../chunks/chunk.RC3RN452.js";
 import "../../chunks/chunk.ZQ4D5K7J.js";
 import "../../chunks/chunk.W7CV3QYI.js";
 import "../../chunks/chunk.YO24ZYAD.js";

package/components/segmented-control/segment/index.js

@@ -1,9 +1,9 @@
 import "../../../chunks/chunk.TSDZQZBY.js";
 import {
   GdsSegment
-} from "../../../chunks/chunk.XF5K6ZIH.js";
+} from "../../../chunks/chunk.GLIXAC4R.js";
 import "../../../chunks/chunk.3XCSDEVC.js";
-import "../../../chunks/chunk.3DNQAQ3I.js";
+import "../../../chunks/chunk.RC3RN452.js";
 import "../../../chunks/chunk.ZQ4D5K7J.js";
 import "../../../chunks/chunk.W7CV3QYI.js";
 import "../../../chunks/chunk.YO24ZYAD.js";

package/components/segmented-control/segment/segment.js

@@ -1,8 +1,8 @@
 import {
   GdsSegment
-} from "../../../chunks/chunk.XF5K6ZIH.js";
+} from "../../../chunks/chunk.GLIXAC4R.js";
 import "../../../chunks/chunk.3XCSDEVC.js";
-import "../../../chunks/chunk.3DNQAQ3I.js";
+import "../../../chunks/chunk.RC3RN452.js";
 import "../../../chunks/chunk.ZQ4D5K7J.js";
 import "../../../chunks/chunk.W7CV3QYI.js";
 import "../../../chunks/chunk.YO24ZYAD.js";

package/components/segmented-control/segmented-control.js

@@ -1,15 +1,15 @@
 import {
   GdsSegmentedControl
-} from "../../chunks/chunk.RHDKSFLQ.js";
+} from "../../chunks/chunk.N74HN5IK.js";
 import "../../chunks/chunk.TSDZQZBY.js";
-import "../../chunks/chunk.XF5K6ZIH.js";
+import "../../chunks/chunk.GLIXAC4R.js";
 import "../../chunks/chunk.VHN4JEZC.js";
 import "../../chunks/chunk.PZ3JKDIQ.js";
 import "../../chunks/chunk.Q6BGQYZP.js";
 import "../../chunks/chunk.IGJXZGV4.js";
 import "../../chunks/chunk.3XCSDEVC.js";
-import "../../chunks/chunk.3DNQAQ3I.js";
 import "../../chunks/chunk.2WO4NHJ2.js";
+import "../../chunks/chunk.RC3RN452.js";
 import "../../chunks/chunk.ZQ4D5K7J.js";
 import "../../chunks/chunk.W7CV3QYI.js";
 import "../../chunks/chunk.YO24ZYAD.js";

package/components/textarea/index.d.ts

@@ -0,0 +1 @@
+export * from './textarea';

package/components/textarea/index.js

@@ -0,0 +1,37 @@
+import {
+  GdsTextarea
+} from "../../chunks/chunk.MWWZHWMO.js";
+import "../../chunks/chunk.N2KGHIQK.js";
+import "../../chunks/chunk.A23HHQDO.js";
+import "../../chunks/chunk.I5ZVUUCK.js";
+import "../../chunks/chunk.DCVDALVX.js";
+import "../../chunks/chunk.AKNDGE2O.js";
+import "../../chunks/chunk.OJK4O3JQ.js";
+import "../../chunks/chunk.CKHSQ3NZ.js";
+import "../../chunks/chunk.LRGDEZXT.js";
+import "../../chunks/chunk.BPGOHQLS.js";
+import "../../chunks/chunk.VPZ2NC2L.js";
+import "../../chunks/chunk.7TCXY7BP.js";
+import "../../chunks/chunk.FQDJDWFN.js";
+import "../../chunks/chunk.IGJXZGV4.js";
+import "../../chunks/chunk.CK2UGCPG.js";
+import "../../chunks/chunk.PWTQJELS.js";
+import "../../chunks/chunk.XKACXVCM.js";
+import "../../chunks/chunk.JGTSJ4J6.js";
+import "../../chunks/chunk.SFRZOLA5.js";
+import "../../chunks/chunk.TX64TTBN.js";
+import "../../chunks/chunk.VB7JSOFJ.js";
+import "../../chunks/chunk.YUFO2JLT.js";
+import "../../chunks/chunk.KBYQYDL3.js";
+import "../../chunks/chunk.WM7HBMMV.js";
+import "../../chunks/chunk.3XCSDEVC.js";
+import "../../chunks/chunk.2WO4NHJ2.js";
+import "../../chunks/chunk.RC3RN452.js";
+import "../../chunks/chunk.ZQ4D5K7J.js";
+import "../../chunks/chunk.W7CV3QYI.js";
+import "../../chunks/chunk.YO24ZYAD.js";
+import "../../chunks/chunk.VOYMQ322.js";
+import "../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsTextarea
+};

package/components/textarea/textarea.d.ts

@@ -0,0 +1,91 @@
+import { GdsFormControlElement } from '../form/form-control';
+import '../layout/flex';
+import '../icon/icons/cross-small';
+import '../icon/icons/circle-info';
+import '../icon/icons/triangle-exclamation';
+import '../layout/flex';
+import '../layout/container';
+import '../layout/card';
+import '../content/text';
+import '../badge';
+import '../button';
+/**
+ * @summary A custom input element that can be used in forms.
+ * @status beta
+ *
+ * @element gds-input
+ *.
+ * @slot lead - Accepts `gds-icon-[ICON_NAME]`. Use this to place an icon in the start of the field.
+ * @slot trail - Accepts `gds-badge`. Use this to place a badge in the field, for displaying currency for example.
+ * @slot extended-supporting-text - A longer supporting text can be placed here. It will be
+ *       displayed in a panel when the user clicks the info button.
+ */
+export declare class GdsTextarea extends GdsFormControlElement<string> {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    value: string;
+    /**
+     * The label displayed above the field
+     */
+    label: string;
+    /**
+     * Rows of the textarea
+     */
+    rows: number;
+    private lines;
+    private isDragging;
+    private lastMouseY;
+    /**
+     * The supporting text displayed between the label and the field itself
+     */
+    supportingText: string;
+    /**
+     * Whether the supporting text should be displayed or not.
+     */
+    showExtendedSupportingText: boolean;
+    /**
+     * If the input is Disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the field should be clearable or not. Clearable fields will display a clear button when
+     * the field has a value.
+     */
+    clearable: boolean;
+    /**
+     * Whether the field should be resizeable or not. If set to `false`, the field will not be resizeable.
+     *
+     * When `auto` (default), the field will disaplay a resize handle and will be resizeable in the vertical direction.
+     *
+     * The textarea is resizeable based on the `rows` attribute and the content of the textarea by default.
+     *
+     * @property resize
+     *
+     */
+    resize: string;
+    /**
+     * The maximum number of characters allowed in the field.
+     */
+    maxlength: number;
+    /**
+     * The variant of the input field. The default variant displays a label, supporting text, and
+     * extended supporting text. The floating-label variant only displays the field itself and the
+     * supporting text below.
+     *
+     * The floating-label variant should only be used in specific cases, for example when the input field
+     * is placed inside a table cell or in a space-constrained layout.
+     *
+     * A typical form should use the default variant.
+     */
+    variant: 'default' | 'floating-label';
+    private elTextareaAsync;
+    private elTextarea;
+    private elExtendedSupportingTextSlot;
+    trailSlotOccupied: boolean;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): any;
+    protected _getValidityAnchor(): HTMLTextAreaElement;
+    private _setAutoHeight;
+}

package/components/textarea/textarea.js

@@ -0,0 +1,37 @@
+import {
+  GdsTextarea
+} from "../../chunks/chunk.MWWZHWMO.js";
+import "../../chunks/chunk.N2KGHIQK.js";
+import "../../chunks/chunk.A23HHQDO.js";
+import "../../chunks/chunk.I5ZVUUCK.js";
+import "../../chunks/chunk.DCVDALVX.js";
+import "../../chunks/chunk.AKNDGE2O.js";
+import "../../chunks/chunk.OJK4O3JQ.js";
+import "../../chunks/chunk.CKHSQ3NZ.js";
+import "../../chunks/chunk.LRGDEZXT.js";
+import "../../chunks/chunk.BPGOHQLS.js";
+import "../../chunks/chunk.VPZ2NC2L.js";
+import "../../chunks/chunk.7TCXY7BP.js";
+import "../../chunks/chunk.FQDJDWFN.js";
+import "../../chunks/chunk.IGJXZGV4.js";
+import "../../chunks/chunk.CK2UGCPG.js";
+import "../../chunks/chunk.PWTQJELS.js";
+import "../../chunks/chunk.XKACXVCM.js";
+import "../../chunks/chunk.JGTSJ4J6.js";
+import "../../chunks/chunk.SFRZOLA5.js";
+import "../../chunks/chunk.TX64TTBN.js";
+import "../../chunks/chunk.VB7JSOFJ.js";
+import "../../chunks/chunk.YUFO2JLT.js";
+import "../../chunks/chunk.KBYQYDL3.js";
+import "../../chunks/chunk.WM7HBMMV.js";
+import "../../chunks/chunk.3XCSDEVC.js";
+import "../../chunks/chunk.2WO4NHJ2.js";
+import "../../chunks/chunk.RC3RN452.js";
+import "../../chunks/chunk.ZQ4D5K7J.js";
+import "../../chunks/chunk.W7CV3QYI.js";
+import "../../chunks/chunk.YO24ZYAD.js";
+import "../../chunks/chunk.VOYMQ322.js";
+import "../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsTextarea
+};

package/components/textarea/textarea.styles.d.ts

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

package/components/theme/index.js

@@ -1,10 +1,10 @@
 import {
   GdsTheme
-} from "../../chunks/chunk.EJUBEZ5B.js";
+} from "../../chunks/chunk.IGNF6GRC.js";
 import "../../chunks/chunk.WM7HBMMV.js";
 import "../../chunks/chunk.3XCSDEVC.js";
-import "../../chunks/chunk.3DNQAQ3I.js";
 import "../../chunks/chunk.2WO4NHJ2.js";
+import "../../chunks/chunk.RC3RN452.js";
 import "../../chunks/chunk.ZQ4D5K7J.js";
 import "../../chunks/chunk.W7CV3QYI.js";
 import "../../chunks/chunk.YO24ZYAD.js";

package/components/theme/theme.js

@@ -1,10 +1,10 @@
 import {
   GdsTheme
-} from "../../chunks/chunk.EJUBEZ5B.js";
+} from "../../chunks/chunk.IGNF6GRC.js";
 import "../../chunks/chunk.WM7HBMMV.js";
 import "../../chunks/chunk.3XCSDEVC.js";
-import "../../chunks/chunk.3DNQAQ3I.js";
 import "../../chunks/chunk.2WO4NHJ2.js";
+import "../../chunks/chunk.RC3RN452.js";
 import "../../chunks/chunk.ZQ4D5K7J.js";
 import "../../chunks/chunk.W7CV3QYI.js";
 import "../../chunks/chunk.YO24ZYAD.js";