@sebgroup/green-core 1.42.0 → 1.43.1

package/components/layout/card/card.d.ts

@@ -11,7 +11,7 @@ import { GdsContainer } from '../container';
  *
  */
 export declare class GdsCard extends GdsContainer {
-    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    static styles: import("lit").CSSResult[][];
     /**
      * Controls the box-shadow property of the card.
      *
@@ -30,95 +30,5 @@ export declare class GdsCard extends GdsContainer {
      *
      */
     shadow?: string;
-    /**
-     * Controls the border property of the card.
-     * Supports all tokens from the design system.
-     *
-     * @property border
-     *
-     * Can be specified for each side using the size tokens like this:
-     *
-     * ```html
-     * <gds-container border="4xs 0 0 0"></gds-container>
-     * ```
-     *
-     * Also for different breakpoints like this:
-     *
-     * ```html
-     * <gds-container border="s{2xs} m{3xs} l{4xs}"></gds-container>
-     * ```
-     *
-     * When you want to apply the border in all breakpoints and sides you can use the following:
-     *
-     * ```html
-     * <gds-container border="4xs"></gds-container>
-     * ```
-     */
-    border?: string;
-    /**
-     * Controls the border-radius property of the container.
-     * Supports all the size tokens from the design system.
-     *
-     * You can apply radius in each corner like this:
-     *
-     * ```html
-     * <gds-container 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>
-     * ```
-     *
-     * Each corner can have a different radius value and also different values for different breakpoints.
-     *
-     *  * These are the available values you can use to define Border Radius
-     *
-     * `0, 4XS, 3XS, 2XS, XS, S, M, L, XL, 2XL, 3XL, 4XL, 5XL, 6XL, 7XL, 8XL, MAX`
-     *
-     */
-    radius?: string;
-    /**
-     * Controls the backdrop-filter property of the container.
-     * When you want to apply a backdrop blur filter to the container you can use this property.
-     *
-     * ```html
-     * <gds-container filter="20px"></gds-container>
-     * ```
-     *
-     * The above example will apply a backdrop blur filter of `20px`.
-     *
-     *  The filter also support breakpoint syntax like this:
-     *
-     * ```html
-     * <gds-container filter="s{20px} m{40px} l{60px}"></gds-container>
-     * ```
-     *
-     * The above example will apply the filter style of `20px` for `small` devices, `40px` for `medium` devices, and `60px` for large devices.
-     */
-    filter?: string;
-    /**
-     * Controls the mask-image property of the container.
-     * Adds a predefined style of mask to the container.
-     *
-     * @property mask
-     *
-     * @example
-     *
-     * ```html
-     * <gds-container mask="top"></gds-container>
-     * ```
-     *
-     * The above example will apply the mask style of `top` with `40%` transparency.
-     * The mask can be applied in different positions like `top`, `bottom`, `left`, `right`.
-     *
-     * It can also be combined with the color like this:
-     * ```html
-     * <gds-container mask="top/l1-background-tertiary/0.4"></gds-container>
-     * ```
-     *
-     */
-    mask?: string;
     render(): any;
 }

package/components/layout/card/card.js

@@ -1,11 +1,11 @@
 import {
   GdsCard
-} from "../../../chunks/chunk.OCU74EXO.js";
+} from "../../../chunks/chunk.AKNDGE2O.js";
 import "../../../chunks/chunk.OJK4O3JQ.js";
-import "../../../chunks/chunk.VC72CYU3.js";
-import "../../../chunks/chunk.U6OZ3R3W.js";
-import "../../../chunks/chunk.3DNQAQ3I.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";

package/components/layout/card/index.js

@@ -1,12 +1,12 @@
 import "../../../chunks/chunk.DCVDALVX.js";
 import {
   GdsCard
-} from "../../../chunks/chunk.OCU74EXO.js";
+} from "../../../chunks/chunk.AKNDGE2O.js";
 import "../../../chunks/chunk.OJK4O3JQ.js";
-import "../../../chunks/chunk.VC72CYU3.js";
-import "../../../chunks/chunk.U6OZ3R3W.js";
-import "../../../chunks/chunk.3DNQAQ3I.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";

package/components/layout/container/container.d.ts

