@sebgroup/green-core 1.68.5 → 1.69.0

package/chunks/chunk.ITT4IIHM.js

@@ -0,0 +1,378 @@
+import {
+  GdsFormControlElement
+} from "./chunk.VA6TUMR2.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withSizeXProps
+} from "./chunk.TWXTKG4B.js";
+import {
+  watch
+} from "./chunk.TYGMNHNO.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.QK3R23GV.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod
+} from "./chunk.SEHSDSX2.js";
+
+// libs/core/src/components/radio/radio-group/radio-group.ts
+import { localized } from "@lit/localize";
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+
+// libs/core/src/components/radio/radio-group/radio-group.styles.ts
+import { css } from "lit";
+var styles = css`
+  :host {
+    --radio-bg-mix: color-mix(
+      in srgb,
+      var(--gds-color-l3-background-secondary),
+      var(--gds-color-l3-states-light-hover)
+    );
+    --radio-bg-mix-active: color-mix(
+      in srgb,
+      var(--gds-color-l3-background-secondary),
+      var(--gds-color-l3-states-light-pressed)
+    );
+
+    --radio-size: var(--gds-space-xl);
+    --radio-disc-size: var(--gds-space-m);
+    --radio-radius: var(--gds-space-max);
+    --radio-border-color: var(--gds-color-l3-border-secondary);
+    --radio-border-color-selected: var(--gds-color-l3-border-primary);
+    --radio-border-width: var(--gds-space-4xs);
+    --radio-border-width-selected: var(--gds-space-2xs);
+    --radio-outline-width: var(--gds-space-3xs);
+    --radio-disc-background-color: var(--gds-color-l3-content-primary);
+
+    /* Font Sizes */
+    --_font-size-label: var(--gds-text-size-detail-m);
+    --_line-height-label: var(--gds-text-line-height-detail-m);
+    --_font-size-supporting-text: var(--gds-text-size-detail-s);
+    --_line-height-supporting-text: var(--gds-text-line-height-detail-s);
+    font-size: var(--_font-size-label);
+    line-height: var(--_line-height-label);
+
+    /* Color */
+    --_radio-label-color: var(--gds-color-l3-content-tertiary);
+    --_radio-outline-color: var(--gds-color-l3-content-tertiary);
+  }
+
+  :host(:invalid) {
+    --radio-border-color: var(--gds-color-l3-border-negative);
+    --radio-disc-background-color: var(
+      --gds-color-l3-background-negative-secondary
+    );
+    --radio-border-color-selected: var(--gds-color-l3-border-negative);
+    --radio-bg-mix: color-mix(
+      in srgb,
+      var(--gds-color-l3-background-negative-secondary),
+      var(--gds-color-l3-states-negative-hover)
+    );
+    --radio-bg-mix-active: color-mix(
+      in srgb,
+      var(--gds-color-l3-background-negative-secondary),
+      var(--gds-color-l3-states-negative-pressed)
+    );
+    --_radio-label-color: var(--gds-color-l3-content-negative);
+    --_radio-outline-color: var(--gds-color-l3-content-negative);
+  }
+
+  :host([size='small']) {
+    --_font-size-label: var(--gds-text-size-detail-s);
+    --_line-height-label: var(--gds-text-line-height-detail-s);
+    --_font-size-supporting-text: var(--gds-text-size-detail-s);
+    --_line-height-supporting-text: var(--gds-text-line-height-detail-s);
+  }
+
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gds-space-m);
+  }
+
+  .content {
+    display: flex;
+    position: relative;
+    max-width: max-content;
+    color: var(--_radio-label-color);
+  }
+
+  .direction-row .content {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--gds-space-l);
+  }
+
+  .direction-column .content {
+    flex-direction: column;
+    gap: var(--gds-space-xs);
+  }
+`;
+
+// libs/core/src/components/radio/radio-group/radio-group.ts
+var _initializeFocusable, initializeFocusable_fn, _handleFocus, handleFocus_fn, _dispatchChangeEvents, dispatchChangeEvents_fn, _handleRadioChange, handleRadioChange_fn, _handleKeyDown, handleKeyDown_fn, _focusAndSelectRadio, focusAndSelectRadio_fn, _renderRadioGroupContents, renderRadioGroupContents_fn, _renderFieldControlHeader, renderFieldControlHeader_fn, _renderRadios, renderRadios_fn, _renderFieldControlFooter, renderFieldControlFooter_fn;
+var RadioGroup = class extends GdsFormControlElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _initializeFocusable);
+    __privateAdd(this, _handleFocus);
+    __privateAdd(this, _dispatchChangeEvents);
+    __privateAdd(this, _handleRadioChange);
+    __privateAdd(this, _handleKeyDown);
+    __privateAdd(this, _focusAndSelectRadio);
+    __privateAdd(this, _renderRadioGroupContents);
+    __privateAdd(this, _renderFieldControlHeader);
+    __privateAdd(this, _renderRadios);
+    __privateAdd(this, _renderFieldControlFooter);
+    this.size = "large";
+    this.direction = "column";
+    this.supportingText = "";
+    this.showExtendedSupportingText = false;
+    this._isConnected = false;
+  }
+  /**
+   * Returns an array of `<gds-radio>` elements in the radio group.
+   *
+   * @readonly
+   */
+  get radios() {
+    return Array.from(
+      this.querySelectorAll("[gds-element=gds-radio]")
+    );
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._isConnected = true;
+    this.updateComplete.then(() => {
+      this._syncRadioStates();
+      __privateMethod(this, _initializeFocusable, initializeFocusable_fn).call(this);
+    });
+    this.addEventListener("invalid", this._syncRadioStates);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._isConnected = false;
+    this.removeEventListener("invalid", this._syncRadioStates);
+  }
+  _getValidityAnchor() {
+    return this._contentElement;
+  }
+  _handleValueChange() {
+    if (!this._isConnected)
+      return;
+    this._syncRadioStates();
+    this.updateComplete.then(() => {
+      __privateMethod(this, _initializeFocusable, initializeFocusable_fn).call(this);
+    });
+  }
+  _syncRadioStates() {
+    if (!this._isConnected)
+      return;
+    this.radios.forEach((radio) => {
+      radio.checked = radio.value === this.value;
+      radio.size = this.size;
+      radio.invalid = this.invalid;
+    });
+  }
+  render() {
+    const classes = {
+      "radio-group": true,
+      "direction-row": this.direction === "row",
+      "direction-column": this.direction === "column"
+    };
+    return html`<div
+      role="radiogroup"
+      id="radiogroup"
+      class=${classMap(classes)}
+      aria-labelledby="group-label"
+      aria-describedby="supporting-text extended-supporting-text footer"
+    >
+      ${__privateMethod(this, _renderRadioGroupContents, renderRadioGroupContents_fn).call(this)}
+    </div>`;
+  }
+};
+_initializeFocusable = new WeakSet();
+initializeFocusable_fn = function() {
+  if (!this._contentElement || !this._isConnected)
+    return;
+  const selectedRadio = this.radios.find((radio) => radio.checked);
+  if (selectedRadio) {
+    selectedRadio.setAttribute("tabindex", "0");
+    this._contentElement.setAttribute("tabindex", "-1");
+  } else {
+    this._contentElement.setAttribute("tabindex", "0");
+  }
+  this.radios.filter((radio) => !radio.checked).forEach((radio) => radio.setAttribute("tabindex", "-1"));
+};
+_handleFocus = new WeakSet();
+handleFocus_fn = function() {
+  if (!this._contentElement || !this._isConnected)
+    return;
+  const selectedRadio = this.radios.find((radio) => radio.checked);
+  const radioToFocus = selectedRadio || this.radios[0];
+  if (radioToFocus) {
+    radioToFocus.focus();
+    if (!selectedRadio) {
+      this.radios.forEach((radio) => radio.setAttribute("tabindex", "-1"));
+      radioToFocus.setAttribute("tabindex", "0");
+      this._contentElement.setAttribute("tabindex", "-1");
+    }
+  }
+};
+_dispatchChangeEvents = new WeakSet();
+dispatchChangeEvents_fn = function() {
+  this.dispatchEvent(
+    new CustomEvent("change", {
+      detail: { value: this.value },
+      bubbles: true
+    })
+  );
+  this.dispatchEvent(new Event("input", { bubbles: true }));
+};
+_handleRadioChange = new WeakSet();
+handleRadioChange_fn = function(e) {
+  const radio = e.target;
+  if (radio.hasAttribute("value")) {
+    this.value = radio.value;
+    this._syncRadioStates();
+    __privateMethod(this, _dispatchChangeEvents, dispatchChangeEvents_fn).call(this);
+  }
+};
+_handleKeyDown = new WeakSet();
+handleKeyDown_fn = function(e) {
+  if (!this._isConnected)
+    return;
+  const radios = this.radios.filter(
+    (radio) => !radio.hasAttribute("disabled")
+  );
+  if (radios.length === 0)
+    return;
+  let currentIndex = radios.findIndex(
+    (radio) => document.activeElement === radio
+  );
+  if (currentIndex === -1) {
+    currentIndex = radios.findIndex((radio) => radio.checked);
+    if (currentIndex === -1)
+      currentIndex = 0;
+  }
+  switch (e.key) {
+    case "ArrowDown":
+    case "ArrowRight": {
+      e.preventDefault();
+      const nextIndex = (currentIndex + 1) % radios.length;
+      __privateMethod(this, _focusAndSelectRadio, focusAndSelectRadio_fn).call(this, radios[nextIndex]);
+      break;
+    }
+    case "ArrowUp":
+    case "ArrowLeft": {
+      e.preventDefault();
+      const nextIndex = (currentIndex - 1 + radios.length) % radios.length;
+      __privateMethod(this, _focusAndSelectRadio, focusAndSelectRadio_fn).call(this, radios[nextIndex]);
+      break;
+    }
+    default:
+      return;
+  }
+};
+_focusAndSelectRadio = new WeakSet();
+focusAndSelectRadio_fn = function(radio) {
+  if (!this._contentElement || !this._isConnected)
+    return;
+  this.radios.forEach((r) => r.setAttribute("tabindex", "-1"));
+  radio.setAttribute("tabindex", "0");
+  this._contentElement.setAttribute("tabindex", "-1");
+  radio.checked = true;
+  radio.focus();
+  this.value = radio.value;
+  this._syncRadioStates();
+  __privateMethod(this, _dispatchChangeEvents, dispatchChangeEvents_fn).call(this);
+};
+_renderRadioGroupContents = new WeakSet();
+renderRadioGroupContents_fn = function() {
+  const elements = [
+    __privateMethod(this, _renderFieldControlHeader, renderFieldControlHeader_fn).call(this),
+    __privateMethod(this, _renderRadios, renderRadios_fn).call(this),
+    __privateMethod(this, _renderFieldControlFooter, renderFieldControlFooter_fn).call(this)
+  ];
+  return elements.map((element) => html`${element}`);
+};
+_renderFieldControlHeader = new WeakSet();
+renderFieldControlHeader_fn = function() {
+  if (this.label) {
+    return html` <gds-form-control-header class="size-${this.size}">
+        <label id="group-label" slot="label">${this.label}</label>
+        <span slot="supporting-text" id="supporting-text">
+          ${this.supportingText}
+        </span>
+        <slot
+          id="extended-supporting-text"
+          name="extended-supporting-text"
+          slot="extended-supporting-text"
+        ></slot>
+      </gds-form-control-header>`;
+  }
+};
+_renderRadios = new WeakSet();
+renderRadios_fn = function() {
+  return html` <div
+      class="content"
+      @keydown=${__privateMethod(this, _handleKeyDown, handleKeyDown_fn)}
+      @focus=${__privateMethod(this, _handleFocus, handleFocus_fn)}
+    >
+      <slot @gds-radio-change=${__privateMethod(this, _handleRadioChange, handleRadioChange_fn)}></slot>
+    </div>`;
+};
+_renderFieldControlFooter = new WeakSet();
+renderFieldControlFooter_fn = function() {
+  return html` <gds-form-control-footer
+      id="footer"
+      class="size-${this.size}"
+      .validationMessage=${this.invalid && (this.errorMessage || this.validationMessage)}
+    >
+    </gds-form-control-footer>`;
+};
+RadioGroup.styles = [styles];
+__decorateClass([
+  property()
+], RadioGroup.prototype, "size", 2);
+__decorateClass([
+  property()
+], RadioGroup.prototype, "direction", 2);
+__decorateClass([
+  property({ attribute: "supporting-text" })
+], RadioGroup.prototype, "supportingText", 2);
+__decorateClass([
+  property({
+    attribute: "show-extended-supporting-text",
+    type: Boolean,
+    reflect: true
+  })
+], RadioGroup.prototype, "showExtendedSupportingText", 2);
+__decorateClass([
+  query(".content")
+], RadioGroup.prototype, "_contentElement", 2);
+__decorateClass([
+  watch("value")
+], RadioGroup.prototype, "_handleValueChange", 1);
+__decorateClass([
+  watch("invalid")
+], RadioGroup.prototype, "_syncRadioStates", 1);
+RadioGroup = __decorateClass([
+  localized()
+], RadioGroup);
+var GdsRadioGroup = class extends withLayoutChildProps(
+  withMarginProps(withSizeXProps(RadioGroup))
+) {
+};
+GdsRadioGroup = __decorateClass([
+  gdsCustomElement("gds-radio-group")
+], GdsRadioGroup);
+
+export {
+  GdsRadioGroup
+};

