Bot releases are hidden (Show)
Published by novacbn almost 3 years ago
ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.4.6...v0.4.7
Published by novacbn almost 3 years ago
ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.4.5...v0.4.6
Revamped internal context handling for: Breadcrumb
.
Added the following Components / Component Features
Disclosure
Carousel
— Renders children as a carousel of slide elements, with snap scrolling.
<Carousel.Container>
— Wrapper Component providing the scrolling context.
<Carousel.Container orientation="vertical">
— Used to set the slide items to scroll vertically, instead of horizontally.<Carousel.Container spacing="tiny/small/medium/large/huge" spacing_x="tiny/small/medium/large/huge" spacing_y="tiny/small/medium/large/huge">
— Used to configure gap spacing between each slide item.<Carousel.Section>
— Used for wrapping Carousel
slides.
Interactables
FileDropInput
— Renders a stylized box that accepts file drops and clicks to open file open prompt.
<FileDropInput accept={string}>
— Used to set an accepted allow list of file types in file open prompt. Binding to accept
.<FileDropInput multiple={boolean}>
— Used to enable the underlying <input type="file" />
to accept multiple files at once. Binding to multiple
.<FileDropInput palette="accent/dark/light/alert/affirmative/negative">
— Used to change the rendered color palette.Published by novacbn about 3 years ago
ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.4.4...v0.4.5
Added CSS Theming Variables to the following Components: Tab
.
Added the following Components / Component Features
Disclosure
Accordion
— Presents child content in a stack, where each item can be selectively clicked to be revealed.
<Accordion.Container>
— Wrapper Component which provides stylings and Svelte Contexts for radio / checkbox button functionality.
<Accordion.Container behavior="inclusive/exclusive">
— Used to switch the Accordion
between checkbox (inclusive
) and radio (exclusive
) button modes.<Accordion.Container logic_name="XXX">
— Used to synchronize the form name between each radio / checkbox button.<Accordion.Container logic_state="XXX">
— Used to set which form ID(s) is the currently active accordion item(s).<Accordion.Group>
— Used for grouping together <Accordion.Label>
/ <Accordion.Section>
Components.
<Tab.Group logic_id="XXX">
— Used to synchronize the form IDs between the radio buttons, tab content, and Svelte Contexts.<Accordion.Label>
— Used for creating radio / checkbox buttons for selecting the active accordion item(s).
<Accordion.Label state>
— Wrapper around <input type="checkbox/radio" checked={false/true}>
, used to make the item active.<Accordion.Label palette="accent/dark/light/alert/affirmative/negative">
— Used to change the rendered color palette.<Accordion.Section>
— Used for wrapping accordion item content that will render when active.
<Accordion.Section loading="lazy">
— Disables rendering of item content to DOM when not active.Updated the following Components / Component Features
Utilities
Transition
<Transition animation="clip">
— Reversed direction
property handling so enter
variations come from their direction
, rather than expand to their direction
. Matching the <Transition animation="slide">
variations.Published by novacbn about 3 years ago
ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.4.3...v0.4.4
Fixed Svelte Compiler ARIA warnings about missing for
/ href
attribute, even if provided by developer.
Moved base element styles earlier in stylesheet imports, to reduce specificity conflicts.
Added the following Components / Component Features
Fixed the following Components / Component Features
Disclosure
Tab
<Tab.Anchor>
— Fixed text coloring being inherited from base <Anchor>
styles.Interactables
Form
<Form.Label for="XXX">
— Fixed authoritive context not being set when no parent context is found.Removed the following Components / Component Features
Interactables
Button
<Button for="XXX">
— Removed the ability to set empty <label for>
via true
value.Updated the following Components / Component Features
Display
Table
<Table.Column bind:element>
/ <Table.Heading bind:element>
— Changed from deprecated HTMLTableDataCellElement
/ HTMLTableHeaderCellElement
-> HTMLTableCellElement
.Interactables
Button
<Button for>
/ <Button href>
— Changed from using role=button
to .button
class as the selector.Published by novacbn about 3 years ago
ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.4.2...v0.4.3
Added CSS Theming Variables to the following Components: Button
, Check
, Form
, Radio
, Switch
, TextInput
.
Revamped internal context handling for Check
, Form
, HiddenInput
, Radio
, Switch
, Tab
, TextInput
.
Added the following Components / Component Features
Interactables
Switch
<Form.Label>
with spacing as siblings.Overlays
Clickable
— Increases clickable area of child <Clickable.Anchor>
/ <Clickable.Label>
to the entirety of parent. Surfacing any other interactable Components above that.
<Clickable.Container>
— Wrapper display: contents
Component which sets position: relative
on immedidate children.<Clickable.Anchor>
— Works like a regular <Anchor>
but with clickable-item
class preset.<Clickable.Label>
— Works like a regular <Form.Label>
but with clickable-item
class preset. And sets the Form ID context to match <Clickable.Label for>
.Updated the following Components / Component Features
Navigation
Anchor
(BREAKING) Changed link coloring to inherit current color. Works better in most composable situations, e.g. w/ Clickable
<Anchor palette="XXX">
to color links according to palette.Published by novacbn about 3 years ago
ALL CHANGES: https://github.com/novacbn/kahi-ui/compare/v0.4.1...v0.4.2
Added the following Components / Component Features
Display
Badge
<Badge shape="none/pill/rounded">
— Changes the border radius shape of the Component.Layout
Center
— Centers the child content within its self using Flexbox.
Position
— Applies special positioning rules to child content depending <Position variation>
.
<Position variation="floated">
— Positions the child content in a corner of the containing parent without affecting layout.
<Position variation="floated" placement="bottom/top" alignment_x="left/right">
— Positions the child content in a top / bottom corner.<Position variation="raised" placement="bottom/left/right/top">
— Positions the child content while affecting the layout.Utilities
Transition
<Transition duration="number|string">
— Provide a percentage decimal (e.g. 1.2
which means 120%
) to control how long of the theme's animation duration is played.Deprecated the following Components / Component Features
Display
Badge
<Badge position="floated/raised">
— Current behavior is deprecated in favor of using Position
.Feedback
Dot
<Dot position="floated/raised">
— Current behavior is deprecated in favor of using Position
.Published by novacbn about 3 years ago
Added IS_SERVER: boolean
constant.
Added the following Actions / Action Features
intersection_observer(HTMLElement, {on_intersect: (intersections: IntersectionObserverEntry[]) => void}): IIntersectionObserverAction
— Light Svelte Action wrapper around the IntersectionObserver API
.
intersection_observer({...: IntersectionObserverInit})
— Pass IntersectionObserverInit
options.rootMargin
-> root_margin
mutation_observer(HTMLElement, {on_mutate: (mutations: MutationRecord[]) => void}): IMutationObserverAction
— Light Svelte Action wrapper around the MutationObserver API
.
mutation_observer({...: MutationObserverInit})
— Pass MutationObserverInit
options.attributeFilter
-> attribute_filter
Added the following Components / Component Features
Utilities
BrowserRender
— Disables rendering of child content whenever Component is initialized on a Server.
ServerRender
— Disables rendering of child content whenever Component is initialized on the Browser.
IntersectionRender
— Starts rendering the child content whenever the content intersects the viewport, via a IntersectionObserver
.
<IntersectionRender fallthrough={boolean}>
— When true
, always renders content in SSR environments, e.g. SvelteKit<IntersectionRender loading="eager">
— Changes behavior to stop rendering the child content whenever it leaves the viewport, instead of persisting.<IntersectionRender has_intersected={boolean}>
— Is true
after the child content has intersected once.<IntersectionRender is_intersecting={boolean}>
— Is true
whenever the child content is intersecting.<IntersectionRender root>
— Maps to IntersectionObserverInit.root
.<IntersectionRender root_margin>
— Maps to IntersectionObserverInit.rootMargin
.<IntersectionRender threshold>
— Maps to IntersectionObserverInit.threshold
.Published by novacbn about 3 years ago
Added CSS Theming Variables to the following Components: Anchor
, Badge
, Box
, Breadcrumb
, Card
, Container
, Divider
, Dot
, Ellipsis
, Group
, Hero
, List
, Progress
, Spinner
, Table
, Tile
, Wave
.
Fixed <XXX sizing="{VIEWPORT}:{SIZING}>
modifiers not having correct values.
Added the following Components / Component Features
Navigation
Anchor
<Anchor palette="accent/dark/light/alert/affirmative/negative">
— Used to change the rendered color palette.Utilities
<Transition>
— Encapsulates the child content within an controllable animation.
<Transition delay="number|string">
— Provide a percentage decimal (e.g. 1.2
which means 120%
) to control how long of the transition duration to wait before playing.
<Transition direction="bottom/left/right/top">
— On supported animations, controls the direction in which the animation moves towards. With most animations defaulting to bottom
.
<Transition variation="enter/exit/undefined">
— If enter
, the enter animation plays. If exit
, exit animation plays. No animation plays when provided undefined
.
<Transition on:animationend on:animationstart>
— Passthrough of the Browser animationend
/ animationstart
events.
<Transition animation="XXX">
— Controls which animation is played.
<Transition animation="clip">
— Sets to a clip-path
/ opacity
"blinders" animation.<Transition animation="fade">
— Sets to a simple opacity
"fade in" / "fade out" animation.<Transition animation="scale">
— Sets to a transform: scale
/ opacity
"zoom in" / "zoom out" animation.<Transition animation="slide">
— Sets to a transform: translate
/ opacity
sliding movement animation.Updated the following Components / Component Features
Navigation
Breadcrumb
<Breadcrumb.Item active>
— Changed from a active={true}
being bolded, to active={false}
being lower opacity. Works better in situations where a parent container has bolded text.Removed the following Components / Component Features
Feedback
Spinner
<Spinner variation="dual">
— Removed previously deprecated feature.Published by novacbn about 3 years ago
Added the following Components / Component Features
*
<XXX elevation="none">
— Removes elevation from the Component.Display
Table
<Table.Container sizing="tiny/small/medium/large/huge">
— Added support for modifying the text sizing / spacings of all children.Overlays
Overlay
<Overlay orientation="horizontal/mobile:horizontal/tablet:horizontal/desktop:horizontal/widescreen:horizontal">
— Lays content out horizontally.Surfaces
Box
<Box elevation="none/lowest/low/medium/high/highest">
— Changes the background box shadow for facsimile of elevated height off the page.<Box shape="none/pill/rounded">
— Changes the border radius shape of the Component.Card
/ Tile
<XXX.Footer orientation="vertical/mobile:vertical/tablet:vertical/desktop:vertical/widescreen:vertical">
— Lays content out vertically.<XXX.Footer alignment="center/stretch" alignment_x="left/right/center/stretch" alignment_y="top/bottom/center/stretch">
— Used to align the content.Utilities
Portal
<Portal loading="lazy">
— Disables rendering to HTML of the default slot content when not active / mounted.Published by novacbn about 3 years ago
Fixed keybind({repeat: true})
Svelte Action dispatching on_bind
before all keys of combinations are pressed.
Added the following Components / Component Features
Interactables
Form
<Form.Group on:change>
— Dispatches whenever the <Form.Group logic_state>
value changes via Svelte Context.Utilities
Portal
<Portal on:mount>
— Dispatches whenever the Portal
Component successfully mounts.Updated the following Components / Component Features
*
Utilities
Portal
Published by novacbn about 3 years ago
Added --font-content-size-local-*
/ --font-headline-size-local-*
properties, which use em
values instead of rem
.
Fixed viewport("widescreen")
/ viewports({widescreen: true})
using incorrect values.
Updated --font-content-size-*
/ --font-headline-size-*
CSS variables to --font-content-size-root-*
/ --font-headline-size-root-*
.
Added the following Components / Component Features
Surfaces
Card
/ Tile
<Card.Container sizing="tiny/small/medium/large/huge">
/ <Tile.Container sizing="tiny/small/medium/large/huge">
— Added support for modifying the text sizing / spacings of all children.Fixed the following Components / Component Features
Navigation
Breadcrumb
<Breadcrumb.Container separator="XXX">
— Fixed typings to not error on no value being present.Updated the following Components / Component Features
Navigation
Breadcrumb
small
-> tiny
tier.Surfaces
Card
<Card.Figure>
— non-fullbleed media is now centered on both axis.<Card.Figure>
with non-fullbleed media.Card
/ Tile
<Card.Header>
/ <Tile.Header>
— Updated font size large
-> medium
Published by novacbn about 3 years ago
false
values.Published by novacbn about 3 years ago
Fixed some internal Component typings.
Added the following Components / Component Features
Disclosure
Tab
<Tab.Container>
— Wrapper Component which provides stylings and Svelte Contexts for radio button functionality.
<Tab.Container logic_name="XXX">
— Used to synchronize the form name between each radio button.<Tab.Container logic_state="XXX">
— Used to set which form ID is the current active tab.<Tab.Container sizing="tiny/small/medium/large/huge">
— Used to change how large the children buttons renders as.<Tab.Group>
— Used for grouping together <Tab.Label>
/ <Tab.Section>
Components.
<Tab.Group logic_id="XXX">
— Used to synchronize the form IDs between the radio buttons, tab content, and Svelte Contexts.<Tab.Label>
— Used for providing radio buttons for navigating tabs without Javascript.
<Tab.Label state>
— Wrapper around <input type="radio" checked={false/true}>
, used to make the tab active.<Tab.Anchor>
— Used for providing page-based navigation buttons.
<Tab.Anchor current="XXX">
— Wrapper around aria-current
, used to make the tab active.<Tab.Anchor>
/ <Tab.Label>
<Tab.XXX palette="accent/dark/light/alert/affirmative/negative">
— Used to change the rendered color palette.<Tab.Section>
— Used for wrapping tab content that will render when active.
<Tab.Section loading="lazy">
— When paired with <Tab.Group>
/ <Tab.Label>
, disables rendering of tab content to DOM when not active.Feedback
Progress
<Progress>
— Used for displaying the process of an ongoing action to the end-user.
<Progress palette="accent/dark/light/alert/affirmative/negative">
— Used to change the rendered color palette.<Progress shape="circle">
— Used to change the rendering of the Component to be a circle.<Progress size="tiny/small/medium/large/huge">
— Used to change how large the Component renders as.<Progress value="0.0...1.0">
— Used to control the current percent displayed.Added the following Actions / Action Features
keybind(HTMLElement, {binds: string | string[], on_bind: (event: IKeybindEvent) => void}): IKeybindAction
— Used to bind multiple key combinations to activate a keybind callback.
keybind(HTMLElement, {repeat?: boolean, repeat_throttle?: number})
— Used to control if the on_bind
callback is repeated for held down active keybinds, and how long between each repeat call.Published by novacbn about 3 years ago
npm install @kahi-ui/framework
.Published by novacbn about 3 years ago
Fixed dark mode transition being laggy on WebKit / Blink Browsers.
Fixed scrollbar not having height applied to it on WebKit / Blink Browsers.
Updated scrollbar with theming for dark mode.
Updated colors, spacings, and other visual modifiers.
Added initial support for Theming CSS Variables
--font-family-(monospace/normal)
— References the available font familes.
font-family: var(--font-family-monospace);
--font-(content/headline)-(line-height/size)-(nano/tiny/small/medium/large/huge/massive)
— References the available font sizes and their associated line heights.
font-size: var(--font-content-size-medium);
--palette-(auto/auto-off/inverse/inverse-off/accent/neutral/dark/off-dark/light/off-light/alert/affirmative/negative)-(lightest/light/normal/bold/boldest)
— References the available shades for the semantic color palette.
color: rgb(var(--palette-accent-bold));
auto
/ auto-off
palettes are their respective dark
/ light
, depending on if the Framework is in dark mode.inverse
/ inverse-off
palettes are always the opposite of the auto
/ auto-off
palettes.off
palettes are "off color" variations of the dark
/ light
palettes.--radius-(circle/pill/small/medium)
— References the available border radius and shape associated radii.
border-radius: var(--radius-medium);
--sizes-(content/embedded/icon)-(tiny/small/medium/large/huge)
— References the available sizing levels for Content sizes, Embedded Media widths, and Icon sizes.
width: var(--sizes-icon-small);height: var(--sizes-icon-small);
--spacing-(local/root)-(tiny/small/medium/large/huge)
— References the available spacing levels, with root
spacing using rem
and local
using em
.
padding-left: var(--spacing-root-small);
Added the following Components / Component Features
Interactables
Button
<Button type="reset" value="XXX">
— Added support for rendering <input type="reset" />
.TextInput
<TextInput palette="XXX" variation="flush" />
— Added support for text colors in flush
variations.Navigation
Menu
<Menu.Container sizing="XXX">
— Added support for setting sizing for menu content.<Menu.Anchor palette="XXX">
/ <Menu.Button palette="XXX">
/ <Menu.Label palette="XXX">
— Added support for palettes.Typography
Heading
<Heading palette="XXX">
— Is now supported for all the built-in semantic palettes.Text
<Text variation="headline">
- Is now supported for all headline sizes.Deprecated the following Components / Component Features
Feedback
Spinner
<Spinner variation="dual">
— Will no longer be available in the future.Wave
<Wave size="XXX">
— Not a useful modifier, also to add consistency with Dot
.Updated the following Components / Component Features
*
<XXX palette="auto-inverse">
— Changed from auto-inverse
-> inverse
to be consistent with new CSS Variables.Interactables
Button
<Button value="XXX">
— Fixed <input />
-based Button
s not rendering properly.Form
<Form.Control on:click>
— Added missing event typing definitions.Navigation
Menu
<Menu.Label>
— Added missing event typing definitions.Utilities
ContextBackdrop
<ContextBackdrop on:click>
— Added missing event typing definitions.Published by novacbn about 3 years ago
Deprecated the following Components / Component Features
Navigation
Omni
<Omni.Container logic_id="XXX">
— Current behavior is deprecated in favor of using Popover
in combination with global modifiers like hidden
.Updated the following Components
*
$$Props
TypeScript type aliasing.Navigation
Menu
<Menu.Container class="XXX">
— Fixed not accepting property input.Published by novacbn over 3 years ago
Updated the following Components
Display
Table
::before
to fix Chrome rendering bug.Navigation
Aside
Offscreen
wrapper when logic_id
is not set.Overlays
Offscreen
/ Popover
Overlay
Utilities
Portal
Portal
container element.Portal
not removing children upon being destroyed.Updated the following Actions
click_outside
click
event handler was fired, previously the action would emit a false positive.Added the following Stores
mediaquery(query: string): Readable<boolean>
/ mediaqueries(queries: string[], options: IMediaQueriesOptions): Readable<boolean>
— Returns true
whenever any of the given Media Queries are valid.
mediaqueries(queries, {behavior: "and"})
— Requires all given Media Queries to be valid instead of any.viewport(viewport: string): Readable<boolean>
— Single viewport version of viewports
.
Updated the following Stores
attribute
prefersscheme
mediaquery
Store internally.viewports(viewports: Record<string, boolean>): Readable<string>
viewport
.Published by novacbn over 3 years ago
Added the following Components
Interactables
HiddenInput
— Useful for providing hidden constants for form submissions that the end-user doesn't need to modify.Updated the following Components
Feedback
Ellipsis
Interactables
Check
/ Radio
<XXX variation="flush">
— Changes the appearance to only show the inner box / circle shape.Navigation
Menu
<Menu.Label>
— Useful for wrapping a form Component as a Menu option.Menu.Anchor
/ Menu.Button
/ Menu.Divider
/ Menu.Heading
to Menu.Item
.Menu.Anchor
/ Menu.Button
/ Menu.Divider
/ Menu.Heading
.Surfaces
Card
/ Tile
<XXX variation="flush">
— Changes the appearance to remove exterior padding, background, and box shadow.Published by novacbn over 3 years ago
Upgraded Storybook 6.3.0-rc.11
-> 6.3.2
.
Updated the following Components
Interactables
Form
Form.Control
/ Form.HelpText
/ Form.Label
not properly handling global modifiers / properties.TextInput
Added <TextInput align="center/justify/left/right">
— Aligns the text displayed within the TextInput
.
Added <TextInput transform="capitalize/lowercase/uppercase">
— Transform the character casing of text displayed within the TextInput
.
Check
/ Radio
/ Switch
/ TextInput
<XXX on:blur on:focus>
— Events fired whenever the Component loses focus or gains focus from the end-user, respectively.Navigation
Aside
<Aside.Section>
with disabled flex-shrink
when not last of type.Typography
Heading
/ Text
<Heading align="XXX" transform="XXX">
/ <Text align="XXX" transform="XXX">
to internally use variables.Text
<Text is="XXX">
elements to accept <Text align="XXX">
.Published by novacbn over 3 years ago
Bump Browser minimum version requirements.
Utilizing inset
in Popover
.
Chrome 87+ (November 2020)
Edge 87+ (November 2020)
Firefox 66+ (March 2019)
Safari 14.1+ (April 2021)
Added <XXX spacing="{VIEWPORT}:none">
/ <XXX spacing-{AXIS}="{VIEWPORT}:none">
support for Components that needed the zero pixel variable.
Added the following Components
Overlays
Offscreen
— Useful for wrapping excess content offscreen that the end-user can show via buttons on the Viewport edges.
<Offscreen alignment="center/stretch" alignment_x="left/right/center/stretch" alignment_y="top/bottom/center/stretch">
— Defaults to stretch
, used to align the content.<Offscreen hidden="true/mobile/tablet/desktop/widescreen">
— Used to control which Viewports the excess content is hidden on.<Offscreen logic_id="XXX">
— Used to set the HTML id
for the state checkbox which controls when content is being shown.<Offscreen placement="top/left/bottom/right">
— Defaults to left
, used to control which edge to show the content along.<Offscreen captive>
— Enables the backdrop.<Offscreen dismissable>
— Enables the backdrop to be clickable, and dismisses the Offscreen
.<Offscreen on:active>
— Fires whenever the Offscreen
is made active, either via scripting or the end-user.<Offscreen on:dismiss>
— Fires whenever the Offscreen
is dismissed, either via scripting or the end-user.Popover
— Useful for creating overflow menus that the end-user can show via buttons.
<Popover alignment_x="left/right/center" alignment_y="top/bottom/center">
— Defaults to center
, used to align the content.<Popover hidden="true/mobile/tablet/desktop/widescreen">
— Used to control which Viewports the excess content is hidden on.<Popover logic_id="XXX">
— Used to set the HTML id
for the state checkbox which controls when content is being shown.<Popover placement="top/left/bottom/right">
— Defaults to bottom
, used to control which edge to show the content along.<Popover spacing="none/tiny/small/medium/large/huge">
— Defaults to none
, used to control how far away the Popover
's floating content will appear away from the base content.<Popover dismissable>
— Enables the Popover
to close whenever its content are clicked outside of.<Popover on:active>
— Fires whenever the Popover
is made active, either via scripting or the end-user.<Popover on:dismiss>
— Fires whenever the Popover
is dismissed, either via scripting or the end-user.Updated the following Components
Navigation
Aside
<Aside.Container placement="left/right">
— Used to control which Viewport edge the Aside
will be on when collapsed on Mobile / Tablet.<Aside.Container on:active>
— Fires whenever the Aside
is made active, either via scripting or the end-user.<Aside.Container on:dismiss>
— Fires whenever the Aside
is dismissed, either via scripting or the end-user.<Aside.Container>
to internally use Offscreen
for collapsing functionality.<Aside.Section>
to flew grow to parent height.Overlays
Overlay
Overlay
potentially resetting between viewport changes.Surfaces
Card
<Card.Section>
to have increased y-axis padding when the first / last child of a <Card.Container>
.<Card.Section>
to only flex grow parent height.Card
/ Tile
lowest
instead of low
.Updated the following Stores / Contexts
get_state_context(): Writable<boolean>
get_state_context(): Writable<boolean>
-> get_state_context(): Writable<boolean> | undefined
— No longer throws an error when the Svelte Context cannot be found.