@sebgroup/green-core 1.65.2 → 1.66.0

package/chunks/{chunk.MNBT4BBM.js → chunk.2OB745JA.js}

@@ -1,18 +1,23 @@
 import {
-  GdsContainer
-} from "./chunk.N4DG6Q7H.js";
+  GdsDiv
+} from "./chunk.C6D7M75U.js";
+import {
+  forSpaceTokens
+} from "./chunk.76QWARGM.js";
 import {
   styleExpressionProperty
-} from "./chunk.K4KPKUH4.js";
+} from "./chunk.NUUST5OZ.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   gdsCustomElement,
   html
 } from "./chunk.QK3R23GV.js";
 import {
-  __decorateClass
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
 } from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/grid/grid.style.ts
@@ -21,6 +26,8 @@ var style = css`
   :host {
     --_c: 12;
     --_grid-col: repeat(var(--_c), 1fr);
+    width: 100%;
+    display: grid;
     grid-template-columns: var(--_grid-col);
     grid-column-gap: var(--_gap-column, 0px);
     grid-row-gap: var(--_gap-row, 0px);
@@ -42,12 +49,7 @@ var style = css`
 var grid_style_default = style;
 
 // libs/core/src/components/grid/grid.ts
-var GdsGrid = class extends GdsContainer {
-  constructor() {
-    super();
-    this.display = "grid";
-    this.width = "100%";
-  }
+var GdsGrid = class extends GdsDiv {
   render() {
     return html`<slot></slot>`;
   }
@@ -55,23 +57,22 @@ var GdsGrid = class extends GdsContainer {
 GdsGrid.styles = [tokens, grid_style_default];
 __decorateClass([
   styleExpressionProperty({
-    property: "--_c",
-    valueTemplate: (v) => v
+    property: "--_c"
   })
 ], GdsGrid.prototype, "columns", 2);
 __decorateClass([
-  styleExpressionProperty({
+  styleExpressionProperty(__spreadProps(__spreadValues({}, forSpaceTokens), {
     styleTemplate: (_prop, values) => {
       const rowGap = values[0];
       const colGap = values[1] || rowGap;
       return `--_gap-column: ${colGap}; --_gap-row: ${rowGap};`;
     }
-  })
+  }))
 ], GdsGrid.prototype, "gap", 2);
 __decorateClass([
   styleExpressionProperty({
     property: "--_col-width",
-    valueTemplate: (v) => `${v}px`
+    valueTemplate: (v) => `${isNaN(v) ? v : `${v}px`}`
   })
 ], GdsGrid.prototype, "auto-columns", 2);
 GdsGrid = __decorateClass([

package/chunks/{chunk.QQZ6OU7Y.js → chunk.3H5ICQVZ.js}

@@ -2,14 +2,14 @@ import {
   defaultStyles
 } from "./chunk.UEJZWDMS.js";
 import {
-  GdsContainer
-} from "./chunk.N4DG6Q7H.js";
+  GdsDiv
+} from "./chunk.C6D7M75U.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";
@@ -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.HLECFPM7.js → chunk.3ONXWPQW.js}

@@ -4,13 +4,13 @@ import {
 } from "./chunk.ZRKILGXZ.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 {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.NXCMDWVV.js → chunk.5UF3G7BV.js}

@@ -1,9 +1,12 @@
+import {
+  forColorTokens
+} from "./chunk.76QWARGM.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";
@@ -16,6 +19,7 @@ import {
 } from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/divider/divider.ts
+import { nothing } from "lit";
 import { property } from "lit/decorators.js";
 
 // libs/core/src/components/divider/divider.style.ts
@@ -43,9 +47,10 @@ var GdsDivider = class extends GdsElement {
   constructor() {
     super(...arguments);
     this.level = "2";
+    this.role = null;
   }
   render() {
-    return html`<hr />`;
+    return html`<hr role=${this.role || nothing} />`;
   }
 };
 GdsDivider.styles = [tokens, divider_style_default];
@@ -53,30 +58,7 @@ __decorateClass([
   property()
 ], GdsDivider.prototype, "level", 2);
 __decorateClass([
-  styleExpressionProperty({
-    valueTemplate: function(v) {
-      const [colorInput, transparency] = v.split("/");
-      const isCustomColor = (color) => {
-        const trimmedColor = color.trim();
-        return trimmedColor.startsWith("#") || // Hex color
-        trimmedColor.startsWith("rgb(") || // RGB color
-        trimmedColor.startsWith("rgba(") || // RGBA color
-        trimmedColor.startsWith("hsl(") || // HSL color
-        trimmedColor.startsWith("hsla(");
-      };
-      const constructCssVariable = (level, colorName) => {
-        return `var(--gds-color-l${level}-border-${colorName})`;
-      };
-      const getColorValue = (color, transparency2) => {
-        if (isCustomColor(color)) {
-          return transparency2 ? `color-mix(in srgb, ${color} ${parseFloat(transparency2) * 100}%, transparent 0%)` : color;
-        } else {
-          return constructCssVariable(this.level, color);
-        }
-      };
-      return getColorValue(colorInput, transparency);
-    }
-  })
+  styleExpressionProperty(forColorTokens("border"))
 ], GdsDivider.prototype, "color", 2);
 __decorateClass([
   styleExpressionProperty({
@@ -85,11 +67,11 @@ __decorateClass([
   })
 ], GdsDivider.prototype, "size", 2);
 __decorateClass([
-  styleExpressionProperty({
-    property: "opacity",
-    valueTemplate: (v) => v
-  })
+  styleExpressionProperty()
 ], GdsDivider.prototype, "opacity", 2);
+__decorateClass([
+  property()
+], GdsDivider.prototype, "role", 2);
 GdsDivider = __decorateClass([
   gdsCustomElement("gds-divider")
 ], GdsDivider);

package/chunks/{chunk.ZJAOT2TY.js → chunk.6IPE43TE.js}

@@ -1,12 +1,12 @@
 import {
-  GdsContainer
-} from "./chunk.N4DG6Q7H.js";
+  GdsDiv
+} from "./chunk.C6D7M75U.js";
 import {
   styleExpressionProperty
-} from "./chunk.K4KPKUH4.js";
+} from "./chunk.NUUST5OZ.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.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.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.3HYF3OQJ.js → chunk.ANVDAFT6.js}

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

package/chunks/{chunk.6AXAS42G.js → chunk.AOL7I7LG.js}

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

package/chunks/{chunk.5KH5FC7L.js → chunk.B3QCLV6X.js}

@@ -4,12 +4,17 @@ import {
 import {
   observeLightDOM
 } from "./chunk.WM7HBMMV.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "./chunk.G2WTHFPE.js";
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.LNQWCKU7.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.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.33KNAKAX.js → chunk.BCTJIMKU.js}

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