@sebgroup/green-core 1.69.4 → 1.70.1

package/components/div/div.d.ts

@@ -1,178 +1,2 @@
-import { GdsElement } from '../../gds-element';
-import { GdsColorLevel } from '../../utils/helpers';
-declare const GdsDiv_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeYProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").PaddingProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").PositioningProps) & typeof GdsElement;
-/**
- * @element gds-div
- * @status beta
- *
- * `gds-div` is the base element in the declarative layout system.
- */
-export declare class GdsDiv extends GdsDiv_base {
-    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    /**
-     * Controls the display property.
-     * Supports all valid CSS display values.
-     */
-    display?: string;
-    /**
-     * 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 for `gds-div` is level 2.
-     *
-     */
-    level: GdsColorLevel;
-    /**
-     * Style Expression Property that controls the `color` property.
-     * Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.
-     *
-     * ```html
-     * <gds-div color="primary/0.2"></gds-div>
-     * ```
-     */
-    color?: string;
-    /**
-     * Style Expression Property that controls the `background` property.
-     * Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.
-     *
-     * ```html
-     * <gds-div background="primary/0.2"></gds-div>
-     * ```
-     */
-    background?: string;
-    /**
-     * Style Expression Property that controls the `border` property.
-     * Accepts a string of the same format as the CSS border property.
-     *
-     * ```html
-     * <gds-div border="4xs solid primary/0.2"></gds-div>
-     * ```
-     *
-     * Where the size value accepts space tokens and the color value accepts color tokens and an optional transparency value.
-     */
-    border?: string;
-    /**
-     * Style Expression Property that controls the `border-color` property.
-     * Only accepts color tokens and an optional transparency value, in the format tokenName/transparency.
-     *
-     * ```html
-     * <gds-div border-color="primary/0.2"></gds-div>
-     * ```
-     */
-    'border-color'?: string;
-    /**
-     * Style Expression Property that controls the `border-width` property.
-     * Only accepts space tokens.
-     */
-    'border-width'?: string;
-    /**
-     * Style Expression Property that controls the `border-style` property.
-     * Supports all valid CSS `border-style` values.
-     */
-    'border-style'?: string;
-    /**
-     * Style Expression Property that controls the `border-radius` property.
-     * Only accepts space tokens.
-     */
-    'border-radius'?: string;
-    /**
-     * Style Expression Property for the `box-shadow` property.
-     *
-     * Accepts shadow tokens from the design system.
-     *
-     * `xs`, `s`, `m`, `l`, `xl`
-     */
-    'box-shadow'?: string;
-    /**
-     * Style Expression Property that controls the `opacity` property.
-     * Supports all valid CSS `opacity` values.
-     */
-    opacity?: string;
-    /**
-     * Style Expression Property that controls the `overflow` property.
-     * Supports all valid CSS `overflow` values.
-     */
-    overflow?: string;
-    /**
-     * Style Expression Property that controls the `box-sizing` property.
-     * Supports all valid CSS `box-sizing` values.
-     */
-    'box-sizing'?: string;
-    /**
-     * Style Expression Property that controls the `z-index` property.
-     * Supports all valid CSS `z-index` values.
-     */
-    'z-index'?: string;
-    /**
-     * Style Expression Property that controls the `font-size` property.
-     * Supports all typography size tokens from the design system.
-     */
-    'font-size'?: string;
-    /**
-     * Style Expression Property that controls the `font-weight` property.
-     * Supports all typography weight tokens from the design system.
-     */
-    'font-weight'?: string;
-    /**
-     * Style Expression Property that controls the `text-align` property.
-     * Supports all valid CSS `text-align` values.
-     */
-    'text-align'?: string;
-    /**
-     * Style Expression Property that controls the `text-wrap` property.
-     * Supports all valid CSS `text-wrap` values.
-     */
-    'text-wrap'?: string;
-    /**
-     * Style Expression Property that controls the `overflow-wrap` property.
-     * Supports all valid CSS `overflow-wrap` values.
-     */
-    'overflow-wrap'?: string;
-    /**
-     * Style Expression Property that controls the `gap` property.
-     * Only accepts space tokens.
-     */
-    gap?: string;
-    /**
-     * Style Expression Property that controls the `align-items` property.
-     * Supports all valid CSS `align-items` values.
-     */
-    'align-items'?: string;
-    /**
-     * Style Expression Property that controls the `align-content` property.
-     * Supports all valid CSS `align-content` values.
-     */
-    'align-content'?: string;
-    /**
-     * Style Expression Property that controls the `justify-content` property.
-     * Supports all valid CSS `justify-content` values.
-     */
-    'justify-content'?: string;
-    /**
-     * Style Expression Property that controls the `justify-items` property.
-     * Supports all valid CSS `justify-items` values.
-     */
-    'justify-items'?: string;
-    /**
-     * Style Expression Property that controls the `flex-direction` property.
-     * Supports all valid CSS `flex-direction` values.
-     */
-    'flex-direction'?: string;
-    /**
-     * Style Expression Property that controls the `flex-wrap` property.
-     * Supports all valid CSS `flex-wrap` values.
-     */
-    'flex-wrap'?: string;
-    /**
-     * Style Expression Property that controls the `place-items` property.
-     * Supports all valid CSS `place-items` values.
-     */
-    'place-items'?: string;
-    /**
-     * Style Expression Property that controls the `place-content` property.
-     * Supports all valid CSS `place-content` values.
-     */
-    'place-content'?: string;
-    render(): any;
-}
-export {};
+import { GdsDiv } from './div.component';
+export { GdsDiv };

