CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.6.3...v0.6.4

• Card

  • Fixed missing <Card.Figure fit radius shape> support, to match <Figure> Property API.

• keybind

  • Fixed make_keybind_shortcut missing as a package export.
  • Updated make_keybind_shortcut action to allow override of preset options aside from IKeybindOptions.on_bind.

• Tile

  • Fixed missing <Tile.Figure fit radius shape> support, to match <Figure> Property API.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.6.2...v0.6.3

• Aside

  • <Aside.Container actions> — Fixed property not applying actions to element.

• Divider

  • <Divider actions> — Fixed property not applying actions to element when using text divider.
  • <Divider class> — Fixed property not applying class to element.

• keybind

  • Added make_keybind_shortcut({binds: string, repeat?: boolean, repeat_throttle?: number, throttle_cancel?: boolean}): (element: Document | Element, {on_bind}) => IKeybindHandle — Useful for developers defining their own shortcut functions.
  • Fixed ignoring keybinds that use + (plus) key, e.g. keybind({binds: "control++"})

• Omni

  • <Omni.Container actions> — Fixed property not applying actions to element.

FIREFOX USERS: View this blog post on the documentation website to get the viewable .webm videos.

One feature of commonly required in Web Applications is a select Component that can ingest a data structure and output a list of selectable options. Previously Kahi UI didn't have this feature, now it does and is fully styled!

https://user-images.githubusercontent.com/31122674/156348572-5534e602-7bdb-40e0-844c-00e4202effdc.mp4

Searching

Not only that. Just like DataTable, fuzzy search is also supported!

https://user-images.githubusercontent.com/31122674/156348601-d5e31570-1167-4199-b10a-a038ef1b3243.mp4

Multiple

And of course, multiple choices are allowed!

https://user-images.githubusercontent.com/31122674/156348690-3aff75d1-9e5d-4913-99aa-78aa71f1dab7.mp4

Want the user to only be able to select a maximum amount of choices? Sure!

https://user-images.githubusercontent.com/31122674/156348649-9bade6f9-b4b4-4d64-b6d4-144d7046b70c.mp4

Conclusion

There are many more features documented over at the DataSelect documentation. So check it out!

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.6.1...v0.6.2

• DataSelect

  • Added new Component! Similar to DataTable, allows you to provide a list of data structures to create a dropdown of selectable options.

  • <svelte:fragment slot="default" let:index={number} let:item={IDataSelectItem}> — Allows for overriding of the default display option text.

  • <DataSelect items={IDataSelectItem[]}> — Sets the options displayed to the user.

    • IDataSelectItem.disabled: boolean — Controls if the specific option is disabled.
    • IDataSelectItem.id: string — Controls the element ID assigned to the option's <input /> element.
    • IDataSelectItem.palette: "auto" | "inverse" | "accent" | "dark" | "light" | "alert" | "affirmative" | "informative" | "negative" — Alters the color palette of the inner <Check> or <Radio> Component.
    • IDataSelectItem.text: string — Controls the text displayed to the user for the option.
    • IDataSelectItem.value: string — Controls the form value associated with the option. If unset, IDataSelectItem.id will be used.

  • <DataSelect multiple={boolean}> — Controls whether multiple options can be selected by the user.

    • <DataSelect max={number}> — Controls how many multiple choices a user can select when enabled.

  • <DataSelect logic_name={string}> — Controls the form name that prefixes all options.

  • <DataSelect logic_state={string | string[]}> — Controls which options are selected.

  • <DataSelect searching={string}> — Controls the current searching filter in the inner TextInput value.

    • <DataSelect searching_algorithm={(item: IDataSelectItem, searching?: string) => boolean}> — Allows implementing of custom search filtering.

  • <DataSelect placeholder={string}> — Alters displayed text while closed or if no options are selected.

  • <DataSelect palette={"auto" | "inverse" | "accent" | "dark" | "light" | "alert" | "affirmative" | "informative" | "negative"}> — Alters the color palette of the inner TextInput Component.

  • <DataSelect sizing={"nano", "tiny", "small", "medium", "large", "huge", "massive", "${VIEWPORT}:${SIZE}"}>— Alters the sizing of the innerTextInput Component.

  • <DataSelect variation={"flush"}> — Alters to render the choices inline instead of a Popover.

• DataTable

  • <DataTable searching_algorithm> — Updated to provide <DataTable searching> instead of needing to bind to retrieve value.

    • <DataTable searching_algorithm={(item: IDataSelectItem) => boolean}> -> <DataTable searching_algorithm={(item: IDataSelectItem, searching?: string) => boolean}>

• DateTimeStamp

  • <DateTimeStamp timestamp={number}> — Added support to handle UNIX Epoch number timestamps, e.g. 1646210184506
  • <DateTimeStamp timestamp={string}> — Added support to handle UTC Instant string timestamps, e.g. 2022-03-02T08:28:58.891Z / 2020-01-23T17:04:36.491865121-08:00