@@ -16,6 +16,25 @@ export declare class GdsContainer extends GdsElement {
      * 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.
+     *
+     * Default value for `gds-container` is set to `2`.
+     *
+     * @property level
+     *
+     * */
+    level: string;
+    /**
+     * Controls the `place-items` property of the container.
+     * Supports all valid CSS `place-items` values.
+     */
+    'place-items'?: string;
+    /**
+     * Controls the `place-content` property of the container.
+     * Supports all valid CSS `place-content` values.
+     */
+    'place-content'?: string;
     /**
      * Controls the color property of the container.
      * Supports all the color tokens from the design system.
@@ -40,6 +59,57 @@ export declare class GdsContainer extends GdsElement {
      * The above example will apply the background style of `primary` with `20%` transparency.
      */
     background?: string;
+    /**
+     * Controls the border property of the card.
+     * Supports all tokens from the design system.
+     *
+     * @property border
+     *
+     * Can be specified for each side using the size tokens like this:
+     *
+     * ```html
+     * <gds-container border="4xs 0 0 0"></gds-container>
+     * ```
+     *
+     * Also for different breakpoints like this:
+     *
+     * ```html
+     * <gds-container border="s{2xs} m{3xs} l{4xs}"></gds-container>
+     * ```
+     *
+     * When you want to apply the border in all breakpoints and sides you can use the following:
+     *
+     * ```html
+     * <gds-container border="4xs"></gds-container>
+     * ```
+     */
+    border?: string;
+    'border-color'?: string;
+    'border-width'?: string;
+    /**
+     * Controls the border-radius property of the container.
+     * Supports all the size tokens from the design system.
+     *
+     * You can apply radius in each corner like this:
+     *
+     * ```html
+     * <gds-container border-radius="none none m m" ></gds-container>
+     * ```
+     *
+     * Also for different breakpoints like this:
+     *
+     * ```html
+     * <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.
+     *
+     *  * These are the available values you can use to define Border Radius
+     *
+     * `0, 4XS, 3XS, 2XS, XS, S, M, L, XL, 2XL, 3XL, 4XL, 5XL, 6XL, 7XL, 8XL, MAX`
+     *
+     */
+    'border-radius'?: string;
     /**
      * Controls the opacity property of the container.
      *
@@ -72,6 +142,8 @@ export declare class GdsContainer extends GdsElement {
      *
      */
     padding?: string;
+    'padding-inline'?: string;
+    'padding-block'?: string;
     /**
      * Controls the margin of the text.
      * Supports all the default margin values.
@@ -98,19 +170,19 @@ export declare class GdsContainer extends GdsElement {
      * Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
      *
      * ```html
-     * <gds-flex column="2 / -1"></gds-flex>
+     * <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 column="1 / 2"
+     * 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 column="s{1 / 2} m{2 / 3} l{3 / 4}"></gds-flex>
+     * <gds-flex grid-column="s{1 / 2} m{2 / 3} l{3 / 4}"></gds-flex>
      * ```
      */
-    column?: string;
+    'grid-column'?: string;
     /**
      * Controls the grid-row property of the flex.
      * Supports all valid CSS grid-row values.
@@ -118,19 +190,19 @@ export declare class GdsContainer extends GdsElement {
      * Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
      *
      * ```html
-     * <gds-flex row="2 / -1"></gds-flex>
+     * <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 row="1 / 2"
+     * 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 row="s{1 / 2} m{2 / 3} l{3 / 4}"></gds-flex>
+     * <gds-flex grid-row="s{1 / 2} m{2 / 3} l{3 / 4}"></gds-flex>
      * ```
      */
-    row?: string;
+    'grid-row'?: string;
     /**
      * Controls the height property of the flex.
      * Supports all valid CSS height values.
@@ -138,20 +210,165 @@ export declare class GdsContainer extends GdsElement {
      * @property height
      */
     height?: string;
+    /**
+     * Controls the `max-height` property of the flex.
+     * Supports all valid CSS `max-height` values.
+     *
+     * @property max-height
+     */
+    'max-height'?: string;
+    /**
+     * Controls the `min-height` property of the flex.
+     * Supports all valid CSS `min-height` values.
+     *
+     * @property min-height
+     */
+    'min-height'?: string;
+    /**
+     * Controls the `block-size` property of the flex.
+     * Supports only tokens.
+     *
+     * @property block-size
+     */
+    'block-size'?: string;
+    /**
+     * Controls the `min-block-size` property of the flex.
+     * Supports only tokens.
+     *
+     * @property min-block-size
+     */
+    'min-block-size'?: string;
     /**
      * Controls the width property of the flex.
      * Supports all valid CSS height values.
+     *
+     *  @property width
      */
     width?: string;
+    /**
+     * Controls the `max-width` property of the flex.
+     * Supports all valid CSS `max-width` values.
+     *
+     * @property max-width
+     */
+    'max-width'?: string;
+    /**
+     * Controls the `min-width` property of the flex.
+     * Supports all valid CSS `min-width` values.
+     *
+     * @property min-width
+     */
+    'min-width'?: string;
+    /**
+     * Controls the `inline-size` property of the flex.
+     * Supports only token
+     *
+     * @property inline-size
+     */
+    'inline-size'?: string;
+    /**
+     * Controls the cursor property of the flex.
+     * Supports all valid CSS cursor values.
+     */
+    cursor?: string;
+    /**
+     * Controls the `pointer-events` property of the flex.
+     * Supports all valid CSS `pointer-events` values.
+     *
+     * @property pointer-events
+     */
+    'pointer-events'?: string;
+    /**
+     * Controls the `user-select` property of the flex.
+     * Supports all valid CSS `user-select` values.
+     *
+     * @property user-select
+     */
+    'user-select'?: string;
     /**
      * Controls the z-index property of the flex.
      * Supports all valid CSS z-index values.
      */
-    stack?: string;
+    'z-index'?: string;
     /**
-     * Controls the box-sizing property of the container.
-     * Supports all valid CSS box-sizing values.
+     * Controls the `transform` property of the flex.
+     * Supports all valid CSS `transform` values.
+     *
+     * @property transform
+     */
+    transform?: string;
+    /**
+     * Controls the `transform-style` property of the flex.
+     * Supports all valid CSS `transform-style` values.
+     *
+     * @property transform-style
+     */
+    'transform-style'?: string;
+    /**
+     * Controls the `transition` property of the flex.
+     * Supports all valid CSS `transition` values.
+     *
+     * @property transition
+     */
+    transition?: string;
+    /**
+     * Controls the `transition-behavior` property of the flex.
+     * Supports all valid CSS `transition-behavior` values.
+     *
+     * @property transition-behavior
+     */
+    'transition-behavior'?: string;
+    /**
+     * Controls the `animation` property of the flex.
+     * Supports all valid CSS `animation` values.
+     *
+     * @property animation
+     */
+    animation?: string;
+    /**
+     * Controls the size of the text.
+     * Supports all typography size tokens from the design system.
+     *
+     * You can apply size like this:
+     * ```html
+     * <gds-container font-size="body-m"></gds-container>
+     * ```
+     *
+     * These are the available values you can use to define size:
+     *
+     * `heading-xl`,
+     * `heading-l`,
+     * `heading-m`,
+     * `heading-s`,
+     * `heading-xs`,
+     * `heading-2xs`,
+     * `detail-m`,
+     * `detail-s`,
+     * `detail-xs`,
+     * `body-l`,
+     * `body-m`,
+     * `body-s`,
+     * `display-2xl`,
+     * `display-xl`,
+     * `display-l`,
+     * `display-m`,
+     * `display-s `,
+     * `preamble-2xl`,
+     * `preamble-xl`,
+     * `preamble-l`,
+     * `preamble-m`,
+     * `preamble-s`,
+     * `preamble-xs`,
+     *
+     * @property 'font-size'
+     */
+    'font-size'?: string;
+    /**
+     * Controls the `font-weight` of the text.
+     * Supports all the weigh tokens.
+     *
+     * @property weight
      */
-    box?: string;
+    'font-weight'?: string;
     render(): any;
 }

