@sebgroup/green-core 3.25.2 → 3.26.0

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

@@ -11,8 +11,8 @@ 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 { ariaForwarding } from "../../../utils/decorators/aria-forwarding.js";
 import { observeLightDOM } from "../../../utils/decorators/index.js";
+import { ariaForwarding } from "../../../utils/decorators/aria-forwarding.js";
 import { watch } from "../../../utils/decorators/watch.js";
 import {
   withLayoutChildProps,
@@ -34,6 +34,7 @@ let CheckboxGroup = class extends GdsFormControlElement {
       this.checkboxes.forEach((checkbox) => {
         checkbox.invalid = this.invalid;
         checkbox.errorMessage = this.errorMessage;
+        checkbox.readonly = this.readonly || checkbox.readonly;
       });
     });
   }
@@ -187,7 +188,8 @@ __decorateClass([
 ], CheckboxGroup.prototype, "_handleValueChange", 1);
 __decorateClass([
   watch("invalid"),
-  watch("errorMessage")
+  watch("errorMessage"),
+  watch("readonly")
 ], CheckboxGroup.prototype, "_handleGroupInvalidChange", 1);
 __decorateClass([
   observeLightDOM({

package/components/checkbox/checkbox.component.js

@@ -28,6 +28,11 @@ let GdsCheckbox = class extends GdsFormControlElement {
     this.indeterminate = false;
     this.disabled = false;
     __privateAdd(this, _handleInputChange, () => {
+      if (this.readonly) {
+        this._elCheckbox.checked = this.checked;
+        this._elCheckbox.indeterminate = this.indeterminate;
+        return;
+      }
       if (this.indeterminate) {
         this.indeterminate = false;
         this.checked = false;
@@ -62,6 +67,7 @@ let GdsCheckbox = class extends GdsFormControlElement {
           ?disabled=${this.disabled}
           .indeterminate=${this.indeterminate}
           aria-invalid=${this.invalid}
+          aria-readonly=${this.readonly}
           aria-describedby="message supporting-text"
           id="checkbox-input"
           @change=${__privateGet(this, _handleInputChange)}
@@ -83,6 +89,7 @@ let GdsCheckbox = class extends GdsFormControlElement {
       checked: this.checked,
       indeterminate: this.indeterminate,
       disabled: this.disabled,
+      readonly: this.readonly,
       invalid: this.invalid
     })}
         </gds-toggle-control-base>
@@ -99,6 +106,10 @@ let GdsCheckbox = class extends GdsFormControlElement {
 _GdsCheckbox_instances = new WeakSet();
 toggleChecked_fn = function(e) {
   if (this.disabled || e.target instanceof HTMLLabelElement) return;
+  if (this.readonly) {
+    this._elCheckbox.focus();
+    return;
+  }
   if (this.indeterminate) {
     this.indeterminate = false;
   } else {

package/components/datepicker/date-part-spinner.d.ts

@@ -12,6 +12,10 @@ export declare class GdsDatePartSpinner extends GdsElement {
     length: number;
     min: number;
     max: number;
+    /**
+     * Whether the spinner is read-only. Keeps it focusable but blocks value changes.
+     */
+    readonly: boolean;
     displayValue: string;
     protected createRenderRoot(): this;
     connectedCallback(): void;

package/components/datepicker/date-part-spinner.js

@@ -18,6 +18,7 @@ let GdsDatePartSpinner = class extends GdsElement {
     this.length = 2;
     this.min = 0;
     this.max = Number.MAX_SAFE_INTEGER;
+    this.readonly = false;
     this.displayValue = __privateMethod(this, _GdsDatePartSpinner_instances, formatNumber_fn).call(this, this.value, this.length);
     __privateAdd(this, _inputBuffer, "");
     __privateAdd(this, _increment, () => {
@@ -51,6 +52,7 @@ let GdsDatePartSpinner = class extends GdsElement {
     __privateAdd(this, _handleWheel, (e) => {
       e.stopPropagation();
       e.preventDefault();
+      if (this.readonly) return;
       if (e.deltaY > 0) {
         __privateGet(this, _decrement).call(this);
       } else {
@@ -58,6 +60,7 @@ let GdsDatePartSpinner = class extends GdsElement {
       }
     });
     __privateAdd(this, _handleKeyDown, (e) => {
+      if (this.readonly) return;
       let handled = false;
       if (e.key === "ArrowUp") {
         __privateGet(this, _increment).call(this);
@@ -160,6 +163,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number, attribute: "aria-valuemax" })
 ], GdsDatePartSpinner.prototype, "max", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsDatePartSpinner.prototype, "readonly", 2);
 __decorateClass([
   state()
 ], GdsDatePartSpinner.prototype, "displayValue", 2);

package/components/datepicker/datepicker.component.d.ts

@@ -137,6 +137,7 @@ declare class Datepicker extends GdsFormControlElement<Date> {
     private _elFieldAsync;
     private _elSpinners;
     private _elField;
+    private _elReadonlyValue?;
     constructor();
     connectedCallback(): void;
     focus(options?: FocusOptions): void;

package/components/datepicker/datepicker.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.H2T4A5YY.js";
-var _utcHours, _focusedMonthOverride, _focusedYearOverride, _Datepicker_instances, defaultFocusedDate_get, _valueOnOpen, shouldShowFooter_fn, renderBackToValidRangeButton_fn, updateOutOfRangeAction_fn, normalizeDate_fn, focusDate_fn, isDateSelectable_fn, nearestSelectableDate_fn, shouldShowTodayButton_fn, getSpinnerLabel_fn, getMinSpinnerValue_fn, getMaxSpinnerValue_fn, getLocalizedPlaceholder_fn, getSpinnerValue_fn, dispatchChangeEvent_fn, dispatchInputEvent_fn, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, years_get, isValueOutsideRange_get;
+var _utcHours, _focusedMonthOverride, _focusedYearOverride, _Datepicker_instances, defaultFocusedDate_get, _valueOnOpen, shouldShowFooter_fn, renderReadonlyValue_fn, renderSpinners_fn, renderBackToValidRangeButton_fn, updateOutOfRangeAction_fn, normalizeDate_fn, focusDate_fn, isDateSelectable_fn, nearestSelectableDate_fn, shouldShowTodayButton_fn, getSpinnerLabel_fn, getMinSpinnerValue_fn, getMaxSpinnerValue_fn, getLocalizedPlaceholder_fn, getSpinnerValue_fn, dispatchChangeEvent_fn, dispatchInputEvent_fn, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, formattedDisplayValue_get, _handlePopoverStateChange, _handleSpinnerKeydown, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, years_get, isValueOutsideRange_get;
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query, queryAll, queryAsync, state } from "lit/decorators.js";
@@ -17,6 +17,7 @@ import { addDays, isSameDay, lastDayOfMonth, setHours } from "date-fns";
 import { GdsButton } from "../../components/button/button.component.js";
 import { GdsDropdown } from "../../components/dropdown/dropdown.component.js";
 import { GdsFlex } from "../../components/flex/flex.component.js";
+import { GdsFieldBase } from "../../primitives/field-base/field-base.component.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import formControlHostStyle from "../../shared-styles/form-control-host.style.js";
 import { tokens } from "../../tokens.style.js";
@@ -79,34 +80,37 @@ let Datepicker = class extends GdsFormControlElement {
       e.clipboardData?.setData("text/plain", this.displayValue);
     });
     __privateAdd(this, _handleClipboardPaste, (e) => {
-      if (e.currentTarget !== this._elField) return;
-      e.preventDefault();
-      const pasted = e.clipboardData?.getData("text/plain");
-      if (!pasted) return;
-      let pastedDate = /* @__PURE__ */ new Date("-");
-      const invalid = "Invalid Date";
-      const parts = pasted.split(this._dateFormatLayout.delimiter);
-      if (parts.length === 3) {
-        const layout = this._dateFormatLayout.layout;
-        const year = parseInt(parts[layout.findIndex((f) => f.token === "y")]);
-        const month = parseInt(parts[layout.findIndex((f) => f.token === "m")]) - 1;
-        const day = parseInt(parts[layout.findIndex((f) => f.token === "d")]);
-        if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {
-          pastedDate = /* @__PURE__ */ new Date(`${year}-${month + 1}-${day}`);
+      this._elFieldAsync.then((field) => {
+        if (e.currentTarget !== field) return;
+        e.preventDefault();
+        if (this.readonly) return;
+        const pasted = e.clipboardData?.getData("text/plain");
+        if (!pasted) return;
+        let pastedDate = /* @__PURE__ */ new Date("-");
+        const invalid = "Invalid Date";
+        const parts = pasted.split(this._dateFormatLayout.delimiter);
+        if (parts.length === 3) {
+          const layout = this._dateFormatLayout.layout;
+          const year = parseInt(parts[layout.findIndex((f) => f.token === "y")]);
+          const month = parseInt(parts[layout.findIndex((f) => f.token === "m")]) - 1;
+          const day = parseInt(parts[layout.findIndex((f) => f.token === "d")]);
+          if (!isNaN(year) && !isNaN(month) && !isNaN(day)) {
+            pastedDate = /* @__PURE__ */ new Date(`${year}-${month + 1}-${day}`);
+          }
         }
-      }
-      if (pastedDate.toString() === invalid) {
-        pastedDate = new Date(pasted);
         if (pastedDate.toString() === invalid) {
-          return;
+          pastedDate = new Date(pasted);
+          if (pastedDate.toString() === invalid) {
+            return;
+          }
         }
-      }
-      this.value = pastedDate;
-      __privateMethod(this, _Datepicker_instances, dispatchChangeEvent_fn).call(this);
-      __privateMethod(this, _Datepicker_instances, dispatchInputEvent_fn).call(this);
+        this.value = pastedDate;
+        __privateMethod(this, _Datepicker_instances, dispatchChangeEvent_fn).call(this);
+        __privateMethod(this, _Datepicker_instances, dispatchInputEvent_fn).call(this);
+      });
     });
     __privateAdd(this, _handleFieldClick, (e) => {
-      this._elSpinners[0]?.focus();
+      this._getValidityAnchor()?.focus();
     });
     __privateAdd(this, _handleCalendarChange, (e) => {
       e.stopPropagation();
@@ -150,6 +154,10 @@ let Datepicker = class extends GdsFormControlElement {
     });
     __privateAdd(this, _handlePopoverStateChange, async (e) => {
       if (e.target !== e.currentTarget) return;
+      if (this.readonly && e.detail.open) {
+        e.preventDefault();
+        return;
+      }
       this.open = e.detail.open;
       if (e.detail.reason === "close") {
         const calValue = (await this._elCalendar).value;
@@ -248,7 +256,7 @@ let Datepicker = class extends GdsFormControlElement {
    * Get a string representation of the currently displayed value in the input field. The formatting will match the dateformat attribute.
    */
   get displayValue() {
-    return this._elField.innerText.replace(/\s+/g, "");
+    return __privateGet(this, _Datepicker_instances, formattedDisplayValue_get);
   }
   /**
    * A reference to a date cell element (<td>) inside the shadow root of the calendar primitive.
@@ -297,7 +305,12 @@ let Datepicker = class extends GdsFormControlElement {
             class="size-${this.size}"
             .showExtendedSupportingText="${this.showExtendedSupportingText}"
           >
-            <label id="label" for="spinner-0" slot="label">${this.label}</label>
+            <label
+              id="label"
+              for=${this.readonly ? "datepicker-value" : "spinner-0"}
+              slot="label"
+              >${this.label}</label
+            >
             ${when(
         this.supportingText.length > 0,
         () => html`<span slot="supporting-text" id="supporting-text">
@@ -320,41 +333,14 @@ let Datepicker = class extends GdsFormControlElement {
       <gds-field-base
         .size=${this.size}
         .disabled=${this.disabled}
+        .readonly=${this.readonly}
         .invalid=${this.invalid}
         @click=${__privateGet(this, _handleFieldClick)}
         @copy=${__privateGet(this, _handleClipboardCopy)}
         @paste=${__privateGet(this, _handleClipboardPaste)}
         id="field"
       >
-        <div class="spinners">
-          ${join(
-      map(
-        this._dateFormatLayout.layout,
-        (f, i) => html`<gds-date-part-spinner
-                  id="spinner-${i}"
-                  aria-invalid="${this.invalid}"
-                  class="spinner"
-                  .length=${f.token === "y" ? 4 : 2}
-                  .value=${__privateMethod(this, _Datepicker_instances, getSpinnerValue_fn).call(this, f.name)}
-                  aria-valuemin=${__privateMethod(this, _Datepicker_instances, getMinSpinnerValue_fn).call(this, f.name)}
-                  aria-valuemax=${__privateMethod(this, _Datepicker_instances, getMaxSpinnerValue_fn).call(this, f.name)}
-                  aria-label=${__privateMethod(this, _Datepicker_instances, getSpinnerLabel_fn).call(this, f.name)}
-                  aria-describedby="supporting-text supporting-text-slot sub-label-slot message"
-                  data-max-width=${__privateMethod(this, _Datepicker_instances, getMaxSpinnerValue_fn).call(this, f.name).toString().length}
-                  @keydown=${__privateGet(this, _handleSpinnerKeydown)}
-                  @change=${(e) => __privateGet(this, _handleSpinnerChange).call(this, e.detail.value, f.name)}
-                  @focus=${__privateGet(this, _handleSpinnerFocus)}
-                  @touchend=${(e) => {
-          this.open = true;
-          e.preventDefault();
-        }}
-                ></gds-date-part-spinner>`
-      ),
-      html`<span class="separator"
-              >${this._dateFormatLayout.delimiter}</span
-            >`
-    )}
-        </div>
+        ${this.readonly ? __privateMethod(this, _Datepicker_instances, renderReadonlyValue_fn).call(this) : __privateMethod(this, _Datepicker_instances, renderSpinners_fn).call(this)}
         <gds-button
           id="calendar-button"
           slot="action"
@@ -366,7 +352,7 @@ let Datepicker = class extends GdsFormControlElement {
           aria-expanded=${this.open}
           aria-controls="calendar-popover"
           aria-describedby="label"
-          .disabled=${this.disabled}
+          .disabled=${this.disabled || this.readonly}
         >
           ${when(
       this.size === "small",
@@ -540,7 +526,7 @@ let Datepicker = class extends GdsFormControlElement {
     `;
   }
   _getValidityAnchor() {
-    return this._elSpinners[0];
+    return this.readonly ? this._elReadonlyValue || this._elField : this._elSpinners[0];
   }
   _handleOutOfRangeChange() {
     __privateMethod(this, _Datepicker_instances, updateOutOfRangeAction_fn).call(this);
@@ -584,6 +570,48 @@ _valueOnOpen = new WeakMap();
 shouldShowFooter_fn = function() {
   return !this.plain;
 };
+renderReadonlyValue_fn = function() {
+  return html`<div
+      id="datepicker-value"
+      class="spinners readonly-value"
+      aria-describedby="supporting-text supporting-text-slot sub-label-slot message"
+      aria-invalid="${this.invalid}"
+      tabindex="0"
+    >
+      ${__privateGet(this, _Datepicker_instances, formattedDisplayValue_get)}
+    </div>`;
+};
+renderSpinners_fn = function() {
+  return html`<div class="spinners">
+      ${join(
+    map(
+      this._dateFormatLayout.layout,
+      (f, i) => html`<gds-date-part-spinner
+              id="spinner-${i}"
+              aria-invalid="${this.invalid}"
+              class="spinner"
+              .length=${f.token === "y" ? 4 : 2}
+              .value=${__privateGet(this, _spinnerState)[f.name]}
+              aria-valuemin=${__privateMethod(this, _Datepicker_instances, getMinSpinnerValue_fn).call(this, f.name)}
+              aria-valuemax=${__privateMethod(this, _Datepicker_instances, getMaxSpinnerValue_fn).call(this, f.name)}
+              aria-label=${__privateMethod(this, _Datepicker_instances, getSpinnerLabel_fn).call(this, f.name)}
+              aria-describedby="supporting-text supporting-text-slot sub-label-slot message"
+              data-max-width=${__privateMethod(this, _Datepicker_instances, getMaxSpinnerValue_fn).call(this, f.name).toString().length}
+              @keydown=${__privateGet(this, _handleSpinnerKeydown)}
+              @change=${(e) => __privateGet(this, _handleSpinnerChange).call(this, e.detail.value, f.name)}
+              @focus=${__privateGet(this, _handleSpinnerFocus)}
+              @touchend=${(e) => {
+        this.open = true;
+        e.preventDefault();
+      }}
+            ></gds-date-part-spinner>`
+    ),
+    html`<span class="separator"
+          >${this._dateFormatLayout.delimiter}</span
+        >`
+  )}
+    </div>`;
+};
 renderBackToValidRangeButton_fn = function() {
   if (!this._outOfRangeAction) return nothing;
   const isAfterMax = this._outOfRangeAction === "max";
@@ -730,6 +758,9 @@ _handleYearChange = new WeakMap();
 _handleIncrementFocusedMonth = new WeakMap();
 _handleDecrementFocusedMonth = new WeakMap();
 _handleCalendarFocusChange = new WeakMap();
+formattedDisplayValue_get = function() {
+  return this._dateFormatLayout.layout.map((part) => __privateGet(this, _spinnerState)[part.name]).join(this._dateFormatLayout.delimiter);
+};
 _handlePopoverStateChange = new WeakMap();
 _handleSpinnerKeydown = new WeakMap();
 /**
@@ -863,6 +894,9 @@ __decorateClass([
 __decorateClass([
   query("#field")
 ], Datepicker.prototype, "_elField", 2);
+__decorateClass([
+  query("#datepicker-value")
+], Datepicker.prototype, "_elReadonlyValue", 2);
 __decorateClass([
   watch(["value", "min", "max", "open", "_focusedMonth", "_focusedYear"])
 ], Datepicker.prototype, "_handleOutOfRangeChange", 1);
@@ -891,6 +925,7 @@ GdsDatepicker = __decorateClass([
       GdsButton,
       GdsDropdown,
       GdsCalendar,
+      GdsFieldBase,
       GdsPopover,
       IconCalendar,
       IconCalenderAdd,

package/components/datepicker/datepicker.styles.js

@@ -21,6 +21,10 @@ const style = css`
       font: var(--gds-sys-text-detail-s-regular);
     }
 
+    .readonly-value {
+      outline: none;
+    }
+
     .spinner {
       display: flex;
       align-items: center;

package/components/dropdown/dropdown.component.js

@@ -9,6 +9,7 @@ var _optionElements, _Dropdown_instances, shouldShowFooter_fn, _renderCombobox,
 import { localized, msg, str } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { when } from "lit/directives/when.js";
 import { flip, offset } from "@floating-ui/dom";
@@ -77,10 +78,12 @@ let Dropdown = class extends GdsFormControlElement {
         aria-required="${this.required}"
         aria-disabled="${this.disabled}"
         .value=${this.value}
+        ?readonly=${this.readonly}
         @click=${(e) => {
         e.stopImmediatePropagation();
       }}
         @input=${(e) => {
+        if (this.readonly) return;
         __privateMethod(this, _Dropdown_instances, commitSelection_fn).call(this, e.target.value, {
           emitChange: false
         });
@@ -88,6 +91,7 @@ let Dropdown = class extends GdsFormControlElement {
         __privateGet(this, _dispatchUISateEvent).call(this, true, "show") && (this.open = true);
       }}
         @keydown=${(e) => {
+        if (this.readonly) return;
         if (e.key === "ArrowDown") {
           e.preventDefault();
           __privateGet(this, _dispatchUISateEvent).call(this, true, "show") && (this.open = true);
@@ -116,6 +120,7 @@ let Dropdown = class extends GdsFormControlElement {
         aria-invalid="${this.invalid}"
         aria-required="${this.required}"
         aria-disabled="${this.disabled}"
+        aria-readonly="${this.readonly}"
       >
         <slot name="trigger">
           <span>${unsafeHTML(this.displayValue)}</span>
@@ -151,6 +156,10 @@ let Dropdown = class extends GdsFormControlElement {
       composed: false
     }));
     __privateAdd(this, _handlePopoverStateChange, (e) => {
+      if (this.readonly && e.detail.open) {
+        e.preventDefault();
+        return;
+      }
       if (__privateGet(this, _dispatchUISateEvent).call(this, e.detail.open, e.detail.reason)) {
         this.open = e.detail.open;
       }
@@ -389,6 +398,7 @@ let Dropdown = class extends GdsFormControlElement {
         <gds-field-base
           .size=${this.size}
           .disabled=${this.disabled}
+          .readonly=${this.readonly}
           .invalid=${this.invalid}
           slot="trigger"
           id="field"
@@ -408,7 +418,7 @@ let Dropdown = class extends GdsFormControlElement {
               >`
     )}
           ${when(
-      this.clearable && !this.disabled && (Array.isArray(this.value) ? this.value.length > 0 : Boolean(this.value)),
+      this.clearable && !this.disabled && !this.readonly && (Array.isArray(this.value) ? this.value.length > 0 : Boolean(this.value)),
       () => html`<gds-button
                 id="clear-btn"
                 rank="tertiary"
@@ -426,6 +436,8 @@ let Dropdown = class extends GdsFormControlElement {
       () => __privateGet(this, _renderTriggerButton).call(this)
     )}
           <gds-icon-chevron-bottom
+            class="chevron"
+            color=${ifDefined(this.readonly ? "disabled-01" : void 0)}
             size=${this.size === "small" ? "m" : "l"}
             slot="action"
           ></gds-icon-chevron-bottom>

package/components/dropdown/option.component.js

@@ -74,6 +74,7 @@ let GdsOption = class extends Focusable(GdsElement) {
         checked: this.selected,
         indeterminate: false,
         disabled: false,
+        readonly: false,
         invalid: false
       })
     )} <slot></slot>

package/components/filter-chips/filter-chips.component.js

@@ -67,6 +67,7 @@ let GdsFilterChips = class extends GdsFormControlElement {
       });
     });
     __privateAdd(this, _handleChipClick, (event) => {
+      if (this.readonly) return;
       const clickedChip = this.chips.find(
         (s) => s === event.target || s.contains(event.target)
       );

package/components/form/form-control.d.ts

@@ -56,6 +56,11 @@ export declare abstract class GdsFormControlElement<ValueT = any> extends GdsEle
      * If the input is Disabled
      */
     disabled: boolean;
+    /**
+     * If the control is read-only. Unlike `disabled`, a read-only control remains focusable and its
+     * value is still submitted with the form, but the user cannot modify it.
+     */
+    readonly: boolean;
     /**
      * The form element that the form control is associated with.
      */

package/components/form/form-control.js

@@ -18,6 +18,7 @@ class GdsFormControlElement extends GdsElement {
     this.label = "";
     this.name = "";
     this.disabled = false;
+    this.readonly = false;
     try {
       __privateSet(this, _internals, this.attachInternals());
     } catch (e) {
@@ -187,6 +188,12 @@ __decorateClass([
     reflect: true
   })
 ], GdsFormControlElement.prototype, "disabled", 2);
+__decorateClass([
+  property({
+    type: Boolean,
+    reflect: true
+  })
+], GdsFormControlElement.prototype, "readonly", 2);
 __decorateClass([
   watch("value", { waitUntilFirstUpdate: true })
 ], GdsFormControlElement.prototype, "__handleValueChange", 1);

package/components/input/input.component.js

@@ -51,10 +51,12 @@ let Input = class extends GdsFormControlElement {
     __privateAdd(this, _charCounterComputed, this.charCounterCallback(this));
     __privateAdd(this, _isOpeningFilePicker, false);
     __privateAdd(this, _handleOnInput, (e) => {
+      if (this.readonly) return;
       const element = e.target;
       this.value = element.value;
     });
     __privateAdd(this, _handleOnChange, (e) => {
+      if (this.readonly) return;
       const element = e.target;
       this.value = element.value;
       this.dispatchStandardEvent("change", {
@@ -64,7 +66,7 @@ let Input = class extends GdsFormControlElement {
     });
     __privateAdd(this, _handleOnKeyDown, (e) => {
       if (e.key !== "Enter") return;
-      if (this.disabled) return;
+      if (this.disabled || this.readonly) return;
       if (e.isComposing) return;
       if (e.repeat) return;
       if (this.type === "file") {
@@ -82,6 +84,7 @@ let Input = class extends GdsFormControlElement {
     });
     __privateAdd(this, _handleFieldClick, (e) => {
       if (this.type === "file") {
+        if (this.readonly) return;
         const clickedNativeInput = e.composedPath().includes(this.elInput);
         if (!clickedNativeInput) {
           __privateMethod(this, _Input_instances, openFilePickerOnce_fn).call(this);
@@ -215,6 +218,7 @@ let Input = class extends GdsFormControlElement {
       <gds-field-base
         .size=${this.size}
         .disabled=${this.disabled}
+        .readonly=${this.readonly}
         .invalid=${this.invalid}
         @click=${__privateGet(this, _handleFieldClick)}
         id="field"
@@ -283,6 +287,7 @@ renderNativeInput_fn = function() {
         .value=${live(this.value ?? "")}
         id="input"
         ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
         aria-describedby="supporting-text extended-supporting-text sub-label message"
         aria-invalid=${this.invalid}
         aria-errormessage="message"
@@ -306,7 +311,7 @@ renderNativeInput_fn = function() {
     `;
 };
 renderClearButton_fn = function() {
-  if (this.clearable && (this.value?.length || 0) > 0)
+  if (this.clearable && !this.readonly && (this.value?.length || 0) > 0)
     return html`<gds-button
         size="${this.size === "small" ? "xs" : "small"}"
         rank="tertiary"

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

@@ -76,6 +76,7 @@ let RadioGroup = class extends GdsFormControlElement {
       radio.size = this.size;
       radio.invalid = this.invalid;
       radio.errorMessage = this.errorMessage;
+      radio.readonly = this.readonly || radio.readonly;
     });
   }
   render() {
@@ -91,6 +92,7 @@ let RadioGroup = class extends GdsFormControlElement {
       aria-labelledby="group-label"
       aria-describedby="supporting-text extended-supporting-text footer"
       aria-invalid=${this.invalid}
+      aria-readonly=${this.readonly}
     >
       ${__privateMethod(this, _RadioGroup_instances, renderRadioGroupContents_fn).call(this)}
     </div>`;
@@ -137,6 +139,7 @@ dispatchChangeEvents_fn = function() {
 };
 handleRadioChange_fn = function(e) {
   e.stopPropagation();
+  if (this.readonly) return;
   const radio = e.target;
   this.value = radio.value;
   this._syncRadioStates();
@@ -144,7 +147,9 @@ handleRadioChange_fn = function(e) {
 };
 handleKeyDown_fn = function(e) {
   if (!this._isConnected) return;
-  const radios = this.radios.filter((radio) => !radio.disabled);
+  const radios = this.radios.filter(
+    (radio) => !radio.disabled && !radio.readonly
+  );
   if (radios.length === 0) return;
   let currentIndex = radios.findIndex(
     (radio) => document.activeElement === radio
@@ -251,7 +256,8 @@ __decorateClass([
 ], RadioGroup.prototype, "_handleValueChange", 1);
 __decorateClass([
   watch("invalid"),
-  watch("errorMessage")
+  watch("errorMessage"),
+  watch("readonly")
 ], RadioGroup.prototype, "_syncRadioStates", 1);
 RadioGroup = __decorateClass([
   ariaForwarding({

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

@@ -28,6 +28,15 @@ export declare class GdsRadio extends GdsElement {
      * Whether the radio button is disabled or not.
      */
     disabled: boolean;
+    /**
+     * Whether the radio button is read-only. Unlike `disabled`, the radio button stays
+     * focusable, but its checked state cannot be changed by the user.
+     *
+     * Normally set on the parent `gds-radio-group`, which cascades it down to every radio
+     * and excludes read-only radios from arrow-key navigation. Can also be set directly on
+     * a standalone radio outside of a group.
+     */
+    readonly: boolean;
     /**
      * Whether the radio button is invalid or not.
      */