@warp-ds/elements 2.10.0 → 2.11.0-next.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 (255) hide show
  1. package/dist/custom-elements.json +59 -50
  2. package/dist/docs/affix/affix.md +1 -9
  3. package/dist/docs/alert/alert.md +1 -1
  4. package/dist/docs/attention/attention.md +3 -1
  5. package/dist/docs/box/box.md +2 -0
  6. package/dist/docs/breadcrumb-item/breadcrumb-item.md +2 -0
  7. package/dist/docs/breadcrumbs/breadcrumbs.md +3 -0
  8. package/dist/docs/button/button.md +3 -0
  9. package/dist/docs/card/api.md +0 -8
  10. package/dist/docs/card/card.md +58 -11
  11. package/dist/docs/card/styling.md +51 -0
  12. package/dist/docs/card/usage.md +4 -2
  13. package/dist/docs/checkbox/api.md +0 -9
  14. package/dist/docs/checkbox/checkbox.md +5 -10
  15. package/dist/docs/checkbox-group/checkbox-group.md +3 -10
  16. package/dist/docs/combobox/combobox.md +2 -0
  17. package/dist/docs/datepicker/datepicker.md +2 -2
  18. package/dist/docs/expandable/expandable.md +2 -0
  19. package/dist/docs/icon/icon.md +1 -1
  20. package/dist/docs/index.md +35 -35
  21. package/dist/docs/link/link.md +3 -1
  22. package/dist/docs/modal/modal.md +2 -0
  23. package/dist/docs/modal-footer/modal-footer.md +2 -0
  24. package/dist/docs/modal-header/modal-header.md +2 -0
  25. package/dist/docs/page-indicator/page-indicator.md +2 -0
  26. package/dist/docs/pagination/pagination.md +2 -0
  27. package/dist/docs/pill/pill.md +2 -0
  28. package/dist/docs/radio/radio.md +5 -1
  29. package/dist/docs/radio-group/radio-group.md +3 -1
  30. package/dist/docs/select/select.md +2 -0
  31. package/dist/docs/slider/slider.md +2 -0
  32. package/dist/docs/snackbar/snackbar.md +2 -0
  33. package/dist/docs/snackbar-item/snackbar-item.md +2 -0
  34. package/dist/docs/step/step.md +3 -1
  35. package/dist/docs/step-indicator/step-indicator.md +2 -0
  36. package/dist/docs/switch/switch.md +2 -0
  37. package/dist/docs/tab/tab.md +2 -0
  38. package/dist/docs/tab-panel/tab-panel.md +3 -0
  39. package/dist/docs/tabs/api.md +1 -1
  40. package/dist/docs/tabs/tabs.md +3 -1
  41. package/dist/docs/textarea/textarea.md +1 -5
  42. package/dist/docs/textfield/textfield.md +2 -0
  43. package/dist/entrypoint-react.d.ts +38 -0
  44. package/dist/entrypoint-react.js +39 -0
  45. package/dist/index.d.ts +152 -126
  46. package/dist/packages/affix/affix.d.ts +6 -11
  47. package/dist/packages/affix/affix.js +9 -9
  48. package/dist/packages/affix/affix.js.map +2 -2
  49. package/dist/packages/affix/affix.react.stories.d.ts +1 -1
  50. package/dist/packages/affix/react.d.ts +7 -2
  51. package/dist/packages/affix/react.js +5 -0
  52. package/dist/packages/alert/alert.d.ts +6 -3
  53. package/dist/packages/alert/alert.js +3 -3
  54. package/dist/packages/alert/alert.js.map +2 -2
  55. package/dist/packages/alert/react.d.ts +8 -1
  56. package/dist/packages/alert/react.js +7 -0
  57. package/dist/packages/attention/attention.d.ts +3 -1
  58. package/dist/packages/attention/attention.js +12 -12
  59. package/dist/packages/attention/attention.js.map +2 -2
  60. package/dist/packages/attention/react.d.ts +13 -3
  61. package/dist/packages/attention/react.js +9 -0
  62. package/dist/packages/badge/badge.d.ts +5 -0
  63. package/dist/packages/badge/badge.js.map +2 -2
  64. package/dist/packages/badge/react.d.ts +6 -1
  65. package/dist/packages/badge/react.js +5 -0
  66. package/dist/packages/box/box.d.ts +6 -1
  67. package/dist/packages/box/box.js +3 -3
  68. package/dist/packages/box/box.js.map +2 -2
  69. package/dist/packages/box/box.react.stories.d.ts +1 -1
  70. package/dist/packages/box/react.d.ts +6 -1
  71. package/dist/packages/box/react.js +5 -0
  72. package/dist/packages/breadcrumb-item/breadcrumb-item.d.ts +6 -1
  73. package/dist/packages/breadcrumb-item/breadcrumb-item.js +2 -2
  74. package/dist/packages/breadcrumb-item/breadcrumb-item.js.map +2 -2
  75. package/dist/packages/breadcrumb-item/react.d.ts +7 -1
  76. package/dist/packages/breadcrumb-item/react.js +6 -0
  77. package/dist/packages/breadcrumbs/breadcrumbs.d.ts +7 -1
  78. package/dist/packages/breadcrumbs/breadcrumbs.js +3 -3
  79. package/dist/packages/breadcrumbs/breadcrumbs.js.map +2 -2
  80. package/dist/packages/breadcrumbs/react.d.ts +8 -1
  81. package/dist/packages/breadcrumbs/react.js +7 -0
  82. package/dist/packages/button/button.d.ts +2 -1
  83. package/dist/packages/button/button.js.map +2 -2
  84. package/dist/packages/button/button.react.stories.d.ts +2 -2
  85. package/dist/packages/button/react.d.ts +9 -2
  86. package/dist/packages/button/react.js +7 -0
  87. package/dist/packages/card/card.d.ts +8 -10
  88. package/dist/packages/card/card.js +151 -20
  89. package/dist/packages/card/card.js.map +4 -4
  90. package/dist/packages/card/card.react.stories.d.ts +1 -1
  91. package/dist/packages/card/card.stories.d.ts +1 -0
  92. package/dist/packages/card/card.stories.js +44 -1
  93. package/dist/packages/card/react.d.ts +6 -1
  94. package/dist/packages/card/react.js +5 -0
  95. package/dist/packages/card/styles.js +132 -2
  96. package/dist/packages/checkbox/checkbox.d.ts +6 -0
  97. package/dist/packages/checkbox/checkbox.js +1 -1
  98. package/dist/packages/checkbox/checkbox.js.map +2 -2
  99. package/dist/packages/checkbox/checkbox.react.stories.d.ts +2 -2
  100. package/dist/packages/checkbox/react.d.ts +12 -3
  101. package/dist/packages/checkbox/react.js +7 -0
  102. package/dist/packages/checkbox-group/checkbox-group.d.ts +3 -10
  103. package/dist/packages/checkbox-group/checkbox-group.js.map +2 -2
  104. package/dist/packages/checkbox-group/react.d.ts +9 -2
  105. package/dist/packages/checkbox-group/react.js +7 -0
  106. package/dist/packages/combobox/combobox.d.ts +6 -1
  107. package/dist/packages/combobox/combobox.js +3 -3
  108. package/dist/packages/combobox/combobox.js.map +2 -2
  109. package/dist/packages/combobox/combobox.react.stories.d.ts +18 -2
  110. package/dist/packages/combobox/react.d.ts +15 -2
  111. package/dist/packages/combobox/react.js +9 -0
  112. package/dist/packages/datepicker/datepicker.d.ts +7 -4
  113. package/dist/packages/datepicker/datepicker.js +3 -3
  114. package/dist/packages/datepicker/datepicker.js.map +2 -2
  115. package/dist/packages/datepicker/datepicker.react.stories.d.ts +14 -14
  116. package/dist/packages/datepicker/react.d.ts +14 -8
  117. package/dist/packages/datepicker/react.js +5 -0
  118. package/dist/packages/expandable/expandable.d.ts +7 -0
  119. package/dist/packages/expandable/expandable.js +4 -4
  120. package/dist/packages/expandable/expandable.js.map +2 -2
  121. package/dist/packages/expandable/react.d.ts +6 -1
  122. package/dist/packages/expandable/react.js +5 -0
  123. package/dist/packages/icon/icon.d.ts +3 -0
  124. package/dist/packages/icon/icon.js.map +2 -2
  125. package/dist/packages/icon/react.d.ts +4 -1
  126. package/dist/packages/icon/react.js +3 -0
  127. package/dist/packages/link/link.d.ts +7 -2
  128. package/dist/packages/link/link.js +5 -5
  129. package/dist/packages/link/link.js.map +2 -2
  130. package/dist/packages/link/link.react.stories.d.ts +2 -2
  131. package/dist/packages/link/react.d.ts +7 -2
  132. package/dist/packages/link/react.js +5 -0
  133. package/dist/packages/modal/modal.d.ts +7 -0
  134. package/dist/packages/modal/modal.js +4 -4
  135. package/dist/packages/modal/modal.js.map +2 -2
  136. package/dist/packages/modal/react.d.ts +3 -1
  137. package/dist/packages/modal/react.js +2 -0
  138. package/dist/packages/modal-footer/modal-footer.d.ts +7 -0
  139. package/dist/packages/modal-footer/modal-footer.js +1 -1
  140. package/dist/packages/modal-footer/modal-footer.js.map +2 -2
  141. package/dist/packages/modal-footer/react.d.ts +6 -1
  142. package/dist/packages/modal-footer/react.js +5 -0
  143. package/dist/packages/modal-header/modal-header.d.ts +7 -0
  144. package/dist/packages/modal-header/modal-header.js +5 -5
  145. package/dist/packages/modal-header/modal-header.js.map +2 -2
  146. package/dist/packages/modal-header/react.d.ts +8 -3
  147. package/dist/packages/modal-header/react.js +5 -0
  148. package/dist/packages/page-indicator/page-indicator.d.ts +7 -0
  149. package/dist/packages/page-indicator/page-indicator.js +4 -4
  150. package/dist/packages/page-indicator/page-indicator.js.map +2 -2
  151. package/dist/packages/page-indicator/react.d.ts +8 -1
  152. package/dist/packages/page-indicator/react.js +7 -0
  153. package/dist/packages/pagination/pagination.d.ts +7 -0
  154. package/dist/packages/pagination/pagination.js +5 -5
  155. package/dist/packages/pagination/pagination.js.map +2 -2
  156. package/dist/packages/pagination/pagination.react.stories.d.ts +12 -4
  157. package/dist/packages/pagination/react.d.ts +12 -3
  158. package/dist/packages/pagination/react.js +5 -0
  159. package/dist/packages/pill/pill.d.ts +7 -0
  160. package/dist/packages/pill/pill.js.map +2 -2
  161. package/dist/packages/pill/pill.react.stories.d.ts +12 -8
  162. package/dist/packages/pill/pill.react.stories.js +4 -0
  163. package/dist/packages/pill/react.d.ts +10 -5
  164. package/dist/packages/pill/react.js +7 -2
  165. package/dist/packages/radio/radio.d.ts +6 -0
  166. package/dist/packages/radio/radio.js.map +2 -2
  167. package/dist/packages/radio/react.d.ts +8 -1
  168. package/dist/packages/radio/react.js +7 -0
  169. package/dist/packages/radio-group/radio-group.d.ts +3 -10
  170. package/dist/packages/radio-group/radio-group.js.map +2 -2
  171. package/dist/packages/radio-group/react.d.ts +11 -4
  172. package/dist/packages/radio-group/react.js +8 -0
  173. package/dist/packages/select/react.d.ts +10 -4
  174. package/dist/packages/select/react.js +5 -0
  175. package/dist/packages/select/select.d.ts +8 -2
  176. package/dist/packages/select/select.js +5 -5
  177. package/dist/packages/select/select.js.map +2 -2
  178. package/dist/packages/select/select.react.stories.d.ts +6 -6
  179. package/dist/packages/select/select.react.stories.js +4 -4
  180. package/dist/packages/slider/react.d.ts +7 -2
  181. package/dist/packages/slider/react.js +5 -0
  182. package/dist/packages/slider/slider.d.ts +7 -0
  183. package/dist/packages/slider/slider.js +6 -6
  184. package/dist/packages/slider/slider.js.map +2 -2
  185. package/dist/packages/slider/slider.react.stories.d.ts +1 -1
  186. package/dist/packages/slider-thumb/react.d.ts +15 -4
  187. package/dist/packages/slider-thumb/react.js +5 -0
  188. package/dist/packages/slider-thumb/slider-thumb.d.ts +5 -0
  189. package/dist/packages/slider-thumb/slider-thumb.js +4 -4
  190. package/dist/packages/slider-thumb/slider-thumb.js.map +2 -2
  191. package/dist/packages/snackbar/react.d.ts +40 -1
  192. package/dist/packages/snackbar/react.js +39 -0
  193. package/dist/packages/snackbar/snackbar.d.ts +2 -0
  194. package/dist/packages/snackbar/snackbar.js.map +2 -2
  195. package/dist/packages/snackbar-item/react.d.ts +8 -1
  196. package/dist/packages/snackbar-item/react.js +7 -0
  197. package/dist/packages/snackbar-item/snackbar-item.d.ts +2 -0
  198. package/dist/packages/snackbar-item/snackbar-item.js.map +2 -2
  199. package/dist/packages/step/react.d.ts +6 -1
  200. package/dist/packages/step/react.js +5 -0
  201. package/dist/packages/step/step.d.ts +8 -1
  202. package/dist/packages/step/step.js +7 -7
  203. package/dist/packages/step/step.js.map +2 -2
  204. package/dist/packages/step-indicator/react.d.ts +6 -1
  205. package/dist/packages/step-indicator/react.js +5 -0
  206. package/dist/packages/step-indicator/step-indicator.d.ts +7 -0
  207. package/dist/packages/step-indicator/step-indicator.js +2 -2
  208. package/dist/packages/step-indicator/step-indicator.js.map +2 -2
  209. package/dist/packages/switch/react.d.ts +9 -3
  210. package/dist/packages/switch/react.js +5 -0
  211. package/dist/packages/switch/switch.d.ts +7 -0
  212. package/dist/packages/switch/switch.js +3 -3
  213. package/dist/packages/switch/switch.js.map +2 -2
  214. package/dist/packages/switch/switch.react.stories.d.ts +2 -2
  215. package/dist/packages/tab/react.d.ts +9 -6
  216. package/dist/packages/tab/react.js +5 -2
  217. package/dist/packages/tab/tab.d.ts +7 -0
  218. package/dist/packages/tab/tab.js.map +2 -2
  219. package/dist/packages/tab-panel/react.d.ts +8 -1
  220. package/dist/packages/tab-panel/react.js +7 -0
  221. package/dist/packages/tab-panel/tab-panel.d.ts +3 -0
  222. package/dist/packages/tab-panel/tab-panel.js.map +2 -2
  223. package/dist/packages/tabs/react.d.ts +7 -3
  224. package/dist/packages/tabs/react.js +6 -2
  225. package/dist/packages/tabs/tabs.d.ts +3 -1
  226. package/dist/packages/tabs/tabs.js.map +2 -2
  227. package/dist/packages/textarea/react.d.ts +16 -10
  228. package/dist/packages/textarea/react.js +5 -0
  229. package/dist/packages/textarea/textarea.d.ts +6 -5
  230. package/dist/packages/textarea/textarea.js +5 -5
  231. package/dist/packages/textarea/textarea.js.map +2 -2
  232. package/dist/packages/textarea/textarea.react.stories.d.ts +18 -18
  233. package/dist/packages/textfield/react.d.ts +16 -10
  234. package/dist/packages/textfield/react.js +5 -0
  235. package/dist/packages/textfield/react.test.d.ts +1 -0
  236. package/dist/packages/textfield/react.test.js +20 -0
  237. package/dist/packages/textfield/textfield.d.ts +7 -5
  238. package/dist/packages/textfield/textfield.js +8 -8
  239. package/dist/packages/textfield/textfield.js.map +3 -3
  240. package/dist/packages/textfield/textfield.react.stories.d.ts +18 -18
  241. package/dist/packages/toast/toast.d.ts +5 -0
  242. package/dist/packages/toast/toast.js +4 -4
  243. package/dist/packages/toast/toast.js.map +2 -2
  244. package/dist/packages/toast-container/toast-container.d.ts +6 -1
  245. package/dist/packages/toast-container/toast-container.js +3 -3
  246. package/dist/packages/toast-container/toast-container.js.map +2 -2
  247. package/dist/packages/types.d.ts +16 -0
  248. package/dist/packages/types.js +1 -0
  249. package/dist/web-types.json +43 -44
  250. package/eik/index.js +14 -14
  251. package/package.json +4 -112
  252. package/dist/packages/slider/Slider.d.ts +0 -2
  253. package/dist/packages/slider/Slider.js +0 -8
  254. package/dist/packages/slider-thumb/SliderThumb.d.ts +0 -2
  255. package/dist/packages/slider-thumb/SliderThumb.js +0 -8
