@sebgroup/green-core 3.28.0 → 3.29.0

package/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -7,10 +7,18 @@ declare class CheckboxGroup extends GdsFormControlElement<string[]> {
      * Controls the font-size of label and supporting text on group form control header and single checkbox buttons respectively.
      */
     size: 'large' | 'small';
+    /**
+     * Style Expression Property that controls the `flex-direction` property of
+     * the checkbox list. Supports all valid CSS `flex-direction` values.
+     */
+    'flex-direction'?: string;
     /**
      * The flex-direction in which checkbox buttons are displayed.
+     *
+     * @deprecated Use `flex-direction` instead.
      */
-    flexDirection: 'row' | 'column';
+    get flexDirection(): string | undefined;
+    set flexDirection(value: string | undefined);
     /**
      * Whether to hide the label for the checkbox group. Usable if you want a single checkbox to act as the label.
      */

package/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -13,6 +13,7 @@ import { GdsFormControlHeader } from "../../../primitives/form-control-header/fo
 import { gdsCustomElement, html } from "../../../scoping.js";
 import { observeLightDOM } from "../../../utils/decorators/index.js";
 import { ariaForwarding } from "../../../utils/decorators/aria-forwarding.js";
+import { styleExpressionProperty } from "../../../utils/decorators/style-expression-property.js";
 import { watch } from "../../../utils/decorators/watch.js";
 import {
   withLayoutChildProps,
@@ -26,7 +27,6 @@ let CheckboxGroup = class extends GdsFormControlElement {
     super(...arguments);
     __privateAdd(this, _CheckboxGroup_instances);
     this.size = "large";
-    this.flexDirection = "column";
     this.hideLabel = false;
     this.supportingText = "";
     this.showExtendedSupportingText = false;
@@ -38,6 +38,17 @@ let CheckboxGroup = class extends GdsFormControlElement {
       });
     });
   }
+  /**
+   * The flex-direction in which checkbox buttons are displayed.
+   *
+   * @deprecated Use `flex-direction` instead.
+   */
+  get flexDirection() {
+    return this["flex-direction"];
+  }
+  set flexDirection(value) {
+    this["flex-direction"] = value;
+  }
   get value() {
     return this._internalValue || [];
   }
