@deepfuture/dui-components 0.0.21 → 1.0.0

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 (333) hide show
  1. package/README.md +56 -65
  2. package/_install.js +11 -0
  3. package/accordion/accordion-item.d.ts +3 -20
  4. package/accordion/accordion-item.js +93 -292
  5. package/accordion/accordion.d.ts +3 -18
  6. package/accordion/accordion.js +9 -247
  7. package/accordion/index.d.ts +6 -6
  8. package/accordion/index.js +5 -5
  9. package/alert-dialog/alert-dialog-close.d.ts +3 -14
  10. package/alert-dialog/alert-dialog-close.js +4 -34
  11. package/alert-dialog/alert-dialog-popup.d.ts +3 -32
  12. package/alert-dialog/alert-dialog-popup.js +68 -317
  13. package/alert-dialog/alert-dialog-trigger.d.ts +3 -14
  14. package/alert-dialog/alert-dialog-trigger.js +4 -51
  15. package/alert-dialog/alert-dialog.d.ts +3 -30
  16. package/alert-dialog/alert-dialog.js +8 -158
  17. package/alert-dialog/index.d.ts +11 -11
  18. package/alert-dialog/index.js +9 -9
  19. package/all.d.ts +159 -123
  20. package/all.js +134 -231
  21. package/avatar/avatar.d.ts +3 -39
  22. package/avatar/avatar.js +18 -238
  23. package/avatar/index.d.ts +4 -4
  24. package/avatar/index.js +3 -3
  25. package/badge/badge.d.ts +3 -10
  26. package/badge/badge.js +88 -22
  27. package/badge/index.d.ts +2 -3
  28. package/badge/index.js +2 -3
  29. package/breadcrumb/breadcrumb-ellipsis.d.ts +3 -12
  30. package/breadcrumb/breadcrumb-ellipsis.js +8 -34
  31. package/breadcrumb/breadcrumb-item.d.ts +3 -11
  32. package/breadcrumb/breadcrumb-item.js +7 -26
  33. package/breadcrumb/breadcrumb-link.d.ts +3 -12
  34. package/breadcrumb/breadcrumb-link.js +16 -26
  35. package/breadcrumb/breadcrumb-page.d.ts +3 -11
  36. package/breadcrumb/breadcrumb-page.js +8 -31
  37. package/breadcrumb/breadcrumb-separator.d.ts +3 -12
  38. package/breadcrumb/breadcrumb-separator.js +8 -31
  39. package/breadcrumb/breadcrumb.d.ts +3 -12
  40. package/breadcrumb/breadcrumb.js +10 -33
  41. package/breadcrumb/index.d.ts +12 -13
  42. package/breadcrumb/index.js +12 -13
  43. package/button/button.d.ts +3 -32
  44. package/button/button.js +221 -165
  45. package/button/index.d.ts +3 -3
  46. package/button/index.js +3 -3
  47. package/calendar/calendar.d.ts +3 -31
  48. package/calendar/calendar.js +71 -481
  49. package/calendar/index.d.ts +3 -3
  50. package/calendar/index.js +3 -3
  51. package/card/card.d.ts +3 -27
  52. package/card/card.js +80 -163
  53. package/card/index.d.ts +2 -3
  54. package/card/index.js +2 -3
  55. package/card-grid/card-grid.d.ts +3 -15
  56. package/card-grid/card-grid.js +8 -106
  57. package/card-grid/index.d.ts +2 -3
  58. package/card-grid/index.js +2 -3
  59. package/checkbox/checkbox-group.d.ts +3 -34
  60. package/checkbox/checkbox-group.js +11 -188
  61. package/checkbox/checkbox.d.ts +3 -47
  62. package/checkbox/checkbox.js +43 -341
  63. package/checkbox/index.d.ts +6 -6
  64. package/checkbox/index.js +5 -5
  65. package/collapsible/collapsible.d.ts +3 -20
  66. package/collapsible/collapsible.js +83 -277
  67. package/collapsible/index.d.ts +3 -3
  68. package/collapsible/index.js +3 -3
  69. package/combobox/combobox.d.ts +3 -47
  70. package/combobox/combobox.js +136 -538
  71. package/combobox/index.d.ts +4 -4
  72. package/combobox/index.js +3 -3
  73. package/command/command-empty.d.ts +3 -8
  74. package/command/command-empty.js +10 -88
  75. package/command/command-group.d.ts +3 -13
  76. package/command/command-group.js +15 -114
  77. package/command/command-input.d.ts +3 -11
  78. package/command/command-input.js +20 -136
  79. package/command/command-item.d.ts +3 -18
  80. package/command/command-item.js +24 -212
  81. package/command/command-list.d.ts +3 -7
  82. package/command/command-list.js +11 -79
  83. package/command/command-separator.d.ts +3 -5
  84. package/command/command-separator.js +10 -11
  85. package/command/command-shortcut.d.ts +3 -5
  86. package/command/command-shortcut.js +9 -12
  87. package/command/command.d.ts +3 -23
  88. package/command/command.js +10 -339
  89. package/command/index.d.ts +17 -19
  90. package/command/index.js +16 -18
  91. package/data-table/data-table.d.ts +3 -57
  92. package/data-table/data-table.js +86 -449
  93. package/data-table/index.d.ts +3 -4
  94. package/data-table/index.js +2 -3
  95. package/dialog/dialog-close.d.ts +3 -14
  96. package/dialog/dialog-close.js +4 -34
  97. package/dialog/dialog-popup.d.ts +3 -34
  98. package/dialog/dialog-popup.js +70 -336
  99. package/dialog/dialog-trigger.d.ts +3 -14
  100. package/dialog/dialog-trigger.js +4 -51
  101. package/dialog/dialog.d.ts +3 -30
  102. package/dialog/dialog.js +8 -158
  103. package/dialog/index.d.ts +11 -11
  104. package/dialog/index.js +9 -9
  105. package/dropzone/dropzone.d.ts +3 -72
  106. package/dropzone/dropzone.js +29 -407
  107. package/dropzone/index.d.ts +4 -4
  108. package/dropzone/index.js +3 -3
  109. package/field/field.d.ts +3 -30
  110. package/field/field.js +34 -353
  111. package/field/index.d.ts +1 -0
  112. package/field/index.js +1 -0
  113. package/fieldset/fieldset.d.ts +3 -18
  114. package/fieldset/fieldset.js +21 -110
  115. package/fieldset/index.d.ts +1 -0
  116. package/fieldset/index.js +1 -0
  117. package/icon/icon.d.ts +3 -15
  118. package/icon/icon.js +4 -33
  119. package/icon/index.d.ts +2 -3
  120. package/icon/index.js +2 -3
  121. package/input/index.d.ts +3 -3
  122. package/input/index.js +3 -3
  123. package/input/input.d.ts +3 -49
  124. package/input/input.js +57 -238
  125. package/menu/index.d.ts +4 -5
  126. package/menu/index.js +4 -5
  127. package/menu/menu-item.d.ts +3 -13
  128. package/menu/menu-item.js +41 -91
  129. package/menu/menu.d.ts +3 -15
  130. package/menu/menu.js +27 -277
  131. package/menubar/index.d.ts +3 -4
  132. package/menubar/index.js +2 -3
  133. package/menubar/menubar.d.ts +3 -19
  134. package/menubar/menubar.js +12 -183
  135. package/number-field/index.d.ts +3 -3
  136. package/number-field/index.js +3 -3
  137. package/number-field/number-field.d.ts +3 -55
  138. package/number-field/number-field.js +205 -698
  139. package/package.json +126 -113
  140. package/popover/index.d.ts +11 -11
  141. package/popover/index.js +9 -9
  142. package/popover/popover-close.d.ts +3 -12
  143. package/popover/popover-close.js +4 -32
  144. package/popover/popover-popup.d.ts +3 -18
  145. package/popover/popover-popup.js +28 -205
  146. package/popover/popover-trigger.d.ts +3 -13
  147. package/popover/popover-trigger.js +4 -73
  148. package/popover/popover.d.ts +3 -29
  149. package/popover/popover.js +8 -207
  150. package/portal/index.d.ts +3 -4
  151. package/portal/index.js +2 -3
  152. package/portal/portal.d.ts +3 -27
  153. package/portal/portal.js +8 -157
  154. package/preview-card/index.d.ts +9 -9
  155. package/preview-card/index.js +7 -7
  156. package/preview-card/preview-card-popup.d.ts +3 -14
  157. package/preview-card/preview-card-popup.js +29 -194
  158. package/preview-card/preview-card-trigger.d.ts +3 -12
  159. package/preview-card/preview-card-trigger.js +4 -74
  160. package/preview-card/preview-card.d.ts +3 -33
  161. package/preview-card/preview-card.js +8 -239
  162. package/progress/index.d.ts +2 -3
  163. package/progress/index.js +2 -3
  164. package/progress/progress.d.ts +3 -17
  165. package/progress/progress.js +28 -130
  166. package/radio/index.d.ts +6 -6
  167. package/radio/index.js +5 -5
  168. package/radio/radio-group.d.ts +3 -37
  169. package/radio/radio-group.js +8 -200
  170. package/radio/radio.d.ts +3 -28
  171. package/radio/radio.js +38 -213
  172. package/scroll-area/index.d.ts +2 -3
  173. package/scroll-area/index.js +2 -3
  174. package/scroll-area/scroll-area.d.ts +3 -36
  175. package/scroll-area/scroll-area.js +25 -535
  176. package/select/index.d.ts +3 -4
  177. package/select/index.js +2 -3
  178. package/select/select.d.ts +3 -39
  179. package/select/select.js +115 -425
  180. package/separator/index.d.ts +2 -3
  181. package/separator/index.js +2 -3
  182. package/separator/separator.d.ts +3 -10
  183. package/separator/separator.js +23 -85
  184. package/sidebar/index.d.ts +29 -29
  185. package/sidebar/index.js +27 -32
  186. package/sidebar/sidebar-content.d.ts +3 -12
  187. package/sidebar/sidebar-content.js +7 -29
  188. package/sidebar/sidebar-footer.d.ts +3 -10
  189. package/sidebar/sidebar-footer.js +7 -20
  190. package/sidebar/sidebar-group-label.d.ts +3 -15
  191. package/sidebar/sidebar-group-label.js +17 -41
  192. package/sidebar/sidebar-group.d.ts +3 -13
  193. package/sidebar/sidebar-group.js +7 -24
  194. package/sidebar/sidebar-header.d.ts +3 -10
  195. package/sidebar/sidebar-header.js +7 -16
  196. package/sidebar/sidebar-inset.d.ts +3 -13
  197. package/sidebar/sidebar-inset.js +7 -28
  198. package/sidebar/sidebar-menu-button.d.ts +3 -26
  199. package/sidebar/sidebar-menu-button.js +60 -217
  200. package/sidebar/sidebar-menu-item.d.ts +3 -10
  201. package/sidebar/sidebar-menu-item.js +7 -19
  202. package/sidebar/sidebar-menu.d.ts +3 -12
  203. package/sidebar/sidebar-menu.js +7 -25
  204. package/sidebar/sidebar-provider.d.ts +3 -34
  205. package/sidebar/sidebar-provider.js +22 -232
  206. package/sidebar/sidebar-separator.d.ts +3 -10
  207. package/sidebar/sidebar-separator.js +9 -19
  208. package/sidebar/sidebar-trigger.d.ts +3 -14
  209. package/sidebar/sidebar-trigger.js +10 -46
  210. package/sidebar/sidebar.d.ts +3 -19
  211. package/sidebar/sidebar.js +65 -262
  212. package/slider/index.d.ts +3 -3
  213. package/slider/index.js +3 -3
  214. package/slider/slider.d.ts +3 -45
  215. package/slider/slider.js +97 -382
  216. package/spinner/index.d.ts +2 -3
  217. package/spinner/index.js +2 -3
  218. package/spinner/spinner.d.ts +3 -11
  219. package/spinner/spinner.js +20 -163
  220. package/split-button/index.d.ts +3 -1
  221. package/split-button/index.js +3 -1
  222. package/split-button/split-button.d.ts +3 -33
  223. package/split-button/split-button.js +307 -394
  224. package/stepper/index.d.ts +3 -3
  225. package/stepper/index.js +3 -3
  226. package/stepper/stepper.d.ts +3 -41
  227. package/stepper/stepper.js +57 -381
  228. package/switch/index.d.ts +3 -3
  229. package/switch/index.js +3 -3
  230. package/switch/switch.d.ts +3 -30
  231. package/switch/switch.js +63 -228
  232. package/tabs/index.d.ts +12 -12
  233. package/tabs/index.js +11 -11
  234. package/tabs/tab.d.ts +3 -14
  235. package/tabs/tab.js +33 -131
  236. package/tabs/tabs-indicator.d.ts +3 -9
  237. package/tabs/tabs-indicator.js +17 -22
  238. package/tabs/tabs-list.d.ts +3 -15
  239. package/tabs/tabs-list.js +14 -113
  240. package/tabs/tabs-panel.d.ts +3 -16
  241. package/tabs/tabs-panel.js +32 -114
  242. package/tabs/tabs.d.ts +3 -22
  243. package/tabs/tabs.js +8 -170
  244. package/textarea/index.d.ts +4 -4
  245. package/textarea/index.js +3 -3
  246. package/textarea/textarea.d.ts +3 -36
  247. package/textarea/textarea.js +63 -220
  248. package/toggle/index.d.ts +6 -6
  249. package/toggle/index.js +5 -5
  250. package/toggle/toggle-group.d.ts +3 -27
  251. package/toggle/toggle-group.js +9 -224
  252. package/toggle/toggle.d.ts +3 -26
  253. package/toggle/toggle.js +94 -178
  254. package/tokens/properties.css +361 -0
  255. package/tokens/prose.css +250 -0
  256. package/tokens/prose.d.ts +2 -0
  257. package/tokens/prose.js +4 -0
  258. package/tokens/tokens-raw.d.ts +2 -0
  259. package/tokens/tokens-raw.js +2 -0
  260. package/tokens/tokens.css +409 -0
  261. package/tokens/tokens.d.ts +2 -0
  262. package/tokens/tokens.js +5 -0
  263. package/toolbar/index.d.ts +2 -3
  264. package/toolbar/index.js +2 -3
  265. package/toolbar/toolbar.d.ts +3 -11
  266. package/toolbar/toolbar.js +25 -116
  267. package/tooltip/index.d.ts +9 -9
  268. package/tooltip/index.js +7 -7
  269. package/tooltip/tooltip-popup.d.ts +3 -14
  270. package/tooltip/tooltip-popup.js +32 -185
  271. package/tooltip/tooltip-trigger.d.ts +3 -14
  272. package/tooltip/tooltip-trigger.js +5 -148
  273. package/tooltip/tooltip.d.ts +3 -35
  274. package/tooltip/tooltip.js +8 -253
  275. package/trunc/index.d.ts +2 -3
  276. package/trunc/index.js +2 -3
  277. package/trunc/trunc.d.ts +3 -17
  278. package/trunc/trunc.js +10 -108
  279. package/_deprecated/center/center.d.ts +0 -14
  280. package/_deprecated/center/center.js +0 -37
  281. package/_deprecated/center/index.d.ts +0 -3
  282. package/_deprecated/center/index.js +0 -3
  283. package/_deprecated/center/register.js +0 -4
  284. package/_deprecated/hstack/hstack.d.ts +0 -25
  285. package/_deprecated/hstack/hstack.js +0 -187
  286. package/_deprecated/hstack/index.d.ts +0 -4
  287. package/_deprecated/hstack/index.js +0 -3
  288. package/_deprecated/hstack/register.d.ts +0 -1
  289. package/_deprecated/hstack/register.js +0 -4
  290. package/_deprecated/page-inset/index.d.ts +0 -3
  291. package/_deprecated/page-inset/index.js +0 -3
  292. package/_deprecated/page-inset/page-inset.d.ts +0 -28
  293. package/_deprecated/page-inset/page-inset.js +0 -151
  294. package/_deprecated/page-inset/register.d.ts +0 -1
  295. package/_deprecated/page-inset/register.js +0 -4
  296. package/_deprecated/vstack/index.d.ts +0 -3
  297. package/_deprecated/vstack/index.js +0 -3
  298. package/_deprecated/vstack/register.d.ts +0 -1
  299. package/_deprecated/vstack/register.js +0 -4
  300. package/_deprecated/vstack/vstack.d.ts +0 -17
  301. package/_deprecated/vstack/vstack.js +0 -125
  302. package/accordion/accordion-context.d.ts +0 -15
  303. package/accordion/accordion-context.js +0 -3
  304. package/alert-dialog/alert-dialog-context.d.ts +0 -13
  305. package/alert-dialog/alert-dialog-context.js +0 -3
  306. package/checkbox/checkbox-group-context.d.ts +0 -11
  307. package/checkbox/checkbox-group-context.js +0 -3
  308. package/command/command-context.d.ts +0 -30
  309. package/command/command-context.js +0 -3
  310. package/command/command-score.d.ts +0 -6
  311. package/command/command-score.js +0 -31
  312. package/dialog/dialog-context.d.ts +0 -13
  313. package/dialog/dialog-context.js +0 -3
  314. package/global.d.ts +0 -179
  315. package/menubar/menubar-context.d.ts +0 -9
  316. package/menubar/menubar-context.js +0 -2
  317. package/popover/popover-context.d.ts +0 -17
  318. package/popover/popover-context.js +0 -3
  319. package/preview-card/preview-card-context.d.ts +0 -16
  320. package/preview-card/preview-card-context.js +0 -3
  321. package/radio/radio-group-context.d.ts +0 -11
  322. package/radio/radio-group-context.js +0 -2
  323. package/sidebar/sidebar-context.d.ts +0 -15
  324. package/sidebar/sidebar-context.js +0 -3
  325. package/split-button/register.d.ts +0 -1
  326. package/split-button/register.js +0 -4
  327. package/tabs/tabs-context.d.ts +0 -8
  328. package/tabs/tabs-context.js +0 -2
  329. package/toggle/toggle-group-context.d.ts +0 -9
  330. package/toggle/toggle-group-context.js +0 -2
  331. package/tooltip/tooltip-context.d.ts +0 -17
  332. package/tooltip/tooltip-context.js +0 -3
  333. /package/{_deprecated/center/register.d.ts → _install.d.ts} +0 -0
