@sebgroup/green-core 2.8.2 → 2.9.0

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

@@ -1,10 +1,11 @@
 import { GdsElement } from '../../gds-element';
+declare const GdsDivider_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & typeof GdsElement;
 /**
  * @element gds-divider
  *
  * 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 {
+export declare class GdsDivider extends GdsDivider_base {
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     /**
      * Controls the color property of the divider.
@@ -55,3 +56,4 @@ export declare class GdsDivider extends GdsElement {
     role: string | null;
     render(): any;
 }
+export {};

package/components/divider/divider.component.js

@@ -11,8 +11,9 @@ import {
   gdsCustomElement,
   html
 } from "../../utils/helpers/custom-element-scoping.js";
+import { withSizeXProps } from "../../utils/mixins/declarative-layout-mixins.js";
 import DividerStyles from "./divider.styles.js";
-let GdsDivider = class extends GdsElement {
+let GdsDivider = class extends withSizeXProps(GdsElement) {
   constructor() {
     super(...arguments);
     this.role = null;

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

@@ -1,24 +1,7 @@
 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.
- *
- *
- * @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 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` property 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.
- * @event gds-input-cleared - Fired when the user clears the input using the clear button.
- */
-export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<ValueT | ValueT[]> implements OptionsContainer {
+declare class Dropdown extends GdsFormControlElement implements OptionsContainer {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     get type(): string;
@@ -62,7 +45,7 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
      * dropdown.compareWith = (a, b) => a.id === b.id
      * ```
      */
-    compareWith: (a: ValueT, b: ValueT) => boolean;
+    compareWith: (a: unknown, b: unknown) => boolean;
     /**
      * Delegate function for customizing the search filtering.
      * By default, the search filter will just check if the option label
@@ -155,3 +138,24 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
      */
     private _handleOpenChange;
 }
+declare const GdsDropdown_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & typeof Dropdown;
+/**
+ * @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.
+ *
+ * The type parameter `ValueT` is deprecated and no longer used.
+ *
+ * @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 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` property 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.
+ * @event gds-input-cleared - Fired when the user clears the input using the clear button.
+ */
+export declare class GdsDropdown<ValueT = any> extends GdsDropdown_base {
+}

package/components/dropdown/dropdown.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _optionElements, _GdsDropdown_instances, shouldShowFooter_fn, _renderCombobox, _renderTriggerButton, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleClearButton, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, handleSelectionChange_fn, _dispatchInputEvent, _dispatchChangeEvent, registerAutoCloseListener_fn, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
+var _optionElements, _Dropdown_instances, shouldShowFooter_fn, _renderCombobox, _renderTriggerButton, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleClearButton, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, handleSelectionChange_fn, _dispatchInputEvent, _dispatchChangeEvent, registerAutoCloseListener_fn, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
 import { localized, msg, str } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query, queryAsync } from "lit/decorators.js";
@@ -22,6 +22,11 @@ import formControlHostStyle from "../../shared-styles/form-control-host.style.js
 import { tokens } from "../../tokens.style.js";
 import { observeLightDOM } from "../../utils/decorators/observe-light-dom.js";
 import { watch } from "../../utils/decorators/watch.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "../../utils/mixins/declarative-layout-mixins.js";
 import { GdsFormControlElement } from "../form/form-control.js";
 import { IconCheckmark } from "../icon/icons/checkmark.component.js";
 import { IconChevronBottom } from "../icon/icons/chevron-bottom.component.js";
@@ -29,10 +34,10 @@ import { IconCrossSmall } from "../icon/icons/cross-small.component.js";
 import { GdsPopover } from "../popover/popover.component.js";
 import DropdownStyles from "./dropdown.styles.js";
 export * from "../../primitives/listbox/option.component.js";
-let GdsDropdown = class extends GdsFormControlElement {
+let Dropdown = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _GdsDropdown_instances);
+    __privateAdd(this, _Dropdown_instances);
     this.supportingText = "";
     this.open = false;
     this.searchable = false;
@@ -380,7 +385,7 @@ let GdsDropdown = class extends GdsFormControlElement {
           id="listbox"
           .multiple="${ifDefined(this.multiple)}"
           .compareWith="${this.compareWith}"
-          @change="${__privateMethod(this, _GdsDropdown_instances, handleSelectionChange_fn)}"
+          @change="${__privateMethod(this, _Dropdown_instances, handleSelectionChange_fn)}"
           @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
           @keydown=${__privateGet(this, _handleListboxKeyDown)}
         >
@@ -389,7 +394,7 @@ let GdsDropdown = class extends GdsFormControlElement {
       </gds-popover>
 
       ${when(
-      __privateMethod(this, _GdsDropdown_instances, shouldShowFooter_fn).call(this),
+      __privateMethod(this, _Dropdown_instances, shouldShowFooter_fn).call(this),
       () => html`
           <gds-form-control-footer
             class="size-${this.size}"
@@ -420,9 +425,7 @@ let GdsDropdown = class extends GdsFormControlElement {
     if (this.value === void 0) {
       if (this.placeholder) this.value = this.placeholder.value;
       else this.value = this.options[0]?.value;
-    } else if (!this.combobox && !this.placeholder && this.options.find(
-      (o) => this.compareWith(o.value, this.value)
-    ) === void 0) {
+    } else if (!this.combobox && !this.placeholder && this.options.find((o) => this.compareWith(o.value, this.value)) === void 0) {
       this.options[0] && (this.options[0].selected = true);
       this.value = this.options[0]?.value;
     }
@@ -438,9 +441,9 @@ let GdsDropdown = class extends GdsFormControlElement {
   _handleOpenChange() {
     const open = this.open;
     this.options.forEach((o) => o.hidden = !open);
-    if (open) __privateMethod(this, _GdsDropdown_instances, registerAutoCloseListener_fn).call(this);
+    if (open) __privateMethod(this, _Dropdown_instances, registerAutoCloseListener_fn).call(this);
     else {
-      __privateMethod(this, _GdsDropdown_instances, unregisterAutoCloseListener_fn).call(this);
+      __privateMethod(this, _Dropdown_instances, unregisterAutoCloseListener_fn).call(this);
       this._elSearchInput && (this._elSearchInput.value = "");
     }
     const selectedOption = this.options.find((option) => option.selected);
@@ -453,7 +456,7 @@ let GdsDropdown = class extends GdsFormControlElement {
   }
 };
 _optionElements = new WeakMap();
-_GdsDropdown_instances = new WeakSet();
+_Dropdown_instances = new WeakSet();
 shouldShowFooter_fn = function() {
   return !this.plain;
 };
@@ -495,65 +498,65 @@ unregisterAutoCloseListener_fn = function() {
 };
 _blurCloseListener = new WeakMap();
 _tabCloseListener = new WeakMap();
-GdsDropdown.styles = [tokens, formControlHostStyle, DropdownStyles];
+Dropdown.styles = [tokens, formControlHostStyle, DropdownStyles];
 __decorateClass([
   property({ attribute: "supporting-text" })
-], GdsDropdown.prototype, "supportingText", 2);
+], Dropdown.prototype, "supportingText", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], GdsDropdown.prototype, "open", 2);
+], Dropdown.prototype, "open", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], GdsDropdown.prototype, "searchable", 2);
+], Dropdown.prototype, "searchable", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], GdsDropdown.prototype, "multiple", 2);
+], Dropdown.prototype, "multiple", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], GdsDropdown.prototype, "clearable", 2);
+], Dropdown.prototype, "clearable", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], GdsDropdown.prototype, "combobox", 2);
+], Dropdown.prototype, "combobox", 2);
 __decorateClass([
   property()
-], GdsDropdown.prototype, "compareWith", 2);
+], Dropdown.prototype, "compareWith", 2);
 __decorateClass([
   property()
-], GdsDropdown.prototype, "searchFilter", 2);
+], Dropdown.prototype, "searchFilter", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "sync-popover-width" })
-], GdsDropdown.prototype, "syncPopoverWidth", 2);
+], Dropdown.prototype, "syncPopoverWidth", 2);
 __decorateClass([
   property({ type: Number, attribute: "max-height" })
-], GdsDropdown.prototype, "maxHeight", 2);
+], Dropdown.prototype, "maxHeight", 2);
 __decorateClass([
   property({ reflect: true })
-], GdsDropdown.prototype, "size", 2);
+], Dropdown.prototype, "size", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "hide-label" })
-], GdsDropdown.prototype, "hideLabel", 2);
+], Dropdown.prototype, "hideLabel", 2);
 __decorateClass([
   property({ type: Boolean })
-], GdsDropdown.prototype, "plain", 2);
+], Dropdown.prototype, "plain", 2);
 __decorateClass([
   property({ type: Boolean })
-], GdsDropdown.prototype, "disableMobileStyles", 2);
+], Dropdown.prototype, "disableMobileStyles", 2);
 __decorateClass([
   property({
     attribute: "show-extended-supporting-text",
     type: Boolean,
     reflect: true
   })
-], GdsDropdown.prototype, "showExtendedSupportingText", 2);
+], Dropdown.prototype, "showExtendedSupportingText", 2);
 __decorateClass([
   query("#trigger")
-], GdsDropdown.prototype, "_elTriggerBtn", 2);
+], Dropdown.prototype, "_elTriggerBtn", 2);
 __decorateClass([
   queryAsync("#listbox")
-], GdsDropdown.prototype, "_elListbox", 2);
+], Dropdown.prototype, "_elListbox", 2);
 __decorateClass([
   query("#searchinput")
-], GdsDropdown.prototype, "_elSearchInput", 2);
+], Dropdown.prototype, "_elSearchInput", 2);
 __decorateClass([
   observeLightDOM({
     attributes: true,
@@ -561,13 +564,20 @@ __decorateClass([
     subtree: true,
     characterData: true
   })
-], GdsDropdown.prototype, "_handleLightDOMChange", 1);
+], Dropdown.prototype, "_handleLightDOMChange", 1);
 __decorateClass([
   watch("value")
-], GdsDropdown.prototype, "_handleValueChange", 1);
+], Dropdown.prototype, "_handleValueChange", 1);
 __decorateClass([
   watch("open")
-], GdsDropdown.prototype, "_handleOpenChange", 1);
+], Dropdown.prototype, "_handleOpenChange", 1);
+Dropdown = __decorateClass([
+  localized()
+], Dropdown);
+let GdsDropdown = class extends withSizeXProps(
+  withMarginProps(withLayoutChildProps(Dropdown))
+) {
+};
 GdsDropdown = __decorateClass([
   gdsCustomElement("gds-dropdown", {
     dependsOn: [
@@ -580,8 +590,7 @@ GdsDropdown = __decorateClass([
       IconChevronBottom,
       IconCrossSmall
     ]
-  }),
-  localized()
+  })
 ], GdsDropdown);
 export {
   GdsDropdown

package/components/grid/grid.styles.js

@@ -9,6 +9,7 @@ const style = css`
     grid-template-columns: var(--_grid-col);
     grid-column-gap: var(--_gap-column, 0px);
     grid-row-gap: var(--_gap-row, 0px);
+    box-sizing: border-box;
   }
 
   :host([auto-columns]) {

package/components/img/img.component.d.ts

@@ -1,5 +1,5 @@
 import { GdsElement } from '../../gds-element';
-declare const GdsImg_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").PositioningProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeYProps) & typeof GdsElement;
+declare const GdsImg_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").PositioningProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeYProps) & typeof GdsElement;
 /**
  * @element gds-img
  *

package/components/img/img.component.js

@@ -2,6 +2,7 @@ import {
   __decorateClass
 } from "../../chunks/chunk.QU3DSPNU.js";
 import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { GdsElement } from "../../gds-element.js";
 import { tokens } from "../../tokens.style.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
@@ -10,16 +11,20 @@ import {
   html
 } from "../../utils/helpers/custom-element-scoping.js";
 import {
+  withMarginProps,
   withPositioningProps,
   withSizeXProps,
   withSizeYProps
 } from "../../utils/mixins/declarative-layout-mixins.js";
 import IMGStyles from "./img.styles.js";
 let GdsImg = class extends withPositioningProps(
-  withSizeXProps(withSizeYProps(GdsElement))
+  withMarginProps(withSizeXProps(withSizeYProps(GdsElement)))
 ) {
   render() {
-    return html`<img src="${this.src}" alt="${this.alt}" />`;
+    return html`<img
+      src="${ifDefined(this.src)}"
+      alt="${ifDefined(this.alt)}"
+    />`;
   }
 };
 GdsImg.styles = [tokens, IMGStyles];

package/gds-element.js

@@ -14,7 +14,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "2.8.2";
+    this.semanticVersion = "2.9.0";
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);
   }

package/generated/react/divider/index.d.ts

@@ -6,6 +6,12 @@ export declare const GdsDivider: (props: React.ComponentProps<ReturnType<typeof
     opacity?: string | undefined;
     role?: string | null | undefined;
     render?: (() => any) | undefined;
+    width?: string | undefined;
+    'min-width'?: string | undefined;
+    'max-width'?: string | undefined;
+    'inline-size'?: string | undefined;
+    'min-inline-size'?: string | undefined;
+    'max-inline-size'?: string | undefined;
     readonly semanticVersion?: "__GDS_SEM_VER__" | undefined;
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;

package/generated/react/dropdown/index.d.ts

@@ -1,6 +1,22 @@
 import { getReactComponent } from "../../../utils/react";
 import { GdsDropdown as GdsDropdownClass } from "../../../components/dropdown/dropdown.component";
 export declare const GdsDropdown: (props: React.ComponentProps<ReturnType<typeof getReactComponent<GdsDropdownClass>>>) => import("react").ReactElement<Omit<{
+    width?: string | undefined;
+    'min-width'?: string | undefined;
+    'max-width'?: string | undefined;
+    'inline-size'?: string | undefined;
+    'min-inline-size'?: string | undefined;
+    'max-inline-size'?: string | undefined;
+    margin?: string | undefined;
+    'margin-inline'?: string | undefined;
+    'margin-block'?: string | undefined;
+    'align-self'?: string | undefined;
+    'justify-self'?: string | undefined;
+    'place-self'?: string | undefined;
+    'grid-column'?: string | undefined;
+    'grid-row'?: string | undefined;
+    'grid-area'?: string | undefined;
+    flex?: string | undefined;
     readonly type?: string | undefined;
     supportingText?: string | undefined;
     open?: boolean | undefined;
@@ -8,7 +24,7 @@ export declare const GdsDropdown: (props: React.ComponentProps<ReturnType<typeof
     multiple?: boolean | undefined;
     clearable?: boolean | undefined;
     combobox?: boolean | undefined;
-    compareWith?: ((a: any, b: any) => boolean) | undefined;
+    compareWith?: ((a: unknown, b: unknown) => boolean) | undefined;
     searchFilter?: ((q: string, o: import("../../../primitives/listbox/option.component").GdsOption) => boolean) | undefined;
     syncPopoverWidth?: boolean | undefined;
     maxHeight?: number | undefined;

package/generated/react/img/index.d.ts

@@ -11,6 +11,9 @@ export declare const GdsImg: (props: React.ComponentProps<ReturnType<typeof getR
     position?: string | undefined;
     transform?: string | undefined;
     inset?: string | undefined;
+    margin?: string | undefined;
+    'margin-inline'?: string | undefined;
+    'margin-block'?: string | undefined;
     width?: string | undefined;
     'min-width'?: string | undefined;
     'max-width'?: string | undefined;

package/generated/react/index.d.ts

@@ -1,7 +1,7 @@
 export * from './alert/index.js';
+export * from './badge/index.js';
 export * from './blur/index.js';
 export * from './breadcrumbs/index.js';
-export * from './badge/index.js';
 export * from './button/index.js';
 export * from './calendar/index.js';
 export * from './card/index.js';
@@ -50,6 +50,11 @@ export * from './filter-chip/index.js';
 export * from './formatted-account/index.js';
 export * from './formatted-date/index.js';
 export * from './formatted-number/index.js';
+export * from './radio-group/index.js';
+export * from './segment/index.js';
+export * from './sensitive-account/index.js';
+export * from './sensitive-date/index.js';
+export * from './sensitive-number/index.js';
 export * from './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';
@@ -375,8 +380,3 @@ export * from './icons/icon-youtube/index.js';
 export * from './icons/icon-zap/index.js';
 export * from './icons/icon-zoom-in/index.js';
 export * from './icons/icon-zoom-out/index.js';
-export * from './radio-group/index.js';
-export * from './segment/index.js';
-export * from './sensitive-account/index.js';
-export * from './sensitive-date/index.js';
-export * from './sensitive-number/index.js';

package/generated/react/index.js

@@ -1,7 +1,7 @@
 export * from "./alert/index.js";
+export * from "./badge/index.js";
 export * from "./blur/index.js";
 export * from "./breadcrumbs/index.js";
-export * from "./badge/index.js";
 export * from "./button/index.js";
 export * from "./calendar/index.js";
 export * from "./card/index.js";
@@ -50,6 +50,11 @@ export * from "./filter-chip/index.js";
 export * from "./formatted-account/index.js";
 export * from "./formatted-date/index.js";
 export * from "./formatted-number/index.js";
+export * from "./radio-group/index.js";
+export * from "./segment/index.js";
+export * from "./sensitive-account/index.js";
+export * from "./sensitive-date/index.js";
+export * from "./sensitive-number/index.js";
 export * from "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";
@@ -375,8 +380,3 @@ export * from "./icons/icon-youtube/index.js";
 export * from "./icons/icon-zap/index.js";
 export * from "./icons/icon-zoom-in/index.js";
 export * from "./icons/icon-zoom-out/index.js";
-export * from "./radio-group/index.js";
-export * from "./segment/index.js";
-export * from "./sensitive-account/index.js";
-export * from "./sensitive-date/index.js";
-export * from "./sensitive-number/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "2.8.2",
+  "version": "2.9.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-e3d901";
+const VER_SUFFIX = "-34e8e6";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])