• Popover

  • <Popover.Container variation="control"> — Activates the <Popover.Section> content when sibling content is focused.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.6.0...v0.6.1

• Fixed packaging file inclusion.

v0.6.0 Alpha 1

Migrations: https://kahi-ui.nbn.dev/docs/migrations/0.5.x-to-0.6.x

Hi and thanks for waiting for the v0.6.0 release! I know feature updates has stalled completely for a while due to the major rearchitecture going on. But it's allowed me to include two major features that I'm sure most people will love! You know what "they" say, something something lessons learned the hard way...

Custom Builds

For more information, see the Custom Builds documentation.

It's been a long time since the very first public v0.2.0 release, and A LOT of features have been added in. Which with modern toolchains like Vite, Javascript can be easily tree shaken! What can't be tree shaken however, is the CSS distributables. As of this release, the Framework CSS distributable is a whopping 441+ KiB [MIN: 376+ kB] [MIN-BROTLI: 20+ KiB] [MIN-GZIP: 33+ KiB]. Which is A LOT of raw CSS. Even with the minified version being compressed for transfer.

One of the big features in this update is being able to download the source code of any release and disabling specific CSS features via custom builds. Using the build script, we can disable sources of bloat, like the global utility responitivitiy values. e.g. <* margin={["mobile:small"]}>

npm run build:framework -- --disable-globals-intrinsics-responsitivity

Which takes the Framework CSS distributable from 441+ KiB to 250+ KiB (MIN: 215+ kB) (MIN-BROTLI: 15+ KiB) (MIN-GZIP: 19+ KiB). That's about a ~56% reduction alone!

So with this feature you can highly tune your bundle size by excluding features you don't need. This does come with the drawback of needing to manually rebuild (or in a CI) the CSS each time you update Kahi UI. In the future, having a Vite plugin that can on-demand rebuild the SASS codebase will be looked at. And also whenever dart-sass is compatible, integrate a Custom Build and Custom Theme builder into the documentation site.

Custom Themes

For more information, see the Custom Themes documentation.

Previously the only documented way of customizing the theme of Kahi UI was using the per-Component CSS Custom Properties that were available and documented. However the overall global theme was not easily customizable or documented. Now with Custom Builds (see above), you can easily create your own themes.

Want to add a new palette color that instantly works? Open and edit the src/themes/default/_theme.scss file. And simply use the built-in palette generator and define a new constant.

@include constants.define(
  (
    "palettes": (
      "<PALETTE>": generators.palette(
          $dark: (
            // Base darkmode color used to generate shades, can be in any color
            "base": <COLOR>,
            // How much of the `dark` palette should be mixed into the base color per shade
            "stepping": <PERCENTAGE>,
          ),
          $light: (
            // Base lightmode color used to generate shades, can be in any color
            "base": <COLOR>,
            // How much of the `light` palette should be mixed into the base color per shade
            "stepping": <PERCENTAGE>,
          )
        ),
    ),
  )
);

e.g.

@include constants.define(
    (
        "palettes": (
            "brand": generators.palette(
                    $dark: (
                        "base": hsl(200, 25%, 47.5%),
                        "stepping": 4%,
                    ),
                    $light: (
                        "base": hsl(200, 30%, 47.5%),
                        "stepping": 4%,
                    )
                ),
        ),
    )
);

Alternatively, you can manually specify shades.

@include constants.define(
    (
        "palettes": (
            "brand": (
                "dark": (
                    "base": hsl(200deg, 25%, 47.5%),
                    "foreground": "light",
                    "lightest": hsl(201deg, 24%, 40%),
                    "lighter": hsl(200deg, 24%, 42%),
                    "light": hsl(200deg, 24%, 43%),
                    "normal": hsl(200deg, 24%, 44%),
                    "bold": hsl(200deg, 24%, 46%),
                    "bolder": hsl(200deg, 25%, 47.5%),
                    "boldest": hsl(199deg, 23%, 49%),
                ),
                "light": (
                    "base": hsl(200deg, 30%, 47.5%),
                    "foreground": "light",
                    "lightest": hsl(199deg, 26%, 57%),
                    "lighter": hsl(200deg, 26%, 55%),
                    "light": hsl(200deg, 26%, 53%),
                    "normal": hsl(199deg, 27%, 51%),
                    "bold": hsl(200deg, 27%, 49%),
                    "bolder": hsl(200deg, 30%, 47.5%),
                    "boldest": hsl(200deg, 29%, 46%),
                ),
            ),
        ),
    )
);

So check out the documentation and explore the rest of the themeing to make your Application really pop!

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.5.7...v0.6.0

• Reworked the internal stylesheet, which includes the final visual refresh before v1.
• Refined / Consolidated the public APIs of all the Actions / Components / Stores (see below), which should all be considered semi-stable now for v1.
• (BREAKING) Themeing is now a separate stylesheet, which should be imported after your Framework import.

