@sebgroup/green-core 1.25.0 → 1.27.0

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

@@ -0,0 +1,152 @@
+import { GdsElement } from '../../../gds-element';
+/**
+ * The `gds-container` is a custom element that provides a flexible container system.
+ * It can be used to create a container with different styles and configurations.
+ * The container can be customized with different properties like padding, gap, display, position, and background.
+ * It can be used in combination with other elements like `gds-grid`, `gds-card`, `gds-img`, `gds-text` etc.
+ *
+ * @element gds-container
+ * @status beta
+ *
+ */
+export declare class GdsContainer extends GdsElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Controls the display property of the container.
+     * Supports all valid CSS display values.
+     */
+    display?: string;
+    /**
+     * Controls the color property of the container.
+     * Supports all the color tokens from the design system.
+     *
+     * ```html
+     * <gds-container color="primary"></gds-container>
+     * ```
+     *
+     * The above example will apply the color style of `primary`.
+     */
+    color?: string;
+    /**
+     * Controls the background property of the card.
+     * Supports all the color tokens from the design system.
+     *
+     * Adding transparency to the background color:
+     *
+     * ```html
+     * <gds-container background="primary/0.2"></gds-container>
+     * ```
+     *
+     * The above example will apply the background style of `primary` with `20%` transparency.
+     */
+    background?: string;
+    /**
+     * Controls the opacity property of the container.
+     *
+     * You can apply opacity like this:
+     *
+     * ```html
+     * <gds-container opacity="0.2"></gds-container>
+     * ```
+     */
+    opacity?: string;
+    /**
+     * Controls the padding using shorthand method for the flex.
+     * Supports all valid token values.
+     *
+     * You can apply padding in each side like this:
+     *
+     * ```html
+     * <gds-flex padding="xl"></gds-flex>
+     * ```
+     *
+     * `xl` in this case will be applied to all breakpoints and sides.
+     *
+     * Padding also support breakpoint syntax like this:
+     *
+     * ```html
+     * <gds-flex padding="xs{s} m{m} l{xl}"></gds-flex>
+     * ```
+     *
+     * The above example will apply the padding style of `xs` for `small` devices, `m` for `medium` devices, and `xl` for large devices.
+     *
+     */
+    padding?: string;
+    /**
+     * Controls the margin of the text.
+     * Supports all the default margin values.
+     */
+    margin?: string;
+    /**
+     * Controls the position property of the flex.
+     * Supports all valid CSS position values.
+     */
+    position?: string;
+    /**
+     * Controls the inset property of the flex.
+     * Supports all valid CSS inset values.
+     */
+    inset?: string;
+    /**
+     * Controls the overflow property of the flex.
+     * 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 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 also support breakpoint syntax like this:
+     *
+     * ```html
+     * <gds-flex column="s{1 / 2} m{2 / 3} l{3 / 4}"></gds-flex>
+     * ```
+     */
+    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 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 also support breakpoint syntax like this:
+     *
+     * ```html
+     * <gds-flex row="s{1 / 2} m{2 / 3} l{3 / 4}"></gds-flex>
+     * ```
+     */
+    row?: string;
+    /**
+     * Controls the height property of the flex.
+     * Supports all valid CSS height values.
+     *
+     * @property height
+     */
+    height?: string;
+    /**
+     * Controls the width property of the flex.
+     * Supports all valid CSS height values.
+     */
+    width?: string;
+    /**
+     * Controls the z-index property of the flex.
+     * Supports all valid CSS z-index values.
+     */
+    stack?: string;
+    render(): any;
+}

package/components/layout/container/container.js

@@ -0,0 +1,15 @@
+import {
+  GdsContainer
+} from "../../../chunks/chunk.YA6B2HIO.js";
+import "../../../chunks/chunk.6BQCB4IT.js";
+import "../../../chunks/chunk.ADPMTWTS.js";
+import "../../../chunks/chunk.U4I76VTQ.js";
+import "../../../chunks/chunk.ZQ4D5K7J.js";
+import "../../../chunks/chunk.W7CV3QYI.js";
+import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.YO24ZYAD.js";
+import "../../../chunks/chunk.VOYMQ322.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsContainer
+};

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

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

package/components/layout/container/container.style.css.js

@@ -0,0 +1,7 @@
+import {
+  container_style_css_default
+} from "../../../chunks/chunk.6BQCB4IT.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  container_style_css_default as default
+};

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

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

