@sebgroup/green-core 1.65.2 → 1.66.1

package/chunks/{chunk.L2TDNB6Z.js → chunk.2TZQ3MDQ.js}

@@ -5,7 +5,7 @@ import {
 // dist/libs/tokens/internal/dark.css?inline
 var dark_default = `/**
  * Do not edit directly
- * Generated on Tue, 18 Feb 2025 15:42:46 GMT
+ * Generated on Mon, 24 Feb 2025 17:58:09 GMT
  */
 
 color-scheme: dark;
@@ -119,7 +119,7 @@ color-scheme: dark;
 // dist/libs/tokens/internal/light.css?inline
 var light_default = `/**
  * Do not edit directly
- * Generated on Tue, 18 Feb 2025 15:42:46 GMT
+ * Generated on Mon, 24 Feb 2025 17:58:09 GMT
  */
 
 color-scheme: light;
@@ -236,7 +236,7 @@ import { css, unsafeCSS } from "lit";
 // dist/libs/tokens/internal/motion.css?inline
 var motion_default = `/**
  * Do not edit directly
- * Generated on Tue, 18 Feb 2025 15:42:46 GMT
+ * Generated on Mon, 24 Feb 2025 17:58:09 GMT
  */
 
 :host {
@@ -255,7 +255,7 @@ var motion_default = `/**
 // dist/libs/tokens/internal/shadow.css?inline
 var shadow_default = `/**
  * Do not edit directly
- * Generated on Tue, 18 Feb 2025 15:42:46 GMT
+ * Generated on Mon, 24 Feb 2025 17:58:09 GMT
  */
 
 :host {
@@ -270,7 +270,7 @@ var shadow_default = `/**
 // dist/libs/tokens/internal/size.css?inline
 var size_default = `/**
  * Do not edit directly
- * Generated on Tue, 18 Feb 2025 15:42:46 GMT
+ * Generated on Mon, 24 Feb 2025 17:58:09 GMT
  */
 
 :host {
@@ -297,7 +297,7 @@ var size_default = `/**
 // dist/libs/tokens/internal/text.css?inline
 var text_default = `/**
  * Do not edit directly
- * Generated on Tue, 18 Feb 2025 15:42:46 GMT
+ * Generated on Mon, 24 Feb 2025 17:58:09 GMT
  */
 
 :host {

package/chunks/chunk.76QWARGM.js

@@ -0,0 +1,48 @@
+// libs/core/src/utils/helpers/style-expression-helpers.ts
+function parseColorValue(value, context, level) {
+  if (value === "transparent" || value === "currentColor" || value === "inherit") {
+    return value;
+  }
+  const [colorName, transparency] = value.split("/");
+  const colorVar = `var(--gds-color-l${level}-${context}-${colorName})`;
+  return transparency ? `color-mix(in srgb, ${colorVar} ${parseFloat(transparency) * 100}%, transparent 0%)` : colorVar;
+}
+function forColorTokens(context) {
+  return {
+    valueTemplate: function(v) {
+      return parseColorValue(v, context, this.level);
+    }
+  };
+}
+var forSpaceTokens = {
+  valueTemplate: (value) => `var(--gds-space-${value}, 0)`
+};
+var forSpaceTokensAndCustomValues = {
+  valueTemplate: (value) => `var(--gds-space-${sanitizeVariableName(value)}, ${value})`
+};
+var forSpaceTokensSupportingNegative = {
+  valueTemplate: (v) => {
+    const sign = v.startsWith("-") ? "neg" : "pos";
+    const val = sign == "pos" ? `var(--gds-space-${v})` : `calc(var(--gds-space-${v.substring(1)}) * -1)`;
+    return v === "auto" ? "auto" : val;
+  },
+  styleTemplate: (prop, values) => {
+    const transformValue = (v) => v === "auto" ? "auto" : `${v}`;
+    const top = transformValue(values[0]);
+    const right = values.length > 1 ? transformValue(values[1]) : top;
+    const bottom = values.length > 2 ? transformValue(values[2]) : top;
+    const left = values.length > 3 ? transformValue(values[3]) : right;
+    return `${prop}: ${top} ${right} ${bottom} ${left};`;
+  }
+};
+function sanitizeVariableName(name) {
+  return name.replace(/[^a-zA-Z0-9-]/g, "");
+}
+
+export {
+  parseColorValue,
+  forColorTokens,
+  forSpaceTokens,
+  forSpaceTokensAndCustomValues,
+  forSpaceTokensSupportingNegative
+};

package/chunks/{chunk.M3LCBAMM.js → chunk.A2ARMXHR.js}

@@ -4,12 +4,17 @@ import {
 import {
   observeLightDOM
 } from "./chunk.WM7HBMMV.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "./chunk.TWXTKG4B.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.2TZQ3MDQ.js";
 import {
   gdsCustomElement,
   html
@@ -79,7 +84,7 @@ var styles = css`
 
 // libs/core/src/components/select/select.ts
 var _isValueInitialized, _handleSelectElementChange, _setValueFromSelectElement, setValueFromSelectElement_fn, _renderFieldContents, renderFieldContents_fn, _renderSlotLead, renderSlotLead_fn, _renderMainLabel, renderMainLabel_fn, _renderMainSlot, renderMainSlot_fn, _renderChevron, renderChevron_fn;
-var GdsSelect = class extends GdsFormControlElement {
+var Select = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _setValueFromSelectElement);
@@ -287,22 +292,22 @@ renderChevron_fn = function() {
     return html` <gds-icon-chevron-bottom></gds-icon-chevron-bottom> `;
   }
 };
-GdsSelect.styles = [tokens, styles];
+Select.styles = [tokens, styles];
 __decorateClass([
   property({ attribute: "supporting-text" })
-], GdsSelect.prototype, "supportingText", 2);
+], Select.prototype, "supportingText", 2);
 __decorateClass([
   property({ type: String })
-], GdsSelect.prototype, "size", 2);
+], Select.prototype, "size", 2);
 __decorateClass([
   query("select")
-], GdsSelect.prototype, "selectElement", 2);
+], Select.prototype, "selectElement", 2);
 __decorateClass([
   property()
-], GdsSelect.prototype, "value", 1);
+], Select.prototype, "value", 1);
 __decorateClass([
   query(".select-container")
-], GdsSelect.prototype, "_elSelectContainer", 2);
+], Select.prototype, "_elSelectContainer", 2);
 __decorateClass([
   observeLightDOM({
     childList: true,
@@ -310,13 +315,19 @@ __decorateClass([
     attributes: true,
     characterData: true
   })
-], GdsSelect.prototype, "_captureDOM", 1);
+], Select.prototype, "_captureDOM", 1);
 __decorateClass([
   watch("value")
-], GdsSelect.prototype, "_handleValueChange", 1);
-GdsSelect = __decorateClass([
-  gdsCustomElement("gds-select"),
+], Select.prototype, "_handleValueChange", 1);
+Select = __decorateClass([
   localized()
+], Select);
+var GdsSelect = class extends withLayoutChildProps(
+  withSizeXProps(withMarginProps(Select))
+) {
+};
+GdsSelect = __decorateClass([
+  gdsCustomElement("gds-select")
 ], GdsSelect);
 
 export {

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

@@ -1,9 +1,14 @@
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "./chunk.TWXTKG4B.js";
 import {
   styleExpressionProperty
-} from "./chunk.K4KPKUH4.js";
+} from "./chunk.NUUST5OZ.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.2TZQ3MDQ.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.BJYILCTQ.js → chunk.B3PSMHT6.js}

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

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

@@ -5,15 +5,20 @@ import {
 import {
   GdsFormControlElement
 } from "./chunk.VA6TUMR2.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "./chunk.TWXTKG4B.js";
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.JG7YSP2S.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.2TZQ3MDQ.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.5KH5FC7L.js → chunk.CGCEAKK2.js}

@@ -4,12 +4,17 @@ import {
 import {
   observeLightDOM
 } from "./chunk.WM7HBMMV.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "./chunk.TWXTKG4B.js";
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.JG7YSP2S.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.2TZQ3MDQ.js";
 import {
   gdsCustomElement,
   html
@@ -398,7 +403,7 @@ var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, d
 var ariaForwards = ["aria-label", "aria-haspopup", "aria-expanded"];
 var html2 = stripWhitespace(html);
 var _isIconButton, _isLink, isLink_get, _defaultRel, defaultRel_get, _mainSlotChange, _handleClick;
-var GdsButton = class extends GdsFormControlElement {
+var Button = class extends GdsFormControlElement {
   constructor() {
     super();
     __privateAdd(this, _isLink);
@@ -500,50 +505,50 @@ defaultRel_get = function() {
 };
 _mainSlotChange = new WeakMap();
 _handleClick = new WeakMap();
-GdsButton.styles = [tokens, unsafeCSS(button_style_default)];
+Button.styles = [tokens, unsafeCSS(button_style_default)];
 /**
  * @internal
  */
-GdsButton.shadowRootOptions = {
+Button.shadowRootOptions = {
   mode: "open",
   delegatesFocus: true
 };
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], GdsButton.prototype, "disabled", 2);
+], Button.prototype, "disabled", 2);
 __decorateClass([
   property({ reflect: true })
-], GdsButton.prototype, "type", 2);
+], Button.prototype, "type", 2);
 __decorateClass([
   property({ reflect: true })
-], GdsButton.prototype, "rank", 2);
+], Button.prototype, "rank", 2);
 __decorateClass([
   property({ reflect: true })
-], GdsButton.prototype, "variant", 2);
+], Button.prototype, "variant", 2);
 __decorateClass([
   property({ reflect: true })
-], GdsButton.prototype, "size", 2);
+], Button.prototype, "size", 2);
 __decorateClass([
   property()
-], GdsButton.prototype, "label", 2);
+], Button.prototype, "label", 2);
 __decorateClass([
   property()
-], GdsButton.prototype, "href", 2);
+], Button.prototype, "href", 2);
 __decorateClass([
   property()
-], GdsButton.prototype, "target", 2);
+], Button.prototype, "target", 2);
 __decorateClass([
   property()
-], GdsButton.prototype, "rel", 2);
+], Button.prototype, "rel", 2);
 __decorateClass([
   property()
-], GdsButton.prototype, "download", 2);
+], Button.prototype, "download", 2);
 __decorateClass([
   query("slot:not([name])")
-], GdsButton.prototype, "_mainSlot", 2);
+], Button.prototype, "_mainSlot", 2);
 __decorateClass([
   query(".button")
-], GdsButton.prototype, "_button", 2);
+], Button.prototype, "_button", 2);
 __decorateClass([
   observeLightDOM({
     attributes: true,
@@ -551,7 +556,11 @@ __decorateClass([
     subtree: false,
     characterData: false
   })
-], GdsButton.prototype, "_attributeChanged", 1);
+], Button.prototype, "_attributeChanged", 1);
+var GdsButton = class extends withSizeXProps(
+  withMarginProps(withLayoutChildProps(Button))
+) {
+};
 GdsButton = __decorateClass([
   gdsCustomElement("gds-button")
 ], GdsButton);

package/chunks/{chunk.QQZ6OU7Y.js → chunk.CUO2GKQU.js}

@@ -2,14 +2,14 @@ import {
   defaultStyles
 } from "./chunk.UEJZWDMS.js";
 import {
-  GdsContainer
-} from "./chunk.N4DG6Q7H.js";
+  GdsDiv
+} from "./chunk.RL6DEFTH.js";
 import {
   styleExpressionProperty
-} from "./chunk.K4KPKUH4.js";
+} from "./chunk.NUUST5OZ.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.2TZQ3MDQ.js";
 import {
   gdsCustomElement
 } from "./chunk.QK3R23GV.js";
@@ -37,10 +37,9 @@ var style = css`
 var text_style_default = style;
 
 // libs/core/src/components/text/text.ts
-var GdsText = class extends GdsContainer {
+var GdsText = class extends GdsDiv {
   constructor() {
     super(...arguments);
-    this.level = "2";
     this.tag = "span";
   }
   render() {
@@ -49,17 +48,13 @@ var GdsText = class extends GdsContainer {
   }
 };
 GdsText.styles = [tokens, defaultStyles, text_style_default];
-__decorateClass([
-  property()
-], GdsText.prototype, "level", 2);
 __decorateClass([
   property({ type: String })
 ], GdsText.prototype, "tag", 2);
 __decorateClass([
   styleExpressionProperty({
-    valueTemplate: (v) => `${v}`,
     selector: "[tag]",
-    styleTemplate: (prop, values) => {
+    styleTemplate: (_prop, values) => {
       const size = values[0];
       const styleSize = `font-size: var(--gds-text-size-${size});`;
       const styleLine = `line-height: var(--gds-text-line-height-${size});`;
@@ -69,38 +64,20 @@ __decorateClass([
 ], GdsText.prototype, "font-size", 2);
 __decorateClass([
   styleExpressionProperty({
-    property: "font-weight",
     selector: "[tag]",
     valueTemplate: (v) => `var(--gds-text-weight-${v})`
   })
 ], GdsText.prototype, "font-weight", 2);
 __decorateClass([
-  styleExpressionProperty({
-    property: "text-wrap",
-    valueTemplate: (v) => v
-  })
-], GdsText.prototype, "text-wrap", 2);
-__decorateClass([
-  styleExpressionProperty({
-    property: "text-transform",
-    valueTemplate: (v) => v
-  })
+  styleExpressionProperty()
 ], GdsText.prototype, "text-transform", 2);
 __decorateClass([
   styleExpressionProperty({
-    property: "text-align",
-    valueTemplate: (v) => v
-  })
-], GdsText.prototype, "text-align", 2);
-__decorateClass([
-  styleExpressionProperty({
-    valueTemplate: (v) => v,
     selector: "[tag]"
   })
 ], GdsText.prototype, "text-decoration", 2);
 __decorateClass([
   styleExpressionProperty({
-    valueTemplate: (v) => v,
     styleTemplate: (_prop, values) => {
       return `overflow: hidden;
       text-overflow: ellipsis;
@@ -110,19 +87,6 @@ __decorateClass([
     }
   })
 ], GdsText.prototype, "lines", 2);
-__decorateClass([
-  styleExpressionProperty({
-    property: "color",
-    valueTemplate: function(v) {
-      const [colorName, transparency] = v.split("/");
-      if (transparency) {
-        return `color-mix(in srgb, var(--gds-color-${"l" + this.level}-content-${colorName}) ${parseFloat(transparency) * 100}%, transparent 0%)`;
-      } else {
-        return `var(--gds-color-${"l" + this.level}-content-${colorName})`;
-      }
-    }
-  })
-], GdsText.prototype, "color", 2);
 GdsText = __decorateClass([
   gdsCustomElement("gds-text")
 ], GdsText);

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

@@ -1,12 +1,12 @@
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.JG7YSP2S.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.2TZQ3MDQ.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.ZJAOT2TY.js → chunk.FWPPRWSD.js}

@@ -1,12 +1,12 @@
 import {
-  GdsContainer
-} from "./chunk.N4DG6Q7H.js";
+  GdsDiv
+} from "./chunk.RL6DEFTH.js";
 import {
   styleExpressionProperty
-} from "./chunk.K4KPKUH4.js";
+} from "./chunk.NUUST5OZ.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.2TZQ3MDQ.js";
 import {
   gdsCustomElement,
   html
@@ -17,14 +17,14 @@ import {
 
 // libs/core/src/components/card/card.ts
 import { css } from "lit";
-var GdsCard = class extends GdsContainer {
+var GdsCard = class extends GdsDiv {
   /// This sets variables that are used in the default styles. Any other SEPs will override.
   constructor() {
     super();
     this.variant = "primary";
-    this.padding = "s; m{l}";
-    this["border-radius"] = "xs; m{s}";
-    this["border-width"] = "4xs";
+    this.padding = "s;m{l}";
+    this["border-radius"] = "xs;m{s}";
+    this["gap"] = "s;m{l}";
   }
   render() {
     return html`<slot></slot>`;
@@ -34,9 +34,14 @@ GdsCard.styles = [
   tokens,
   css`
       :host {
+        box-sizing: border-box;
         border-color: var(--_border-color);
         background-color: var(--_background-color);
         color: var(--_color);
+        border-width: var(--gds-space-4xs);
+        border-style: solid;
+        display: flex;
+        flex-direction: column;
       }
     `
 ];
@@ -48,7 +53,6 @@ __decorateClass([
 ], GdsCard.prototype, "shadow", 2);
 __decorateClass([
   styleExpressionProperty({
-    valueTemplate: (v) => v,
     styleTemplate: function(_prop, v) {
       return `
       --_border-color: var(--gds-color-l${this.level}-background-${v});

package/chunks/{chunk.33KNAKAX.js → chunk.FXUCA5WD.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.JG7YSP2S.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";