package/components/layout/container/container.js

@@ -1,9 +1,9 @@
 import {
   GdsContainer
-} from "../../../chunks/chunk.VC72CYU3.js";
-import "../../../chunks/chunk.U6OZ3R3W.js";
-import "../../../chunks/chunk.3DNQAQ3I.js";
+} from "../../../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";

package/components/layout/container/index.js

@@ -1,10 +1,10 @@
 import "../../../chunks/chunk.OJK4O3JQ.js";
 import {
   GdsContainer
-} from "../../../chunks/chunk.VC72CYU3.js";
-import "../../../chunks/chunk.U6OZ3R3W.js";
-import "../../../chunks/chunk.3DNQAQ3I.js";
+} from "../../../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";

package/components/layout/flex/flex.d.ts

@@ -30,20 +30,50 @@ export declare class GdsFlex extends GdsContainer {
      */
     gap?: string;
     /**
-     * Controls the align-items property of the flex.
+     * Controls the `flex` property of the flex.
+     * Supports all valid CSS flex property values.
+     */
+    flex?: string;
+    /**
+     * Controls the `align-self` property of the flex.
+     * Supports all valid CSS align-self values.
+     */
+    'align-self'?: string;
+    /**
+     * Controls the `align-items` property of the flex.
      * Supports all valid CSS align-items values.
      */
-    align?: string;
+    'align-items'?: string;
+    /**
+     * Controls the `align-content` property of the flex.
+     * Supports all valid CSS align-content values.
+     */
+    'align-content'?: string;
     /**
-     * Controls the justify-content property of the flex.
+     * Controls the `justify-content` property of the flex.
      * Supports all valid CSS justify-content values.
      */
-    justify?: string;
+    'justify-content'?: string;
+    /**
+     * Controls the `place-content` property of the flex.
+     * Supports all valid CSS place-content values.
+     */
+    'place-content'?: string;
+    /**
+     * Controls the `justify-items` property of the flex.
+     * Supports all valid CSS justify-items values.
+     */
+    'justify-items'?: string;
+    /**
+     * Controls the `justify-self` property of the flex.
+     * Supports all valid CSS justify-self values.
+     */
+    'justify-self'?: string;
     /**
      * Controls the flex-direction property of the flex.
      * Supports all valid CSS flex-direction values.
      */
-    direction?: string;
+    'flex-direction'?: string;
     connectedCallback(): void;
     render(): any;
 }

