@aurodesignsystem-dev/auro-formkit 0.0.0-pr1628.5 → 0.0.0-pr1628.7

package/components/input/dist/utilities.d.ts

@@ -5,6 +5,9 @@
  * @returns {string} The locale's date format in lowercase.
  */
 export function getDateFormatFromLocale(locale: string): string;
+/**
+ * Helpers that set up input masks and convert between the text shown in the field, `Date` objects, and ISO date strings (`YYYY-MM-DD`), for one locale and date format.
+ */
 export class AuroInputUtilities {
     /**
      * Creates a set of date and mask helpers for one locale and format.
@@ -17,7 +20,15 @@ export class AuroInputUtilities {
         format?: string | undefined;
     });
     locale: string;
+    /**
+     * Sets the date format to use instead of the locale's format, such as `mm/dd/yyyy`. `updateFormat()` also sets it.
+     * @type {string|undefined}
+     */
     overrideFormat: string | undefined;
+    /**
+     * The `Intl.DateTimeFormat` date formatter for the helpers' locale. The helpers don't currently use it.
+     * @type {Intl.DateTimeFormat}
+     */
     formatter: Intl.DateTimeFormat;
     /**
      * Gets the uppercase date mask for the instance's locale, such as `MM/DD/YYYY` for `en-US`.

package/components/menu/demo/accessibility.md

@@ -1,4 +1,4 @@
-<auro-header level="1" id="overview">Menu - Accessibility</auro-header>
+<auro-header level="1" id="overview">Menu: Accessibility</auro-header>
 <div class="contentWrapper">
 <div class="mainContent">
 <div class="scrollWrapper">

package/components/menu/demo/customize.md

@@ -1,4 +1,4 @@
-<auro-header level="1" id="overview">Menu - Customize</auro-header>
+<auro-header level="1" id="overview">Menu: Customize</auro-header>
 <div class="contentWrapper">
 <nav>
 <auro-nav anchorNavContent=".scrollWrapper">

package/components/menu/demo/design.md

@@ -1,4 +1,4 @@
-<auro-header level="1" id="overview">Menu - Design</auro-header>
+<auro-header level="1" id="overview">Menu: Design</auro-header>
 <div class="contentWrapper">
 <div class="mainContent">
 <div class="scrollWrapper">

package/components/menu/demo/getting-started.md

@@ -1,4 +1,4 @@
-<auro-header level="1" id="overview">Menu - Getting started</auro-header>
+<auro-header level="1" id="overview">Menu: Getting started</auro-header>
 <div class="contentWrapper">
 <nav>
 <auro-nav anchorNavContent=".scrollWrapper">

package/components/menu/demo/index.min.js

@@ -632,7 +632,7 @@ class AuroMenu extends AuroElement {
       },
 
       /**
-       * Indent level for submenus.
+       * Holds how deeply a nested menu is indented, which sets how many spacers its options get.
        * @private
        */
       level: {
@@ -804,8 +804,8 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Formatted value based on `multiSelect` state.
-   * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+   * Gets `value` in the shape the menu works with: the string itself, or, in multi-select mode,
+   * an array of values parsed from the JSON array string.
    * @private
    * @returns {String|Array<String>}
    */
@@ -1615,7 +1615,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles keyboard navigation and selection.
+   * Called when a key is pressed in the menu. The arrow keys move the active option, and Enter and Tab select it.
    * @private
    * @param {KeyboardEvent} event - The keydown event.
    */
@@ -1641,7 +1641,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles option selection via click events from menuoptions.
+   * Called when an option fires `auroMenuOption-click`. Selects the clicked option, unless the menu is disabled or nested in another menu.
    * @private
    * @param {CustomEvent} event - The auroMenuOption-click event.
    */
@@ -1661,7 +1661,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles option hover events.
+   * Called when the pointer moves over an option. Makes it the active option, unless it can't be highlighted.
    * @private
    * @param {CustomEvent} event - The `auroMenuOption-mouseover` event.
    */
@@ -1685,7 +1685,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles slot change events.
+   * Called when the menu's content changes. Sets the menu up again, and re-applies a `value` that was set before the options arrived.
    * @private
    */
   handleSlotChange() {
@@ -1781,7 +1781,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles custom events defined on options.
+   * Fires the event named in the option's `event` attribute, then `auroMenu-customEventFired`, with the option in `detail.option`.
    * @private
    * @param {HTMLElement} option - Option with custom event.
    */
@@ -1801,6 +1801,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
+   * Checks whether two selections hold the same options, in any order.
    * @private
    * @param {any} current - The current selection.
    * @param {any} next - The new selection to compare.
@@ -2283,7 +2284,7 @@ class AuroMenuOption extends AuroElement {
   }
 
   /**
-   * Handles click events on the menu option.
+   * Called when the option is clicked. Fires `auroMenuOption-click`, unless the option or a menu containing it is disabled.
    * @private
    */
   handleClick() {

package/components/menu/demo/keyboard-behavior.md

@@ -1,4 +1,4 @@
-<auro-header level="1" id="overview">Menu - Keyboard behavior</auro-header>
+<auro-header level="1" id="overview">Menu: Keyboard behavior</auro-header>
 <div class="contentWrapper">
 <div class="mainContent">
 <div class="scrollWrapper">

package/components/menu/demo/voiceover.md

@@ -1,4 +1,4 @@
-<auro-header level="1" id="overview">Menu - VoiceOver behavior</auro-header>
+<auro-header level="1" id="overview">Menu: VoiceOver behavior</auro-header>
 <p>This page documents the VoiceOver experience when using the <code>&lt;auro-menu&gt;</code> component. It covers announcements and interactions for menu navigation and option selection.</p>
 <div class="note"><strong>Note:</strong> In the standard integrations (<code>&lt;auro-select&gt;</code>, <code>&lt;auro-combobox&gt;</code>), keyboard focus stays on the parent trigger or input and <strong>doesn't</strong> move into the menu. The parent captures keys and drives the menu, and the active option is announced via <code>aria-activedescendant</code> on the trigger rather than by moving DOM focus between options. The focus-on-the-menu behavior described alongside the standalone case below only applies when an author makes <code>&lt;auro-menu&gt;</code> itself focusable (for example, <code>tabindex="0"</code>).</p>
 <auro-header level="2" id="voiceOverInteractiveAnnouncements">Interactive announcements</auro-header>

package/components/menu/dist/auro-menu.d.ts

@@ -63,7 +63,7 @@ export class AuroMenu extends AuroElement {
             reflect: boolean;
         };
         /**
-         * Indent level for submenus.
+         * Holds how deeply a nested menu is indented, which sets how many spacers its options get.
          * @private
          */
         level: {
@@ -135,25 +135,25 @@ export class AuroMenu extends AuroElement {
     loading: boolean;
     multiSelect: boolean;
     /**
-     * Handles keyboard navigation and selection.
+     * Called when a key is pressed in the menu. The arrow keys move the active option, and Enter and Tab select it.
      * @private
      * @param {KeyboardEvent} event - The keydown event.
      */
     private handleKeyDown;
     /**
-     * Handles option selection via click events from menuoptions.
+     * Called when an option fires `auroMenuOption-click`. Selects the clicked option, unless the menu is disabled or nested in another menu.
      * @private
      * @param {CustomEvent} event - The auroMenuOption-click event.
      */
     private handleMouseSelect;
     /**
-     * Handles option hover events.
+     * Called when the pointer moves over an option. Makes it the active option, unless it can't be highlighted.
      * @private
      * @param {CustomEvent} event - The `auroMenuOption-mouseover` event.
      */
     private handleOptionHover;
     /**
-     * Handles slot change events.
+     * Called when the menu's content changes. Sets the menu up again, and re-applies a `value` that was set before the options arrived.
      * @private
      */
     private handleSlotChange;
@@ -203,8 +203,8 @@ export class AuroMenu extends AuroElement {
      */
     readonly get currentLabel(): string;
     /**
-     * Formatted value based on `multiSelect` state.
-     * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+     * Gets `value` in the shape the menu works with: the string itself, or, in multi-select mode,
+     * an array of values parsed from the JSON array string.
      * @private
      * @returns {String|Array<String>}
      */
@@ -316,7 +316,7 @@ export class AuroMenu extends AuroElement {
      */
     updateActiveOption(indexOrOption: number | HTMLElement): void;
     /**
-     * Handles custom events defined on options.
+     * Fires the event named in the option's `event` attribute, then `auroMenu-customEventFired`, with the option in `detail.option`.
      * @private
      * @param {HTMLElement} option - Option with custom event.
      */
@@ -328,6 +328,7 @@ export class AuroMenu extends AuroElement {
      */
     private notifySelectionChange;
     /**
+     * Checks whether two selections hold the same options, in any order.
      * @private
      * @param {any} current - The current selection.
      * @param {any} next - The new selection to compare.

package/components/menu/dist/auro-menuoption.d.ts

@@ -175,7 +175,7 @@ export class AuroMenuOption extends AuroElement {
      */
     attachTo(): void;
     /**
-     * Handles click events on the menu option.
+     * Called when the option is clicked. Fires `auroMenuOption-click`, unless the option or a menu containing it is disabled.
      * @private
      */
     private handleClick;

package/components/menu/dist/index.js

@@ -637,7 +637,7 @@ class AuroMenu extends AuroElement {
       },
 
       /**
-       * Indent level for submenus.
+       * Holds how deeply a nested menu is indented, which sets how many spacers its options get.
        * @private
        */
       level: {
@@ -809,8 +809,8 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Formatted value based on `multiSelect` state.
-   * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+   * Gets `value` in the shape the menu works with: the string itself, or, in multi-select mode,
+   * an array of values parsed from the JSON array string.
    * @private
    * @returns {String|Array<String>}
    */
@@ -1620,7 +1620,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles keyboard navigation and selection.
+   * Called when a key is pressed in the menu. The arrow keys move the active option, and Enter and Tab select it.
    * @private
    * @param {KeyboardEvent} event - The keydown event.
    */
@@ -1646,7 +1646,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles option selection via click events from menuoptions.
+   * Called when an option fires `auroMenuOption-click`. Selects the clicked option, unless the menu is disabled or nested in another menu.
    * @private
    * @param {CustomEvent} event - The auroMenuOption-click event.
    */
@@ -1666,7 +1666,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles option hover events.
+   * Called when the pointer moves over an option. Makes it the active option, unless it can't be highlighted.
    * @private
    * @param {CustomEvent} event - The `auroMenuOption-mouseover` event.
    */
@@ -1690,7 +1690,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles slot change events.
+   * Called when the menu's content changes. Sets the menu up again, and re-applies a `value` that was set before the options arrived.
    * @private
    */
   handleSlotChange() {
@@ -1786,7 +1786,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles custom events defined on options.
+   * Fires the event named in the option's `event` attribute, then `auroMenu-customEventFired`, with the option in `detail.option`.
    * @private
    * @param {HTMLElement} option - Option with custom event.
    */
@@ -1806,6 +1806,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
+   * Checks whether two selections hold the same options, in any order.
    * @private
    * @param {any} current - The current selection.
    * @param {any} next - The new selection to compare.
@@ -2275,7 +2276,7 @@ class AuroMenuOption extends AuroElement {
   }
 
   /**
-   * Handles click events on the menu option.
+   * Called when the option is clicked. Fires `auroMenuOption-click`, unless the option or a menu containing it is disabled.
    * @private
    */
   handleClick() {

package/components/menu/dist/registered.js

@@ -598,7 +598,7 @@ class AuroMenu extends AuroElement {
       },
 
       /**
-       * Indent level for submenus.
+       * Holds how deeply a nested menu is indented, which sets how many spacers its options get.
        * @private
        */
       level: {
@@ -770,8 +770,8 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Formatted value based on `multiSelect` state.
-   * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
+   * Gets `value` in the shape the menu works with: the string itself, or, in multi-select mode,
+   * an array of values parsed from the JSON array string.
    * @private
    * @returns {String|Array<String>}
    */
@@ -1581,7 +1581,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles keyboard navigation and selection.
+   * Called when a key is pressed in the menu. The arrow keys move the active option, and Enter and Tab select it.
    * @private
    * @param {KeyboardEvent} event - The keydown event.
    */
@@ -1607,7 +1607,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles option selection via click events from menuoptions.
+   * Called when an option fires `auroMenuOption-click`. Selects the clicked option, unless the menu is disabled or nested in another menu.
    * @private
    * @param {CustomEvent} event - The auroMenuOption-click event.
    */
@@ -1627,7 +1627,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles option hover events.
+   * Called when the pointer moves over an option. Makes it the active option, unless it can't be highlighted.
    * @private
    * @param {CustomEvent} event - The `auroMenuOption-mouseover` event.
    */
@@ -1651,7 +1651,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles slot change events.
+   * Called when the menu's content changes. Sets the menu up again, and re-applies a `value` that was set before the options arrived.
    * @private
    */
   handleSlotChange() {
@@ -1747,7 +1747,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
-   * Handles custom events defined on options.
+   * Fires the event named in the option's `event` attribute, then `auroMenu-customEventFired`, with the option in `detail.option`.
    * @private
    * @param {HTMLElement} option - Option with custom event.
    */
@@ -1767,6 +1767,7 @@ class AuroMenu extends AuroElement {
   }
 
   /**
+   * Checks whether two selections hold the same options, in any order.
    * @private
    * @param {any} current - The current selection.
    * @param {any} next - The new selection to compare.
@@ -2236,7 +2237,7 @@ class AuroMenuOption extends AuroElement {
   }
 
   /**
-   * Handles click events on the menu option.
+   * Called when the option is clicked. Fires `auroMenuOption-click`, unless the option or a menu containing it is disabled.
    * @private
    */
   handleClick() {

package/components/radio/demo/accessibility.md

@@ -1,4 +1,4 @@
-<auro-header level="1" id="overview">Radio - Accessibility</auro-header>
+<auro-header level="1" id="overview">Radio: Accessibility</auro-header>
 <div class="contentWrapper">
 <div class="mainContent">
 <div class="scrollWrapper">

package/components/radio/demo/api.md

@@ -122,12 +122,12 @@ A group of radio buttons with a shared label that lets people choose exactly one
 
 ### Slots
 
-| Name          | Category | Required | Relevant when | Description                                                                                                           |
-| ------------- | -------- | -------- | ------------- | --------------------------------------------------------------------------------------------------------------------- |
-| helpText      | ui       |          |               | Help text shown below the group, such as "Choose one". While the group shows an error, the error message replaces it. |
-| legend        | ui       | Yes      |               | Label for the group, such as "Seat preference". Screen readers announce it as the group's name.                       |
-| optionalLabel | ui       |          | `!required`   | Text shown after the legend when the group isn't `required`, such as "- optional". Defaults to "(optional)".          |
-| default       |          |          |               | The `auro-radio` elements in the group.                                                                               |
+| Name          | Category | Required | Relevant when | Description                                                                                                               |
+| ------------- | -------- | -------- | ------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| helpText      | ui       |          |               | Help text shown below the group, such as "Choose one". While the group shows an error, the error message replaces it.     |
+| legend        | ui       | Yes      |               | Label for the group, such as "Seat preference". Screen readers announce it as the group's name.                           |
+| optionalLabel | ui       |          | `!required`   | Text shown after the legend when the group isn't `required`, such as a translated "(optional)". Defaults to "(optional)". |
+| default       |          |          |               | The `auro-radio` elements in the group.                                                                                   |
 
 ### CSS shadow parts
 

package/components/radio/demo/customize.md

@@ -1,4 +1,4 @@
-<auro-header level="1" id="overview">Radio - Customize</auro-header>
+<auro-header level="1" id="overview">Radio: Customize</auro-header>
 <div class="contentWrapper">
 <nav>
 <auro-nav anchorNavContent=".scrollWrapper">

package/components/radio/demo/customize.min.js

@@ -279,7 +279,7 @@ class AuroRadio extends i$2 {
       },
 
       /**
-       * ID for input node.
+       * Holds the ID of the inner `<input>` element, which its `<label>` points to.
        * @private
        */
       inputId: {
@@ -325,7 +325,7 @@ class AuroRadio extends i$2 {
       },
 
       /**
-       * Kept out of the API docs, because changing it can easily break accessibility.
+       * Sets the host's ARIA role, `radio`. Kept out of the API docs, because changing it can easily break accessibility.
        * @private
        */
       role: {
@@ -334,7 +334,7 @@ class AuroRadio extends i$2 {
       },
 
       /**
-       * Whether or not the radio button has been touched by the user.
+       * Records whether someone has interacted with the radio button.
        * @private
        */
       touched: {
@@ -1338,7 +1338,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202611081948';
+var formkitVersion = '202611082102';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1373,7 +1373,7 @@ var formkitVersion = '202611081948';
  * @csspart radio-group - The `<fieldset>` element, with `role="radiogroup"`, that wraps the legend and the radio buttons.
  * @csspart helpText - The help text element below the group, which shows the help text or the error message.
  * @slot {HTMLSlotElement} legend - Label for the group, such as "Seat preference". Screen readers announce it as the group's name. {@requiredWhen always} {@category ui}
- * @slot {HTMLSlotElement} optionalLabel - Text shown after the legend when the group isn't `required`, such as "- optional". Defaults to "(optional)". {@relevantWhen !required} {@category ui}
+ * @slot {HTMLSlotElement} optionalLabel - Text shown after the legend when the group isn't `required`, such as a translated "(optional)". Defaults to "(optional)". {@relevantWhen !required} {@category ui}
  * @slot {HTMLSlotElement} helpText - Help text shown below the group, such as "Choose one". While the group shows an error, the error message replaces it. {@category ui}
  * @slot default - The `auro-radio` elements in the group.
  * @event auroFormElement-validated - Fires each time the group runs validation, with the result in `event.detail.validity` and `event.detail.message`.
@@ -1483,7 +1483,7 @@ class AuroRadioGroup extends i$2 {
       },
 
       /**
-       * Indicates whether the legend slot is set or not.
+       * Records whether the `legend` slot has content.
        * @private
        */
       hasLegend: {
@@ -1577,7 +1577,7 @@ class AuroRadioGroup extends i$2 {
       },
 
       /**
-       * Indicates whether the radio group is in a dirty state (has been interacted with).
+       * Records whether someone has interacted with the group.
        * @private
        */
       touched: {

package/components/radio/demo/design.md

@@ -1,4 +1,4 @@
-<auro-header level="1" id="overview">Radio - Design</auro-header>
+<auro-header level="1" id="overview">Radio: Design</auro-header>
 <div class="contentWrapper">
 <div class="mainContent">
 <div class="scrollWrapper">

package/components/radio/demo/getting-started.md

@@ -1,4 +1,4 @@
-<auro-header level="1" id="overview">Radio - Getting started</auro-header>
+<auro-header level="1" id="overview">Radio: Getting started</auro-header>
 <div class="contentWrapper">
 <nav>
 <auro-nav anchorNavContent=".scrollWrapper">
@@ -284,13 +284,13 @@ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript c
 <auro-header level="4" id="slot-helpText">helpText</auro-header>
 <p>Help text shown below the group, such as "Choose one". While the group shows an error, the error message replaces it.</p>
 <auro-header level="4" id="slot-optionalLabel">optionalLabel</auro-header>
-<p>Text shown after the legend when the group isn't <code>required</code>, such as "- optional". It replaces the default <em>"(optional)"</em> text.</p>
+<p>Text shown after the legend when the group isn't <code>required</code>, such as a translated "(optional)". It replaces the default <em>"(optional)"</em> text.</p>
 <div class="exampleWrapper">
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optional-label.html) -->
 <!-- The below content is automatically added from ./../apiExamples/optional-label.html -->
 <auro-radio-group>
 <span slot="legend">Form label goes here</span>
-<span slot="optionalLabel"> - custom optional flag</span>
+<span slot="optionalLabel"> (not required)</span>
 <auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
 <auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"></auro-radio>
 <auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
@@ -303,7 +303,7 @@ Ensure your `tsconfig.json` uses `"moduleResolution": "bundler"` so TypeScript c
 <!-- The below code snippet is automatically added from ./../apiExamples/optional-label.html -->
 <pre class="language-html"><code class="language-html">&lt;auro-radio-group&gt;
   &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
-  &lt;span slot="optionalLabel"&gt; - custom optional flag&lt;/span&gt;
+  &lt;span slot="optionalLabel"&gt; (not required)&lt;/span&gt;
   &lt;auro-radio id="labelRadio1" label="Yes" name="radioDemo" value="yes"&gt;&lt;/auro-radio&gt;
   &lt;auro-radio id="labelRadio2" label="No" name="radioDemo" value="no"&gt;&lt;/auro-radio&gt;
   &lt;auro-radio id="labelRadio3" label="Maybe" name="radioDemo" value="maybe"&gt;&lt;/auro-radio&gt;

package/components/radio/demo/getting-started.min.js

@@ -279,7 +279,7 @@ class AuroRadio extends i$2 {
       },
 
       /**
-       * ID for input node.
+       * Holds the ID of the inner `<input>` element, which its `<label>` points to.
        * @private
        */
       inputId: {
@@ -325,7 +325,7 @@ class AuroRadio extends i$2 {
       },
 
       /**
-       * Kept out of the API docs, because changing it can easily break accessibility.
+       * Sets the host's ARIA role, `radio`. Kept out of the API docs, because changing it can easily break accessibility.
        * @private
        */
       role: {
@@ -334,7 +334,7 @@ class AuroRadio extends i$2 {
       },
 
       /**
-       * Whether or not the radio button has been touched by the user.
+       * Records whether someone has interacted with the radio button.
        * @private
        */
       touched: {
@@ -1338,7 +1338,7 @@ class AuroHelpText extends i$2 {
   }
 }
 
-var formkitVersion = '202611081948';
+var formkitVersion = '202611082102';
 
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1373,7 +1373,7 @@ var formkitVersion = '202611081948';
  * @csspart radio-group - The `<fieldset>` element, with `role="radiogroup"`, that wraps the legend and the radio buttons.
  * @csspart helpText - The help text element below the group, which shows the help text or the error message.
  * @slot {HTMLSlotElement} legend - Label for the group, such as "Seat preference". Screen readers announce it as the group's name. {@requiredWhen always} {@category ui}
- * @slot {HTMLSlotElement} optionalLabel - Text shown after the legend when the group isn't `required`, such as "- optional". Defaults to "(optional)". {@relevantWhen !required} {@category ui}
+ * @slot {HTMLSlotElement} optionalLabel - Text shown after the legend when the group isn't `required`, such as a translated "(optional)". Defaults to "(optional)". {@relevantWhen !required} {@category ui}
  * @slot {HTMLSlotElement} helpText - Help text shown below the group, such as "Choose one". While the group shows an error, the error message replaces it. {@category ui}
  * @slot default - The `auro-radio` elements in the group.
  * @event auroFormElement-validated - Fires each time the group runs validation, with the result in `event.detail.validity` and `event.detail.message`.
@@ -1483,7 +1483,7 @@ class AuroRadioGroup extends i$2 {
       },
 
       /**
-       * Indicates whether the legend slot is set or not.
+       * Records whether the `legend` slot has content.
        * @private
        */
       hasLegend: {
@@ -1577,7 +1577,7 @@ class AuroRadioGroup extends i$2 {
       },
 
       /**
-       * Indicates whether the radio group is in a dirty state (has been interacted with).
+       * Records whether someone has interacted with the group.
        * @private
        */
       touched: {

package/components/radio/demo/index.md

@@ -1,4 +1,4 @@
-<auro-header level="1" id="overview">Radio - Overview and UX guide</auro-header>
+<auro-header level="1" id="overview">Radio: Overview and UX guide</auro-header>
 <div class="contentWrapper">
 <nav>
 <auro-nav anchorNavContent=".scrollWrapper">