@sebgroup/green-core 1.65.2 → 1.66.0

package/chunks/chunk.C6D7M75U.js

@@ -0,0 +1,189 @@
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withPaddingProps,
+  withPositioningProps,
+  withSizeXProps,
+  withSizeYProps
+} from "./chunk.G2WTHFPE.js";
+import {
+  forColorTokens,
+  forSpaceTokens,
+  parseColorValue
+} from "./chunk.76QWARGM.js";
+import {
+  styleExpressionProperty
+} from "./chunk.NUUST5OZ.js";
+import {
+  tokens
+} from "./chunk.WBBCGR25.js";
+import {
+  GdsElement
+} from "./chunk.TMEWQZER.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.QK3R23GV.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.SEHSDSX2.js";
+
+// libs/core/src/components/div/div.ts
+import { property } from "lit/decorators.js";
+
+// libs/core/src/components/div/div.style.ts
+import { css } from "lit";
+var style = css`
+  :host {
+    display: block;
+    box-sizing: border-box;
+    border-style: solid;
+    border-width: 0;
+    border-color: var(--gds-color-l2-border-primary);
+  }
+  :host(:focus-visible) {
+    outline-color: color-mix(in srgb, currentcolor, #000 100%);
+    outline-offset: var(--gds-space-3xs);
+    outline-style: solid;
+    outline-width: var(--gds-space-3xs);
+  }
+`;
+var div_style_default = style;
+
+// libs/core/src/components/div/div.ts
+var GdsDiv = class extends withSizeXProps(
+  withSizeYProps(
+    withMarginProps(
+      withPaddingProps(withLayoutChildProps(withPositioningProps(GdsElement)))
+    )
+  )
+) {
+  constructor() {
+    super(...arguments);
+    this.level = "2";
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+GdsDiv.styles = [tokens, div_style_default];
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "display", 2);
+__decorateClass([
+  property()
+], GdsDiv.prototype, "level", 2);
+__decorateClass([
+  styleExpressionProperty(forColorTokens("content"))
+], GdsDiv.prototype, "color", 2);
+__decorateClass([
+  styleExpressionProperty(forColorTokens("background"))
+], GdsDiv.prototype, "background", 2);
+__decorateClass([
+  styleExpressionProperty({
+    styleTemplate: function(_prop, values) {
+      const this_ = this;
+      const [
+        size,
+        style2 = this_["border-style"] || "solid",
+        color = this_["border-color"] || "primary"
+      ] = values;
+      const sizeCss = `var(--gds-space-${size})`;
+      const colorCss = parseColorValue(color, "border", this_.level);
+      return `border: ${sizeCss} ${style2} ${colorCss};`;
+    }
+  })
+], GdsDiv.prototype, "border", 2);
+__decorateClass([
+  styleExpressionProperty(forColorTokens("border"))
+], GdsDiv.prototype, "border-color", 2);
+__decorateClass([
+  styleExpressionProperty(forSpaceTokens)
+], GdsDiv.prototype, "border-width", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "border-style", 2);
+__decorateClass([
+  styleExpressionProperty(forSpaceTokens)
+], GdsDiv.prototype, "border-radius", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => `var(--gds-shadow-${v})`
+  })
+], GdsDiv.prototype, "box-shadow", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "opacity", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "overflow", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "box-sizing", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "z-index", 2);
+__decorateClass([
+  styleExpressionProperty({
+    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;
+    }
+  })
+], GdsDiv.prototype, "font-size", 2);
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => `var(--gds-text-weight-${v})`
+  })
+], GdsDiv.prototype, "font-weight", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "text-align", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "text-wrap", 2);
+__decorateClass([
+  styleExpressionProperty(__spreadProps(__spreadValues({}, forSpaceTokens), {
+    styleTemplate: (_prop, values) => {
+      const colGap = values[0];
+      const rowGap = values[1] || colGap;
+      return `gap: ${colGap} ${rowGap};`;
+    },
+    cacheOverrideKey: "flex"
+  }))
+], GdsDiv.prototype, "gap", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "align-items", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "align-content", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "justify-content", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "justify-items", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "flex-direction", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "flex-wrap", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "place-items", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "place-content", 2);
+GdsDiv = __decorateClass([
+  gdsCustomElement("gds-div")
+], GdsDiv);
+
+export {
+  GdsDiv
+};

