@insymetri/styleguide 0.1.88 → 0.1.89
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/IIBadge/IIBadge.svelte +3 -3
- package/dist/IIButton/IIButton.svelte +24 -18
- package/dist/IICard/IICard.svelte +6 -6
- package/dist/IICheckbox/IICheckbox.svelte +3 -5
- package/dist/IIInput/IIInput.svelte +5 -5
- package/dist/IIModal/IIModal.svelte +4 -4
- package/dist/IISegmentedControl/IISegmentedControl.svelte +7 -13
- package/dist/IISwitch/IISwitch.svelte +4 -9
- package/dist/IITable/IITable.svelte +63 -55
- package/dist/IITooltip/IITooltip.svelte +1 -1
- package/dist/icons.d.ts +19 -0
- package/dist/icons.js +26 -0
- package/dist/style/base.css +31 -8
- package/dist/style/colors.css +21 -0
- package/dist/style/dark.css +17 -0
- package/dist/style/tailwind/colors.d.ts +5 -0
- package/dist/style/tailwind/colors.js +10 -0
- package/dist/style/tailwind/preset.d.ts +83 -30
- package/dist/style/tailwind/preset.js +21 -0
- package/dist/style/tailwind/shadows.d.ts +3 -3
- package/dist/style/tailwind/shadows.js +27 -28
- package/dist/style/tailwind/typography.d.ts +64 -27
- package/dist/style/tailwind/typography.js +64 -38
- package/package.json +1 -1
|
@@ -29,14 +29,14 @@
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
const sizeClasses: Record<string, string> = {
|
|
32
|
-
sm: 'px-
|
|
33
|
-
md: 'px-
|
|
32
|
+
sm: 'px-6 py-2 text-micro normal-case tracking-wide',
|
|
33
|
+
md: 'px-8 py-3 text-tiny tracking-none',
|
|
34
34
|
}
|
|
35
35
|
</script>
|
|
36
36
|
|
|
37
37
|
<span
|
|
38
38
|
class={cn(
|
|
39
|
-
'inline-flex items-center rounded-
|
|
39
|
+
'inline-flex items-center rounded-6 border font-medium whitespace-nowrap',
|
|
40
40
|
sizeClasses[size],
|
|
41
41
|
variantClasses[variant],
|
|
42
42
|
className
|
|
@@ -66,35 +66,42 @@
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
+
// Weight 500 and the 0.5px press are part of the look: at 13px a 400-weight
|
|
70
|
+
// label reads as text rather than a control, and the nudge gives the press a
|
|
71
|
+
// physical beat without a colour change.
|
|
69
72
|
const baseClasses =
|
|
70
|
-
'relative inline-flex items-center justify-center whitespace-nowrap cursor-default transition-
|
|
73
|
+
'relative inline-flex items-center justify-center whitespace-nowrap font-medium cursor-default transition-all duration-base ease-in-out no-underline outline-none active:translate-y-[0.5px] disabled:active:translate-y-0 focus-visible:border-accent focus-visible:ring-3 focus-visible:ring-primary'
|
|
71
74
|
|
|
75
|
+
// Solid fills (primary/danger/success/accent) carry no border and no shadow —
|
|
76
|
+
// the fill is the elevation, and hover dims rather than shifting hue.
|
|
77
|
+
// `secondary` is the workhorse: surface fill, hairline border, tier-1 shadow.
|
|
72
78
|
const variantClasses = {
|
|
73
79
|
primary:
|
|
74
|
-
'bg-button-primary text-button-primary border-0 hover:
|
|
80
|
+
'bg-button-primary text-button-primary border-0 shadow-none hover:opacity-92 disabled:bg-button-primary-disabled disabled:opacity-100',
|
|
75
81
|
secondary:
|
|
76
|
-
'bg-button-secondary text-button-secondary border border-button-secondary hover:
|
|
77
|
-
ghost:
|
|
82
|
+
'bg-button-secondary text-button-secondary border border-button-secondary shadow-card hover:bg-background-alt hover:text-button-secondary-hover disabled:opacity-45 disabled:shadow-none',
|
|
83
|
+
ghost:
|
|
84
|
+
'text-button-ghost border-0 shadow-none hover:bg-button-ghost-hover hover:text-button-ghost-hover disabled:opacity-45',
|
|
78
85
|
danger:
|
|
79
|
-
'bg-button-danger text-button-danger border-0 hover:
|
|
86
|
+
'bg-button-danger text-button-danger border-0 shadow-none hover:opacity-92 disabled:bg-button-danger-disabled disabled:opacity-100',
|
|
80
87
|
success:
|
|
81
|
-
'bg-button-success text-button-success border-0 hover:
|
|
88
|
+
'bg-button-success text-button-success border-0 shadow-none hover:opacity-92 disabled:bg-button-success-disabled disabled:opacity-100',
|
|
82
89
|
accent:
|
|
83
|
-
'bg-button-accent text-button-accent border-0 hover:
|
|
90
|
+
'bg-button-accent text-button-accent border-0 shadow-none hover:opacity-92 disabled:bg-button-accent-disabled disabled:opacity-100',
|
|
84
91
|
dashed:
|
|
85
|
-
'bg-
|
|
92
|
+
'bg-transparent text-secondary border border-dashed border-primary shadow-none hover:border-strong hover:text-body disabled:opacity-45',
|
|
86
93
|
} as const
|
|
87
94
|
|
|
88
95
|
const densityClasses = {
|
|
89
|
-
compact: 'h-
|
|
90
|
-
default: 'h-
|
|
91
|
-
comfortable: 'h-
|
|
92
|
-
mobile: 'h-
|
|
96
|
+
compact: 'h-26 px-8 gap-6 text-tiny leading-[20px] rounded-control',
|
|
97
|
+
default: 'h-30 px-11 gap-6 text-default leading-[24px] rounded-control',
|
|
98
|
+
comfortable: 'h-36 px-14 gap-6 text-default leading-[28px] rounded-control',
|
|
99
|
+
mobile: 'h-44 px-16 gap-8 text-large leading-[36px] rounded-control',
|
|
93
100
|
} as const
|
|
94
101
|
|
|
95
102
|
const fixedSizeClasses = {
|
|
96
|
-
sm: 'h-
|
|
97
|
-
lg: 'h-
|
|
103
|
+
sm: 'h-26 px-8 gap-4 text-tiny leading-[20px] rounded-control',
|
|
104
|
+
lg: 'h-36 px-14 gap-8 text-large leading-[28px] rounded-control',
|
|
98
105
|
} as const
|
|
99
106
|
|
|
100
107
|
const iconSizeClasses = {
|
|
@@ -103,9 +110,7 @@
|
|
|
103
110
|
lg: 'w-16 h-16',
|
|
104
111
|
} as const
|
|
105
112
|
|
|
106
|
-
const resolvedSizeClasses = $derived(
|
|
107
|
-
size === 'md' ? densityClasses[density.value] : fixedSizeClasses[size]
|
|
108
|
-
)
|
|
113
|
+
const resolvedSizeClasses = $derived(size === 'md' ? densityClasses[density.value] : fixedSizeClasses[size])
|
|
109
114
|
</script>
|
|
110
115
|
|
|
111
116
|
{#snippet iconContent()}
|
|
@@ -119,7 +124,8 @@
|
|
|
119
124
|
{/if}
|
|
120
125
|
{#if isLoading}
|
|
121
126
|
<span class="absolute inset-0 flex items-center justify-center pointer-events-none">
|
|
122
|
-
<span class={cn('border-2 border-current border-r-transparent rounded-full animate-spin', iconSizeClasses[size])}
|
|
127
|
+
<span class={cn('border-2 border-current border-r-transparent rounded-full animate-spin', iconSizeClasses[size])}
|
|
128
|
+
></span>
|
|
123
129
|
</span>
|
|
124
130
|
{/if}
|
|
125
131
|
{/snippet}
|
|
@@ -23,22 +23,22 @@
|
|
|
23
23
|
}: Props = $props()
|
|
24
24
|
|
|
25
25
|
const variantClasses = {
|
|
26
|
-
default: 'bg-surface border border-
|
|
27
|
-
outlined: 'bg-transparent border border-
|
|
28
|
-
elevated: 'bg-surface shadow-card',
|
|
26
|
+
default: 'bg-surface-raised border border-subtle',
|
|
27
|
+
outlined: 'bg-transparent border border-primary',
|
|
28
|
+
elevated: 'bg-surface-raised border border-subtle shadow-card-hover',
|
|
29
29
|
} as const
|
|
30
30
|
|
|
31
31
|
const paddingClasses = {
|
|
32
32
|
none: '',
|
|
33
33
|
sm: 'p-12',
|
|
34
|
-
md: 'p-
|
|
35
|
-
lg: 'p-
|
|
34
|
+
md: 'p-18',
|
|
35
|
+
lg: 'p-20',
|
|
36
36
|
} as const
|
|
37
37
|
</script>
|
|
38
38
|
|
|
39
39
|
<div
|
|
40
40
|
class={cn(
|
|
41
|
-
'rounded-
|
|
41
|
+
'rounded-14',
|
|
42
42
|
variantClasses[variant],
|
|
43
43
|
hoverable && 'transition-shadow duration-fast hover:shadow-card-hover cursor-default',
|
|
44
44
|
className
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
>
|
|
45
45
|
<div
|
|
46
46
|
class={cn(
|
|
47
|
-
'flex items-center justify-center border rounded-
|
|
47
|
+
'flex items-center justify-center border-1.5 rounded-5 transition-all duration-fast motion-reduce:transition-none',
|
|
48
48
|
size === 'sm' ? 'w-16 h-16' : 'w-18 h-18',
|
|
49
49
|
checked
|
|
50
|
-
? 'bg-primary border-
|
|
50
|
+
? 'bg-primary border-primary text-on-primary'
|
|
51
51
|
: 'border-strong bg-transparent hover:border-input-border-hover',
|
|
52
52
|
disabled && 'opacity-50'
|
|
53
53
|
)}
|
|
@@ -58,9 +58,7 @@
|
|
|
58
58
|
</div>
|
|
59
59
|
</Checkbox.Root>
|
|
60
60
|
{#if label}
|
|
61
|
-
<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50')}
|
|
62
|
-
>{label}</span
|
|
63
|
-
>
|
|
61
|
+
<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50')}>{label}</span>
|
|
64
62
|
{:else if children}
|
|
65
63
|
<span class={cn('text-small text-body select-none cursor-default', disabled && 'opacity-50')}>
|
|
66
64
|
{@render children()}
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
const density = useDensity()
|
|
38
38
|
|
|
39
39
|
const densityClasses = {
|
|
40
|
-
compact: 'h-
|
|
41
|
-
default: 'h-
|
|
42
|
-
comfortable: 'h-
|
|
43
|
-
mobile: 'h-
|
|
40
|
+
compact: 'h-30 rounded-9 text-default',
|
|
41
|
+
default: 'h-34 rounded-9 text-default',
|
|
42
|
+
comfortable: 'h-38 rounded-9 text-default',
|
|
43
|
+
mobile: 'h-44 rounded-10 text-large',
|
|
44
44
|
} as const
|
|
45
45
|
|
|
46
46
|
const showError = $derived(error || !!errorMessage)
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
showError
|
|
64
64
|
? 'border-input-border-error hover:border-input-border-error focus-within:border-input-border-error focus-within:ring-error'
|
|
65
65
|
: 'hover:not-focus-within:border-button-secondary-hover focus-within:border-accent focus-within:ring-primary',
|
|
66
|
-
|
|
66
|
+
disabled && 'bg-input-bg-disabled'
|
|
67
67
|
)}
|
|
68
68
|
>
|
|
69
69
|
{#if prefix}
|
|
@@ -68,8 +68,8 @@
|
|
|
68
68
|
<Dialog.Overlay
|
|
69
69
|
class={cn(
|
|
70
70
|
'fixed inset-0 z-14 data-[state=open]:animate-modal-overlay-in data-[state=closed]:animate-modal-overlay-out motion-reduce:animate-none',
|
|
71
|
-
overlay === 'dark' && 'bg-
|
|
72
|
-
overlay === 'light' && 'bg-
|
|
71
|
+
overlay === 'dark' && 'bg-overlay backdrop-blur-4',
|
|
72
|
+
overlay === 'light' && 'bg-overlay-light backdrop-blur-2',
|
|
73
73
|
overlay === 'none' && 'pointer-events-none'
|
|
74
74
|
)}
|
|
75
75
|
/>
|
|
@@ -89,13 +89,13 @@
|
|
|
89
89
|
// property — both compose with the open/close slide animation, which owns `transform`
|
|
90
90
|
// (translateY). A transform-based center would be clobbered by the animation and
|
|
91
91
|
// shift the modal for the animation's duration.
|
|
92
|
-
'fixed left-0 right-0 mx-auto bg-surface border border-
|
|
92
|
+
'fixed left-0 right-0 mx-auto bg-surface-raised border border-subtle rounded-16 w-[calc(100%-20px)] flex flex-col z-15 data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out motion-reduce:animate-none focus:outline-none',
|
|
93
93
|
// Vertical: anchored 15% from the top (default) vs. centered. When anchored, height
|
|
94
94
|
// is capped so a tall modal still clears the bottom (15% + 78vh leaves ~7vh below);
|
|
95
95
|
// centered can safely use the full 90vh since -50% keeps it within the viewport.
|
|
96
96
|
centered ? 'top-1/2 [translate:0_-50%] max-h-[90vh]' : 'top-[15%] max-h-[78vh]',
|
|
97
97
|
// Same edge for every overlay: shadow-modal (previously no-overlay used shadow-floating).
|
|
98
|
-
|
|
98
|
+
'shadow-modal',
|
|
99
99
|
size === 'sm' && 'max-w-400',
|
|
100
100
|
size === 'md' && 'max-w-500',
|
|
101
101
|
size === 'lg' && 'max-w-700',
|
|
@@ -16,13 +16,7 @@
|
|
|
16
16
|
focusWithRing?: () => void
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
let {
|
|
20
|
-
items,
|
|
21
|
-
value = $bindable(),
|
|
22
|
-
onValueChange,
|
|
23
|
-
class: className,
|
|
24
|
-
focusWithRing = $bindable(),
|
|
25
|
-
}: Props = $props()
|
|
19
|
+
let {items, value = $bindable(), onValueChange, class: className, focusWithRing = $bindable()}: Props = $props()
|
|
26
20
|
|
|
27
21
|
let rootEl = $state<HTMLDivElement | null>(null)
|
|
28
22
|
let forceRing = $state(false)
|
|
@@ -56,7 +50,7 @@
|
|
|
56
50
|
mobile: 3,
|
|
57
51
|
} as const
|
|
58
52
|
|
|
59
|
-
const activeIndex = $derived(items.findIndex(
|
|
53
|
+
const activeIndex = $derived(items.findIndex(item => item.value === value))
|
|
60
54
|
|
|
61
55
|
function select(v: string) {
|
|
62
56
|
value = v
|
|
@@ -74,7 +68,9 @@
|
|
|
74
68
|
function typeahead(char: string) {
|
|
75
69
|
typeaheadBuffer += char.toLowerCase()
|
|
76
70
|
clearTimeout(typeaheadTimer)
|
|
77
|
-
typeaheadTimer = setTimeout(() => {
|
|
71
|
+
typeaheadTimer = setTimeout(() => {
|
|
72
|
+
typeaheadBuffer = ''
|
|
73
|
+
}, 500)
|
|
78
74
|
|
|
79
75
|
const match = items.find(i => i.label.toLowerCase().startsWith(typeaheadBuffer))
|
|
80
76
|
if (match && match.value !== value) select(match.value)
|
|
@@ -105,10 +101,8 @@
|
|
|
105
101
|
<div
|
|
106
102
|
bind:this={rootEl}
|
|
107
103
|
class={cn(
|
|
108
|
-
'relative inline-grid bg-
|
|
109
|
-
forceRing
|
|
110
|
-
? 'focus:ring-3 focus:ring-primary'
|
|
111
|
-
: 'focus-visible:ring-3 focus-visible:ring-primary',
|
|
104
|
+
'relative inline-grid bg-background-alt border-0 rounded-10 outline-none cursor-default',
|
|
105
|
+
forceRing ? 'focus:ring-3 focus:ring-primary' : 'focus-visible:ring-3 focus-visible:ring-primary',
|
|
112
106
|
densityHeight[density.value],
|
|
113
107
|
className
|
|
114
108
|
)}
|
|
@@ -30,19 +30,14 @@
|
|
|
30
30
|
|
|
31
31
|
<label class={cn('flex items-center gap-12', className)}>
|
|
32
32
|
{#if label}
|
|
33
|
-
<span
|
|
34
|
-
class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50')}
|
|
35
|
-
>{label}</span
|
|
36
|
-
>
|
|
33
|
+
<span class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50')}>{label}</span>
|
|
37
34
|
{:else if children}
|
|
38
|
-
<span
|
|
39
|
-
class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50')}
|
|
40
|
-
>
|
|
35
|
+
<span class={cn('text-small text-secondary select-none cursor-default', disabled && 'opacity-50')}>
|
|
41
36
|
{@render children()}
|
|
42
37
|
</span>
|
|
43
38
|
{/if}
|
|
44
39
|
<Switch.Root
|
|
45
|
-
class="group relative w-
|
|
40
|
+
class="group relative w-32 h-18 bg-strong rounded-full cursor-default transition-all duration-fast shrink-0 appearance-none border-none outline-none focus-visible:ring-3 focus-visible:ring-primary data-[state=checked]:bg-success data-[disabled]:opacity-50 motion-reduce:transition-none"
|
|
46
41
|
{checked}
|
|
47
42
|
onCheckedChange={newChecked => {
|
|
48
43
|
checked = newChecked
|
|
@@ -54,7 +49,7 @@
|
|
|
54
49
|
{...restProps}
|
|
55
50
|
>
|
|
56
51
|
<Switch.Thumb
|
|
57
|
-
class="block w-
|
|
52
|
+
class="block w-14 h-14 bg-white rounded-full transition-all duration-fast translate-x-2 shadow-subtle group-data-[state=checked]:translate-x-16 motion-reduce:transition-none"
|
|
58
53
|
/>
|
|
59
54
|
</Switch.Root>
|
|
60
55
|
</label>
|
|
@@ -70,68 +70,76 @@
|
|
|
70
70
|
}
|
|
71
71
|
</script>
|
|
72
72
|
|
|
73
|
-
<div class={cn('bg-surface border border-
|
|
73
|
+
<div class={cn('bg-surface-raised border border-subtle rounded-12 overflow-x-auto overflow-y-hidden', className)}>
|
|
74
74
|
{#if children}
|
|
75
75
|
<table class="w-full border-collapse">
|
|
76
76
|
{@render children()}
|
|
77
77
|
</table>
|
|
78
78
|
{:else}
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
</td>
|
|
105
|
-
</tr>
|
|
106
|
-
{/if}
|
|
107
|
-
{:else}
|
|
108
|
-
{#each rows as row (rowKey?.(row) ?? row)}
|
|
109
|
-
<tr
|
|
110
|
-
class={cn(
|
|
111
|
-
'border-b border-primary last:border-b-0',
|
|
112
|
-
interactive && 'cursor-pointer hover:bg-background',
|
|
113
|
-
rowClass?.(row)
|
|
114
|
-
)}
|
|
115
|
-
style="transition: background-color var(--transition-fast)"
|
|
116
|
-
onclick={onRowClick ? e => onRowClick(row, e) : undefined}
|
|
117
|
-
onauxclick={onRowClick ? e => onRowClick(row, e) : undefined}
|
|
118
|
-
>
|
|
119
|
-
{#each columns as col (col.key)}
|
|
120
|
-
<td class={cn('px-16 py-8 text-body', cellText, alignClass[col.align ?? 'left'], col.width, cellClass(col, row))}>
|
|
121
|
-
{@render col.cell(row)}
|
|
122
|
-
</td>
|
|
123
|
-
{/each}
|
|
124
|
-
</tr>
|
|
125
|
-
{#if expandedRow && isExpanded?.(row)}
|
|
126
|
-
<tr class="border-b border-primary last:border-b-0 bg-background">
|
|
127
|
-
<td colspan={columns.length} class="px-16 py-12">
|
|
128
|
-
{@render expandedRow(row)}
|
|
79
|
+
<table class="w-full border-collapse">
|
|
80
|
+
<thead class={cn('bg-background border-b border-primary', stickyHeader && 'sticky top-0 z-1')}>
|
|
81
|
+
<tr>
|
|
82
|
+
{#each columns as col (col.key)}
|
|
83
|
+
<th
|
|
84
|
+
class={cn(
|
|
85
|
+
'px-14 py-9 text-tiny-emphasis text-tertiary uppercase tracking-wide',
|
|
86
|
+
alignClass[col.align ?? 'left'],
|
|
87
|
+
col.width,
|
|
88
|
+
col.headerClass
|
|
89
|
+
)}
|
|
90
|
+
>
|
|
91
|
+
{col.header}
|
|
92
|
+
</th>
|
|
93
|
+
{/each}
|
|
94
|
+
</tr>
|
|
95
|
+
</thead>
|
|
96
|
+
<tbody>
|
|
97
|
+
{#if loading}
|
|
98
|
+
<IITableSkeleton rows={loadingRows} columns={columns.map(() => 'text')} />
|
|
99
|
+
{:else if rows.length === 0}
|
|
100
|
+
{#if empty}
|
|
101
|
+
<tr>
|
|
102
|
+
<td colspan={columns.length} class="px-16 py-32 text-center">
|
|
103
|
+
{@render empty()}
|
|
129
104
|
</td>
|
|
130
105
|
</tr>
|
|
131
106
|
{/if}
|
|
132
|
-
{
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
107
|
+
{:else}
|
|
108
|
+
{#each rows as row (rowKey?.(row) ?? row)}
|
|
109
|
+
<tr
|
|
110
|
+
class={cn(
|
|
111
|
+
'border-b border-primary last:border-b-0',
|
|
112
|
+
interactive && 'cursor-pointer hover:bg-background',
|
|
113
|
+
rowClass?.(row)
|
|
114
|
+
)}
|
|
115
|
+
style="transition: background-color var(--transition-fast)"
|
|
116
|
+
onclick={onRowClick ? e => onRowClick(row, e) : undefined}
|
|
117
|
+
onauxclick={onRowClick ? e => onRowClick(row, e) : undefined}
|
|
118
|
+
>
|
|
119
|
+
{#each columns as col (col.key)}
|
|
120
|
+
<td
|
|
121
|
+
class={cn(
|
|
122
|
+
'px-14 py-10 text-body',
|
|
123
|
+
cellText,
|
|
124
|
+
alignClass[col.align ?? 'left'],
|
|
125
|
+
col.width,
|
|
126
|
+
cellClass(col, row)
|
|
127
|
+
)}
|
|
128
|
+
>
|
|
129
|
+
{@render col.cell(row)}
|
|
130
|
+
</td>
|
|
131
|
+
{/each}
|
|
132
|
+
</tr>
|
|
133
|
+
{#if expandedRow && isExpanded?.(row)}
|
|
134
|
+
<tr class="border-b border-primary last:border-b-0 bg-background">
|
|
135
|
+
<td colspan={columns.length} class="px-16 py-12">
|
|
136
|
+
{@render expandedRow(row)}
|
|
137
|
+
</td>
|
|
138
|
+
</tr>
|
|
139
|
+
{/if}
|
|
140
|
+
{/each}
|
|
141
|
+
{/if}
|
|
142
|
+
</tbody>
|
|
143
|
+
</table>
|
|
136
144
|
{/if}
|
|
137
145
|
</div>
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
<B.Content
|
|
39
39
|
{side}
|
|
40
40
|
sideOffset={6}
|
|
41
|
-
class="z-19 rounded-6 bg-
|
|
41
|
+
class="z-19 rounded-6 bg-dark text-inverse text-tiny leading-tight font-medium px-8 py-4 shadow-dropdown data-[state=delayed-open]:animate-fade-in data-[state=instant-open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none"
|
|
42
42
|
>
|
|
43
43
|
{text}
|
|
44
44
|
</B.Content>
|
package/dist/icons.d.ts
CHANGED
|
@@ -95,5 +95,24 @@ export declare const icons: {
|
|
|
95
95
|
readonly moon: "<path fill=\"currentColor\" d=\"M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z\"/>";
|
|
96
96
|
readonly coffee: "<path fill=\"currentColor\" d=\"M80,56V24a8,8,0,0,1,16,0V56a8,8,0,0,1-16,0Zm40,8a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,120,64Zm32,0a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,152,64Zm96,56v8a40,40,0,0,1-37.51,39.91,96.59,96.59,0,0,1-27,40.09H208a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H56.54A96.3,96.3,0,0,1,24,136V88a8,8,0,0,1,8-8H208A40,40,0,0,1,248,120ZM200,96H40v40a80.27,80.27,0,0,0,45.12,72h69.76A80.27,80.27,0,0,0,200,136Zm32,24a24,24,0,0,0-16-22.62V136a95.78,95.78,0,0,1-1.2,15A24,24,0,0,0,232,128Z\"/>";
|
|
97
97
|
readonly paperclip: "<path fill=\"currentColor\" d=\"M209.66,122.34a8,8,0,0,1,0,11.32l-82.05,82a56,56,0,0,1-79.2-79.21L147.67,35.73a40,40,0,1,1,56.61,56.55L105,193A24,24,0,1,1,71,159L154.3,74.38A8,8,0,1,1,165.7,85.6L82.39,170.31a8,8,0,1,0,11.27,11.36L192.93,81A24,24,0,1,0,159,47L59.76,147.68a40,40,0,1,0,56.53,56.62l82.06-82A8,8,0,0,1,209.66,122.34Z\"/>";
|
|
98
|
+
readonly 'house-bold': "<path fill=\"currentColor\" d=\"m222.14 105.85l-80-80a20 20 0 0 0-28.28 0l-80 80A19.86 19.86 0 0 0 28 120v96a12 12 0 0 0 12 12h64a12 12 0 0 0 12-12v-52h24v52a12 12 0 0 0 12 12h64a12 12 0 0 0 12-12v-96a19.86 19.86 0 0 0-5.86-14.15M204 204h-40v-52a12 12 0 0 0-12-12h-48a12 12 0 0 0-12 12v52H52v-82.35l76-76l76 76Z\"/>";
|
|
99
|
+
readonly 'users-bold': "<path fill=\"currentColor\" d=\"M125.18 156.94a64 64 0 1 0-82.36 0a100.23 100.23 0 0 0-39.49 32a12 12 0 0 0 19.35 14.2a76 76 0 0 1 122.64 0a12 12 0 0 0 19.36-14.2a100.33 100.33 0 0 0-39.5-32M44 108a40 40 0 1 1 40 40a40 40 0 0 1-40-40m206.1 97.67a12 12 0 0 1-16.78-2.57A76.31 76.31 0 0 0 172 172a12 12 0 0 1 0-24a40 40 0 1 0-10.3-78.67a12 12 0 1 1-6.16-23.19a64 64 0 0 1 57.64 110.8a100.23 100.23 0 0 1 39.49 32a12 12 0 0 1-2.57 16.73\"/>";
|
|
100
|
+
readonly 'users-four-bold': "<path fill=\"currentColor\" d=\"M24.79 121.59a12 12 0 0 0 16.81-2.38a48 48 0 0 1 76.81 0a12 12 0 0 0 16.8 2.39a12.2 12.2 0 0 0 2.38-2.39a48 48 0 0 1 76.81 0a12 12 0 1 0 19.19-14.41a72 72 0 0 0-25.3-21.22a40 40 0 1 0-64.58 0A71 71 0 0 0 128 94.31a71 71 0 0 0-15.71-10.74a40 40 0 1 0-64.58 0a72 72 0 0 0-25.3 21.22a12 12 0 0 0 2.38 16.8M176 44a16 16 0 1 1-16 16a16 16 0 0 1 16-16m-96 0a16 16 0 1 1-16 16a16 16 0 0 1 16-16m128.29 151.57a40 40 0 1 0-64.58 0A71.3 71.3 0 0 0 128 206.3a71.3 71.3 0 0 0-15.71-10.73a40 40 0 1 0-64.58 0a72 72 0 0 0-25.3 21.22a12 12 0 0 0 19.19 14.42a48 48 0 0 1 76.81 0a12 12 0 0 0 16.8 2.39a12.2 12.2 0 0 0 2.38-2.39a48 48 0 0 1 76.81 0a12 12 0 1 0 19.19-14.41a71.9 71.9 0 0 0-25.3-21.23M80 156a16 16 0 1 1-16 16a16 16 0 0 1 16-16m96 0a16 16 0 1 1-16 16a16 16 0 0 1 16-16\"/>";
|
|
101
|
+
readonly 'phone-bold': "<path fill=\"currentColor\" d=\"m224 154.8l-47.09-21.11l-.18-.08a19.94 19.94 0 0 0-19 1.75a13 13 0 0 0-1.12.84l-22.31 19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a12 12 0 0 0 .85-1.15a20 20 0 0 0 1.66-18.83a1.4 1.4 0 0 1-.08-.18L101.2 32a20.06 20.06 0 0 0-20.78-11.85A60.27 60.27 0 0 0 28 80c0 81.61 66.39 148 148 148a60.27 60.27 0 0 0 59.85-52.42A20.06 20.06 0 0 0 224 154.8M176 204A124.15 124.15 0 0 1 52 80a36.29 36.29 0 0 1 28.48-35.54l18.82 42l-19.16 22.82a12 12 0 0 0-.86 1.16A20 20 0 0 0 78 130.08c9.42 19.28 28.83 38.56 48.31 48a20 20 0 0 0 19.69-1.45a12 12 0 0 0 1.11-.85l22.43-19.07l42 18.81A36.29 36.29 0 0 1 176 204\"/>";
|
|
102
|
+
readonly 'check-circle-bold': "<path fill=\"currentColor\" d=\"M176.49 95.51a12 12 0 0 1 0 17l-56 56a12 12 0 0 1-17 0l-24-24a12 12 0 1 1 17-17L112 143l47.51-47.52a12 12 0 0 1 16.98.03M236 128A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84a84.09 84.09 0 0 0 84-84\"/>";
|
|
103
|
+
readonly 'address-book-bold': "<path fill=\"currentColor\" d=\"M208 20H64a20 20 0 0 0-20 20v20H32a12 12 0 0 0 0 24h12v32H32a12 12 0 0 0 0 24h12v32H32a12 12 0 0 0 0 24h12v20a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V40a20 20 0 0 0-20-20m-4 192H68V44h136Zm-103.2-40.63a48 48 0 0 1 70.4 0a12 12 0 0 0 17.6-16.32a72 72 0 0 0-19.21-14.68a44 44 0 1 0-67.19 0a72.1 72.1 0 0 0-19.2 14.68a12 12 0 0 0 17.6 16.32M116 112a20 20 0 1 1 20 20a20 20 0 0 1-20-20\"/>";
|
|
104
|
+
readonly 'file-text-bold': "<path fill=\"currentColor\" d=\"m216.49 79.52l-56-56A12 12 0 0 0 152 20H56a20 20 0 0 0-20 20v176a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V88a12 12 0 0 0-3.51-8.48M160 57l23 23h-23ZM60 212V44h76v48a12 12 0 0 0 12 12h48v108Zm112-80a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m0 40a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12\"/>";
|
|
105
|
+
readonly 'currency-dollar-bold': "<path fill=\"currentColor\" d=\"M152 116h-12V60h4a28 28 0 0 1 28 28a12 12 0 0 0 24 0a52.06 52.06 0 0 0-52-52h-4V24a12 12 0 0 0-24 0v12h-4a52 52 0 0 0 0 104h4v56h-12a28 28 0 0 1-28-28a12 12 0 0 0-24 0a52.06 52.06 0 0 0 52 52h12v12a12 12 0 0 0 24 0v-12h12a52 52 0 0 0 0-104m-40 0a28 28 0 0 1 0-56h4v56Zm40 80h-12v-56h12a28 28 0 0 1 0 56\"/>";
|
|
106
|
+
readonly 'clipboard-text-bold': "<path fill=\"currentColor\" d=\"M172 164a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m-12-52H96a12 12 0 0 0 0 24h64a12 12 0 0 0 0-24m60-64v168a20 20 0 0 1-20 20H56a20 20 0 0 1-20-20V48a20 20 0 0 1 20-20h34.53a51.88 51.88 0 0 1 74.94 0H200a20 20 0 0 1 20 20M100.29 60h55.42a28 28 0 0 0-55.42 0M196 52h-17.41A52 52 0 0 1 180 64v8a12 12 0 0 1-12 12H88a12 12 0 0 1-12-12v-8a52 52 0 0 1 1.41-12H60v160h136Z\"/>";
|
|
107
|
+
readonly 'article-bold': "<path fill=\"currentColor\" d=\"M216 36H40a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h176a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20m-4 160H44V60h168ZM68 92a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12m0 36a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12m0 36a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12\"/>";
|
|
108
|
+
readonly 'list-bullets-bold': "<path fill=\"currentColor\" d=\"M76 64a12 12 0 0 1 12-12h128a12 12 0 0 1 0 24H88a12 12 0 0 1-12-12m140 52H88a12 12 0 0 0 0 24h128a12 12 0 0 0 0-24m0 64H88a12 12 0 0 0 0 24h128a12 12 0 0 0 0-24M44 112a16 16 0 1 0 16 16a16 16 0 0 0-16-16m0-64a16 16 0 1 0 16 16a16 16 0 0 0-16-16m0 128a16 16 0 1 0 16 16a16 16 0 0 0-16-16\"/>";
|
|
109
|
+
readonly 'chart-line-up-bold': "<path fill=\"currentColor\" d=\"M236 208a12 12 0 0 1-12 12H32a12 12 0 0 1-12-12V48a12 12 0 0 1 24 0v99l43.51-43.52a12 12 0 0 1 17 0L128 127l43-43h-11a12 12 0 0 1 0-24h40a12 12 0 0 1 12 12v40a12 12 0 0 1-24 0v-11l-51.51 51.52a12 12 0 0 1-17 0L96 129l-52 52v15h180a12 12 0 0 1 12 12\"/>";
|
|
110
|
+
readonly 'plus-bold': "<path fill=\"currentColor\" d=\"M228 128a12 12 0 0 1-12 12h-76v76a12 12 0 0 1-24 0v-76H40a12 12 0 0 1 0-24h76V40a12 12 0 0 1 24 0v76h76a12 12 0 0 1 12 12\"/>";
|
|
111
|
+
readonly 'caret-double-right-bold': "<path fill=\"currentColor\" d=\"m144.49 136.49l-80 80a12 12 0 0 1-17-17L119 128L47.51 56.49a12 12 0 0 1 17-17l80 80a12 12 0 0 1-.02 17m80-17l-80-80a12 12 0 1 0-17 17L199 128l-71.52 71.51a12 12 0 0 0 17 17l80-80a12 12 0 0 0 .01-17Z\"/>";
|
|
112
|
+
readonly 'caret-down-bold': "<path fill=\"currentColor\" d=\"m216.49 104.49l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z\"/>";
|
|
113
|
+
readonly 'gear-bold': "<path fill=\"currentColor\" d=\"M128 76a52 52 0 1 0 52 52a52.06 52.06 0 0 0-52-52m0 80a28 28 0 1 1 28-28a28 28 0 0 1-28 28m92-27.21v-1.58l14-17.51a12 12 0 0 0 2.23-10.59A111.8 111.8 0 0 0 225 71.89a12 12 0 0 0-9.11-5.89l-22.28-2.5l-1.11-1.11L190 40.1a12 12 0 0 0-5.89-9.1a111.7 111.7 0 0 0-27.23-11.27A12 12 0 0 0 146.3 22l-17.51 14h-1.58L109.7 22a12 12 0 0 0-10.59-2.23a111.8 111.8 0 0 0-27.22 11.28A12 12 0 0 0 66 40.11l-2.5 22.28l-1.11 1.11L40.1 66a12 12 0 0 0-9.1 5.89a111.7 111.7 0 0 0-11.23 27.23A12 12 0 0 0 22 109.7l14 17.51v1.58L22 146.3a12 12 0 0 0-2.23 10.59a111.8 111.8 0 0 0 11.29 27.22a12 12 0 0 0 9.05 5.89l22.28 2.48l1.11 1.11L66 215.9a12 12 0 0 0 5.89 9.1a111.7 111.7 0 0 0 27.23 11.27A12 12 0 0 0 109.7 234l17.51-14h1.58l17.51 14a12 12 0 0 0 10.59 2.23A111.8 111.8 0 0 0 184.11 225a12 12 0 0 0 5.91-9.06l2.48-22.28l1.11-1.11L215.9 190a12 12 0 0 0 9.06-5.91a111.7 111.7 0 0 0 11.27-27.23A12 12 0 0 0 234 146.3Zm-24.12-4.89a70 70 0 0 1 0 8.2a12 12 0 0 0 2.61 8.22l12.84 16.05a86.5 86.5 0 0 1-4.33 10.49l-20.43 2.27a12 12 0 0 0-7.65 4a69 69 0 0 1-5.8 5.8a12 12 0 0 0-4 7.65L166.86 207a86.5 86.5 0 0 1-10.49 4.35l-16.05-12.85a12 12 0 0 0-7.5-2.62h-.72a70 70 0 0 1-8.2 0a12.06 12.06 0 0 0-8.22 2.6l-16.05 12.85A86.5 86.5 0 0 1 89.14 207l-2.27-20.43a12 12 0 0 0-4-7.65a69 69 0 0 1-5.8-5.8a12 12 0 0 0-7.65-4L49 166.86a86.5 86.5 0 0 1-4.35-10.49l12.84-16.05a12 12 0 0 0 2.61-8.22a70 70 0 0 1 0-8.2a12 12 0 0 0-2.61-8.22L44.67 99.63A86.5 86.5 0 0 1 49 89.14l20.43-2.27a12 12 0 0 0 7.65-4a69 69 0 0 1 5.8-5.8a12 12 0 0 0 4-7.65L89.14 49a86.5 86.5 0 0 1 10.49-4.35l16.05 12.85a12.06 12.06 0 0 0 8.22 2.6a70 70 0 0 1 8.2 0a12 12 0 0 0 8.22-2.6l16.05-12.85A86.5 86.5 0 0 1 166.86 49l2.27 20.43a12 12 0 0 0 4 7.65a69 69 0 0 1 5.8 5.8a12 12 0 0 0 7.65 4L207 89.14a86.5 86.5 0 0 1 4.35 10.49l-12.84 16.05a12 12 0 0 0-2.63 8.22\"/>";
|
|
114
|
+
readonly 'sign-out-bold': "<path fill=\"currentColor\" d=\"M124 216a12 12 0 0 1-12 12H48a12 12 0 0 1-12-12V40a12 12 0 0 1 12-12h64a12 12 0 0 1 0 24H60v152h52a12 12 0 0 1 12 12m108.49-96.49l-40-40a12 12 0 0 0-17 17L195 116h-83a12 12 0 0 0 0 24h83l-19.52 19.51a12 12 0 0 0 17 17l40-40a12 12 0 0 0 .01-17\"/>";
|
|
115
|
+
readonly 'user-bold': "<path fill=\"currentColor\" d=\"M234.38 210a123.36 123.36 0 0 0-60.78-53.23a76 76 0 1 0-91.2 0A123.36 123.36 0 0 0 21.62 210a12 12 0 1 0 20.77 12c18.12-31.32 50.12-50 85.61-50s67.49 18.69 85.61 50a12 12 0 0 0 20.77-12M76 96a52 52 0 1 1 52 52a52.06 52.06 0 0 1-52-52\"/>";
|
|
116
|
+
readonly 'calendar-blank-bold': "<path fill=\"currentColor\" d=\"M208 28h-20v-4a12 12 0 0 0-24 0v4H92v-4a12 12 0 0 0-24 0v4H48a20 20 0 0 0-20 20v160a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V48a20 20 0 0 0-20-20M68 52a12 12 0 0 0 24 0h72a12 12 0 0 0 24 0h16v24H52V52ZM52 204V100h152v104Z\"/>";
|
|
98
117
|
};
|
|
99
118
|
export type IconName = keyof typeof icons;
|
package/dist/icons.js
CHANGED
|
@@ -109,4 +109,30 @@ export const icons = {
|
|
|
109
109
|
moon: `<path fill="currentColor" d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/>`,
|
|
110
110
|
coffee: `<path fill="currentColor" d="M80,56V24a8,8,0,0,1,16,0V56a8,8,0,0,1-16,0Zm40,8a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,120,64Zm32,0a8,8,0,0,0,8-8V24a8,8,0,0,0-16,0V56A8,8,0,0,0,152,64Zm96,56v8a40,40,0,0,1-37.51,39.91,96.59,96.59,0,0,1-27,40.09H208a8,8,0,0,1,0,16H32a8,8,0,0,1,0-16H56.54A96.3,96.3,0,0,1,24,136V88a8,8,0,0,1,8-8H208A40,40,0,0,1,248,120ZM200,96H40v40a80.27,80.27,0,0,0,45.12,72h69.76A80.27,80.27,0,0,0,200,136Zm32,24a24,24,0,0,0-16-22.62V136a95.78,95.78,0,0,1-1.2,15A24,24,0,0,0,232,128Z"/>`,
|
|
111
111
|
paperclip: `<path fill="currentColor" d="M209.66,122.34a8,8,0,0,1,0,11.32l-82.05,82a56,56,0,0,1-79.2-79.21L147.67,35.73a40,40,0,1,1,56.61,56.55L105,193A24,24,0,1,1,71,159L154.3,74.38A8,8,0,1,1,165.7,85.6L82.39,170.31a8,8,0,1,0,11.27,11.36L192.93,81A24,24,0,1,0,159,47L59.76,147.68a40,40,0,1,0,56.53,56.62l82.06-82A8,8,0,0,1,209.66,122.34Z"/>`,
|
|
112
|
+
// ===== Phosphor BOLD weight =====
|
|
113
|
+
// Heavier duplicates of the Regular entries above, used by the collapsed left
|
|
114
|
+
// rail (src/lib/components/Sidebar) so its tiles read at the artifact's weight.
|
|
115
|
+
// Path data is Phosphor Bold 2.1.1 (MIT), copied verbatim from
|
|
116
|
+
// node_modules/@iconify/json/json/ph.json — the same source the Regular set above
|
|
117
|
+
// came from. Regenerate, never hand-edit. Adding a `-bold` key here is additive:
|
|
118
|
+
// it widens IconName and leaves every existing entry untouched.
|
|
119
|
+
'house-bold': `<path fill="currentColor" d="m222.14 105.85l-80-80a20 20 0 0 0-28.28 0l-80 80A19.86 19.86 0 0 0 28 120v96a12 12 0 0 0 12 12h64a12 12 0 0 0 12-12v-52h24v52a12 12 0 0 0 12 12h64a12 12 0 0 0 12-12v-96a19.86 19.86 0 0 0-5.86-14.15M204 204h-40v-52a12 12 0 0 0-12-12h-48a12 12 0 0 0-12 12v52H52v-82.35l76-76l76 76Z"/>`,
|
|
120
|
+
'users-bold': `<path fill="currentColor" d="M125.18 156.94a64 64 0 1 0-82.36 0a100.23 100.23 0 0 0-39.49 32a12 12 0 0 0 19.35 14.2a76 76 0 0 1 122.64 0a12 12 0 0 0 19.36-14.2a100.33 100.33 0 0 0-39.5-32M44 108a40 40 0 1 1 40 40a40 40 0 0 1-40-40m206.1 97.67a12 12 0 0 1-16.78-2.57A76.31 76.31 0 0 0 172 172a12 12 0 0 1 0-24a40 40 0 1 0-10.3-78.67a12 12 0 1 1-6.16-23.19a64 64 0 0 1 57.64 110.8a100.23 100.23 0 0 1 39.49 32a12 12 0 0 1-2.57 16.73"/>`,
|
|
121
|
+
'users-four-bold': `<path fill="currentColor" d="M24.79 121.59a12 12 0 0 0 16.81-2.38a48 48 0 0 1 76.81 0a12 12 0 0 0 16.8 2.39a12.2 12.2 0 0 0 2.38-2.39a48 48 0 0 1 76.81 0a12 12 0 1 0 19.19-14.41a72 72 0 0 0-25.3-21.22a40 40 0 1 0-64.58 0A71 71 0 0 0 128 94.31a71 71 0 0 0-15.71-10.74a40 40 0 1 0-64.58 0a72 72 0 0 0-25.3 21.22a12 12 0 0 0 2.38 16.8M176 44a16 16 0 1 1-16 16a16 16 0 0 1 16-16m-96 0a16 16 0 1 1-16 16a16 16 0 0 1 16-16m128.29 151.57a40 40 0 1 0-64.58 0A71.3 71.3 0 0 0 128 206.3a71.3 71.3 0 0 0-15.71-10.73a40 40 0 1 0-64.58 0a72 72 0 0 0-25.3 21.22a12 12 0 0 0 19.19 14.42a48 48 0 0 1 76.81 0a12 12 0 0 0 16.8 2.39a12.2 12.2 0 0 0 2.38-2.39a48 48 0 0 1 76.81 0a12 12 0 1 0 19.19-14.41a71.9 71.9 0 0 0-25.3-21.23M80 156a16 16 0 1 1-16 16a16 16 0 0 1 16-16m96 0a16 16 0 1 1-16 16a16 16 0 0 1 16-16"/>`,
|
|
122
|
+
'phone-bold': `<path fill="currentColor" d="m224 154.8l-47.09-21.11l-.18-.08a19.94 19.94 0 0 0-19 1.75a13 13 0 0 0-1.12.84l-22.31 19c-13-7.05-26.43-20.37-33.49-33.21l19.06-22.66a12 12 0 0 0 .85-1.15a20 20 0 0 0 1.66-18.83a1.4 1.4 0 0 1-.08-.18L101.2 32a20.06 20.06 0 0 0-20.78-11.85A60.27 60.27 0 0 0 28 80c0 81.61 66.39 148 148 148a60.27 60.27 0 0 0 59.85-52.42A20.06 20.06 0 0 0 224 154.8M176 204A124.15 124.15 0 0 1 52 80a36.29 36.29 0 0 1 28.48-35.54l18.82 42l-19.16 22.82a12 12 0 0 0-.86 1.16A20 20 0 0 0 78 130.08c9.42 19.28 28.83 38.56 48.31 48a20 20 0 0 0 19.69-1.45a12 12 0 0 0 1.11-.85l22.43-19.07l42 18.81A36.29 36.29 0 0 1 176 204"/>`,
|
|
123
|
+
'check-circle-bold': `<path fill="currentColor" d="M176.49 95.51a12 12 0 0 1 0 17l-56 56a12 12 0 0 1-17 0l-24-24a12 12 0 1 1 17-17L112 143l47.51-47.52a12 12 0 0 1 16.98.03M236 128A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84a84.09 84.09 0 0 0 84-84"/>`,
|
|
124
|
+
'address-book-bold': `<path fill="currentColor" d="M208 20H64a20 20 0 0 0-20 20v20H32a12 12 0 0 0 0 24h12v32H32a12 12 0 0 0 0 24h12v32H32a12 12 0 0 0 0 24h12v20a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V40a20 20 0 0 0-20-20m-4 192H68V44h136Zm-103.2-40.63a48 48 0 0 1 70.4 0a12 12 0 0 0 17.6-16.32a72 72 0 0 0-19.21-14.68a44 44 0 1 0-67.19 0a72.1 72.1 0 0 0-19.2 14.68a12 12 0 0 0 17.6 16.32M116 112a20 20 0 1 1 20 20a20 20 0 0 1-20-20"/>`,
|
|
125
|
+
'file-text-bold': `<path fill="currentColor" d="m216.49 79.52l-56-56A12 12 0 0 0 152 20H56a20 20 0 0 0-20 20v176a20 20 0 0 0 20 20h144a20 20 0 0 0 20-20V88a12 12 0 0 0-3.51-8.48M160 57l23 23h-23ZM60 212V44h76v48a12 12 0 0 0 12 12h48v108Zm112-80a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m0 40a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12"/>`,
|
|
126
|
+
'currency-dollar-bold': `<path fill="currentColor" d="M152 116h-12V60h4a28 28 0 0 1 28 28a12 12 0 0 0 24 0a52.06 52.06 0 0 0-52-52h-4V24a12 12 0 0 0-24 0v12h-4a52 52 0 0 0 0 104h4v56h-12a28 28 0 0 1-28-28a12 12 0 0 0-24 0a52.06 52.06 0 0 0 52 52h12v12a12 12 0 0 0 24 0v-12h12a52 52 0 0 0 0-104m-40 0a28 28 0 0 1 0-56h4v56Zm40 80h-12v-56h12a28 28 0 0 1 0 56"/>`,
|
|
127
|
+
'clipboard-text-bold': `<path fill="currentColor" d="M172 164a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m-12-52H96a12 12 0 0 0 0 24h64a12 12 0 0 0 0-24m60-64v168a20 20 0 0 1-20 20H56a20 20 0 0 1-20-20V48a20 20 0 0 1 20-20h34.53a51.88 51.88 0 0 1 74.94 0H200a20 20 0 0 1 20 20M100.29 60h55.42a28 28 0 0 0-55.42 0M196 52h-17.41A52 52 0 0 1 180 64v8a12 12 0 0 1-12 12H88a12 12 0 0 1-12-12v-8a52 52 0 0 1 1.41-12H60v160h136Z"/>`,
|
|
128
|
+
'article-bold': `<path fill="currentColor" d="M216 36H40a20 20 0 0 0-20 20v144a20 20 0 0 0 20 20h176a20 20 0 0 0 20-20V56a20 20 0 0 0-20-20m-4 160H44V60h168ZM68 92a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12m0 36a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12m0 36a12 12 0 0 1 12-12h96a12 12 0 0 1 0 24H80a12 12 0 0 1-12-12"/>`,
|
|
129
|
+
'list-bullets-bold': `<path fill="currentColor" d="M76 64a12 12 0 0 1 12-12h128a12 12 0 0 1 0 24H88a12 12 0 0 1-12-12m140 52H88a12 12 0 0 0 0 24h128a12 12 0 0 0 0-24m0 64H88a12 12 0 0 0 0 24h128a12 12 0 0 0 0-24M44 112a16 16 0 1 0 16 16a16 16 0 0 0-16-16m0-64a16 16 0 1 0 16 16a16 16 0 0 0-16-16m0 128a16 16 0 1 0 16 16a16 16 0 0 0-16-16"/>`,
|
|
130
|
+
'chart-line-up-bold': `<path fill="currentColor" d="M236 208a12 12 0 0 1-12 12H32a12 12 0 0 1-12-12V48a12 12 0 0 1 24 0v99l43.51-43.52a12 12 0 0 1 17 0L128 127l43-43h-11a12 12 0 0 1 0-24h40a12 12 0 0 1 12 12v40a12 12 0 0 1-24 0v-11l-51.51 51.52a12 12 0 0 1-17 0L96 129l-52 52v15h180a12 12 0 0 1 12 12"/>`,
|
|
131
|
+
'plus-bold': `<path fill="currentColor" d="M228 128a12 12 0 0 1-12 12h-76v76a12 12 0 0 1-24 0v-76H40a12 12 0 0 1 0-24h76V40a12 12 0 0 1 24 0v76h76a12 12 0 0 1 12 12"/>`,
|
|
132
|
+
'caret-double-right-bold': `<path fill="currentColor" d="m144.49 136.49l-80 80a12 12 0 0 1-17-17L119 128L47.51 56.49a12 12 0 0 1 17-17l80 80a12 12 0 0 1-.02 17m80-17l-80-80a12 12 0 1 0-17 17L199 128l-71.52 71.51a12 12 0 0 0 17 17l80-80a12 12 0 0 0 .01-17Z"/>`,
|
|
133
|
+
'caret-down-bold': `<path fill="currentColor" d="m216.49 104.49l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z"/>`,
|
|
134
|
+
'gear-bold': `<path fill="currentColor" d="M128 76a52 52 0 1 0 52 52a52.06 52.06 0 0 0-52-52m0 80a28 28 0 1 1 28-28a28 28 0 0 1-28 28m92-27.21v-1.58l14-17.51a12 12 0 0 0 2.23-10.59A111.8 111.8 0 0 0 225 71.89a12 12 0 0 0-9.11-5.89l-22.28-2.5l-1.11-1.11L190 40.1a12 12 0 0 0-5.89-9.1a111.7 111.7 0 0 0-27.23-11.27A12 12 0 0 0 146.3 22l-17.51 14h-1.58L109.7 22a12 12 0 0 0-10.59-2.23a111.8 111.8 0 0 0-27.22 11.28A12 12 0 0 0 66 40.11l-2.5 22.28l-1.11 1.11L40.1 66a12 12 0 0 0-9.1 5.89a111.7 111.7 0 0 0-11.23 27.23A12 12 0 0 0 22 109.7l14 17.51v1.58L22 146.3a12 12 0 0 0-2.23 10.59a111.8 111.8 0 0 0 11.29 27.22a12 12 0 0 0 9.05 5.89l22.28 2.48l1.11 1.11L66 215.9a12 12 0 0 0 5.89 9.1a111.7 111.7 0 0 0 27.23 11.27A12 12 0 0 0 109.7 234l17.51-14h1.58l17.51 14a12 12 0 0 0 10.59 2.23A111.8 111.8 0 0 0 184.11 225a12 12 0 0 0 5.91-9.06l2.48-22.28l1.11-1.11L215.9 190a12 12 0 0 0 9.06-5.91a111.7 111.7 0 0 0 11.27-27.23A12 12 0 0 0 234 146.3Zm-24.12-4.89a70 70 0 0 1 0 8.2a12 12 0 0 0 2.61 8.22l12.84 16.05a86.5 86.5 0 0 1-4.33 10.49l-20.43 2.27a12 12 0 0 0-7.65 4a69 69 0 0 1-5.8 5.8a12 12 0 0 0-4 7.65L166.86 207a86.5 86.5 0 0 1-10.49 4.35l-16.05-12.85a12 12 0 0 0-7.5-2.62h-.72a70 70 0 0 1-8.2 0a12.06 12.06 0 0 0-8.22 2.6l-16.05 12.85A86.5 86.5 0 0 1 89.14 207l-2.27-20.43a12 12 0 0 0-4-7.65a69 69 0 0 1-5.8-5.8a12 12 0 0 0-7.65-4L49 166.86a86.5 86.5 0 0 1-4.35-10.49l12.84-16.05a12 12 0 0 0 2.61-8.22a70 70 0 0 1 0-8.2a12 12 0 0 0-2.61-8.22L44.67 99.63A86.5 86.5 0 0 1 49 89.14l20.43-2.27a12 12 0 0 0 7.65-4a69 69 0 0 1 5.8-5.8a12 12 0 0 0 4-7.65L89.14 49a86.5 86.5 0 0 1 10.49-4.35l16.05 12.85a12.06 12.06 0 0 0 8.22 2.6a70 70 0 0 1 8.2 0a12 12 0 0 0 8.22-2.6l16.05-12.85A86.5 86.5 0 0 1 166.86 49l2.27 20.43a12 12 0 0 0 4 7.65a69 69 0 0 1 5.8 5.8a12 12 0 0 0 7.65 4L207 89.14a86.5 86.5 0 0 1 4.35 10.49l-12.84 16.05a12 12 0 0 0-2.63 8.22"/>`,
|
|
135
|
+
'sign-out-bold': `<path fill="currentColor" d="M124 216a12 12 0 0 1-12 12H48a12 12 0 0 1-12-12V40a12 12 0 0 1 12-12h64a12 12 0 0 1 0 24H60v152h52a12 12 0 0 1 12 12m108.49-96.49l-40-40a12 12 0 0 0-17 17L195 116h-83a12 12 0 0 0 0 24h83l-19.52 19.51a12 12 0 0 0 17 17l40-40a12 12 0 0 0 .01-17"/>`,
|
|
136
|
+
'user-bold': `<path fill="currentColor" d="M234.38 210a123.36 123.36 0 0 0-60.78-53.23a76 76 0 1 0-91.2 0A123.36 123.36 0 0 0 21.62 210a12 12 0 1 0 20.77 12c18.12-31.32 50.12-50 85.61-50s67.49 18.69 85.61 50a12 12 0 0 0 20.77-12M76 96a52 52 0 1 1 52 52a52.06 52.06 0 0 1-52-52"/>`,
|
|
137
|
+
'calendar-blank-bold': `<path fill="currentColor" d="M208 28h-20v-4a12 12 0 0 0-24 0v4H92v-4a12 12 0 0 0-24 0v4H48a20 20 0 0 0-20 20v160a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V48a20 20 0 0 0-20-20M68 52a12 12 0 0 0 24 0h72a12 12 0 0 0 24 0h16v24H52V52ZM52 204V100h152v104Z"/>`,
|
|
112
138
|
};
|
package/dist/style/base.css
CHANGED
|
@@ -30,6 +30,14 @@
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
:root {
|
|
33
|
+
/* Referenced by IIInput and app.css. Previously undefined, so those
|
|
34
|
+
`font-family: var(--font-family)` declarations were invalid and fell back
|
|
35
|
+
to inheritance by accident. Defined now so they resolve on purpose. */
|
|
36
|
+
--font-family: 'Inter Variable', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
37
|
+
/* No mono FACE is shipped — this is the system stack, which is what `font-mono`
|
|
38
|
+
resolved to before. Named as a variable so an app that self-hosts one can swap it. */
|
|
39
|
+
--font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
40
|
+
|
|
33
41
|
--sidebar-width: 22.4rem; /* 224px */
|
|
34
42
|
--topbar-height: 4.8rem; /* 48px */
|
|
35
43
|
--transition-fast: 0.15s ease;
|
|
@@ -42,18 +50,33 @@
|
|
|
42
50
|
}
|
|
43
51
|
|
|
44
52
|
body {
|
|
45
|
-
font-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
+
/* Through the variable, never the literal. The @font-face blocks above point at
|
|
54
|
+
`/fonts/inter-*.woff2`, which this package does NOT ship — every consuming app
|
|
55
|
+
self-hosts them. An app that has not added those files sets `--font-family` to
|
|
56
|
+
whatever it does have, and because nothing then references Inter the @font-face
|
|
57
|
+
never fetches: no 404s, no `font-display: block` gap with invisible text.
|
|
58
|
+
Hardcoding the family here would make that opt-out impossible. */
|
|
59
|
+
font-family: var(--font-family);
|
|
60
|
+
/* 13px/1.5 with a hair of negative tracking — the artifacts' body setting.
|
|
61
|
+
Antialiasing matters here: at 13px the face reads heavy without it. */
|
|
62
|
+
font-size: 1.3rem;
|
|
63
|
+
line-height: 1.5;
|
|
64
|
+
letter-spacing: -0.005em;
|
|
65
|
+
-webkit-font-smoothing: antialiased;
|
|
66
|
+
-moz-osx-font-smoothing: grayscale;
|
|
53
67
|
margin: 0;
|
|
54
68
|
padding: 0;
|
|
55
69
|
}
|
|
56
70
|
|
|
71
|
+
/* Controls inherit the body's tracking too, or buttons drift wider than labels. */
|
|
72
|
+
button,
|
|
73
|
+
input,
|
|
74
|
+
select,
|
|
75
|
+
textarea {
|
|
76
|
+
font: inherit;
|
|
77
|
+
letter-spacing: inherit;
|
|
78
|
+
}
|
|
79
|
+
|
|
57
80
|
* {
|
|
58
81
|
scrollbar-width: thin;
|
|
59
82
|
scrollbar-color: var(--ii-gray-300) transparent;
|
package/dist/style/colors.css
CHANGED
|
@@ -230,4 +230,25 @@
|
|
|
230
230
|
--ii-login-card-border: rgba(255, 255, 255, 0.8);
|
|
231
231
|
--ii-login-particle: rgba(17, 115, 212, 0.3);
|
|
232
232
|
--ii-login-particle-link: rgba(17, 115, 212, 0.6);
|
|
233
|
+
|
|
234
|
+
/* ── Soft tier ────────────────────────────────────────────────────────
|
|
235
|
+
Added with the `bg-*-soft` / `bg-app` utilities. DERIVED, not picked:
|
|
236
|
+
they mix from the tokens above, so an app that overrides the palette
|
|
237
|
+
gets a matching soft tier for free instead of an orphaned literal.
|
|
238
|
+
A tenant that wants them hand-tuned can still set them outright. */
|
|
239
|
+
--ii-app-bg: var(--ii-background);
|
|
240
|
+
--ii-primary-soft: color-mix(in srgb, var(--ii-primary) 14%, white);
|
|
241
|
+
--ii-success-soft: color-mix(in srgb, var(--ii-success) 22%, white);
|
|
242
|
+
--ii-warning-soft: color-mix(in srgb, var(--ii-warning) 22%, white);
|
|
243
|
+
--ii-error-soft: color-mix(in srgb, var(--ii-error) 22%, white);
|
|
244
|
+
|
|
245
|
+
/* ── Elevation tiers ──────────────────────────────────────────────────
|
|
246
|
+
`shadows.ts` resolves every shadow utility through these three, instead
|
|
247
|
+
of carrying a one-off value per component. Inked with neutral black so
|
|
248
|
+
the package stands alone; an app with its own palette can re-ink them to
|
|
249
|
+
its text colour, which is what makes a shadow sit in the same family as
|
|
250
|
+
the surface it falls on. */
|
|
251
|
+
--ii-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
|
|
252
|
+
--ii-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.06), 0 14px 44px -16px rgba(0, 0, 0, 0.24);
|
|
253
|
+
--ii-shadow-3: 0 2px 4px rgba(0, 0, 0, 0.06), 0 32px 80px -24px rgba(0, 0, 0, 0.35);
|
|
233
254
|
}
|
package/dist/style/dark.css
CHANGED
|
@@ -201,4 +201,21 @@
|
|
|
201
201
|
--ii-login-card-border: rgba(255, 255, 255, 0.08);
|
|
202
202
|
--ii-login-particle: rgba(17, 115, 212, 0.35);
|
|
203
203
|
--ii-login-particle-link: rgba(17, 115, 212, 0.6);
|
|
204
|
+
|
|
205
|
+
/* ── Soft tier ────────────────────────────────────────────────────────
|
|
206
|
+
Added with the `bg-*-soft` / `bg-app` utilities. DERIVED, not picked:
|
|
207
|
+
they mix from the tokens above, so an app that overrides the palette
|
|
208
|
+
gets a matching soft tier for free instead of an orphaned literal.
|
|
209
|
+
A tenant that wants them hand-tuned can still set them outright. */
|
|
210
|
+
--ii-app-bg: var(--ii-background);
|
|
211
|
+
--ii-primary-soft: color-mix(in srgb, var(--ii-primary) 14%, black);
|
|
212
|
+
--ii-success-soft: color-mix(in srgb, var(--ii-success) 22%, black);
|
|
213
|
+
--ii-warning-soft: color-mix(in srgb, var(--ii-warning) 22%, black);
|
|
214
|
+
--ii-error-soft: color-mix(in srgb, var(--ii-error) 22%, black);
|
|
215
|
+
|
|
216
|
+
/* ── Elevation tiers ── see colors.css. Deeper on a dark ground, where a
|
|
217
|
+
light-theme shadow is invisible. */
|
|
218
|
+
--ii-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
219
|
+
--ii-shadow-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 44px -16px rgba(0, 0, 0, 0.8);
|
|
220
|
+
--ii-shadow-3: 0 2px 4px rgba(0, 0, 0, 0.6), 0 32px 80px -24px rgba(0, 0, 0, 0.9);
|
|
204
221
|
}
|