Overlay

View Source

NOTE: Introduced feature in v0.2.4.

WARNING: This feature received a breaking change in v0.6.0.

Overlay is typically used for rendering full-screen content over the rest of the page, optionally including a backdrop or being toggleable.

<script>
    import {
        Button,
        Card,
        Code,
        Overlay,
        Text,
    } from "@kahi-ui/framework";
</script>

<Button
    is="label"
    for="overlay-preview"
    palette="accent"
>
    Open MODAL
</Button>

<Overlay.Container
    logic_id="overlay-preview"
    dismissible
>
    <Overlay.Backdrop />

    <Overlay.Section>
        <Card.Container max_width="75">
            <Card.Header>Delete File?</Card.Header>

            <Card.Section>
                <Text>
                    Are you sure you want to delete:
                    <Code>important-file.docx</Code>?
                </Text>
            </Card.Section>

            <Card.Footer>
                <Overlay.Button
                    palette="inverse"
                    variation="clear"
                >
                    Cancel
                </Overlay.Button>

                <Button palette="negative">
                    Delete
                </Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

Imports

<script>
    import {Overlay} from "@kahi-ui/framework";

    const {
        Backdrop,
        Container,
        Button,
        Group,
        Section
    } = Overlay;
</script>

Logic ID

You can make the Overlay toggleable via the logic_id property, and then referencing that with a Button. Alternatively, <Overlay.Button> can be used while inside a <Overlay.Container> tree, which automatically inherits logic_id via Svelte Context.

<script>
    import {
        Button,
        Card,
        Overlay,
    } from "@kahi-ui/framework";
</script>

<Button is="label" for="overlay-logic-id">
    Open Overlay
</Button>

<Overlay.Container logic_id="overlay-logic-id">
    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>Opened Overlay</Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

Logic State

WARNING: This feature is only available in Javascript-enabled clients.

You can manually open / close the Overlay via the logic_state property.

<script>
    import {
        Button,
        Card,
        Overlay,
    } from "@kahi-ui/framework";

    let logic_state = false;
</script>

<Button on:click={() => (logic_state = !logic_state)}>
    Toggle Overlay
</Button>

<Overlay.Container
    logic_id="overlay-logic-state"
    bind:logic_state
>
    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>TOGGABLE Overlay</Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

Auto Focus

NOTE: Introduced feature in v0.4.13.

WARNING: This feature is only available in Javascript-enabled clients.

Whenever the Overlay becomes active, focus is moved to the first found focusable element, then restored to the previously focused element when dismissed.

<script>
    import {
        Button,
        Card,
        Overlay,
    } from "@kahi-ui/framework";
</script>

<Button is="label" for="overlay-auto-focus">
    Open AUTO FOCUSED Overlay
</Button>

<Overlay.Container logic_id="overlay-auto-focus">
    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>
                AUTO FOCUSED Overlay
            </Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #1
                </Overlay.Button>

                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #2
                </Overlay.Button>

                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #3
                </Overlay.Button>

                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #4
                </Overlay.Button>

                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #5
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

You can customize which element is focused on activation with a reference or CSS Selector, via the focus_target property

<script>
    import {
        Button,
        Card,
        Overlay,
    } from "@kahi-ui/framework";

    let target_element;
</script>

<Button is="label" for="overlay-auto-focus-target">
    Open AUTO FOCUSED Overlay
</Button>

<Overlay.Container
    logic_id="overlay-auto-focus-target"
    focus_target={target_element}
>
    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>
                AUTO FOCUSED Overlay
            </Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #1
                </Overlay.Button>

                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #2
                </Overlay.Button>

                <Overlay.Button
                    bind:element={target_element}
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #3
                </Overlay.Button>

                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #4
                </Overlay.Button>

                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #5
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

Focus Trapping

NOTE: Introduced feature in v0.4.13.

WARNING: This feature is only available in Javascript-enabled clients.

USAGE: This feature can not be demonstrated in the REPL, click the Link button to open in Playground.

While the Overlay is active, focus movement is trapped within the first and last found focusable elements.

<script>
    import {
        Button,
        Card,
        Overlay,
    } from "@kahi-ui/framework";
</script>

<Button is="label" for="overlay-focus-trapping">
    Open FOCUS TRAPPED Overlay
</Button>