package/components/layout/flex/flex.js

@@ -1,11 +1,11 @@
 import {
   GdsFlex
-} from "../../../chunks/chunk.GHYMUUPE.js";
+} from "../../../chunks/chunk.I5ZVUUCK.js";
 import "../../../chunks/chunk.OJK4O3JQ.js";
-import "../../../chunks/chunk.VC72CYU3.js";
-import "../../../chunks/chunk.U6OZ3R3W.js";
-import "../../../chunks/chunk.3DNQAQ3I.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";

package/components/layout/flex/index.js

@@ -1,12 +1,12 @@
 import "../../../chunks/chunk.A23HHQDO.js";
 import {
   GdsFlex
-} from "../../../chunks/chunk.GHYMUUPE.js";
+} from "../../../chunks/chunk.I5ZVUUCK.js";
 import "../../../chunks/chunk.OJK4O3JQ.js";
-import "../../../chunks/chunk.VC72CYU3.js";
-import "../../../chunks/chunk.U6OZ3R3W.js";
-import "../../../chunks/chunk.3DNQAQ3I.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";

package/components/layout/grid/grid.d.ts

@@ -34,7 +34,7 @@ export declare class GdsGrid extends GdsContainer {
      * <gds-grid auto-columns="l{200} m{100} s{80}"></gds-grid> <!-- different values for each breakpoint -->
      * ```
      */
-    autoColumns?: string;
+    'auto-columns'?: string;
     constructor();
     render(): any;
 }

package/components/layout/grid/grid.js

@@ -1,11 +1,11 @@
 import {
   GdsGrid
-} from "../../../chunks/chunk.JZZIQFBB.js";
+} from "../../../chunks/chunk.G5N266EN.js";
 import "../../../chunks/chunk.OJK4O3JQ.js";
-import "../../../chunks/chunk.VC72CYU3.js";
-import "../../../chunks/chunk.U6OZ3R3W.js";
-import "../../../chunks/chunk.3DNQAQ3I.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";

package/components/layout/grid/index.js

@@ -1,11 +1,11 @@
 import {
   GdsGrid
-} from "../../../chunks/chunk.JZZIQFBB.js";
+} from "../../../chunks/chunk.G5N266EN.js";
 import "../../../chunks/chunk.OJK4O3JQ.js";
-import "../../../chunks/chunk.VC72CYU3.js";
-import "../../../chunks/chunk.U6OZ3R3W.js";
-import "../../../chunks/chunk.3DNQAQ3I.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";

package/components/layout/mask/index.d.ts

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

package/components/layout/mask/index.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/layout/mask/mask.d.ts

@@ -0,0 +1,30 @@
+import { GdsFlex } from '../flex';
+export declare class GdsMask extends GdsFlex {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    'mask-image'?: string;
+    'mask-size': string;
+    'mask-repeat': string;
+    'mask-position': string;
+    'background-color'?: string;
+    /**
+     * Controls the backdrop-filter property of the container.
+     * When you want to apply a backdrop blur filter to the container you can use this property.
+     *
+     * ```html
+     * <gds-mask backdrop-filter="20px"></gds-mask>
+     * ```
+     *
+     * The above example will apply a backdrop blur filter of `20px`.
+     *
+     *  The filter also support breakpoint syntax like this:
+     *
+     * ```html
+     * <gds-mask backdrop-filter="s{20px} m{40px} l{60px}"></gds-mask>
+     * ```
+     *
+     * The above example will apply the filter style of `20px` for `small` devices, `40px` for `medium` devices, and `60px` for large devices.
+     */
+    'backdrop-filter'?: string;
+    constructor();
+    render(): import("lit-html").TemplateResult;
+}