@sky.ui/core 0.0.7 → 0.0.20

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 (219) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/auto-import.js +1 -31
  3. package/dist/custom-elements.json +7115 -21498
  4. package/dist/helper/utils/color-resolver.d.ts +12 -0
  5. package/dist/helper/utils/color-resolver.js +1 -1
  6. package/dist/helper/utils/color-resolver.js.map +1 -1
  7. package/dist/index.d.ts +1 -31
  8. package/dist/index.js +1 -1
  9. package/dist/sky-alert/sky-alert.js +32 -42
  10. package/dist/sky-alert/sky-alert.js.map +1 -1
  11. package/dist/sky-appbar/sky-appbar.d.ts +5 -0
  12. package/dist/sky-appbar/sky-appbar.js +63 -21
  13. package/dist/sky-appbar/sky-appbar.js.map +1 -1
  14. package/dist/sky-avatar/sky-avatar.d.ts +2 -2
  15. package/dist/sky-avatar/sky-avatar.js +36 -28
  16. package/dist/sky-avatar/sky-avatar.js.map +1 -1
  17. package/dist/sky-badge/sky-badge.d.ts +2 -0
  18. package/dist/sky-badge/sky-badge.js +21 -19
  19. package/dist/sky-badge/sky-badge.js.map +1 -1
  20. package/dist/sky-button/sky-button.d.ts +4 -0
  21. package/dist/sky-button/sky-button.js +85 -26
  22. package/dist/sky-button/sky-button.js.map +1 -1
  23. package/dist/sky-card/sky-card.d.ts +7 -1
  24. package/dist/sky-card/sky-card.js +72 -40
  25. package/dist/sky-card/sky-card.js.map +1 -1
  26. package/dist/sky-checkbox/sky-checkbox.js +34 -23
  27. package/dist/sky-checkbox/sky-checkbox.js.map +1 -1
  28. package/dist/sky-chip/sky-chip.js +53 -35
  29. package/dist/sky-chip/sky-chip.js.map +1 -1
  30. package/dist/sky-combobox/sky-combobox.d.ts +6 -2
  31. package/dist/sky-combobox/sky-combobox.js +92 -262
  32. package/dist/sky-combobox/sky-combobox.js.map +1 -1
  33. package/dist/sky-dialog/sky-dialog.d.ts +4 -11
  34. package/dist/sky-dialog/sky-dialog.js +78 -131
  35. package/dist/sky-dialog/sky-dialog.js.map +1 -1
  36. package/dist/sky-flexbox/sky-flexbox.js.map +1 -1
  37. package/dist/sky-form/sky-form.js +21 -19
  38. package/dist/sky-form/sky-form.js.map +1 -1
  39. package/dist/sky-image/sky-image.d.ts +1 -0
  40. package/dist/sky-image/sky-image.js +14 -7
  41. package/dist/sky-image/sky-image.js.map +1 -1
  42. package/dist/sky-input/sky-input.d.ts +15 -2
  43. package/dist/sky-input/sky-input.js +188 -193
  44. package/dist/sky-input/sky-input.js.map +1 -1
  45. package/dist/sky-list/sky-list.d.ts +11 -2
  46. package/dist/sky-list/sky-list.js +15 -25
  47. package/dist/sky-list/sky-list.js.map +1 -1
  48. package/dist/sky-listitem/sky-listitem.js +62 -30
  49. package/dist/sky-listitem/sky-listitem.js.map +1 -1
  50. package/dist/sky-radio/sky-radio.d.ts +2 -0
  51. package/dist/sky-radio/sky-radio.js +29 -9
  52. package/dist/sky-radio/sky-radio.js.map +1 -1
  53. package/dist/sky-sheet/sky-sheet.d.ts +1 -1
  54. package/dist/sky-sheet/sky-sheet.js +68 -22
  55. package/dist/sky-sheet/sky-sheet.js.map +1 -1
  56. package/dist/sky-simple-table/index.d.ts +1 -0
  57. package/dist/sky-simple-table/index.js +1 -0
  58. package/dist/sky-simple-table/sky-simple-table.d.ts +68 -0
  59. package/dist/sky-simple-table/sky-simple-table.js +100 -0
  60. package/dist/sky-simple-table/sky-simple-table.js.map +1 -0
  61. package/dist/sky-theme-provider/sky-theme-provider.d.ts +10 -1
  62. package/dist/sky-theme-provider/sky-theme-provider.js +2 -2
  63. package/dist/sky-theme-provider/sky-theme-provider.js.map +1 -1
  64. package/package.json +39 -269
  65. package/dist/sky-accordion/index.d.ts +0 -1
  66. package/dist/sky-accordion/index.js +0 -1
  67. package/dist/sky-accordion/sky-accordion.d.ts +0 -201
  68. package/dist/sky-accordion/sky-accordion.js +0 -84
  69. package/dist/sky-accordion/sky-accordion.js.map +0 -1
  70. package/dist/sky-accordion-item/index.d.ts +0 -1
  71. package/dist/sky-accordion-item/index.js +0 -1
  72. package/dist/sky-accordion-item/sky-accordion-item.d.ts +0 -161
  73. package/dist/sky-accordion-item/sky-accordion-item.js +0 -191
  74. package/dist/sky-accordion-item/sky-accordion-item.js.map +0 -1
  75. package/dist/sky-breadcrumb/index.d.ts +0 -1
  76. package/dist/sky-breadcrumb/index.js +0 -1
  77. package/dist/sky-breadcrumb/sky-breadcrumb.d.ts +0 -111
  78. package/dist/sky-breadcrumb/sky-breadcrumb.js +0 -230
  79. package/dist/sky-breadcrumb/sky-breadcrumb.js.map +0 -1
  80. package/dist/sky-button-group/index.d.ts +0 -1
  81. package/dist/sky-button-group/index.js +0 -1
  82. package/dist/sky-button-group/sky-button-group.d.ts +0 -93
  83. package/dist/sky-button-group/sky-button-group.js +0 -281
  84. package/dist/sky-button-group/sky-button-group.js.map +0 -1
  85. package/dist/sky-carousel/index.d.ts +0 -1
  86. package/dist/sky-carousel/index.js +0 -1
  87. package/dist/sky-carousel/sky-carousel.d.ts +0 -265
  88. package/dist/sky-carousel/sky-carousel.js +0 -211
  89. package/dist/sky-carousel/sky-carousel.js.map +0 -1
  90. package/dist/sky-counter/index.d.ts +0 -1
  91. package/dist/sky-counter/index.js +0 -1
  92. package/dist/sky-counter/sky-counter.d.ts +0 -130
  93. package/dist/sky-counter/sky-counter.js +0 -101
  94. package/dist/sky-counter/sky-counter.js.map +0 -1
  95. package/dist/sky-drawer/index.d.ts +0 -1
  96. package/dist/sky-drawer/index.js +0 -1
  97. package/dist/sky-drawer/sky-drawer.d.ts +0 -161
  98. package/dist/sky-drawer/sky-drawer.js +0 -175
  99. package/dist/sky-drawer/sky-drawer.js.map +0 -1
  100. package/dist/sky-dropdown/index.d.ts +0 -1
  101. package/dist/sky-dropdown/index.js +0 -1
  102. package/dist/sky-dropdown/sky-dropdown.d.ts +0 -254
  103. package/dist/sky-dropdown/sky-dropdown.js +0 -61
  104. package/dist/sky-dropdown/sky-dropdown.js.map +0 -1
  105. package/dist/sky-dropdown-item/index.d.ts +0 -1
  106. package/dist/sky-dropdown-item/index.js +0 -1
  107. package/dist/sky-dropdown-item/sky-dropdown-item.d.ts +0 -207
  108. package/dist/sky-dropdown-item/sky-dropdown-item.js +0 -341
  109. package/dist/sky-dropdown-item/sky-dropdown-item.js.map +0 -1
  110. package/dist/sky-flexbar/index.d.ts +0 -1
  111. package/dist/sky-flexbar/index.js +0 -1
  112. package/dist/sky-flexbar/sky-flexbar.d.ts +0 -189
  113. package/dist/sky-flexbar/sky-flexbar.js +0 -157
  114. package/dist/sky-flexbar/sky-flexbar.js.map +0 -1
  115. package/dist/sky-flexitem/index.d.ts +0 -1
  116. package/dist/sky-flexitem/index.js +0 -1
  117. package/dist/sky-flexitem/sky-flexitem.d.ts +0 -114
  118. package/dist/sky-flexitem/sky-flexitem.js +0 -52
  119. package/dist/sky-flexitem/sky-flexitem.js.map +0 -1
  120. package/dist/sky-navbar/index.d.ts +0 -1
  121. package/dist/sky-navbar/index.js +0 -1
  122. package/dist/sky-navbar/sky-navbar.d.ts +0 -211
  123. package/dist/sky-navbar/sky-navbar.js +0 -521
  124. package/dist/sky-navbar/sky-navbar.js.map +0 -1
  125. package/dist/sky-navpanel/index.d.ts +0 -1
  126. package/dist/sky-navpanel/index.js +0 -1
  127. package/dist/sky-navpanel/sky-navpanel.d.ts +0 -187
  128. package/dist/sky-navpanel/sky-navpanel.js +0 -404
  129. package/dist/sky-navpanel/sky-navpanel.js.map +0 -1
  130. package/dist/sky-notification/index.d.ts +0 -1
  131. package/dist/sky-notification/index.js +0 -1
  132. package/dist/sky-notification/sky-notification.d.ts +0 -152
  133. package/dist/sky-notification/sky-notification.js +0 -456
  134. package/dist/sky-notification/sky-notification.js.map +0 -1
  135. package/dist/sky-otp/index.d.ts +0 -1
  136. package/dist/sky-otp/index.js +0 -1
  137. package/dist/sky-otp/sky-otp.d.ts +0 -101
  138. package/dist/sky-otp/sky-otp.js +0 -96
  139. package/dist/sky-otp/sky-otp.js.map +0 -1
  140. package/dist/sky-overlay/index.d.ts +0 -1
  141. package/dist/sky-overlay/index.js +0 -1
  142. package/dist/sky-overlay/sky-overlay.d.ts +0 -71
  143. package/dist/sky-overlay/sky-overlay.js +0 -26
  144. package/dist/sky-overlay/sky-overlay.js.map +0 -1
  145. package/dist/sky-pagination/index.d.ts +0 -1
  146. package/dist/sky-pagination/index.js +0 -1
  147. package/dist/sky-pagination/sky-pagination.d.ts +0 -167
  148. package/dist/sky-pagination/sky-pagination.js +0 -453
  149. package/dist/sky-pagination/sky-pagination.js.map +0 -1
  150. package/dist/sky-progress/index.d.ts +0 -1
  151. package/dist/sky-progress/index.js +0 -1
  152. package/dist/sky-progress/sky-progress.d.ts +0 -70
  153. package/dist/sky-progress/sky-progress.js +0 -87
  154. package/dist/sky-progress/sky-progress.js.map +0 -1
  155. package/dist/sky-radio-group/index.d.ts +0 -1
  156. package/dist/sky-radio-group/index.js +0 -1
  157. package/dist/sky-radio-group/sky-radio-group.d.ts +0 -186
  158. package/dist/sky-radio-group/sky-radio-group.js +0 -239
  159. package/dist/sky-radio-group/sky-radio-group.js.map +0 -1
  160. package/dist/sky-range/index.d.ts +0 -1
  161. package/dist/sky-range/index.js +0 -1
  162. package/dist/sky-range/sky-range.d.ts +0 -110
  163. package/dist/sky-range/sky-range.js +0 -196
  164. package/dist/sky-range/sky-range.js.map +0 -1
  165. package/dist/sky-serial/index.d.ts +0 -1
  166. package/dist/sky-serial/index.js +0 -1
  167. package/dist/sky-serial/sky-serial.d.ts +0 -127
  168. package/dist/sky-serial/sky-serial.js +0 -133
  169. package/dist/sky-serial/sky-serial.js.map +0 -1
  170. package/dist/sky-skeleton/index.d.ts +0 -1
  171. package/dist/sky-skeleton/index.js +0 -1
  172. package/dist/sky-skeleton/sky-skeleton.d.ts +0 -80
  173. package/dist/sky-skeleton/sky-skeleton.js +0 -233
  174. package/dist/sky-skeleton/sky-skeleton.js.map +0 -1
  175. package/dist/sky-slider/index.d.ts +0 -1
  176. package/dist/sky-slider/index.js +0 -1
  177. package/dist/sky-slider/sky-slider.d.ts +0 -96
  178. package/dist/sky-slider/sky-slider.js +0 -139
  179. package/dist/sky-slider/sky-slider.js.map +0 -1
  180. package/dist/sky-speeddial/index.d.ts +0 -1
  181. package/dist/sky-speeddial/index.js +0 -1
  182. package/dist/sky-speeddial/sky-speeddial.d.ts +0 -86
  183. package/dist/sky-speeddial/sky-speeddial.js +0 -154
  184. package/dist/sky-speeddial/sky-speeddial.js.map +0 -1
  185. package/dist/sky-spinner/index.d.ts +0 -1
  186. package/dist/sky-spinner/index.js +0 -1
  187. package/dist/sky-spinner/sky-spinner.d.ts +0 -87
  188. package/dist/sky-spinner/sky-spinner.js +0 -334
  189. package/dist/sky-spinner/sky-spinner.js.map +0 -1
  190. package/dist/sky-steps/index.d.ts +0 -1
  191. package/dist/sky-steps/index.js +0 -1
  192. package/dist/sky-steps/sky-steps.d.ts +0 -170
  193. package/dist/sky-steps/sky-steps.js +0 -455
  194. package/dist/sky-steps/sky-steps.js.map +0 -1
  195. package/dist/sky-switch/index.d.ts +0 -1
  196. package/dist/sky-switch/index.js +0 -1
  197. package/dist/sky-switch/sky-switch.d.ts +0 -116
  198. package/dist/sky-switch/sky-switch.js +0 -191
  199. package/dist/sky-switch/sky-switch.js.map +0 -1
  200. package/dist/sky-tab/index.d.ts +0 -1
  201. package/dist/sky-tab/index.js +0 -1
  202. package/dist/sky-tab/sky-tab.d.ts +0 -188
  203. package/dist/sky-tab/sky-tab.js +0 -390
  204. package/dist/sky-tab/sky-tab.js.map +0 -1
  205. package/dist/sky-tab-button/index.d.ts +0 -1
  206. package/dist/sky-tab-button/index.js +0 -1
  207. package/dist/sky-tab-button/sky-tab-button.d.ts +0 -114
  208. package/dist/sky-tab-button/sky-tab-button.js +0 -167
  209. package/dist/sky-tab-button/sky-tab-button.js.map +0 -1
  210. package/dist/sky-theme-switcher/index.d.ts +0 -1
  211. package/dist/sky-theme-switcher/index.js +0 -1
  212. package/dist/sky-theme-switcher/sky-theme-switcher.d.ts +0 -92
  213. package/dist/sky-theme-switcher/sky-theme-switcher.js +0 -43
  214. package/dist/sky-theme-switcher/sky-theme-switcher.js.map +0 -1
  215. package/dist/sky-tooltip/index.d.ts +0 -1
  216. package/dist/sky-tooltip/index.js +0 -1
  217. package/dist/sky-tooltip/sky-tooltip.d.ts +0 -156
  218. package/dist/sky-tooltip/sky-tooltip.js +0 -242
  219. package/dist/sky-tooltip/sky-tooltip.js.map +0 -1
