@sebgroup/green-core 1.41.4 → 1.43.0

package/chunks/{chunk.6UWH3HEF.js → chunk.MPWX3JFB.js}

@@ -1,9 +1,6 @@
-import {
-  forwardAttributes
-} from "./chunk.YBOK7MI7.js";
 import {
   GdsFormControlElement
-} from "./chunk.2BMJPIND.js";
+} from "./chunk.YUFO2JLT.js";
 import {
   constrainSlots
 } from "./chunk.KBYQYDL3.js";
@@ -12,7 +9,7 @@ import {
 } from "./chunk.3XCSDEVC.js";
 import {
   tokens
-} from "./chunk.2WIGXRMD.js";
+} from "./chunk.VM32X2K4.js";
 import {
   gdsCustomElement,
   html
@@ -25,31 +22,57 @@ import {
 } from "./chunk.5VURDMKE.js";
 
 // libs/core/src/components/button/button.ts
-import { nothing, unsafeCSS } from "lit";
+import { nothing as nothing2, unsafeCSS } from "lit";
 import { html as staticHtml, literal } from "lit/static-html.js";
 import { property, query } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { classMap } from "lit/directives/class-map.js";
 
-// libs/core/src/components/button/button.style.css?inline
-var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, disabled;
-
-@layer tokens {
-  :host {
-    display: contents;
+// libs/core/src/utils/directives/forward-attributes.ts
+import { Directive, PartType, directive } from "lit/directive.js";
+import { nothing } from "lit/html.js";
+var ForwardAttributesDirective = class extends Directive {
+  constructor(partInfo) {
+    super(partInfo);
+    if (partInfo.type !== PartType.ELEMENT) {
+      throw new Error(
+        "The `forwardAttributes` directive must be used in element bindings"
+      );
+    }
   }
-}
+  render(_filter) {
+    return nothing;
+  }
+  update(part, [filter]) {
+    var _a;
+    const element = part.element;
+    const host = (_a = part.options) == null ? void 0 : _a.host;
+    Array.from(host.attributes).forEach((attr) => {
+      if (filter(attr)) {
+        element.setAttribute(attr.name.replace("gds-", ""), attr.value);
+      }
+    });
+  }
+};
+var forwardAttributes = directive(ForwardAttributesDirective);
+
+// libs/core/src/components/button/button.style.css?inline
+var button_style_default = `@layer tokens, core, a11y, ranks, sizes, variants, disabled;
 
 @layer a11y {
   @media (prefers-reduced-motion: reduce) {
-    :host {
+    .button {
       transition: none;
     }
   }
 }
 
 @layer core {
+  :host {
+    display: inline-block;
+  }
+
   .button {
     --_block-size: var(--gds-space-3xl);
     display: inline-flex;
@@ -86,22 +109,20 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
       }
     }
 
-    .state {
-      border-radius: inherit;
-      position: absolute;
-      inset: 0;
-      background-color: transparent;
-      pointer-events: none;
-      isolation: isolate;
-      transition: all 0.4s;
-
-      :hover & {
-        background-color: var(--gds-color-l3-states-dark-hover);
-      }
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--gds-color-l3-background-primary),
+        var(--gds-color-l3-states-dark-hover)
+      );
+    }
 
-      :active & {
-        background-color: var(--gds-color-l3-states-dark-pressed);
-      }
+    &:active {
+      background-color: color-mix(
+        in srgb,
+        var(--gds-color-l3-background-primary),
+        var(--gds-color-l3-states-dark-pressed)
+      );
     }
 
     &:not(.circle) slot:not([name]) {
@@ -131,14 +152,20 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
     background-color: var(--gds-color-l3-background-secondary);
     color: var(--gds-color-l3-content-secondary);
 
-    .state {
-      :hover & {
-        background-color: var(--gds-color-l3-states-light-hover);
-      }
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--gds-color-l3-background-secondary),
+        var(--gds-color-l3-states-light-hover)
+      );
+    }
 
-      :active & {
-        background-color: var(--gds-color-l3-states-light-pressed);
-      }
+    &:active {
+      background-color: color-mix(
+        in srgb,
+        var(--gds-color-l3-background-secondary),
+        var(--gds-color-l3-states-light-pressed)
+      );
     }
   }
 
@@ -146,19 +173,32 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
     background-color: transparent;
     color: var(--gds-color-l3-content-tertiary);
 
-    .state {
-      :hover & {
-        background-color: var(--gds-color-l3-states-light-hover);
-      }
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        transparent,
+        var(--gds-color-l3-states-light-hover)
+      );
+    }
 
-      :active & {
-        background-color: var(--gds-color-l3-states-light-pressed);
-      }
+    &:active {
+      background-color: color-mix(
+        in srgb,
+        transparent,
+        var(--gds-color-l3-states-light-pressed)
+      );
     }
   }
 }
 
 @layer sizes {
+  :host([size='xs']) .button {
+    --_block-size: var(--gds-space-l);
+    font-size: var(--gds-text-size-detail-s);
+    line-height: var(--gds-text-line-height-detail-s);
+    padding-inline: var(--gds-space-m);
+  }
+
   :host([size='small']) .button {
     --_block-size: var(--gds-space-xl);
     font-size: var(--gds-text-size-detail-s);
@@ -175,50 +215,126 @@ var button_style_default = `@layer tokens, a11y, core, ranks, sizes, variants, d
 
 @layer variants {
   .positive {
-    background-color: var(--gds-color-l3c-background-positive);
+    background-color: var(--gds-color-l3-background-positive);
 
-    .state {
-      :where(.secondary, .tertiary):hover & {
-        background-color: var(--gds-color-l3-states-positive-hover);
-      }
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--gds-color-l3-background-positive),
+        var(--gds-color-l3-states-dark-hover)
+      );
+    }
 
-      :where(.secondary, .tertiary):active & {
-        background-color: var(--gds-color-l3-states-positive-pressed);
-      }
+    &:active {
+      background-color: color-mix(
+        in srgb,
+        var(--gds-color-l3-background-positive),
+        var(--gds-color-l3-states-dark-pressed)
+      );
     }
 
     &.secondary {
-      background-color: var(--gds-color-l3c-background-positive-secondary);
-      color: var(--gds-color-l3c-content-positive);
+      background-color: var(--gds-color-l3-background-positive-secondary);
+      color: var(--gds-color-l3-content-positive);
+
+      &:hover {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-color-l3-background-positive-secondary),
+          var(--gds-color-l3-states-positive-hover)
+        );
+      }
+
+      &:active {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-color-l3-background-positive-secondary),
+          var(--gds-color-l3-states-positive-pressed)
+        );
+      }
     }
 
     &.tertiary {
       background-color: transparent;
-      color: var(--gds-color-l3c-content-positive);
+      color: var(--gds-color-l3-content-positive);
+
+      &:hover {
+        background-color: color-mix(
+          in srgb,
+          transparent,
+          var(--gds-color-l3-states-positive-hover)
+        );
+      }
+
+      &:active {
+        background-color: color-mix(
+          in srgb,
+          transparent,
+          var(--gds-color-l3-states-positive-pressed)
+        );
+      }
     }
   }
 
   .negative {
-    background-color: var(--gds-color-l3c-background-negative);
+    background-color: var(--gds-color-l3-background-negative);
 
-    .state {
-      :where(.secondary, .tertiary):hover & {
-        background-color: var(--gds-color-l3-states-negative-hover);
-      }
+    &:hover {
+      background-color: color-mix(
+        in srgb,
+        var(--gds-color-l3-background-negative),
+        var(--gds-color-l3-states-dark-hover)
+      );
+    }
 
-      :where(.secondary, .tertiary):active & {
-        background-color: var(--gds-color-l3-states-negative-pressed);
-      }
+    &:active {
+      background-color: color-mix(
+        in srgb,
+        var(--gds-color-l3-background-negative),
+        var(--gds-color-l3-states-dark-pressed)
+      );
     }
 
     &.secondary {
-      background-color: var(--gds-color-l3c-background-negative-secondary);
-      color: var(--gds-color-l3c-content-negative);
+      background-color: var(--gds-color-l3-background-negative-secondary);
+      color: var(--gds-color-l3-content-negative);
+
+      &:hover {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-color-l3-background-negative-secondary),
+          var(--gds-color-l3-states-negative-hover)
+        );
+      }
+
+      &:active {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-color-l3-background-negative-secondary),
+          var(--gds-color-l3-states-negative-pressed)
+        );
+      }
     }
 
     &.tertiary {
       background-color: transparent;
-      color: var(--gds-color-l3c-content-negative);
+      color: var(--gds-color-l3-content-negative);
+
+      &:hover {
+        background-color: color-mix(
+          in srgb,
+          transparent,
+          var(--gds-color-l3-states-negative-hover)
+        );
+      }
+
+      &:active {
+        background-color: color-mix(
+          in srgb,
+          transparent,
+          var(--gds-color-l3-states-negative-pressed)
+        );
+      }
     }
   }
 }