@@ -1,3 +1,3 @@
1
- import { DuiStepper, valueChangeEvent, valueCommittedEvent } from "./stepper.js";
2
- export { DuiStepper, valueChangeEvent, valueCommittedEvent };
3
- export declare const stepperFamily: (typeof DuiStepper)[];
1
+ import "./stepper.js";
2
+ export { DuiStepper } from "./stepper.js";
3
+ export { valueChangeEvent, valueCommittedEvent } from "@deepfuture/dui-primitives/stepper";
package/stepper/index.js CHANGED
@@ -1,3 +1,3 @@
1
- import { DuiStepper, valueChangeEvent, valueCommittedEvent, } from "./stepper.js";
2
- export { DuiStepper, valueChangeEvent, valueCommittedEvent };
3
- export const stepperFamily = [DuiStepper];
1
+ import "./stepper.js";
2
+ export { DuiStepper } from "./stepper.js";
3
+ export { valueChangeEvent, valueCommittedEvent } from "@deepfuture/dui-primitives/stepper";
@@ -1,43 +1,5 @@
1
- import { LitElement, type TemplateResult } from "lit";
2
- export declare const valueChangeEvent: (detail: {
3
- value: number;
4
- }) => CustomEvent<{
5
- value: number;
6
- }>;
7
- export declare const valueCommittedEvent: (detail: {
8
- value: number;
9
- }) => CustomEvent<{
10
- value: number;
11
- }>;
12
- /**
13
- * `<dui-stepper>` — A numeric input with increment/decrement buttons.
14
- *
15
- * Simple component for stepping values up and down via buttons, keyboard,
16
- * or manual text entry. No labels, icons, scrubbing, or other extras.
17
- *
18
- * @csspart root - The outer container.
19
- * @csspart input - The text input element.
20
- * @csspart decrement - The decrement button.
21
- * @csspart increment - The increment button.
22
- * @fires value-change - Fired when value changes. Detail: { value: number }
23
- * @fires value-committed - Fired on blur or Enter. Detail: { value: number }
24
- */
25
- export declare class DuiStepper extends LitElement {
26
- #private;
27
- static tagName: "dui-stepper";
28
- static shadowRootOptions: ShadowRootInit;
1
+ import { DuiStepperPrimitive } from "@deepfuture/dui-primitives/stepper";
2
+ import "../_install.js";
3
+ export declare class DuiStepper extends DuiStepperPrimitive {
29
4
  static styles: import("lit").CSSResult[];
30
- accessor value: number | undefined;
31
- accessor defaultValue: number | undefined;
32
- accessor min: number | undefined;
33
- accessor max: number | undefined;
34
- accessor step: number;
35
- accessor largeStep: number;
36
- accessor disabled: boolean;
37
- accessor readOnly: boolean;
38
- accessor required: boolean;
39
- accessor name: string | undefined;
40
- connectedCallback(): void;
41
- willUpdate(): void;
42
- render(): TemplateResult;
43
5
  }
@@ -1,399 +1,75 @@
1
- var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
2
- function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
3
- var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
4
- var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
5
- var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
6
- var _, done = false;
7
- for (var i = decorators.length - 1; i >= 0; i--) {
8
- var context = {};
9
- for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
10
- for (var p in contextIn.access) context.access[p] = contextIn.access[p];
11
- context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
12
- var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
13
- if (kind === "accessor") {
14
- if (result === void 0) continue;
15
- if (result === null || typeof result !== "object") throw new TypeError("Object expected");
16
- if (_ = accept(result.get)) descriptor.get = _;
17
- if (_ = accept(result.set)) descriptor.set = _;
18
- if (_ = accept(result.init)) initializers.unshift(_);
19
- }
20
- else if (_ = accept(result)) {
21
- if (kind === "field") initializers.unshift(_);
22
- else descriptor[key] = _;
23
- }
24
- }
25
- if (target) Object.defineProperty(target, contextIn.name, descriptor);
26
- done = true;
27
- };
28
- var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
29
- var useValue = arguments.length > 2;
30
- for (var i = 0; i < initializers.length; i++) {
31
- value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
32
- }
33
- return useValue ? value : void 0;
34
- };
35
- var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
36
- if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
37
- return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
38
- };
39
- import { css, html, LitElement, nothing } from "lit";
40
- import { property, state } from "lit/decorators.js";
41
- import { live } from "lit/directives/live.js";
42
- import { base } from "@deepfuture/dui-core/base";
43
- import { customEvent } from "@deepfuture/dui-core/event";
44
- export const valueChangeEvent = customEvent("value-change", { bubbles: true, composed: true });
45
- export const valueCommittedEvent = customEvent("value-committed", { bubbles: true, composed: true });
46
- /** Structural styles only — layout CSS. */
1
+ import { css } from "lit";
2
+ import { DuiStepperPrimitive } from "@deepfuture/dui-primitives/stepper";
3
+ import "../_install.js";
47
4
  const styles = css `
48
- :host {
49
- display: block;
5
+ [part="root"] {
6
+ border: var(--border-width-thin) solid var(--border);
7
+ border-radius: var(--radius-md);
8
+ background: transparent;
9
+ transition-property: border-color, box-shadow;
10
+ transition-duration: var(--duration-fast);
50
11
  }
51
12
 
52
- [part="root"] {
53
- display: inline-flex;
54
- align-items: center;
13
+ [part="root"]:focus-within {
14
+ box-shadow:
15
+ 0 0 0 var(--focus-ring-offset) var(--background),
16
+ 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
17
+ }
18
+
19
+ [part="root"][data-disabled] {
20
+ opacity: 0.4;
21
+ }
22
+
23
+ :host([aria-invalid="true"]) [part="root"] {
24
+ border-color: var(--destructive);
55
25
  }
56
26
 
57
27
  [part="input"] {
58
- box-sizing: border-box;
59
- outline: none;
60
- border: none;
61
- background: none;
62
- font: inherit;
63
- color: inherit;
64
- text-align: center;
65
- min-width: 0;
28
+ height: var(--component-height-md);
29
+ width: var(--space-16);
30
+ font-family: var(--font-sans);
31
+ font-size: var(--text-sm);
32
+ font-weight: var(--font-weight-medium);
33
+ color: var(--text-1);
66
34
  }
67
35
 
68
- [part="input"]:disabled {
69
- cursor: not-allowed;
36
+ :host([size="sm"]) [part="input"] {
37
+ height: var(--component-height-sm);
38
+ width: var(--space-14);
39
+ font-size: var(--text-xs);
70
40
  }
71
41
 
72
42
  [part="decrement"],
73
43
  [part="increment"] {
74
- display: inline-flex;
75
- align-items: center;
76
- justify-content: center;
77
- cursor: pointer;
78
- border: none;
79
- background: none;
80
- padding: 0;
81
- margin: 0;
82
- font: inherit;
83
- color: inherit;
84
- flex-shrink: 0;
44
+ width: var(--component-height-md);
45
+ height: var(--component-height-md);
46
+ color: var(--text-2);
47
+ border-radius: var(--radius-sm);
48
+ font-size: var(--text-lg);
49
+ transition-property: background, color;
50
+ transition-duration: var(--duration-fast);
85
51
  }
86
52
 
87
- [part="decrement"]:disabled,
88
- [part="increment"]:disabled {
89
- cursor: not-allowed;
53
+ :host([size="sm"]) [part="decrement"],
54
+ :host([size="sm"]) [part="increment"] {
55
+ width: var(--component-height-sm);
56
+ height: var(--component-height-sm);
90
57
  }
91
58
 
92
- .HiddenInput {
93
- position: absolute;
94
- pointer-events: none;
95
- opacity: 0;
96
- margin: 0;
97
- width: 0;
98
- height: 0;
59
+ @media (hover: hover) {
60
+ [part="decrement"]:hover:not(:disabled),
61
+ [part="increment"]:hover:not(:disabled) {
62
+ background: var(--surface-1);
63
+ color: var(--text-1);
64
+ }
65
+ }
66
+
67
+ [part="decrement"]:disabled,
68
+ [part="increment"]:disabled {
69
+ opacity: 0.4;
99
70
  }
100
71
  `;