import "@kahi-ui/framework/dist/kahi-ui.framework.css";
import "@kahi-ui/framework/dist/kahi-ui.theme.default.css";

• Added the following Components / Component Features

  • *

    • <* elevation> — Added lower / higher elevation tiers.

    • <* palette> — Added neutral / informative semantic palettes.

      • neutral — Typically used to represent a non-destructive action or a secondary action whenever another palette is used.
      • informative — Typically signals that the Component is related to the current content, but is otherwise out of context.

    • <* sizing> — Added nano / massive size tiers to any Component that can scale.

    • <* size> — Is now a shorthand property for expressing width + height.

      • e.g. <* size="viewport-66"> is equivalent to <* width="viewport-66" height="viewport-66">

    • <* width/height/size="nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}"> — Sets dimensions based on the current theme's block sizing variables.

      • You can also prefix any of the size tiers with icon- to access the theme's icon sizing variables instead.
      • e.g. <* size="icon-small">

    • <* width/height/size="viewport-{mobile/tablet/desktop/widescreen}"> — Sets dimensions based on the current theme's Viewport breakpoints.

  • Disclosure

    • Tab

      • <Tab.Anchor disabled={boolean}> — Disables clicks.

  • Display

    • Badge

      • <Badge is="a/button" href={string}> — Alters the Badge to render an underline on hover.
      • <Badge radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}" shape="circle/pill/{VIEWPORT}:{SHAPE}"> — Alters the border radius rendered.

    • Kbd — Renders text in a manner that resembles a keycap from a keyboard, to represent a key binding. e.g. CTRL+C which typically means "Copy"

  • Embedded

    • Figure

      • <Figure radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}"> — Alters the border radius rendered.

  • Feedback

    • Ellipsis

      • <Ellipsis animation="bounce/pulse/ping"> — Alters the internal <Animation animation> used.
      • <Ellipsis iterations={number}> — Sets how many copies of the passed default slot is rendered to DOM. Defaults to 3.

    • Progress

      • <Progress radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}"> — Alters the border radius of the progress bar.

  • Interactables

    • Button

      • <Button radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}" shape="circle/pill/{VIEWPORT}:{SHAPE}"> — Alters the border radius rendered.
      • <Button is="a/label" disabled={boolean}> — Disables clicks.

    • Form

      • <Form.Legend is="legend/span"> — Renders a form heading.
      • <Form.FieldSet> — Renders the child content within a spaced border box.

    • NumberInput

      • <NumberInput radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}" shape="circle/pill/{VIEWPORT}:{SHAPE}"> — Alters the border radius rendered.
      • <NumberInput max={number | string} min={number | string}> — Masks the user input from entering numbers not within the specified range.

    • TextInput

      • <TextInput radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}" shape="circle/pill/{VIEWPORT}:{SHAPE}"> — Alters the border radius rendered.

  • Layouts

    • Article — Adds styling to classes HTML tags used to render typical Markdown output.

      • <a> — Renders similarly to <Anchor> along with a palette color configured by theme.
      • <blockquote> / <cite> — Renders similarly to <Blockquote.Container> / <Blockquote.Cite>, with inner children spacing and bottom margin.
      • <code> / <pre><code> — Renders similarly to <Code>.
      • <hr> — Renders similarly to <Divider>.
      • <h1>~<h6> — Renders similarly to <Heading is="{TAG}"> along with bottom margin.
      • <ol> / <ul> — Renders similarly to <List is="{TAG}"> along with bottom margin + paragraph spacing.
      • <p> — Renders similarly to <Text> along with bottom margin.
      • <small> — Renders similarly to <Text is="small">.

    • Container

      • <Container is="article"> — Renders as an <article> semantic element.

    • Grid

      • <Grid.Container variation="relative"> — Adjusts spacing to be relative to inherited font size.

    • Group

      • <Group variation="stacked" spacing="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}" spacing_x spacing_y> — Alters how close together the child elements are stacked on top of each other.

    • Mosaic

      • <Mosaic.Container variation="relative"> — Adjusts spacing and sizing to be relative to inherited font size.

      • <Mosaic.Item> — Adjusts the layout of a singular Mosaic item.

        • <Mosaic.Item span={number} span_x={number} span_y={number}> — Adjusts the column / row span of the item.

    • Stack

      • <Stack.Container variation="relative"> — Adjusts spacing to be relative to inherited font size.

      • <Stack.Item> — Adjusts the layout of a singular Stack item.

        • <Stack.Item variation="stretch"> — Grows the item to fill any unused space within the <Stack.Container>.

  • Navigation

    • Anchor

      • <Anchor disabled={boolean}> — Disables clicks and alters the appearance.

    • Breadcrumb

      • <Breadcrumb.Button> — Renders as the same appearance of <Breadcrumb.Anchor>, that does not navigate the Browser.
      • <Breadcrumb.(Anchor/Button/Container) palette="auto/inverse/accent/dark/light/alert/affirmative/informative/negative"> — Alters the rendered color palette.

    • Menu

      • <Menu.Container palette="auto/inverse/accent/dark/light/alert/affirmative/informative/negative"> — Alters the rendered color palette of all children.
      • <Menu.Anchor disabled={boolean}> — Disables clicks and alters the appearance.

  • Overlays

    • Backdrop

      • <Backdrop palette="auto/inverse/accent/dark/light/alert/affirmative/informative/negative"> — Alters the rendered color palette.

    • Clickable

      • <Clickable.Anchor disabled={boolean}> — Disables clicks and alters the appearance.

    • Popover

      • <Popover.Container variation="tooltip"> — Activates the <Popover.Section> content when sibling content is focused / hovered.

  • Surfaces

    • Box

      • <Box radius="none/nano/tiny/small/medium/large/huge/massive/{VIEWPORT}:{SIZE}" shape="circle/pill/{VIEWPORT}:{SHAPE}"> — Alters the border radius rendered.

  • Utilities

    • Animation — Applies a repeating animation to the child elements.

      • <Animation on:animationend={AnimationEvent} on:animationstart={AnimationEvent}> — Passthrough of the Browser animationend / animationstart events.
      • <Animation is="div/span"> — Alters the rendered element.
      • <Animation animation="bounce/ping/pulse"> — Alters which animation is rendered.
      • <Animation delay={number | string}> — Adjusts how long until the animation starts playing by a percentage multiplier of the base duration.
      • <Animation duration={number | string}> — Adjusts the duration of the animation by a percentage multiplier.
      • <Animation iterations={number | string}> — Alters how many times the animation loops before stopping.
      • <Animation variation="pause/play"> — Controls whether the animation is playing or not.

    • Transition

      • <Transition is="span"> — Renders as an inline <span> element.

