@insymetri/styleguide 0.1.67 → 0.1.68
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.
|
@@ -56,8 +56,8 @@
|
|
|
56
56
|
<Dialog.Overlay
|
|
57
57
|
class={cn(
|
|
58
58
|
'fixed inset-0 z-14 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none',
|
|
59
|
-
overlay === 'dark' && 'bg-black/30
|
|
60
|
-
overlay === 'light' && 'bg-black/10
|
|
59
|
+
overlay === 'dark' && 'bg-black/30',
|
|
60
|
+
overlay === 'light' && 'bg-black/10',
|
|
61
61
|
overlay === 'none' && 'pointer-events-none'
|
|
62
62
|
)}
|
|
63
63
|
/>
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
if (isInsidePortaledMenu(target)) e.preventDefault()
|
|
73
73
|
}}
|
|
74
74
|
class={cn(
|
|
75
|
-
'fixed top-[30%] left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface border border-strong rounded-12 w-[calc(100%-20px)] max-h-[90vh] flex flex-col
|
|
75
|
+
'fixed top-[30%] left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface border border-strong rounded-12 w-[calc(100%-20px)] max-h-[90vh] flex flex-col z-15 data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out motion-reduce:animate-none focus:outline-none',
|
|
76
76
|
overlay === 'none' ? 'shadow-floating' : 'shadow-modal',
|
|
77
77
|
size === 'sm' && 'max-w-400',
|
|
78
78
|
size === 'md' && 'max-w-500',
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
className
|
|
81
81
|
)}
|
|
82
82
|
>
|
|
83
|
-
<div class="flex items-start justify-between gap-12 shrink-0">
|
|
83
|
+
<div class="flex items-start justify-between gap-12 px-24 pt-24 shrink-0">
|
|
84
84
|
<div class="flex flex-col min-w-0 flex-1">
|
|
85
85
|
<div class="flex items-center gap-12 min-w-0">
|
|
86
86
|
<Dialog.Title class="text-h2 text-body m-0 shrink-0">{title}</Dialog.Title>
|
|
@@ -102,11 +102,11 @@
|
|
|
102
102
|
</Dialog.Close>
|
|
103
103
|
{/if}
|
|
104
104
|
</div>
|
|
105
|
-
<div class="flex-auto min-h-0 overflow-y-auto">
|
|
105
|
+
<div class="px-24 py-20 flex-auto min-h-0 overflow-y-auto">
|
|
106
106
|
{@render children()}
|
|
107
107
|
</div>
|
|
108
108
|
{#if footer}
|
|
109
|
-
<div class="flex items-center justify-end gap-12 shrink-0">
|
|
109
|
+
<div class="flex items-center justify-end gap-12 px-24 pb-24 shrink-0">
|
|
110
110
|
{@render footer()}
|
|
111
111
|
</div>
|
|
112
112
|
{/if}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import IIModal from './IIModal.svelte'
|
|
3
|
+
import IIButton from '../IIButton/IIButton.svelte'
|
|
4
|
+
import IITextarea from '../IITextarea/IITextarea.svelte'
|
|
5
|
+
|
|
6
|
+
let open = $state(true)
|
|
7
|
+
let value = $state('')
|
|
8
|
+
let ref = $state<HTMLTextAreaElement>()
|
|
9
|
+
|
|
10
|
+
// The modal preventDefaults its open auto-focus, and the native `autofocus`
|
|
11
|
+
// attribute does not fire for dynamically-inserted elements — so focus the
|
|
12
|
+
// textarea ourselves once it has mounted. rAF avoids any focus-trap race.
|
|
13
|
+
$effect(() => {
|
|
14
|
+
if (open && ref) {
|
|
15
|
+
requestAnimationFrame(() => ref?.focus())
|
|
16
|
+
}
|
|
17
|
+
})
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<IIButton onclick={() => (open = true)}>Open modal</IIButton>
|
|
21
|
+
|
|
22
|
+
{#if open}
|
|
23
|
+
<IIModal bind:open title="Add a note" onOpenChange={v => (open = v)}>
|
|
24
|
+
<IITextarea
|
|
25
|
+
bind:ref
|
|
26
|
+
bind:value
|
|
27
|
+
label="Note"
|
|
28
|
+
placeholder="The focus ring should be fully visible on the left, right, and bottom."
|
|
29
|
+
rows={4}
|
|
30
|
+
/>
|
|
31
|
+
</IIModal>
|
|
32
|
+
{/if}
|
|
@@ -65,8 +65,8 @@
|
|
|
65
65
|
{disabled}
|
|
66
66
|
{rows}
|
|
67
67
|
class={cn(
|
|
68
|
-
'
|
|
69
|
-
showError && 'border-error focus:border-error focus:ring-error'
|
|
68
|
+
'pt-8 pb-5 px-12 text-small font-[family-name:var(--font-family)] text-body bg-surface border border-button-secondary rounded-[10px] transition-all duration-fast outline-none w-full box-border resize-none overflow-hidden min-h-16 placeholder:text-tertiary hover:not-focus:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:bg-gray-100 disabled:text-secondary disabled:cursor-not-allowed motion-reduce:transition-none',
|
|
69
|
+
showError && 'border-input-border-error hover:border-input-border-error focus:border-input-border-error focus:ring-error'
|
|
70
70
|
)}
|
|
71
71
|
oninput={handleInput}
|
|
72
72
|
{...restProps}
|