lapikit 0.5.9 → 0.6.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 (234) hide show
  1. package/dist/@types/actions.d.ts +6 -0
  2. package/dist/@types/index.d.ts +1 -0
  3. package/dist/@types/index.js +1 -0
  4. package/dist/@types/props.d.ts +1 -0
  5. package/dist/actions.d.ts +2 -0
  6. package/dist/actions.js +2 -0
  7. package/dist/animations/ripple.d.ts +1 -1
  8. package/dist/animations/ripple.js +36 -23
  9. package/dist/components/app/app.svelte +122 -8
  10. package/dist/components/card/card.svelte +49 -96
  11. package/dist/components/card/card.types.d.ts +22 -2
  12. package/dist/components/card/modules/card-actions.svelte +53 -0
  13. package/dist/components/card/modules/card-actions.svelte.d.ts +4 -0
  14. package/dist/components/card/modules/card-container.svelte +51 -0
  15. package/dist/components/card/modules/card-container.svelte.d.ts +4 -0
  16. package/dist/components/card/modules/card-content.svelte +56 -0
  17. package/dist/components/card/modules/card-content.svelte.d.ts +4 -0
  18. package/dist/components/card/modules/card-media.svelte +52 -0
  19. package/dist/components/card/modules/card-media.svelte.d.ts +4 -0
  20. package/dist/components/card/modules/card-title.svelte +56 -0
  21. package/dist/components/card/modules/card-title.svelte.d.ts +4 -0
  22. package/dist/components/dialog/dialog.svelte +1 -2
  23. package/dist/components/index.d.ts +5 -0
  24. package/dist/components/index.js +5 -0
  25. package/dist/{@legacy/stores/components.d.ts → components/modal/modal.d.ts} +1 -2
  26. package/dist/{@legacy/stores/components.js → components/modal/modal.js} +1 -1
  27. package/dist/components/modal/modal.svelte +1 -1
  28. package/dist/components/textfield/textfield.svelte.d.ts +1 -1
  29. package/dist/constants.d.ts +2 -2
  30. package/dist/constants.js +8 -3
  31. package/dist/utils/components.d.ts +1 -0
  32. package/dist/utils/components.js +16 -0
  33. package/dist/utils/outside.d.ts +1 -0
  34. package/dist/utils/outside.js +5 -0
  35. package/dist/{@legacy/stores → utils}/themes.d.ts +1 -0
  36. package/dist/{@legacy/actions/use-theme.js → utils/themes.js} +4 -1
  37. package/package.json +11 -32
  38. package/dist/@legacy/actions/accordion.svelte.d.ts +0 -9
  39. package/dist/@legacy/actions/index.d.ts +0 -2
  40. package/dist/@legacy/actions/index.js +0 -2
  41. package/dist/@legacy/actions/use-theme.d.ts +0 -1
  42. package/dist/@legacy/assets/icons/arrow-down.svelte +0 -12
  43. package/dist/@legacy/assets/icons/arrow-down.svelte.d.ts +0 -18
  44. package/dist/@legacy/assets/icons/arrow-up.svelte +0 -12
  45. package/dist/@legacy/assets/icons/arrow-up.svelte.d.ts +0 -18
  46. package/dist/@legacy/assets/icons/close-fill.svelte +0 -12
  47. package/dist/@legacy/assets/icons/close-fill.svelte.d.ts +0 -18
  48. package/dist/@legacy/assets/icons/loading-fill.svelte +0 -31
  49. package/dist/@legacy/assets/icons/loading-fill.svelte.d.ts +0 -18
  50. package/dist/@legacy/components/accordion/accordion.css +0 -36
  51. package/dist/@legacy/components/accordion/accordion.svelte +0 -39
  52. package/dist/@legacy/components/accordion/accordion.svelte.d.ts +0 -4
  53. package/dist/@legacy/components/accordion/modules/accordion-item.css +0 -68
  54. package/dist/@legacy/components/accordion/modules/accordion-item.svelte +0 -94
  55. package/dist/@legacy/components/accordion/modules/accordion-item.svelte.d.ts +0 -4
  56. package/dist/@legacy/components/accordion/types.d.ts +0 -33
  57. package/dist/@legacy/components/alert/alert.css +0 -130
  58. package/dist/@legacy/components/alert/alert.svelte +0 -89
  59. package/dist/@legacy/components/alert/alert.svelte.d.ts +0 -4
  60. package/dist/@legacy/components/alert/types.d.ts +0 -28
  61. package/dist/@legacy/components/alert/types.js +0 -1
  62. package/dist/@legacy/components/app/app.css +0 -26
  63. package/dist/@legacy/components/app/app.svelte +0 -79
  64. package/dist/@legacy/components/app/app.svelte.d.ts +0 -4
  65. package/dist/@legacy/components/app/types.d.ts +0 -10
  66. package/dist/@legacy/components/app/types.js +0 -1
  67. package/dist/@legacy/components/appbar/appbar.css +0 -38
  68. package/dist/@legacy/components/appbar/appbar.svelte +0 -40
  69. package/dist/@legacy/components/appbar/appbar.svelte.d.ts +0 -4
  70. package/dist/@legacy/components/appbar/types.d.ts +0 -15
  71. package/dist/@legacy/components/appbar/types.js +0 -1
  72. package/dist/@legacy/components/aspect-ratio/aspect-ratio.css +0 -19
  73. package/dist/@legacy/components/aspect-ratio/aspect-ratio.svelte +0 -25
  74. package/dist/@legacy/components/aspect-ratio/aspect-ratio.svelte.d.ts +0 -4
  75. package/dist/@legacy/components/aspect-ratio/types.d.ts +0 -5
  76. package/dist/@legacy/components/aspect-ratio/types.js +0 -1
  77. package/dist/@legacy/components/avatar/avatar.css +0 -102
  78. package/dist/@legacy/components/avatar/avatar.svelte +0 -46
  79. package/dist/@legacy/components/avatar/avatar.svelte.d.ts +0 -4
  80. package/dist/@legacy/components/avatar/types.d.ts +0 -22
  81. package/dist/@legacy/components/avatar/types.js +0 -1
  82. package/dist/@legacy/components/button/button.css +0 -240
  83. package/dist/@legacy/components/button/button.svelte +0 -102
  84. package/dist/@legacy/components/button/button.svelte.d.ts +0 -4
  85. package/dist/@legacy/components/button/types.d.ts +0 -29
  86. package/dist/@legacy/components/button/types.js +0 -1
  87. package/dist/@legacy/components/card/card.css +0 -105
  88. package/dist/@legacy/components/card/card.svelte +0 -67
  89. package/dist/@legacy/components/card/card.svelte.d.ts +0 -4
  90. package/dist/@legacy/components/card/types.d.ts +0 -20
  91. package/dist/@legacy/components/card/types.js +0 -1
  92. package/dist/@legacy/components/chip/chip.css +0 -224
  93. package/dist/@legacy/components/chip/chip.svelte +0 -131
  94. package/dist/@legacy/components/chip/chip.svelte.d.ts +0 -4
  95. package/dist/@legacy/components/chip/types.d.ts +0 -32
  96. package/dist/@legacy/components/chip/types.js +0 -1
  97. package/dist/@legacy/components/dialog/dialog.css +0 -129
  98. package/dist/@legacy/components/dialog/dialog.svelte +0 -67
  99. package/dist/@legacy/components/dialog/dialog.svelte.d.ts +0 -4
  100. package/dist/@legacy/components/dialog/types.d.ts +0 -24
  101. package/dist/@legacy/components/dialog/types.js +0 -1
  102. package/dist/@legacy/components/dropdown/dropdown.css +0 -13
  103. package/dist/@legacy/components/dropdown/dropdown.svelte +0 -115
  104. package/dist/@legacy/components/dropdown/dropdown.svelte.d.ts +0 -4
  105. package/dist/@legacy/components/dropdown/types.d.ts +0 -26
  106. package/dist/@legacy/components/dropdown/types.js +0 -1
  107. package/dist/@legacy/components/icon/icon.css +0 -78
  108. package/dist/@legacy/components/icon/icon.svelte +0 -49
  109. package/dist/@legacy/components/icon/icon.svelte.d.ts +0 -4
  110. package/dist/@legacy/components/icon/types.d.ts +0 -16
  111. package/dist/@legacy/components/icon/types.js +0 -1
  112. package/dist/@legacy/components/index.d.ts +0 -22
  113. package/dist/@legacy/components/index.js +0 -23
  114. package/dist/@legacy/components/list/list.css +0 -149
  115. package/dist/@legacy/components/list/list.svelte +0 -44
  116. package/dist/@legacy/components/list/list.svelte.d.ts +0 -4
  117. package/dist/@legacy/components/list/modules/list-item.css +0 -67
  118. package/dist/@legacy/components/list/modules/list-item.svelte +0 -76
  119. package/dist/@legacy/components/list/modules/list-item.svelte.d.ts +0 -4
  120. package/dist/@legacy/components/list/types.d.ts +0 -33
  121. package/dist/@legacy/components/list/types.js +0 -1
  122. package/dist/@legacy/components/modal/modal.css +0 -137
  123. package/dist/@legacy/components/modal/modal.svelte +0 -118
  124. package/dist/@legacy/components/modal/modal.svelte.d.ts +0 -4
  125. package/dist/@legacy/components/modal/types.d.ts +0 -26
  126. package/dist/@legacy/components/modal/types.js +0 -1
  127. package/dist/@legacy/components/popover/popover.css +0 -13
  128. package/dist/@legacy/components/popover/popover.svelte +0 -73
  129. package/dist/@legacy/components/popover/popover.svelte.d.ts +0 -4
  130. package/dist/@legacy/components/popover/types.d.ts +0 -20
  131. package/dist/@legacy/components/popover/types.js +0 -1
  132. package/dist/@legacy/components/separator/separator.css +0 -42
  133. package/dist/@legacy/components/separator/separator.svelte +0 -37
  134. package/dist/@legacy/components/separator/separator.svelte.d.ts +0 -4
  135. package/dist/@legacy/components/separator/types.d.ts +0 -15
  136. package/dist/@legacy/components/separator/types.js +0 -1
  137. package/dist/@legacy/components/spacer/spacer.css +0 -3
  138. package/dist/@legacy/components/spacer/spacer.svelte +0 -7
  139. package/dist/@legacy/components/spacer/spacer.svelte.d.ts +0 -4
  140. package/dist/@legacy/components/spacer/types.d.ts +0 -4
  141. package/dist/@legacy/components/spacer/types.js +0 -1
  142. package/dist/@legacy/components/textfield/textfield.css +0 -298
  143. package/dist/@legacy/components/textfield/textfield.svelte +0 -193
  144. package/dist/@legacy/components/textfield/textfield.svelte.d.ts +0 -4
  145. package/dist/@legacy/components/textfield/types.d.ts +0 -37
  146. package/dist/@legacy/components/textfield/types.js +0 -1
  147. package/dist/@legacy/components/toolbar/toolbar.css +0 -106
  148. package/dist/@legacy/components/toolbar/toolbar.svelte +0 -47
  149. package/dist/@legacy/components/toolbar/toolbar.svelte.d.ts +0 -4
  150. package/dist/@legacy/components/toolbar/types.d.ts +0 -27
  151. package/dist/@legacy/components/toolbar/types.js +0 -1
  152. package/dist/@legacy/components/tooltip/tooltip.css +0 -116
  153. package/dist/@legacy/components/tooltip/tooltip.svelte +0 -113
  154. package/dist/@legacy/components/tooltip/tooltip.svelte.d.ts +0 -4
  155. package/dist/@legacy/components/tooltip/types.d.ts +0 -23
  156. package/dist/@legacy/components/tooltip/types.js +0 -1
  157. package/dist/@legacy/index.d.ts +0 -3
  158. package/dist/@legacy/index.js +0 -24
  159. package/dist/@legacy/internal/config/presets.d.ts +0 -149
  160. package/dist/@legacy/internal/config/presets.js +0 -169
  161. package/dist/@legacy/internal/config/variables.d.ts +0 -3
  162. package/dist/@legacy/internal/config/variables.js +0 -3
  163. package/dist/@legacy/internal/core/actions/assets.svelte.d.ts +0 -8
  164. package/dist/@legacy/internal/core/actions/assets.svelte.js +0 -54
  165. package/dist/@legacy/internal/core/actions/dropdown.svelte.d.ts +0 -7
  166. package/dist/@legacy/internal/core/actions/dropdown.svelte.js +0 -148
  167. package/dist/@legacy/internal/core/actions/popover.svelte.d.ts +0 -7
  168. package/dist/@legacy/internal/core/actions/popover.svelte.js +0 -134
  169. package/dist/@legacy/internal/core/actions/tooltip.svelte.d.ts +0 -7
  170. package/dist/@legacy/internal/core/actions/tooltip.svelte.js +0 -131
  171. package/dist/@legacy/internal/core/animations/ripple.d.ts +0 -12
  172. package/dist/@legacy/internal/core/animations/ripple.js +0 -96
  173. package/dist/@legacy/internal/core/bin/ansi.d.ts +0 -40
  174. package/dist/@legacy/internal/core/bin/ansi.js +0 -44
  175. package/dist/@legacy/internal/core/bin/terminal.d.ts +0 -1
  176. package/dist/@legacy/internal/core/bin/terminal.js +0 -12
  177. package/dist/@legacy/internal/core/css.d.ts +0 -1
  178. package/dist/@legacy/internal/core/css.js +0 -16
  179. package/dist/@legacy/internal/core/formatter/component.d.ts +0 -5
  180. package/dist/@legacy/internal/core/formatter/component.js +0 -60
  181. package/dist/@legacy/internal/core/formatter/device.d.ts +0 -5
  182. package/dist/@legacy/internal/core/formatter/device.js +0 -66
  183. package/dist/@legacy/internal/core/formatter/index.d.ts +0 -7
  184. package/dist/@legacy/internal/core/formatter/index.js +0 -35
  185. package/dist/@legacy/internal/core/formatter/style.d.ts +0 -4
  186. package/dist/@legacy/internal/core/formatter/style.js +0 -15
  187. package/dist/@legacy/internal/core/formatter/theme.d.ts +0 -5
  188. package/dist/@legacy/internal/core/formatter/theme.js +0 -44
  189. package/dist/@legacy/internal/core/formatter/typography.d.ts +0 -5
  190. package/dist/@legacy/internal/core/formatter/typography.js +0 -12
  191. package/dist/@legacy/internal/core/minify.d.ts +0 -1
  192. package/dist/@legacy/internal/core/minify.js +0 -10
  193. package/dist/@legacy/internal/core/standard-colors.d.ts +0 -75
  194. package/dist/@legacy/internal/core/standard-colors.js +0 -75
  195. package/dist/@legacy/internal/core/x11-colors.d.ts +0 -4
  196. package/dist/@legacy/internal/core/x11-colors.js +0 -151
  197. package/dist/@legacy/internal/helpers/colors.d.ts +0 -1
  198. package/dist/@legacy/internal/helpers/colors.js +0 -50
  199. package/dist/@legacy/internal/helpers/convert.d.ts +0 -1
  200. package/dist/@legacy/internal/helpers/convert.js +0 -17
  201. package/dist/@legacy/internal/helpers/deep-merge.d.ts +0 -44
  202. package/dist/@legacy/internal/helpers/deep-merge.js +0 -80
  203. package/dist/@legacy/internal/helpers/outside.d.ts +0 -9
  204. package/dist/@legacy/internal/helpers/outside.js +0 -34
  205. package/dist/@legacy/internal/helpers/parser.d.ts +0 -10
  206. package/dist/@legacy/internal/helpers/parser.js +0 -93
  207. package/dist/@legacy/internal/helpers/scroll.d.ts +0 -1
  208. package/dist/@legacy/internal/helpers/scroll.js +0 -5
  209. package/dist/@legacy/internal/plugins/vite.d.ts +0 -8
  210. package/dist/@legacy/internal/plugins/vite.js +0 -33
  211. package/dist/@legacy/internal/types/components.d.ts +0 -14
  212. package/dist/@legacy/internal/types/components.js +0 -1
  213. package/dist/@legacy/internal/types/configuration.d.ts +0 -63
  214. package/dist/@legacy/internal/types/configuration.js +0 -1
  215. package/dist/@legacy/internal/types/index.d.ts +0 -2
  216. package/dist/@legacy/internal/types/index.js +0 -2
  217. package/dist/@legacy/stores/breakpoints.d.ts +0 -6
  218. package/dist/@legacy/stores/breakpoints.js +0 -14
  219. package/dist/@legacy/stores/devices.d.ts +0 -6
  220. package/dist/@legacy/stores/devices.js +0 -9
  221. package/dist/@legacy/stores/index.d.ts +0 -5
  222. package/dist/@legacy/stores/index.js +0 -5
  223. package/dist/@legacy/stores/themes.js +0 -4
  224. package/dist/@legacy/stores/viewport.d.ts +0 -7
  225. package/dist/@legacy/stores/viewport.js +0 -7
  226. package/dist/@legacy/styles/animation.css +0 -33
  227. package/dist/@legacy/styles/keyframes.css +0 -30
  228. package/dist/@legacy/styles/reset.css +0 -133
  229. package/dist/@legacy/styles.css +0 -0
  230. package/dist/@legacy/styles.css.d.ts +0 -4
  231. package/dist/@legacy/themes.css +0 -0
  232. package/dist/@legacy/themes.css.d.ts +0 -4
  233. /package/dist/{@legacy/components/accordion/types.js → @types/actions.js} +0 -0
  234. /package/dist/{@legacy/actions → components/accordion}/accordion.svelte.js +0 -0