<Overlay.Container logic_id="overlay-focus-trapping">
    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>
                FOCUS TRAPPED Overlay
            </Card.Header>

            <Card.Footer>
                <Overlay.Button
                    tabindex="3"
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #3
                </Overlay.Button>

                <Overlay.Button
                    tabindex="1"
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #1
                </Overlay.Button>

                <Overlay.Button
                    tabindex="5"
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #5
                </Overlay.Button>

                <Overlay.Button
                    tabindex="4"
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #4
                </Overlay.Button>

                <Overlay.Button
                    tabindex="2"
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #2
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

You can customize which elements are used as the first and last with references or CSS Selectors, via the focus_first / focus_last properties.

<script>
    import {
        Button,
        Card,
        Overlay,
    } from "@kahi-ui/framework";

    let first_element;
    let last_element;
</script>

<Button
    is="label"
    for="overlay-focus-trapping-first-last"
>
    Open FOCUS TRAPPED Overlay
</Button>

<Overlay.Container
    logic_id="overlay-focus-trapping-first-last"
    focus_first={first_element}
    focus_last={last_element}
>
    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>
                FOCUS TRAPPED Overlay
            </Card.Header>

            <Card.Footer>
                <Overlay.Button
                    tabindex="3"
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #3
                </Overlay.Button>

                <Overlay.Button
                    bind:element={first_element}
                    tabindex="1"
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #1
                </Overlay.Button>

                <Overlay.Button
                    bind:element={last_element}
                    tabindex="5"
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #5
                </Overlay.Button>

                <Overlay.Button
                    tabindex="4"
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #4
                </Overlay.Button>

                <Overlay.Button
                    tabindex="2"
                    palette="auto"
                    variation="clear"
                >
                    Dismiss #2
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

Loading

NOTE: Introduced feature in v0.4.13.

USAGE: Use your Browser's devtools to observe this feature.

You can customize the loading behavior of slotted content via the loading property.

<script>
    import {
        Button,
        Card,
        Overlay,
    } from "@kahi-ui/framework";
</script>

<Button is="label" for="overlay-lazy">
    Open LAZY Overlay
</Button>

<Overlay.Container
    logic_id="overlay-lazy"
    loading="lazy"
>
    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>LAZY Overlay</Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

Backdrop

You can optionally include a backdrop by passing via composing the <Overlay.Backdrop> Component.

<script>
    import {
        Button,
        Card,
        Overlay,
    } from "@kahi-ui/framework";
</script>

<Button is="label" for="overlay-backdrop-no">
    Open NO BACKDROP Overlay
</Button>

<Button is="label" for="overlay-backdrop-has">
    Open HAS BACKDROP Overlay
</Button>

<Overlay.Container logic_id="overlay-backdrop-no">
    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>
                NO BACKDROP Overlay
            </Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

<Overlay.Container logic_id="overlay-backdrop-has">
    <Overlay.Backdrop />

    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>
                HAS BACKDROP Overlay
            </Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

Dismissible

NOTE: Introduced keybinding support in v0.4.13.

WARNING: This feature is only available in Javascript-enabled clients.

You can optionally have the Overlay dismissible by pressing the ESC key or clicking the <Overlay.Backdrop> if applicable, via the dismissible property.

<script>
    import {
        Button,
        Card,
        Overlay,
    } from "@kahi-ui/framework";
</script>

<Button is="label" for="overlay-dismissible-disabled">
    Open NON-DISMISSIBLE Overlay
</Button>

<Button is="label" for="overlay-dismissible-enabled">
    Open DISMISSIBLE Overlay
</Button>

<Overlay.Container
    logic_id="overlay-dismissible-disabled"
>
    <Overlay.Backdrop />

    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>
                NON-DISMISSIBLE Overlay
            </Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

<Overlay.Container
    logic_id="overlay-dismissible-enabled"
    dismissible
>
    <Overlay.Backdrop />

    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>
                DISMISSIBLE Overlay
            </Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

Once

NOTE: Introduced feature in v0.4.11.

WARNING: This feature is only available in Javascript-enabled clients.

You can enable having the Overlay dismissed whenever <Overlay.Section> inner content is clicked via the once property.

<script>
    import {
        Button,
        Card,
        Overlay,
    } from "@kahi-ui/framework";
</script>

<Button is="label" for="overlay-once-disabled">
    Open NON-ONCE Overlay