package/components/div/div.js

@@ -1,15 +1,6 @@
-import {
-  GdsDiv
-} from "../../chunks/chunk.UZJIO4LE.js";
-import "../../chunks/chunk.TWXTKG4B.js";
-import "../../chunks/chunk.76QWARGM.js";
-import "../../chunks/chunk.NUUST5OZ.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
+import "../../chunks/chunk.QTSIPXV3.js";
+import { GdsDiv } from "./div.component";
+GdsDiv.define();
 export {
   GdsDiv
 };

package/components/div/div.style.js

@@ -0,0 +1,21 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const style = css`
+  :host {
+    display: block;
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 0;
+    border-color: var(--gds-color-l2-border-primary);
+  }
+  :host(:focus-visible) {
+    outline-color: color-mix(in srgb, currentcolor, #000 100%);
+    outline-offset: var(--gds-space-3xs);
+    outline-style: solid;
+    outline-width: var(--gds-space-3xs);
+  }
+`;
+var div_style_default = style;
+export {
+  div_style_default as default
+};

package/components/div/index.js

@@ -1,16 +1 @@
-import "../../chunks/chunk.M5C2HLKD.js";
-import {
-  GdsDiv
-} from "../../chunks/chunk.UZJIO4LE.js";
-import "../../chunks/chunk.TWXTKG4B.js";
-import "../../chunks/chunk.76QWARGM.js";
-import "../../chunks/chunk.NUUST5OZ.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
-export {
-  GdsDiv
-};
+export * from "./div";

package/components/divider/divider.component.d.ts