• Added the following Stores / Store Features

  • htmlmode

    htmldark(): Readable<boolean> / htmllight(): Readable<boolean> — Returns true if <html data-mode="dark"> or <html data-mode="light"> are valid respectively.

  • thememode

    • lightmode(): Readable<boolean> — Returns true if (prefers-color-scheme: light) is valid and <html data-mode> is not set, or, if <html data-mode="light"> is valid.

• Fixed the following Components / Component Features

  • Widgets

    • *Picker / *Stepper

      • Fixed datetime Components not working on FireFox 96+.

• Removed the following Components / Component Features

  • Display

    • Badge

      • (BREAKING) <Badge animation> — Removed in favor of the new generalized Animation Component.

  • Embedded

    • Figure

      • (BREAKING) <Figure size> — Removed in favor of new global width / height / size properties.
      • (BREAKING) <Figure size variation="icon"> - Removed in favor of the new global width / height / size properties with icon- prefix.

  • Feedback

    • Dot

      • (BREAKING) <Dot animation> — Removed in favor of the new generalized Animation Component.

    • Spinner

      • (BREAKING) <Spinner> — Removed in favor of <Progress shape="circle">'s new indeterminate appearance.

    • Wave

      • (BREAKING) <Wave> — Removed in favor of the updated <Ellipsis>, which can replicate the affect.

        • e.g. <Ellipsis animation="bounce" iterations="5"><Dot></Ellipsis>

  • Layouts

    • Container

      • (BREAKING) <Container viewport> — Removed in favor of new <* width="viewport-{mobile/tablet/desktop/widescreen}"> global property.

  • Navigation

    • Menu

      • (BREAKING) <svelte:fragment slot="sub-menu"> — With the new DOM structure, the <Menu.Section> Components can just be composed as sibling elements.

  • Typography

    • Text

      • (BREAKING) <Text is="kbd"> — Due to not acting strictly as a text modifier, it migrated to becoming its own Kbd Component.

        • e.g. <Text is="kbd">CTRL+C</Text> -> <Kbd>CTRL+C</Kbd>

  • Widgets

    • *Picker / *Stepper

      • (BREAKING) <* calendar> — Due to breaking bug in the Temporal API polyfill, this property has been removed and will be revisited at a later time.
      • (BREAKING) <* highlight timestamp value> — Due to a breaking bug in the Temporal API polyfill and to align with Web Browsers, this property now only accepts ISO 8601 timestamps which don't specify calendars. Working only with the ISO 8601 calendar.