@@ -1,18 +0,0 @@
1
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
- $$bindings?: Bindings;
4
- } & Exports;
5
- (internal: unknown, props: {
6
- $$events?: Events;
7
- $$slots?: Slots;
8
- }): Exports & {
9
- $set?: any;
10
- $on?: any;
11
- };
12
- z_$$bindings?: Bindings;
13
- }
14
- declare const LoadingFill: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
15
- [evt: string]: CustomEvent<any>;
16
- }, {}, {}, string>;
17
- type LoadingFill = InstanceType<typeof LoadingFill>;
18
- export default LoadingFill;
@@ -1,36 +0,0 @@
1
- .kit-accordion {
2
- display: flex;
3
- flex-wrap: wrap;
4
- justify-content: center;
5
- list-style-type: none;
6
- padding: 0;
7
- width: 100%;
8
- position: relative;
9
- z-index: 1;
10
- }
11
-
12
- .kit-accordion.kit-accordion--spacer .kit-accordion-item:first-child.kit-accordion-item--active {
13
- margin-bottom: 1rem;
14
- }
15
-
16
- .kit-accordion.kit-accordion--spacer
17
- .kit-accordion-item:not(:first-child):not(:last-child).kit-accordion-item--active {
18
- margin-bottom: 1rem;
19
- margin-top: 1rem;
20
- }
21
- .kit-accordion.kit-accordion--spacer .kit-accordion-item:last-child.kit-accordion-item--active {
22
- margin-top: 1rem;
23
- }
24
-
25
- .kit-accordion.kit-accordion--hide-icon
26
- .kit-accordion-item
27
- .kit-accordion-item--title
28
- > .kit-accordion-item--icon {
29
- display: none !important;
30
- }
31
-
32
- .kit-accordion.kit-accordion--hide-icon .kit-accordion-item .kit-accordion-item--title {
33
- cursor: default;
34
- pointer-events: none;
35
- user-select: none;
36
- }
@@ -1,39 +0,0 @@
1
- <script lang="ts">
2
- import { getAssets } from '../../internal/core/actions/assets.svelte.js';
3
- import type { AccordionProps } from './types.js';
4
-
5
- let {
6
- ref = $bindable(),
7
- children,
8
- is = 'div',
9
- dark,
10
- light,
11
- color,
12
- background,
13
- spacer,
14
- hideIcon,
15
- rounded,
16
- ...rest
17
- }: AccordionProps = $props();
18
-
19
- const assets = getAssets();
20
- </script>
21
-
22
- <svelte:element
23
- this={is}
24
- bind:this={ref}
25
- {...rest}
26
- class={[
27
- 'kit-accordion',
28
- spacer && 'kit-accordion--spacer',
29
- hideIcon && 'kit-accordion--hide-icon',
30
- light && 'light',
31
- dark && 'dark',
32
- rest.class
33
- ]}
34
- style:--accordion-shape={assets.shape(rounded)}
35
- style:--accordion-background={assets.color(background)}
36
- style:--accordion-color={assets.color(color)}
37
- >
38
- {@render children?.()}
39
- </svelte:element>
@@ -1,4 +0,0 @@
1
- import type { AccordionProps } from './types.js';
2
- declare const Accordion: import("svelte").Component<AccordionProps, {}, "ref">;
3
- type Accordion = ReturnType<typeof Accordion>;
4
- export default Accordion;
@@ -1,68 +0,0 @@
1
- .kit-accordion-item {
2
- flex: 1 0 100%;
3
- max-width: 100%;
4
- position: relative;
5
- transition: 0.3s all cubic-bezier(0.4, 0, 0.2, 1);
6
- transition-property: margin-top, border-radius, border, max-width;
7
- border-radius: var(--accordion-shape, var(--system-shape-md));
8
- color: var(--accordion-color, var(--kit-label-primary));
9
- background-color: var(--accordion-background, var(--kit-background-grouped-primary));
10
- }
11
-
12
- .kit-accordion-item > button,
13
- .kit-accordion-item > [type='button'] {
14
- font: inherit;
15
- overflow: visible;
16
- background-color: transparent;
17
- border-style: none;
18
- cursor: pointer;
19
- color: inherit;
20
- }
21
-
22
- .kit-accordion-item .kit-accordion-item--title {
23
- align-items: center;
24
- text-align: start;
25
- border-radius: inherit;
26
- display: flex;
27
- font-size: 0.9375rem;
28
- min-height: 3rem;
29
- outline: none;
30
- padding: 1rem 1.5rem;
31
- position: relative;
32
- transition: 0.3s min-height margin-bottom margin-top border-radius cubic-bezier(0.4, 0, 0.2, 1);
33
- width: 100%;
34
- justify-content: space-between;
35
- }
36
-
37
- .kit-accordion-item .kit-accordion-item--text {
38
- display: flex;
39
- }
40
-
41
- .kit-accordion-item .kit-accordion-item--text .kit-accordion-item--text-wrapper {
42
- padding: 0.5rem 1.5rem 1rem;
43
- flex: 1 1 auto;
44
- max-width: 100%;
45
- }
46
-
47
- .kit-accordion-item .kit-accordion-item--icon {
48
- display: inline-flex;
49
- margin-bottom: -0.25rem;
50
- margin-top: -0.25rem;
51
- -webkit-user-select: none;
52
- user-select: none;
53
- margin-inline-start: auto;
54
- }
55
-
56
- /* disabled */
57
- .kit-accordion-item .kit-accordion-item--title.kit-accordion-item--disabled,
58
- .kit-accordion-item .kit-accordion-item--title[disabled],
59
- .kit-accordion-item .kit-accordion-item--title:disabled {
60
- pointer-events: none;
61
- user-select: none;
62
- }
63
-
64
- .kit-accordion-item .kit-accordion-item--title.kit-accordion-item--disabled > *,
65
- .kit-accordion-item .kit-accordion-item--title[disabled] > *,
66
- .kit-accordion-item .kit-accordion-item--title:disabled > * {
67
- opacity: 0.6;
68
- }
@@ -1,94 +0,0 @@
1
- <script lang="ts">
2
- import { getAssets } from '../../../internal/core/actions/assets.svelte.js';
3
- import type { AccordionItemProps, ModelAccordionItemProps } from '../types.js';
4
-
5
- // components
6
- import Icon from '../../icon/icon.svelte';
7
-
8
- // assets
9
- import ArrowUp from '../../../assets/icons/arrow-up.svelte';
10
- import ArrowDown from '../../../assets/icons/arrow-down.svelte';
11
-
12
- let {
13
- activator,
14
- children,
15
- indicator,
16
- ref = $bindable(),
17
- text,
18
- is = 'div',
19
- dark,
20
- light,
21
- rounded,
22
- color,
23
- background,
24
- index,
25
- open,
26
- toggle,
27
- disabled,
28
- readOnly,
29
- ...rest
30
- }: AccordionItemProps = $props();
31
-
32
- const assets = getAssets();
33
-
34
- let model: ModelAccordionItemProps = {
35
- get open() {
36
- return open !== undefined ? open : false;
37
- }
38
- };
39
- </script>
40
-
41
- <svelte:element
42
- this={is}
43
- bind:this={ref}
44
- {...rest}
45
- class={[
46
- 'kit-accordion-item',
47
- light && 'light',
48
- dark && 'dark',
49
- open && 'kit-accordion-item--active',
50
- rest.class
51
- ]}
52
- style:--accordion--item-shape={assets.shape(rounded)}
53
- style:--accordion--item-background={assets.color(background)}
54
- style:--accordion--item-color={assets.color(color)}
55
- >
56
- <button
57
- class={[
58
- 'kit-accordion-item--title',
59
- disabled && 'kit-accordion-item--disabled',
60
- dark && 'dark',
61
- open && 'kit-accordion-item--active',
62
- rest.class
63
- ]}
64
- onclick={() => toggle && !readOnly && !disabled && toggle(index)}
65
- aria-expanded={open}
66
- type="button"
67
- {disabled}
68
- >
69
- {#if activator}
70
- {@render activator?.()}
71
- {:else}
72
- {text}
73
- {/if}
74
-
75
- <span class="kit-accordion-item--icon">
76
- {#if indicator}
77
- {@render indicator?.(model)}
78
- {:else if open}
79
- <Icon>
80
- <ArrowUp />
81
- </Icon>
82
- {:else}
83
- <Icon>
84
- <ArrowDown />
85
- </Icon>
86
- {/if}
87
- </span>
88
- </button>
89
- <div class="kit-accordion-item--text" style:display={!open ? 'none' : ''}>
90
- <div class="kit-accordion-item--text-wrapper">
91
- {@render children?.()}
92
- </div>
93
- </div>
94
- </svelte:element>
@@ -1,4 +0,0 @@
1
- import type { AccordionItemProps } from '../types.js';
2
- declare const AccordionItem: import("svelte").Component<AccordionItemProps, {}, "ref">;
3
- type AccordionItem = ReturnType<typeof AccordionItem>;
4
- export default AccordionItem;
@@ -1,33 +0,0 @@
1
- import type { Component } from '../../internal/types/index.js';
2
- import type { Snippet } from 'svelte';
3
- export interface AccordionProps extends Component {
4
- ref?: HTMLElement | null;
5
- is?: 'div';
6
- text?: string;
7
- dark?: boolean;
8
- light?: boolean;
9
- color?: string;
10
- background?: string;
11
- spacer?: boolean;
12
- hideIcon?: boolean;
13
- }
14
- export interface AccordionItemProps extends Component {
15
- index: number | string;
16
- indicator?: Snippet<[ModelAccordionItemProps]>;
17
- activator?: Snippet;
18
- ref?: HTMLElement | null;
19
- is?: 'div';
20
- text?: string;
21
- dark?: boolean;
22
- light?: boolean;
23
- rounded?: string;
24
- color?: string;
25
- background?: string;
26
- readOnly?: boolean;
27
- open?: boolean;
28
- disabled?: boolean;
29
- toggle?: (index: number | string) => void;
30
- }
31
- export type ModelAccordionItemProps = {
32
- open: boolean;
33
- };
@@ -1,130 +0,0 @@
1
- .kit-alert {
2
- display: grid;
3
- flex: 1 1;
4
- grid-template-areas:
5
- 'prepend content append close'
6
- '. content . .';
7
- grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
8
- position: relative;
9
- padding: 1rem;
10
- overflow: hidden;
11
- color: var(--alert-color, var(--kit-label-primary));
12
- background-color: var(--alert-background, var(--kit-background-grouped-tertiary));
13
- border-radius: var(--alert-shape, var(--system-shape-md));
14
- line-height: 0;
15
- }
16
-
17
- .kit-alert .kit-alert--underlay {
18
- grid-area: none;
19
- position: absolute;
20
- background-color: var(--alert-background);
21
- border-radius: inherit;
22
- top: 0;
23
- right: 0;
24
- bottom: 0;
25
- left: 0;
26
- z-index: -1;
27
- }
28
-
29
- .kit-alert.kit-alert--outline {
30
- border: thin solid currentColor;
31
- background-color: transparent;
32
- }
33
-
34
- /* density */
35
- .kit-alert[breakpoint]kit-alert--density-default {
36
- padding-bottom: 1rem;
37
- padding-top: 1rem;
38
- }
39
-
40
- .kit-alert[breakpoint]kit-alert--density-compact {
41
- padding-bottom: 0.5rem;
42
- padding-top: 0.5rem;
43
- }
44
-
45
- .kit-alert[breakpoint]kit-alert--density-comfortable {
46
- padding-bottom: 0.75rem;
47
- padding-top: 0.75rem;
48
- }
49
-
50
- .kit-alert .kit-alert--prepend {
51
- align-self: flex-start;
52
- display: flex;
53
- align-items: center;
54
- grid-area: prepend;
55
- margin-inline-end: 1rem;
56
- }
57
-
58
- .kit-alert .kit-alert--content {
59
- align-self: flex-start;
60
- grid-area: content;
61
- overflow: hidden;
62
- line-height: normal;
63
- }
64
-
65
- .kit-alert .kit-alert--close {
66
- align-self: flex-start;
67
- margin-inline-start: 1rem;
68
- flex: 0 1 auto;
69
- grid-area: close;
70
- }
71
-
72
- .kit-alert .kit-alert--append {
73
- align-self: flex-start;
74
- display: flex;
75
- align-items: center;
76
- grid-area: append;
77
- margin-inline-start: 1rem;
78
- }
79
-
80
- /* state */
81
- .kit-alert.kit-alert--info:not([class*='alert--variant-']) {
82
- --on: var(--kit-on-info);
83
- --base: var(--kit-accent-info);
84
- }
85
- .kit-alert.kit-alert--info[class*='alert--variant-'] {
86
- --base: var(--kit-accent-info);
87
- }
88
-
89
- .kit-alert.kit-alert--success:not([class*='alert--variant-']) {
90
- --on: var(--kit-on-success);
91
- --base: var(--kit-accent-successs);
92
- }
93
- .kit-alert.kit-alert--success[class*='alert--variant-'] {
94
- --base: var(--kit-accent-successs);
95
- }
96
-
97
- .kit-alert.kit-alert--warning:not([class*='alert--variant-']) {
98
- --on: var(--kit-on-warning);
99
- --base: var(--kit-accent-warning);
100
- }
101
- .kit-alert.kit-alert--warning[class*='alert--variant-'] {
102
- --base: var(--kit-accent-warning);
103
- }
104
-
105
- .kit-alert.kit-alert--error:not([class*='alert--variant-']) {
106
- --on: var(--kit-on-error);
107
- --base: var(--kit-accent-destructive);
108
- }
109
- .kit-alert.kit-alert--error[class*='alert--variant-'] {
110
- --base: var(--kit-accent-destructive);
111
- }
112
-
113
- /* variant */
114
- .kit-alert[breakpoint]kit-alert--variant-outline {
115
- --alert-color: var(--base, var(--kit-neutral));
116
- background-color: transparent;
117
- border: 1px solid currentColor;
118
- }
119
-
120
- .kit-alert[breakpoint]kit-alert--variant-text {
121
- --alert-color: var(--base, var(--kit-neutral));
122
- background-color: transparent;
123
- border-color: transparent;
124
- }
125
-
126
- .kit-alert[breakpoint]kit-alert--variant-dash {
127
- --alert-color: var(--base, var(--kit-neutral));
128
- background-color: transparent;
129
- border: 1px dashed currentColor;
130
- }
@@ -1,89 +0,0 @@
1
- <script lang="ts">
2
- import { getAssets } from '../../internal/core/actions/assets.svelte.js';
3
- import type { AlertProps } from './types.js';
4
-
5
- // components
6
- import Icon from '../icon/icon.svelte';
7
-
8
- // assets
9
- import Close from '../../assets/icons/close-fill.svelte';
10
-
11
- let {
12
- children,
13
- append,
14
- prepend,
15
- close,
16
- ref = $bindable(),
17
- open = $bindable(true),
18
- is = 'div',
19
- light,
20
- dark,
21
- variant,
22
- density = 'default',
23
- rounded,
24
- warning,
25
- info,
26
- success,
27
- error,
28
- closable,
29
- color,
30
- background,
31
- ...rest
32
- }: AlertProps = $props();
33
-
34
- const assets = getAssets();
35
- </script>
36
-
37
- {#if !closable || (open && closable)}
38
- <svelte:element
39
- this={is}
40
- {...rest}
41
- class={[
42
- 'kit-alert',
43
- light && 'light',
44
- dark && 'dark',
45
- variant && assets.className('alert', 'variant', variant),
46
- density && assets.className('alert', 'density', density),
47
- warning && 'kit-alert--warning',
48
- info && 'kit-alert--info',
49
- success && 'kit-alert--success',
50
- error && 'kit-alert--error',
51
- rest.class
52
- ]}
53
- role="alert"
54
- style:--alert-background={assets.color(background)}
55
- style:--alert-color={assets.color(color)}
56
- style:--alert-shape={assets.shape(rounded)}
57
- >
58
- {#if prepend}
59
- <div class="kit-alert--prepend">
60
- {@render prepend?.()}
61
- </div>
62
- {/if}
63
- <span class="kit-alert--content">
64
- {@render children?.()}
65
- </span>
66
- {#if append}
67
- <div class="kit-alert--append">
68
- {@render append?.()}
69
- </div>
70
- {/if}
71
-
72
- {#if closable}
73
- <button
74
- class="kit-alert--close"
75
- type="button"
76
- aria-label="close"
77
- onclick={() => (open = false)}
78
- >
79
- {#if close}
80
- {@render close?.()}
81
- {:else}
82
- <Icon>
83
- <Close />
84
- </Icon>
85
- {/if}
86
- </button>
87
- {/if}
88
- </svelte:element>
89
- {/if}
@@ -1,4 +0,0 @@
1
- import type { AlertProps } from './types.js';
2
- declare const Alert: import("svelte").Component<AlertProps, {}, "ref" | "open">;
3
- type Alert = ReturnType<typeof Alert>;
4
- export default Alert;
@@ -1,28 +0,0 @@
1
- import type { Component } from '../../internal/types/index.js';
2
- import type { Snippet } from 'svelte';
3
- type AlertDensity = 'compact' | 'comfortable' | 'default';
4
- type AlertVariant = 'outline' | 'dash' | 'text';
5
- export interface AlertProps extends Component {
6
- append?: Snippet;
7
- prepend?: Snippet;
8
- close?: Snippet;
9
- href?: string;
10
- is?: 'div';
11
- dark?: boolean;
12
- light?: boolean;
13
- variant?: AlertVariant | {
14
- [key: string]: AlertVariant;
15
- };
16
- density?: AlertDensity | {
17
- [key: string]: AlertDensity;
18
- };
19
- rounded?: string;
20
- closable?: boolean;
21
- color?: string;
22
- background?: string;
23
- warning?: boolean;
24
- info?: boolean;
25
- success?: boolean;
26
- error?: boolean;
27
- }
28
- export {};
@@ -1 +0,0 @@
1
- export {};
@@ -1,26 +0,0 @@
1
- #kit-app,
2
- .kit-application {
3
- -webkit-text-size-adjust: 100%;
4
- tab-size: 4;
5
- line-height: 1.5;
6
- box-sizing: border-box;
7
- font-family: var(--kit-font-sans);
8
- background-color: var(--kit-background-primary);
9
- color: var(--kit-label-primary);
10
- }
11
-
12
- .kit-overlay {
13
- position: fixed;
14
- top: 0;
15
- left: 0;
16
- height: 100%;
17
- width: 100%;
18
- background-color: color-mix(in oklab, black 75%, transparent);
19
- z-index: 9000;
20
- cursor: default;
21
- }
22
-
23
- .kit-overlay.kit-overlay--persistent {
24
- user-select: none;
25
- cursor: default;
26
- }
@@ -1,79 +0,0 @@
1
- <script lang="ts">
2
- const BROWSER = typeof window !== 'undefined';
3
- import { useTheme } from '../../actions/use-theme.js';
4
- import { modalOpen, setOpenModal } from '../../stores/components.js';
5
-
6
- import { viewport } from '../../stores/viewport.js';
7
- import type { AppProps } from './types.js';
8
-
9
- let {
10
- ref = $bindable(),
11
- children,
12
- themes,
13
- storageKey = '@lapikit/theme',
14
- light,
15
- dark,
16
- ...rest
17
- }: AppProps = $props();
18
-
19
- $effect.pre(() => {
20
- if (!BROWSER) return;
21
- const colorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches
22
- ? 'dark'
23
- : 'light';
24
- const localTheme = localStorage.getItem(storageKey);
25
-
26
- if (localTheme) {
27
- useTheme(localTheme);
28
- } else if (colorScheme) {
29
- if (typeof themes === 'string') {
30
- useTheme(themes);
31
- } else if (typeof themes === 'object' && Array.isArray(themes)) {
32
- if (colorScheme === 'dark') useTheme(themes[1] ?? themes[0]);
33
- else useTheme(themes[0]);
34
- } else {
35
- useTheme(colorScheme);
36
- }
37
- }
38
-
39
- // Met à jour le store viewport à l'init et sur resize
40
- function updateViewport() {
41
- viewport.set({
42
- innerWidth: window.innerWidth,
43
- outerWidth: window.outerWidth,
44
- innerHeight: window.innerHeight,
45
- outerHeight: window.outerHeight
46
- });
47
- }
48
- updateViewport();
49
- window.addEventListener('resize', updateViewport);
50
- return () => {
51
- window.removeEventListener('resize', updateViewport);
52
- };
53
- });
54
- </script>
55
-
56
- <div
57
- id="kit-app"
58
- bind:this={ref}
59
- {...rest}
60
- class={[
61
- 'kit-application',
62
- light && 'light',
63
- dark && 'dark',
64
- light && 'kit-theme--light',
65
- dark && 'kit-theme--dark',
66
- rest.class
67
- ]}
68
- >
69
- {@render children?.()}
70
-
71
- <!-- svelte-ignore a11y_no_static_element_interactions -->
72
- {#if $modalOpen}
73
- <!-- svelte-ignore a11y_click_events_have_key_events -->
74
- <div
75
- class={['kit-overlay', $modalOpen === 'persistent' && 'kit-overlay--persistent']}
76
- onclick={() => $modalOpen !== 'persistent' && setOpenModal(false)}
77
- ></div>
78
- {/if}
79
- </div>
@@ -1,4 +0,0 @@
1
- import type { AppProps } from './types.js';
2
- declare const App: import("svelte").Component<AppProps, {}, "ref">;
3
- type App = ReturnType<typeof App>;
4
- export default App;
@@ -1,10 +0,0 @@
1
- import type { Snippet } from 'svelte';
2
- import type { HTMLAttributes } from 'svelte/elements';
3
- export interface AppProps extends HTMLAttributes<HTMLDivElement> {
4
- ref?: HTMLDivElement;
5
- children?: Snippet;
6
- themes?: string | string[];
7
- storageKey?: string;
8
- light?: boolean;
9
- dark?: boolean;
10
- }
@@ -1 +0,0 @@
1
- export {};