</Button>

<Button is="label" for="overlay-once-enabled">
    Open ONCE Overlay
</Button>

<Overlay.Container logic_id="overlay-once-disabled">
    <Overlay.Backdrop />

    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>NON-ONCE Overlay</Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

<Overlay.Container
    logic_id="overlay-once-enabled"
    once
>
    <Overlay.Backdrop />

    <Overlay.Section>
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>ONCE Overlay</Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

Orientation

NOTE: By passing an array, you can set responsive values. e.g. orientation={["desktop:horizontal", "widescreen:horizontal"]}

You can set the Overlay to render horizontally via the orientation property.

<script>
    import {Box, Overlay} from "@kahi-ui/framework";
</script>

<Overlay.Container>
    <Overlay.Section
        orientation="horizontal"
        spacing="medium"
        padding_bottom="medium"
        padding_right="medium"
    >
        <Box>I am the first Box!</Box>
        <Box>And I am a sibling!</Box>
    </Overlay.Section>
</Overlay.Container>

Alignment

You can align <Overlay.Section> child content via the alignment, alignment_x, and alignment_y properties.

<script>
    import {
        Button,
        Code,
        Overlay,
        Tile,
        Text,
    } from "@kahi-ui/framework";
    import {X} from "lucide-svelte";
</script>

<Overlay.Container>
    <Overlay.Section
        spacing="medium"
        alignment_x="right"
        alignment_y="bottom"
        padding_bottom="medium"
        padding_right="medium"
    >
        <Tile.Container
            elevation="medium"
            width="content-max"
            max_width="75"
        >
            <Tile.Section>
                <Tile.Header>File Deleted</Tile.Header>

                <Text>
                    <Code>important_file.docx</Code> was
                    deleted from cloud storage.
                </Text>
            </Tile.Section>

            <Tile.Footer>
                <Button
                    palette="negative"
                    variation="clear"
                    sizing="small"
                >
                    <X size="1em" />
                </Button>
            </Tile.Footer>
        </Tile.Container>

        <Tile.Container
            elevation="medium"
            width="content-max"
            max_width="75"
        >
            <Tile.Section>
                <Tile.Header>File Deleted</Tile.Header>

                <Text>
                    <Code>other_file.png</Code> was deleted
                    from cloud storage.
                </Text>
            </Tile.Section>

            <Tile.Footer>
                <Button
                    palette="negative"
                    variation="clear"
                    sizing="small"
                >
                    <X size="1em" />
                </Button>
            </Tile.Footer>
        </Tile.Container>
    </Overlay.Section>
</Overlay.Container>

Spacing

You can adjust the spacing between <Overlay.Section> child content via the spacing, spacing_x, and spacing_y properties.

<script>
    import {
        Button,
        Code,
        Overlay,
        Tile,
        Text,
    } from "@kahi-ui/framework";
    import {X} from "lucide-svelte";
</script>

<Overlay.Container>
    <Overlay.Section
        spacing="medium"
        alignment_x="right"
        alignment_y="bottom"
        padding_bottom="medium"
        padding_right="medium"
    >
        <Tile.Container
            elevation="medium"
            width="content-max"
            max_width="75"
        >
            <Tile.Section>
                <Tile.Header>File Deleted</Tile.Header>

                <Text>
                    <Code>important_file.docx</Code> was
                    deleted from cloud storage.
                </Text>
            </Tile.Section>

            <Tile.Footer>
                <Button
                    palette="negative"
                    variation="clear"
                    sizing="small"
                >
                    <X size="1em" />
                </Button>
            </Tile.Footer>
        </Tile.Container>

        <Tile.Container
            elevation="medium"
            width="content-max"
            max_width="75"
        >
            <Tile.Section>
                <Tile.Header>File Deleted</Tile.Header>

                <Text>
                    <Code>other_file.png</Code> was deleted
                    from cloud storage.
                </Text>
            </Tile.Section>

            <Tile.Footer>
                <Button
                    palette="negative"
                    variation="clear"
                    sizing="small"
                >
                    <X size="1em" />
                </Button>
            </Tile.Footer>
        </Tile.Container>
    </Overlay.Section>
</Overlay.Container>

Transition

You can change which built-in Transition is animated using clip, fade, scale, or slide via the animation property.

