@aurodesignsystem-dev/auro-formkit 0.0.0-pr1142.0 → 0.0.0-pr1144.0

package/components/radio/demo/api.md

@@ -9,6 +9,7 @@
 |---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
 | [disabled](#disabled)                      | `disabled`                      | `boolean` | false       |                                                  |
 | [error](#error)                         | `error`                         | `String`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [hasLegend](#hasLegend)                     |                                 | `boolean` | false       |                                                  |
 | [horizontal](#horizontal)                    | `horizontal`                    | `boolean` | false       |                                                  |
 | [noValidate](#noValidate)                    | `noValidate`                    | `Boolean` |             | If set, disables auto-validation on blur.        |
 | [onDark](#onDark)                        | `onDark`                        | `Boolean` | false       | Applies dark mode styles to the component.       |

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

@@ -441,7 +441,7 @@ class AuroRadio extends i$2 {
  */
 const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
 
-var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
+var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}.hidden{display:none}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = i$5`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
@@ -1527,6 +1527,7 @@ class AuroRadioGroup extends i$2 {
     this.optionSelected = undefined;
     this.onDark = false;
     this.touched = false;
+    this.hasLegend = false;
 
     /**
      * @private
@@ -1620,6 +1621,18 @@ class AuroRadioGroup extends i$2 {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * Indicates whether the legend slot is set or not.
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      hasLegened: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -1801,6 +1814,16 @@ class AuroRadioGroup extends i$2 {
     this.handleItems();
   }
 
+  /**
+   * Method for handling legend slot changes.
+   * @private
+   * @returns {void}
+   */
+  handleLegendSlotChange() {
+    const slot = this.shadowRoot.querySelector("[slot='legend']");
+    this.hasLegend = Boolean(slot);
+  }
+
   /**
    * Method for initializing the tab index of the checked radio input.
    * @private
@@ -1915,11 +1938,14 @@ class AuroRadioGroup extends i$2 {
     const groupClasses = {
       'displayFlex': this.horizontal && this.items.length <= this.max
     };
+    const legendClasses = {
+      'hidden': !this.hasLegened && this.required
+    };
 
     return u`
       <fieldset class="${e(groupClasses)}" part="radio-group" role="radiogroup">
-        <legend>
-          <slot name="legend"></slot>
+        <legend class="${e(legendClasses)}">
+          <slot name="legend" @slotchange=${this.handleLegendSlotChange}></slot>
           ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
         </legend>
         <slot @slotchange=${this.handleSlotChange}></slot>

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

@@ -416,7 +416,7 @@ class AuroRadio extends i$2 {
  */
 const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
 
-var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
+var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}.hidden{display:none}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = i$5`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
@@ -1502,6 +1502,7 @@ class AuroRadioGroup extends i$2 {
     this.optionSelected = undefined;
     this.onDark = false;
     this.touched = false;
+    this.hasLegend = false;
 
     /**
      * @private
@@ -1595,6 +1596,18 @@ class AuroRadioGroup extends i$2 {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * Indicates whether the legend slot is set or not.
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      hasLegened: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -1776,6 +1789,16 @@ class AuroRadioGroup extends i$2 {
     this.handleItems();
   }
 
+  /**
+   * Method for handling legend slot changes.
+   * @private
+   * @returns {void}
+   */
+  handleLegendSlotChange() {
+    const slot = this.shadowRoot.querySelector("[slot='legend']");
+    this.hasLegend = Boolean(slot);
+  }
+
   /**
    * Method for initializing the tab index of the checked radio input.
    * @private
@@ -1890,11 +1913,14 @@ class AuroRadioGroup extends i$2 {
     const groupClasses = {
       'displayFlex': this.horizontal && this.items.length <= this.max
     };
+    const legendClasses = {
+      'hidden': !this.hasLegened && this.required
+    };
 
     return u`
       <fieldset class="${e(groupClasses)}" part="radio-group" role="radiogroup">
-        <legend>
-          <slot name="legend"></slot>
+        <legend class="${e(legendClasses)}">
+          <slot name="legend" @slotchange=${this.handleLegendSlotChange}></slot>
           ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
         </legend>
         <slot @slotchange=${this.handleSlotChange}></slot>

package/components/radio/dist/auro-radio-group.d.ts

@@ -67,6 +67,13 @@ export class AuroRadioGroup extends LitElement {
          * @private
          */
         touched: boolean;
+        /**
+         * Indicates whether the legend slot is set or not.
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        hasLegened: boolean;
     };
     /**
      * This will register this element with the browser.
@@ -85,6 +92,7 @@ export class AuroRadioGroup extends LitElement {
     optionSelected: EventTarget;
     onDark: boolean;
     touched: boolean;
+    hasLegend: boolean;
     /**
      * @private
      */
@@ -154,6 +162,12 @@ export class AuroRadioGroup extends LitElement {
      * @returns {void}
      */
     private handleSlotChange;
+    /**
+     * Method for handling legend slot changes.
+     * @private
+     * @returns {void}
+     */
+    private handleLegendSlotChange;
     /**
      * Method for initializing the tab index of the checked radio input.
      * @private

package/components/radio/dist/index.js

@@ -369,7 +369,7 @@ class AuroRadio extends LitElement {
   }
 }
 
-var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
+var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}.hidden{display:none}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = css`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
@@ -1455,6 +1455,7 @@ class AuroRadioGroup extends LitElement {
     this.optionSelected = undefined;
     this.onDark = false;
     this.touched = false;
+    this.hasLegend = false;
 
     /**
      * @private
@@ -1548,6 +1549,18 @@ class AuroRadioGroup extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * Indicates whether the legend slot is set or not.
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      hasLegened: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -1729,6 +1742,16 @@ class AuroRadioGroup extends LitElement {
     this.handleItems();
   }
 
+  /**
+   * Method for handling legend slot changes.
+   * @private
+   * @returns {void}
+   */
+  handleLegendSlotChange() {
+    const slot = this.shadowRoot.querySelector("[slot='legend']");
+    this.hasLegend = Boolean(slot);
+  }
+
   /**
    * Method for initializing the tab index of the checked radio input.
    * @private
@@ -1843,11 +1866,14 @@ class AuroRadioGroup extends LitElement {
     const groupClasses = {
       'displayFlex': this.horizontal && this.items.length <= this.max
     };
+    const legendClasses = {
+      'hidden': !this.hasLegened && this.required
+    };
 
     return html$1`
       <fieldset class="${classMap(groupClasses)}" part="radio-group" role="radiogroup">
-        <legend>
-          <slot name="legend"></slot>
+        <legend class="${classMap(legendClasses)}">
+          <slot name="legend" @slotchange=${this.handleLegendSlotChange}></slot>
           ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
         </legend>
         <slot @slotchange=${this.handleSlotChange}></slot>

package/components/radio/dist/registered.js

@@ -369,7 +369,7 @@ class AuroRadio extends LitElement {
   }
 }
 
-var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
+var styleCss$1 = css`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}.hidden{display:none}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
 
 var colorCss$1 = css`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
 
@@ -1455,6 +1455,7 @@ class AuroRadioGroup extends LitElement {
     this.optionSelected = undefined;
     this.onDark = false;
     this.touched = false;
+    this.hasLegend = false;
 
     /**
      * @private
@@ -1548,6 +1549,18 @@ class AuroRadioGroup extends LitElement {
         type: Boolean,
         reflect: true,
         attribute: false
+      },
+
+      /**
+       * Indicates whether the legend slot is set or not.
+       * @type {boolean}
+       * @default false
+       * @private
+       */
+      hasLegened: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
       }
     };
   }
@@ -1729,6 +1742,16 @@ class AuroRadioGroup extends LitElement {
     this.handleItems();
   }
 
+  /**
+   * Method for handling legend slot changes.
+   * @private
+   * @returns {void}
+   */
+  handleLegendSlotChange() {
+    const slot = this.shadowRoot.querySelector("[slot='legend']");
+    this.hasLegend = Boolean(slot);
+  }
+
   /**
    * Method for initializing the tab index of the checked radio input.
    * @private
@@ -1843,11 +1866,14 @@ class AuroRadioGroup extends LitElement {
     const groupClasses = {
       'displayFlex': this.horizontal && this.items.length <= this.max
     };
+    const legendClasses = {
+      'hidden': !this.hasLegened && this.required
+    };
 
     return html$1`
       <fieldset class="${classMap(groupClasses)}" part="radio-group" role="radiogroup">
-        <legend>
-          <slot name="legend"></slot>
+        <legend class="${classMap(legendClasses)}">
+          <slot name="legend" @slotchange=${this.handleLegendSlotChange}></slot>
           ${this.required ? undefined : html$1`<slot name="optionalLabel"> (optional)</slot>`}
         </legend>
         <slot @slotchange=${this.handleSlotChange}></slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr1142.0",
+  "version": "0.0.0-pr1144.0",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {