@sebgroup/green-core 1.65.2 → 1.66.0

package/chunks/{chunk.S6H4MUKG.js → chunk.LNQWCKU7.js}

@@ -1,6 +1,6 @@
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   VER_SUFFIX
 } from "./chunk.QK3R23GV.js";
@@ -1213,6 +1213,44 @@ Values for light mode are used by default.
   --gds-sys-color-font: var(--gds-ref-pallet-base800);
   --gds-sys-color-base-container: var(--gds-ref-pallet-base500);
   --gds-sys-color-focus-outline: var(--gds-ref-pallet-base1000);
+  --gds-sys-color-blue: #41b0ee;
+  --gds-sys-color-dark-blue-1: #41b0ee;
+  --gds-sys-color-dark-blue-2: #007ac7;
+  --gds-sys-color-green: #60cd18;
+  --gds-sys-color-dark-green-1: #45b400;
+  --gds-sys-color-dark-green-2: #308800;
+  --gds-sys-color-yellow: #ffc500;
+  --gds-sys-color-dark-yellow-1: #ffb400;
+  --gds-sys-color-dark-yellow-2: #f8a000;
+  --gds-sys-color-text-primary: #333333;
+  --gds-sys-color-text-secondary: #ababab;
+  --gds-sys-color-text-white: #ffffff;
+  --gds-sys-color-text-black: #333333;
+  --gds-sys-color-text-inverted: #ffffff;
+  --gds-sys-color-text-link: #0062bc;
+  --gds-sys-color-text-error: #9f000a;
+  --gds-sys-color-text-disabled: #adadad;
+  --gds-sys-color-red: #f03529;
+  --gds-sys-color-dark-red-1: #d81a1a;
+  --gds-sys-color-dark-red-2: #bb000c;
+  --gds-sys-color-purple: #673ab6;
+  --gds-sys-color-dark-purple-1: #4f2c99;
+  --gds-sys-color-dark-purple-2: #3f2587;
+  --gds-sys-color-white: #ffffff;
+  --gds-sys-color-black: #000000;
+  --gds-sys-color-background-primary: #ffffff;
+  --gds-sys-color-background-secondary: #eeeeee;
+  --gds-sys-color-base-100: #f8f8f8;
+  --gds-sys-color-base-200: #e9e9e9;
+  --gds-sys-color-base-300: #dedede;
+  --gds-sys-color-base-400: #cecece;
+  --gds-sys-color-base-500: #adadad;
+  --gds-sys-color-base-600: #868686;
+  --gds-sys-color-base-700: #494949;
+  --gds-sys-color-base-800: #333333;
+  --gds-sys-color-base-900: #1a1a1a;
+  --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);
+  --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);
   --gds-comp-checkbox-container-height: 1rem;
   --gds-comp-checkbox-container-width: 1rem;
   --gds-comp-checkbox-container-color: var(--gds-sys-color-surface);

package/chunks/{chunk.TMGAZY2U.js → chunk.MHE47HSD.js}

