Straight-forward Svelte UI for the Web
ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.6.3...v0.6.4
Card
<Card.Figure fit radius shape> support, to match <Figure> Property API.keybind
make_keybind_shortcut missing as a package export.make_keybind_shortcut action to allow override of preset options aside from IKeybindOptions.on_bind.Tile
<Tile.Figure fit radius shape> support, to match <Figure> Property API.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
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.+ (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
.webmvideos.
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!
Not only that. Just like DataTable, fuzzy search is also supported!
And of course, multiple choices are allowed!
Want the user to only be able to select a maximum amount of choices? Sure!
There are many more features documented over at the DataSelect documentation. So check it out!
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.ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.6.0...v0.6.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...
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.
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!
ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.5.7...v0.6.0
v1.v1.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.
<* 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.
icon- to access the theme's icon sizing variables instead.<* 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
Removed the following Components / Component Features
Display
Badge
<Badge animation> — Removed in favor of the new generalized Animation Component.Embedded
Figure
<Figure size> — Removed in favor of new global width / height / size properties.<Figure size variation="icon"> - Removed in favor of the new global width / height / size properties with icon- prefix.Feedback
Dot
<Dot animation> — Removed in favor of the new generalized Animation Component.Spinner
<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.
<Ellipsis animation="bounce" iterations="5"><Dot></Ellipsis>
Layouts
Container
<Container viewport> — Removed in favor of new <* width="viewport-{mobile/tablet/desktop/widescreen}"> global property.Navigation
Menu
<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.
<Text is="kbd">CTRL+C</Text> -> <Kbd>CTRL+C</Kbd>
Widgets
*Picker / *Stepper
<* calendar> — Due to breaking bug in the Temporal API polyfill, this property has been removed and will be revisited at a later time.<* 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.
<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.<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.
<Button href="..."> -> <Button is="a" href="...">
(BREAKING) <Button size> — Consolidated into <Button sizing>.
Check
<Check size> — Consolidated into <Check sizing>.Radio
<Radio size> — Consolidated into <Radio sizing>.NumberInput
<NumberInput align> — Consolidated into <NumberInput alignment_x>.<NumberInput characters> — Consolidated into <NumberInput span_x>.<NumberInput size> — Consolidated into <NumberInput sizing>.Switch
<Switch size> — Consolidated into <Switch sizing>.TextInput
<TextInput align> — Consolidated into <TextInput alignment_x>.<TextInput characters lines> — Consolidated into <TextInput span_x span_y>.<TextInput max_length> — Consolidated into <TextInput max>.<TextInput min_length> — Consolidated into <TextInput min>.<TextInput size> — Consolidated into <TextInput sizing>.Layouts
Mosaic
<Mosaic> — Renamed <Mosaic> Component to <Mosaic.Container> to facilitate <Mosaic.Item>.Stack
<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
<Overlay.Button size> — Consolidated into <Overlay.Button sizing>.Popover
<Popover.Button size> — Consolidated into <Popover.Button sizing>.Typography
Heading
<Heading align> — Consolidated into <Heading alignment_x>.Text
<Text align> — Consolidated into <Text alignment_x>.<Text size> — Consolidated into <Text sizing>.Widgets
DayStepper
<DayStepper step> — Consolidated into <DayStepper steps>.MonthStepper
<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.
<Pagination href="..."> -> <Pagination is="a" href="...">
TimePicker
<TimePicker disabled={string[]}> — Was updated to accept string[] instead of string.<TimePicker highlight={string[]}> — Was updated to accept string[] instead of string.YearStepper
<YearStepper step> — Consolidated into <YearStepper steps>.Updated the following Stores / Store Features
htmlmode
htmlpalette — Renamed to htmlmode to reflect <html data-palette> attribute was renamed to <html data-mode>.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".
<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".
<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
<Dot animation> — Being replaced with generalized <Animation> Component.Spinner
<Spinner> — Being replaced by <Progress shape="circle" value={undefined}> indeterminate animation.Wave
<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.
<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".
<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".
<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".
<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".
<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".
<TextInput min> was made available as an alias in this release, to help with progressively migrating codebases.Typography
Text
<Text is="kbd"> — Will be elevated to a standalone <Kbd> Component.Widgets
DayPicker / DayStepper / MonthPicker / MonthStepper / YearPicker / YearStepper
<* 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".
<* steps> was made available as an alias in this release, to help with progressively migrating codebases.TimePicker
<TimePicker highlight> — Will be updated to accept string arrays (string[]) instead of singular strings (string).ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.5.5...v0.5.6
Fixed the following Stores / Store Features
darkmode
readable from svelte/store which would cause darkmode to throw an exception on SSR.ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.5.4...v0.5.5
@js-temporal/polyfill v0.3.0 version.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.
Deprecated the following Components / Component Features
Embedded
Figure
<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".
<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".
<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".
<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".
<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".
<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".
<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".
<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".
<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".
<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".
<TextInput sizing> was made available as an alias in this release, to help with progressively migrating codebases.Layouts
Container
<Container viewport> — Being replaced with global viewport- prefixed max_width property values, e.g. max_width="viewport-mobile".Mosaic
<Mosaic> — Being converted into a multi-part Component, <Mosaic.Container>.Stack
<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>.
<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".
<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".
<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".
<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".
<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">.
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.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
250ms throttlenavigate_left(element: HTMLElement, options: {on_bind: IKeybindCallback}): IKeybindHandle — Used for navigating to the next item left.
ArrowLeft
250ms throttlenavigate_right(element: HTMLElement, options: {on_bind: IKeybindCallback}): IKeybindHandle — Used for navigating to the next item right.
ArrowRight
250ms throttlenavigate_up(element: HTMLElement, options: {on_bind: IKeybindCallback}): IKeybindHandle — Used for navigating to the next item up.
ArrowUp
250ms throttleAdded 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