package/chunks/{chunk.WXLGEKTJ.js → chunk.C7QZFHHI.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.S6H4MUKG.js";
+} from "./chunk.LNQWCKU7.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
@@ -8,7 +8,7 @@ import {
   dark_default,
   light_default,
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.ZRVWDJF3.js → chunk.D7OG6JDU.js}

@@ -1,9 +1,16 @@
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withPositioningProps,
+  withSizeXProps,
+  withSizeYProps
+} 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";
@@ -41,7 +48,11 @@ var style = css`
 var video_style_default = style;
 
 // libs/core/src/components/video/video.ts
-var GdsVideo = class extends GdsElement {
+var GdsVideo = class extends withSizeXProps(
+  withSizeYProps(
+    withMarginProps(withLayoutChildProps(withPositioningProps(GdsElement)))
+  )
+) {
   // Method to programmatically apply video settings
   applyVideoSettings() {
     if (this.videoElement) {
@@ -62,59 +73,28 @@ var GdsVideo = class extends GdsElement {
 };
 GdsVideo.styles = [tokens, video_style_default];
 __decorateClass([
-  styleExpressionProperty({
-    property: "aspect-ratio",
-    valueTemplate: (v) => v
-  })
+  styleExpressionProperty()
 ], GdsVideo.prototype, "aspect-ratio", 2);
 __decorateClass([
   styleExpressionProperty({
-    property: "object-position",
-    selector: "video",
-    valueTemplate: (v) => v
+    selector: "video"
   })
 ], GdsVideo.prototype, "object-position", 2);
 __decorateClass([
-  styleExpressionProperty({
-    property: "inset",
-    valueTemplate: (v) => v
-  })
-], GdsVideo.prototype, "inset", 2);
-__decorateClass([
-  styleExpressionProperty({
-    property: "width",
-    valueTemplate: (v) => v
-  })
-], GdsVideo.prototype, "width", 2);
-__decorateClass([
-  styleExpressionProperty({
-    property: "height",
-    valueTemplate: (v) => v
-  })
-], GdsVideo.prototype, "height", 2);
-__decorateClass([
-  styleExpressionProperty({
-    property: "opacity",
-    valueTemplate: (v) => v
-  })
+  styleExpressionProperty()
 ], GdsVideo.prototype, "opacity", 2);
 __decorateClass([
   styleExpressionProperty({
-    property: "object-fit",
-    selector: "video",
-    valueTemplate: (v) => v
+    selector: "video"
   })
 ], GdsVideo.prototype, "object-fit", 2);
 __decorateClass([
   styleExpressionProperty({
-    property: "pointer-events",
-    selector: "video",
-    valueTemplate: (v) => v
+    selector: "video"
   })
 ], GdsVideo.prototype, "pointer-events", 2);
 __decorateClass([
   styleExpressionProperty({
-    property: "border-radius",
     valueTemplate: (v) => `var(--gds-space-${v})`
   })
 ], GdsVideo.prototype, "border-radius", 2);

package/chunks/{chunk.I26S7X2I.js → chunk.ESW6XPZT.js}

@@ -1,6 +1,6 @@
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   gdsCustomElement
 } from "./chunk.QK3R23GV.js";

package/chunks/{chunk.IVF6XCAV.js → chunk.FHNILNLX.js}

@@ -1,21 +1,26 @@
 import {
   resizeObserver
 } from "./chunk.VHN4JEZC.js";
-import {
-  styleExpressionProperty
-} from "./chunk.K4KPKUH4.js";
 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 {
+  styleExpressionProperty
+} from "./chunk.NUUST5OZ.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.L2TDNB6Z.js";
+} from "./chunk.WBBCGR25.js";
 import {
   gdsCustomElement,
   html
@@ -104,7 +109,7 @@ var styles = css`
 
 // libs/core/src/components/textarea/textarea.ts
 var _renderDefault, renderDefault_fn, _renderFloatingLabel, renderFloatingLabel_fn, _forwardableAttrs, _handleOnInput, _handleOnChange, _handleOnPaste, _handleFieldClick, _handleClearBtnClick, _renderFieldContents, renderFieldContents_fn, _renderSlotLead, renderSlotLead_fn, _renderSlotTrail, renderSlotTrail_fn, _renderNativeTextarea, renderNativeTextarea_fn, _renderClearButton, renderClearButton_fn, _shouldShowRemainingChars, shouldShowRemainingChars_get;