@@ -0,0 +1,68 @@
+import { GdsElement } from '../../gds-element';
+/**
+ * @element gds-divider
+ * @status beta
+ *
+ * The `gds-divider` component is a horizontal rule that separates content in a layout. It is equivalent to the `<hr>` element in HTML, and provides the same semantic meaning.
+ */
+export declare class GdsDivider extends GdsElement {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * The level of the divider 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-divider` is set to `2`.
+     *
+     * @property level
+     *
+     * */
+    level: string;
+    /**
+     * Controls the color property of the divider.
+     * Supports all the color tokens from the design system.
+     *
+     * You can apply color like this:
+     *
+     * ```html
+     * <gds-divider color="primary"></gds-divider>
+     * ```
+     */
+    color?: string;
+    /**
+     * Controls the size property of the divider.
+     * Supports all the space tokens from the design system.
+     *
+     * You can apply size like this:
+     *
+     * ```html
+     * <gds-divider size="2xl"></gds-divider>
+     * ```
+     *
+     * The above example will apply the size style of 2xl.
+     *
+     */
+    size?: string;
+    /**
+     * Controls the opacity property of the divider.
+     * Supports all the opacity tokens from the design system.
+     *
+     * You can apply opacity like this:
+     *
+     * ```html
+     * <gds-divider opacity="0.2"></gds-divider>
+     * ```
+     * The above example will apply the opacity style of base400.
+     *
+     */
+    opacity?: string;
+    /**
+     * Use the role attribute primarily if you only want the divider to be a visual element.
+     *
+     * ```html
+     * <!-- This divider will not be announced as a separator or thematic break -->
+     * <gds-divider role="presentation"></gds-divider>
+     * ```
+     */
+    role: string | null;
+    render(): any;
+}

package/components/divider/divider.component.js

@@ -0,0 +1,49 @@
+import {
+  __decorateClass
+} from "../../chunks/chunk.QTSIPXV3.js";
+import { nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { GdsElement } from "../../gds-element";
+import { tokens } from "../../tokens.style";
+import { styleExpressionProperty } from "../../utils/decorators/style-expression-property";
+import { forColorTokens } from "../../utils/helpers";
+import {
+  gdsCustomElement,
+  html
+} from "../../utils/helpers/custom-element-scoping";
+import DividerCSS from "./divider.style";
+let GdsDivider = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.level = "2";
+    this.role = null;
+  }
+  render() {
+    return html`<hr role=${this.role || nothing} />`;
+  }
+};
+GdsDivider.styles = [tokens, DividerCSS];
+__decorateClass([
+  property()
+], GdsDivider.prototype, "level", 2);
+__decorateClass([
+  styleExpressionProperty(forColorTokens("border"))
+], GdsDivider.prototype, "color", 2);
+__decorateClass([
+  styleExpressionProperty({
+    property: "--_size",
+    valueTemplate: (v) => `var(--gds-space-${v})`
+  })
+], GdsDivider.prototype, "size", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDivider.prototype, "opacity", 2);
+__decorateClass([
+  property()
+], GdsDivider.prototype, "role", 2);
+GdsDivider = __decorateClass([
+  gdsCustomElement("gds-divider")
+], GdsDivider);
+export {
+  GdsDivider
+};

package/components/divider/divider.d.ts

@@ -1,68 +1,2 @@
-import { GdsElement } from '../../gds-element';
-/**
- * @element gds-divider
- * @status beta
- *
- * The `gds-divider` component is a horizontal rule that separates content in a layout. It is equivalent to the `<hr>` element in HTML, and provides the same semantic meaning.
- */
-export declare class GdsDivider extends GdsElement {
-    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    /**
-     * The level of the divider 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-divider` is set to `2`.
-     *
-     * @property level
-     *
-     * */
-    level: string;
-    /**
-     * Controls the color property of the divider.
-     * Supports all the color tokens from the design system.
-     *
-     * You can apply color like this:
-     *
-     * ```html
-     * <gds-divider color="primary"></gds-divider>
-     * ```
-     */
-    color?: string;
-    /**
-     * Controls the size property of the divider.
-     * Supports all the space tokens from the design system.
-     *
-     * You can apply size like this:
-     *
-     * ```html
-     * <gds-divider size="2xl"></gds-divider>
-     * ```
-     *
-     * The above example will apply the size style of 2xl.
-     *
-     */
-    size?: string;
-    /**
-     * Controls the opacity property of the divider.
-     * Supports all the opacity tokens from the design system.
-     *
-     * You can apply opacity like this:
-     *
-     * ```html
-     * <gds-divider opacity="0.2"></gds-divider>
-     * ```
-     * The above example will apply the opacity style of base400.
-     *
-     */
-    opacity?: string;
-    /**
-     * Use the role attribute primarily if you only want the divider to be a visual element.
-     *
-     * ```html
-     * <!-- This divider will not be announced as a separator or thematic break -->
-     * <gds-divider role="presentation"></gds-divider>
-     * ```
-     */
-    role: string | null;
-    render(): any;
-}
+import { GdsDivider } from './divider.component';
+export { GdsDivider };

package/components/divider/divider.js

@@ -1,14 +1,6 @@
-import {
-  GdsDivider
-} from "../../chunks/chunk.IO6Z47AF.js";
-import "../../chunks/chunk.76QWARGM.js";
-import "../../chunks/chunk.NUUST5OZ.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
+import "../../chunks/chunk.QTSIPXV3.js";
+import { GdsDivider } from "./divider.component";
+GdsDivider.define();
 export {
   GdsDivider
 };

package/components/divider/divider.style.js

@@ -0,0 +1,22 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const style = css`
+  :host {
+    display: block;
+  }
+
+  hr {
+    border-radius: 200px;
+    background: currentColor;
+    font-size: 0;
+    border: 0;
+    height: 1px;
+    width: 100%;
+    margin-top: calc((var(--_size, 0) / 2) - (1px / 2));
+    margin-bottom: calc((var(--_size, 0) / 2) - (1px / 2));
+  }
+`;
+var divider_style_default = style;
+export {
+  divider_style_default as default
+};

package/components/divider/index.js

@@ -1,14 +1 @@
-import {
-  GdsDivider
-} from "../../chunks/chunk.IO6Z47AF.js";
-import "../../chunks/chunk.76QWARGM.js";
-import "../../chunks/chunk.NUUST5OZ.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
-export {
-  GdsDivider
-};
+export * from "./divider";

package/components/dropdown/dropdown.component.d.ts

