v0.5.2

CHANGELOG

ALL CHANGES: v0.5.1...v0.5.2

• Fixed the following Components / Component Features

  • Disclosure

    • Accordion / Tab

      • <*.Container bind:logic_state> — Fixed two-way binding not working post-mount.

    • Accordion

      • <svelte:fragment slot="close/open"> — Updated to default to <span>&blacktriangledown;/&blacktriangleright;</span> respectively.

v0.5.1

CHANGELOG

ALL CHANGES: v0.5.0...v0.5.1

• Added the following Components / Component Features

  • Interactables

    • Button

      • <Button variation={"subtle" | ["subtle", "clear | "outline"]}> — Removes "attention grabbing" animations like scaling on click, leaving only simple color transitions.

  • Utilities

    • MediaQueryRender — Renders inner content to DOM, only when the specified Media Query is active.

      • <MediaQueryRender fallthrough={boolean}> — When true, always renders content in SSR environments, e.g. SvelteKit
      • <MediaQueryRender queries={string | string[]}> — Sets the Media Query / Queries to validate against.
      • <MediaQueryRender behavior="and/or"> — When you have use Media Queries, you can set MediaQueryRender to only render if both are true, or at least one is true.

    • ViewportRender — Renders inner content to DOM, only when the specified Viewports are active.

      • <ViewportRender fallthrough={boolean}> — When true, always renders content in SSR environments, e.g. SvelteKit
      • <ViewportRender mobile={boolean} tablet={boolean} desktop={boolean} widescreen={boolean}> — When true and the specified Viewport is active, the inner content will be rendered.

  • Widgets

    • Pagination — Built-in Widget for allowing the user to selected the current page in a 1...N range.

      • <Pagination on:select={CustomEvent<{page: number}>}> — Dispatches whenever a button is clicked.

      • <Pagination href={string}> — Renders the navigational buttons as anchors, using a tokening solution to add in paging.

        • Add ${page} anywhere in your link to add paging, e.g. href={"/path/to/view?page=${page}"}.
        • NOTE: The tokening solution is non-standard, you have to encapsulate the href property as a string variable href={""}.

      • <Pagination pages={number}> — Controls how many pages there is for the current content, this is used to calculate which buttons to render.

      • <Pagination steps={number}> — Controls how many steps +/- should be taken rendered from the current page.

      • <Pagination value={number}> — Controls which in the 1...pages range is the current.

      • <Pagination palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.

      • <Pagination sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.

• Updated the following Components / Component Features

  • Interactables

    • Button

      • <Button variation="outline"> — Updated background fill on click to be not as bold, matching variation="clear".

v0.5.0

CHANGELOG

ALL CHANGES: v0.4.14...v0.5.0

• Migrated the following Components: Aside, Omni.

• Added the following Components / Component Features

  • Layouts

    • Position

      • <Position variation="action"> — Affixes the child content in a corner of the viewport.

        • <Position alignment_x="left/right"> — Alters which horizontal corner the child content is affixed to. Defaults to right.
        • <Position alignment_y="top/bottom"> — Alters which vertical corner the child content is affixed to. Defaults to bottom.
        • <Position spacing="tiny/small/medium/large/huge" spacing_x="tiny/small/medium/large/huge" spacing_y="tiny/small/medium/large/huge"> — Controls the spacing between the corner and the child content.

      • <Position variation={["container/viewport", "action/indicator/raised"]}> — Alters the Position variation to be relative to the parent container or viewport.

  • Overlays

    • Backdrop — Renders a dim theme-aware backdrop over the parent container.

  • Utilities

    • Transition

      • <Transition behavior="explicit"> — Changes to using CSS Transitions implementation instead of CSS Animations implementation. Useful for skipping the animation played on first-paint.

• Deprecated the following Components / Component Features

  • Position

    • <Position variation="floated"> — Deprecated in favor of <Position variation="indicator"> for clearer intent of use-case.

• Removed the following Components / Component Features

  • Display / Feedback

    • Badge / Dot

      • (BREAKING) <Badge/Dot position> — Removed previously deprecated feature in favor of Position Component.

  • Interactables

    • Check / Radio / Switch / TextInput

      • (BREAKING) <Check/Radio/Switch/TextInput on:blur on:focus> — Removed previously deprecated feature in favor of <* on:focusin on:focusout> events.

  • Layouts

    • Position

      • (BREAKING) <Position variation="indicator" placement="top/bottom"> — Removed in favor of <Position variation="indicator" alignment_y="top/bottom"> for consistency with rest of the Framework.

    • Spacer

      • (BREAKING) <Spacer orientation> — Removed previously deprecated feature in favor of <Spacer spacing_x spacing_y> properties.
      • (BREAKING) <Spacer variation> — Removed previously deprecated feature in favor of <Spacer is="div/span"> property.

  • Navigation

    • Aside / Omni

      • (BREAKING) <* logic_id> — Removed built-in viewport-based collapsing, compose with Components like Overlay / Popover to mimic old featureset.

  • Overlays

    • Offscreen

      • (BREAKING) Removed in favor of customizing Overlay with the <Overlay.Section animation="slide"> / <Overlay alignment_x alignment_y> properties.

    • Overlay

      • (BREAKING) <Overlay.Container captive> — Removed to promote composability and customization via <Overlay.Backdrop> instead.

  • Utilities

    • ContextBackdrop

      • (BREAKING) Removed in favor of generalized Backdrop and Overlay-specific <Overlay.Backdrop> Components.

    • ContextButton

      • (BREAKING) Removed in favor of Overlays specific <Overlay/Popover.Button> Components.

    • Transition

      • (BREAKING) Removed CSS Theming variables due to limited use-case and current set not supporting new <Transition variation="explicit">.

• Updated the following Components / Component Features

  • Feedback

    • Ellipsis

      • (BREAKING) <Ellipsis character /> — Changed from <Ellipsis character="XXX"> -> <Ellipsis>XXX</Ellipsis>, to support icons and other non-text characters.

  • Overlays

    • Overlay / Popover

      • (BREAKING) Revamped into a multi-pattern Component.

    • Overlay

      • <Overlay.Container>

        • <Overlay.Container logic_id={string}> — Used to synchronize the target CSS state between the backdrop, buttons, and Svelte Contexts.

        • <Overlay.Container logic_state={boolean}> — Used to enable the Overlay, playing an animation to enter/exit depending on state.

        • <Overlay.Container focus_first={HTMLElement | string | null}> — Sets initial focus target element when first opened. Defaults to first focusable element.

        • <Overlay.Container focus_last={HTMLElement | string | null}> — Sets the element treated as first in the focus tabbing order, that focus is trapped with. Defaults to first found focusable element.

        • <Overlay.Container focus_target={HTMLElement | string | null}> — Sets the element that is granted focus when logic_state is true. Focus is restored to previous element when logic_state is false.

        • <Overlay.Container dismissible={boolean}> — Enables dismissal of the Overlay via the ESC key, or by clicking the <Overlay.Backdrop> if applicable.

        • <Overlay.Container loading="lazy"> — Disables rendering <Overlay.Section> inner content to DOM whenever logic_state is false.

        • <Overlay.Container once={boolean}> — Enables dismissal of the Overlay whenever <Overlay.Section> inner content is clicked.

      • <Overlay.Backdrop> — Wrapper for Backdrop that when used within a <Overlay.Container logic_id>, it inherits the value via Svelte Context.

      • <Overlay.Button> — Wrapper for Button that when used within a <Overlay.Container logic_id>, it inherits the value via Svelte Context.

      • <Overlay.Section> — Stretches inner content over the parent container.

        • <Overlay.Section animation="clip/fade/scale/slide"> — Changes which animation set is used for when logic_state is updated. Defaults to scale.

        • <Overlay.Section direction="top/bottom/left/right"> — Changes which direction the animation set is entering from, if applicable.

        • <Overlay.Section orientation="horizontal"> — Alters the inner child elements to layout horizontally.

        • <Overlay.Section alignment="center/stretch" alignment_x="left/right/center/stretch" alignment_y="top/bottom/center/stretch"> — Controls the alignment of the inner content.

        • <Overlay.Section spacing="tiny/small/medium/large/huge" spacing_x="tiny/small/medium/large/huge" spacing_y="tiny/small/medium/large/huge"> — Controls the spacing between each inner child element.

    • Popover

      • <Popover.Container>

        • <Popover.Container logic_id={string}> — Used to synchronize the target CSS state between the backdrop, buttons, and Svelte Contexts.

        • <Popover.Container logic_state={boolean}> — Used to enable the Popover, playing an animation to enter/exit depending on state.

        • <Popover.Container focus_target={HTMLElement | string | null}> — Sets the element that is granted focus when logic_state is true. Focus is restored to previous element when logic_state is false.

        • <Popover.Container dismissible={boolean}> — Enables dismissal of the Popover via the ESC key, <Popover.Section> inner content loses focus, or clicked outside of <Popover.Section>.

        • <Popover.Container loading="lazy"> — Disables rendering <Popover.Section> inner content to DOM whenever logic_state is false.

        • <Popover.Container once={boolean}> — Enables dismissal of the Popover whenever <Popover.Section> inner content is clicked.

      • <Popover.Button> — Wrapper for Button that when used within a <Popover.Container logic_id>, it inherits the value via Svelte Context.

      • <Popover.Section> — Hovers inner content over the parent container.

        • <Popover.Section animation="clip/fade/scale/slide"> — Changes which animation set is used for when logic_state is updated. Defaults to clip.

        • <Popover.Section placement="top/bottom/left/right"> — Which side of the <Popover.Button> the inner content is hovered on.

        • <Popover.Section alignment_x="left/right/center" alignment_y="top/bottom/center"> — Controls the alignment of the inner content.

        • <Popover.Section spacing="tiny/small/medium/large/huge" spacing_x="tiny/small/medium/large/huge" spacing_y="tiny/small/medium/large/huge"> — Between <Popover.Section> and <Popover.Button>.

v0.4.14

CHANGELOG

ALL CHANGES: v0.4.13...v0.4.14

• Added the following Components / Component Features

  • Interactables

    • NumberInput — Subset of TextInput that only accepts numbers into its text field.

      • <NumberInput value={number}> — Accepts / Returns number types instead of strings.

    • TextInput

      • <TextInput variation="flush"> — Added an underline UX affordance whenever the user hovers / focuses the TextInput.

      • <TextInput mask={boolean}> — When enabled, user input into the text field will drop alterations that are invalid.

        • <TextInput on:mask={(event: CustomEvent<{value: string}>) => void}> — Fires whenever <TextInput mask={boolean}> is true. Whenever event.preventDefault is called, the new value alteration will be dropped.
        • <TextInput pattern={string | RegExp}> — Is used whenever <TextInput mask={boolean}> is true, this property is used to mask user input. Dropping any new values that don't match the expression.

v0.4.13

CHANGELOG

ALL CHANGES: v0.4.12...v0.4.13

• Updated button-like <label>-based Components to emulate button-like behavior, e.g. Enter key activates element.

• Updated svelte2tsx -> 0.4.11.

  • Fixes Component properties not retaining comments / JSDoc flags.

• Added the following Actions / Action Features

  • auto_focus(element: HTMLElement, options: IAutoFocusOptions): IAutoFocusHandle — Focuses the first available focusable element within the attached element when enabled, restoring focus whenever disabled.

    • auto_focus(..., {enabled: boolean}) — Enables the auto focusing.
    • auto_focus(..., {target: HTMLElement | string | null}) — Sets a custom element to focus to instead of the first focusable.

  • click_inside — Listens to the click on the attached element, with optional CSS Selector for filtering.

  • click_inside / click_outside

    • *(..., {ignore: string}) — Ignores a given CSS Selector from triggering the on_click_inside / on_click_outside callbacks.

  • keybind(element: HTMLElement, options: IKeybindOptions): IKeybindHandle

    • keybind(..., {throttle_cancel: boolean}) — Enables cancellation (preventDefault / stopPropagation) on throttled processing of keybinds if IKeybindOptions.repeat_throttle is greater than zero (> 0).

  • overflow_clipping(element: HTMLElement, options: IOverflowClippingOptions): IOverflowClippingHandle — Detects when the inner content is clipping the attached element's bounding box.

    • overflow_clipping(..., {enabled: boolean}) — Enables content clipping detection.
    • overflow_clipping(..., {on_clip: (entry: {horizontal: boolean, vertical: boolean}) => void}) — Dispatches whenever the content clipping changes.

  • trap_focus(element: HTMLElement, options: ITrapFocusOptions): ITrapFocusHandle — Traps focusing to content to focusable nested elements within the attached element.

    • trap_focus(..., {enabled: boolean}) — Enables the focus trapping.
    • trap_focus(..., {first: HTMLElement | string | null}) — Sets a custom element to wrap focus to when the attached element's focus is "escaped".
    • trap_focus(..., {last: HTMLElement | string | null}) — Sets a custom element used to detect whenever the attached element's focus is on the last available nested element.

• Added the following Components / Component Features

  • Layouts

    • Scrollable

      • <Scrollable on:scroll> — Dispatches the scroll event.

  • Overlays

    • Offscreen / Overlay

      • <* loading="lazy"> — Disables rendering of inner content while the Component's state is inactive.

• Fixed the following Actions / Action Features

  • keybind(element: HTMLElement, options: IKeybindOptions): IKeybindHandle

    • keybind(..., {on_bind: IKeybindCallback}) — Fixed inline defining of on_bind thrashing internal key state of the bind manager.
    • Fixed calling IKeybindEvent.preventDefault / IKeybindEvent.stopPropagation not working.

• Updated the following Components / Component Features

  • Overlays

    • Offscreen / Overlay

      • Changed from viewport units to relative percentage units to work with inner non-viewport situations.
      • <* focus_target={HTMLElement | string | null}> — Sets initial focus target element when first opened. Defaults to first focusable element.
      • <* focus_first={HTMLElement | string | null}> — Sets the element treated as first in the focus tabbing order, which traps focus (Offscreen / Overlay) or dismisses (Popover). Defaults to first focusable element.
      • <* focus_last={HTMLElement | string | null}> — Sets the element treated as last in the focus tabbing order, which traps focus Offscreen / Overlay. Defaults to last focusable element.

    • Offscreen / Overlay / Popover

      • <* dismissible={boolean}> — Now enables dismissing of Overlays via escape key.

  • Utilities

    • ContextBackdrop

      • Changed from viewport units to relative percentage units to work with inner non-viewport situations.

v0.4.12

CHANGELOG

ALL CHANGES: v0.4.11...v0.4.12

• Vendored @js-temporal/polyfill temporarily to fix edge case with PNPM + SvelteKit development server.

v0.4.11

CHANGELOG

ALL CHANGES: v0.4.10...v0.4.11

• Deprecated all existing instances of <* on:blur on:focus> for <* on:focusout on:focusin> respectively.
• Updated all Components to support globally forwarding the following events: click , contextmenu , dblclick , focusin , focusout , keydown , keyup , pointercancel , pointerdown , pointerenter , pointerleave , pointermove , pointerout , pointerup.
• Updated all Components to support Svelte Action forwarding via <* actions={[[action, options]]}>, e.g.

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

<Box actions={[
    [click_outside, {on_click_outside: () => console.log("clicked!")}]
]}>
    ...
</Box>

• Added the following Components / Component Features

  • Overlays

    • Offscreen / Overlay / Popover

      • <* once={boolean}> — Dismisses the Component whenever an element inside of the it is clicked.

  • Widgets

    • TimePicker

      • Respects system default for <TimePicker hour_12={boolean}> property.

• Fixed the following Components / Component Features

  • Widgets

    • TimePicker

      • Displayed range of clock times will now be flat hh:mm:ss values, stripping microsecond, minisecond, and nanosecond units.

• Updated the following Components / Component Features

  • Display

    • DateStamp / DateTimeStamp / TimeStamp

      • Updated typings to make calendar and locale properties optional as originally intended.

  • Widgets

    • DayPicker / DayStepper / MonthPicker / MonthStepper / TimePicker / YearPicker / YearStepper

      • Updated typings to make calendar, day, disabled, highlight, locale, month, step, timestamp, value, and weekday properties optional.

v0.4.10

CHANGELOG

ALL CHANGES: v0.4.9...v0.4.10

• Added CSS Theming Variables to the following Components: Blockquote, Code, Heading, Text.

• Added suggestions to existing deprecation notices.

• Added the following Components / Component Features

• Fixed typings for <* hidden={boolean}> global modifier.

• Migrated the following Components: Grid, Mosaic, Spacer, Stack.

• Updated <* spacing spacing_x spacing_y> global modifiers to use !important when applied.

• Added the following Components / Component Features

  • Display

    • DateStamp — Formats a ISO 8601 / RFC 3339 date timestamp into a readable human string rendered via <time>.

      • <DateStamp calendar={string}> — Alters the calendar used for calculations / formatting via Temporal Calendar Codes.
      • <DateStamp locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
      • <DateStamp day="2-digit/numeric"> — Alters how a displayed day is formatted.
      • <DateStamp month="2-digit/long/narrow/numeric/short"> — Alters how a displayed month is formatted.
      • <DateStamp weekday="long/narrow/short"> — Alters how a displayed weekday is formatted.
      • <DateStamp year="2-digit/numeric"> — Alters how a displayed year is formatted.
      • <DateStamp timestamp={string}> — Sets the ISO 8601 / RFC 3339 timestamp being formatted for display.

    • DateTimeStamp — Formats a ISO 8601 / RFC 3339 datetime timestamp into a readable human string rendered via <time>, supporting timezones.

      • <DateTimeStamp calendar={string}> — Allows for changing the calendar used for calculations / formatting via Temporal Calendar Codes.
      • <DateTimeStamp locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
      • <DateTimeStamp day="2-digit/numeric"> — Alters how a displayed day is formatted.
      • <DateTimeStamp month="2-digit/long/narrow/numeric/short"> — Alters how a displayed month is formatted.
      • <DateTimeStamp weekday="long/narrow/short"> — Alters how a displayed weekday is formatted.
      • <DateTimeStamp year="2-digit/numeric"> — Alters how a displayed year is formatted.
      • <DateTimeStamp hour="2-digit/numeric"> — Alters how a displayed hour is formatted.
      • <DateTimeStamp hour_12={boolean}> — Alters to showing hours in 12-hour format.
      • <DateTimeStamp minute="2-digit/numeric"> — Alters how a displayed minute is formatted.
      • <DateTimeStamp second="2-digit/numeric"> — Alters how a displayed second is formatted.
      • <DateTimeStamp timestamp={string}> — Sets the ISO 8601 / RFC 3339 timestamp being formatted for display.

    • TimeStamp — Formats a ISO 8601 / RFC 3339 time timestamp into a readable human string rendered via <time>.

      • <TimeStamp locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
      • <TimeStamp hour="2-digit/numeric"> — Alters how a displayed hour is formatted.
      • <TimeStamp hour_12={boolean}> — Alters to showing hours in 12-hour format.
      • <TimeStamp minute="2-digit/numeric"> — Alters how a displayed minute is formatted.
      • <TimeStamp second="2-digit/numeric"> — Alters how a displayed second is formatted.
      • <TimeStamp timestamp={string}> — Sets the ISO 8601 / RFC 3339 timestamp being formatted for display.

  • Layouts

    • Spacer

      • <Spacer is="div/span"> — Alters HTML element used to render the Spacer, div (block / size) / span (inline / margin).

  • Widgets

    • Widget — Provides a holistic set of UI primitives for built-in Widgets.

      • <Widget.Container> — Renders a spaced grid that provides styling to other <Widget.*> Components.
      • <Widget.Button> — Renders a button similar to <Menu.Button>.
      • <Widget.Header> — Renders text with title formatting.
      • <Widget.Section> — Renders children in a spaced grid.

    • DayPicker — Built-in Widget for allowing the user to select a calendar date from a given month.

      • <DayPicker on:change={CustomEvent<void>}> — Dispatches whenever <DayPicker value> changes.
      • <DayPicker multiple={boolean}> — Enables selection of multiple days.
      • <DayPicker once={boolean}> — Disables toggling off of already selected days.
      • <DayPicker readonly={boolean}> — Disables toggling on of unselected days.
      • <DayPicker calendar={string}> — Allows for changing the calendar used for calculations / formatting via Temporal Calendar Codes.
      • <DayPicker locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
      • <DayPicker day="2-digit/numeric"> — Alters how a displayed day is formatted.
      • <DayPicker weekday="long/narrow/short"> — Alters how a displayed weekday is formatted.
      • <DayPicker disabled={boolean}> — Disables all days from being selected.
      • <DayPicker disabled={string[]}> — Disables the given ISO 8601 / RFC 3339 timestamps from being selected.
      • <DayPicker max={string}> — Sets the maximum day timestamp ISO 8601 / RFC 3339 in the future that can be selected.
      • <DayPicker min={string}> — Sets the minimum day timestamp ISO 8601 / RFC 3339 in the past that can be selected.
      • <DayPicker highlight={string[]}> — Highlights the given ISO 8601 / RFC 3339 timestamps.
      • <DayPicker timestamp={string}> — Sets the ISO 8601 / RFC 3339 timestamp of the calendar being listed.
      • <DayPicker value={string[]}> — Sets the selected day ISO 8601 / RFC 3339 timestamps.
      • <DayPicker palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.
      • <DayPicker sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.

    • DayStepper — Built-in Widget for allowing the user to step through days.

      • <DayStepper on:change={CustomEvent<void>}> — Dispatches whenever <DayStepper value> changes.
      • <DayStepper disabled={boolean}> — Disables days from being stepped through.
      • <DayStepper readonly={boolean}> — Disables days from being stepped through without visual changes.
      • <DayStepper calendar={string}> — Allows for changing the calendar used for calculations / formatting via Temporal Calendar Codes.
      • <DayStepper locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
      • <DayStepper day="2-digit/numeric"> — Alters how a displayed day is formatted.
      • <DayStepper month="2-digit/long/narrow/numeric/short> — Alters how a displayed month is formatted.
      • <DayStepper weekday="long/narrow/short"> — Alters how a displayed weekday is formatted.
      • <DayStepper max={string}> — Sets the maximum day timestamp ISO 8601 / RFC 3339 in the future that can be selected.
      • <DayStepper min={string}> — Sets the minimum day timestamp ISO 8601 / RFC 3339 in the past that can be selected.
      • <DayStepper step={number}> — Sets how many days are stepped through at each button click.
      • <DayStepper value={string}> — Sets the selected day timestamp ISO 8601 / RFC 3339.
      • <DayStepper palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.
      • <DayStepper sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.

    • MonthPicker — Built-in Widget for allowing the user to pick a quaterly month from a given year.

      • <MonthPicker on:change={CustomEvent<void>}> — Dispatches whenever <MonthPicker value> changes.
      • <MonthPicker multiple={boolean}> — Enables selection of multiple months.
      • <MonthPicker once={boolean}> — Disables toggling off of already selected months.
        ...

v0.4.9

CHANGELOG

ALL CHANGES: v0.4.8...v0.4.9

• Hotfix for missing CSS distributables.

v0.4.8

CHANGELOG

ALL CHANGES: v0.4.7...v0.4.8

• Reduced package size via fine-grained files field in package.json.