• Updated the following Components / Component Features

  • *

    • (BREAKING) All Components now use CSS classes to apply stylings instead of selecting semantic elements, e.g <Card.Footer> is now selected via .card--footer instead of .card > footer.

      • (IMPORTANT) You should never be relying on element selectors or the built-in classes regardless for custom styling anyway, it's considered internal unstable API. Always use classes!
      • e.g. <Card.Footer class="my-custom-footer">

  • Feedback

    • Progress

      • <Progress shape="circle" value={undefined}> — Updated the indeterminate appearance to look unique from the progress bar's indeterminate's appearance and to also better serve as a generic spinner.
      • (BREAKING) <Progress size> — Consolidated into <Progress sizing>.

  • Interactables

    • Button

      • (BREAKING) <Button href for value> — Updated to require explicit <Button is="a/label/input"> property to be more consistent with other Component API.

        • e.g. <Button href="..."> -> <Button is="a" href="...">

      • (BREAKING) <Button size> — Consolidated into <Button sizing>.

    • Check

      • (BREAKING) <Check size> — Consolidated into <Check sizing>.

    • Radio

      • (BREAKING) <Radio size> — Consolidated into <Radio sizing>.

    • NumberInput

      • (BREAKING) <NumberInput align> — Consolidated into <NumberInput alignment_x>.
      • (BREAKING) <NumberInput characters> — Consolidated into <NumberInput span_x>.
      • (BREAKING) <NumberInput size> — Consolidated into <NumberInput sizing>.

    • Switch

      • (BREAKING) <Switch size> — Consolidated into <Switch sizing>.

    • TextInput

      • (BREAKING) <TextInput align> — Consolidated into <TextInput alignment_x>.
      • (BREAKING) <TextInput characters lines> — Consolidated into <TextInput span_x span_y>.
      • (BREAKING) <TextInput max_length> — Consolidated into <TextInput max>.
      • (BREAKING) <TextInput min_length> — Consolidated into <TextInput min>.
      • (BREAKING) <TextInput size> — Consolidated into <TextInput sizing>.

  • Layouts

    • Mosaic

      • (BREAKING) <Mosaic> — Renamed <Mosaic> Component to <Mosaic.Container> to facilitate <Mosaic.Item>.

    • Stack

      • (BREAKING) <Stack> — Renamed <Stack> Component to <Stack.Container> to facilitate <Stack.Item>.

  • Navigation

    • Menu

      • (BREAKING) Updated DOM structure to be made up of composable <div> elements internally, no longer using <ul> / <li> elements.

      • (BREAKING) <Menu.Divider> — Was merged into <Menu.Heading> due to being duplicate code.

        • <Menu.Divider /> -> <Menu.Heading />
        • <Menu.Divider>...</Menu.Divider> -> <Menu.Heading variation="divider">...</Menu.Heading>

      • (BREAKING) <Menu.SubMenu> — Renamed <Menu.SubMenu> to <Menu.Section> to be more consistent with other Component API and new DOM structure for Menu.

  • Overlays

    • Overlay

      • (BREAKING) <Overlay.Button size> — Consolidated into <Overlay.Button sizing>.

    • Popover

      • (BREAKING) <Popover.Button size> — Consolidated into <Popover.Button sizing>.

  • Typography

    • Heading

      • (BREAKING) <Heading align> — Consolidated into <Heading alignment_x>.

    • Text

      • (BREAKING) <Text align> — Consolidated into <Text alignment_x>.
      • (BREAKING) <Text size> — Consolidated into <Text sizing>.

  • Widgets

    • DayStepper

      • (BREAKING) <DayStepper step> — Consolidated into <DayStepper steps>.

    • MonthStepper

      • (BREAKING) <MonthStepper step> — Consolidated into <MonthStepper steps>.

    • Pagination

      • (BREAKING) <Pagination href> — Updated to require explicit <Pagination is="a"> property to be more consistent with other Component API.

        • e.g. <Pagination href="..."> -> <Pagination is="a" href="...">

    • TimePicker

      • (BREAKING) <TimePicker disabled={string[]}> — Was updated to accept string[] instead of string.
      • (BREAKING) <TimePicker highlight={string[]}> — Was updated to accept string[] instead of string.

    • YearStepper

      • (BREAKING) <YearStepper step> — Consolidated into <YearStepper steps>.

• Updated the following Stores / Store Features

  • htmlmode

    • (BREAKING) htmlpalette — Renamed to htmlmode to reflect <html data-palette> attribute was renamed to <html data-mode>.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.5.6...v0.5.7