@@ -73,15 +84,10 @@ let CheckboxGroup = class extends GdsFormControlElement {
     this.addEventListener("gds-validity-state", __privateGet(this, _syncCheckboxes));
   }
   render() {
-    const classes = {
-      "checkbox-group": true,
-      "direction-row": this.flexDirection === "row",
-      "direction-column": this.flexDirection === "column"
-    };
     return html`<div
       role="group"
       id="checkboxgroup"
-      class=${classMap(classes)}
+      class="checkbox-group"
       aria-labelledby="group-label"
       aria-describedby="supporting-text extended-supporting-text footer"
       aria-invalid=${this.invalid}
@@ -162,8 +168,8 @@ __decorateClass([
   property()
 ], CheckboxGroup.prototype, "size", 2);
 __decorateClass([
-  property({ attribute: "flex-direction" })
-], CheckboxGroup.prototype, "flexDirection", 2);
+  styleExpressionProperty({ selector: ".content" })
+], CheckboxGroup.prototype, "flex-direction", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "hide-label" })
 ], CheckboxGroup.prototype, "hideLabel", 2);

package/components/checkbox/checkbox-group/checkbox-group.styles.js

@@ -38,27 +38,18 @@ const styles = css`
 
   .content {
     display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    /* row-gap/column-gap set once: the browser only renders whichever axis the
+       resolved flex-direction actually uses, so this reproduces the former
+       per-direction gap values without needing to key off direction. */
+    gap: var(--gds-sys-space-s) var(--gds-sys-space-xl);
     position: relative;
     max-width: max-content;
     color: var(--_checkbox-label-color);
   }
 
-  .direction-row .content {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: var(--gds-sys-space-s) var(--gds-sys-space-xl);
-  }
-
-  .direction-column .content {
-    flex-direction: column;
-    gap: var(--gds-sys-space-s);
-  }
-
-  :host([size='small']) .direction-column .content {
-    gap: var(--gds-sys-space-xs);
-  }
-
-  :host([size='small']) .direction-row .content {
+  :host([size='small']) .content {
     gap: var(--gds-sys-space-xs) var(--gds-sys-space-m);
   }
 

package/components/radio/radio-group/radio-group.component.d.ts

@@ -7,10 +7,18 @@ declare class RadioGroup extends GdsFormControlElement<string | boolean> {
      * Controls the font-size of label and supporting text on group form control header and single radio buttons respectively.
      */
     size: 'large' | 'small';
+    /**
+     * Style Expression Property that controls the `flex-direction` property of
+     * the radio list. Supports all valid CSS `flex-direction` values.
+     */
+    'flex-direction'?: string;
     /**
      * The flex-direction in which radio buttons are displayed.
+     *
+     * @deprecated Use `flex-direction` instead.
      */
-    flexDirection: 'row' | 'column';
+    get flexDirection(): string | undefined;
+    set flexDirection(value: string | undefined);
     /**
      * The supporting text displayed between the label and the field.
      * This text provides additional context or information to the user.

package/components/radio/radio-group/radio-group.component.js

@@ -6,12 +6,12 @@ import {
 var _RadioGroup_instances, initializeFocusable_fn, handleFocus_fn, dispatchChangeEvents_fn, handleRadioChange_fn, handleKeyDown_fn, focusAndSelectRadio_fn, renderRadioGroupContents_fn, renderFieldControlHeader_fn, renderRadios_fn, renderFieldControlFooter_fn;
 import { localized } from "@lit/localize";
 import { property, query } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { GdsFormControlFooter } from "../../../primitives/form-control-footer/form-control-footer.component.js";
 import { GdsFormControlHeader } from "../../../primitives/form-control-header/form-control-header.component.js";
 import { gdsCustomElement, html } from "../../../scoping.js";
 import { tokens } from "../../../tokens.style.js";
 import { ariaForwarding } from "../../../utils/decorators/aria-forwarding.js";
+import { styleExpressionProperty } from "../../../utils/decorators/style-expression-property.js";
 import { watch } from "../../../utils/decorators/watch.js";
 import {
   withLayoutChildProps,
@@ -25,11 +25,21 @@ let RadioGroup = class extends GdsFormControlElement {
     super(...arguments);
     __privateAdd(this, _RadioGroup_instances);
     this.size = "large";
-    this.flexDirection = "column";
     this.supportingText = "";
     this.showExtendedSupportingText = false;
     this._isConnected = false;
   }
+  /**
+   * The flex-direction in which radio buttons are displayed.
+   *
+   * @deprecated Use `flex-direction` instead.
+   */
+  get flexDirection() {
+    return this["flex-direction"];
+  }
+  set flexDirection(value) {
+    this["flex-direction"] = value;
+  }
   /**
    * Returns an array of `<gds-radio>` elements in the radio group.
    *
@@ -80,15 +90,10 @@ let RadioGroup = class extends GdsFormControlElement {
     });
   }
   render() {
-    const classes = {
-      "radio-group": true,
-      "direction-row": this.flexDirection === "row",
-      "direction-column": this.flexDirection === "column"
-    };
     return html`<div
       role="radiogroup"
       id="radiogroup"
-      class=${classMap(classes)}
+      class="radio-group"
       aria-labelledby="group-label"
       aria-describedby="supporting-text extended-supporting-text footer"
       aria-invalid=${this.invalid}
@@ -236,8 +241,8 @@ __decorateClass([
   property()
 ], RadioGroup.prototype, "size", 2);
 __decorateClass([
-  property({ attribute: "flex-direction" })
-], RadioGroup.prototype, "flexDirection", 2);
+  styleExpressionProperty({ selector: ".content" })
+], RadioGroup.prototype, "flex-direction", 2);
 __decorateClass([
   property({ attribute: "supporting-text" })
 ], RadioGroup.prototype, "supportingText", 2);

package/components/radio/radio-group/radio-group.styles.js

@@ -34,27 +34,18 @@ const styles = css`
 
   .content {
     display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    /* row-gap/column-gap set once: the browser only renders whichever axis the
+       resolved flex-direction actually uses, so this reproduces the former
+       per-direction gap values without needing to key off direction. */
+    gap: var(--gds-sys-space-s) var(--gds-sys-space-xl);
     position: relative;
     max-width: max-content;
     color: var(--_radio-label-color);
   }
 
-  .direction-row .content {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: var(--gds-sys-space-s) var(--gds-sys-space-xl);
-  }
-
-  .direction-column .content {
-    flex-direction: column;
-    gap: var(--gds-sys-space-s);
-  }
-
-  :host([size='small']) .direction-column .content {
-    gap: var(--gds-sys-space-xs);
-  }
-
-  :host([size='small']) .direction-row .content {
+  :host([size='small']) .content {
     gap: var(--gds-sys-space-xs) var(--gds-sys-space-m);
   }
 `;