package/chunks/{chunk.KFICL24P.js → chunk.JFJHA6P6.js}

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

package/chunks/{chunk.XB7K3C5P.js → chunk.JIL3VXPT.js}

@@ -1,9 +1,9 @@
 import {
   GdsDiv
-} from "./chunk.R7PMRDER.js";
+} from "./chunk.FIRXUEIK.js";
 import {
   tokens
-} from "./chunk.NGISBDVX.js";
+} from "./chunk.OGXYFLYC.js";
 import {
   gdsCustomElement,
   html

package/chunks/{chunk.L5PE6QYR.js → chunk.JLTWJMDP.js}

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

package/chunks/{chunk.3ER354IV.js → chunk.LUSRFI2X.js}

@@ -4,10 +4,10 @@ import {
 } from "./chunk.TWXTKG4B.js";
 import {
   TransitionalStyles
-} from "./chunk.Y2NHXTDW.js";
+} from "./chunk.NHCDT25A.js";
 import {
   tokens
-} from "./chunk.NGISBDVX.js";
+} from "./chunk.OGXYFLYC.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.XHLTNW7U.js → chunk.N6GUDNJV.js}

@@ -1,12 +1,12 @@
 import {
   GdsFlex
-} from "./chunk.XB7K3C5P.js";
+} from "./chunk.JIL3VXPT.js";
 import {
   styleExpressionProperty
 } from "./chunk.NUUST5OZ.js";
 import {
   tokens
-} from "./chunk.NGISBDVX.js";
+} from "./chunk.OGXYFLYC.js";
 import {
   gdsCustomElement
 } from "./chunk.QK3R23GV.js";