• Deprecated the following Components / Component Features

  • Display

    • Table

      • <Table.Column colspan> / <Table.Heading colspan> — Being consolidated into span_x property, e.g. span_x="3".

        • NOTE: <Table.Column span_x> / <Table.Heading span_x> was made available as an alias in this release, to help with progressively migrating codebases.

      • <Table.Column rowspan> / <Table.Heading rowspan> — Being consolidated into span_y property, e.g. span_y="3".

        • NOTE: <Table.Column span_y> / <Table.Heading span_y> was made available as an alias in this release, to help with progressively migrating codebases.

  • Feedback

    • Dot

      • (BREAKING) <Dot animation> — Being replaced with generalized <Animation> Component.

    • Spinner

      • (BREAKING) <Spinner> — Being replaced by <Progress shape="circle" value={undefined}> indeterminate animation.

    • Wave

      • (BREAKING) <Wave> — Being replaced by expanded <Ellipsis> functionality, e.g. <Ellipsis animation="bounce" iterations="5">.

  • Interactables

    • Button

      • (BREAKING) <Button href for value> — Will require explicit is property being set to switch between HTML tags.

        • NOTE: <Button is="a/label/input"> was made available as an optional property in this release, to help with progressively migrating codebases.

    • NumberInput

      • (BREAKING) <NumberInput characters> — Being consolidated into span_x property, e.g. span_x="3".

        • NOTE: <NumberInput span_x> was made available as an alias in this release, to help with progressively migrating codebases.

    • TextInput

      • (BREAKING) <TextInput characters> — Being consolidated into span_x property, e.g. span_x="3".

        • NOTE: <TextInput span_x> was made available as an alias in this release, to help with progressively migrating codebases.

      • (BREAKING) <TextInput lines> — Being consolidated into span_y property, e.g. span_y="3".

        • NOTE: <TextInput span_y> was made available as an alias in this release, to help with progressively migrating codebases.

      • (BREAKING) <TextInput max_length> — Being consolidated into max property, e.g. max="8".

        • NOTE: <TextInput max> was made available as an alias in this release, to help with progressively migrating codebases.

      • (BREAKING) <TextInput min_length> — Being consolidated into min property, e.g. min="2".

        • NOTE: <TextInput min> was made available as an alias in this release, to help with progressively migrating codebases.

  • Typography

    • Text

      • (BREAKING) <Text is="kbd"> — Will be elevated to a standalone <Kbd> Component.

  • Widgets

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

      • (BREAKING) <* calendar> — Being removed due to not accepting non ISO 8601 calendar datestamps in the future and to better align with Browsers.

    • DayStepper / MonthStepper / YearStepper

      • (BREAKING) <* step> — Being consolidated into steps property, e.g. steps="3".

        • NOTE: <* steps> was made available as an alias in this release, to help with progressively migrating codebases.

    • TimePicker

      • (BREAKING) <TimePicker highlight> — Will be updated to accept string arrays (string[]) instead of singular strings (string).

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.5.5...v0.5.6

• Fixed the following Stores / Store Features

  • darkmode

    • Fixed missing import to readable from svelte/store which would cause darkmode to throw an exception on SSR.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.5.4...v0.5.5

• Vendored new @js-temporal/polyfill v0.3.0 version.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.5.3...v0.5.4

• Upgraded @js-temporal/polyfill v0.2.0 -> v0.3.0.

  • NOTE: Fixes Chrome 96+ not working on the datetime Widgets.
  • IMPORTANT: Firefox 96+ is still broken, although with a different issue regarding non-ISO 8601 calendar handling.

• Deprecated the following Components / Component Features

  • Embedded

    • Figure

      • (BREAKING) <Figure variation="icon"> — Being replaced with global icon- prefixed size property values, e.g. size="icon-small".

  • Feedback

    • Progress

      • (BREAKING) <Progress size> — Being consolidated into sizing property, e.g. sizing="small".

        • NOTE: <Progress sizing> was made available as an alias in this release, to help with progressively migrating codebases.

    • Spinner

      • (BREAKING) <Spinner size> — Being consolidated into sizing property, e.g. sizing="small".

        • NOTE: <Spinner sizing> was made available as an alias in this release, to help with progressively migrating codebases.

  • Interactables

    • Button

      • (BREAKING) <Button size> — Being consolidated into sizing property, e.g. sizing="small".

        • NOTE: <Button sizing> was made available as an alias in this release, to help with progressively migrating codebases.

    • Check

      • (BREAKING) <Check size> — Being consolidated into sizing property, e.g. sizing="small".

        • NOTE: <Check sizing> was made available as an alias in this release, to help with progressively migrating codebases.

    • NumberInput

      • (BREAKING) <NumberInput align> — Being consolidated into alignment_x property, e.g. alignment_x="justify".

        • NOTE: <NumberInput alignment_x> was made available as an alias in this release, to help with progressively migrating codebases.

      • (BREAKING) <NumberInput size> — Being consolidated into sizing property, e.g. sizing="small".

        • NOTE: <NumberInput sizing> was made available as an alias in this release, to help with progressively migrating codebases.

    • Radio

      • (BREAKING) <Radio size> — Being consolidated into sizing property, e.g. sizing="small".

        • NOTE: <Radio sizing> was made available as an alias in this release, to help with progressively migrating codebases.

    • Switch

      • (BREAKING) <Switch size> — Being consolidated into sizing property, e.g. sizing="small".

        • NOTE: <Switch sizing> was made available as an alias in this release, to help with progressively migrating codebases.

    • TextInput

      • (BREAKING) <TextInput align> — Being consolidated into alignment_x property, e.g. alignment_x="justify".

        • NOTE: <TextInput alignment_x> was made available as an alias in this release, to help with progressively migrating codebases.

      • (BREAKING) <TextInput size> — Being consolidated into sizing property, e.g. sizing="small".

        • NOTE: <TextInput sizing> was made available as an alias in this release, to help with progressively migrating codebases.

  • Layouts

    • Container

      • (BREAKING) <Container viewport> — Being replaced with global viewport- prefixed max_width property values, e.g. max_width="viewport-mobile".

    • Mosaic

      • (BREAKING) <Mosaic> — Being converted into a multi-part Component, <Mosaic.Container>.

    • Stack

      • (BREAKING) <Stack> — Being converted into a multi-part Component, <Stack.Container>.

  • Navigation

    • Menu

      • (BREAKING) <Menu.Divider> / <Menu.Heading> slot="sub-menu" — DOM tree structure for Menu will be restructured, removing the need for the slot.

      • (BREAKING) <Menu.SubMenu> — Being renamed to Framework-consistent <Menu.Section>.

        • NOTE: <Menu.Section> was made available as an alias in this release, to help with progressively migrating codebases.

  • Overlays

    • Overlay

      • (BREAKING) <Overlay.Button size> — Being consolidated into sizing property, e.g. sizing="small".

        • NOTE: <Overlay.Button sizing> was made available as an alias in this release, to help with progressively migrating codebases.

    • Popover

      • (BREAKING) <Popover.Button size> — Being consolidated into sizing property, e.g. sizing="small".

        • NOTE: <Popover.Button sizing> was made available as an alias in this release, to help with progressively migrating codebases.

  • Typography

    • Heading

      • (BREAKING) <Heading align> — Being consolidated into alignment_x property, e.g. alignment_x="justify".

        • NOTE: <Heading alignment_x> was made available as an alias in this release, to help with progressively migrating codebases.

    • Text

      • (BREAKING) <Text align> — Being consolidated into alignment_x property, e.g. alignment_x="justify".

        • NOTE: <Text alignment_x> was made available as an alias in this release, to help with progressively migrating codebases.