@@ -304,7 +420,7 @@ var GdsButton = class extends GdsFormControlElement {
         class=${classMap(buttonClasses)}
         type="${ifDefined(__privateGet(this, _isLink, isLink_get) ? void 0 : this.type)}"
         ?disabled="${this.disabled}"
-        aria-label=${this.label || nothing}
+        aria-label=${this.label || nothing2}
         href=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.href : void 0)}
         target=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.target : void 0)}
         rel=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.rel || __privateGet(this, _defaultRel, defaultRel_get) : void 0)}
@@ -322,9 +438,8 @@ var GdsButton = class extends GdsFormControlElement {
       !this._isUsingTransitionalStyles,
       () => html2`<gds-ripple part="_ripple"></gds-ripple>`
     )}
-        <div class="state"></div>
-      </${tag}>
-    `;
+        </${tag}>
+        `;
   }
   _getValidityAnchor() {
     return this._button;
@@ -390,5 +505,6 @@ GdsButton = __decorateClass([
 ], GdsButton);
 
 export {
+  forwardAttributes,
   GdsButton
 };

package/chunks/{chunk.KDPIWUU4.js → chunk.N36GFO5Q.js}

@@ -1,9 +1,9 @@
 import {
   styleExpressionProperty
-} from "./chunk.ADPMTWTS.js";
+} from "./chunk.XKACXVCM.js";
 import {
   tokens
-} from "./chunk.2WIGXRMD.js";
+} from "./chunk.VM32X2K4.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.NCVXC67U.js → chunk.O7DQRPML.js}

@@ -1,12 +1,9 @@
-import {
-  video_style_css_default
-} from "./chunk.SXGACXKX.js";
 import {
   styleExpressionProperty
-} from "./chunk.ADPMTWTS.js";
+} from "./chunk.XKACXVCM.js";
 import {
   tokens
-} from "./chunk.2WIGXRMD.js";
+} from "./chunk.VM32X2K4.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.CB6SQEYF.js → chunk.PINFIHVO.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.3XCSDEVC.js";
 import {
   tokens
-} from "./chunk.2WIGXRMD.js";
+} from "./chunk.VM32X2K4.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.7QHWOINK.js → chunk.QX3VLACM.js}

@@ -1,9 +1,9 @@
 import {
   styleExpressionProperty
-} from "./chunk.ADPMTWTS.js";
+} from "./chunk.XKACXVCM.js";
 import {
   tokens
-} from "./chunk.2WIGXRMD.js";
+} from "./chunk.VM32X2K4.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";