@sebgroup/green-core 1.42.0 → 1.43.1

package/chunks/{chunk.LFJRIUDW.js → chunk.27E4EAEK.js}

@@ -5,7 +5,7 @@ var style = css`
 
   @layer base {
     :host(:not(:last-child)) {
-      border-bottom: 1px solid var(--gds-sys-color-stroke-stroke-variant2);
+      border-bottom: 1px solid var(--gds-sys-color-border-stroke-variant2);
     }
 
     :host div {

package/chunks/{chunk.DW6Q6SBC.js → chunk.3CT5ZFTQ.js}

@@ -1,9 +1,9 @@
 import {
   styleExpressionProperty
-} from "./chunk.U6OZ3R3W.js";
+} from "./chunk.XKACXVCM.js";
 import {
   tokens
-} from "./chunk.3DNQAQ3I.js";
+} from "./chunk.RC3RN452.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.MBOWSQFX.js → chunk.A7Q7YZEN.js}

@@ -1,12 +1,9 @@
-import {
-  video_style_css_default
-} from "./chunk.SXGACXKX.js";
 import {
   styleExpressionProperty
-} from "./chunk.U6OZ3R3W.js";
+} from "./chunk.XKACXVCM.js";
 import {
   tokens
-} from "./chunk.3DNQAQ3I.js";
+} from "./chunk.RC3RN452.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";
@@ -20,6 +17,33 @@ import {
 
 // libs/core/src/components/media/video/video.ts
 import { property, query } from "lit/decorators.js";
+
+// libs/core/src/components/media/video/video.style.ts
+import { css } from "lit";
+var style = css`
+  :host {
+    display: contents;
+  }
+
+  figure {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-size: 0;
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+  }
+
+  video {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+`;
+var video_style_default = style;
+
+// libs/core/src/components/media/video/video.ts
 var GdsVideo = class extends GdsElement {
   // Method to programmatically apply video settings
   applyVideoSettings() {
@@ -39,21 +63,21 @@ var GdsVideo = class extends GdsElement {
     this.applyVideoSettings();
   }
 };
-GdsVideo.styles = [tokens, video_style_css_default];
+GdsVideo.styles = [tokens, video_style_default];
 __decorateClass([
   styleExpressionProperty({
     property: "aspect-ratio",
     selector: "figure",
     valueTemplate: (v) => v
   })
-], GdsVideo.prototype, "ratio", 2);
+], GdsVideo.prototype, "aspect-ratio", 2);
 __decorateClass([
   styleExpressionProperty({
     property: "object-position",
     selector: "video",
     valueTemplate: (v) => v
   })
-], GdsVideo.prototype, "position", 2);
+], GdsVideo.prototype, "object-position", 2);
 __decorateClass([
   styleExpressionProperty({
     property: "inset",
@@ -86,21 +110,21 @@ __decorateClass([
     selector: "video",
     valueTemplate: (v) => v
   })
-], GdsVideo.prototype, "fit", 2);
+], GdsVideo.prototype, "object-fit", 2);
 __decorateClass([
   styleExpressionProperty({
     property: "pointer-events",
     selector: "video",
     valueTemplate: (v) => v
   })
-], GdsVideo.prototype, "events", 2);
+], GdsVideo.prototype, "pointer-events", 2);
 __decorateClass([
   styleExpressionProperty({
     property: "border-radius",
     selector: "figure",
-    valueTemplate: (v) => `var(--gds-sys-radii-${v})`
+    valueTemplate: (v) => `var(--gds-space-${v})`
   })
-], GdsVideo.prototype, "radius", 2);
+], GdsVideo.prototype, "border-radius", 2);
 __decorateClass([
   property()
 ], GdsVideo.prototype, "src", 2);

package/chunks/{chunk.XO3GEBSD.js → chunk.AERYOXEJ.js}

@@ -4,16 +4,16 @@ import {
 } from "./chunk.C3ECHGX7.js";
 import {
   GdsFormControlElement
-} from "./chunk.2BMJPIND.js";
+} from "./chunk.YUFO2JLT.js";
 import {
   TransitionalStyles
 } from "./chunk.3XCSDEVC.js";
-import {
-  tokens
-} from "./chunk.3DNQAQ3I.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";
+import {
+  tokens
+} from "./chunk.RC3RN452.js";
 import {
   gdsCustomElement,
   html
@@ -365,6 +365,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
       newDate.setFullYear(parseInt(__privateGet(this, _spinnerState).year));
       newDate.setMonth(parseInt(__privateGet(this, _spinnerState).month) - 1);
       newDate.setDate(parseInt(__privateGet(this, _spinnerState).day));
+      newDate.setHours(12, 0, 0, 0);
       if (newDate.toString() === "Invalid Date")
         return;
       this.value = newDate;

package/chunks/chunk.AKNDGE2O.js

@@ -0,0 +1,37 @@
+import {
+  GdsContainer
+} from "./chunk.CKHSQ3NZ.js";
+import {
+  styleExpressionProperty
+} from "./chunk.XKACXVCM.js";
+import {
+  tokens
+} from "./chunk.RC3RN452.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/layout/card/card.ts
+var GdsCard = class extends GdsContainer {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+GdsCard.styles = [tokens];
+__decorateClass([
+  styleExpressionProperty({
+    property: "box-shadow",
+    valueTemplate: (v) => `var(--gds-shadow-${v})`
+  })
+], GdsCard.prototype, "shadow", 2);
+GdsCard = __decorateClass([
+  gdsCustomElement("gds-card")
+], GdsCard);
+
+export {
+  GdsCard
+};

package/chunks/chunk.ALUL3Z4L.js

@@ -0,0 +1,107 @@
+import {
+  GdsFlex
+} from "./chunk.I5ZVUUCK.js";
+import {
+  styleExpressionProperty
+} from "./chunk.XKACXVCM.js";
+import {
+  tokens
+} from "./chunk.RC3RN452.js";
+import {
+  gdsCustomElement
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/layout/mask/mask.ts
+import { html } from "lit/static-html.js";
+
+// libs/core/src/components/layout/mask/mask.style.ts
+import { css } from "lit";
+var style = css`
+  :host {
+    isolation: isolate;
+  }
+
+  [part='mask'] {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+  }
+
+  [part='content'] {
+    z-index: 1;
+    position: absolute;
+    inset: 0;
+  }
+`;
+var mask_style_default = style;
+
+// libs/core/src/components/layout/mask/mask.ts
+var GdsMask = class extends GdsFlex {
+  constructor() {
+    super();
+    this["mask-size"] = "cover";
+    this["mask-repeat"] = "no-repeat";
+    this["mask-position"] = "center";
+    this.position = "relative";
+    this.inset = "0";
+  }
+  render() {
+    return html`<div part="mask"></div>
+      <div part="content"><slot></slot></div>`;
+  }
+};
+GdsMask.styles = [tokens, mask_style_default];
+__decorateClass([
+  styleExpressionProperty({
+    selector: '[part="mask"]',
+    valueTemplate: (v) => {
+      const [direction] = v.split("/");
+      return `linear-gradient(to ${direction}, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%)`;
+    }
+  })
+], GdsMask.prototype, "mask-image", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v,
+    selector: '[part="mask"]'
+  })
+], GdsMask.prototype, "mask-size", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v,
+    selector: '[part="mask"]'
+  })
+], GdsMask.prototype, "mask-repeat", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v,
+    selector: '[part="mask"]'
+  })
+], GdsMask.prototype, "mask-position", 2);
+__decorateClass([
+  styleExpressionProperty({
+    selector: '[part="mask"]',
+    valueTemplate: function(v) {
+      const [backgroundColor, backgroundColorAlpha] = v.split("/");
+      const background = backgroundColorAlpha ? `color-mix(in srgb, var(--gds-color-${"l" + this.level}-background-${backgroundColor}) ${parseFloat(backgroundColorAlpha) * 100}%, transparent 0%)` : `var(--gds-color-${"l" + this.level}-background-${backgroundColor})`;
+      return background;
+    }
+  })
+], GdsMask.prototype, "background-color", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v,
+    selector: '[part="mask"]'
+  })
+], GdsMask.prototype, "backdrop-filter", 2);
+GdsMask = __decorateClass([
+  gdsCustomElement("gds-mask")
+], GdsMask);
+
+export {
+  GdsMask
+};

package/chunks/chunk.CKHSQ3NZ.js

@@ -0,0 +1,363 @@
+import {
+  styleExpressionProperty
+} from "./chunk.XKACXVCM.js";
+import {
+  tokens
+} from "./chunk.RC3RN452.js";
+import {
+  GdsElement
+} from "./chunk.ZQ4D5K7J.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/layout/container/container.ts
+import { property } from "lit/decorators.js";
+
+// libs/core/src/components/layout/container/container.style.ts
+import { css } from "lit";
+var style = css`
+  :host {
+    box-sizing: border-box;
+  }
+`;
+var container_style_default = style;
+
+// libs/core/src/components/layout/container/container.ts
+var GdsContainer = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    this.display = "block";
+    this.level = "2";
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+GdsContainer.styles = [tokens, container_style_default];
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "display", 2);
+__decorateClass([
+  property()
+], GdsContainer.prototype, "level", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "place-items", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "place-content", 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}-content-${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);
+    }
+  })
+], GdsContainer.prototype, "color", 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, color) => {
+        return `var(--gds-color-l${level}-background-${color})`;
+      };
+      const getBackgroundColor = (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 getBackgroundColor(colorInput, transparency);
+    }
+  })
+], GdsContainer.prototype, "background", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: function(v) {
+      const [size, color] = v.split("/");
+      const isCustomColor = (color2) => {
+        const trimmedColor = color2.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 constructBorderColorVariable = (level, color2) => {
+        return `var(--gds-color-l${level}-border-${color2})`;
+      };
+      const getBorderColorValue = (color2) => {
+        return isCustomColor(color2) ? color2 : constructBorderColorVariable(this.level, color2);
+      };
+      return `var(--gds-space-${size}) solid ${color ? getBorderColorValue(color) : "currentColor"}`;
+    },
+    styleTemplate: (_prop, values) => {
+      const top = values[0];
+      const right = values.length > 1 ? values[1] : top;
+      const bottom = values.length > 2 ? values[2] : top;
+      const left = values.length > 3 ? values[3] : top;
+      return `
+        border-top: ${top}; 
+        border-right: ${right}; 
+        border-bottom: ${bottom}; 
+        border-left: ${left};
+      `;
+    }
+  })
+], GdsContainer.prototype, "border", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: function(v) {
+      const [color] = v.split("/");
+      const isCustomColor = (color2) => {
+        const trimmedColor = color2.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 constructBorderColorVariable = (level, color2) => {
+        return `var(--gds-color-l${level}-border-${color2})`;
+      };
+      const getBorderColorValue = (color2) => {
+        return isCustomColor(color2) ? color2 : constructBorderColorVariable(this.level, color2);
+      };
+      return color ? getBorderColorValue(color) : "currentColor";
+    },
+    styleTemplate: (_prop, values) => {
+      const top = values[0];
+      const right = values.length > 1 ? values[1] : top;
+      const bottom = values.length > 2 ? values[2] : top;
+      const left = values.length > 3 ? values[3] : top;
+      return `
+        border-top-color: ${top}; 
+        border-right-color: ${right}; 
+        border-bottom-color: ${bottom}; 
+        border-left-color: ${left};
+      `;
+    }
+  })
+], GdsContainer.prototype, "border-color", 2);
+__decorateClass([
+  styleExpressionProperty({
+    styleTemplate: (_prop, values) => {
+      const top = values[0];
+      const right = values.length > 1 ? values[1] : top;
+      const bottom = values.length > 2 ? values[2] : top;
+      const left = values.length > 3 ? values[3] : top;
+      return `
+        border-top-width: ${top}; 
+        border-right-width: ${right}; 
+        border-bottom-width: ${bottom}; 
+        border-left-width: ${left};
+        border-style: solid;
+      `;
+    }
+  })
+], GdsContainer.prototype, "border-width", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => `var(--gds-space-${v})`
+  })
+], GdsContainer.prototype, "border-radius", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "opacity", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsContainer.prototype, "padding", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsContainer.prototype, "padding-inline", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsContainer.prototype, "padding-block", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => {
+      return v === "auto" ? "auto" : `var(--gds-space-${v})`;
+    },
+    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 `margin: ${top} ${right} ${bottom} ${left};`;
+    }
+  })
+], GdsContainer.prototype, "margin", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "position", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "inset", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "overflow", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => `${v}`
+  })
+], GdsContainer.prototype, "grid-column", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => `${v}`
+  })
+], GdsContainer.prototype, "grid-row", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "height", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "max-height", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "min-height", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsContainer.prototype, "block-size", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsContainer.prototype, "min-block-size", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "width", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "max-width", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "min-width", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsContainer.prototype, "inline-size", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "cursor", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "pointer-events", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "user-select", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "z-index", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "transform", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "transform-style", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "transition", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "transition-behavior", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => v
+  })
+], GdsContainer.prototype, "animation", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => `${v}`,
+    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});`;
+      return styleSize + styleLine;
+    }
+  })
+], GdsContainer.prototype, "font-size", 2);
+__decorateClass([
+  styleExpressionProperty({
+    property: "font-weight",
+    valueTemplate: (v) => `var(--gds-text-weight-${v})`
+  })
+], GdsContainer.prototype, "font-weight", 2);
+GdsContainer = __decorateClass([
+  gdsCustomElement("gds-container")
+], GdsContainer);
+
+export {
+  GdsContainer
+};

package/chunks/{chunk.647FXT6C.js → chunk.CT4EJQUH.js}

@@ -1,9 +1,9 @@
 import {
   styleExpressionProperty
-} from "./chunk.U6OZ3R3W.js";
+} from "./chunk.XKACXVCM.js";
 import {
   GdsButton
-} from "./chunk.EYEFIM2C.js";
+} from "./chunk.SFRZOLA5.js";
 import {
   gdsCustomElement
 } from "./chunk.VOYMQ322.js";
@@ -14,10 +14,6 @@ import {
 // libs/core/src/components/button/fab/fab.styles.ts
 import { css } from "lit";
 var style = css`
-  :host {
-    display: contents;
-  }
-
   .button {
     box-shadow: var(--gds-shadow-m);
     position: fixed;
@@ -36,7 +32,8 @@ var GdsFab = class extends GdsButton {
 };
 __decorateClass([
   styleExpressionProperty({
-    valueTemplate: (v) => v
+    valueTemplate: (v) => v,
+    selector: '[part="_button"]'
   })
 ], GdsFab.prototype, "position", 2);
 __decorateClass([