@@ -0,0 +1,145 @@
+import { GdsFormControlElement } from '../form/form-control';
+import type { GdsOption, OptionsContainer } from '../../primitives/listbox/option.component';
+export * from '../../primitives/listbox/option.component';
+/**
+ * @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.
+ *
+ * @status beta
+ *
+ * @slot - Options for the dropdown. Accepts `gds-option` and `gds-menu-heading` elements.
+ * @slot trigger - Custom content for the trigger button can be assigned through this slot.
+ * @slot supporting-text - A supporting text that will be displayed below the label and above the input field.
+ * @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.
+ * @slot message - ***(deprecated - use `errorMessage` property instead)*** Error message to show below the input field whem there is a validation error.
+ * @slot sub-label - ***(deprecated - use `supporting-text` slot instead)*** Renders between the label and the trigger button.
+ *
+ * @event change - Fired when the value of the dropdown is changed through user interaction (not when value prop is set programatically).
+ * @event input - Fired when the value of the dropdown is changed through user interaction.
+ * @event gds-ui-state - Fired when the dropdown is opened or closed by the user. Can be cancelled to prevent the dropdown from opening or closing.
+ * @event gds-filter-input - Fired when the user types in the search field. The event is cancellable, and the consumer is expected to handle filtering and updating the options list if the event is cancelled.
+ */
+export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<ValueT | ValueT[]> implements OptionsContainer {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    get type(): string;
+    /**
+     * The supporting text displayed between the label and the field itself.
+     */
+    supportingText: string;
+    /**
+     * Sets the open state of the dropdown.
+     */
+    open: boolean;
+    /**
+     * Whether the dropdown should be searchable.
+     */
+    searchable: boolean;
+    /**
+     * Wheter the dropdown should support multiple selections.
+     * When set to true, the dropdown will render a checkbox next to each option.
+     * The value of the dropdown will be an array of the selected values.
+     */
+    multiple: boolean;
+    /**
+     * Whether the dropdown should be rendered as a combobox.
+     * When set to true, the dropdown will render an input field instead of a button.
+     * The value of the dropdown will be a string representing the selected value.
+     */
+    combobox: boolean;
+    /**
+     * Delegate function for comparing option values.
+     * By default the option values are compared using strict equality.
+     * If you want to compare objects by field values, you can provide
+     * a custom compare function here. The function should return true
+     * if the values are considered equal.
+     *
+     * Example:
+     * ```ts
+     * dropdown.compareWith = (a, b) => a.id === b.id
+     * ```
+     */
+    compareWith: (a: ValueT, b: ValueT) => boolean;
+    /**
+     * Delegate function for customizing the search filtering.
+     * By default, the search filter will just check if the option label
+     * contains the search string using [String.includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes).
+     *
+     * This property allows you to provide a custom filter function to use instead.
+     *
+     * For example, to filter on value instead of label:
+     * ```ts
+     * dropdown.searchFilter = (query, option) =>
+     *    option.value.toLowerCase().includes(query.toLowerCase())
+     * ```
+     */
+    searchFilter: (q: string, o: GdsOption) => boolean;
+    /**
+     * Whether the popover should sync its width to the trigger button. When this is
+     * set to `true`, the popover will always have the same width as the trigger button.
+     *
+     * By default, line-breaks will be applied to the option content if it is wider than
+     * the popover width. If you use this option, make sure to verify that your options
+     * are still readable and apply appropriate custom layout or truncation if neccecary.
+     */
+    syncPopoverWidth: boolean;
+    /**
+     * Maximum height of the dropdown list.
+     */
+    maxHeight: number;
+    /**
+     * 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;
+    /**
+     * Whether to disable the mobile styles.
+     */
+    disableMobileStyles: boolean;
+    /**
+     * Get the options of the dropdown.
+     */
+    get options(): GdsOption[];
+    /**
+     * Return the first option with a isPlaceholder attribute.
+     * If no placeholder is found, this will be undefined.
+     */
+    get placeholder(): GdsOption | undefined;
+    /**
+     * Returns the display value as a string.
+     * If the dropdown is in multiple mode, this will be a comma separated list of the selected values.
+     */
+    get displayValue(): string;
+    /**
+     * Moves focus to this element.
+     */
+    focus(): void;
+    /**
+     * A reference to the field element. This does not refer to the trigger button element itself,
+     * but the wrapper that makes up the visual field.
+     * Intended for use in integration tests.
+     */
+    test_getFieldElement(): Element | null | undefined;
+    private _elTriggerBtn;
+    private _elListbox;
+    private _elSearchInput;
+    connectedCallback(): void;
+    render(): any;
+    protected _getValidityAnchor(): HTMLElement;
+    /**
+     * Update value assignment and request update when the light DOM changes.
+     */
+    private _handleLightDOMChange;
+    /**
+     * Called whenever the `value` property changes
+     */
+    private _handleValueChange;
+    /**
+     * Emits `gds-ui-state`event and does some other house-keeping when the open state changes.
+     */
+    private _handleOpenChange;
+}