@warp-ds/elements 2.8.1-next.4 → 2.8.1-next.5

package/dist/custom-elements.json

@@ -4425,7 +4425,8 @@
               },
               "default": "false",
               "description": "Disables the radio.",
-              "attribute": "disabled"
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -4809,7 +4810,6 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
               "attribute": "label"
             },
             {
@@ -4819,7 +4819,6 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The radio group's help text. If you need to display HTML, use the `help-text` slot instead.",
               "attribute": "help-text"
             },
             {
@@ -4829,7 +4828,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Optional indicator for the label.",
               "attribute": "optional",
               "reflects": true
             },
@@ -4840,7 +4838,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Marks the radio group as invalid.",
               "attribute": "invalid",
               "reflects": true
             },
@@ -4851,7 +4848,6 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "The name of the radio group",
               "attribute": "name",
               "reflects": true
             },
@@ -4862,7 +4858,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the radio group and all child radios.",
               "attribute": "disabled",
               "reflects": true
             },
@@ -4873,7 +4868,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
               "attribute": "required",
               "reflects": true
             },
@@ -4929,7 +4923,6 @@
             {
               "kind": "field",
               "name": "validationTarget",
-              "description": "We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on\nthe first radio element.",
               "readonly": true
             },
             {
@@ -5084,7 +5077,6 @@
                   }
                 }
               ],
-              "description": "Sets focus on the radio group.",
               "type": {
                 "text": "focus(options?: FocusOptions) => void"
               }
@@ -5201,7 +5193,6 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot\ninstead.",
               "fieldName": "label"
             },
             {
@@ -5210,7 +5201,6 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The radio group's help text. If you need to display HTML, use the `help-text` slot instead.",
               "fieldName": "helpText"
             },
             {
@@ -5219,7 +5209,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Optional indicator for the label.",
               "fieldName": "optional"
             },
             {
@@ -5228,7 +5217,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Marks the radio group as invalid.",
               "fieldName": "invalid"
             },
             {
@@ -5237,7 +5225,6 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "The name of the radio group",
               "fieldName": "name"
             },
             {
@@ -5246,7 +5233,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the radio group and all child radios.",
               "fieldName": "disabled"
             },
             {
@@ -5255,7 +5241,6 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Ensures a child radio is checked before allowing the containing form to submit.",
               "fieldName": "required"
             }
           ],

package/dist/index.d.ts