@@ -1,186 +0,0 @@
1
- import { FormControlBase, FormState } from "../helper/internals/form-control-base";
2
- export type SkyRadioGroupLayout = "row" | "column";
3
- export type SkyRadioGroupVariant = "default" | "highlight";
4
- export type SkyRadioGroupValueChangedDetail = {
5
- value: string;
6
- };
7
- export type SkyRadioGroupValidationErrorDetail = {
8
- errors: string[];
9
- };
10
- export type SkyRadioGroupValueClearedDetail = {
11
- value: "";
12
- };
13
- export type SkyRadioGroupIconClickDetail = {
14
- position: "left" | "right";
15
- eventType: string | null;
16
- eventData: Event | null;
17
- };
18
- /**
19
- * @element sky-radio-group
20
- *
21
- * @summary Accessible group container that coordinates a set of `sky-radio` options.
22
- *
23
- * @status stable
24
- * @since 1.0.0
25
- *
26
- * @documentation https://library.sky-ui.com/components/radio
27
- * @dependency sky-radio
28
- *
29
- * @uiVModel value value-changed
30
- *
31
- * @slot - Default slot for group content. When `label` is omitted or blank, the group runs in **slot-only** mode: no built-in label row (unless `icon-left` / `icon-right` are used), and the default slot is not forced into the internal radio flex layout—use it to compose custom UI (still place `<sky-radio>` children here for selection behavior).
32
- * @slot icon-left - Optional leading action/icon area.
33
- * @slot icon-right - Optional trailing action/icon area.
34
- *
35
- * @csspart wrapper - The outer interactive container (error/shadow styling hooks).
36
- * @csspart group-label - The rendered label text (including prefix/suffix).
37
- * @csspart container - The element that wraps the slotted radios.
38
- * @csspart icon-left - The left icon/button container.
39
- * @csspart icon-right - The right icon/button container.
40
- * @csspart error - The error message element rendered below the wrapper.
41
- *
42
- * @property {string} name - Shared radio name applied to child `<sky-radio>` elements. Default: ""
43
- * @property {string} value - Currently selected value. Default: ""
44
- * @property {string} label - Optional group label text. Default: ""
45
- * @property {SkyRadioGroupLayout} layout - Layout direction for radio options.
46
- * @property {boolean} shadow - Enables bordered glass effect around the group.
47
- * @property {boolean} force - Stacks header and options vertically in constrained layouts.
48
- * @property {string[]} validationErrors - Current validation errors.
49
- * @property {boolean} required - Requires one radio option to be selected.
50
- * @property {boolean} validationActive - Activates validation state and messages.
51
- * @property {string} requiredMessage - Validation message shown when selection is missing.
52
- * @property {boolean} showErrors - Controls whether error messages are rendered.
53
- * @property {string} prefix - Text rendered before the group label.
54
- * @property {string} suffix - Text rendered after the group label.
55
- * @property {string} prefixColor - CSS color for prefix text.
56
- * @property {string} suffixColor - CSS color for suffix text.
57
- * @property {boolean} disabled - Disables interaction for the group and children.
58
- * @property {string} color - Checked-state color propagated to radios.
59
- * @property {boolean} readonly - Makes the group read-only while preserving focusability.
60
- * @property {SkyRadioGroupVariant} variant - Visual label style variant.
61
- *
62
- * @fires {CustomEvent<SkyRadioGroupValueChangedDetail>} value-changed - Fired when selected value changes.
63
- * @fires {CustomEvent<SkyRadioGroupValidationErrorDetail>} validation-error - Fired after `validateInput()` completes.
64
- * @fires {CustomEvent<SkyRadioGroupValueClearedDetail>} value-cleared - Fired when `reset()` clears selection.
65
- * @fires {CustomEvent<SkyRadioGroupIconClickDetail>} left-icon-click - Fired when the left icon slot is clicked.
66
- * @fires {CustomEvent<SkyRadioGroupIconClickDetail>} right-icon-click - Fired when the right icon slot is clicked.
67
- * @fires {Event} change - Native change event for form compatibility.
68
- * @fires {Event} input - Native input event for form compatibility.
69
- * @method setValue Sets selected radio value programmatically.
70
- * @method reset Clears selection and validation state.
71
- *
72
- * @Behavior
73
- * - Listens to child `radio-select` events and keeps a single selected value.
74
- * - Mirrors `name`, `disabled`, and `readonly` state to child radios.
75
- * - Integrates with `FormControlBase` for form value and validation handling.
76
- *
77
- * @example
78
- * ```html
79
- * <sky-radio-group label="Notification Channel" name="channel" value="email" layout="column" required show-errors validation-active>
80
- * <sky-radio value="email">Email</sky-radio>
81
- * <sky-radio value="sms">SMS</sky-radio>
82
- * <sky-radio value="push">Push Notification</sky-radio>
83
- * </sky-radio-group>
84
- * ```
85
- * ```vue
86
- * <template>
87
- * <sky-radio-group label="Notification Channel" name="channel" value="email" layout="column" required show-errors validation-active>
88
- * <sky-radio value="email">Email</sky-radio>
89
- * <sky-radio value="sms">SMS</sky-radio>
90
- * <sky-radio value="push">Push Notification</sky-radio>
91
- * </sky-radio-group>
92
- * </template>
93
- * ```
94
- * ```jsx
95
- * export default function Demo() {
96
- * return (
97
- * <sky-radio-group label="Notification Channel" name="channel" value="email" layout="column" required show-errors validation-active>
98
- * <sky-radio value="email">Email</sky-radio>
99
- * <sky-radio value="sms">SMS</sky-radio>
100
- * <sky-radio value="push">Push Notification</sky-radio>
101
- * </sky-radio-group>
102
- * );
103
- * }
104
- * ```
105
- */
106
- export declare class SkyRadioGroup extends FormControlBase {
107
- /** Currently selected value. */
108
- value: string;
109
- setValue(value: string): void;
110
- /** Optional group label text. */
111
- label: string;
112
- /** Layout direction for options: `row` or `column`. */
113
- layout: SkyRadioGroupLayout;
114
- /** Enables bordered glass effect around the group. */
115
- shadow: boolean;
116
- /** Stacks label/icons and options vertically for constrained widths. */
117
- force: boolean;
118
- /** Current validation errors. */
119
- validationErrors: string[];
120
- /** Whether a selection is required. */
121
- required: boolean;
122
- /** Whether validation state is active. */
123
- validationActive: boolean;
124
- /** Message to use when required validation fails. */
125
- requiredMessage: string;
126
- /** Whether to render the error text. */
127
- showErrors: boolean;
128
- /** Optional text prefix before the label. */
129
- prefix: string;
130
- /** Optional text suffix after the label. */
131
- suffix: string;
132
- /** Color for the label prefix text. */
133
- prefixColor: string;
134
- /** Color for the label suffix text. */
135
- suffixColor: string;
136
- /** Disables interaction for the whole group. */
137
- disabled: boolean;
138
- color: string;
139
- readonly: boolean;
140
- invalid: boolean;
141
- variant: SkyRadioGroupVariant;
142
- constructor();
143
- static styles: import("lit").CSSResult;
144
- static shadowRootOptions: {
145
- delegatesFocus: boolean;
146
- clonable?: boolean;
147
- customElementRegistry?: CustomElementRegistry;
148
- mode: ShadowRootMode;
149
- serializable?: boolean;
150
- slotAssignment?: SlotAssignmentMode;
151
- };
152
- firstUpdated(): void;
153
- updated(changedProperties: Map<string, unknown>): void;
154
- /** Handle a child `radio-select` event and update selection. */
155
- private handleChange;
156
- /** Validate required selection and surface errors. */
157
- validateInput(value?: string | null): boolean;
158
- focus(): void;
159
- /** Clear selection and error state, and notify listeners. */
160
- reset(): void;
161
- /** Keep child checked states in sync with the group's `value`. */
162
- private updateCheckedState;
163
- /** Apply name/disabled/readonly down to children. */
164
- private syncChildRadios;
165
- private _radioSelectHandler;
166
- connectedCallback(): void;
167
- disconnectedCallback(): void;
168
- /** Emit which icon was clicked (left/right). */
169
- private handleIconClick;
170
- /** Get the current value for form submission */
171
- protected getFormValue(): FormState;
172
- /** Set value from form state (e.g., form reset) */
173
- protected setValueFromFormState(state: FormState): void;
174
- /** Get the validity anchor (the first radio input) */
175
- protected getValidityAnchor(): HTMLElement | undefined;
176
- /** Check if empty (for required validation) */
177
- protected isEmpty(): boolean;
178
- /** Get the native control (first radio's input) */
179
- protected getNativeControl(): HTMLElement | null;
180
- /** Override to provide custom error messages */
181
- protected getCustomErrorMessage(): string;
182
- protected onFormReset(): void;
183
- /** Built-in group label row (prop); whitespace-only counts as absent for slot-only mode. */
184
- private get _usesBuiltinGroupLabel();
185
- render(): import("lit-html").TemplateResult<1>;
186
- }
@@ -1,239 +0,0 @@
1
- import{__decorate as t,__metadata as e}from"tslib";import{css as i,LitElement as r,html as o}from"lit";import{property as s,customElement as a}from"lit/decorators.js";import{when as l}from"lit/directives/when.js";import{FormControlBase as n}from"../helper/internals/form-control-base.js";import{resolveColor as d}from"../helper/utils/color-resolver.js";let p=class extends n{setValue(t){this.value=t??"",this.updateCheckedState(this.value),this.syncFormValue()}constructor(){super(),this.value="",this.label="",this.layout="row",this.shadow=!0,this.force=!1,this.validationErrors=[],this.required=!1,this.validationActive=!1,this.requiredMessage="The Radio selection is required.",this.showErrors=!1,this.prefix="",this.suffix="",this.prefixColor="",this.suffixColor="",this.disabled=!1,this.color="primary",this.readonly=!1,this.invalid=!1,this.variant="default",this._radioSelectHandler=t=>this.handleChange(t),this.captureDefaultValue("")}static{this.styles=i`
2
- :host {
3
- display: block;
4
- width: 100%;
5
- font-family: var(--sky-font);
6
- }
7
-
8
- :host([variant="highlight"]) {
9
- .group-label {
10
- color: var(--radio-checked-color);
11
- }
12
- }
13
-
14
- /* readonly: subtle visual, but still focusable/tabbable */
15
- :host([readonly]) .radio-wrapper {
16
- cursor: default;
17
- }
18
-
19
- .radio-wrapper {
20
- position: relative;
21
- display: flex;
22
- flex-wrap: wrap;
23
- width: inherit;
24
- align-items: center;
25
- background: transparent;
26
- justify-content: space-between;
27
- border-radius: var(--sky-radius-secondary);
28
- min-height: 38px;
29
- height: 100%;
30
- pointer-events: auto;
31
- transition: all 0.2s ease-in-out;
32
- box-sizing: border-box;
33
- }
34
-
35
- :host([validationActive]:invalid) .radio-wrapper {
36
- border-bottom: 1px solid var(--sky-danger-primary);
37
- }
38
- :host([validationActive]:invalid) .group-label {
39
- color: var(--sky-danger-primary);
40
- }
41
-
42
- sky-icon {
43
- display: inline-block;
44
- width: 1em;
45
- height: 1em;
46
- }
47
-
48
- .error-message {
49
- font-size: var(--sky-font-size-xs);
50
- color: var(--sky-danger-primary);
51
- white-space: nowrap;
52
- overflow: hidden;
53
- text-overflow: ellipsis;
54
- pointer-events: none;
55
- margin-top: 2px;
56
- margin-left: 5px;
57
- width: 100%;
58
- text-align: start;
59
- visibility: hidden;
60
- font-family: var(--sky-font);
61
- }
62
- .error-message.show {
63
- visibility: visible;
64
- }
65
-
66
- :dir(rtl) .error-message {
67
- margin-right: 5px;
68
- margin-left: unset;
69
- text-align: end;
70
- }
71
-
72
- .radio-wrapper[force] {
73
- flex-direction: column;
74
- align-items: flex-start;
75
- }
76
-
77
- .radio-wrapper[shadow] {
78
- border: var(--sky-border-primary);
79
- box-shadow: var(--sky-box-shadow-primary);
80
- background: var(--sky-glass-primary);
81
- }
82
-
83
- .radio-wrapper.column {
84
- flex-direction: column;
85
- align-items: flex-start;
86
- }
87
-
88
- .radio-wrapper.slot-only {
89
- min-height: unset;
90
- align-items: stretch;
91
- justify-content: flex-start;
92
- }
93
-
94
- .radio-container.slot-only {
95
- display: block;
96
- width: 100%;
97
- padding: 0;
98
- gap: 0;
99
- box-sizing: border-box;
100
- }
101
-
102
- .radio-container.slot-only.row,
103
- .radio-container.slot-only.column {
104
- flex-direction: unset;
105
- align-items: unset;
106
- }
107
-
108
- .radio-wrapper[shadow]::before {
109
- content: "";
110
- position: absolute;
111
- inset: 0;
112
- backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
113
- var(--sky-saturation-primary);
114
- -webkit-backdrop-filter: var(--sky-blur-primary)
115
- var(--sky-brightness-primary) var(--sky-saturation-primary);
116
- z-index: -1;
117
- border-radius: inherit;
118
- }
119
-
120
- .group-label {
121
- color: var(--sky-text-primary);
122
- display: block;
123
- padding: 5px;
124
- font-size: var(--sky-font-size-sm);
125
- font-family: var(--sky-font);
126
- }
127
-
128
- .radio-container {
129
- display: flex;
130
- flex-wrap: wrap;
131
- align-items: center;
132
- gap: 10px;
133
- }
134
- .radio-container.row {
135
- flex-direction: row;
136
- padding: 5px;
137
- }
138
- .radio-container.column {
139
- flex-direction: column;
140
- align-items: flex-start;
141
- padding: 5px;
142
- box-sizing: border-box;
143
- width: 100%;
144
- }
145
-
146
- .icon-slot {
147
- display: none;
148
- justify-content: center;
149
- font-size: var(--sky-font-size-xl);
150
- align-items: center;
151
- border-radius: var(--sky-radius-secondary);
152
- height: 38px;
153
- color: var(--sky-text-primary);
154
- min-width: 36px;
155
- background: var(--sky-glass-primary);
156
- backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
157
- var(--sky-saturation-primary);
158
- -webkit-backdrop-filter: var(--sky-blur-primary)
159
- var(--sky-brightness-primary) var(--sky-saturation-primary);
160
- box-shadow: var(--sky-box-shadow-primary);
161
- transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
162
- color 0.3s ease-in-out;
163
- }
164
-
165
- .icon-slot[filled] {
166
- display: flex;
167
- position: relative;
168
- cursor: pointer;
169
- border: 1px solid transparent;
170
- border-right: var(--sky-border-primary);
171
- }
172
- .icon-slot[filled]:hover {
173
- transform: translate(-5px, -5px);
174
- color: var(--radio-checked-color);
175
- border: var(--sky-border-primary) !important;
176
- }
177
- :dir(rtl).icon-slot[filled]:hover {
178
- transform: translate(5px, -5px);
179
- }
180
-
181
- .radio-wrapper[disabled] {
182
- pointer-events: none;
183
- opacity: 0.6;
184
- }
185
- :host([validationActive]:invalid) .icon-slot {
186
- color: var(--sky-danger-primary);
187
- }
188
- `}static{this.shadowRootOptions={...r.shadowRootOptions,delegatesFocus:!0}}firstUpdated(){this.captureDefaultValue(this.value??""),this.syncChildRadios(),this.syncFormValue(),this.syncValidity()}updated(t){t.has("color")&&this.style.setProperty("--radio-checked-color",d(this.color)),t.has("value")&&(this.updateCheckedState(this.value),this.syncFormValue(),this.syncValidity()),(t.has("name")||t.has("disabled")||t.has("readonly"))&&this.syncChildRadios()}handleChange(t){if(this.disabled||this.readonly)return;const e=t.target;if(e?.matches("sky-radio")&&e.disabled)return;const i=t.detail.value;this.value=i,this.updateCheckedState(i),this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:this.value},bubbles:!0,composed:!0})),this.reemitNativeEvent("change",t),this.reemitNativeEvent("input",t),this.syncFormValue(),this.syncValidity(),this.validationActive&&this.validateInput()}validateInput(t=null){if(!this.validationActive)return!0;this.validationErrors=[];const e=null!==t?t:this.value;this.required&&!e&&this.validationErrors.push(this.requiredMessage),this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:this.validationErrors},bubbles:!0,composed:!0})),this.syncValidity();const i=this.shadowRoot?.querySelector(".radio-wrapper");this.validationErrors.length>0?i?.classList.add("invalid"):i?.classList.remove("invalid");const r=this.shadowRoot?.querySelector(".icon-slot");r&&(this.validationErrors.length>0?r.classList.add("invalid"):r.classList.remove("invalid"));const o=0===this.validationErrors.length;return this.invalid=!o,o}focus(){const t=this.querySelector("sky-radio"),e=this.shadowRoot?.querySelector(".radio-wrapper");if(t){const e=t.shadowRoot?.querySelector("input[type='radio']");e&&e.focus()}e&&(e.classList.remove("shake"),e.offsetWidth,e.classList.add("shake"))}reset(){this.value="",this.validationErrors=[],this.validationActive=!1,this.invalid=!1,this.querySelectorAll("sky-radio").forEach(t=>t.checked=!1);const t=this.shadowRoot?.querySelector(".radio-wrapper");t?.classList.remove("invalid"),t?.classList.remove("shake");const e=this.shadowRoot?.querySelector(".icon-slot");e?.classList.remove("invalid"),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:""},bubbles:!0,composed:!0})),this.syncFormValue(),this.syncValidity()}updateCheckedState(t){this.querySelectorAll("sky-radio").forEach(e=>{e.checked=e.value===t})}syncChildRadios(){this.querySelectorAll("sky-radio").forEach(t=>{const e=t;this.name&&(e.name=this.name),e.hasAttribute("disabled")&&!e.hasAttribute("data-sky-radio-option-disabled")&&e.setAttribute("data-sky-radio-option-disabled",""),e.hasAttribute("readonly")&&!e.hasAttribute("data-sky-radio-option-readonly")&&e.setAttribute("data-sky-radio-option-readonly","");const i=e.hasAttribute("data-sky-radio-option-disabled")||e.hasAttribute("disabled"),r=e.hasAttribute("data-sky-radio-option-readonly")||e.hasAttribute("readonly");e.disabled=this.disabled||i,e.readonly=this.readonly||r,this.value&&e.value===this.value&&(e.checked=!0)})}connectedCallback(){super.connectedCallback(),this.addEventListener("radio-select",this._radioSelectHandler),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0)}disconnectedCallback(){this.removeEventListener("radio-select",this._radioSelectHandler),super.disconnectedCallback()}handleIconClick(t,e=null){this.disabled||this.readonly||this.dispatchEvent(new CustomEvent(`${t}-icon-click`,{detail:{position:t,eventType:e?e.type:null,eventData:e},bubbles:!0,composed:!0}))}getFormValue(){return this.value||null}setValueFromFormState(t){"string"==typeof t?(this.value=t,this.updateCheckedState(t)):(this.value="",this.updateCheckedState(""))}getValidityAnchor(){return this.shadowRoot?.querySelector(".radio-container")?.querySelector("sky-radio")?.shadowRoot?.querySelector("input[type='radio']")}isEmpty(){return!this.value}getNativeControl(){return null}getCustomErrorMessage(){return this.validationErrors?.[0]||""}onFormReset(){this.validationErrors=[],this.validationActive=!1,this.invalid=!1}get _usesBuiltinGroupLabel(){return Boolean(this.label?.trim())}render(){const t=!!this.querySelector('[slot="icon-left"]'),e=!!this.querySelector('[slot="icon-right"]'),i=!this._usesBuiltinGroupLabel,r=t&&e?"space-between":t?"flex-start":"flex-end";return o`
189
- <div
190
- class="radio-wrapper ${this.layout} ${i?"slot-only":""}"
191
- part="wrapper"
192
- ?shadow=${this.shadow}
193
- ?force=${this.force}
194
- ?disabled=${this.disabled}
195
- aria-readonly=${this.readonly?"true":"false"}
196
- aria-disabled=${this.disabled?"true":"false"}
197
- >
198
- ${l(t||e||this._usesBuiltinGroupLabel,()=>o`
199
- <div
200
- style="display:flex;flex-direction:row;justify-content:${r};align-items:center;width:${this.force?"100%":""};"
201
- >
202
- ${l(t,()=>o`<div
203
- class="icon-slot left"
204
- part="icon-left"
205
- ?filled=${t}
206
- @click=${t=>this.handleIconClick("left",t)}
207
- >
208
- <slot name="icon-left"></slot>
209
- </div>`)}
210
- ${l(this._usesBuiltinGroupLabel,()=>o`<span class="group-label" part="group-label">
211
- <span style="color:${this.prefixColor}">${this.prefix}</span>${this.label}<span style="color:${this.suffixColor}">${this.suffix}</span>
212
- </span>`)}
213
- ${l(e,()=>o`<div
214
- class="icon-slot right"
215
- part="icon-right"
216
- ?filled=${e}
217
- @click=${t=>this.handleIconClick("right",t)}
218
- >
219
- <slot name="icon-right"></slot>
220
- </div>`)}
221
- </div>
222
- `)}
223
- <div
224
- class="radio-container ${this.layout} ${i?"slot-only":""}"
225
- part="container"
226
- tabindex="-1"
227
- ?force=${this.force}
228
- >
229
- <slot></slot>
230
- </div>
231
- </div>
232
- <div
233
- class="error-message ${this.showErrors&&this.validationErrors.length>0&&this.validationActive?"show":""}"
234
- part="error"
235
- >
236
- ${this.validationErrors[0]}
237
- </div>
238
- `}};t([s({type:String}),e("design:type",Object)],p.prototype,"value",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"label",void 0),t([s({type:String}),e("design:type",String)],p.prototype,"layout",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"shadow",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"force",void 0),t([s({type:Array}),e("design:type",Array)],p.prototype,"validationErrors",void 0),t([s({type:Boolean}),e("design:type",Object)],p.prototype,"required",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"validationActive",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"requiredMessage",void 0),t([s({type:Boolean}),e("design:type",Object)],p.prototype,"showErrors",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"prefix",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"suffix",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"prefixColor",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"suffixColor",void 0),t([s({type:Boolean}),e("design:type",Object)],p.prototype,"disabled",void 0),t([s({type:String}),e("design:type",Object)],p.prototype,"color",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"readonly",void 0),t([s({type:Boolean,reflect:!0}),e("design:type",Boolean)],p.prototype,"invalid",void 0),t([s({type:String,reflect:!0}),e("design:type",String)],p.prototype,"variant",void 0),p=t([a("sky-radio-group"),e("design:paramtypes",[])],p);export{p as SkyRadioGroup};
239
- //# sourceMappingURL=sky-radio-group.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"sky-radio-group.js","sources":["../../src/sky-radio-group/sky-radio-group.ts"],"sourcesContent":[null],"names":["SkyRadioGroup","FormControlBase","setValue","value","this","updateCheckedState","syncFormValue","constructor","super","label","layout","shadow","force","validationErrors","required","validationActive","requiredMessage","showErrors","prefix","suffix","prefixColor","suffixColor","disabled","color","readonly","invalid","variant","_radioSelectHandler","e","handleChange","captureDefaultValue","styles","css","shadowRootOptions","LitElement","delegatesFocus","firstUpdated","syncChildRadios","syncValidity","updated","changedProperties","has","style","setProperty","resolveColor","source","target","matches","newValue","detail","dispatchEvent","CustomEvent","bubbles","composed","reemitNativeEvent","validateInput","currentValue","push","errors","radioElement","shadowRoot","querySelector","length","classList","add","remove","iconSlots","isValid","focus","firstRadio","radioContainer","radioInput","offsetWidth","reset","querySelectorAll","forEach","radio","checked","iconSlot","selectedValue","r","name","hasAttribute","setAttribute","optionDisabled","optionReadonly","connectedCallback","addEventListener","tabIndex","disconnectedCallback","removeEventListener","handleIconClick","position","event","eventType","type","eventData","getFormValue","setValueFromFormState","state","getValidityAnchor","isEmpty","getNativeControl","getCustomErrorMessage","onFormReset","_usesBuiltinGroupLabel","Boolean","trim","render","hasLeftIcon","hasRightIcon","slotOnly","justifyContent","html","when","__decorate","property","String","prototype","reflect","Array","customElement"],"mappings":"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"}
@@ -1 +0,0 @@
1
- export * from "./sky-range";
@@ -1 +0,0 @@
1
- export * from './sky-range.js';
@@ -1,110 +0,0 @@
1
- import { LitElement } from "lit";
2
- export type SkyRangeChangedDetail = {
3
- from: number;
4
- to: number;
5
- };
6
- /**
7
- * @element sky-range
8
- *
9
- * @summary Dual-thumb range selector for choosing minimum and maximum values.
10
- *
11
- * @status stable
12
- * @since 1.0.0
13
- *
14
- * @documentation https://library.sky-ui.com/components/slider
15
- *
16
- * @uiVModel from range-changed detail=from
17
- * @uiVModel to range-changed detail=to
18
- *
19
- * @slot - (No slots) — Content is internally rendered.
20
- *
21
- * @csspart container - The outer card-like wrapper.
22
- * @csspart label - The top-left label.
23
- * @csspart value - The formatted value summary at the top-right.
24
- * @csspart slider-container - Wrapper around the track and sliders.
25
- * @csspart track - The full, unselected track element.
26
- * @csspart highlight - The selected range highlight.
27
- * @csspart slider-from - The native `<input type="range">` controlling `from`.
28
- * @csspart slider-to - The native `<input type="range">` controlling `to`.
29
- *
30
- * @property {number} from - Lower bound of the selected range.
31
- * @property {number} to - Upper bound of the selected range.
32
- * @property {number} min - Minimum selectable value.
33
- * @property {number} max - Maximum selectable value.
34
- * @property {number} step - Step interval used for snapping values.
35
- * @property {string} label - Optional label shown above sliders.
36
- * @property {boolean} disabled - Disables interaction and dims the control.
37
- * @property {string} prefix - Text rendered before numeric values.
38
- * @property {string} suffix - Text rendered after numeric values.
39
- * @property {boolean} shadow - Adds glass border/shadow styling to the container.
40
- * @property {boolean} commitOnly - Emits updates only on committed change events.
41
- * @property {boolean} showValue - Toggles formatted value summary visibility.
42
- *
43
- * @fires {CustomEvent<SkyRangeChangedDetail>} range-changed - Fired when the selected range is committed.
44
- * @method setRange Sets and normalizes the selected range.
45
- *
46
- * @Behavior
47
- * - Maintains a valid `from < to` range while dragging both thumbs.
48
- * - Supports live updates or commit-only updates through `commitOnly`.
49
- * - Uses native range inputs for built-in keyboard and screen-reader support.
50
- *
51
- * @example
52
- * ```html
53
- * <sky-range label="Price Range" prefix="$" min="0" max="1000" step="50" from="200" to="700" show-value shadow commit-only></sky-range>
54
- * ```
55
- * ```vue
56
- * <template>
57
- * <sky-range label="Price Range" prefix="$" :min="0" :max="1000" :step="50" :from="200" :to="700" show-value shadow commit-only></sky-range>
58
- * </template>
59
- * ```
60
- * ```jsx
61
- * export default function Demo() {
62
- * return <sky-range label="Price Range" prefix="$" min={0} max={1000} step={50} from={200} to={700} show-value shadow commit-only></sky-range>;
63
- * }
64
- * ```
65
- */
66
- export declare class SkyRange extends LitElement {
67
- /** Lower bound of the selection. */
68
- from: number;
69
- /** Upper bound of the selection. */
70
- to: number;
71
- /** Minimum possible value. */
72
- min: number;
73
- /** Maximum possible value. */
74
- max: number;
75
- /** Step interval for snapping. */
76
- step: number;
77
- /** Optional label text. */
78
- label: string;
79
- /** Disables the range when true. */
80
- disabled: boolean;
81
- /** Prefix shown before numbers. */
82
- prefix: string;
83
- /** Suffix shown after numbers. */
84
- suffix: string;
85
- /** Whether to show shadow/glass border on the container. */
86
- shadow: boolean;
87
- /** Whether to only emit on commit (not live). */
88
- commitOnly: boolean;
89
- /** If true, shows the value label; otherwise hides it. */
90
- showValue: boolean;
91
- private _lastCommittedFrom;
92
- private _lastCommittedTo;
93
- static styles: import("lit").CSSResult;
94
- /** Round a value to the nearest `step` (guarding against non-positive step). */
95
- private roundToStep;
96
- /** Clamp a value into `[min, max]`. */
97
- private clamp;
98
- /** Live update for the `from` thumb. Emits live when `commitOnly = false`. */
99
- private onFromInput;
100
- /** Commit change for the `from` thumb. Emits only when `commitOnly = true`. */
101
- private onFromChange;
102
- /** Live update for the `to` thumb. Emits live when `commitOnly = false`. */
103
- private onToInput;
104
- /** Commit change for the `to` thumb. Emits only when `commitOnly = true`. */
105
- private onToChange;
106
- /** Dispatches `range-changed` with the current range values. */
107
- private dispatchRangeChange;
108
- setRange(from: number, to: number): void;
109
- render(): import("lit-html").TemplateResult<1>;
110
- }