• Deprecated the following Stores / Store Features

  • htmlpalette

    • (BREAKING) Being renamed to htmlmode due to theme mode attribute being changed <html data-palette="dark/light"> -> <html data-mode="dark/light">.

      • NOTE: htmlmode was made available as an alias in this release, to help with progressively migrating codebases.

• Updated the following Components / Component Features

  • *

    • <* sveltekit:noscroll={boolean} sveltekit:prefetch={boolean}> — Added missing typings.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.5.2...v0.5.3

• Added the following Actions / Action Features

  • action_activate(element: HTMLElement, options: {on_bind: IKeybindCallback}): IKeybindHandle — Used for activating the current context, e.g. a focused label.

    • Enter, (space)

  • action_exit(element: HTMLElement, options: {on_bind: IKeybindCallback}): IKeybindHandle — Used for exiting the current context, e.g. a prompt.

    • Esc

  • action_submit(element: HTMLElement, options: {on_bind: IKeybindCallback}): IKeybindHandle — Used for submitting the current context, e.g. a focused input.

    • Enter

  • navigate_down(element: HTMLElement, options: {on_bind: IKeybindCallback}): IKeybindHandle — Used for navigating to the next item down.

    • ArrowDown
    • Repeatable, 250ms throttle

  • navigate_left(element: HTMLElement, options: {on_bind: IKeybindCallback}): IKeybindHandle — Used for navigating to the next item left.

    • ArrowLeft
    • Repeatable, 250ms throttle

  • navigate_right(element: HTMLElement, options: {on_bind: IKeybindCallback}): IKeybindHandle — Used for navigating to the next item right.

    • ArrowRight
    • Repeatable, 250ms throttle

  • navigate_up(element: HTMLElement, options: {on_bind: IKeybindCallback}): IKeybindHandle — Used for navigating to the next item up.

    • ArrowUp
    • Repeatable, 250ms throttle

• Added the following Components / Component Features

  • Widgets

    • DataTable — Automatically handles rendering tabular data of rows and columns into HTML.

      • <DataTable columns={{key: keyof T, text: string}[]}> — Configures metadata on how DataTable should renders the tabular data.

      • <DataTable rows={T[]}> — Sets the tabular data that DataTable is to render.

      • <DataTable page={number | string}> — Sets the current page of the pagination.

      • <DataTable paginate={boolean}> — Enables DataTable to split the tabular data into paged views.

      • <DataTable paging={number | string}> — Sets how many rows should appear per page.

      • <DataTable sorting={keyof T}> — Sets which row member that DataTable is currently sorting by.

        • <DataTable columns={{sorting: boolean}[]}> — Enables sorting for the particular column.
        • <DataTable columns={{sorting_algorithm: (a: T[keyof T], b: T[keyof T]) => number}[]}> — Optional custom sorter. By default, all row members are lowercased and alphabetized.

      • <DataTable sorting_mode="ascending/descending"> — Sets which direction DataTable is sorting the row member by.

      • <DataTable searching={string}> — Sets the current search query that DataTable is using to filter the tabular data.

      • <DataTable searching_algorithm={(row: T) => boolean}> — Optional custom searching filter. By default, all row members are lowercased and fuzzy searched.

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

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

      • <DataTable variation={"borders" | "stripes" | ["borders", "stripes"]}> — Alters the appearance of the Component.

      • <svelte:fragment let:key={keyof T} let:row={T}> — Customizes how each column in a row is rendered in a table cell.

      • <svelte:fragment slot="next/previous"> — Customizes the next / previous paging button content.

      • <svelte:fragment slot="unsorted/ascending/descending"> — Customizes the not-sorted, ascending sort, descending sort button content.

