mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
feat(Alert/Toast)!: add orientation prop
This commit is contained in:
Benjamin Canac
@@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
const toast = useToast()
|
||||
|
||||
const props = defineProps<{
|
||||
orientation: 'horizontal' | 'vertical'
|
||||
}>()
|
||||
|
||||
function showToast() {
|
||||
toast.add({
|
||||
title: 'Uh oh! Something went wrong.',
|
||||
orientation: props.orientation,
|
||||
actions: [{
|
||||
icon: 'i-lucide-refresh-cw',
|
||||
label: 'Retry',
|
||||
color: 'neutral',
|
||||
variant: 'outline',
|
||||
onClick: (e) => {
|
||||
e?.stopPropagation()
|
||||
}
|
||||
}]
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton label="Show toast" color="neutral" variant="outline" @click="showToast" />
|
||||
</template>
|
||||
@@ -215,8 +215,30 @@ props:
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
Actions renders differently when the description is not set. You can try to remove it.
|
||||
### Orientation
|
||||
|
||||
Use the `orientation` prop to change the orientation of the Alert.
|
||||
|
||||
::component-code
|
||||
---
|
||||
prettier: true
|
||||
ignore:
|
||||
- title
|
||||
- actions
|
||||
- color
|
||||
- variant
|
||||
props:
|
||||
title: 'Heads up!'
|
||||
description: 'You can change the primary color in your app config.'
|
||||
color: neutral
|
||||
variant: outline
|
||||
orientation: horizontal
|
||||
actions:
|
||||
- label: Action 1
|
||||
- label: Action 2
|
||||
color: neutral
|
||||
variant: subtle
|
||||
---
|
||||
::
|
||||
|
||||
## Examples
|
||||
|
||||
@@ -154,8 +154,21 @@ name: 'toast-actions-example'
|
||||
---
|
||||
::
|
||||
|
||||
::note
|
||||
Actions renders differently when the description is not set. You can try to remove it.
|
||||
### Orientation
|
||||
|
||||
Use the `orientation` prop to change the orientation of the Toast.
|
||||
|
||||
::component-example
|
||||
---
|
||||
options:
|
||||
- name: 'orientation'
|
||||
label: 'orientation'
|
||||
default: 'horizontal'
|
||||
items:
|
||||
- horizontal
|
||||
- vertical
|
||||
name: 'toast-orientation-example'
|
||||
---
|
||||
::
|
||||
|
||||
## Examples
|
||||
|
||||
@@ -6,7 +6,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
|
||||
const actions = (color: string) => [{
|
||||
label: 'Action',
|
||||
color: color as any,
|
||||
click() {
|
||||
onClick() {
|
||||
console.log('Action clicked')
|
||||
}
|
||||
}]
|
||||
@@ -15,21 +15,21 @@ const multipleActions = (color: string) => [
|
||||
{
|
||||
label: 'Action',
|
||||
color: color as any,
|
||||
click() {
|
||||
onClick() {
|
||||
console.log('Action clicked')
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Another action',
|
||||
color: color as any,
|
||||
click() {
|
||||
onClick() {
|
||||
console.log('Another action clicked')
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'One more action',
|
||||
color: color as any,
|
||||
click() {
|
||||
onClick() {
|
||||
console.log('One more action clicked')
|
||||
}
|
||||
},
|
||||
@@ -37,7 +37,7 @@ const multipleActions = (color: string) => [
|
||||
label: 'And one more',
|
||||
color: color as any,
|
||||
icon: 'i-lucide-info',
|
||||
click() {
|
||||
onClick() {
|
||||
console.log('And one more clicked')
|
||||
}
|
||||
},
|
||||
@@ -45,7 +45,7 @@ const multipleActions = (color: string) => [
|
||||
label: 'Last one',
|
||||
color: color as any,
|
||||
icon: 'i-lucide-info',
|
||||
click() {
|
||||
onClick() {
|
||||
console.log('Last one clicked')
|
||||
}
|
||||
}
|
||||
@@ -65,7 +65,7 @@ const data = {
|
||||
<UAlert :title="data.title" />
|
||||
<UAlert :title="data.title" :icon="data.icon" />
|
||||
<UAlert :title="data.title" :icon="data.icon" :close="data.close" />
|
||||
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :actions="actions('neutral')" />
|
||||
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :actions="actions('neutral')" orientation="horizontal" />
|
||||
<UAlert :title="data.title" :icon="data.icon" :close="data.close" :description="data.description" />
|
||||
<UAlert :title="data.title" :avatar="{ src: 'https://github.com/benjamincanac.png' }" :close="data.close" :description="data.description" />
|
||||
<UAlert :title="data.title" :icon="data.icon" description="example with multiple actions." :actions="multipleActions('neutral')" />
|
||||
|
||||
@@ -20,7 +20,21 @@ const templates = (id: number) => [{
|
||||
}, {
|
||||
title: 'Toast',
|
||||
description: `This is the toast ${id}`,
|
||||
icon: 'i-lucide-rocket'
|
||||
icon: 'i-lucide-rocket',
|
||||
actions: [{
|
||||
label: 'Action 1',
|
||||
color: 'neutral' as const,
|
||||
onClick() {
|
||||
console.log(`Toast ${id} action 1 clicked`)
|
||||
}
|
||||
}, {
|
||||
label: 'Action 2',
|
||||
color: 'neutral' as const,
|
||||
variant: 'outline' as const,
|
||||
onClick() {
|
||||
console.log(`Toast ${id} action 2 clicked`)
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
title: `Toast ${id}`,
|
||||
icon: 'i-lucide-rocket'
|
||||
@@ -41,34 +55,36 @@ const templates = (id: number) => [{
|
||||
},
|
||||
actions: [{
|
||||
label: 'Action',
|
||||
click() {
|
||||
onClick() {
|
||||
console.log(`Toast ${id} action clicked`)
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
title: `Toast ${id}`,
|
||||
icon: 'i-lucide-rocket',
|
||||
orientation: 'horizontal' as const,
|
||||
actions: [{
|
||||
label: 'Action 1',
|
||||
color: 'neutral' as const,
|
||||
click() {
|
||||
onClick() {
|
||||
console.log(`Toast ${id} action 1 clicked`)
|
||||
}
|
||||
}, {
|
||||
label: 'Action 2',
|
||||
color: 'neutral' as const,
|
||||
variant: 'outline' as const,
|
||||
click() {
|
||||
onClick() {
|
||||
console.log(`Toast ${id} action 2 clicked`)
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
description: `This is the toast ${id}`,
|
||||
icon: 'i-lucide-rocket',
|
||||
orientation: 'horizontal' as const,
|
||||
actions: [{
|
||||
label: 'Action',
|
||||
variant: 'outline' as const,
|
||||
click() {
|
||||
onClick() {
|
||||
console.log(`Toast ${id} action clicked`)
|
||||
}
|
||||
}]
|
||||
|
||||
@@ -25,10 +25,11 @@ export interface AlertProps {
|
||||
avatar?: AvatarProps
|
||||
color?: AlertVariants['color']
|
||||
variant?: AlertVariants['variant']
|
||||
orientation?: AlertVariants['orientation']
|
||||
/**
|
||||
* Display a list of actions:
|
||||
* - under the title and description if multiline
|
||||
* - next to the close button if not multiline
|
||||
* - under the title and description when orientation is `vertical`
|
||||
* - next to the close button when orientation is `horizontal`
|
||||
* `{ size: 'xs' }`{lang="ts-type"}
|
||||
*/
|
||||
actions?: ButtonProps[]
|
||||
@@ -72,23 +73,25 @@ import UIcon from './Icon.vue'
|
||||
import UAvatar from './Avatar.vue'
|
||||
import UButton from './Button.vue'
|
||||
|
||||
const props = defineProps<AlertProps>()
|
||||
const props = withDefaults(defineProps<AlertProps>(), {
|
||||
orientation: 'vertical'
|
||||
})
|
||||
const emits = defineEmits<AlertEmits>()
|
||||
const slots = defineSlots<AlertSlots>()
|
||||
|
||||
const { t } = useLocale()
|
||||
const appConfig = useAppConfig()
|
||||
|
||||
const multiline = computed(() => !!props.title && !!props.description)
|
||||
|
||||
const ui = computed(() => alert({
|
||||
color: props.color,
|
||||
variant: props.variant
|
||||
variant: props.variant,
|
||||
orientation: props.orientation,
|
||||
title: !!props.title || !!slots.title
|
||||
}))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root], multiline })">
|
||||
<Primitive :as="as" :data-orientation="orientation" :class="ui.root({ class: [props.class, props.ui?.root] })">
|
||||
<slot name="leading">
|
||||
<UAvatar v-if="avatar" :size="((props.ui?.avatarSize || ui.avatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
|
||||
<UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
|
||||
@@ -106,15 +109,15 @@ const ui = computed(() => alert({
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div v-if="multiline && actions?.length" :class="ui.actions({ class: props.ui?.actions, multiline: true })">
|
||||
<div v-if="orientation === 'vertical' && actions?.length" :class="ui.actions({ class: props.ui?.actions })">
|
||||
<slot name="actions">
|
||||
<UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="(!multiline && actions?.length) || close" :class="ui.actions({ class: props.ui?.actions, multiline: false })">
|
||||
<template v-if="!multiline">
|
||||
<div v-if="(orientation === 'horizontal' && actions?.length) || close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
|
||||
<template v-if="orientation === 'horizontal' && actions?.length">
|
||||
<slot name="actions">
|
||||
<UButton v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
|
||||
</slot>
|
||||
|
||||
@@ -25,10 +25,11 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
|
||||
icon?: string
|
||||
avatar?: AvatarProps
|
||||
color?: ToastVariants['color']
|
||||
orientation?: ToastVariants['orientation']
|
||||
/**
|
||||
* Display a list of actions:
|
||||
* - under the title and description if multiline
|
||||
* - next to the close button if not multiline
|
||||
* - under the title and description when orientation is `vertical`
|
||||
* - next to the close button when orientation is `horizontal`
|
||||
* `{ size: 'xs' }`{lang="ts-type"}
|
||||
*/
|
||||
actions?: ButtonProps[]
|
||||
@@ -71,7 +72,8 @@ import UAvatar from './Avatar.vue'
|
||||
import UButton from './Button.vue'
|
||||
|
||||
const props = withDefaults(defineProps<ToastProps>(), {
|
||||
close: true
|
||||
close: true,
|
||||
orientation: 'vertical'
|
||||
})
|
||||
const emits = defineEmits<ToastEmits>()
|
||||
const slots = defineSlots<ToastSlots>()
|
||||
@@ -81,10 +83,10 @@ const appConfig = useAppConfig()
|
||||
|
||||
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'duration', 'type'), emits)
|
||||
|
||||
const multiline = computed(() => !!props.title && !!props.description)
|
||||
|
||||
const ui = computed(() => toast({
|
||||
color: props.color
|
||||
color: props.color,
|
||||
orientation: props.orientation,
|
||||
title: !!props.title || !!slots.title
|
||||
}))
|
||||
|
||||
const el = ref()
|
||||
@@ -110,7 +112,8 @@ defineExpose({
|
||||
ref="el"
|
||||
v-slot="{ remaining, duration }"
|
||||
v-bind="rootProps"
|
||||
:class="ui.root({ class: [props.class, props.ui?.root], multiline })"
|
||||
:data-orientation="orientation"
|
||||
:class="ui.root({ class: [props.class, props.ui?.root] })"
|
||||
:style="{ '--height': height }"
|
||||
>
|
||||
<slot name="leading">
|
||||
@@ -130,7 +133,7 @@ defineExpose({
|
||||
</slot>
|
||||
</ToastDescription>
|
||||
|
||||
<div v-if="multiline && actions?.length" :class="ui.actions({ class: props.ui?.actions, multiline: true })">
|
||||
<div v-if="orientation === 'vertical' && actions?.length" :class="ui.actions({ class: props.ui?.actions })">
|
||||
<slot name="actions">
|
||||
<ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
|
||||
<UButton size="xs" :color="color" v-bind="action" />
|
||||
@@ -139,8 +142,8 @@ defineExpose({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="(!multiline && actions?.length) || close !== null" :class="ui.actions({ class: props.ui?.actions, multiline: false })">
|
||||
<template v-if="!multiline">
|
||||
<div v-if="(orientation === 'horizontal' && actions?.length) || close" :class="ui.actions({ class: props.ui?.actions, orientation: 'horizontal' })">
|
||||
<template v-if="orientation === 'horizontal' && actions?.length">
|
||||
<slot name="actions">
|
||||
<ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
|
||||
<UButton size="xs" :color="color" v-bind="action" />
|
||||
|
||||
@@ -3,14 +3,14 @@ import type { ModuleOptions } from '../module'
|
||||
export default (options: Required<ModuleOptions>) => ({
|
||||
slots: {
|
||||
root: 'relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5',
|
||||
wrapper: 'min-w-0 flex-1 flex flex-col gap-1',
|
||||
wrapper: 'min-w-0 flex-1 flex flex-col',
|
||||
title: 'text-sm font-medium',
|
||||
description: 'text-sm opacity-90',
|
||||
icon: 'shrink-0 size-5',
|
||||
avatar: 'shrink-0',
|
||||
avatarSize: '2xl',
|
||||
actions: 'flex flex-wrap gap-1.5 shrink-0',
|
||||
close: 'p-0.5'
|
||||
close: 'p-0'
|
||||
},
|
||||
variants: {
|
||||
color: {
|
||||
@@ -23,14 +23,19 @@ export default (options: Required<ModuleOptions>) => ({
|
||||
soft: '',
|
||||
subtle: ''
|
||||
},
|
||||
multiline: {
|
||||
true: {
|
||||
root: 'items-start',
|
||||
actions: 'items-start mt-1'
|
||||
},
|
||||
false: {
|
||||
orientation: {
|
||||
horizontal: {
|
||||
root: 'items-center',
|
||||
actions: 'items-center'
|
||||
},
|
||||
vertical: {
|
||||
root: 'items-start',
|
||||
actions: 'items-start mt-2.5'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
true: {
|
||||
description: 'mt-1'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -3,7 +3,7 @@ import type { ModuleOptions } from '../module'
|
||||
export default (options: Required<ModuleOptions>) => ({
|
||||
slots: {
|
||||
root: 'relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none',
|
||||
wrapper: 'w-0 flex-1 flex flex-col gap-1',
|
||||
wrapper: 'w-0 flex-1 flex flex-col',
|
||||
title: 'text-sm font-medium text-[var(--ui-text-highlighted)]',
|
||||
description: 'text-sm text-[var(--ui-text-muted)]',
|
||||
icon: 'shrink-0 size-5',
|
||||
@@ -11,7 +11,7 @@ export default (options: Required<ModuleOptions>) => ({
|
||||
avatarSize: '2xl',
|
||||
actions: 'flex gap-1.5 shrink-0',
|
||||
progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',
|
||||
close: 'p-0.5'
|
||||
close: 'p-0'
|
||||
},
|
||||
variants: {
|
||||
color: {
|
||||
@@ -26,14 +26,19 @@ export default (options: Required<ModuleOptions>) => ({
|
||||
progress: 'bg-[var(--ui-bg-inverted)]'
|
||||
}
|
||||
},
|
||||
multiline: {
|
||||
true: {
|
||||
root: 'items-start',
|
||||
actions: 'items-start mt-1'
|
||||
},
|
||||
false: {
|
||||
orientation: {
|
||||
horizontal: {
|
||||
root: 'items-center',
|
||||
actions: 'items-center'
|
||||
},
|
||||
vertical: {
|
||||
root: 'items-start',
|
||||
actions: 'items-start mt-2.5'
|
||||
}
|
||||
},
|
||||
title: {
|
||||
true: {
|
||||
description: 'mt-1'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -14,6 +14,9 @@ describe('Alert', () => {
|
||||
['with description', { props: { ...props, description: 'Description' } }],
|
||||
['with icon', { props: { ...props, icon: 'i-lucide-lightbulb' } }],
|
||||
['with avatar', { props: { ...props, avatar: { src: 'https://github.com/benjamincanac.png' } } }],
|
||||
['with actions', { props: { ...props, actions: [{ label: 'Action' }] } }],
|
||||
['with orientation vertical', { props: { ...props, icon: 'i-lucide-lightbulb', description: 'This is a description', actions: [{ label: 'Action' }], orientation: 'vertical' as const } }],
|
||||
['with orientation horizontal', { props: { ...props, icon: 'i-lucide-lightbulb', description: 'This is a description', actions: [{ label: 'Action' }], orientation: 'horizontal' as const } }],
|
||||
['with close', { props: { ...props, close: true } }],
|
||||
['with closeIcon', { props: { ...props, close: true, closeIcon: 'i-lucide-trash' } }],
|
||||
...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { ...props, variant } }]),
|
||||
|
||||
@@ -33,7 +33,8 @@ describe('Toast', () => {
|
||||
['with icon', { props: { ...props, icon: 'i-lucide-rocket' } }],
|
||||
['with avatar', { props: { ...props, avatar: { src: 'https://github.com/benjamincanac.png' } } }],
|
||||
['with actions', { props: { ...props, actions: [{ label: 'Action' }] } }],
|
||||
['with description actions', { props: { ...props, description: 'This is a toast', actions: [{ label: 'Action' }] } }],
|
||||
['with orientation vertical', { props: { ...props, icon: 'i-lucide-rocket', description: 'This is a toast', actions: [{ label: 'Action' }], orientation: 'vertical' as const } }],
|
||||
['with orientation horizontal', { props: { ...props, icon: 'i-lucide-rocket', description: 'This is a toast', actions: [{ label: 'Action' }], orientation: 'horizontal' as const } }],
|
||||
['without close', { props: { ...props, close: false } }],
|
||||
['with closeIcon', { props: { ...props, closeIcon: 'i-lucide-trash' } }],
|
||||
['with type', { props: { ...props, type: 'background' as const } }],
|
||||
|
||||
@@ -1,9 +1,24 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Alert > renders with as correctly 1`] = `
|
||||
"<article class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
exports[`Alert > renders with actions correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with as correctly 1`] = `
|
||||
"<article data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -13,8 +28,8 @@ exports[`Alert > renders with as correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with avatar correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -24,9 +39,9 @@ exports[`Alert > renders with avatar correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with class correctly 1`] = `
|
||||
"<div class="relative overflow-hidden rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)] w-48">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)] w-48">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -36,24 +51,26 @@ exports[`Alert > renders with class correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with close correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with close slot correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -63,26 +80,28 @@ exports[`Alert > renders with close slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with closeIcon correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with description correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<div class="text-sm opacity-90">Description</div>
|
||||
<div class="text-sm opacity-90 mt-1">Description</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -90,11 +109,11 @@ exports[`Alert > renders with description correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with description slot correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<div class="text-sm opacity-90">Description slot</div>
|
||||
<div class="text-sm opacity-90 mt-1">Description slot</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -102,8 +121,8 @@ exports[`Alert > renders with description slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with icon correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -113,9 +132,9 @@ exports[`Alert > renders with icon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with leading slot correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Leading slot</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -125,9 +144,9 @@ exports[`Alert > renders with leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with neutral variant outline correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -137,9 +156,9 @@ exports[`Alert > renders with neutral variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with neutral variant soft correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -149,9 +168,9 @@ exports[`Alert > renders with neutral variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with neutral variant solid correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -161,9 +180,9 @@ exports[`Alert > renders with neutral variant solid correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with neutral variant subtle correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -172,10 +191,40 @@ exports[`Alert > renders with neutral variant subtle correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with primary variant outline correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
|
||||
exports[`Alert > renders with orientation horizontal correctly 1`] = `
|
||||
"<div data-orientation="horizontal" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<div class="text-sm opacity-90 mt-1">This is a description</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with orientation vertical correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<div class="text-sm opacity-90 mt-1">This is a description</div>
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with primary variant outline correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -185,9 +234,9 @@ exports[`Alert > renders with primary variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with primary variant soft correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -197,9 +246,9 @@ exports[`Alert > renders with primary variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with primary variant solid correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -209,9 +258,9 @@ exports[`Alert > renders with primary variant solid correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with primary variant subtle correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -221,9 +270,9 @@ exports[`Alert > renders with primary variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with title correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -233,9 +282,9 @@ exports[`Alert > renders with title correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with title slot correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Title slot</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -245,9 +294,9 @@ exports[`Alert > renders with title slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with ui correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-bold">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
|
||||
@@ -1,9 +1,24 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Alert > renders with as correctly 1`] = `
|
||||
"<article class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
exports[`Alert > renders with actions correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with as correctly 1`] = `
|
||||
"<article data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -13,8 +28,8 @@ exports[`Alert > renders with as correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with avatar correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -24,9 +39,9 @@ exports[`Alert > renders with avatar correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with class correctly 1`] = `
|
||||
"<div class="relative overflow-hidden rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)] w-48">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)] w-48">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -36,24 +51,26 @@ exports[`Alert > renders with class correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with close correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with close slot correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -63,26 +80,28 @@ exports[`Alert > renders with close slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with closeIcon correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with description correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<div class="text-sm opacity-90">Description</div>
|
||||
<div class="text-sm opacity-90 mt-1">Description</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -90,11 +109,11 @@ exports[`Alert > renders with description correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with description slot correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<div class="text-sm opacity-90">Description slot</div>
|
||||
<div class="text-sm opacity-90 mt-1">Description slot</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<!--v-if-->
|
||||
@@ -102,8 +121,8 @@ exports[`Alert > renders with description slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with icon correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -113,9 +132,9 @@ exports[`Alert > renders with icon correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with leading slot correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Leading slot</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -125,9 +144,9 @@ exports[`Alert > renders with leading slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with neutral variant outline correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -137,9 +156,9 @@ exports[`Alert > renders with neutral variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with neutral variant soft correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -149,9 +168,9 @@ exports[`Alert > renders with neutral variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with neutral variant solid correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -161,9 +180,9 @@ exports[`Alert > renders with neutral variant solid correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with neutral variant subtle correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -172,10 +191,40 @@ exports[`Alert > renders with neutral variant subtle correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with primary variant outline correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
|
||||
exports[`Alert > renders with orientation horizontal correctly 1`] = `
|
||||
"<div data-orientation="horizontal" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<div class="text-sm opacity-90 mt-1">This is a description</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with orientation vertical correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<div class="text-sm opacity-90 mt-1">This is a description</div>
|
||||
<div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</div>
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with primary variant outline correctly 1`] = `
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -185,9 +234,9 @@ exports[`Alert > renders with primary variant outline correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with primary variant soft correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -197,9 +246,9 @@ exports[`Alert > renders with primary variant soft correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with primary variant solid correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -209,9 +258,9 @@ exports[`Alert > renders with primary variant solid correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with primary variant subtle correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -221,9 +270,9 @@ exports[`Alert > renders with primary variant subtle correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with title correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -233,9 +282,9 @@ exports[`Alert > renders with title correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with title slot correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium">Title slot</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
@@ -245,9 +294,9 @@ exports[`Alert > renders with title slot correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`Alert > renders with ui correctly 1`] = `
|
||||
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
|
||||
<!--v-if-->
|
||||
<div class="min-w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="min-w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-bold">Alert</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
|
||||
@@ -9,20 +9,22 @@ exports[`Toast > renders with actions correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<div class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -41,17 +43,19 @@ exports[`Toast > renders with as correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<section role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<section role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</section>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -70,16 +74,18 @@ exports[`Toast > renders with avatar correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -98,17 +104,19 @@ exports[`Toast > renders with class correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center bg-[var(--ui-bg-elevated)]/50" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start bg-[var(--ui-bg-elevated)]/50" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -127,14 +135,16 @@ exports[`Toast > renders with close slot correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">Close slot</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if-->Close slot
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -153,17 +163,19 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -182,52 +194,20 @@ exports[`Toast > renders with color neutral correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-bg-inverted)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with description actions correctly 1`] = `
|
||||
"<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)]">This is a toast</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-start mt-1"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-bg-inverted)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -245,15 +225,15 @@ exports[`Toast > renders with description correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)]">This is a toast</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)] mt-1">This is a toast</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -276,17 +256,19 @@ exports[`Toast > renders with description slot correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)]">Description slot</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)] mt-1">Description slot</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -305,16 +287,18 @@ exports[`Toast > renders with icon correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -333,12 +317,45 @@ exports[`Toast > renders with leading slot correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">Leading slot<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">Leading slot<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with orientation horizontal correctly 1`] = `
|
||||
"<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="horizontal" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)] mt-1">This is a toast</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
@@ -348,6 +365,39 @@ exports[`Toast > renders with leading slot correctly 1`] = `
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with orientation vertical correctly 1`] = `
|
||||
"<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5 text-[var(--ui-primary)]" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)] mt-1">This is a toast</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
@@ -360,17 +410,19 @@ exports[`Toast > renders with title correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -389,17 +441,19 @@ exports[`Toast > renders with title slot correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Title slot</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -418,17 +472,19 @@ exports[`Toast > renders with type correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -447,17 +503,19 @@ exports[`Toast > renders with ui correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm text-[var(--ui-text-highlighted)] font-bold">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -476,14 +534,14 @@ exports[`Toast > renders without close correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"></div>
|
||||
<!--v-if-->
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
|
||||
@@ -9,20 +9,22 @@ exports[`Toast > renders with actions correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
<div class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -41,17 +43,19 @@ exports[`Toast > renders with as correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<section role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<section role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</section>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -70,16 +74,18 @@ exports[`Toast > renders with avatar correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -98,17 +104,19 @@ exports[`Toast > renders with class correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center bg-[var(--ui-bg-elevated)]/50" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start bg-[var(--ui-bg-elevated)]/50" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -127,14 +135,16 @@ exports[`Toast > renders with close slot correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">Close slot</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if-->Close slot
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -153,17 +163,19 @@ exports[`Toast > renders with closeIcon correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -182,52 +194,20 @@ exports[`Toast > renders with color neutral correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-border-inverted)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-bg-inverted)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with description actions correctly 1`] = `
|
||||
"<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)]">This is a toast</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-start mt-1"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-bg-inverted)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
@@ -245,15 +225,15 @@ exports[`Toast > renders with description correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)]">This is a toast</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)] mt-1">This is a toast</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
@@ -276,17 +256,19 @@ exports[`Toast > renders with description slot correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)]">Description slot</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)] mt-1">Description slot</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -305,16 +287,18 @@ exports[`Toast > renders with icon correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><span class="iconify i-lucide:rocket shrink-0 size-5 text-[var(--ui-primary)]" aria-hidden="true"></span>
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><span class="iconify i-lucide:rocket shrink-0 size-5 text-[var(--ui-primary)]" aria-hidden="true"></span>
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -333,12 +317,45 @@ exports[`Toast > renders with leading slot correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">Leading slot<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">Leading slot<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with orientation horizontal correctly 1`] = `
|
||||
"<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="horizontal" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><span class="iconify i-lucide:rocket shrink-0 size-5 text-[var(--ui-primary)]" aria-hidden="true"></span>
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)] mt-1">This is a toast</div>
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
@@ -348,6 +365,39 @@ exports[`Toast > renders with leading slot correctly 1`] = `
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
exports[`Toast > renders with orientation vertical correctly 1`] = `
|
||||
"<!---->
|
||||
<!--teleport start-->
|
||||
<!--teleport end-->
|
||||
<!--teleport start-->
|
||||
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item=""><span class="iconify i-lucide:rocket shrink-0 size-5 text-[var(--ui-primary)]" aria-hidden="true"></span>
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<div class="text-sm text-[var(--ui-text-muted)] mt-1">This is a toast</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-start mt-2.5"><button type="button" data-reka-toast-announce-exclude="" data-reka-toast-announce-alt="Action" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
|
||||
<!--v-if--><span class="truncate">Action</span>
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<!--teleport end-->"
|
||||
`;
|
||||
|
||||
@@ -360,17 +410,19 @@ exports[`Toast > renders with title correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -389,17 +441,19 @@ exports[`Toast > renders with title slot correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Title slot</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -418,17 +472,19 @@ exports[`Toast > renders with type correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -447,17 +503,19 @@ exports[`Toast > renders with ui correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm text-[var(--ui-text-highlighted)] font-bold">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0.5"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<div class="flex gap-1.5 shrink-0 items-center">
|
||||
<!--v-if--><button type="button" aria-label="Close" data-reka-toast-announce-exclude="" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button></div>
|
||||
</button>
|
||||
</div>
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
@@ -476,14 +534,14 @@ exports[`Toast > renders without close correctly 1`] = `
|
||||
|
||||
<div role="region" aria-label="Notifications (F8)" tabindex="-1"><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
<ol tabindex="-1" data-expanded="true" class="fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none right-4 bottom-4" style="--scale-factor: 0.05; --translate-factor: -1px; --gap: -16px; --front-height: 0px; --height: 0px;">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-center" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<li role="alert" aria-live="off" aria-atomic="true" tabindex="0" data-orientation="vertical" class="relative group overflow-hidden bg-[var(--ui-bg)] shadow-lg rounded-[calc(var(--ui-radius)*2)] ring ring-[var(--ui-border)] p-4 flex gap-2.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)] items-start" style="--height: 0; user-select: none; touch-action: none;" data-state="open" data-swipe-direction="right" data-reka-collection-item="">
|
||||
<!--v-if-->
|
||||
<div class="w-0 flex-1 flex flex-col gap-1">
|
||||
<div class="w-0 flex-1 flex flex-col">
|
||||
<div class="text-sm font-medium text-[var(--ui-text-highlighted)]">Toast</div>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</div>
|
||||
<div class="flex gap-1.5 shrink-0 items-center"></div>
|
||||
<!--v-if-->
|
||||
<div class="absolute inset-x-0 bottom-0 h-1 z-[-1] bg-[var(--ui-primary)]" style="width: 100%;"></div>
|
||||
</li>
|
||||
</ol><span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;"></span>
|
||||
|
||||
Reference in New Issue
Block a user