package/dist/packages/expandable/react.d.ts CHANGED
@@ -1,5 +1,10 @@
1
1
  import React from "react";
2
- import { WarpExpandable } from "./expandable.js";
2
+ import type { WarpExpandable } from "./expandable.js";
3
+ /**
4
+ * Expandable is a layout component used for creating expandable content areas on a page.
5
+ *
6
+ * [Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)
7
+ */
3
8
  export declare const Expandable: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpExpandable>, "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "render" | "renderOptions" | "buttonClass" | "bleed" | "expanded" | "box" | "contentClass" | "noChevron" | "animated" | "headingLevel" | "_expandableSlot"> & {} & Partial<Omit<WarpExpandable, keyof HTMLElement>> & React.RefAttributes<WarpExpandable>, "ref">, "button-class" | "content-class" | "no-chevron" | "heading-level"> & {
4
9
  buttonClass?: string;
5
10
  contentClass?: string;
package/dist/packages/expandable/react.js CHANGED
@@ -9,6 +9,11 @@ const BaseExpandable = createComponent({
9
9
  elementClass: Component,
10
10
  react: React,
11
11
  });
12
+ /**
13
+ * Expandable is a layout component used for creating expandable content areas on a page.
14
+ *
15
+ * [Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)
16
+ */
12
17
  export const Expandable = React.forwardRef(({ buttonClass, contentClass, noChevron, headingLevel, ...props }, ref) => React.createElement(BaseExpandable, {
13
18
  ...props,
14
19
  ...(buttonClass !== undefined ? { "button-class": buttonClass } : {}),
package/dist/packages/icon/icon.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import { LitElement, TemplateResult } from "lit";
2
2
  type PixelValue = `${number}px`;
3
+ /**
4
+ * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)
5
+ */
3
6
  export declare class WarpIcon extends LitElement {
4
7
  static styles: import("lit").CSSResult[];
5
8
  /** Icon filename (without .svg) */
package/dist/packages/icon/icon.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../packages/icon/icon.ts", "../../../packages/icon/style.ts"],
4
- "sourcesContent": ["import { html, LitElement, TemplateResult } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styles } from \"./style.js\";\n\n// Generic parser for fetch responses\ntype ResponseParser<T> = (response: Response) => Promise<T>;\n\ntype PixelValue = `${number}px`;\n\ninterface CacheFetchOptions<T> {\n\tresponseParser?: ResponseParser<T>;\n}\n\nconst _fetchMap = new Map<string, Promise<unknown>>();\nconst ERROR_SVG =\n\t'<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>';\n\n/**\n * A minimal in-memory map to de-duplicate Fetch API media requests.\n *\n * @param uri - Resource URL\n * @param options - Optional parser for the response\n * @returns Promise of parsed response\n */\nfunction cacheFetch<T = string>(\n\turi: string,\n\toptions: CacheFetchOptions<T> = {},\n): Promise<T> {\n\tconst parser =\n\t\toptions.responseParser ?? ((res: Response) => res.text() as Promise<T>);\n\tif (!_fetchMap.has(uri)) {\n\t\t_fetchMap.set(uri, fetch(uri).then(parser));\n\t}\n\treturn _fetchMap.get(uri) as Promise<T>;\n}\n\nexport class WarpIcon extends LitElement {\n\tstatic styles = [styles];\n\n\t/** Icon filename (without .svg) */\n\t@property({ type: String, reflect: true })\n\tname!: string;\n\n\t/**\n\t * Size: small, medium, large or pixel value (e.g. \"32px\").\n\t *\n\t * @default \"medium\"\n\t */\n\t@property({ type: String, reflect: true })\n\tsize: \"small\" | \"medium\" | \"large\" | PixelValue | undefined;\n\n\t/**\n\t * Locale used for `<title>` text.\n\t *\n\t * Reads the `lang` attribute from `<html>`, falls back to 'en'.\n\t */\n\t@property({ type: String, reflect: true, useDefault: true })\n\tlocale: string = document.documentElement.lang || \"en\";\n\n\t/** Parsed SVG element (not reflected as attribute) */\n\t@state()\n\tprivate svg: SVGElement | null = null;\n\n\t/**\n\t * Fetch an icon SVG from the CDN, with caching\n\t * @param iconName - Name of the icon file\n\t * @returns SVGElement or null on failure\n\t */\n\tprivate async fetchIcon(iconName: string): Promise<SVGElement | null> {\n\t\tconst uri = `https://assets.finn.no/pkg/eikons/~1/${this.locale}/${iconName}.svg`;\n\t\ttry {\n\t\t\tconst svgText = await cacheFetch<string>(uri);\n\t\t\tconst doc = new DOMParser().parseFromString(svgText, \"text/html\");\n\t\t\treturn doc.body.querySelector(\"svg\");\n\t\t} catch {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tprotected firstUpdated(): void {\n\t\tthis.loadIcon();\n\t}\n\n\tprotected updated(changedProps: Map<string, unknown>): void {\n\t\tif (changedProps.has(\"name\") || changedProps.has(\"locale\")) {\n\t\t\tthis.loadIcon();\n\t\t}\n\t}\n\n\tprivate async loadIcon(): Promise<void> {\n\t\tif (!this.name) {\n\t\t\tthis.svg = null;\n\t\t\treturn;\n\t\t}\n\n\t\tlet iconEl = await this.fetchIcon(this.name);\n\t\tif (!iconEl) {\n\t\t\tconst doc = new DOMParser().parseFromString(ERROR_SVG, \"text/html\");\n\t\t\ticonEl = doc.body.firstElementChild as SVGElement;\n\t\t}\n\t\tthis.svg = iconEl;\n\t}\n\n\trender(): TemplateResult {\n\t\tconst size = this.size || \"medium\";\n\t\tconst name = this.name || \"\";\n\t\tconst classes = {\n\t\t\t\"w-icon\": true,\n\t\t\t\"w-icon--s\": size === \"small\",\n\t\t\t\"w-icon--m\": size === \"medium\",\n\t\t\t\"w-icon--l\": size === \"large\",\n\t\t};\n\t\tconst customStyle =\n\t\t\ttypeof size === \"string\" && size.endsWith(\"px\")\n\t\t\t\t? `--w-icon-size: ${size};`\n\t\t\t\t: \"\";\n\t\treturn html`<div\n\t\t\tclass=\"${classMap(classes)}\"\n\t\t\tstyle=\"${customStyle}\"\n\t\t\tpart=\"w-${name.toLowerCase()}\"\n\t\t>\n\t\t\t${this.svg}\n\t\t</div>`;\n\t}\n}\n\n/** @deprecated Exported for backwards compatibility. Use WarpIcon. */\nexport const WIcon = WarpIcon;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"w-icon\": WarpIcon;\n\t}\n}\n\nif (!customElements.get(\"w-icon\")) {\n\tcustomElements.define(\"w-icon\", WarpIcon);\n}\n", "import { css } from \"lit\";\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t.w-icon {\n\t\t--_w-icon-size: var(--w-icon-size, 24px);\n\t\theight: var(--_w-icon-size);\n\t\twidth: var(--_w-icon-size);\n\t\tdisplay: flex;\n\t}\n\t.w-icon svg {\n\t\tpointer-events: none;\n\t\theight: var(--_w-icon-size);\n\t\twidth: var(--_w-icon-size);\n\t}\n\t.w-icon--s {\n\t\t--w-icon-size: 16px;\n\t}\n\t.w-icon--m {\n\t\t--w-icon-size: 24px;\n\t}\n\t.w-icon--l {\n\t\t--w-icon-size: 32px;\n\t}\n`;\n"],
5
- "mappings": "wMAAA,OAAS,QAAAA,EAAM,cAAAC,MAAkC,MACjD,OAAS,YAAAC,EAAU,SAAAC,MAAa,oBAChC,OAAS,YAAAC,MAAgB,8BCFzB,OAAS,OAAAC,MAAW,MAEb,IAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EDYtB,IAAME,EAAY,IAAI,IAChBC,EACL,qEASD,SAASC,EACRC,EACAC,EAAgC,CAAC,EACpB,CACb,IAAMC,EACLD,EAAQ,iBAAoBE,GAAkBA,EAAI,KAAK,GACxD,OAAKN,EAAU,IAAIG,CAAG,GACrBH,EAAU,IAAIG,EAAK,MAAMA,CAAG,EAAE,KAAKE,CAAM,CAAC,EAEpCL,EAAU,IAAIG,CAAG,CACzB,CAEO,IAAMI,EAAN,cAAuBC,CAAW,CAAlC,kCAqBN,YAAiB,SAAS,gBAAgB,MAAQ,KAIlD,KAAQ,IAAyB,KAOjC,MAAc,UAAUC,EAA8C,CACrE,IAAMN,EAAM,wCAAwC,KAAK,MAAM,IAAIM,CAAQ,OAC3E,GAAI,CACH,IAAMC,EAAU,MAAMR,EAAmBC,CAAG,EAE5C,OADY,IAAI,UAAU,EAAE,gBAAgBO,EAAS,WAAW,EACrD,KAAK,cAAc,KAAK,CACpC,MAAQ,CACP,OAAO,IACR,CACD,CAEU,cAAqB,CAC9B,KAAK,SAAS,CACf,CAEU,QAAQC,EAA0C,EACvDA,EAAa,IAAI,MAAM,GAAKA,EAAa,IAAI,QAAQ,IACxD,KAAK,SAAS,CAEhB,CAEA,MAAc,UAA0B,CACvC,GAAI,CAAC,KAAK,KAAM,CACf,KAAK,IAAM,KACX,MACD,CAEA,IAAIC,EAAS,MAAM,KAAK,UAAU,KAAK,IAAI,EACtCA,IAEJA,EADY,IAAI,UAAU,EAAE,gBAAgBX,EAAW,WAAW,EACrD,KAAK,mBAEnB,KAAK,IAAMW,CACZ,CAEA,QAAyB,CACxB,IAAMC,EAAO,KAAK,MAAQ,SACpBC,EAAO,KAAK,MAAQ,GACpBC,EAAU,CACf,SAAU,GACV,YAAaF,IAAS,QACtB,YAAaA,IAAS,SACtB,YAAaA,IAAS,OACvB,EACMG,EACL,OAAOH,GAAS,UAAYA,EAAK,SAAS,IAAI,EAC3C,kBAAkBA,CAAI,IACtB,GACJ,OAAOI;AAAA,YACGC,EAASH,CAAO,CAAC;AAAA,YACjBC,CAAW;AAAA,aACVF,EAAK,YAAY,CAAC;AAAA;AAAA,KAE1B,KAAK,GAAG;AAAA,SAEZ,CACD,EAxFaP,EACL,OAAS,CAACY,CAAM,EAIvBC,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAJ7Bd,EAKZ,oBAQAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAZ7Bd,EAaZ,oBAQAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,GAAM,WAAY,EAAK,CAAC,GApB/Cd,EAqBZ,sBAIQa,EAAA,CADPE,EAAM,GAxBKf,EAyBJ,mBAkEF,IAAMgB,EAAQhB,EAQhB,eAAe,IAAI,QAAQ,GAC/B,eAAe,OAAO,SAAUA,CAAQ",
4
+ "sourcesContent": ["import { html, LitElement, TemplateResult } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styles } from \"./style.js\";\n\n// Generic parser for fetch responses\ntype ResponseParser<T> = (response: Response) => Promise<T>;\n\ntype PixelValue = `${number}px`;\n\ninterface CacheFetchOptions<T> {\n\tresponseParser?: ResponseParser<T>;\n}\n\nconst _fetchMap = new Map<string, Promise<unknown>>();\nconst ERROR_SVG =\n\t'<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\"></svg>';\n\n/**\n * A minimal in-memory map to de-duplicate Fetch API media requests.\n *\n * @param uri - Resource URL\n * @param options - Optional parser for the response\n * @returns Promise of parsed response\n */\nfunction cacheFetch<T = string>(\n\turi: string,\n\toptions: CacheFetchOptions<T> = {},\n): Promise<T> {\n\tconst parser =\n\t\toptions.responseParser ?? ((res: Response) => res.text() as Promise<T>);\n\tif (!_fetchMap.has(uri)) {\n\t\t_fetchMap.set(uri, fetch(uri).then(parser));\n\t}\n\treturn _fetchMap.get(uri) as Promise<T>;\n}\n\n/**\n * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)\n */\nexport class WarpIcon extends LitElement {\n\tstatic styles = [styles];\n\n\t/** Icon filename (without .svg) */\n\t@property({ type: String, reflect: true })\n\tname!: string;\n\n\t/**\n\t * Size: small, medium, large or pixel value (e.g. \"32px\").\n\t *\n\t * @default \"medium\"\n\t */\n\t@property({ type: String, reflect: true })\n\tsize: \"small\" | \"medium\" | \"large\" | PixelValue | undefined;\n\n\t/**\n\t * Locale used for `<title>` text.\n\t *\n\t * Reads the `lang` attribute from `<html>`, falls back to 'en'.\n\t */\n\t@property({ type: String, reflect: true, useDefault: true })\n\tlocale: string = document.documentElement.lang || \"en\";\n\n\t/** Parsed SVG element (not reflected as attribute) */\n\t@state()\n\tprivate svg: SVGElement | null = null;\n\n\t/**\n\t * Fetch an icon SVG from the CDN, with caching\n\t * @param iconName - Name of the icon file\n\t * @returns SVGElement or null on failure\n\t */\n\tprivate async fetchIcon(iconName: string): Promise<SVGElement | null> {\n\t\tconst uri = `https://assets.finn.no/pkg/eikons/~1/${this.locale}/${iconName}.svg`;\n\t\ttry {\n\t\t\tconst svgText = await cacheFetch<string>(uri);\n\t\t\tconst doc = new DOMParser().parseFromString(svgText, \"text/html\");\n\t\t\treturn doc.body.querySelector(\"svg\");\n\t\t} catch {\n\t\t\treturn null;\n\t\t}\n\t}\n\n\tprotected firstUpdated(): void {\n\t\tthis.loadIcon();\n\t}\n\n\tprotected updated(changedProps: Map<string, unknown>): void {\n\t\tif (changedProps.has(\"name\") || changedProps.has(\"locale\")) {\n\t\t\tthis.loadIcon();\n\t\t}\n\t}\n\n\tprivate async loadIcon(): Promise<void> {\n\t\tif (!this.name) {\n\t\t\tthis.svg = null;\n\t\t\treturn;\n\t\t}\n\n\t\tlet iconEl = await this.fetchIcon(this.name);\n\t\tif (!iconEl) {\n\t\t\tconst doc = new DOMParser().parseFromString(ERROR_SVG, \"text/html\");\n\t\t\ticonEl = doc.body.firstElementChild as SVGElement;\n\t\t}\n\t\tthis.svg = iconEl;\n\t}\n\n\trender(): TemplateResult {\n\t\tconst size = this.size || \"medium\";\n\t\tconst name = this.name || \"\";\n\t\tconst classes = {\n\t\t\t\"w-icon\": true,\n\t\t\t\"w-icon--s\": size === \"small\",\n\t\t\t\"w-icon--m\": size === \"medium\",\n\t\t\t\"w-icon--l\": size === \"large\",\n\t\t};\n\t\tconst customStyle =\n\t\t\ttypeof size === \"string\" && size.endsWith(\"px\")\n\t\t\t\t? `--w-icon-size: ${size};`\n\t\t\t\t: \"\";\n\t\treturn html`<div\n\t\t\tclass=\"${classMap(classes)}\"\n\t\t\tstyle=\"${customStyle}\"\n\t\t\tpart=\"w-${name.toLowerCase()}\"\n\t\t>\n\t\t\t${this.svg}\n\t\t</div>`;\n\t}\n}\n\n/** @deprecated Exported for backwards compatibility. Use WarpIcon. */\nexport const WIcon = WarpIcon;\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t\"w-icon\": WarpIcon;\n\t}\n}\n\nif (!customElements.get(\"w-icon\")) {\n\tcustomElements.define(\"w-icon\", WarpIcon);\n}\n", "import { css } from \"lit\";\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t.w-icon {\n\t\t--_w-icon-size: var(--w-icon-size, 24px);\n\t\theight: var(--_w-icon-size);\n\t\twidth: var(--_w-icon-size);\n\t\tdisplay: flex;\n\t}\n\t.w-icon svg {\n\t\tpointer-events: none;\n\t\theight: var(--_w-icon-size);\n\t\twidth: var(--_w-icon-size);\n\t}\n\t.w-icon--s {\n\t\t--w-icon-size: 16px;\n\t}\n\t.w-icon--m {\n\t\t--w-icon-size: 24px;\n\t}\n\t.w-icon--l {\n\t\t--w-icon-size: 32px;\n\t}\n`;\n"],
5
+ "mappings": "wMAAA,OAAS,QAAAA,EAAM,cAAAC,MAAkC,MACjD,OAAS,YAAAC,EAAU,SAAAC,MAAa,oBAChC,OAAS,YAAAC,MAAgB,8BCFzB,OAAS,OAAAC,MAAW,MAEb,IAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EDYtB,IAAME,EAAY,IAAI,IAChBC,EACL,qEASD,SAASC,EACRC,EACAC,EAAgC,CAAC,EACpB,CACb,IAAMC,EACLD,EAAQ,iBAAoBE,GAAkBA,EAAI,KAAK,GACxD,OAAKN,EAAU,IAAIG,CAAG,GACrBH,EAAU,IAAIG,EAAK,MAAMA,CAAG,EAAE,KAAKE,CAAM,CAAC,EAEpCL,EAAU,IAAIG,CAAG,CACzB,CAKO,IAAMI,EAAN,cAAuBC,CAAW,CAAlC,kCAqBN,YAAiB,SAAS,gBAAgB,MAAQ,KAIlD,KAAQ,IAAyB,KAOjC,MAAc,UAAUC,EAA8C,CACrE,IAAMN,EAAM,wCAAwC,KAAK,MAAM,IAAIM,CAAQ,OAC3E,GAAI,CACH,IAAMC,EAAU,MAAMR,EAAmBC,CAAG,EAE5C,OADY,IAAI,UAAU,EAAE,gBAAgBO,EAAS,WAAW,EACrD,KAAK,cAAc,KAAK,CACpC,MAAQ,CACP,OAAO,IACR,CACD,CAEU,cAAqB,CAC9B,KAAK,SAAS,CACf,CAEU,QAAQC,EAA0C,EACvDA,EAAa,IAAI,MAAM,GAAKA,EAAa,IAAI,QAAQ,IACxD,KAAK,SAAS,CAEhB,CAEA,MAAc,UAA0B,CACvC,GAAI,CAAC,KAAK,KAAM,CACf,KAAK,IAAM,KACX,MACD,CAEA,IAAIC,EAAS,MAAM,KAAK,UAAU,KAAK,IAAI,EACtCA,IAEJA,EADY,IAAI,UAAU,EAAE,gBAAgBX,EAAW,WAAW,EACrD,KAAK,mBAEnB,KAAK,IAAMW,CACZ,CAEA,QAAyB,CACxB,IAAMC,EAAO,KAAK,MAAQ,SACpBC,EAAO,KAAK,MAAQ,GACpBC,EAAU,CACf,SAAU,GACV,YAAaF,IAAS,QACtB,YAAaA,IAAS,SACtB,YAAaA,IAAS,OACvB,EACMG,EACL,OAAOH,GAAS,UAAYA,EAAK,SAAS,IAAI,EAC3C,kBAAkBA,CAAI,IACtB,GACJ,OAAOI;AAAA,YACGC,EAASH,CAAO,CAAC;AAAA,YACjBC,CAAW;AAAA,aACVF,EAAK,YAAY,CAAC;AAAA;AAAA,KAE1B,KAAK,GAAG;AAAA,SAEZ,CACD,EAxFaP,EACL,OAAS,CAACY,CAAM,EAIvBC,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAJ7Bd,EAKZ,oBAQAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAZ7Bd,EAaZ,oBAQAa,EAAA,CADCC,EAAS,CAAE,KAAM,OAAQ,QAAS,GAAM,WAAY,EAAK,CAAC,GApB/Cd,EAqBZ,sBAIQa,EAAA,CADPE,EAAM,GAxBKf,EAyBJ,mBAkEF,IAAMgB,EAAQhB,EAQhB,eAAe,IAAI,QAAQ,GAC/B,eAAe,OAAO,SAAUA,CAAQ",
6
6
  "names": ["html", "LitElement", "property", "state", "classMap", "css", "styles", "_fetchMap", "ERROR_SVG", "cacheFetch", "uri", "options", "parser", "res", "WarpIcon", "LitElement", "iconName", "svgText", "changedProps", "iconEl", "size", "name", "classes", "customStyle", "html", "classMap", "styles", "__decorateClass", "property", "state", "WIcon"]
7
7
  }
package/dist/packages/icon/react.d.ts CHANGED
@@ -1,2 +1,5 @@
1
- import { WarpIcon } from "./icon.js";
1
+ import type { WarpIcon } from "./icon.js";
2
+ /**
3
+ * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)
4
+ */
2
5
  export declare const Icon: import("@lit/react").ReactWebComponent<WarpIcon, {}>;
package/dist/packages/icon/react.js CHANGED
@@ -4,6 +4,9 @@ import React from "react";
4
4
  // decouple from CDN by providing a dummy class
5
5
  class Component extends LitElement {
6
6
  }
7
+ /**
8
+ * [Warp component reference](https://warp-ds.github.io/docs/components/icons/frameworks/elements)
9
+ */
7
10
  export const Icon = createComponent({
8
11
  tagName: "w-icon",
9
12
  elementClass: Component,
package/dist/packages/link/link.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import { LitElement } from "lit";
2
2
  type ButtonVariant = "primary" | "secondary" | "negative" | "negativeQuiet" | "utility" | "quiet" | "utilityQuiet" | "overlay" | "overlayInverted" | "overlayQuiet" | "overlayInvertedQuiet";
3
3
  /**
4
- * Buttons are used to perform actions, with different visuals for different needs.
4
+ * Link component to use when creating links that look like buttons.
5
5
  *
6
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
6
+ * [Warp component reference](https://warp-ds.github.io/docs/components/link/frameworks/elements)
7
7
  */
8
8
  declare class WarpLink extends LitElement {
9
9
  /** @internal */
@@ -58,4 +58,9 @@ declare class WarpLink extends LitElement {
58
58
  firstUpdated(): void;
59
59
  render(): import("lit").TemplateResult<1>;
60
60
  }
61
+ declare global {
62
+ interface HTMLElementTagNameMap {
63
+ "w-link": WarpLink;
64
+ }
65
+ }
61
66
  export { WarpLink };
package/dist/packages/link/link.js CHANGED
@@ -1,4 +1,4 @@
1
- var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var e=(c,a,d,n)=>{for(var t=n>1?void 0:n?x(a,d):a,l=c.length-1,s;l>=0;l--)(s=c[l])&&(t=(n?s(a,d,t):s(t))||t);return n&&t&&f(a,d,t),t};import{html as _,LitElement as h,nothing as Y}from"lit";import{property as o}from"lit/decorators.js";import{css as k}from"lit";import{unsafeCSS as y}from"lit";var g=k`
1
+ var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var e=(c,a,d,n)=>{for(var t=n>1?void 0:n?x(a,d):a,l=c.length-1,s;l>=0;l--)(s=c[l])&&(t=(n?s(a,d,t):s(t))||t);return n&&t&&f(a,d,t),t};import{html as _,LitElement as h,nothing as Y}from"lit";import{property as o}from"lit/decorators.js";import{css as k}from"lit";import{unsafeCSS as y}from"lit";var u=k`
2
2
  *,
3
3
  :before,
4
4
  :after {
@@ -2603,7 +2603,7 @@ var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var e=(c,a,d,n
2603
2603
  --w-c-button-font-size: var(--w-font-size-xs);
2604
2604
  --w-c-button-line-height: var(--w-line-height-xs);
2605
2605
  }
2606
- `,u=i`
2606
+ `,g=i`
2607
2607
  :host([disabled]) {
2608
2608
  pointer-events: none;
2609
2609
  cursor: default;
@@ -2775,7 +2775,7 @@ var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var e=(c,a,d,n
2775
2775
  * ============================================================ */
2776
2776
 
2777
2777
  /* ===== Disabled ===== */
2778
- ${u}
2778
+ ${g}
2779
2779
 
2780
2780
  /* Additional specificity for button to override quiet variants */
2781
2781
  :host([disabled][variant]),
@@ -2923,7 +2923,7 @@ var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var e=(c,a,d,n
2923
2923
  }
2924
2924
 
2925
2925
  /* ===== Disabled (shared from button) ===== */
2926
- ${u}
2926
+ ${g}
2927
2927
  `;var m=["primary","secondary","negative","negativeQuiet","utility","utilityQuiet","quiet","link","overlay","overlayInverted","overlayQuiet","overlayInvertedQuiet"],r=class extends h{constructor(){super(...arguments);this.autofocus=!1;this.small=!1;this.disabled=!1;this.fullWidth=!1}connectedCallback(){if(super.connectedCallback(),this.variant&&!m.includes(this.variant))throw new Error(`Invalid "variant" attribute. Set its value to one of the following:
2928
2928
  ${m.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)}render(){return _`
2929
2929
  <a
@@ -2935,5 +2935,5 @@ ${m.join(", ")}.`)}firstUpdated(){this.autofocus&&setTimeout(()=>this.focus(),0)
2935
2935
  >
2936
2936
  <slot></slot>
2937
2937
  </a>
2938
- `}};r.shadowRootOptions={...h.shadowRootOptions,delegatesFocus:!0},r.styles=[g,w],e([o({type:Boolean,reflect:!0})],r.prototype,"autofocus",2),e([o({reflect:!0})],r.prototype,"variant",2),e([o({type:Boolean,reflect:!0})],r.prototype,"small",2),e([o({reflect:!0})],r.prototype,"href",2),e([o({type:Boolean,reflect:!0})],r.prototype,"disabled",2),e([o({reflect:!0})],r.prototype,"target",2),e([o({reflect:!0})],r.prototype,"rel",2),e([o({attribute:"full-width",type:Boolean,reflect:!0})],r.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",r);export{r as WarpLink};
2938
+ `}};r.shadowRootOptions={...h.shadowRootOptions,delegatesFocus:!0},r.styles=[u,w],e([o({type:Boolean,reflect:!0})],r.prototype,"autofocus",2),e([o({reflect:!0})],r.prototype,"variant",2),e([o({type:Boolean,reflect:!0})],r.prototype,"small",2),e([o({reflect:!0})],r.prototype,"href",2),e([o({type:Boolean,reflect:!0})],r.prototype,"disabled",2),e([o({reflect:!0})],r.prototype,"target",2),e([o({reflect:!0})],r.prototype,"rel",2),e([o({attribute:"full-width",type:Boolean,reflect:!0})],r.prototype,"fullWidth",2);customElements.get("w-link")||customElements.define("w-link",r);export{r as WarpLink};
2939
2939
  //# sourceMappingURL=link.js.map