package/components/layout/container/index.js

@@ -0,0 +1,16 @@
+import "../../../chunks/chunk.OJK4O3JQ.js";
+import {
+  GdsContainer
+} from "../../../chunks/chunk.YA6B2HIO.js";
+import "../../../chunks/chunk.6BQCB4IT.js";
+import "../../../chunks/chunk.ADPMTWTS.js";
+import "../../../chunks/chunk.U4I76VTQ.js";
+import "../../../chunks/chunk.ZQ4D5K7J.js";
+import "../../../chunks/chunk.W7CV3QYI.js";
+import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.YO24ZYAD.js";
+import "../../../chunks/chunk.VOYMQ322.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsContainer
+};

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

@@ -0,0 +1,49 @@
+import { GdsContainer } from '../container';
+/**
+ * The `gds-flex` component is a flex element that can be used to wrap other components and control the layout of its children.
+ *
+ * It can be used in combination with other elements like `gds-grid`, `gds-card`, `gds-img`, `gds-text` etc.
+ *
+ * @element gds-flex
+ * @status beta
+ *
+ */
+export declare class GdsFlex extends GdsContainer {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Controls the gap property of the flex.
+     * Supports all space tokens as value.
+     *
+     * You can apply gap in each column and row like this:
+     * ```html
+     * <gds-flex gap="m s"></gds-flex>
+     * ```
+     *
+     * The `gap` can be applied on `flex` using shorthand like gap="m s"
+     *
+     * Gap also support breakpoint syntax like this:
+     * ```html
+     * <gds-flex gap="xs{s} m{m} l{xl}"></gds-flex>
+     * ```
+     * The above example will apply the gap style of `xs` for `small` devices, `m` for `medium` devices, and `xl` for large devices.
+     *
+     */
+    gap?: string;
+    /**
+     * Controls the align-items property of the flex.
+     * Supports all valid CSS align-items values.
+     */
+    align?: string;
+    /**
+     * Controls the justify-content property of the flex.
+     * Supports all valid CSS justify-content values.
+     */
+    justify?: string;
+    /**
+     * Controls the flex-direction property of the flex.
+     * Supports all valid CSS flex-direction values.
+     */
+    direction?: string;
+    connectedCallback(): void;
+    render(): any;
+}

package/components/layout/flex/flex.js

@@ -0,0 +1,18 @@
+import {
+  GdsFlex
+} from "../../../chunks/chunk.G6UMC27A.js";
+import "../../../chunks/chunk.H4ZSHOXG.js";
+import "../../../chunks/chunk.OJK4O3JQ.js";
+import "../../../chunks/chunk.YA6B2HIO.js";
+import "../../../chunks/chunk.6BQCB4IT.js";
+import "../../../chunks/chunk.ADPMTWTS.js";
+import "../../../chunks/chunk.U4I76VTQ.js";
+import "../../../chunks/chunk.ZQ4D5K7J.js";
+import "../../../chunks/chunk.W7CV3QYI.js";
+import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.YO24ZYAD.js";
+import "../../../chunks/chunk.VOYMQ322.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsFlex
+};

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

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

package/components/layout/flex/flex.style.css.js

@@ -0,0 +1,7 @@
+import {
+  flex_style_css_default
+} from "../../../chunks/chunk.H4ZSHOXG.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  flex_style_css_default as default
+};

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

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

package/components/layout/flex/index.js

@@ -0,0 +1,18 @@
+import {
+  GdsFlex
+} from "../../../chunks/chunk.G6UMC27A.js";
+import "../../../chunks/chunk.H4ZSHOXG.js";
+import "../../../chunks/chunk.OJK4O3JQ.js";
+import "../../../chunks/chunk.YA6B2HIO.js";
+import "../../../chunks/chunk.6BQCB4IT.js";
+import "../../../chunks/chunk.ADPMTWTS.js";
+import "../../../chunks/chunk.U4I76VTQ.js";
+import "../../../chunks/chunk.ZQ4D5K7J.js";
+import "../../../chunks/chunk.W7CV3QYI.js";
+import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.YO24ZYAD.js";
+import "../../../chunks/chunk.VOYMQ322.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsFlex
+};

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