101
- /**
102
- * `<dui-stepper>` A numeric input with increment/decrement buttons.
103
- *
104
- * Simple component for stepping values up and down via buttons, keyboard,
105
- * or manual text entry. No labels, icons, scrubbing, or other extras.
106
- *
107
- * @csspart root - The outer container.
108
- * @csspart input - The text input element.
109
- * @csspart decrement - The decrement button.
110
- * @csspart increment - The increment button.
111
- * @fires value-change - Fired when value changes. Detail: { value: number }
112
- * @fires value-committed - Fired on blur or Enter. Detail: { value: number }
113
- */
114
- let DuiStepper = (() => {
115
- let _classSuper = LitElement;
116
- let _value_decorators;
117
- let _value_initializers = [];
118
- let _value_extraInitializers = [];
119
- let _defaultValue_decorators;
120
- let _defaultValue_initializers = [];
121
- let _defaultValue_extraInitializers = [];
122
- let _min_decorators;
123
- let _min_initializers = [];
124
- let _min_extraInitializers = [];
125
- let _max_decorators;
126
- let _max_initializers = [];
127
- let _max_extraInitializers = [];
128
- let _step_decorators;
129
- let _step_initializers = [];
130
- let _step_extraInitializers = [];
131
- let _largeStep_decorators;
132
- let _largeStep_initializers = [];
133
- let _largeStep_extraInitializers = [];
134
- let _disabled_decorators;
135
- let _disabled_initializers = [];
136
- let _disabled_extraInitializers = [];
137
- let _readOnly_decorators;
138
- let _readOnly_initializers = [];
139
- let _readOnly_extraInitializers = [];
140
- let _required_decorators;
141
- let _required_initializers = [];
142
- let _required_extraInitializers = [];
143
- let _name_decorators;
144
- let _name_initializers = [];
145
- let _name_extraInitializers = [];
146
- let _private_internalValue_decorators;
147
- let _private_internalValue_initializers = [];
148
- let _private_internalValue_extraInitializers = [];
149
- let _private_internalValue_descriptor;
150
- let _private_inputText_decorators;
151
- let _private_inputText_initializers = [];
152
- let _private_inputText_extraInitializers = [];
153
- let _private_inputText_descriptor;
154
- return class DuiStepper extends _classSuper {
155
- static {
156
- const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
157
- _value_decorators = [property({ type: Number })];
158
- _defaultValue_decorators = [property({ type: Number, attribute: "default-value" })];
159
- _min_decorators = [property({ type: Number })];
160
- _max_decorators = [property({ type: Number })];
161
- _step_decorators = [property({ type: Number })];
162
- _largeStep_decorators = [property({ type: Number, attribute: "large-step" })];
163
- _disabled_decorators = [property({ type: Boolean, reflect: true })];
164
- _readOnly_decorators = [property({ type: Boolean, reflect: true, attribute: "read-only" })];
165
- _required_decorators = [property({ type: Boolean })];
166
- _name_decorators = [property()];
167
- _private_internalValue_decorators = [state()];
168
- _private_inputText_decorators = [state()];
169
- __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
170
- __esDecorate(this, null, _defaultValue_decorators, { kind: "accessor", name: "defaultValue", static: false, private: false, access: { has: obj => "defaultValue" in obj, get: obj => obj.defaultValue, set: (obj, value) => { obj.defaultValue = value; } }, metadata: _metadata }, _defaultValue_initializers, _defaultValue_extraInitializers);
171
- __esDecorate(this, null, _min_decorators, { kind: "accessor", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
172
- __esDecorate(this, null, _max_decorators, { kind: "accessor", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
173
- __esDecorate(this, null, _step_decorators, { kind: "accessor", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
174
- __esDecorate(this, null, _largeStep_decorators, { kind: "accessor", name: "largeStep", static: false, private: false, access: { has: obj => "largeStep" in obj, get: obj => obj.largeStep, set: (obj, value) => { obj.largeStep = value; } }, metadata: _metadata }, _largeStep_initializers, _largeStep_extraInitializers);
175
- __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
176
- __esDecorate(this, null, _readOnly_decorators, { kind: "accessor", name: "readOnly", static: false, private: false, access: { has: obj => "readOnly" in obj, get: obj => obj.readOnly, set: (obj, value) => { obj.readOnly = value; } }, metadata: _metadata }, _readOnly_initializers, _readOnly_extraInitializers);
177
- __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
178
- __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
179
- __esDecorate(this, _private_internalValue_descriptor = { get: __setFunctionName(function () { return this.#internalValue_accessor_storage; }, "#internalValue", "get"), set: __setFunctionName(function (value) { this.#internalValue_accessor_storage = value; }, "#internalValue", "set") }, _private_internalValue_decorators, { kind: "accessor", name: "#internalValue", static: false, private: true, access: { has: obj => #internalValue in obj, get: obj => obj.#internalValue, set: (obj, value) => { obj.#internalValue = value; } }, metadata: _metadata }, _private_internalValue_initializers, _private_internalValue_extraInitializers);
180
- __esDecorate(this, _private_inputText_descriptor = { get: __setFunctionName(function () { return this.#inputText_accessor_storage; }, "#inputText", "get"), set: __setFunctionName(function (value) { this.#inputText_accessor_storage = value; }, "#inputText", "set") }, _private_inputText_decorators, { kind: "accessor", name: "#inputText", static: false, private: true, access: { has: obj => #inputText in obj, get: obj => obj.#inputText, set: (obj, value) => { obj.#inputText = value; } }, metadata: _metadata }, _private_inputText_initializers, _private_inputText_extraInitializers);
181
- if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
182
- }
183
- static tagName = "dui-stepper";
184
- static shadowRootOptions = {
185
- ...LitElement.shadowRootOptions,
186
- delegatesFocus: true,
187
- };
188
- static styles = [base, styles];
189
- #value_accessor_storage = __runInitializers(this, _value_initializers, undefined);
190
- get value() { return this.#value_accessor_storage; }
191
- set value(value) { this.#value_accessor_storage = value; }
192
- #defaultValue_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _defaultValue_initializers, undefined));
193
- get defaultValue() { return this.#defaultValue_accessor_storage; }
194
- set defaultValue(value) { this.#defaultValue_accessor_storage = value; }
195
- #min_accessor_storage = (__runInitializers(this, _defaultValue_extraInitializers), __runInitializers(this, _min_initializers, undefined));
196
- get min() { return this.#min_accessor_storage; }
197
- set min(value) { this.#min_accessor_storage = value; }
198
- #max_accessor_storage = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, undefined));
199
- get max() { return this.#max_accessor_storage; }
200
- set max(value) { this.#max_accessor_storage = value; }
201
- #step_accessor_storage = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _step_initializers, 1));
202
- get step() { return this.#step_accessor_storage; }
203
- set step(value) { this.#step_accessor_storage = value; }
204
- #largeStep_accessor_storage = (__runInitializers(this, _step_extraInitializers), __runInitializers(this, _largeStep_initializers, 10));
205
- get largeStep() { return this.#largeStep_accessor_storage; }
206
- set largeStep(value) { this.#largeStep_accessor_storage = value; }
207
- #disabled_accessor_storage = (__runInitializers(this, _largeStep_extraInitializers), __runInitializers(this, _disabled_initializers, false));
208
- get disabled() { return this.#disabled_accessor_storage; }
209
- set disabled(value) { this.#disabled_accessor_storage = value; }
210
- #readOnly_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _readOnly_initializers, false));
211
- get readOnly() { return this.#readOnly_accessor_storage; }
212
- set readOnly(value) { this.#readOnly_accessor_storage = value; }
213
- #required_accessor_storage = (__runInitializers(this, _readOnly_extraInitializers), __runInitializers(this, _required_initializers, false));
214
- get required() { return this.#required_accessor_storage; }
215
- set required(value) { this.#required_accessor_storage = value; }
216
- #name_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _name_initializers, undefined));
217
- get name() { return this.#name_accessor_storage; }
218
- set name(value) { this.#name_accessor_storage = value; }
219
- #internalValue_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _private_internalValue_initializers, undefined));
220
- // ── Internal state ─────────────────────────────────────────────────
221
- get #internalValue() { return _private_internalValue_descriptor.get.call(this); }
222
- set #internalValue(value) { return _private_internalValue_descriptor.set.call(this, value); }
223
- #inputText_accessor_storage = (__runInitializers(this, _private_internalValue_extraInitializers), __runInitializers(this, _private_inputText_initializers, ""));
224
- get #inputText() { return _private_inputText_descriptor.get.call(this); }
225
- set #inputText(value) { return _private_inputText_descriptor.set.call(this, value); }
226
- // ── Computed getters ───────────────────────────────────────────────
227
- get #currentValue() {
228
- return this.value ?? this.#internalValue;
229
- }
230
- get #canDecrement() {
231
- const v = this.#currentValue;
232
- if (v === undefined)
233
- return true;
234
- return this.min === undefined || v > this.min;
235
- }
236
- get #canIncrement() {
237
- const v = this.#currentValue;
238
- if (v === undefined)
239
- return true;
240
- return this.max === undefined || v < this.max;
241
- }
242
- // ── Lifecycle ──────────────────────────────────────────────────────
243
- connectedCallback() {
244
- super.connectedCallback();
245
- if (this.value === undefined && this.defaultValue !== undefined) {
246
- this.#internalValue = this.#clamp(this.defaultValue);
247
- }
248
- this.#syncInputText();
249
- }
250
- willUpdate() {
251
- this.#syncInputText();
252
- }
253
- // ── Value helpers ──────────────────────────────────────────────────
254
- #syncInputText() {
255
- const v = this.#currentValue;
256
- this.#inputText = v !== undefined ? String(v) : "";
257
- }
258
- #clamp(val) {
259
- if (this.min !== undefined)
260
- val = Math.max(this.min, val);
261
- if (this.max !== undefined)
262
- val = Math.min(this.max, val);
263
- return val;
264
- }
265
- #setValue(val) {
266
- const clamped = this.#clamp(val);
267
- if (this.value === undefined) {
268
- this.#internalValue = clamped;
269
- }
270
- this.dispatchEvent(valueChangeEvent({ value: clamped }));
271
- }
272
- #increment = (__runInitializers(this, _private_inputText_extraInitializers), (amount) => {
273
- if (this.disabled || this.readOnly)
274
- return;
275
- const current = this.#currentValue ?? this.min ?? 0;
276
- this.#setValue(current + amount);
277
- });
278
- #decrement = (amount) => {
279
- if (this.disabled || this.readOnly)
280
- return;
281
- const current = this.#currentValue ?? this.max ?? 0;
282
- this.#setValue(current - amount);
283
- };
284
- #commitInput() {
285
- const parsed = parseFloat(this.#inputText);
286
- if (Number.isNaN(parsed)) {
287
- this.#syncInputText();
288
- }
289
- else {
290
- this.#setValue(parsed);
291
- }
292
- const v = this.#currentValue;
293
- if (v !== undefined) {
294
- this.dispatchEvent(valueCommittedEvent({ value: v }));
295
- }
296
- }
297
- // ── Event handlers ─────────────────────────────────────────────────
298
- #onInput = (e) => {
299
- this.#inputText = e.target.value;
300
- };
301
- #onBlur = () => {
302
- this.#commitInput();
303
- };
304
- #onKeyDown = (e) => {
305
- switch (e.key) {
306
- case "ArrowUp":
307
- e.preventDefault();
308
- this.#increment(e.shiftKey ? this.largeStep : this.step);
309
- this.#syncInputText();
310
- break;
311
- case "ArrowDown":
312
- e.preventDefault();
313
- this.#decrement(e.shiftKey ? this.largeStep : this.step);
314
- this.#syncInputText();
315
- break;
316
- case "Home":
317
- if (this.min !== undefined) {
318
- e.preventDefault();
319
- this.#setValue(this.min);
320
- }
321
- break;
322
- case "End":
323
- if (this.max !== undefined) {
324
- e.preventDefault();
325
- this.#setValue(this.max);
326
- }
327
- break;
328
- case "Enter":
329
- this.#commitInput();
330
- break;
331
- }
332
- };
333
- #onDecrementClick = () => {
334
- this.#decrement(this.step);
335
- const v = this.#currentValue;
336
- if (v !== undefined) {
337
- this.dispatchEvent(valueCommittedEvent({ value: v }));
338
- }
339
- };
340
- #onIncrementClick = () => {
341
- this.#increment(this.step);
342
- const v = this.#currentValue;
343
- if (v !== undefined) {
344
- this.dispatchEvent(valueCommittedEvent({ value: v }));
345
- }
346
- };
347
- // ── Render ─────────────────────────────────────────────────────────
348
- render() {
349
- const currentValue = this.#currentValue;
350
- return html `
351
- <div
352
- part="root"
353
- ?data-disabled="${this.disabled}"
354
- >
355
- <button
356
- part="decrement"
357
- type="button"
358
- tabindex="-1"
359
- aria-label="Decrease"
360
- ?disabled="${this.disabled || this.readOnly || !this.#canDecrement}"
361
- @click="${this.#onDecrementClick}"
362
- >
363
- <slot name="decrement">&minus;</slot>
364
- </button>
365
- <input
366
- part="input"
367
- type="text"
368
- inputmode="decimal"
369
- .value="${live(this.#inputText)}"
370
- ?disabled="${this.disabled}"
371
- ?readonly="${this.readOnly}"
372
- ?required="${this.required}"
373
- @input="${this.#onInput}"
374
- @keydown="${this.#onKeyDown}"
375
- @blur="${this.#onBlur}"
376
- />
377
- <button
378
- part="increment"
379
- type="button"
380
- tabindex="-1"
381
- aria-label="Increase"
382
- ?disabled="${this.disabled || this.readOnly || !this.#canIncrement}"
383
- @click="${this.#onIncrementClick}"
384
- >
385
- <slot name="increment">+</slot>
386
- </button>
387
- ${this.name
388
- ? html `<input
389
- type="hidden"
390
- name="${this.name}"
391
- .value="${String(currentValue ?? "")}"
392
- />`
393
- : nothing}
394
- </div>
395
- `;
396
- }
397
- };
398
- })();
399
- export { DuiStepper };
72
+ export class DuiStepper extends DuiStepperPrimitive {
73
+ static styles = [...DuiStepperPrimitive.styles, styles];
74
+ }
75
+ customElements.define(DuiStepper.tagName, DuiStepper);
package/switch/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { DuiSwitch, checkedChangeEvent } from "./switch.js";
2
- export { DuiSwitch, checkedChangeEvent };
3
- export declare const switchFamily: (typeof DuiSwitch)[];
1
+ import "./switch.js";
2
+ export { DuiSwitch } from "./switch.js";
3
+ export { checkedChangeEvent } from "@deepfuture/dui-primitives/switch";
package/switch/index.js CHANGED
@@ -1,3 +1,3 @@
1
- import { DuiSwitch, checkedChangeEvent } from "./switch.js";
2
- export { DuiSwitch, checkedChangeEvent };
3
- export const switchFamily = [DuiSwitch];
1
+ import "./switch.js";
2
+ export { DuiSwitch } from "./switch.js";
3
+ export { checkedChangeEvent } from "@deepfuture/dui-primitives/switch";
@@ -1,32 +1,5 @@
1
- import { LitElement, type TemplateResult } from "lit";
2
- export declare const checkedChangeEvent: (detail: {
3
- checked: boolean;
4
- }) => CustomEvent<{
5
- checked: boolean;
6
- }>;
7
- /**
8
- * `<dui-switch>` — A toggle switch for binary on/off settings.
9
- *
10
- * @csspart root - The switch track container.
11
- * @csspart thumb - The movable thumb indicator.
12
- * @fires checked-change - Fired when toggled. Detail: { checked: boolean }
13
- */
14
- export declare class DuiSwitch extends LitElement {
15
- #private;
16
- static tagName: "dui-switch";
17
- static formAssociated: boolean;
1
+ import { DuiSwitchPrimitive } from "@deepfuture/dui-primitives/switch";
2
+ import "../_install.js";
3
+ export declare class DuiSwitch extends DuiSwitchPrimitive {
18
4
  static styles: import("lit").CSSResult[];
19
- constructor();
20
- accessor checked: boolean | undefined;
21
- accessor defaultChecked: boolean;
22
- accessor disabled: boolean;
23
- accessor readOnly: boolean;
24
- accessor required: boolean;
25
- accessor name: string | undefined;
26
- accessor value: string;
27
- accessor uncheckedValue: string;
28
- connectedCallback(): void;
29
- willUpdate(): void;
30
- disconnectedCallback(): void;
31
- render(): TemplateResult;
32
5
  }