-var GdsTextarea = class extends GdsFormControlElement {
+var Textarea = class extends GdsFormControlElement {
   constructor() {
     super();
     __privateAdd(this, _renderDefault);
@@ -385,7 +390,7 @@ _shouldShowRemainingChars = new WeakSet();
 shouldShowRemainingChars_get = function() {
   return this.maxlength < Number.MAX_SAFE_INTEGER;
 };
-GdsTextarea.styles = [tokens, styles];
+Textarea.styles = [tokens, styles];
 __decorateClass([
   styleExpressionProperty({
     valueTemplate: (v) => v,
@@ -395,46 +400,52 @@ __decorateClass([
       return `min-height: calc(1lh * ${ROWS});`;
     }
   })
-], GdsTextarea.prototype, "rows", 2);
+], Textarea.prototype, "rows", 2);
 __decorateClass([
   property({ attribute: "supporting-text" })
-], GdsTextarea.prototype, "supportingText", 2);
+], Textarea.prototype, "supportingText", 2);
 __decorateClass([
   property({ type: Boolean })
-], GdsTextarea.prototype, "clearable", 2);
+], Textarea.prototype, "clearable", 2);
 __decorateClass([
   property({ type: String })
-], GdsTextarea.prototype, "resizable", 2);
+], Textarea.prototype, "resizable", 2);
 __decorateClass([
   property({ type: Number })
-], GdsTextarea.prototype, "maxlength", 2);
+], Textarea.prototype, "maxlength", 2);
 __decorateClass([
   property({ type: String })
-], GdsTextarea.prototype, "variant", 2);
+], Textarea.prototype, "variant", 2);
 __decorateClass([
   property({ type: String })
-], GdsTextarea.prototype, "size", 2);
+], Textarea.prototype, "size", 2);
 __decorateClass([
   queryAsync("textarea")
-], GdsTextarea.prototype, "elTextareaAsync", 2);
+], Textarea.prototype, "elTextareaAsync", 2);
 __decorateClass([
   query("textarea")
-], GdsTextarea.prototype, "elTextarea", 2);
+], Textarea.prototype, "elTextarea", 2);
 __decorateClass([
   query("gds-field-base")
-], GdsTextarea.prototype, "fieldBase", 2);
+], Textarea.prototype, "fieldBase", 2);
 __decorateClass([
   resizeObserver()
-], GdsTextarea.prototype, "_handleResize", 1);
+], Textarea.prototype, "_handleResize", 1);
 __decorateClass([
   watch("value")
-], GdsTextarea.prototype, "_setAutoHeight", 1);
+], Textarea.prototype, "_setAutoHeight", 1);
 __decorateClass([
   watch("rows")
-], GdsTextarea.prototype, "_handleRowsChange", 1);
-GdsTextarea = __decorateClass([
-  gdsCustomElement("gds-textarea"),
+], Textarea.prototype, "_handleRowsChange", 1);
+Textarea = __decorateClass([
   localized()
+], Textarea);
+var GdsTextarea = class extends withLayoutChildProps(
+  withSizeXProps(withMarginProps(Textarea))
+) {
+};
+GdsTextarea = __decorateClass([
+  gdsCustomElement("gds-textarea")
 ], GdsTextarea);
 
 export {

package/chunks/chunk.G2WTHFPE.js

@@ -0,0 +1,136 @@
+import {
+  forSpaceTokens,
+  forSpaceTokensAndCustomValues,
+  forSpaceTokensSupportingNegative
+} from "./chunk.76QWARGM.js";
+import {
+  styleExpressionProperty
+} from "./chunk.NUUST5OZ.js";
+import {
+  __decorateClass
+} from "./chunk.SEHSDSX2.js";
+
+// libs/core/src/utils/mixins/declarative-layout-mixins.ts
+function withSizeXProps(base) {
+  class DimensionPropsMixin extends base {
+  }
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensAndCustomValues)
+  ], DimensionPropsMixin.prototype, "width", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensAndCustomValues)
+  ], DimensionPropsMixin.prototype, "min-width", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensAndCustomValues)
+  ], DimensionPropsMixin.prototype, "max-width", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensAndCustomValues)
+  ], DimensionPropsMixin.prototype, "inline-size", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensAndCustomValues)
+  ], DimensionPropsMixin.prototype, "min-inline-size", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensAndCustomValues)
+  ], DimensionPropsMixin.prototype, "max-inline-size", 2);
+  return DimensionPropsMixin;
+}
+function withSizeYProps(base) {
+  class DimensionPropsMixin extends base {
+  }
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensAndCustomValues)
+  ], DimensionPropsMixin.prototype, "height", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensAndCustomValues)
+  ], DimensionPropsMixin.prototype, "min-height", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensAndCustomValues)
+  ], DimensionPropsMixin.prototype, "max-height", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensAndCustomValues)
+  ], DimensionPropsMixin.prototype, "block-size", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensAndCustomValues)
+  ], DimensionPropsMixin.prototype, "min-block-size", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensAndCustomValues)
+  ], DimensionPropsMixin.prototype, "max-block-size", 2);
+  return DimensionPropsMixin;
+}
+function withMarginProps(base) {
+  class MarginPropsMixin extends base {
+  }
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensSupportingNegative)
+  ], MarginPropsMixin.prototype, "margin", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensSupportingNegative)
+  ], MarginPropsMixin.prototype, "margin-inline", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokensSupportingNegative)
+  ], MarginPropsMixin.prototype, "margin-block", 2);
+  return MarginPropsMixin;
+}
+function withPaddingProps(base) {
+  class PaddingPropsMixin extends base {
+  }
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokens)
+  ], PaddingPropsMixin.prototype, "padding", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokens)
+  ], PaddingPropsMixin.prototype, "padding-inline", 2);
+  __decorateClass([
+    styleExpressionProperty(forSpaceTokens)
+  ], PaddingPropsMixin.prototype, "padding-block", 2);
+  return PaddingPropsMixin;
+}
+function withLayoutChildProps(base) {
+  class LayoutChildPropsMixin extends base {
+  }
+  __decorateClass([
+    styleExpressionProperty()
+  ], LayoutChildPropsMixin.prototype, "align-self", 2);
+  __decorateClass([
+    styleExpressionProperty()
+  ], LayoutChildPropsMixin.prototype, "justify-self", 2);
+  __decorateClass([
+    styleExpressionProperty()
+  ], LayoutChildPropsMixin.prototype, "place-self", 2);
+  __decorateClass([
+    styleExpressionProperty()
+  ], LayoutChildPropsMixin.prototype, "grid-column", 2);
+  __decorateClass([
+    styleExpressionProperty()
+  ], LayoutChildPropsMixin.prototype, "grid-row", 2);
+  __decorateClass([
+    styleExpressionProperty()
+  ], LayoutChildPropsMixin.prototype, "grid-area", 2);
+  __decorateClass([
+    styleExpressionProperty()
+  ], LayoutChildPropsMixin.prototype, "flex", 2);
+  return LayoutChildPropsMixin;
+}
+function withPositioningProps(base) {
+  class PositioningPropsMixin extends base {
+  }
+  __decorateClass([
+    styleExpressionProperty()
+  ], PositioningPropsMixin.prototype, "position", 2);
+  __decorateClass([
+    styleExpressionProperty()
+  ], PositioningPropsMixin.prototype, "transform", 2);
+  __decorateClass([
+    styleExpressionProperty()
+  ], PositioningPropsMixin.prototype, "inset", 2);
+  return PositioningPropsMixin;
+}
+
+export {
+  withSizeXProps,
+  withSizeYProps,
+  withMarginProps,
+  withPaddingProps,
+  withLayoutChildProps,
+  withPositioningProps
+};

