@swell/swell-ui 0.0.0-stage → 0.1.1

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 (225) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/README.md +165 -2
  3. package/custom-elements.json +8274 -0
  4. package/dist/chunks/badge-Dt6q8Cqa.js +11 -0
  5. package/dist/chunks/button-C7nCiu-t.js +123 -0
  6. package/dist/chunks/card-CvSQEug8.js +10 -0
  7. package/dist/chunks/checkbox-BRI_A1TP.js +99 -0
  8. package/dist/chunks/chip-BtnufSMG.js +48 -0
  9. package/dist/chunks/config-C-FYxOaJ.js +588 -0
  10. package/dist/chunks/define-BlQTa1g4.js +19 -0
  11. package/dist/chunks/description-BHfQ8meK.js +19 -0
  12. package/dist/chunks/disclosure-CET8-H6f.js +56 -0
  13. package/dist/chunks/divider-BfkO0c1j.js +27 -0
  14. package/dist/chunks/element-B4-_7TLZ.js +138 -0
  15. package/dist/chunks/input-Uun-ls2_.js +53 -0
  16. package/dist/chunks/link-8qHFEKQE.js +53 -0
  17. package/dist/chunks/link-D4NC86oc.js +24 -0
  18. package/dist/chunks/lookup-5icr_T6o.js +205 -0
  19. package/dist/chunks/lookup-list-Bw6OJoDS.js +19 -0
  20. package/dist/chunks/lookup-option-Mn3k8W2M.js +26 -0
  21. package/dist/chunks/popover-D3Ob6slA.js +92 -0
  22. package/dist/chunks/popup-Dbh2fchP.js +21 -0
  23. package/dist/chunks/quantity-h3wqn8tC.js +140 -0
  24. package/dist/chunks/radio-BhFDL3pO.js +192 -0
  25. package/dist/chunks/radio-option-hT29S8Zl.js +88 -0
  26. package/dist/chunks/select-DS1n_htj.js +331 -0
  27. package/dist/chunks/select-option-DoM9GAe0.js +66 -0
  28. package/dist/chunks/skeleton-DfPjhls9.js +13 -0
  29. package/dist/chunks/status-B23JZ5RQ.js +71 -0
  30. package/dist/chunks/tab-BpjFUbFO.js +107 -0
  31. package/dist/chunks/tabs-aWKq1Iaz.js +122 -0
  32. package/dist/chunks/text-ZWPy-iB3.js +26 -0
  33. package/dist/chunks/text-field-BB_MRt5h.js +158 -0
  34. package/dist/chunks/textarea-L6_OJ2IN.js +18 -0
  35. package/dist/chunks/thumbnail-CLe9AsFg.js +21 -0
  36. package/dist/chunks/toggle-C7-oPgWR.js +22 -0
  37. package/dist/chunks/ui-HcyMKwzs.js +11 -0
  38. package/dist/editors/vscode.css-custom-data.json +824 -0
  39. package/dist/editors/vscode.html-custom-data.json +1156 -0
  40. package/dist/editors/web-types.json +1706 -0
  41. package/dist/elements/badge.d.ts +1 -0
  42. package/dist/elements/badge.js +1 -0
  43. package/dist/elements/button.d.ts +1 -0
  44. package/dist/elements/button.js +1 -0
  45. package/dist/elements/card.d.ts +1 -0
  46. package/dist/elements/card.js +1 -0
  47. package/dist/elements/checkbox.d.ts +1 -0
  48. package/dist/elements/checkbox.js +1 -0
  49. package/dist/elements/chip.d.ts +1 -0
  50. package/dist/elements/chip.js +1 -0
  51. package/dist/elements/disclosure.d.ts +1 -0
  52. package/dist/elements/disclosure.js +1 -0
  53. package/dist/elements/divider.d.ts +1 -0
  54. package/dist/elements/divider.js +1 -0
  55. package/dist/elements/input.d.ts +1 -0
  56. package/dist/elements/input.js +1 -0
  57. package/dist/elements/link.d.ts +1 -0
  58. package/dist/elements/link.js +1 -0
  59. package/dist/elements/lookup-list.d.ts +1 -0
  60. package/dist/elements/lookup-list.js +1 -0
  61. package/dist/elements/lookup-option.d.ts +1 -0
  62. package/dist/elements/lookup-option.js +1 -0
  63. package/dist/elements/lookup.d.ts +1 -0
  64. package/dist/elements/lookup.js +1 -0
  65. package/dist/elements/popover.d.ts +1 -0
  66. package/dist/elements/popover.js +1 -0
  67. package/dist/elements/quantity.d.ts +1 -0
  68. package/dist/elements/quantity.js +1 -0
  69. package/dist/elements/radio-option.d.ts +1 -0
  70. package/dist/elements/radio-option.js +1 -0
  71. package/dist/elements/radio.d.ts +1 -0
  72. package/dist/elements/radio.js +1 -0
  73. package/dist/elements/select-option.d.ts +1 -0
  74. package/dist/elements/select-option.js +1 -0
  75. package/dist/elements/select.d.ts +1 -0
  76. package/dist/elements/select.js +1 -0
  77. package/dist/elements/skeleton.d.ts +1 -0
  78. package/dist/elements/skeleton.js +1 -0
  79. package/dist/elements/status.d.ts +1 -0
  80. package/dist/elements/status.js +1 -0
  81. package/dist/elements/tab.d.ts +1 -0
  82. package/dist/elements/tab.js +1 -0
  83. package/dist/elements/tabs.d.ts +1 -0
  84. package/dist/elements/tabs.js +1 -0
  85. package/dist/elements/text.d.ts +1 -0
  86. package/dist/elements/text.js +1 -0
  87. package/dist/elements/textarea.d.ts +1 -0
  88. package/dist/elements/textarea.js +1 -0
  89. package/dist/elements/thumbnail.d.ts +1 -0
  90. package/dist/elements/thumbnail.js +1 -0
  91. package/dist/elements/ui.d.ts +1 -0
  92. package/dist/elements/ui.js +1 -0
  93. package/dist/frameworks/jsx.d.ts +3589 -0
  94. package/dist/frameworks/preact.d.ts +9 -0
  95. package/dist/frameworks/solid.d.ts +7 -0
  96. package/dist/frameworks/svelte.d.ts +1676 -0
  97. package/dist/frameworks/vue.d.ts +827 -0
  98. package/dist/index.js +80 -0
  99. package/dist/react/badge.d.ts +12 -0
  100. package/dist/react/badge.js +4 -0
  101. package/dist/react/button.d.ts +16 -0
  102. package/dist/react/button.js +4 -0
  103. package/dist/react/card.d.ts +11 -0
  104. package/dist/react/card.js +4 -0
  105. package/dist/react/checkbox.d.ts +14 -0
  106. package/dist/react/checkbox.js +4 -0
  107. package/dist/react/chip.d.ts +12 -0
  108. package/dist/react/chip.js +4 -0
  109. package/dist/react/create.js +49 -0
  110. package/dist/react/disclosure.d.ts +11 -0
  111. package/dist/react/disclosure.js +4 -0
  112. package/dist/react/divider.d.ts +9 -0
  113. package/dist/react/divider.js +4 -0
  114. package/dist/react/index.d.ts +26 -0
  115. package/dist/react/index.js +26 -0
  116. package/dist/react/input.d.ts +28 -0
  117. package/dist/react/input.js +4 -0
  118. package/dist/react/link.d.ts +15 -0
  119. package/dist/react/link.js +4 -0
  120. package/dist/react/lookup-list.d.ts +9 -0
  121. package/dist/react/lookup-list.js +4 -0
  122. package/dist/react/lookup-option.d.ts +11 -0
  123. package/dist/react/lookup-option.js +4 -0
  124. package/dist/react/lookup.d.ts +28 -0
  125. package/dist/react/lookup.js +4 -0
  126. package/dist/react/popover.d.ts +11 -0
  127. package/dist/react/popover.js +4 -0
  128. package/dist/react/quantity.d.ts +15 -0
  129. package/dist/react/quantity.js +4 -0
  130. package/dist/react/radio-option.d.ts +11 -0
  131. package/dist/react/radio-option.js +4 -0
  132. package/dist/react/radio.d.ts +18 -0
  133. package/dist/react/radio.js +4 -0
  134. package/dist/react/select-option.d.ts +11 -0
  135. package/dist/react/select-option.js +4 -0
  136. package/dist/react/select.d.ts +20 -0
  137. package/dist/react/select.js +4 -0
  138. package/dist/react/skeleton.d.ts +11 -0
  139. package/dist/react/skeleton.js +4 -0
  140. package/dist/react/status.d.ts +12 -0
  141. package/dist/react/status.js +4 -0
  142. package/dist/react/tab.d.ts +10 -0
  143. package/dist/react/tab.js +4 -0
  144. package/dist/react/tabs.d.ts +17 -0
  145. package/dist/react/tabs.js +4 -0
  146. package/dist/react/text.d.ts +12 -0
  147. package/dist/react/text.js +4 -0
  148. package/dist/react/textarea.d.ts +23 -0
  149. package/dist/react/textarea.js +4 -0
  150. package/dist/react/thumbnail.d.ts +13 -0
  151. package/dist/react/thumbnail.js +4 -0
  152. package/dist/react/ui.d.ts +10 -0
  153. package/dist/react/ui.js +4 -0
  154. package/dist/types/components/core/badge/badge.d.ts +25 -0
  155. package/dist/types/components/core/button/button.d.ts +60 -0
  156. package/dist/types/components/core/card/card.d.ts +21 -0
  157. package/dist/types/components/core/checkbox/checkbox.d.ts +46 -0
  158. package/dist/types/components/core/chip/chip.d.ts +36 -0
  159. package/dist/types/components/core/disclosure/disclosure.d.ts +37 -0
  160. package/dist/types/components/core/divider/divider.d.ts +21 -0
  161. package/dist/types/components/core/index.d.ts +21 -0
  162. package/dist/types/components/core/input/input.d.ts +57 -0
  163. package/dist/types/components/core/link/link.d.ts +42 -0
  164. package/dist/types/components/core/lookup/lookup-list.d.ts +21 -0
  165. package/dist/types/components/core/lookup/lookup-option.d.ts +27 -0
  166. package/dist/types/components/core/lookup/lookup.d.ts +32 -0
  167. package/dist/types/components/core/popover/popover.d.ts +33 -0
  168. package/dist/types/components/core/quantity/quantity.d.ts +47 -0
  169. package/dist/types/components/core/radio/radio-option.d.ts +82 -0
  170. package/dist/types/components/core/radio/radio.d.ts +65 -0
  171. package/dist/types/components/core/select/select-option.d.ts +69 -0
  172. package/dist/types/components/core/select/select.d.ts +70 -0
  173. package/dist/types/components/core/skeleton/skeleton.d.ts +23 -0
  174. package/dist/types/components/core/status/status.d.ts +38 -0
  175. package/dist/types/components/core/tabs/tab.d.ts +76 -0
  176. package/dist/types/components/core/tabs/tabs.d.ts +46 -0
  177. package/dist/types/components/core/text/text.d.ts +23 -0
  178. package/dist/types/components/core/textarea/textarea.d.ts +45 -0
  179. package/dist/types/components/core/thumbnail/thumbnail.d.ts +27 -0
  180. package/dist/types/components/core/ui/ui.d.ts +16 -0
  181. package/dist/types/components/elements.d.ts +1 -0
  182. package/dist/types/react/create.d.ts +8 -0
  183. package/dist/types/runtime/config.d.ts +25 -0
  184. package/dist/types/runtime/css.d.ts +12 -0
  185. package/dist/types/runtime/define.d.ts +4 -0
  186. package/dist/types/runtime/description.d.ts +12 -0
  187. package/dist/types/runtime/element.d.ts +61 -0
  188. package/dist/types/runtime/focus.d.ts +5 -0
  189. package/dist/types/runtime/form.d.ts +5 -0
  190. package/dist/types/runtime/index.d.ts +2 -0
  191. package/dist/types/runtime/link.d.ts +17 -0
  192. package/dist/types/runtime/loader.d.ts +21 -0
  193. package/dist/types/runtime/popup.d.ts +8 -0
  194. package/dist/types/runtime/sheet.d.ts +31 -0
  195. package/dist/types/runtime/text-field.d.ts +47 -0
  196. package/dist/types/runtime/toggle.d.ts +8 -0
  197. package/dist/types/runtime/tokens.generated.d.ts +492 -0
  198. package/dist/types/runtime/values.d.ts +6 -0
  199. package/dist/types/runtime/variants.d.ts +4 -0
  200. package/package.json +136 -4
  201. package/resolver.json +111 -0
  202. package/src/components/core/badge/tokens.json +152 -0
  203. package/src/components/core/button/tokens.dark.json +16 -0
  204. package/src/components/core/button/tokens.json +232 -0
  205. package/src/components/core/card/tokens.json +35 -0
  206. package/src/components/core/checkbox/tokens.json +15 -0
  207. package/src/components/core/chip/tokens.json +144 -0
  208. package/src/components/core/link/tokens.json +24 -0
  209. package/src/components/core/radio/tokens.dark.json +17 -0
  210. package/src/components/core/radio/tokens.json +114 -0
  211. package/src/components/core/status/tokens.dark.json +71 -0
  212. package/src/components/core/status/tokens.json +135 -0
  213. package/src/components/core/tabs/tokens.json +80 -0
  214. package/src/components/core/text/tokens.json +222 -0
  215. package/src/components/core/thumbnail/tokens.json +46 -0
  216. package/tokens/border.json +38 -0
  217. package/tokens/color.dark.json +88 -0
  218. package/tokens/color.json +115 -0
  219. package/tokens/control.json +115 -0
  220. package/tokens/field.dark.json +65 -0
  221. package/tokens/field.json +158 -0
  222. package/tokens/focus.json +26 -0
  223. package/tokens/font.json +117 -0
  224. package/tokens/motion.json +49 -0
  225. package/tokens/overlay.json +81 -0