package/chunks/{chunk.Y2NHXTDW.js → chunk.NHCDT25A.js}

@@ -1,6 +1,6 @@
 import {
   tokens
-} from "./chunk.NGISBDVX.js";
+} from "./chunk.OGXYFLYC.js";
 import {
   VER_SUFFIX
 } from "./chunk.QK3R23GV.js";

package/chunks/{chunk.JO7TMUNS.js → chunk.NQQAFN6S.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.TWXTKG4B.js";
 import {
   tokens
-} from "./chunk.NGISBDVX.js";
+} from "./chunk.OGXYFLYC.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.M6XWWL3K.js → chunk.NSJATXHH.js}

@@ -4,13 +4,13 @@ import {
 } from "./chunk.ZRKILGXZ.js";
 import {
   TransitionalStyles
-} from "./chunk.Y2NHXTDW.js";
+} from "./chunk.NHCDT25A.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.NGISBDVX.js";
+} from "./chunk.OGXYFLYC.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";

package/chunks/{chunk.7Y2HXZTW.js → chunk.OGHRZS7Z.js}

@@ -1,6 +1,6 @@
 import {
   forwardAttributes
-} from "./chunk.W7XFAJ4E.js";
+} from "./chunk.I2YO744I.js";
 import {
   GdsFormControlElement
 } from "./chunk.VA6TUMR2.js";
