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.
- package/dist/@types/actions.d.ts +6 -0
- package/dist/@types/index.d.ts +1 -0
- package/dist/@types/index.js +1 -0
- package/dist/@types/props.d.ts +1 -0
- package/dist/actions.d.ts +2 -0
- package/dist/actions.js +2 -0
- package/dist/animations/ripple.d.ts +1 -1
- package/dist/animations/ripple.js +36 -23
- package/dist/components/app/app.svelte +122 -8
- package/dist/components/card/card.svelte +49 -96
- package/dist/components/card/card.types.d.ts +22 -2
- package/dist/components/card/modules/card-actions.svelte +53 -0
- package/dist/components/card/modules/card-actions.svelte.d.ts +4 -0
- package/dist/components/card/modules/card-container.svelte +51 -0
- package/dist/components/card/modules/card-container.svelte.d.ts +4 -0
- package/dist/components/card/modules/card-content.svelte +56 -0
- package/dist/components/card/modules/card-content.svelte.d.ts +4 -0
- package/dist/components/card/modules/card-media.svelte +52 -0
- package/dist/components/card/modules/card-media.svelte.d.ts +4 -0
- package/dist/components/card/modules/card-title.svelte +56 -0
- package/dist/components/card/modules/card-title.svelte.d.ts +4 -0
- package/dist/components/dialog/dialog.svelte +1 -2
- package/dist/components/index.d.ts +5 -0
- package/dist/components/index.js +5 -0
- package/dist/{@legacy/stores/components.d.ts → components/modal/modal.d.ts} +1 -2
- package/dist/{@legacy/stores/components.js → components/modal/modal.js} +1 -1
- package/dist/components/modal/modal.svelte +1 -1
- package/dist/components/textfield/textfield.svelte.d.ts +1 -1
- package/dist/constants.d.ts +2 -2
- package/dist/constants.js +8 -3
- package/dist/utils/components.d.ts +1 -0
- package/dist/utils/components.js +16 -0
- package/dist/utils/outside.d.ts +1 -0
- package/dist/utils/outside.js +5 -0
- package/dist/{@legacy/stores → utils}/themes.d.ts +1 -0
- package/dist/{@legacy/actions/use-theme.js → utils/themes.js} +4 -1
- package/package.json +11 -32
- package/dist/@legacy/actions/accordion.svelte.d.ts +0 -9
- package/dist/@legacy/actions/index.d.ts +0 -2
- package/dist/@legacy/actions/index.js +0 -2
- package/dist/@legacy/actions/use-theme.d.ts +0 -1
- package/dist/@legacy/assets/icons/arrow-down.svelte +0 -12
- package/dist/@legacy/assets/icons/arrow-down.svelte.d.ts +0 -18
- package/dist/@legacy/assets/icons/arrow-up.svelte +0 -12
- package/dist/@legacy/assets/icons/arrow-up.svelte.d.ts +0 -18
- package/dist/@legacy/assets/icons/close-fill.svelte +0 -12
- package/dist/@legacy/assets/icons/close-fill.svelte.d.ts +0 -18
- package/dist/@legacy/assets/icons/loading-fill.svelte +0 -31
- package/dist/@legacy/assets/icons/loading-fill.svelte.d.ts +0 -18
- package/dist/@legacy/components/accordion/accordion.css +0 -36
- package/dist/@legacy/components/accordion/accordion.svelte +0 -39
- package/dist/@legacy/components/accordion/accordion.svelte.d.ts +0 -4
- package/dist/@legacy/components/accordion/modules/accordion-item.css +0 -68
- package/dist/@legacy/components/accordion/modules/accordion-item.svelte +0 -94
- package/dist/@legacy/components/accordion/modules/accordion-item.svelte.d.ts +0 -4
- package/dist/@legacy/components/accordion/types.d.ts +0 -33
- package/dist/@legacy/components/alert/alert.css +0 -130
- package/dist/@legacy/components/alert/alert.svelte +0 -89
- package/dist/@legacy/components/alert/alert.svelte.d.ts +0 -4
- package/dist/@legacy/components/alert/types.d.ts +0 -28
- package/dist/@legacy/components/alert/types.js +0 -1
- package/dist/@legacy/components/app/app.css +0 -26
- package/dist/@legacy/components/app/app.svelte +0 -79
- package/dist/@legacy/components/app/app.svelte.d.ts +0 -4
- package/dist/@legacy/components/app/types.d.ts +0 -10
- package/dist/@legacy/components/app/types.js +0 -1
- package/dist/@legacy/components/appbar/appbar.css +0 -38
- package/dist/@legacy/components/appbar/appbar.svelte +0 -40
- package/dist/@legacy/components/appbar/appbar.svelte.d.ts +0 -4
- package/dist/@legacy/components/appbar/types.d.ts +0 -15
- package/dist/@legacy/components/appbar/types.js +0 -1
- package/dist/@legacy/components/aspect-ratio/aspect-ratio.css +0 -19
- package/dist/@legacy/components/aspect-ratio/aspect-ratio.svelte +0 -25
- package/dist/@legacy/components/aspect-ratio/aspect-ratio.svelte.d.ts +0 -4
- package/dist/@legacy/components/aspect-ratio/types.d.ts +0 -5
- package/dist/@legacy/components/aspect-ratio/types.js +0 -1
- package/dist/@legacy/components/avatar/avatar.css +0 -102
- package/dist/@legacy/components/avatar/avatar.svelte +0 -46
- package/dist/@legacy/components/avatar/avatar.svelte.d.ts +0 -4
- package/dist/@legacy/components/avatar/types.d.ts +0 -22
- package/dist/@legacy/components/avatar/types.js +0 -1
- package/dist/@legacy/components/button/button.css +0 -240
- package/dist/@legacy/components/button/button.svelte +0 -102
- package/dist/@legacy/components/button/button.svelte.d.ts +0 -4
- package/dist/@legacy/components/button/types.d.ts +0 -29
- package/dist/@legacy/components/button/types.js +0 -1
- package/dist/@legacy/components/card/card.css +0 -105
- package/dist/@legacy/components/card/card.svelte +0 -67
- package/dist/@legacy/components/card/card.svelte.d.ts +0 -4
- package/dist/@legacy/components/card/types.d.ts +0 -20
- package/dist/@legacy/components/card/types.js +0 -1
- package/dist/@legacy/components/chip/chip.css +0 -224
- package/dist/@legacy/components/chip/chip.svelte +0 -131
- package/dist/@legacy/components/chip/chip.svelte.d.ts +0 -4
- package/dist/@legacy/components/chip/types.d.ts +0 -32
- package/dist/@legacy/components/chip/types.js +0 -1
- package/dist/@legacy/components/dialog/dialog.css +0 -129
- package/dist/@legacy/components/dialog/dialog.svelte +0 -67
- package/dist/@legacy/components/dialog/dialog.svelte.d.ts +0 -4
- package/dist/@legacy/components/dialog/types.d.ts +0 -24
- package/dist/@legacy/components/dialog/types.js +0 -1
- package/dist/@legacy/components/dropdown/dropdown.css +0 -13
- package/dist/@legacy/components/dropdown/dropdown.svelte +0 -115
- package/dist/@legacy/components/dropdown/dropdown.svelte.d.ts +0 -4
- package/dist/@legacy/components/dropdown/types.d.ts +0 -26
- package/dist/@legacy/components/dropdown/types.js +0 -1
- package/dist/@legacy/components/icon/icon.css +0 -78
- package/dist/@legacy/components/icon/icon.svelte +0 -49
- package/dist/@legacy/components/icon/icon.svelte.d.ts +0 -4
- package/dist/@legacy/components/icon/types.d.ts +0 -16
- package/dist/@legacy/components/icon/types.js +0 -1
- package/dist/@legacy/components/index.d.ts +0 -22
- package/dist/@legacy/components/index.js +0 -23
- package/dist/@legacy/components/list/list.css +0 -149
- package/dist/@legacy/components/list/list.svelte +0 -44
- package/dist/@legacy/components/list/list.svelte.d.ts +0 -4
- package/dist/@legacy/components/list/modules/list-item.css +0 -67
- package/dist/@legacy/components/list/modules/list-item.svelte +0 -76
- package/dist/@legacy/components/list/modules/list-item.svelte.d.ts +0 -4
- package/dist/@legacy/components/list/types.d.ts +0 -33
- package/dist/@legacy/components/list/types.js +0 -1
- package/dist/@legacy/components/modal/modal.css +0 -137
- package/dist/@legacy/components/modal/modal.svelte +0 -118
- package/dist/@legacy/components/modal/modal.svelte.d.ts +0 -4
- package/dist/@legacy/components/modal/types.d.ts +0 -26
- package/dist/@legacy/components/modal/types.js +0 -1
- package/dist/@legacy/components/popover/popover.css +0 -13
- package/dist/@legacy/components/popover/popover.svelte +0 -73
- package/dist/@legacy/components/popover/popover.svelte.d.ts +0 -4
- package/dist/@legacy/components/popover/types.d.ts +0 -20
- package/dist/@legacy/components/popover/types.js +0 -1
- package/dist/@legacy/components/separator/separator.css +0 -42
- package/dist/@legacy/components/separator/separator.svelte +0 -37
- package/dist/@legacy/components/separator/separator.svelte.d.ts +0 -4
- package/dist/@legacy/components/separator/types.d.ts +0 -15
- package/dist/@legacy/components/separator/types.js +0 -1
- package/dist/@legacy/components/spacer/spacer.css +0 -3
- package/dist/@legacy/components/spacer/spacer.svelte +0 -7
- package/dist/@legacy/components/spacer/spacer.svelte.d.ts +0 -4
- package/dist/@legacy/components/spacer/types.d.ts +0 -4
- package/dist/@legacy/components/spacer/types.js +0 -1
- package/dist/@legacy/components/textfield/textfield.css +0 -298
- package/dist/@legacy/components/textfield/textfield.svelte +0 -193
- package/dist/@legacy/components/textfield/textfield.svelte.d.ts +0 -4
- package/dist/@legacy/components/textfield/types.d.ts +0 -37
- package/dist/@legacy/components/textfield/types.js +0 -1
- package/dist/@legacy/components/toolbar/toolbar.css +0 -106
- package/dist/@legacy/components/toolbar/toolbar.svelte +0 -47
- package/dist/@legacy/components/toolbar/toolbar.svelte.d.ts +0 -4
- package/dist/@legacy/components/toolbar/types.d.ts +0 -27
- package/dist/@legacy/components/toolbar/types.js +0 -1
- package/dist/@legacy/components/tooltip/tooltip.css +0 -116
- package/dist/@legacy/components/tooltip/tooltip.svelte +0 -113
- package/dist/@legacy/components/tooltip/tooltip.svelte.d.ts +0 -4
- package/dist/@legacy/components/tooltip/types.d.ts +0 -23
- package/dist/@legacy/components/tooltip/types.js +0 -1
- package/dist/@legacy/index.d.ts +0 -3
- package/dist/@legacy/index.js +0 -24
- package/dist/@legacy/internal/config/presets.d.ts +0 -149
- package/dist/@legacy/internal/config/presets.js +0 -169
- package/dist/@legacy/internal/config/variables.d.ts +0 -3
- package/dist/@legacy/internal/config/variables.js +0 -3
- package/dist/@legacy/internal/core/actions/assets.svelte.d.ts +0 -8
- package/dist/@legacy/internal/core/actions/assets.svelte.js +0 -54
- package/dist/@legacy/internal/core/actions/dropdown.svelte.d.ts +0 -7
- package/dist/@legacy/internal/core/actions/dropdown.svelte.js +0 -148
- package/dist/@legacy/internal/core/actions/popover.svelte.d.ts +0 -7
- package/dist/@legacy/internal/core/actions/popover.svelte.js +0 -134
- package/dist/@legacy/internal/core/actions/tooltip.svelte.d.ts +0 -7
- package/dist/@legacy/internal/core/actions/tooltip.svelte.js +0 -131
- package/dist/@legacy/internal/core/animations/ripple.d.ts +0 -12
- package/dist/@legacy/internal/core/animations/ripple.js +0 -96
- package/dist/@legacy/internal/core/bin/ansi.d.ts +0 -40
- package/dist/@legacy/internal/core/bin/ansi.js +0 -44
- package/dist/@legacy/internal/core/bin/terminal.d.ts +0 -1
- package/dist/@legacy/internal/core/bin/terminal.js +0 -12
- package/dist/@legacy/internal/core/css.d.ts +0 -1
- package/dist/@legacy/internal/core/css.js +0 -16
- package/dist/@legacy/internal/core/formatter/component.d.ts +0 -5
- package/dist/@legacy/internal/core/formatter/component.js +0 -60
- package/dist/@legacy/internal/core/formatter/device.d.ts +0 -5
- package/dist/@legacy/internal/core/formatter/device.js +0 -66
- package/dist/@legacy/internal/core/formatter/index.d.ts +0 -7
- package/dist/@legacy/internal/core/formatter/index.js +0 -35
- package/dist/@legacy/internal/core/formatter/style.d.ts +0 -4
- package/dist/@legacy/internal/core/formatter/style.js +0 -15
- package/dist/@legacy/internal/core/formatter/theme.d.ts +0 -5
- package/dist/@legacy/internal/core/formatter/theme.js +0 -44
- package/dist/@legacy/internal/core/formatter/typography.d.ts +0 -5
- package/dist/@legacy/internal/core/formatter/typography.js +0 -12
- package/dist/@legacy/internal/core/minify.d.ts +0 -1
- package/dist/@legacy/internal/core/minify.js +0 -10
- package/dist/@legacy/internal/core/standard-colors.d.ts +0 -75
- package/dist/@legacy/internal/core/standard-colors.js +0 -75
- package/dist/@legacy/internal/core/x11-colors.d.ts +0 -4
- package/dist/@legacy/internal/core/x11-colors.js +0 -151
- package/dist/@legacy/internal/helpers/colors.d.ts +0 -1
- package/dist/@legacy/internal/helpers/colors.js +0 -50
- package/dist/@legacy/internal/helpers/convert.d.ts +0 -1
- package/dist/@legacy/internal/helpers/convert.js +0 -17
- package/dist/@legacy/internal/helpers/deep-merge.d.ts +0 -44
- package/dist/@legacy/internal/helpers/deep-merge.js +0 -80
- package/dist/@legacy/internal/helpers/outside.d.ts +0 -9
- package/dist/@legacy/internal/helpers/outside.js +0 -34
- package/dist/@legacy/internal/helpers/parser.d.ts +0 -10
- package/dist/@legacy/internal/helpers/parser.js +0 -93
- package/dist/@legacy/internal/helpers/scroll.d.ts +0 -1
- package/dist/@legacy/internal/helpers/scroll.js +0 -5
- package/dist/@legacy/internal/plugins/vite.d.ts +0 -8
- package/dist/@legacy/internal/plugins/vite.js +0 -33
- package/dist/@legacy/internal/types/components.d.ts +0 -14
- package/dist/@legacy/internal/types/components.js +0 -1
- package/dist/@legacy/internal/types/configuration.d.ts +0 -63
- package/dist/@legacy/internal/types/configuration.js +0 -1
- package/dist/@legacy/internal/types/index.d.ts +0 -2
- package/dist/@legacy/internal/types/index.js +0 -2
- package/dist/@legacy/stores/breakpoints.d.ts +0 -6
- package/dist/@legacy/stores/breakpoints.js +0 -14
- package/dist/@legacy/stores/devices.d.ts +0 -6
- package/dist/@legacy/stores/devices.js +0 -9
- package/dist/@legacy/stores/index.d.ts +0 -5
- package/dist/@legacy/stores/index.js +0 -5
- package/dist/@legacy/stores/themes.js +0 -4
- package/dist/@legacy/stores/viewport.d.ts +0 -7
- package/dist/@legacy/stores/viewport.js +0 -7
- package/dist/@legacy/styles/animation.css +0 -33
- package/dist/@legacy/styles/keyframes.css +0 -30
- package/dist/@legacy/styles/reset.css +0 -133
- package/dist/@legacy/styles.css +0 -0
- package/dist/@legacy/styles.css.d.ts +0 -4
- package/dist/@legacy/themes.css +0 -0
- package/dist/@legacy/themes.css.d.ts +0 -4
- /package/dist/{@legacy/components/accordion/types.js → @types/actions.js} +0 -0
- /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,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,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,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,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 {};
|