@@ -0,0 +1,331 @@
1
+ import { n as e, r as t, t as n } from "./define-BlQTa1g4.js";
2
+ import { n as r, t as i } from "./description-BHfQ8meK.js";
3
+ import { a, n as o } from "./element-B4-_7TLZ.js";
4
+ import { n as s, t as c } from "./popup-Dbh2fchP.js";
5
+ import { n as l, r as u } from "./select-option-DoM9GAe0.js";
6
+ // src/components/core/select/select.css?inline
7
+ var d = ":host{--_swell-control-font-size:var(--swell-control-font-size);--_swell-control-height:var(--swell-control-height)}:host([size=xsmall]){--_swell-control-font-size:var(--swell-control-xsmall-font-size);--_swell-control-height:var(--swell-control-xsmall-height)}:host([size=small]){--_swell-control-font-size:var(--swell-control-small-font-size);--_swell-control-height:var(--swell-control-small-height)}:host([size=large]){--_swell-control-font-size:var(--swell-control-large-font-size);--_swell-control-height:var(--swell-control-large-height)}:host([size=xlarge]){--_swell-control-font-size:var(--swell-control-xlarge-font-size);--_swell-control-height:var(--swell-control-xlarge-height)}:host{--_swell-select-small-text:max(12px, calc(var(--_swell-control-font-size) - 1px));--_swell-select-raised:clamp(11px, calc(var(--_swell-control-font-size) - 2px), 13px);--_swell-select-raised-line:round(up, calc(var(--_swell-select-raised) * 4 / 3), 2px);--_swell-select-rise:min(calc(.6 * var(--_swell-control-font-size) + 1.6px), calc(var(--_swell-control-height) / 2 - var(--_swell-select-raised-line) / 2 - 2px));gap:var(--swell-field-gap);display:grid}:host [hidden]{display:none!important}:host .box{gap:var(--swell-field-gap);display:grid;position:relative}:host .label{font:var(--swell-field-label-font-weight) var(--_swell-select-small-text) / var(--swell-font-leading) var(--swell-field-label-font-family);letter-spacing:var(--swell-field-label-font-tracking);color:var(--swell-field-label-color-foreground)}:host .field{box-sizing:border-box;gap:calc(var(--_swell-control-font-size) - 6px);height:var(--_swell-control-height);padding-inline:var(--_swell-control-font-size) calc(var(--_swell-control-font-size) - 2px);border:var(--swell-border-width) solid var(--swell-field-color-border);border-radius:var(--swell-border-radius);font:var(--swell-font-weight) var(--_swell-control-font-size) / normal var(--swell-font-family);letter-spacing:var(--swell-font-tracking);color:var(--swell-field-color-foreground);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--swell-motion-duration-fast) var(--swell-motion-easing), box-shadow var(--swell-motion-duration-base) var(--swell-motion-easing);background:0 0;align-items:center;display:flex}:host .field:hover{border-color:var(--swell-field-hover-color-border)}:host(:disabled) .field{cursor:not-allowed;opacity:var(--swell-control-disabled-opacity)}:host(:state(outline)) .field{background:var(--swell-field-outline-color-background)}:host(:state(filled)) .field{border-width:0 0 var(--swell-border-width);border-radius:var(--swell-border-radius) var(--swell-border-radius) 0 0;background:var(--swell-field-color-background)}:host(:state(underline)) .field{border-width:0 0 var(--swell-border-width);border-radius:0;padding-inline:0}:host([invalid]) .field{border-color:var(--swell-color-danger);animation:swell-select-shake var(--swell-motion-duration-slow) var(--swell-motion-easing)}:host .field:focus,:host(:state(open)) .field{border-color:var(--swell-focus-color);outline:none}:host(:state(outline)[invalid]) .field{box-shadow:0 0 0 var(--swell-field-ring-width) var(--swell-field-invalid-color-ring)}:host(:state(outline)) .field:focus,:host(:state(outline):state(open)) .field{box-shadow:0 0 0 var(--swell-field-ring-width) var(--swell-field-focus-color-ring)}:host(:is(:state(filled),:state(underline))) .field:focus,:host(:is(:state(filled),:state(underline)):state(open)) .field{box-shadow:inset 0 calc(-1 * var(--swell-border-width)) 0 var(--swell-focus-color)}:host([invalid]) .field:focus,:host([invalid]:state(open)) .field{border-color:var(--swell-color-danger)}:host(:state(outline)[invalid]) .field:focus,:host(:state(outline)[invalid]:state(open)) .field{box-shadow:0 0 0 var(--swell-field-ring-width) var(--swell-field-invalid-color-ring), inset 0 0 0 var(--swell-border-width) var(--swell-color-danger)}:host(:is(:state(filled),:state(underline))[invalid]) .field:focus,:host(:is(:state(filled),:state(underline))[invalid]:state(open)) .field{box-shadow:inset 0 calc(-1 * var(--swell-border-width)) 0 var(--swell-color-danger)}@keyframes swell-select-shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-5px)}40%,60%{transform:translate(5px)}}:host .value{gap:calc(var(--_swell-control-font-size) - 6px);flex:1;align-items:center;min-width:0;display:flex}:host .start{flex:none;align-items:center;display:flex}:host .start:empty{display:none}:host .start svg{width:calc(var(--_swell-control-font-size) + 4px);height:calc(var(--_swell-control-font-size) + 4px);color:var(--swell-color-secondary-foreground);display:block}:host .text,:host .placeholder{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}:host .placeholder{color:var(--swell-color-secondary-foreground)}:host .chevron{width:calc(var(--_swell-control-font-size) + 4px);height:calc(var(--_swell-control-font-size) + 4px);color:var(--swell-color-secondary-foreground);transition:transform var(--swell-motion-duration-base) var(--swell-motion-easing);flex:none;display:grid}:host .chevron svg{width:100%;height:100%}:host(:state(open)) .chevron{transform:rotate(180deg)}:host .swell-select-hint,:host .swell-select-error{font:var(--swell-font-weight) var(--_swell-select-small-text) / var(--swell-font-leading) var(--swell-font-family);letter-spacing:var(--swell-font-tracking);color:var(--swell-color-secondary-foreground)}:host .swell-select-error:not([hidden]){font-weight:var(--swell-font-strong-weight);color:var(--swell-color-danger);animation:swell-select-enter var(--swell-motion-duration-base) var(--swell-motion-easing)}@keyframes swell-select-enter{0%{opacity:0;transform:translateY(-6px)}}:host(:state(floating)) .box{display:block}:host .optional{font-weight:var(--swell-font-weight);color:var(--swell-color-secondary-foreground)}:host(:state(floating)) .optional{font-weight:inherit}:host(:state(floating)) .label{inset-inline-start:calc(var(--_swell-control-font-size) + var(--swell-border-width));top:calc(var(--_swell-control-height) / 2);font-size:var(--_swell-control-font-size);font-weight:var(--swell-font-weight);line-height:round(up, calc(var(--_swell-control-font-size) * 4 / 3), 2px);color:var(--swell-color-secondary-foreground);pointer-events:none;transition:transform var(--swell-motion-duration-base) var(--swell-motion-easing), font-size var(--swell-motion-duration-base) var(--swell-motion-easing), line-height var(--swell-motion-duration-base) var(--swell-motion-easing);position:absolute;transform:translateY(-50%)}:host(:state(underline):state(floating)) .label{inset-inline-start:0}:host(:state(floating)) .box:has(.label:not([hidden])) :is(.value,.placeholder){padding-top:var(--_swell-select-raised-line);line-height:1.2}:host(:state(floating):state(empty):not(:state(open),:focus-within)) .box:has(.label:not([hidden])) .placeholder{opacity:0}:host(:state(floating):is(:not(:state(empty)),:state(open),:focus-within)) .label{font-size:var(--_swell-select-raised);font-weight:var(--swell-font-medium-weight);line-height:var(--_swell-select-raised-line);transform:translateY(calc(-50% - var(--_swell-select-rise)))}:host .list{box-sizing:border-box;border:var(--swell-border-width) solid var(--swell-overlay-color-border);border-radius:var(--swell-overlay-border-radius);font:var(--swell-font-weight) var(--_swell-control-font-size) / var(--swell-font-leading) var(--swell-font-family);letter-spacing:var(--swell-font-tracking);background:var(--swell-overlay-color-background);color:var(--swell-field-color-foreground);box-shadow:var(--swell-overlay-shadow) var(--swell-overlay-color-shadow);transform-origin:top;overscroll-behavior:contain;margin:0;padding:0;position:fixed;inset:auto;overflow:auto}:host .list:popover-open{animation:swell-select-below var(--swell-motion-duration-base) var(--swell-motion-easing)}:host .list.above{transform-origin:bottom}:host .list.above:popover-open{animation-name:swell-select-above}@keyframes swell-select-below{0%{opacity:0;transform:scale(.96)translateY(-6px)}}@keyframes swell-select-above{0%{opacity:0;transform:scale(.96)translateY(6px)}}@media (forced-colors:active){:host .field,:host .list{box-shadow:none;border-color:canvastext}:host .field:focus{outline:2px solid highlight}}", f = /* @__PURE__ */ t({ SwellSelect: () => v }), p = "\n <div class=\"box\">\n <div class=\"label\" id=\"label\" hidden></div>\n <div class=\"field\" role=\"combobox\" tabindex=\"0\" aria-haspopup=\"listbox\" aria-controls=\"list\" aria-expanded=\"false\">\n <span class=\"value\" hidden><span class=\"start\" aria-hidden=\"true\"></span><span class=\"text\"></span></span>\n <span class=\"placeholder\"></span>\n <span class=\"chevron\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.75\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"/></svg></span>\n </div>\n </div>\n <div class=\"list\" id=\"list\" role=\"listbox\" popover=\"auto\"><slot></slot></div>\n <select class=\"autofill\" hidden></select>", m = 500, h = 10, g;
8
+ function _() {
9
+ if (g === void 0) {
10
+ let e = document.createElement("form"), t = document.createElement("select");
11
+ t.required = !0, e.append(t), g = t.validationMessage;
12
+ }
13
+ return g;
14
+ }
15
+ var v = class extends o {
16
+ static appearance = "field";
17
+ static styles = d;
18
+ static template = p;
19
+ static formAssociated = !0;
20
+ static observedAttributes = [
21
+ ...o.observedAttributes,
22
+ "label",
23
+ "optional",
24
+ "hint",
25
+ "error",
26
+ "invalid",
27
+ "name",
28
+ "value",
29
+ "placeholder",
30
+ "required",
31
+ "disabled",
32
+ "autocomplete",
33
+ "aria-label"
34
+ ];
35
+ #e;
36
+ #t;
37
+ #n;
38
+ #r;
39
+ #i;
40
+ #a;
41
+ #o;
42
+ #s;
43
+ #c;
44
+ #l = !1;
45
+ #u;
46
+ #d;
47
+ #f = !0;
48
+ #p = !1;
49
+ #m;
50
+ #h = !1;
51
+ #g;
52
+ #_ = "";
53
+ #v;
54
+ constructor() {
55
+ super();
56
+ let e = this.shadowRoot, t = (t) => e.querySelector(`.${t}`);
57
+ this.#e = t("label"), this.#t = t("field"), this.#n = t("value"), this.#r = t("start"), this.#i = t("text"), this.#a = t("placeholder"), this.#o = t("list"), this.#s = e.querySelector("slot"), this.#c = e.querySelector(".autofill"), this.#c.addEventListener("input", (e) => e.stopPropagation()), this.#c.addEventListener("change", () => {
58
+ let e = this.#C()[this.#c.selectedIndex - 1];
59
+ e && !this.#b && this.#R(e);
60
+ }), this.#u = i("swell-select", "field"), t("box").after(this.#u.hint, this.#u.error), this.#s.addEventListener("slotchange", () => this.#U()), this.#t.addEventListener("pointerdown", () => {
61
+ this.#h = this.#p, addEventListener("pointerup", this.#A, { capture: !0 }), addEventListener("pointercancel", this.#A, { capture: !0 });
62
+ }), this.#t.addEventListener("click", () => this.#T()), this.#e.addEventListener("click", () => {
63
+ this.#b || this.#t.focus();
64
+ }), this.#o.addEventListener("mousedown", (e) => {
65
+ e.target === this.#o && e.preventDefault();
66
+ }), this.#o.addEventListener("beforetoggle", (e) => this.#O(e.newState === "open")), this.addEventListener("keydown", this.#M), this.addEventListener("focusout", this.#I), u.link(this, {
67
+ choose: (e) => {
68
+ e instanceof l && this.#L(e);
69
+ },
70
+ refresh: (e) => {
71
+ e instanceof l && this.#z(e);
72
+ }
73
+ }), new MutationObserver((e) => {
74
+ let t = /* @__PURE__ */ new Set();
75
+ for (let n of e) {
76
+ if (n.target === this) continue;
77
+ let e = n.target;
78
+ for (; e && e.parentNode !== this;) e = e.parentNode;
79
+ e instanceof l && (n.type !== "attributes" || e !== n.target) && t.add(e);
80
+ }
81
+ for (let e of t) this.#z(e);
82
+ }).observe(this, {
83
+ childList: !0,
84
+ characterData: !0,
85
+ attributes: !0,
86
+ subtree: !0
87
+ });
88
+ }
89
+ get value() {
90
+ return this.#y ?? "";
91
+ }
92
+ set value(e) {
93
+ this.#d = String(e), this.#U();
94
+ }
95
+ get name() {
96
+ return this.getAttribute("name") ?? "";
97
+ }
98
+ set name(e) {
99
+ this.setAttribute("name", e);
100
+ }
101
+ get required() {
102
+ return this.hasAttribute("required");
103
+ }
104
+ set required(e) {
105
+ this.toggleAttribute("required", !!e);
106
+ }
107
+ get disabled() {
108
+ return this.hasAttribute("disabled");
109
+ }
110
+ set disabled(e) {
111
+ this.toggleAttribute("disabled", !!e);
112
+ }
113
+ get invalid() {
114
+ return this.hasAttribute("invalid");
115
+ }
116
+ set invalid(e) {
117
+ this.toggleAttribute("invalid", !!e);
118
+ }
119
+ get form() {
120
+ return this.internals.form;
121
+ }
122
+ get validity() {
123
+ return this.internals.validity;
124
+ }
125
+ get validationMessage() {
126
+ return this.internals.validationMessage;
127
+ }
128
+ get willValidate() {
129
+ return this.internals.willValidate;
130
+ }
131
+ checkValidity() {
132
+ return this.internals.checkValidity();
133
+ }
134
+ reportValidity() {
135
+ return this.internals.reportValidity();
136
+ }
137
+ focus(e) {
138
+ this.#t.focus(e);
139
+ }
140
+ connectedCallback() {
141
+ for (let t of [
142
+ "value",
143
+ "name",
144
+ "required",
145
+ "disabled",
146
+ "invalid"
147
+ ]) e(this, t);
148
+ super.connectedCallback(), this.#U();
149
+ }
150
+ disconnectedCallback() {
151
+ super.disconnectedCallback(), this.#O(!1);
152
+ }
153
+ formResetCallback() {
154
+ this.#d = void 0, this.#U();
155
+ }
156
+ formDisabledCallback() {
157
+ this.#U();
158
+ }
159
+ formStateRestoreCallback(e) {
160
+ typeof e == "string" && (this.#d = e, this.#U());
161
+ }
162
+ update() {
163
+ this.#U();
164
+ }
165
+ extraStates() {
166
+ let e = a(this);
167
+ return [
168
+ ...e ? [e] : [],
169
+ ...this.#f ? ["empty"] : [],
170
+ ...this.#p ? ["open"] : []
171
+ ];
172
+ }
173
+ get #y() {
174
+ return this.#d ?? this.getAttribute("value");
175
+ }
176
+ get #b() {
177
+ return this.matches(":disabled");
178
+ }
179
+ #x;
180
+ #S() {
181
+ return this.#s.assignedElements().filter((e) => e instanceof l && !e.hidden);
182
+ }
183
+ #C() {
184
+ return this.#S().filter((e) => !e.disabled);
185
+ }
186
+ #w() {
187
+ return this.#C().find((e) => e.selected);
188
+ }
189
+ #T() {
190
+ let e = this.#h || this.#p;
191
+ this.#h = !1, e ? this.#D(!0) : this.#E(this.#w() ?? this.#C()[0]);
192
+ }
193
+ #E(e) {
194
+ this.#b || (this.#p || this.#o.showPopover(), this.#k(), e?.focus());
195
+ }
196
+ #D(e) {
197
+ this.#p && this.#o.hidePopover(), e && this.#t.focus();
198
+ }
199
+ #O(e) {
200
+ e !== this.#p && (this.#p = e, this.#t.setAttribute("aria-expanded", String(e)), this.#g?.(), this.#g = e ? c(this.#k) : void 0, this.updateStates());
201
+ }
202
+ #k = () => {
203
+ this.#o.classList.toggle("above", s(this.#t, this.#o, this));
204
+ };
205
+ #A = () => {
206
+ removeEventListener("pointerup", this.#A, { capture: !0 }), removeEventListener("pointercancel", this.#A, { capture: !0 }), setTimeout(() => this.#h = !1);
207
+ };
208
+ #j(e, t) {
209
+ clearTimeout(this.#v), this.#_ += e.toLowerCase(), this.#v = setTimeout(() => this.#_ = "", m);
210
+ let n = this.#_, r = [...n].every((e) => e === n[0]) ? n.charAt(0) : n, i = this.#C(), a = t ? i.indexOf(t) : -1, o = r.length === 1 ? a + 1 : Math.max(a, 0);
211
+ return [...i.slice(o), ...i.slice(0, o)].find((e) => e.label.toLowerCase().startsWith(r));
212
+ }
213
+ #M = (e) => {
214
+ if (this.#b || e.defaultPrevented) return;
215
+ let t = e.target;
216
+ t === this ? this.#N(e) : t instanceof l && t.parentElement === this && this.#P(e, t);
217
+ };
218
+ #N(e) {
219
+ let t = this.#C(), n = this.#w() ?? t[0], { key: r } = e, i;
220
+ if (this.#F(e)) i = this.#j(r, this.#w()) ?? n;
221
+ else if ([
222
+ "Enter",
223
+ " ",
224
+ "ArrowDown",
225
+ "ArrowUp"
226
+ ].includes(r)) i = n;
227
+ else if (r === "Home") i = t[0];
228
+ else if (r === "End") i = t.at(-1);
229
+ else return;
230
+ e.preventDefault(), this.#E(i);
231
+ }
232
+ #P(e, t) {
233
+ let n = this.#C(), r = n.indexOf(t), { key: i } = e, a;
234
+ if (this.#F(e)) a = this.#j(i, t);
235
+ else if (i === "ArrowUp" && e.altKey) {
236
+ e.preventDefault(), this.#L(t);
237
+ return;
238
+ } else if (i === "ArrowDown") a = n[Math.min(r + 1, n.length - 1)];
239
+ else if (i === "ArrowUp") a = n[Math.max(r - 1, 0)];
240
+ else if (i === "PageDown") a = n[Math.min(r + h, n.length - 1)];
241
+ else if (i === "PageUp") a = n[Math.max(r - h, 0)];
242
+ else if (i === "Home") a = n[0];
243
+ else if (i === "End") a = n.at(-1);
244
+ else if (i === "Enter" || i === " ") {
245
+ e.preventDefault(), this.#L(t);
246
+ return;
247
+ } else if (i === "Escape") {
248
+ e.preventDefault(), this.#D(!0);
249
+ return;
250
+ } else if (i === "Tab") {
251
+ this.#D(!1), e.shiftKey && this.#t.focus();
252
+ return;
253
+ } else return;
254
+ e.preventDefault(), a?.focus();
255
+ }
256
+ #F(e) {
257
+ return e.key.length === 1 && (e.key !== " " || this.#_ !== "") && !e.altKey && !e.ctrlKey && !e.metaKey;
258
+ }
259
+ #I = (e) => {
260
+ let t = e.relatedTarget;
261
+ t instanceof Node && this.contains(t) || this.#D(!1);
262
+ };
263
+ #L(e) {
264
+ this.#b || e.disabled || (this.#D(!0), this.#R(e));
265
+ }
266
+ #R(e) {
267
+ e.value !== this.#y && (this.#d = e.value, this.#U(), this.dispatchEvent(new Event("input", {
268
+ bubbles: !0,
269
+ composed: !0
270
+ })), this.dispatchEvent(new Event("change", { bubbles: !0 })));
271
+ }
272
+ #z(e) {
273
+ let t = this.#y;
274
+ if (e === this.#m || t !== null && e.value === t) this.#U();
275
+ else if (e.parentElement === this) {
276
+ let t = this.#V();
277
+ for (let n of /* @__PURE__ */ new Set([
278
+ e,
279
+ this.#x,
280
+ t
281
+ ])) n?.parentElement === this && this.#H(n, t);
282
+ this.#x = t, this.#B();
283
+ }
284
+ }
285
+ #B() {
286
+ this.#l || (this.#l = !0, queueMicrotask(() => {
287
+ this.#l = !1;
288
+ let e = this.getAttribute("autocomplete"), t = e?.toLowerCase() === "off" ? null : e, n = this.#c;
289
+ t ? n.setAttribute("autocomplete", t) : n.removeAttribute("autocomplete"), n.disabled = this.#b, n.replaceChildren(...t ? [new Option("", ""), ...this.#C().map((e) => new Option(e.label, e.value, !1, e === this.#m))] : []);
290
+ }));
291
+ }
292
+ #V() {
293
+ let e = this.firstElementChild;
294
+ for (; e && !(e instanceof l && !e.hidden && !e.slot);) e = e.nextElementSibling;
295
+ return e instanceof l ? e : void 0;
296
+ }
297
+ #H(e, t) {
298
+ u.sync(e, {
299
+ selected: !e.hidden && e === this.#m,
300
+ disabled: e.disabled,
301
+ first: e === t
302
+ });
303
+ }
304
+ #U() {
305
+ let e = this.#S(), t = this.#y, n = this.#b, r = t === null ? void 0 : e.find((e) => e.value === t);
306
+ this.#m = r, this.#x = e[0];
307
+ for (let e of this.#s.assignedElements()) e instanceof l && this.#H(e, this.#x);
308
+ let i = r && !r.disabled && !n ? r : void 0;
309
+ this.internals.setFormValue(i ? t : null, t), this.required && !i ? this.internals.setValidity({ valueMissing: !0 }, _(), this.#t) : this.internals.setValidity({}), this.#W(r, n), this.#B();
310
+ }
311
+ #W(e, t) {
312
+ this.#n.hidden = !e, this.#a.hidden = !!e, this.#i.textContent = e?.label ?? "", this.#r.replaceChildren(...[...e?.querySelectorAll(":scope > [slot=start]") ?? []].map((e) => {
313
+ let t = e.cloneNode(!0);
314
+ return t.removeAttribute("slot"), t;
315
+ })), this.#a.textContent = this.getAttribute("placeholder") ?? "";
316
+ let n = this.getAttribute("label") ?? "", i = this.getAttribute("aria-label"), a = this.getAttribute("optional");
317
+ if (this.#e.textContent = n, this.#e.hidden = !n, n && a) {
318
+ let e = document.createElement("span");
319
+ e.className = "optional", e.textContent = ` ${a}`, this.#e.append(e);
320
+ }
321
+ for (let e of [this.#t, this.#o]) n ? e.setAttribute("aria-labelledby", "label") : e.removeAttribute("aria-labelledby"), !n && i ? e.setAttribute("aria-label", i) : e.removeAttribute("aria-label");
322
+ if (this.required ? this.#t.setAttribute("aria-required", "true") : this.#t.removeAttribute("aria-required"), t) {
323
+ this.#t.setAttribute("aria-disabled", "true"), this.#t.removeAttribute("tabindex");
324
+ let e = document.activeElement;
325
+ e instanceof l && e.parentElement === this && e.blur(), this.#p && this.#o.hidePopover();
326
+ } else this.#t.removeAttribute("aria-disabled"), this.#t.tabIndex = 0;
327
+ r(this, this.#t, this.#u), this.#f = !e, this.updateStates();
328
+ }
329
+ };
330
+ n("swell-select", v);
331
+ export { f as n, v as t };
@@ -0,0 +1,66 @@
1
+ import { n as e, r as t, t as n } from "./define-BlQTa1g4.js";
2
+ import { n as r } from "./element-B4-_7TLZ.js";
3
+ import { t as i } from "./link-D4NC86oc.js";
4
+ // src/components/core/select/select-option.css?inline
5
+ var a = ":host{box-sizing:border-box;gap:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 2px);padding:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 2px) calc(var(--_swell-control-font-size,var(--swell-control-font-size)) + 2px);cursor:pointer;transition:background-color var(--swell-motion-duration-fast) var(--swell-motion-easing);align-items:flex-start;display:flex}:host(:not(:state(first))){border-top:var(--swell-border-width) solid var(--swell-overlay-color-border)}:host(:hover),:host(:focus-visible){background:var(--swell-color-secondary-background)}:host(:focus-visible){outline:var(--swell-focus-width) solid var(--swell-focus-color);outline-offset:calc(var(--swell-focus-width) * -1)}:host(:state(disabled)){cursor:not-allowed;opacity:var(--_swell-control-disabled-opacity,var(--swell-control-disabled-opacity))}:host(:state(disabled):hover){background:0 0}:host [hidden]{display:none}:host .start{flex:none;align-items:center;height:1lh;display:flex}:host ::slotted(svg[slot=start]){width:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) + 1px);height:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) + 1px);color:var(--swell-color-secondary-foreground);display:block}:host .text{flex:1;min-width:0;display:grid}:host .hint{font:var(--swell-font-weight) max(12px, calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 1px)) / var(--swell-font-leading) var(--swell-font-family);letter-spacing:var(--swell-font-tracking);color:var(--swell-color-secondary-foreground)}:host .check{width:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) + 2px);height:1lh;color:var(--swell-color-accent);visibility:hidden;flex:none;place-items:center;display:grid}:host .check svg{width:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) + 2px);height:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) + 2px)}:host(:state(selected)) .check{visibility:visible}@media (forced-colors:active){:host{transition:none}:host(:focus-visible){forced-color-adjust:none;color:highlighttext;background:highlight;outline-color:highlighttext}:host(:focus-visible) :is(.hint,.check),:host ::slotted(svg[slot=start]){color:inherit}}", o = /* @__PURE__ */ t({
6
+ SwellOptionElement: () => l,
7
+ SwellSelectOption: () => u,
8
+ optionList: () => s
9
+ }), s = i(), c = "\n <span class=\"start\"><slot name=\"start\"></slot></span>\n <span class=\"text\">\n <span class=\"label\"><slot></slot></span>\n <span class=\"hint\" hidden></span>\n </span>\n <span class=\"check\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"/></svg></span>", l = class extends r {
10
+ static styles = a;
11
+ static template = c;
12
+ static observedAttributes = [
13
+ ...r.observedAttributes,
14
+ "value",
15
+ "hint",
16
+ "disabled",
17
+ "hidden"
18
+ ];
19
+ static focusable = !0;
20
+ static {
21
+ s.receive((e, t) => e.#r(t));
22
+ }
23
+ #e;
24
+ #t;
25
+ #n = !1;
26
+ constructor() {
27
+ super(), this.#e = this.shadowRoot?.querySelector(".hint"), this.addEventListener("click", () => s.linkOf(this)?.choose(this));
28
+ }
29
+ get selected() {
30
+ return this.#n;
31
+ }
32
+ get label() {
33
+ return [...this.childNodes].filter((e) => e instanceof Element ? !e.hasAttribute("slot") : e.nodeType === Node.TEXT_NODE).map((e) => e.textContent).join("").replace(/\s+/g, " ").trim();
34
+ }
35
+ get value() {
36
+ return this.getAttribute("value") ?? this.label;
37
+ }
38
+ set value(e) {
39
+ this.setAttribute("value", e);
40
+ }
41
+ get disabled() {
42
+ return this.hasAttribute("disabled");
43
+ }
44
+ set disabled(e) {
45
+ this.toggleAttribute("disabled", !!e);
46
+ }
47
+ connectedCallback() {
48
+ e(this, "value"), e(this, "disabled"), this.hasAttribute("role") || this.setAttribute("role", "option"), this.definition.focusable && !this.hasAttribute("tabindex") && this.setAttribute("tabindex", "-1"), this.hasAttribute("aria-selected") || this.setAttribute("aria-selected", "false"), super.connectedCallback(), this.#t = s.linkOf(this), this.#t?.refresh(this);
49
+ }
50
+ disconnectedCallback() {
51
+ super.disconnectedCallback(), this.#t?.refresh(this), this.#t = void 0;
52
+ }
53
+ update(e) {
54
+ e === "hint" ? (this.#e.textContent = this.getAttribute("hint") ?? "", this.#e.hidden = !this.#e.textContent) : (e === "value" || e === "disabled" || e === "hidden") && s.linkOf(this)?.refresh(this);
55
+ }
56
+ #r(e) {
57
+ this.#t = s.linkOf(this) ?? this.#t, this.#n = e.selected, this.setAttribute("aria-selected", String(e.selected)), e.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled");
58
+ for (let [t, n] of [
59
+ ["selected", e.selected],
60
+ ["disabled", e.disabled],
61
+ ["first", e.first]
62
+ ]) n ? this.internals.states.add(t) : this.internals.states.delete(t);
63
+ }
64
+ }, u = class extends l {};
65
+ n("swell-select-option", u);
66
+ export { o as i, u as n, s as r, l as t };
@@ -0,0 +1,13 @@
1
+ import { r as e, t } from "./define-BlQTa1g4.js";
2
+ import { n } from "./element-B4-_7TLZ.js";
3
+ // src/components/core/skeleton/skeleton.css?inline
4
+ var r = ":host{--_swell-control-font-size:var(--swell-control-font-size);--_swell-control-height:var(--swell-control-height);--_swell-radio-border-radius:var(--swell-radio-border-radius,var(--swell-border-radius))}:host([size=xsmall]){--_swell-control-font-size:var(--swell-control-xsmall-font-size);--_swell-control-height:var(--swell-control-xsmall-height)}:host([size=small]){--_swell-control-font-size:var(--swell-control-small-font-size);--_swell-control-height:var(--swell-control-small-height)}:host([size=large]){--_swell-control-font-size:var(--swell-control-large-font-size);--_swell-control-height:var(--swell-control-large-height)}:host([size=xlarge]){--_swell-control-font-size:var(--swell-control-xlarge-font-size);--_swell-control-height:var(--swell-control-xlarge-height)}:host{width:100%;height:calc(var(--_swell-control-font-size) - 4px);background:linear-gradient(90deg, var(--swell-color-border) 30%, var(--swell-color-secondary-background) 50%, var(--swell-color-border) 70%);animation:swell-skeleton-shimmer var(--swell-motion-duration-loop) linear infinite;background-size:300% 100%;border-radius:999px;display:block}:host(:dir(rtl)){animation-direction:reverse}@keyframes swell-skeleton-shimmer{0%{background-position:100% 0}to{background-position:0 0}}:host(:state(card)){justify-content:space-between;align-items:center;gap:calc(var(--_swell-control-font-size) - 2px);box-sizing:border-box;height:var(--_swell-control-height);padding:0 calc(var(--_swell-control-font-size) + 2px);border:var(--swell-border-strong-width) solid var(--swell-color-border);border-radius:var(--_swell-radio-border-radius);background:0 0;animation:none;display:flex}@media (forced-colors:active){:host{background:graytext}:host(:state(card)){background:0 0;border-color:canvastext}}", i = /* @__PURE__ */ e({ SwellSkeleton: () => a }), a = class extends n {
5
+ static appearance = "skeleton";
6
+ static appearances = ["card"];
7
+ static styles = r;
8
+ connectedCallback() {
9
+ this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true"), super.connectedCallback();
10
+ }
11
+ };
12
+ t("swell-skeleton", a);
13
+ export { i as n, a as t };
@@ -0,0 +1,71 @@
1
+ import { r as e, t } from "./define-BlQTa1g4.js";
2
+ import { n } from "./element-B4-_7TLZ.js";
3
+ import { l as r } from "./config-C-FYxOaJ.js";
4
+ // src/components/core/status/status.css?inline
5
+ var i = ":host{--_swell-control-font-size:var(--swell-control-font-size);--_swell-status-color-border:var(--swell-status-color-border,var(--swell-color-border));--_swell-status-border-radius:var(--swell-status-border-radius,var(--swell-border-radius));--_swell-status-color-background:var(--swell-status-color-background,var(--swell-color-secondary-background));--_swell-status-color-foreground:var(--swell-status-color-foreground,var(--swell-color-foreground));--_swell-status-color-accent:var(--swell-status-color-accent,var(--swell-status-color-foreground,var(--swell-color-foreground)))}:host([size=xsmall]){--_swell-control-font-size:var(--swell-control-xsmall-font-size)}:host([size=small]){--_swell-control-font-size:var(--swell-control-small-font-size)}:host([size=large]){--_swell-control-font-size:var(--swell-control-large-font-size)}:host([size=xlarge]){--_swell-control-font-size:var(--swell-control-xlarge-font-size)}:host([type=danger]){--_swell-status-color-border:var(--swell-status-danger-color-border,light-dark(#d7373d59,#f2555a59));--_swell-status-color-background:var(--swell-status-danger-color-background,light-dark(#d7373d17,#f2555a17));--_swell-status-color-accent:var(--swell-status-danger-color-accent,var(--swell-color-danger))}:host([type=success]){--_swell-status-color-border:var(--swell-status-success-color-border,light-dark(#12945e59,#3ecf8e59));--_swell-status-color-background:var(--swell-status-success-color-background,light-dark(#12945e17,#3ecf8e17));--_swell-status-color-accent:var(--swell-status-success-color-accent,var(--swell-color-success))}:host([type=warning]){--_swell-status-color-border:var(--swell-status-warning-color-border,light-dark(#b9700a59,#f0aa3c59));--_swell-status-color-background:var(--swell-status-warning-color-background,light-dark(#b9700a17,#f0aa3c17));--_swell-status-color-accent:var(--swell-status-warning-color-accent,var(--swell-color-warning))}:host{--_swell-status-inset:calc(var(--_swell-control-font-size) - 2px);--_swell-status-small:max(12px, calc(var(--_swell-control-font-size) - 1px));--_swell-status-icon:calc(var(--_swell-control-font-size) + 4px);display:block}:host(:state(plain)){--_swell-status-icon:calc(var(--_swell-status-small) + 2px)}:host [part=message]{gap:var(--_swell-status-inset);box-sizing:border-box;padding:var(--_swell-status-inset) calc(var(--_swell-status-inset) + 4px);border:var(--swell-border-width) solid var(--_swell-status-color-border);border-radius:var(--_swell-status-border-radius);font:var(--swell-font-weight) var(--_swell-control-font-size) / var(--swell-font-leading) var(--swell-font-family);letter-spacing:var(--swell-font-tracking);background:var(--_swell-status-color-background);color:var(--_swell-status-color-foreground);animation:swell-status-enter var(--swell-motion-duration-slow) var(--swell-motion-easing);align-items:flex-start;display:flex}:host [part=message]>slot:not([name]){flex:1;min-width:0;display:block}:host(:state(end-content)) [part=message]{align-items:center;padding-inline-end:var(--_swell-status-inset)}@keyframes swell-status-enter{0%{opacity:0;transform:translateY(-6px)}}:host .announcement{white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}:host(:state(outline)) [part=message]{background:0 0}:host(:state(plain)) [part=message]{gap:calc(var(--_swell-status-small) - 7px);font:var(--swell-font-strong-weight) var(--_swell-status-small) / var(--swell-font-leading) var(--swell-font-family);letter-spacing:var(--swell-font-tracking);background:0 0;border:none;padding:0}:host(:state(quiet)) [part=message]{padding:calc(var(--_swell-status-inset) + 2px) calc(var(--_swell-status-inset) + 4px);background:var(--swell-color-secondary-background);color:var(--swell-color-secondary-foreground);border:none}:host(:state(quiet):state(end-content)) [part=message]{padding-inline-end:var(--_swell-status-inset)}:host(:state(plain)[type=danger]) [part=message]{color:var(--_swell-status-color-accent)}:host(:state(outline):state(typed)) [part=message]{border-color:var(--_swell-status-color-accent)}:host .icon{width:var(--_swell-status-icon);height:var(--_swell-status-icon);margin-block:calc((1lh - var(--_swell-status-icon)) / 2);color:var(--_swell-status-color-accent);flex:none;display:block}:host .icon[hidden]{display:none}:host .icon svg,:host slot[name=start]::slotted(svg){width:var(--_swell-status-icon);height:var(--_swell-status-icon);display:block}:host slot[name=start]::slotted([hidden]){display:none}:host(:state(quiet):not(:state(typed))) .icon{color:inherit}@media (forced-colors:active){:host [part=message]{border-color:canvastext}}", a = /* @__PURE__ */ e({ SwellStatus: () => l }), o = (e) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">${e}</svg>`, s = {
6
+ danger: o("<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 8v4.5\"/><path d=\"M12 16h.01\"/>"),
7
+ success: o("<circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"m8.1 12.3 2.7 2.7 5.1-5.4\"/>"),
8
+ warning: o("<path d=\"M12 3.9 21 19.8H3z\"/><path d=\"M12 10.2v4.2\"/><path d=\"M12 17.1h.01\"/>")
9
+ }, c = 100, l = class extends n {
10
+ static group = "status";
11
+ static appearance = "status";
12
+ static appearances = ["quiet"];
13
+ static styles = i;
14
+ static template = "<div part=\"message\"><span class=\"icon\" aria-hidden=\"true\" hidden><span class=\"type\"></span><slot name=\"start\"></slot></span><slot></slot><slot name=\"end\"></slot></div>";
15
+ #e = new MutationObserver((e) => {
16
+ this.#c(), e.some((e) => this.#s(e)) && this.#a();
17
+ });
18
+ #t;
19
+ #n = [];
20
+ #r = !1;
21
+ #i = "";
22
+ constructor() {
23
+ super();
24
+ for (let e of this.shadowRoot?.querySelectorAll("slot[name]") ?? []) e.addEventListener("slotchange", () => this.#c());
25
+ }
26
+ connectedCallback() {
27
+ this.#c(), this.#e.observe(this, {
28
+ childList: !0,
29
+ subtree: !0,
30
+ characterData: !0,
31
+ attributeFilter: ["hidden"]
32
+ }), !this.#r && document.readyState === "complete" && this.#a(), this.#r = !0, super.connectedCallback();
33
+ }
34
+ disconnectedCallback() {
35
+ this.#e.disconnect(), this.#o(), super.disconnectedCallback();
36
+ }
37
+ update(e) {
38
+ (e === "type" || e === "appearance") && (this.#c(), e === "type" && this.isConnected && this.#a());
39
+ }
40
+ #a() {
41
+ this.#o();
42
+ let e = [...this.childNodes].filter((e) => e instanceof Element ? !e.slot : e instanceof Text).map((e) => e.textContent).join("").replace(/\s+/g, " ").trim();
43
+ if (!e || !this.shadowRoot) return;
44
+ let t = document.createElement("div");
45
+ t.className = "announcement", t.setAttribute("role", this.getAttribute("type") === "danger" ? "alert" : "status"), this.shadowRoot.append(t), this.#t = t, this.#n = [setTimeout(() => {
46
+ t.textContent = e;
47
+ }, c), setTimeout(() => this.#o(), 7100)];
48
+ }
49
+ #o() {
50
+ for (let e of this.#n) clearTimeout(e);
51
+ this.#n = [], this.#t?.remove(), this.#t = void 0;
52
+ }
53
+ #s(e) {
54
+ if (e.type === "attributes") return !1;
55
+ let t = e.target;
56
+ for (; t.parentNode && t.parentNode !== this;) t = t.parentNode;
57
+ return (e.target === this ? [...e.addedNodes, ...e.removedNodes] : [t]).some((e) => !(e instanceof Element && e.slot));
58
+ }
59
+ #c() {
60
+ let e = this.getAttribute("type"), t = e !== null && (r.status?.type ?? []).includes(e) && this.getAttribute("appearance") !== "quiet", n = this.shadowRoot?.querySelector(".icon"), i = this.shadowRoot?.querySelector("slot[name=\"start\"]"), a = n?.querySelector(".type");
61
+ if (n && i && a) {
62
+ let r = i.assignedElements().some((e) => !e.hasAttribute("hidden"));
63
+ n.hidden = !t && !r, a.hidden = !t || r;
64
+ let o = t ? s[e] ?? "" : "";
65
+ o !== this.#i && (a.innerHTML = this.#i = o);
66
+ }
67
+ t ? this.internals.states.add("typed") : this.internals.states.delete("typed"), this.shadowRoot?.querySelector("slot[name=\"end\"]")?.assignedElements().some((e) => !e.hasAttribute("hidden")) ? this.internals.states.add("end-content") : this.internals.states.delete("end-content");
68
+ }
69
+ };
70
+ t("swell-status", l);
71
+ export { a as n, l as t };
@@ -0,0 +1,107 @@
1
+ import { n as e, r as t, t as n } from "./define-BlQTa1g4.js";
2
+ import { n as r } from "./element-B4-_7TLZ.js";
3
+ import { t as i } from "./link-D4NC86oc.js";
4
+ // src/components/core/tabs/tab.css?inline
5
+ var a = ":host{--_swell-tabs-indicator-width:var(--swell-tabs-indicator-width,2px);display:block}:host(:not(:state(vertical),:state(selected))),:host(:not(:state(vertical))) :is(.node,.line,.head,.summary){display:none}:host(:state(vertical)){padding-inline-start:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) * 3 + 2px);position:relative}:host(:state(vertical)) .node{box-sizing:border-box;width:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) * 2);height:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) * 2);border:var(--swell-border-strong-width) solid var(--swell-field-color-border);font:var(--swell-font-bold-weight) max(11px, calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 2px)) / 1 var(--swell-font-family);background:var(--swell-color-background);color:var(--swell-color-secondary-foreground);transition:background-color var(--swell-motion-duration-base) var(--swell-motion-easing), border-color var(--swell-motion-duration-base) var(--swell-motion-easing), color var(--swell-motion-duration-base) var(--swell-motion-easing);border-radius:999px;place-items:center;display:grid;position:absolute;inset-block-start:0;inset-inline-start:0}:host(:state(vertical):state(selected)) .node{border-color:var(--swell-color-accent);color:var(--swell-color-accent)}:host(:state(vertical)[done]) .node{border-color:var(--swell-color-accent);background:var(--swell-color-accent);color:var(--swell-color-background)}:host .done-label{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:host .node>*{grid-area:1/1}:host .check{width:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 2px);height:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 2px);display:none}:host([done]) .check{display:block}:host(:state(vertical)) .line{inset-block:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) * 3 - 6px) calc(-1 * var(--_swell-control-font-size,var(--swell-control-font-size)) - 6px);width:var(--_swell-tabs-indicator-width);border-radius:calc(var(--_swell-tabs-indicator-width) / 2);background:var(--swell-color-border);transition:background-color var(--swell-motion-duration-slow) var(--swell-motion-easing);position:absolute;inset-inline-start:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - var(--_swell-tabs-indicator-width) / 2)}:host(:state(vertical)[done]) .line{background:var(--swell-color-accent)}:host(:state(vertical):state(last)) .line{display:none}:host(:state(vertical)) .head{justify-content:space-between;align-items:center;gap:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 2px);min-height:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) * 2);flex-wrap:wrap;display:flex}:host .toggle{font:var(--swell-font-heading-weight) calc(var(--_swell-control-font-size,var(--swell-control-font-size)) + 6px) / calc(var(--_swell-control-font-size,var(--swell-control-font-size)) * 2) var(--swell-font-heading-family);letter-spacing:var(--swell-font-heading-tracking);text-align:start;color:var(--swell-color-foreground);cursor:pointer;background:0 0;border:0;border-radius:2px;margin:0;padding:0}:host .toggle:focus-visible{outline:var(--swell-focus-width) solid var(--swell-focus-color);outline-offset:var(--swell-focus-offset)}:host(:state(vertical)[disabled]) :is(.node,.toggle){opacity:var(--_swell-control-disabled-opacity,var(--swell-control-disabled-opacity))}:host(:state(vertical)[disabled]) .toggle{cursor:default}:host(:state(vertical)) .summary{padding-top:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) - 10px)}:host(:state(vertical):state(selected)) .summary{display:none}:host(:state(vertical)) .content{visibility:hidden;opacity:0;transition:grid-template-rows var(--swell-motion-duration-base) var(--swell-motion-easing), opacity var(--swell-motion-duration-fast) var(--swell-motion-easing), visibility 0s var(--swell-motion-duration-base);grid-template-rows:0fr;display:grid}:host(:state(vertical):state(selected)) .content{visibility:visible;opacity:1;transition:grid-template-rows var(--swell-motion-duration-slow) var(--swell-motion-easing), opacity var(--swell-motion-duration-slow) var(--swell-motion-easing);grid-template-rows:1fr}:host(:state(vertical)) .clip{min-height:0;margin:calc(-1 * max(var(--swell-field-ring-width), var(--swell-focus-width) + var(--swell-focus-offset)));padding:max(var(--swell-field-ring-width), var(--swell-focus-width) + var(--swell-focus-offset));transition:transform var(--swell-motion-duration-base) var(--swell-motion-easing);overflow:clip;transform:translateY(-8px)}:host(:state(vertical):state(selected)) .clip{padding-top:calc(var(--_swell-control-font-size,var(--swell-control-font-size)) + 2px);transition:transform var(--swell-motion-duration-slow) var(--swell-motion-easing);transform:none}@media (forced-colors:active){:host(:state(vertical)) .node{border-color:canvastext}}", o = /* @__PURE__ */ t({
6
+ CHECK: () => c,
7
+ SwellTab: () => u,
8
+ tabGroup: () => s
9
+ }), s = i(), c = "<svg class=\"check\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 6 9 17l-5-5\"/></svg>", l = `<span class="node" aria-hidden="true"><span class="number"></span>${c}</span><span class="line" aria-hidden="true"></span><div class="head"><div class="heading" role="heading"><button type="button" class="toggle" id="toggle" tabindex="0" aria-controls="content"><span class="label"></span><span class="done-label"></span></button></div><slot name="end"></slot></div><div class="summary"><slot name="summary"></slot></div><div class="content" id="content"><div class="clip"><slot></slot></div></div>`, u = class extends r {
10
+ static group = "tabs";
11
+ static appearance = "tabs";
12
+ static appearances = ["steps"];
13
+ static styles = a;
14
+ static template = l;
15
+ static observedAttributes = [
16
+ ...r.observedAttributes,
17
+ "value",
18
+ "label",
19
+ "done",
20
+ "disabled",
21
+ "hidden"
22
+ ];
23
+ static {
24
+ s.receive((e, t) => e.#r(t));
25
+ }
26
+ #e = {
27
+ selected: !1,
28
+ vertical: !1,
29
+ position: 1,
30
+ last: !0,
31
+ level: 2,
32
+ doneLabel: ""
33
+ };
34
+ #t;
35
+ constructor() {
36
+ super(), this.#n("toggle").addEventListener("click", (e) => {
37
+ setTimeout(() => {
38
+ !e.defaultPrevented && this.isConnected && s.linkOf(this)?.choose(this);
39
+ });
40
+ });
41
+ }
42
+ get value() {
43
+ return this.getAttribute("value") ?? this.label;
44
+ }
45
+ set value(e) {
46
+ this.setAttribute("value", e);
47
+ }
48
+ get label() {
49
+ return this.getAttribute("label") ?? "";
50
+ }
51
+ set label(e) {
52
+ this.setAttribute("label", e);
53
+ }
54
+ get done() {
55
+ return this.hasAttribute("done");
56
+ }
57
+ set done(e) {
58
+ this.toggleAttribute("done", !!e);
59
+ }
60
+ get disabled() {
61
+ return this.hasAttribute("disabled");
62
+ }
63
+ set disabled(e) {
64
+ this.toggleAttribute("disabled", !!e);
65
+ }
66
+ connectedCallback() {
67
+ for (let t of [
68
+ "value",
69
+ "label",
70
+ "done",
71
+ "disabled"
72
+ ]) e(this, t);
73
+ super.connectedCallback(), s.linkOf(this)?.refresh();
74
+ }
75
+ update() {
76
+ s.linkOf(this)?.refresh();
77
+ }
78
+ appearanceSource() {
79
+ let e = this.parentElement;
80
+ return e?.localName === "swell-tabs" ? e : this;
81
+ }
82
+ extraStates() {
83
+ let { selected: e, vertical: t, last: n } = this.#e;
84
+ return [
85
+ ...e ? ["selected"] : [],
86
+ ...t ? ["vertical"] : [],
87
+ ...n ? ["last"] : []
88
+ ];
89
+ }
90
+ #n(e) {
91
+ return this.shadowRoot?.getElementById(e);
92
+ }
93
+ #r(e) {
94
+ this.#e = e, this.updateStates();
95
+ let { selected: t, vertical: n, position: r, level: i, doneLabel: a } = e, o = this.shadowRoot;
96
+ o.querySelector(".number").textContent = this.done ? "" : String(r);
97
+ let s = this.#n("toggle");
98
+ s.querySelector(".label").textContent = this.label, s.querySelector(".done-label").textContent = this.done ? ` ${a}` : "", s.setAttribute("aria-expanded", String(t)), this.disabled || t ? s.setAttribute("aria-disabled", "true") : s.removeAttribute("aria-disabled"), o.querySelector(".heading").setAttribute("aria-level", String(i)), this.#n("content").inert = n && !t, this.#i(!n);
99
+ }
100
+ #i(e) {
101
+ e && !this.hasAttribute("role") ? this.setAttribute("role", "tabpanel") : !e && this.getAttribute("role") === "tabpanel" && this.removeAttribute("role");
102
+ let t = this.getAttribute("aria-label");
103
+ (t === null || t === this.#t) && (e ? (this.#t = this.label, this.setAttribute("aria-label", this.#t)) : (this.#t = void 0, this.removeAttribute("aria-label")));
104
+ }
105
+ };
106
+ n("swell-tab", u);
107
+ export { o as i, u as n, s as r, c as t };