package/chunks/{chunk.ERDZD4ZA.js → chunk.GB5SVW2I.js}

@@ -1,9 +1,14 @@
+import {
+  withPositioningProps,
+  withSizeXProps,
+  withSizeYProps
+} 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";
@@ -41,68 +46,39 @@ var style = css`
 var img_style_default = style;
 
 // libs/core/src/components/img/img.ts
-var GdsImg = class extends GdsElement {
+var GdsImg = class extends withPositioningProps(
+  withSizeXProps(withSizeYProps(GdsElement))
+) {
   render() {
     return html`<img src="${this.src}" alt="${this.alt}" />`;
   }
 };
 GdsImg.styles = [tokens, img_style_default];
 __decorateClass([
-  styleExpressionProperty({
-    property: "aspect-ratio",
-    valueTemplate: (v) => v
-  })
+  styleExpressionProperty()
 ], GdsImg.prototype, "aspect-ratio", 2);
 __decorateClass([
   styleExpressionProperty({
-    property: "object-position",
-    selector: "img",
-    valueTemplate: (v) => v
-  })
-], GdsImg.prototype, "position", 2);
-__decorateClass([
-  styleExpressionProperty({
-    property: "inset",
-    valueTemplate: (v) => v
-  })
-], GdsImg.prototype, "inset", 2);
-__decorateClass([
-  styleExpressionProperty({
-    property: "width",
-    valueTemplate: (v) => v
-  })
-], GdsImg.prototype, "width", 2);
-__decorateClass([
-  styleExpressionProperty({
-    property: "height",
-    valueTemplate: (v) => v
+    property: "border-radius",
+    valueTemplate: (v) => `var(--gds-space-${v})`
   })
-], GdsImg.prototype, "height", 2);
+], GdsImg.prototype, "border-radius", 2);
 __decorateClass([
   styleExpressionProperty({
-    property: "opacity",
-    valueTemplate: (v) => v
+    selector: "img"
   })
-], GdsImg.prototype, "opacity", 2);
+], GdsImg.prototype, "object-fit", 2);
 __decorateClass([
   styleExpressionProperty({
-    property: "object-fit",
-    selector: "img",
-    valueTemplate: (v) => v
+    selector: "img"
   })
-], GdsImg.prototype, "object-fit", 2);
+], GdsImg.prototype, "object-position", 2);
 __decorateClass([
   property()
 ], GdsImg.prototype, "src", 2);
 __decorateClass([
   property()
 ], GdsImg.prototype, "alt", 2);
-__decorateClass([
-  styleExpressionProperty({
-    property: "border-radius",
-    valueTemplate: (v) => `var(--gds-space-${v})`
-  })
-], GdsImg.prototype, "border-radius", 2);
 GdsImg = __decorateClass([
   gdsCustomElement("gds-img")
 ], GdsImg);

package/chunks/{chunk.72P5ER45.js → chunk.JKCCH7B5.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";

package/chunks/{chunk.RZC5YKY2.js → chunk.KHEFX7ET.js}

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