• Fixed the following Components / Component Features

  • Widget

    • Pagination

      • Fixed paging button generation not properly showing full step range on tailend of page count.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/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.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/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".

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/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>.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/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.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/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.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.4.11...v0.4.12

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

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/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.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/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.
      • <MonthPicker readonly={boolean}> — Disables toggling on of unselected months.
      • <MonthPicker calendar={string}> — Allows for changing the calendar used for calculations / formatting via Temporal Calendar Codes.
      • <MonthPicker locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
      • <MonthPicker month="2-digit/long/narrow/numeric/short"> — Alters how a displayed month is formatted.
      • <MonthPicker disabled={boolean}> — Disables all months from being selected.
      • <MonthPicker disabled={string[]}> — Disables the given ISO 8601 / RFC 3339 timestamps from being selected.
      • <MonthPicker max={string}> — Sets the maximum month timestamp ISO 8601 / RFC 3339 in the future that can be selected.
      • <MonthPicker min={string}> — Sets the minimum month timestamp ISO 8601 / RFC 3339 in the past that can be selected.
      • <MonthPicker highlight={string}> — Highlights the given ISO 8601 / RFC 3339 timestamps.
      • <MonthPicker timestamp={string}> — Sets the ISO 8601 / RFC 3339 timestamp of the calendar being listed.
      • <MonthPicker value={string[]}> — Sets the selected month ISO 8601 / RFC 3339 timestamps.
      • <MonthPicker palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.
      • <MonthPicker sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.

    • MonthStepper — Built-in Widget for allowing the user to step through months.

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

    • TimePicker — Built-in Widget for allowing the user to pick a time consisting of hour, minutes, and seconds.

      • <TimePicker on:change={CustomEvent<void>}> — Dispatches whenever <TimePicker value> changes.
      • <TimePicker on:now={CustomEvent<void>}> — Dispatches whenever the "NOW" button is clicked when enabled.
      • <TimePicker disabled={boolean}> — Disables any component of time from being selected.
      • <TimePicker now={boolean}> — Enables displaying of the "NOW" button, allowing users to set the Widget to current clock time.
      • <TimePicker scroll={boolean}> — Enables auto scrolling to current time on mounting.
      • <TimePicker readonly={boolean}> — Disables any component of time from being selected without UI alteration.
      • <TimePicker locale={string}> — Alters the locale used for displaying internationalized text via RFC 5646 / BCP 47 language tags.
      • <TimePicker hour="2-digit/numeric"> — Alters how a displayed hour is formatted.
      • <TimePicker hour_12={boolean}> — Alters to showing hours in 12-hour format, and enables displaying of the AM / PM buttons.
      • <TimePicker minute="2-digit/numeric"> — Alters how a displayed minute is formatted.
      • <TimePicker second="2-digit/numeric"> — Alters how a displayed second is formatted.
      • <TimePicker max={string}> — Sets the maximum timestamp ISO 8601 / RFC 3339 in the future that can be selected.
      • <TimePicker min={string}> — Sets the minimum timestamp ISO 8601 / RFC 3339 in the past that can be selected.
      • <TimePicker highlight={string}> — Sets the ISO 8601 / RFC 3339 timestamp of the current time.
      • <TimePicker value={string}> — Sets the selected timestamp ISO 8601 / RFC 3339.
      • <TimePicker palette="accent/dark/light/alert/affirmative/negative"> — Alters the rendered color palette.
      • <TimePicker sizing="tiny/small/medium/large/huge"> — Alters the sizing of the Widget and children Components.

    • YearPicker — Built-in Widget for allowing the user to pick a year from a given decade.

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

    • YearStepper — Built-in Widget for allowing the user to step through years.

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

• Deprecated the following Components / Component Features

  • Layouts

    • Spacer

      • <Spacer variation> — Deprecated in favor of Framework consistent <Spacer is="div/span">.

• Removed the following Components / Component Features

  • Layouts

    • Spacer

      • (BREAKING) <Spacer orientation> — Removed in favor using <Spacer spacing spacing_x spacing_y>, reducing internal styling redundancy.

• Updated the following Components / Component Features

  • Typography

    • Blockquote / Code / Heading / Text

      • Added corresponding class names blockquote / code / heading / text respectively.

    • Text

      • Scoped attributes to text class to reduce CSS specificity conflict.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.4.8...v0.4.9

• Hotfix for missing CSS distributables.

CHANGELOG

ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.4.7...v0.4.8

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