<script>
    import {
        Button,
        Card,
        Overlay,
    } from "@kahi-ui/framework";
</script>

<Button is="label" for="overlay-transition-clip">
    Open CLIP Overlay
</Button>

<Button is="label" for="overlay-transition-fade">
    Open FADE Overlay
</Button>

<Button is="label" for="overlay-transition-scale">
    Open SCALE Overlay
</Button>

<Button is="label" for="overlay-transition-slide">
    Open SLIDE Overlay
</Button>

<Overlay.Container logic_id="overlay-transition-clip">
    <Overlay.Section animation="clip">
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>CLIP Overlay</Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

<Overlay.Container logic_id="overlay-transition-fade">
    <Overlay.Section animation="fade">
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>FADE Overlay</Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

<Overlay.Container logic_id="overlay-transition-scale">
    <Overlay.Section animation="scale">
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>SCALE Overlay</Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

<Overlay.Container logic_id="overlay-transition-slide">
    <Overlay.Section animation="slide" direction="top">
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>SLIDE Overlay</Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

Direction

You can change which direction the entrance animation comes from via the direction property.

<script>
    import {
        Button,
        Card,
        Overlay,
    } from "@kahi-ui/framework";
</script>

<Button is="label" for="overlay-direction">
    Open SLIDE Overlay
</Button>

<Overlay.Container logic_id="overlay-direction">
    <Overlay.Section
        animation="slide"
        direction="left"
    >
        <Card.Container
            palette="inverse"
            max_width="75"
        >
            <Card.Header>SLIDE Overlay</Card.Header>

            <Card.Footer>
                <Overlay.Button
                    palette="auto"
                    variation="clear"
                >
                    Dismiss
                </Overlay.Button>
            </Card.Footer>
        </Card.Container>
    </Overlay.Section>
</Overlay.Container>

Properties

Overlay.Container

Name Description Types
logic_id Renders a as sibling before child , which controls the visible state via CSS.
string
logic_state Controls the visible state of the whenever logic_id is set.
boolean
focus_first Configures the starting element used to set the boundaries of the focus trapping looping. Otherwise, the first focusable element found will be used.
null HTMLElement string
focus_last Configures the end element used to set the boundaries of the focus trapping looping. Otherwise, the last focusable element found will be used.
null HTMLElement string
focus_target Configures the element given focus when logic_state is active. Otherwise, the first focusable element found will be used.
null HTMLElement string
dismissible Enables the user to press ESC or click the to dismiss.
boolean
loading When the property is set and the logic_state view is not active, the child content in is not rendered to DOM.
lazy
once Enables dismissing of the whenever inner content is clicked.
boolean

Overlay.Section

Name Description Types
animation Selects the animation to be ran whenever logic_state is active.
clip fade scale (DEFAULT) slide
direction Sets the direction in which the selected animation will move to, if applicable.
bottom (DEFAULT) left right top
orientation Renders the children horizontally.
horizontal {VIEWPORT}:horizontal
alignment Adjusts where the child content will be placed within the along both axis.
center (DEFAULT) stretch {VIEWPORT}:{ALIGNMENT}
alignment_x Adjusts where the child content will be placed within the along the horizontal axis.
center (DEFAULT) stretch left right {VIEWPORT}:{ALIGNMENT}
alignment_y Adjusts where the child content will be placed within the along the vertical axis.
center (DEFAULT) stretch bottom top {VIEWPORT}:{ALIGNMENT}
spacing Adjusts the visual spacing between child content in the .
nano tiny small medium large huge massive {VIEWPORT}:{SPACING}
spacing_x Adjusts the horizontal visual spacing between child content in the .
nano tiny small medium large huge massive {VIEWPORT}:{SPACING}
spacing_y Adjusts the vertical visual spacing between child content in the .
nano tiny small medium large huge massive {VIEWPORT}:{SPACING}

Events

Overlay.Container

Name Description Types
active Fires whenever the is activated.
CustomEvent<void>
dismiss Fires whenever the is dismissed.
CustomEvent<void>

Slots

Overlay.Container

Name Description Types
default Default unnamed slot.
{}

Overlay.Button

Name Description Types
default Default unnamed slot.
{}

Overlay.Group

Name Description Types
default Default unnamed slot.
{}

Overlay.Section

Name Description Types
default Default unnamed slot.
{}