@m3e/radio-group 1.0.0-rc.2 โ†’ 1.0.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +31 -34
  2. package/dist/custom-elements.json +261 -180
  3. package/dist/html-custom-data.json +13 -2
  4. package/dist/index.js +102 -49
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.min.js +40 -43
  7. package/dist/index.min.js.map +1 -1
  8. package/dist/src/RadioElement.d.ts +88 -0
  9. package/dist/src/RadioElement.d.ts.map +1 -0
  10. package/dist/src/RadioGroupElement.d.ts +77 -0
  11. package/dist/src/RadioGroupElement.d.ts.map +1 -0
  12. package/dist/src/index.d.ts +3 -0
  13. package/dist/src/index.d.ts.map +1 -0
  14. package/package.json +2 -2
package/README.md CHANGED
@@ -27,7 +27,7 @@ Alternately, you can explicitly reference the `html-custom-data.json` and `css-c
27
27
  }
28
28
  ```
29
29
 
30
- ## ๐Ÿš€ Browser Usage
30
+ ## ๐Ÿš€ Native Module Support
31
31
 
32
32
  This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
33
33
 
@@ -53,7 +53,7 @@ In addition, you must use an [import map](https://developer.mozilla.org/en-US/do
53
53
 
54
54
  ## ๐Ÿ—‚๏ธ Elements
55
55
 
56
- - `m3e-radio-group` โ€” A container for a set of radio buttons that enforces single selection.
56
+ - `m3e-radio-group` โ€” A container for a set of radio buttons.
57
57
  - `m3e-radio` โ€” A radio button that allows a user to select one option from a set of options.
58
58
 
59
59
  ## ๐Ÿงช Example
@@ -79,11 +79,11 @@ This section details the attributes, slots, events and CSS custom properties ava
79
79
 
80
80
  #### โš™๏ธ Attributes
81
81
 
82
- | Attribute | Type | Default | Description |
83
- | ---------- | --------- | ------- | --------------------------------------------- |
84
- | `checked` | `boolean` | `false` | Whether the element is checked. |
85
- | `disabled` | `boolean` | `false` | Whether the element is disabled. |
86
- | `value` | `string` | `""` | A string representing the value of the radio. |
82
+ | Attribute | Type | Default | Description |
83
+ | ---------- | --------- | ------- | ------------------------------------------------------------------------- |
84
+ | `disabled` | `boolean` | `false` | Whether the element is disabled. |
85
+ | `name` | `string` | `""` | The name that identifies the element when submitting the associated form. |
86
+ | `required` | `boolean` | `false` | Whether the element is required. |
87
87
 
88
88
  #### ๐Ÿ”” Events
89
89
 
@@ -97,26 +97,19 @@ This section details the attributes, slots, events and CSS custom properties ava
97
97
  | ----------- | --------------------------------------- |
98
98
  | _(default)_ | Renders the radio buttons of the group. |
99
99
 
100
- #### ๐ŸŽ›๏ธ CSS Custom Properties
101
-
102
- | Property | Description |
103
- | -------------------------------- | ----------------------------------------------------------------- |
104
- | `--m3e-radio-error-hover-color` | Fallback hover color used when the radio is invalid and touched. |
105
- | `--m3e-radio-error-focus-color` | Fallback focus color used when the radio is invalid and touched. |
106
- | `--m3e-radio-error-ripple-color` | Fallback ripple color used when the radio is invalid and touched. |
107
- | `--m3e-radio-error-icon-color` | Fallback icon color used when the radio is invalid and touched. |
108
-
109
100
  ### ๐Ÿ—‚๏ธ m3e-radio
110
101
 
111
102
  This section details the attributes, events and CSS custom properties available for the `m3e-radio` component.
112
103
 
113
104
  #### โš™๏ธ Attributes
114
105
 
115
- | Attribute | Type | Default | Description |
116
- | ---------- | --------- | ------- | --------------------------------------------- |
117
- | `checked` | `boolean` | `false` | Whether the element is checked. |
118
- | `disabled` | `boolean` | `false` | Whether the element is disabled. |
119
- | `value` | `string` | `""` | A string representing the value of the radio. |
106
+ | Attribute | Type | Default | Description |
107
+ | ---------- | --------- | ------- | ------------------------------------------------------------------------- |
108
+ | `checked` | `boolean` | `false` | Whether the element is checked. |
109
+ | `disabled` | `boolean` | `false` | Whether the element is disabled. |
110
+ | `name` | `string` | `""` | The name that identifies the element when submitting the associated form. |
111
+ | `required` | `boolean` | `false` | Whether the element is required. |
112
+ | `value` | `string` | `""` | A string representing the value of the radio. |
120
113
 
121
114
  #### ๐Ÿ”” Events
122
115
 
@@ -127,19 +120,23 @@ This section details the attributes, events and CSS custom properties available
127
120
 
128
121
  #### ๐ŸŽ›๏ธ CSS Custom Properties
129
122
 
130
- | Property | Description |
131
- | ------------------------------------- | --------------------------------------------------- |
132
- | `--m3e-radio-container-size` | Base size of the radio button container. |
133
- | `--m3e-radio-icon-size` | Size of the radio icon inside the wrapper. |
134
- | `--m3e-radio-unselected-hover-color` | Hover state layer color when radio is not selected. |
135
- | `--m3e-radio-unselected-focus-color` | Focus state layer color when radio is not selected. |
136
- | `--m3e-radio-unselected-ripple-color` | Ripple color when radio is not selected. |
137
- | `--m3e-radio-unselected-icon-color` | Icon color when radio is not selected. |
138
- | `--m3e-radio-selected-hover-color` | Hover state layer color when radio is selected. |
139
- | `--m3e-radio-selected-focus-color` | Focus state layer color when radio is selected. |
140
- | `--m3e-radio-selected-ripple-color` | Ripple color when radio is selected. |
141
- | `--m3e-radio-selected-icon-color` | Icon color when radio is selected. |
142
- | `--m3e-radio-disabled-icon-color` | Icon color when radio is disabled. |
123
+ | Property | Description |
124
+ | ------------------------------------- | ----------------------------------------------------------------- |
125
+ | `--m3e-radio-container-size` | Base size of the radio button container. |
126
+ | `--m3e-radio-icon-size` | Size of the radio icon inside the wrapper. |
127
+ | `--m3e-radio-unselected-hover-color` | Hover state layer color when radio is not selected. |
128
+ | `--m3e-radio-unselected-focus-color` | Focus state layer color when radio is not selected. |
129
+ | `--m3e-radio-unselected-ripple-color` | Ripple color when radio is not selected. |
130
+ | `--m3e-radio-unselected-icon-color` | Icon color when radio is not selected. |
131
+ | `--m3e-radio-selected-hover-color` | Hover state layer color when radio is selected. |
132
+ | `--m3e-radio-selected-focus-color` | Focus state layer color when radio is selected. |
133
+ | `--m3e-radio-selected-ripple-color` | Ripple color when radio is selected. |
134
+ | `--m3e-radio-selected-icon-color` | Icon color when radio is selected. |
135
+ | `--m3e-radio-disabled-icon-color` | Icon color when radio is disabled. |
136
+ | `--m3e-radio-error-hover-color` | Fallback hover color used when the radio is invalid and touched. |
137
+ | `--m3e-radio-error-focus-color` | Fallback focus color used when the radio is invalid and touched. |
138
+ | `--m3e-radio-error-ripple-color` | Fallback ripple color used when the radio is invalid and touched. |
139
+ | `--m3e-radio-error-icon-color` | Fallback icon color used when the radio is invalid and touched. |
143
140
 
144
141
  ## ๐Ÿค Contributing
145
142