@@ -11,7 +11,7 @@ import {
 } from "./chunk.TWXTKG4B.js";
 import {
   tokens
-} from "./chunk.NGISBDVX.js";
+} from "./chunk.OGXYFLYC.js";
 import {
   gdsCustomElement,
   html

package/chunks/{chunk.NGISBDVX.js → chunk.OGXYFLYC.js}

@@ -5,7 +5,7 @@ import {
 // dist/libs/tokens/internal/dark.css?inline
 var dark_default = `/**
  * Do not edit directly
- * Generated on Wed, 12 Mar 2025 20:07:25 GMT
+ * Generated on Thu, 13 Mar 2025 14:30:10 GMT
  */
 
 color-scheme: dark;
@@ -119,7 +119,7 @@ color-scheme: dark;
 // dist/libs/tokens/internal/light.css?inline
 var light_default = `/**
  * Do not edit directly
- * Generated on Wed, 12 Mar 2025 20:07:25 GMT
+ * Generated on Thu, 13 Mar 2025 14:30:10 GMT
  */
 
 color-scheme: light;
@@ -236,7 +236,7 @@ import { css, unsafeCSS } from "lit";
 // dist/libs/tokens/internal/motion.css?inline
 var motion_default = `/**
  * Do not edit directly
- * Generated on Wed, 12 Mar 2025 20:07:25 GMT
+ * Generated on Thu, 13 Mar 2025 14:30:10 GMT
  */
 
 :host {
@@ -255,7 +255,7 @@ var motion_default = `/**
 // dist/libs/tokens/internal/shadow.css?inline
 var shadow_default = `/**
  * Do not edit directly
- * Generated on Wed, 12 Mar 2025 20:07:25 GMT
+ * Generated on Thu, 13 Mar 2025 14:30:10 GMT
  */
 
 :host {
@@ -270,7 +270,7 @@ var shadow_default = `/**
 // dist/libs/tokens/internal/size.css?inline
 var size_default = `/**
  * Do not edit directly
- * Generated on Wed, 12 Mar 2025 20:07:25 GMT
+ * Generated on Thu, 13 Mar 2025 14:30:10 GMT
  */
 
 :host {
@@ -297,7 +297,7 @@ var size_default = `/**
 // dist/libs/tokens/internal/text.css?inline
 var text_default = `/**
  * Do not edit directly
- * Generated on Wed, 12 Mar 2025 20:07:25 GMT
+ * Generated on Thu, 13 Mar 2025 14:30:10 GMT
  */
 
 :host {

package/chunks/{chunk.L76SIVXL.js → chunk.Q3QF6FIQ.js}

@@ -1,12 +1,12 @@
 import {
   GdsDiv
-} from "./chunk.R7PMRDER.js";
+} from "./chunk.FIRXUEIK.js";
 import {
   styleExpressionProperty
 } from "./chunk.NUUST5OZ.js";
 import {
   tokens
-} from "./chunk.NGISBDVX.js";
+} from "./chunk.OGXYFLYC.js";
 import {
   gdsCustomElement,
   html

package/chunks/chunk.QK3R23GV.js

@@ -6,7 +6,7 @@ import {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-f5b7af";
+var VER_SUFFIX = "-1e0e02";
 var ScopedElementRegistry = class {
   static get instance() {
     var _a;

package/chunks/{chunk.F2SQQT5J.js → chunk.ST5QI4XQ.js}

@@ -12,13 +12,13 @@ import {
 } from "./chunk.TWXTKG4B.js";
 import {
   TransitionalStyles
-} from "./chunk.Y2NHXTDW.js";
+} from "./chunk.NHCDT25A.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.NGISBDVX.js";
+} from "./chunk.OGXYFLYC.js";
 import {
   gdsCustomElement,
   html

package/chunks/{chunk.FFOHUW46.js → chunk.UAED2ICJ.js}

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

package/chunks/{chunk.KC6Z3HNY.js → chunk.UR2O7OZR.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk.2JGBCOIQ.js";
 import {
   GdsDiv
-} from "./chunk.R7PMRDER.js";
+} from "./chunk.FIRXUEIK.js";
 import {
   styleExpressionProperty
 } from "./chunk.NUUST5OZ.js";
 import {
   tokens
-} from "./chunk.NGISBDVX.js";
+} from "./chunk.OGXYFLYC.js";
 import {
   gdsCustomElement
 } from "./chunk.QK3R23GV.js";

package/chunks/{chunk.M42OSKF3.js → chunk.VDIZOFXQ.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.NGISBDVX.js";
+} from "./chunk.OGXYFLYC.js";
 import {
   GdsElement
 } from "./chunk.TMEWQZER.js";