@sebgroup/green-core 1.38.1 → 1.40.0

package/chunks/{chunk.EF6MCM6B.js → chunk.VIVDWSPB.js}

@@ -1,6 +1,13 @@
 import {
   TransitionalStyles
 } from "./chunk.S7DYDS4E.js";
+import {
+  dark_default,
+  light_default
+} from "./chunk.ZFI2LPGC.js";
+import {
+  watch
+} from "./chunk.2WO4NHJ2.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";
@@ -14,7 +21,7 @@ import {
 
 // libs/core/src/components/theme/theme.ts
 import { property } from "lit/decorators.js";
-import { css } from "lit";
+import { css, unsafeCSS } from "lit";
 var GdsTheme = class extends GdsElement {
   constructor() {
     super(...arguments);
@@ -23,10 +30,27 @@ var GdsTheme = class extends GdsElement {
   connectedCallback() {
     super.connectedCallback();
     TransitionalStyles.instance.apply(this, "gds-theme");
+    this._dynamicStylesController.inject(
+      "tokens",
+      unsafeCSS(`:host {${dark_default}}`)
+    );
   }
   render() {
     return html`<slot></slot>`;
   }
+  _onColorSchemeChange() {
+    if (this.colorScheme === "dark") {
+      this._dynamicStylesController.inject(
+        "tokens",
+        unsafeCSS(`:host { ${dark_default}}`)
+      );
+    } else {
+      this._dynamicStylesController.inject(
+        "tokens",
+        unsafeCSS(`:host { ${light_default}}`)
+      );
+    }
+  }
 };
 GdsTheme.styles = css`
     :host {
@@ -36,6 +60,9 @@ GdsTheme.styles = css`
 __decorateClass([
   property({ reflect: true, attribute: "color-scheme" })
 ], GdsTheme.prototype, "colorScheme", 2);
+__decorateClass([
+  watch("colorScheme")
+], GdsTheme.prototype, "_onColorSchemeChange", 1);
 GdsTheme = __decorateClass([
   gdsCustomElement("gds-theme")
 ], GdsTheme);

package/chunks/{chunk.WWR3VPSV.js → chunk.VL4HFY2N.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.ADPMTWTS.js";
 import {
   GdsButton
-} from "./chunk.R2RVGPT7.js";
+} from "./chunk.WZRLM4IU.js";
 import {
   gdsCustomElement
 } from "./chunk.VOYMQ322.js";
@@ -15,13 +15,14 @@ import {
 import { css } from "lit";
 var style = css`
   :host {
-    position: fixed;
-    inset: auto 2rem 2rem auto;
+    display: contents;
   }
 
   .button {
     box-shadow: var(--gds-shadow-m);
-    height: calc(var(--_size) + 0.5rem);
+    position: fixed;
+    inset: auto var(--gds-space-3xl) var(--gds-space-3xl) auto;
+    block-size: calc(var(--_block-size) + var(--gds-space-xs));
   }
 `;
 var fab_styles_default = style;
@@ -45,7 +46,8 @@ __decorateClass([
 ], GdsFab.prototype, "transform", 2);
 __decorateClass([
   styleExpressionProperty({
-    valueTemplate: (v) => v
+    valueTemplate: (v) => v,
+    selector: '[part="_button"]'
   })
 ], GdsFab.prototype, "inset", 2);
 GdsFab = __decorateClass([

package/chunks/chunk.VOYMQ322.js

@@ -1,7 +1,7 @@
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-c7402d";
+var VER_SUFFIX = "-c5afc6";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {

package/chunks/chunk.WNFJQ5DF.js

@@ -0,0 +1,40 @@
+import {
+  signal_style_css_default
+} from "./chunk.7VC33K5Z.js";
+import {
+  styleExpressionProperty
+} from "./chunk.ADPMTWTS.js";
+import {
+  tokens
+} from "./chunk.ZFI2LPGC.js";
+import {
+  GdsElement
+} from "./chunk.ZQ4D5K7J.js";
+import {
+  gdsCustomElement
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/primitives/signal/signal.ts
+import { html } from "lit/static-html.js";
+var GdsSignal = class extends GdsElement {
+  render() {
+    return html`<div part="signal"></div>`;
+  }
+};
+GdsSignal.styles = [tokens, signal_style_css_default];
+__decorateClass([
+  styleExpressionProperty({
+    valueTemplate: (v) => `var(--gds-color-${v})`,
+    selector: '[part="signal"]'
+  })
+], GdsSignal.prototype, "color", 2);
+GdsSignal = __decorateClass([
+  gdsCustomElement("gds-signal")
+], GdsSignal);
+
+export {
+  GdsSignal
+};

package/chunks/chunk.WZRLM4IU.js

@@ -0,0 +1,394 @@
+import {
+  forwardAttributes
+} from "./chunk.YBOK7MI7.js";
+import {
+  GdsFormControlElement
+} from "./chunk.2BMJPIND.js";
+import {
+  constrainSlots
+} from "./chunk.KBYQYDL3.js";
+import {
+  TransitionalStyles
+} from "./chunk.S7DYDS4E.js";
+import {
+  tokens
+} from "./chunk.ZFI2LPGC.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateSet
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/button/button.ts
+import { nothing, 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;
+  }
+}
+
+@layer a11y {
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      transition: none;
+    }
+  }
+}
+
+@layer core {
+  .button {
+    --_block-size: var(--gds-space-3xl);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    border: none;
+    cursor: pointer;
+    block-size: var(--_block-size);
+    background-color: var(--gds-color-l3-background-primary);
+    color: var(--gds-color-l3-content-primary);
+    border-radius: var(--gds-space-max);
+    font-family: inherit;
+    font-size: var(--gds-text-size-detail-m);
+    line-height: var(--gds-text-line-height-detail-m);
+    font-weight: var(--gds-text-weight-regular);
+    gap: var(--gds-space-s);
+    outline-color: transparent;
+    outline-offset: var(--gds-space-3xs);
+    outline-style: solid;
+    outline-width: var(--gds-space-3xs);
+    padding-block: var(--gds-space-s);
+    padding-inline: var(--gds-space-l);
+    position: relative;
+    text-decoration: none;
+    transition-property: color, border-color;
+    transition: all 0.4s;
+
+    &:focus {
+      outline-color: color-mix(in srgb, currentcolor, #000 100%);
+
+      &:not(:focus-visible) {
+        outline-color: transparent;
+      }
+    }
+
+    .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);
+      }
+
+      :active & {
+        background-color: var(--gds-color-l3-states-dark-pressed);
+      }
+    }
+
+    &:not(.circle) slot:not([name]) {
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 20ch;
+    }
+  }
+}
+
+/* High specificity */
+.button.circle {
+  aspect-ratio: 1/1;
+  padding: 0;
+}
+
+.button:disabled {
+  pointer-events: none;
+  background-color: var(--gds-color-l3-background-disabled);
+  color: var(--gds-color-l3-content-disabled);
+}
+
+@layer ranks {
+  :host([rank*='secondary']) .button {
+    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);
+      }
+
+      :active & {
+        background-color: var(--gds-color-l3-states-light-pressed);
+      }
+    }
+  }
+
+  :host([rank*='tertiary']) .button {
+    background-color: transparent;
+    color: var(--gds-color-l3-content-tertiary);
+
+    .state {
+      :hover & {
+        background-color: var(--gds-color-l3-states-light-hover);
+      }
+
+      :active & {
+        background-color: var(--gds-color-l3-states-light-pressed);
+      }
+    }
+  }
+}
+
+@layer sizes {
+  :host([size='small']) .button {
+    --_block-size: var(--gds-space-xl);
+    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='medium']) .button {
+    --_block-size: var(--gds-space-2xl);
+    font-size: var(--gds-text-size-detail-m);
+    line-height: var(--gds-text-line-height-detail-m);
+  }
+}
+
+@layer variants {
+  .positive {
+    background-color: var(--gds-color-l3c-background-positive);
+
+    .state {
+      :where(.secondary, .tertiary):hover & {
+        background-color: var(--gds-color-l3-states-positive-hover);
+      }
+
+      :where(.secondary, .tertiary):active & {
+        background-color: var(--gds-color-l3-states-positive-pressed);
+      }
+    }
+
+    &.secondary {
+      background-color: var(--gds-color-l3c-background-positive-secondary);
+      color: var(--gds-color-l3c-content-positive);
+    }
+
+    &.tertiary {
+      background-color: transparent;
+      color: var(--gds-color-l3c-content-positive);
+    }
+  }
+
+  .negative {
+    background-color: var(--gds-color-l3c-background-negative);
+
+    .state {
+      :where(.secondary, .tertiary):hover & {
+        background-color: var(--gds-color-l3-states-negative-hover);
+      }
+
+      :where(.secondary, .tertiary):active & {
+        background-color: var(--gds-color-l3-states-negative-pressed);
+      }
+    }
+
+    &.secondary {
+      background-color: var(--gds-color-l3c-background-negative-secondary);
+      color: var(--gds-color-l3c-content-negative);
+    }
+
+    &.tertiary {
+      background-color: transparent;
+      color: var(--gds-color-l3c-content-negative);
+    }
+  }
+}
+`;
+
+// libs/core/src/utils/helpers/strip-white-space.ts
+var templateCache = /* @__PURE__ */ new WeakMap();
+function stripWhitespace(extendedTag) {
+  return (strings, ...values) => {
+    let modstrings = templateCache.get(strings);
+    if (!modstrings) {
+      modstrings = strings.map((s) => s.replace(/\n[\s]+</gm, "<"));
+      modstrings.raw = strings.raw;
+      templateCache.set(strings, modstrings);
+    }
+    return extendedTag(modstrings, ...values);
+  };
+}
+
+// libs/core/src/components/button/button.ts
+var html2 = stripWhitespace(html);
+var _isIconButton, _isLink, isLink_get, _defaultRel, defaultRel_get, _mainSlotChange, _handleClick;
+var GdsButton = class extends GdsFormControlElement {
+  constructor() {
+    super();
+    __privateAdd(this, _isLink);
+    __privateAdd(this, _defaultRel);
+    this.disabled = false;
+    this.rank = "primary";
+    this.variant = "neutral";
+    this.size = "medium";
+    this.label = "";
+    this.href = "";
+    __privateAdd(this, _isIconButton, false);
+    // Check if the button is an icon button.
+    __privateAdd(this, _mainSlotChange, () => {
+      var _a, _b;
+      const assignedNodes = (_b = (_a = this._mainSlot) == null ? void 0 : _a.assignedNodes()) != null ? _b : [];
+      __privateSet(this, _isIconButton, assignedNodes.length === 1 && assignedNodes.some(
+        (node) => node.nodeName.toLowerCase().startsWith("gds-icon")
+      ));
+      this.requestUpdate();
+    });
+    __privateAdd(this, _handleClick, (e) => {
+      this.dispatchEvent(
+        new CustomEvent("gds-click", {
+          bubbles: true,
+          composed: true,
+          detail: e
+        })
+      );
+      if (this.form && !__privateGet(this, _isLink, isLink_get)) {
+        if (this.type === "submit") {
+          this.form.requestSubmit();
+        } else if (this.type === "reset") {
+          this.form.reset();
+        }
+      }
+    });
+    constrainSlots(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "none");
+    TransitionalStyles.instance.apply(this, "gds-button");
+  }
+  render() {
+    const buttonClasses = {
+      button: true,
+      circle: __privateGet(this, _isIconButton),
+      icon: __privateGet(this, _isIconButton),
+      small: this.size === "small",
+      large: this.size === "large",
+      positive: this.variant === "positive",
+      negative: this.variant === "negative",
+      primary: this.rank === "primary",
+      secondary: this.rank === "secondary",
+      tertiary: this.rank === "tertiary"
+    };
+    const tag = __privateGet(this, _isLink, isLink_get) ? literal`a` : literal`button`;
+    return staticHtml`
+      <${tag}
+        class=${classMap(buttonClasses)}
+        type="${ifDefined(__privateGet(this, _isLink, isLink_get) ? void 0 : this.type)}"
+        ?disabled="${this.disabled}"
+        aria-label=${this.label || nothing}
+        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)}
+        download=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.download : void 0)}
+        part="_button"
+        @click="${__privateGet(this, _handleClick)}"
+        ${forwardAttributes(
+      (attr) => attr.name.startsWith("gds-aria") || attr.name === "gds-role"
+    )}
+      >
+        <slot name="lead"></slot>
+        <slot @slotchange=${__privateGet(this, _mainSlotChange)}></slot>
+        <slot name="trail"></slot>
+        ${when(
+      !this._isUsingTransitionalStyles,
+      () => html2`<gds-ripple part="_ripple"></gds-ripple>`
+    )}
+        <div class="state"></div>
+      </${tag}>
+    `;
+  }
+  _getValidityAnchor() {
+    return this._button;
+  }
+};
+_isIconButton = new WeakMap();
+_isLink = new WeakSet();
+isLink_get = function() {
+  return this.href.length > 0;
+};
+_defaultRel = new WeakSet();
+defaultRel_get = function() {
+  return this.target === "_blank" ? "noreferrer noopener" : void 0;
+};
+_mainSlotChange = new WeakMap();
+_handleClick = new WeakMap();
+GdsButton.styles = [tokens, unsafeCSS(button_style_default)];
+/**
+ * @internal
+ */
+GdsButton.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], GdsButton.prototype, "type", 2);
+__decorateClass([
+  property({ reflect: true })
+], GdsButton.prototype, "rank", 2);
+__decorateClass([
+  property({ reflect: true })
+], GdsButton.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], GdsButton.prototype, "size", 2);
+__decorateClass([
+  property()
+], GdsButton.prototype, "label", 2);
+__decorateClass([
+  property()
+], GdsButton.prototype, "href", 2);
+__decorateClass([
+  property()
+], GdsButton.prototype, "target", 2);
+__decorateClass([
+  property()
+], GdsButton.prototype, "rel", 2);
+__decorateClass([
+  property()
+], GdsButton.prototype, "download", 2);
+__decorateClass([
+  query("slot:not([name])")
+], GdsButton.prototype, "_mainSlot", 2);
+__decorateClass([
+  query(".button")
+], GdsButton.prototype, "_button", 2);
+GdsButton = __decorateClass([
+  gdsCustomElement("gds-button")
+], GdsButton);
+
+export {
+  GdsButton
+};

package/chunks/chunk.YBOK7MI7.js

@@ -0,0 +1,31 @@
+// 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);
+
+export {
+  forwardAttributes
+};

package/chunks/{chunk.J5IZQIXN.js → chunk.YUMPRKYF.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk.S7DYDS4E.js";
 import {
   tokens
-} from "./chunk.OYCRDQFS.js";
+} from "./chunk.ZFI2LPGC.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";