@@ -188,7 +188,7 @@ var GdsDialog = class extends GdsElement {
             >
               <gds-flex
                 justify-content="space-between"
-                border="0 0 4xs/primary 0"
+                border-width="0 0 4xs 0"
                 margin="0 -s"
                 padding="0 s s"
                 background-color="secondary"
@@ -203,14 +203,9 @@ var GdsDialog = class extends GdsElement {
                   ><gds-icon-cross-large></gds-icon-cross-large
                 ></gds-button>
               </gds-flex>
-              <gds-container
-                id="content"
-                padding="m 0"
-                overflow="auto"
-                flex="1"
-              >
+              <gds-div id="content" padding="m 0" overflow="auto" flex="1">
                 <slot></slot>
-              </gds-container>
+              </gds-div>
               <gds-flex
                 class="footer"
                 justify-content="center"

package/chunks/{chunk.K4KPKUH4.js → chunk.NUUST5OZ.js}

@@ -125,12 +125,12 @@ function toCss(selector, property2, tree, valueTemplate = (v) => v, styleTemplat
 var styleCache = /* @__PURE__ */ new Map();
 function styleExpressionProperty(options) {
   return (proto, descriptor) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const sel = (_a = options == null ? void 0 : options.selector) != null ? _a : String(":host");
     const prop = (_b = options == null ? void 0 : options.property) != null ? _b : String(descriptor);
-    const valueTemplate = (_c = options == null ? void 0 : options.valueTemplate) != null ? _c : (v) => `var(--gds-space-${v}, 0)`;
+    const valueTemplate = options == null ? void 0 : options.valueTemplate;
     const styleTemplate = options == null ? void 0 : options.styleTemplate;
-    const cacheKey = (_d = options == null ? void 0 : options.cacheOverrideKey) != null ? _d : `0`;
+    const cacheKey = (_c = options == null ? void 0 : options.cacheOverrideKey) != null ? _c : `0`;
     property({ attribute: options == null ? void 0 : options.attribute, noAccessor: true })(
       proto,
       descriptor
@@ -144,7 +144,7 @@ function styleExpressionProperty(options) {
         if (!newValue)
           return;
         this["__" + String(descriptor)] = newValue;
-        await this.updateComplete;
+        await this.firstUpdated();
         const lvl = (_a2 = this.level) != null ? _a2 : "0";
         const styleKey = sel + prop + newValue + lvl + cacheKey;
         if (styleCache.has(styleKey)) {
@@ -160,7 +160,7 @@ function styleExpressionProperty(options) {
           sel,
           prop,
           ast,
-          valueTemplate.bind(this),
+          valueTemplate == null ? void 0 : valueTemplate.bind(this),
           styleTemplate == null ? void 0 : styleTemplate.bind(this)
         );
         const style = unsafeCSS(css);

package/chunks/{chunk.FQ5S3SPL.js → chunk.O5MF3AWQ.js}

@@ -5,15 +5,20 @@ import {
 import {
   GdsFormControlElement
 } from "./chunk.VA6TUMR2.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "./chunk.G2WTHFPE.js";
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.LNQWCKU7.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   gdsCustomElement,
   html
@@ -92,7 +97,7 @@ var styles = css`
 
 // libs/core/src/components/datepicker/datepicker.ts
 var _valueOnOpen, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _handleFieldFocusOut, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
-var GdsDatepicker = class extends GdsFormControlElement {
+var Datepicker = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _renderBackToValidRangeButton);
@@ -713,76 +718,82 @@ isValueOutsideRange_get = function() {
     return false;
   return this.value.getFullYear() < this.min.getFullYear() || this.value.getFullYear() > this.max.getFullYear();
 };
-GdsDatepicker.styles = [tokens, styles];
+Datepicker.styles = [tokens, styles];
 __decorateClass([
   property({ converter: dateConverter })
-], GdsDatepicker.prototype, "value", 1);
+], Datepicker.prototype, "value", 1);
 __decorateClass([
   property({ converter: dateConverter })
-], GdsDatepicker.prototype, "min", 2);
+], Datepicker.prototype, "min", 2);
 __decorateClass([
   property({ converter: dateConverter })
-], GdsDatepicker.prototype, "max", 2);
+], Datepicker.prototype, "max", 2);
 __decorateClass([
   property({ type: Boolean })
-], GdsDatepicker.prototype, "open", 2);
+], Datepicker.prototype, "open", 2);
 __decorateClass([
   property({ attribute: "supporting-text" })
-], GdsDatepicker.prototype, "supportingText", 2);
+], Datepicker.prototype, "supportingText", 2);
 __decorateClass([
   property({ type: String })
-], GdsDatepicker.prototype, "size", 2);
+], Datepicker.prototype, "size", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "show-week-numbers" })
-], GdsDatepicker.prototype, "showWeekNumbers", 2);
+], Datepicker.prototype, "showWeekNumbers", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "hide-label" })
-], GdsDatepicker.prototype, "hideLabel", 2);
+], Datepicker.prototype, "hideLabel", 2);
 __decorateClass([
   property()
-], GdsDatepicker.prototype, "dateformat", 1);
+], Datepicker.prototype, "dateformat", 1);
 __decorateClass([
   property({ type: Boolean, attribute: "disabled-weekends" })
-], GdsDatepicker.prototype, "disabledWeekends", 2);
+], Datepicker.prototype, "disabledWeekends", 2);
 __decorateClass([
   property({ converter: dateArrayConverter, attribute: "disabled-dates" })
-], GdsDatepicker.prototype, "disabledDates", 2);
+], Datepicker.prototype, "disabledDates", 2);
 __decorateClass([
   queryAsync("#calendar-button")
-], GdsDatepicker.prototype, "test_calendarButton", 2);
+], Datepicker.prototype, "test_calendarButton", 2);
 __decorateClass([
   state()
-], GdsDatepicker.prototype, "_focusedMonth", 2);
+], Datepicker.prototype, "_focusedMonth", 2);
 __decorateClass([
   state()
-], GdsDatepicker.prototype, "_focusedYear", 2);
+], Datepicker.prototype, "_focusedYear", 2);
 __decorateClass([
   state()
-], GdsDatepicker.prototype, "_dateFormatLayout", 2);
+], Datepicker.prototype, "_dateFormatLayout", 2);
 __decorateClass([
   queryAsync("#calendar")
-], GdsDatepicker.prototype, "_elCalendar", 2);
+], Datepicker.prototype, "_elCalendar", 2);
 __decorateClass([
   queryAsync("#calendar-button")
-], GdsDatepicker.prototype, "_elTrigger", 2);
+], Datepicker.prototype, "_elTrigger", 2);
 __decorateClass([
   queryAsync("#field")
-], GdsDatepicker.prototype, "_elFieldAsync", 2);
+], Datepicker.prototype, "_elFieldAsync", 2);
 __decorateClass([
   queryAll("[role=spinbutton]")
-], GdsDatepicker.prototype, "_elSpinners", 2);
+], Datepicker.prototype, "_elSpinners", 2);
 __decorateClass([
   query("#field")
-], GdsDatepicker.prototype, "_elField", 2);
+], Datepicker.prototype, "_elField", 2);
 __decorateClass([
   watch("value")
-], GdsDatepicker.prototype, "_handleValueChange", 1);
+], Datepicker.prototype, "_handleValueChange", 1);
 __decorateClass([
   watch("open")
-], GdsDatepicker.prototype, "_handleOpenChange", 1);
-GdsDatepicker = __decorateClass([
-  gdsCustomElement("gds-datepicker"),
+], Datepicker.prototype, "_handleOpenChange", 1);
+Datepicker = __decorateClass([
   localized()
+], Datepicker);
+var GdsDatepicker = class extends withSizeXProps(
+  withMarginProps(withLayoutChildProps(Datepicker))
+) {
+};
+GdsDatepicker = __decorateClass([
+  gdsCustomElement("gds-datepicker")
 ], GdsDatepicker);
 
 export {

package/chunks/{chunk.7RH4YLXP.js → chunk.OGQ5SET4.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.LNQWCKU7.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.E2DI7SCS.js → chunk.OPSLMB6U.js}

@@ -1,12 +1,12 @@
 import {
   GdsFlex
-} from "./chunk.5SFGYE7C.js";
+} from "./chunk.UGHZGD2M.js";
 import {
   styleExpressionProperty
-} from "./chunk.K4KPKUH4.js";
+} from "./chunk.NUUST5OZ.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   gdsCustomElement
 } from "./chunk.QK3R23GV.js";

package/chunks/{chunk.IDLO4SF7.js → chunk.OXIKAUCN.js}

@@ -1,9 +1,9 @@
 import {
   styleExpressionProperty
-} from "./chunk.K4KPKUH4.js";
+} from "./chunk.NUUST5OZ.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";
@@ -18,14 +18,13 @@ import {
 // libs/core/src/components/spacer/spacer.ts
 var GdsSpacer = class extends GdsElement {
   render() {
-    return html`<div></div>`;
+    return html``;
   }
 };
 GdsSpacer.styles = [tokens];
 __decorateClass([
   styleExpressionProperty({
     property: "height",
-    selector: "div",
     valueTemplate: (v) => `var(--gds-space-${v})`
   })
 ], GdsSpacer.prototype, "size", 2);

package/chunks/{chunk.WVIONKU4.js → chunk.PVDNSDQ5.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.E62NOHQC.js";
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.LNQWCKU7.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.AOTGGABX.js → chunk.PZHMIVFF.js}

@@ -1,6 +1,11 @@
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "./chunk.G2WTHFPE.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";
@@ -40,7 +45,9 @@ var badge_style_default = style;
 
 // libs/core/src/components/badge/badge.ts
 var _renderLeadSlot, renderLeadSlot_fn, _renderMainSlot, renderMainSlot_fn, _handleSlotChange, handleSlotChange_fn, _renderTrailSlot, renderTrailSlot_fn;
-var GdsBadge = class extends GdsElement {
+var GdsBadge = class extends withSizeXProps(
+  withMarginProps(withLayoutChildProps(GdsElement))
+) {
   constructor() {
     super();
     __privateAdd(this, _renderLeadSlot);
@@ -69,7 +76,7 @@ var GdsBadge = class extends GdsElement {
       padding-inline="${padding}"
       border-radius="${this.notification || this.rounded ? "max" : "2xs"}"
       block-size="${blockSize}"
-      width="max-content"
+      width="100%"
       font-size="${this.size === "small" || this.notification ? "detail-xs" : "detail-s"}"
       pointer-events=${this.disabled ? "none" : "auto"}
       user-select="${this.disabled ? "none" : "auto"}"

package/chunks/chunk.QK3R23GV.js

@@ -6,7 +6,7 @@ import {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-6e0f7e";
+var VER_SUFFIX = "-f25474";
 var ScopedElementRegistry = class {
   static get instance() {
     var _a;

package/chunks/{chunk.JIYNFF4D.js → chunk.QL3SRQMU.js}

@@ -1,9 +1,9 @@
-import {
-  styleExpressionProperty
-} from "./chunk.K4KPKUH4.js";
 import {
   GdsButton
-} from "./chunk.5KH5FC7L.js";
+} from "./chunk.B3QCLV6X.js";
+import {
+  withPositioningProps
+} from "./chunk.G2WTHFPE.js";
 import {
   gdsCustomElement
 } from "./chunk.QK3R23GV.js";
@@ -29,27 +29,12 @@ var style = css`
 var fab_styles_default = style;
 
 // libs/core/src/components/fab/fab.ts
-var GdsFab = class extends GdsButton {
+var GdsFab = class extends withPositioningProps(GdsButton) {
   connectedCallback() {
     super.connectedCallback();
     this._dynamicStylesController.inject("FAB_styles", fab_styles_default);
   }
 };
-__decorateClass([
-  styleExpressionProperty({
-    valueTemplate: (v) => v
-  })
-], GdsFab.prototype, "position", 2);
-__decorateClass([
-  styleExpressionProperty({
-    valueTemplate: (v) => v
-  })
-], GdsFab.prototype, "transform", 2);
-__decorateClass([
-  styleExpressionProperty({
-    valueTemplate: (v) => v
-  })
-], GdsFab.prototype, "inset", 2);
 GdsFab = __decorateClass([
   gdsCustomElement("gds-fab")
 ], GdsFab);

package/chunks/{chunk.N5YJ6GYI.js → chunk.RW5RXCBK.js}

@@ -1,9 +1,14 @@
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "./chunk.G2WTHFPE.js";
 import {
   styleExpressionProperty
-} from "./chunk.K4KPKUH4.js";
+} from "./chunk.NUUST5OZ.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";
@@ -61,7 +66,9 @@ var link_styles_default = style;
 
 // libs/core/src/components/link/link.ts
 var _defaultRel, defaultRel_get;
-var GdsLink = class extends GdsElement {
+var GdsLink = class extends withMarginProps(
+  withSizeXProps(withLayoutChildProps(GdsElement))
+) {
   constructor() {
     super();
     __privateAdd(this, _defaultRel);

package/chunks/{chunk.RWKRHNWT.js → chunk.SHOSMOYU.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.LNQWCKU7.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.BJYILCTQ.js → chunk.SPON3Z5D.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.WM7HBMMV.js";
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.LNQWCKU7.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";

package/chunks/{chunk.N7UBPAKJ.js → chunk.SVOA74C3.js}

@@ -1,12 +1,12 @@
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.LNQWCKU7.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";
@@ -82,7 +82,7 @@ var style = css`
         border-style: solid;
         border-color: transparent;
         border-radius: var(--gds-space-2xs);
-        transition: all 0.2s;
+        transition: background 0.2s;
         outline-style: solid;
         outline-color: transparent;
         outline-width: 0px;
@@ -109,7 +109,8 @@ var style = css`
         }
 
         &:focus-visible {
-          outline-color: color-mix(in srgb, currentColor, transparent 50%);
+          outline-color: var(--gds-color-l2-content-primary);
+          outline-width: var(--gds-space-3xs);
         }
       }
 

package/chunks/{chunk.3YLD22MP.js → chunk.TF6J2JQN.js}

@@ -1,6 +1,10 @@
+import {
+  withLayoutChildProps,
+  withMarginProps
+} from "./chunk.G2WTHFPE.js";
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.LNQWCKU7.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";
@@ -25,6 +29,9 @@ import { css } from "lit";
 var style = css`
   @layer base, reset, transitional-styles;
   @layer base {
+    :host {
+      display: inline-block;
+    }
     button {
       display: flex;
       border-width: 0;
@@ -46,7 +53,9 @@ var context_menu_styles_default = style;
 
 // libs/core/src/components/context-menu/context-menu.ts
 var _handleItemClick, handleItemClick_fn;
-var GdsContextMenu = class extends GdsElement {
+var GdsContextMenu = class extends withMarginProps(
+  withLayoutChildProps(GdsElement)
+) {
   constructor() {
     super();
     __privateAdd(this, _handleItemClick);

package/chunks/{chunk.NXUVLTO7.js → chunk.UBXNWORG.js}

@@ -1,12 +1,17 @@
 import {
   forwardAttributes
-} from "./chunk.5KH5FC7L.js";
+} from "./chunk.B3QCLV6X.js";
 import {
   GdsFormControlElement
 } from "./chunk.VA6TUMR2.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "./chunk.G2WTHFPE.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   gdsCustomElement,
   html
@@ -90,7 +95,7 @@ var styles = css`
 
 // libs/core/src/components/input/input.ts
 var _renderDefault, renderDefault_fn, _renderFloatingLabel, renderFloatingLabel_fn, _forwardableAttrs, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, _renderFieldContents, renderFieldContents_fn, _renderSlotLead, renderSlotLead_fn, _renderSlotTrail, renderSlotTrail_fn, _renderNativeInput, renderNativeInput_fn, _renderClearButton, renderClearButton_fn, _shouldShowRemainingChars, shouldShowRemainingChars_get;
-var GdsInput = class extends GdsFormControlElement {
+var Input = class extends GdsFormControlElement {
   constructor() {
     super();
     __privateAdd(this, _renderDefault);
@@ -267,38 +272,44 @@ _shouldShowRemainingChars = new WeakSet();
 shouldShowRemainingChars_get = function() {
   return this.maxlength < Number.MAX_SAFE_INTEGER;
 };
-GdsInput.styles = [tokens, styles];
+Input.styles = [tokens, styles];
 __decorateClass([
   property({ attribute: "supporting-text" })
-], GdsInput.prototype, "supportingText", 2);
+], Input.prototype, "supportingText", 2);
 __decorateClass([
   property({
     attribute: "show-extended-supporting-text",
     type: Boolean,
     reflect: true
   })
-], GdsInput.prototype, "showExtendedSupportingText", 2);
+], Input.prototype, "showExtendedSupportingText", 2);
 __decorateClass([
   property({ type: Boolean })
-], GdsInput.prototype, "clearable", 2);
+], Input.prototype, "clearable", 2);
 __decorateClass([
   property({ type: Number })
-], GdsInput.prototype, "maxlength", 2);
+], Input.prototype, "maxlength", 2);
 __decorateClass([
   property({ type: String })
-], GdsInput.prototype, "variant", 2);
+], Input.prototype, "variant", 2);
 __decorateClass([
   property({ type: String })
-], GdsInput.prototype, "size", 2);
+], Input.prototype, "size", 2);
 __decorateClass([
   queryAsync("input")
-], GdsInput.prototype, "elInputAsync", 2);
+], Input.prototype, "elInputAsync", 2);
 __decorateClass([
   query("input")
-], GdsInput.prototype, "elInput", 2);
-GdsInput = __decorateClass([
-  gdsCustomElement("gds-input"),
+], Input.prototype, "elInput", 2);
+Input = __decorateClass([
   localized()
+], Input);
+var GdsInput = class extends withSizeXProps(
+  withMarginProps(withLayoutChildProps(Input))
+) {
+};
+GdsInput = __decorateClass([
+  gdsCustomElement("gds-input")
 ], GdsInput);
 
 export {

package/chunks/chunk.UGHZGD2M.js

@@ -0,0 +1,38 @@
+import {
+  GdsDiv
+} from "./chunk.C6D7M75U.js";
+import {
+  tokens
+} from "./chunk.WBBCGR25.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.QK3R23GV.js";
+import {
+  __decorateClass
+} from "./chunk.SEHSDSX2.js";
+
+// libs/core/src/components/flex/flex.styles.ts
+import { css } from "lit";
+var style = css`
+  :host {
+    display: flex;
+    box-sizing: border-box;
+  }
+`;
+var flex_styles_default = style;
+
+// libs/core/src/components/flex/flex.ts
+var GdsFlex = class extends GdsDiv {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+GdsFlex.styles = [tokens, flex_styles_default];
+GdsFlex = __decorateClass([
+  gdsCustomElement("gds-flex")
+], GdsFlex);
+
+export {
+  GdsFlex
+};

package/chunks/{chunk.UQ24RS46.js → chunk.VQ7OJPCU.js}

@@ -1,6 +1,10 @@
+import {
+  withLayoutChildProps,
+  withSizeXProps
+} from "./chunk.G2WTHFPE.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";
@@ -158,7 +162,9 @@ var menu_button_styles_default = style;
 
 // libs/core/src/components/menu-button/menu-button.ts
 var _isLink, isLink_get, _defaultRel, defaultRel_get;
-var GdsMenuButton = class extends GdsElement {
+var GdsMenuButton = class extends withSizeXProps(
+  withLayoutChildProps(GdsElement)
+) {
   constructor() {
     super();
     __privateAdd(this, _isLink);