@@ -1148,44 +1148,42 @@ export type WRadioSolidJsProps = {
 };
 
 export type WRadioGroupProps = {
-  /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
-instead. */
+  /**  */
   label?: WRadioGroup["label"];
-  /** The radio group's help text. If you need to display HTML, use the `help-text` slot instead. */
+  /**  */
   "help-text"?: WRadioGroup["helpText"];
-  /** The radio group's help text. If you need to display HTML, use the `help-text` slot instead. */
+  /**  */
   helpText?: WRadioGroup["helpText"];
-  /** Optional indicator for the label. */
+  /**  */
   optional?: WRadioGroup["optional"];
-  /** Marks the radio group as invalid. */
+  /**  */
   invalid?: WRadioGroup["invalid"];
-  /** The name of the radio group */
+  /**  */
   name?: WRadioGroup["name"];
-  /** Disables the radio group and all child radios. */
+  /**  */
   disabled?: WRadioGroup["disabled"];
-  /** Ensures a child radio is checked before allowing the containing form to submit. */
+  /**  */
   required?: WRadioGroup["required"];
   /**  */
   hasInteracted?: WRadioGroup["hasInteracted"];
 };
 
 export type WRadioGroupSolidJsProps = {
-  /** The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
-instead. */
+  /**  */
   "prop:label"?: WRadioGroup["label"];
-  /** The radio group's help text. If you need to display HTML, use the `help-text` slot instead. */
+  /**  */
   "attr:help-text"?: WRadioGroup["helpText"];
-  /** The radio group's help text. If you need to display HTML, use the `help-text` slot instead. */
+  /**  */
   "prop:helpText"?: WRadioGroup["helpText"];
-  /** Optional indicator for the label. */
+  /**  */
   "prop:optional"?: WRadioGroup["optional"];
-  /** Marks the radio group as invalid. */
+  /**  */
   "prop:invalid"?: WRadioGroup["invalid"];
-  /** The name of the radio group */
+  /**  */
   "prop:name"?: WRadioGroup["name"];
-  /** Disables the radio group and all child radios. */
+  /**  */
   "prop:disabled"?: WRadioGroup["disabled"];
-  /** Ensures a child radio is checked before allowing the containing form to submit. */
+  /**  */
   "prop:required"?: WRadioGroup["required"];
   /**  */
   "prop:hasInteracted"?: WRadioGroup["hasInteracted"];
@@ -2392,17 +2390,15 @@ export type CustomElements = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `label`: The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
-   * instead.
-   * - `help-text`/`helpText`: The radio group's help text. If you need to display HTML, use the `help-text` slot instead.
-   * - `optional`: Optional indicator for the label.
-   * - `invalid`: Marks the radio group as invalid.
-   * - `name`: The name of the radio group
-   * - `disabled`: Disables the radio group and all child radios.
-   * - `required`: Ensures a child radio is checked before allowing the containing form to submit.
+   * - `label`: undefined
+   * - `help-text`/`helpText`: undefined
+   * - `optional`: undefined
+   * - `invalid`: undefined
+   * - `name`: undefined
+   * - `disabled`: undefined
+   * - `required`: undefined
    * - `hasInteracted`: undefined (property only)
-   * - `validationTarget`: We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on
-   * the first radio element. (property only) (readonly)
+   * - `validationTarget`: undefined (property only) (readonly)
    *
    * ## Slots
    *
@@ -2416,7 +2412,7 @@ export type CustomElements = {
    * Methods that can be called to access component functionality.
    *
    * - `resetFormControl() => void`: undefined
-   * - `focus(options?: FocusOptions) => void`: Sets focus on the radio group.
+   * - `focus(options?: FocusOptions) => void`: undefined
    * - `checkValidity() => void`: undefined
    * - `reportValidity() => void`: undefined
    */
@@ -3424,17 +3420,15 @@ export type CustomElementsSolidJs = {
    *
    * Component attributes and properties that can be applied to the element or by using JavaScript.
    *
-   * - `label`: The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
-   * instead.
-   * - `help-text`/`helpText`: The radio group's help text. If you need to display HTML, use the `help-text` slot instead.
-   * - `optional`: Optional indicator for the label.
-   * - `invalid`: Marks the radio group as invalid.
-   * - `name`: The name of the radio group
-   * - `disabled`: Disables the radio group and all child radios.
-   * - `required`: Ensures a child radio is checked before allowing the containing form to submit.
+   * - `label`: undefined
+   * - `help-text`/`helpText`: undefined
+   * - `optional`: undefined
+   * - `invalid`: undefined
+   * - `name`: undefined
+   * - `disabled`: undefined
+   * - `required`: undefined
    * - `hasInteracted`: undefined (property only)
-   * - `validationTarget`: We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on
-   * the first radio element. (property only) (readonly)
+   * - `validationTarget`: undefined (property only) (readonly)
    *
    * ## Slots
    *
@@ -3448,7 +3442,7 @@ export type CustomElementsSolidJs = {
    * Methods that can be called to access component functionality.
    *
    * - `resetFormControl() => void`: undefined
-   * - `focus(options?: FocusOptions) => void`: Sets focus on the radio group.
+   * - `focus(options?: FocusOptions) => void`: undefined
    * - `checkValidity() => void`: undefined
    * - `reportValidity() => void`: undefined
    */

package/dist/packages/radio/radio-styles.js

@@ -40,6 +40,7 @@ export const styles = css `
     );
   }
 
+  :host([disabled]),
   :host([disabled-ui]) {
     --w-c-radio-border-color: var(--w-c-radio-border-color-disabled, var(--w-s-color-border-disabled));
     --w-c-radio-bg: var(--w-c-radio-bg-disabled, var(--w-s-color-background-disabled-subtle));
@@ -72,6 +73,7 @@ export const styles = css `
     transition: var(--_transition);
   }
 
+  :host([checked]) [part='control'],
   :host([checked-ui]) [part='control'],
   :host([role='radio'][checked-ui]) [part='control'],
   :host([role='radio']:state(checked)) [part='control'] {
@@ -92,6 +94,7 @@ export const styles = css `
     outline-offset: var(--_outline-offset);
   }
 
+  :host([disabled]) [part='control'],
   :host([disabled-ui]) [part='control'],
   :host([role='radio']:state(disabled)) [part='control'] {
     border-color: var(--_border-color-disabled);
@@ -99,6 +102,14 @@ export const styles = css `
     cursor: var(--_cursor-disabled);
   }
 
+  :host([disabled]) [part='label'],
+  :host([disabled-ui]) [part='label'] {
+    color: var(--_label-color-disabled);
+    cursor: var(--_cursor-disabled);
+  }
+
+  :host([disabled][checked]),
+  :host([disabled][checked-ui]),
   :host([disabled-ui][checked-ui]) [part='control'] {
     border-color: var(--_border-color-disabled);
   }
@@ -133,12 +144,15 @@ export const styles = css `
       forced-color-adjust: none;
     }
 
+    :host([checked]) [part='control'],
     :host([checked-ui]) [part='control'],
     :host([role='radio']:state(checked)) [part='control'] {
       background-color: var(--_border-color-checked);
       border-color: var(--_border-color-checked);
     }
 
+    :host([disabled][checked]),
+    :host([disabled][checked-ui]),
     :host([disabled-ui][checked-ui]) [part='control'],
     :host([role='radio']:state(disabled):state(checked)) [part='control'] {
       background-color: var(--_border-color-disabled);

package/dist/packages/radio/radio.js

@@ -2488,6 +2488,7 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var D=i=>{th
     );
   }
 
+  :host([disabled]),
   :host([disabled-ui]) {
     --w-c-radio-border-color: var(--w-c-radio-border-color-disabled, var(--w-s-color-border-disabled));
     --w-c-radio-bg: var(--w-c-radio-bg-disabled, var(--w-s-color-background-disabled-subtle));
@@ -2520,6 +2521,7 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var D=i=>{th
     transition: var(--_transition);
   }
 
+  :host([checked]) [part='control'],
   :host([checked-ui]) [part='control'],
   :host([role='radio'][checked-ui]) [part='control'],
   :host([role='radio']:state(checked)) [part='control'] {
@@ -2540,6 +2542,7 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var D=i=>{th
     outline-offset: var(--_outline-offset);
   }
 
+  :host([disabled]) [part='control'],
   :host([disabled-ui]) [part='control'],
   :host([role='radio']:state(disabled)) [part='control'] {
     border-color: var(--_border-color-disabled);
@@ -2547,6 +2550,14 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var D=i=>{th
     cursor: var(--_cursor-disabled);
   }
 
+  :host([disabled]) [part='label'],
+  :host([disabled-ui]) [part='label'] {
+    color: var(--_label-color-disabled);
+    cursor: var(--_cursor-disabled);
+  }
+
+  :host([disabled][checked]),
+  :host([disabled][checked-ui]),
   :host([disabled-ui][checked-ui]) [part='control'] {
     border-color: var(--_border-color-disabled);
   }
@@ -2581,12 +2592,15 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var D=i=>{th
       forced-color-adjust: none;
     }
 
+    :host([checked]) [part='control'],
     :host([checked-ui]) [part='control'],
     :host([role='radio']:state(checked)) [part='control'] {
       background-color: var(--_border-color-checked);
       border-color: var(--_border-color-checked);
     }
 
+    :host([disabled][checked]),
+    :host([disabled][checked-ui]),
     :host([disabled-ui][checked-ui]) [part='control'],
     :host([role='radio']:state(disabled):state(checked)) [part='control'] {
       background-color: var(--_border-color-disabled);
@@ -2598,5 +2612,5 @@ var ee=Object.defineProperty;var re=Object.getOwnPropertyDescriptor;var D=i=>{th
         <div part="control" class="control"></div>
         <slot part="label" class="label"></slot>
       </div>
-    `}};M=new WeakMap,V=new WeakMap,y=new WeakMap,_=new WeakMap,w.styles=[K,H,J],C([A({reflect:!0})],w.prototype,"name",2),C([A({reflect:!0})],w.prototype,"value",2),C([A({type:Boolean,reflect:!0})],w.prototype,"checked",2),C([A({type:Boolean})],w.prototype,"disabled",2),C([A({type:Boolean,reflect:!0})],w.prototype,"required",2),C([A({type:Boolean,reflect:!0})],w.prototype,"invalid",2);customElements.get("w-radio")||customElements.define("w-radio",w);export{w as WRadio};
+    `}};M=new WeakMap,V=new WeakMap,y=new WeakMap,_=new WeakMap,w.styles=[K,H,J],C([A({reflect:!0})],w.prototype,"name",2),C([A({reflect:!0})],w.prototype,"value",2),C([A({type:Boolean,reflect:!0})],w.prototype,"checked",2),C([A({type:Boolean,reflect:!0})],w.prototype,"disabled",2),C([A({type:Boolean,reflect:!0})],w.prototype,"required",2),C([A({type:Boolean,reflect:!0})],w.prototype,"invalid",2);customElements.get("w-radio")||customElements.define("w-radio",w);export{w as WRadio};
 //# sourceMappingURL=radio.js.map