@@ -0,0 +1,48 @@
+import { GdsElement } from '../../../gds-element';
+/**
+ * The `gds-grid` is a custom element that provides a flexible grid system. It uses CSS grid layout to arrange its child elements into columns. This component is highly customizable and responsive, allowing you to specify the number of `columns`, `gap`, `padding`, and fluidity for different devices with automated column size based on the content using the `auto-columns` attribute.
+ *
+ * @element gds-grid
+ * @status beta
+ *
+ */
+export declare class GdsGrid extends GdsElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * The number of columns for the grid. This can be a single value that applies to all breakpoints, or a string of three space-separated tokens in the format "l:desktop m:tablet s:mobile", each token specifying the number of columns for that device type respectively.
+     * @example
+     * ```html
+     * <gds-grid columns="2"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid columns="l{8} m{4} s{2}"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    columns?: string;
+    /**
+     * Defines the gap size between grid items. Accepts a single value for all breakpoints or a "l:desktop m:tablet s:mobile" format. Sizes can be 'none', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'.
+     * @example
+     * ```html
+     * <gds-grid gap="m"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid gap="l{m} m{s} s{xs}"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    gap?: string;
+    /**
+     * Defines the padding size around the grid. Accepts a style expression
+     * @example
+     * ```html
+     * <gds-grid padding="m"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid padding="l{m} m{s} s{xs}"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    padding?: string;
+    /**
+     * Defines the minimum column width in pixels. Accepts a single value for all breakpoints or a "l:desktop m:tablet s:mobile" format. If set, the grid adjusts column size based on content and available width, even without other attributes.
+     * @example
+     * ```html
+     * <gds-grid auto-columns="200"></gds-grid> <!-- applies to all breakpoints -->
+     * <gds-grid auto-columns="l{200} m{100} s{80}"></gds-grid> <!-- different values for each breakpoint -->
+     * ```
+     */
+    autoColumns?: string;
+    render(): any;
+}

package/components/layout/grid/grid.js

@@ -0,0 +1,15 @@
+import {
+  GdsGrid
+} from "../../../chunks/chunk.I73VV2VK.js";
+import "../../../chunks/chunk.KYBMS7FP.js";
+import "../../../chunks/chunk.ADPMTWTS.js";
+import "../../../chunks/chunk.U4I76VTQ.js";
+import "../../../chunks/chunk.ZQ4D5K7J.js";
+import "../../../chunks/chunk.W7CV3QYI.js";
+import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.YO24ZYAD.js";
+import "../../../chunks/chunk.VOYMQ322.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsGrid
+};

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

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

package/components/layout/grid/grid.style.css.js

@@ -0,0 +1,7 @@
+import {
+  grid_style_css_default
+} from "../../../chunks/chunk.KYBMS7FP.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  grid_style_css_default as default
+};

package/components/layout/grid/index.js

@@ -0,0 +1,15 @@
+import {
+  GdsGrid
+} from "../../../chunks/chunk.I73VV2VK.js";
+import "../../../chunks/chunk.KYBMS7FP.js";
+import "../../../chunks/chunk.ADPMTWTS.js";
+import "../../../chunks/chunk.U4I76VTQ.js";
+import "../../../chunks/chunk.ZQ4D5K7J.js";
+import "../../../chunks/chunk.W7CV3QYI.js";
+import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.YO24ZYAD.js";
+import "../../../chunks/chunk.VOYMQ322.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsGrid
+};

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

@@ -0,0 +1,137 @@
+import { GdsElement } from '../../../gds-element';
+/**
+ * `gds-img` is a custom element that provides a flexible image system.
+ * It can be used to create an image with different styles and configurations.
+ *
+ * The image can be customized with different properties like ratio, position, inset, width, height, opacity, fit, and radius.
+ *
+ * @element gds-img
+ * @status beta
+ *
+ */
+export declare class GdsImg extends GdsElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Controls the aspect ratio of the image.
+     * Supports all common aspect ratios like 16/9, 4/3, 1/1, etc.
+     *
+     * You can apply the aspect ratio like this:
+     * ```html
+     * <gds-img 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>
+     * ```
+     *
+     * 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;
+    /**
+     * Controls the `object-position` of the img.
+     * Supports all common CSS values.
+     * @property position
+     */
+    position?: string;
+    /**
+     * Controls the inset property of the container.
+     * Supports all valid CSS inset values.
+     *
+     * @example
+     * You can apply the inset like this:
+     * ```html
+     * <gds-img inset="0"></gds-img>
+     * ```
+     *
+     * You can also apply different inset values for different screen sizes like this:
+     * ```html
+     * <gds-img inset="l{0} m{10px} s{20px}"></gds-img>
+     * ```
+     *
+     * @property inset
+     */
+    inset?: string;
+    /**
+     * Controls the width property of the image.
+     *
+     * @property width
+     */
+    width?: string;
+    /**
+     * Controls the height property of the image.
+     *
+     *  @property height
+     */
+    height?: string;
+    /**
+     * Controls the opacity property of the image.
+     *
+     * You can apply opacity like this:
+     * ```html
+     * <gds-img opacity="0.2"></gds-img>
+     * ```
+     * The above example will apply the opacity style of 0.2.
+     * This is useful when you want to apply a transparent effect to the image when having a darkened background to increase the readability of the text.
+     *
+     * @property opacity
+     */
+    opacity?: string;
+    /**
+     * Controls the object-fit property of the image.
+     *
+     * You can apply fit like this:
+     * ```html
+     * <gds-img fit="cover"></gds-img>
+     * ```
+     *
+     *  The above example will apply the object-fit style of cover.
+     *
+     * @property fit
+     */
+    fit?: string;
+    /**
+     * The image source URL.
+     *
+     * @property src
+     */
+    src?: string;
+    /**
+     * The image alt text.
+     *
+     * @property alt
+     */
+    alt?: string;
+    /**
+     * Controls the border-radius property of the image.
+     * Supports all the size tokens from the design system.
+     *
+     * You can apply radius in each corner like this:
+     * ```html
+     * <gds-img 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>
+     * ```
+     *
+     * Each corner can have a different radius value and also different values for different breakpoints.
+     * The radius styles are predefined in the tokens file and will be applied automatically based on the token value.
+     *
+     * @example
+     * ```html
+     * <gds-img radius="m"></gds-img>
+     * <gds-img radius="s{0 0 xs} m{0 xs 0 xs} l{s}" >
+     *    Specific breakpoints and sides
+     * </gds-img>
+     * ```
+     *
+     * @property radius
+     */
+    radius?: string;
+    render(): any;
+}

package/components/media/img/img.js

@@ -0,0 +1,15 @@
+import {
+  GdsImg
+} from "../../../chunks/chunk.MAYA4MYU.js";
+import "../../../chunks/chunk.NKSKWGNM.js";
+import "../../../chunks/chunk.ADPMTWTS.js";
+import "../../../chunks/chunk.U4I76VTQ.js";
+import "../../../chunks/chunk.ZQ4D5K7J.js";
+import "../../../chunks/chunk.W7CV3QYI.js";
+import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.YO24ZYAD.js";
+import "../../../chunks/chunk.VOYMQ322.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsImg
+};

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

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

package/components/media/img/img.style.css.js

@@ -0,0 +1,7 @@
+import {
+  img_style_css_default
+} from "../../../chunks/chunk.NKSKWGNM.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  img_style_css_default as default
+};

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

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

package/components/media/img/index.js

@@ -0,0 +1,15 @@
+import {
+  GdsImg
+} from "../../../chunks/chunk.MAYA4MYU.js";
+import "../../../chunks/chunk.NKSKWGNM.js";
+import "../../../chunks/chunk.ADPMTWTS.js";
+import "../../../chunks/chunk.U4I76VTQ.js";
+import "../../../chunks/chunk.ZQ4D5K7J.js";
+import "../../../chunks/chunk.W7CV3QYI.js";
+import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.YO24ZYAD.js";
+import "../../../chunks/chunk.VOYMQ322.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsImg
+};

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

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

package/components/media/video/index.js

@@ -0,0 +1,15 @@
+import {
+  GdsVideo
+} from "../../../chunks/chunk.SCFFYD37.js";
+import "../../../chunks/chunk.SXGACXKX.js";
+import "../../../chunks/chunk.ADPMTWTS.js";
+import "../../../chunks/chunk.U4I76VTQ.js";
+import "../../../chunks/chunk.ZQ4D5K7J.js";
+import "../../../chunks/chunk.W7CV3QYI.js";
+import "../../../chunks/chunk.2WO4NHJ2.js";
+import "../../../chunks/chunk.YO24ZYAD.js";
+import "../../../chunks/chunk.VOYMQ322.js";
+import "../../../chunks/chunk.5VURDMKE.js";
+export {
+  GdsVideo
+};