{"data":[{"identifier":"/blog/2022-02/0.6.0-alpha-1","title":"v0.6.0 - Alpha 1","text":"v0.6.0 - Alpha 1 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\": ( \"\": generators.palette( $dark: ( // Base darkmode color used to generate shades, can be in any color \"base\": , // How much of the `dark` palette should be mixed into the base color per shade \"stepping\": , ), $light: ( // Base lightmode color used to generate shades, can be in any color \"base\": , // How much of the `light` palette should be mixed into the base color per shade \"stepping\": , ) ), ), ) ); 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 Read full changelog on the GitHub Release . "},{"identifier":"/blog/2022-03/0.6.2-introducing-dataselect","title":"v0.6.2 - Introducing DataSelect","text":"v0.6.2 - Introducing DataSelect 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! DataSelect Preview Searching Not only that. Just like DataTable, fuzzy search is also supported! DataSelect Fuzzy Search Multiple And of course, multiple choices are allowed! DataSelect Multiple Choice Want the user to only be able to select a maximum amount of choices? Sure! DataSelect Multiple Maximum Choices Conclusion There are many more features documented over at the DataSelect documentation . So check it out! CHANGELOG Read full changelog on the GitHub Release . "},{"identifier":"/blog/2022-03/snippet-search-support","title":"Snippet Search Support","text":"Snippet Search Support So previously, full text search support was only available for documentation pages in the global search. Now search has been updated to have a simplistic ranking system and support for surfacing documentation snippets! Snippet Global Search Playground Filtering Not only that, Playground has been updated to support filtering of all documentation snippets! Playground Snippet Filter Conclusion Hopefully these improvements to search will boost your productivity of using the documentation site. The ranking put in place is just the initial idea of how it should work. So if you can think of anything to help, file a new issue . "},{"identifier":"/docs/actions/auto_focus","title":"auto_focus","text":"auto_focus NOTE : Introduced feature in v0.4.13. auto_focus is a Svelte Action , which when IAutoFocusOptions.enabled: boolean is true, focuses the first focusable element found within the attached element. When false, restores focus to the previously focused element. {enabled ? \"unselect the checkbox to restore focus\" : \"select the checkbox to auto focus input\"}
Imports import {auto_focus} from \"@kahi-ui/framework\"; Compatibility Svelte Actions are always ran on Javascript-enabled Browser. So should not be used for critical end-user functionality, only progressive enhancement. Target You can set the element that is focused with a reference or CSS Selector when enabled via IAutoFocusOptions.target: HTMLElement | string option. {enabled ? \"unselect the checkbox to restore focus\" : \"select the checkbox to auto focus input\"}
"},{"identifier":"/docs/actions/click_inside","title":"click_inside","text":"click_inside NOTE : Introduced feature in v0.4.13. click_inside is a Svelte Action , which runs a on_click_inside(event: MouseEvent): void callback whenever your attached element is clicked inside of. (clicked = true), }, ], ]} > {clicked ? \"I was clicked inside!\" : \"I am currently not clicked...\"} Imports import {click_inside} from \"@kahi-ui/framework\"; Compatibility Svelte Actions are always ran on Javascript-enabled Browser. So should not be used for critical end-user functionality, only progressive enhancement. Ignore You can ignore elements that matches a given CSS Selector via the IClickInsideOptions.ignore: string option. (clicked = true), }, ], ]} > {clicked ? \"I was clicked inside!\" : \"I am currently not clicked...\"} "},{"identifier":"/docs/actions/click_outside","title":"click_outside","text":"click_outside NOTE : Introduced feature in v0.2.11. click_outside is a Svelte Action , which runs a on_click_outside(event: MouseEvent): void callback whenever your attached element is clicked outside of. (clicked = false), }, ], ]} on:click={() => (clicked = true)} > {clicked ? \"I was clicked inside!\" : \"I am currently not clicked...\"} Imports import {click_outside} from \"@kahi-ui/framework\"; Compatibility Svelte Actions are always ran on Javascript-enabled Browser. So should not be used for critical end-user functionality, only progressive enhancement. Ignore NOTE : Introduced feature in v0.4.13. You can ignore elements that matches a given CSS Selector via the IClickOutsideOptions.ignore: string option. (clicked = false), }, ], ]} on:click={() => (clicked = true)} > {clicked ? \"I was clicked inside!\" : \"I am currently not clicked...\"} "},{"identifier":"/docs/actions/intersection_observer","title":"intersection_observer","text":"intersection_observer NOTE : Introduced feature in v0.4.1. intersection_observer is a Svelte Action , which runs a on_intersect(intersections: IntersectionObserverEntry[]): void callback whenever the targetted element intersects the root viewport. NOTE : The below REPL basically reimplements IntersectionRender . Scroll down to watch this Box change when the Box comes into view.
{ console.log(\"on_intersect\", { intersections, }); is_intersecting = intersections.some( (intersection) => intersection.isIntersecting ); }, }} > {#if is_intersecting} I am in view! {/if}
Scroll up to watch this Box change when the Box comes into view. Imports import {intersection_observer} from \"@kahi-ui/framework\"; Compatibility Svelte Actions are always ran on Javascript-enabled Browser. So should not be used for critical end-user functionality, only progressive enhancement. The Action is dependent on IntersectionObserver . "},{"identifier":"/docs/actions/keybind","title":"keybind","text":"keybind NOTE : Introduced feature in v0.3.1. keybind is a Svelte Action , which runs a on_bind(event: IKeybindEvent): void callback whenever your assigned element has focus. (window_active = event.detail.active), }} /> Press SHIFT+M to activate bind.
(input_active = event.detail.active), }, ], ]} /> Imports import { keybind, action_activate, action_exit, action_submit, navigate_down, navigate_left, navigate_right, navigate_up, } from \"@kahi-ui/framework\"; Compatibility Svelte Actions are always ran on the Browser only with Javascript is enabled. So should not be used for critical end-user functionality, only progressive enhancement. Built-In Shortcuts NOTE : Introduced feature in v0.5.3. The Framework provides a series of built-in keybinds using pre-configured standard keybinds that you can use in your own code. action_activate — Used for activating the current context, e.g. a focused label. Enter, (space) action_exit — Used for exiting the current context, e.g. a prompt. Esc action_submit — Used for submitting the current context, e.g. a focused input. Enter navigate_down — Used for navigating to the next item down. ArrowDown Repeatable, 250ms throttle navigate_left — Used for navigating to the next item left. ArrowLeft Repeatable, 250ms throttle navigate_right — Used for navigating to the next item right. ArrowRight Repeatable, 250ms throttle navigate_up — Used for navigating to the next item up. ArrowUp Repeatable, 250ms throttle { active = event.detail.active; if (active) { alert( `You submitted \"${value}\" as your input!` ); } }, }, ], ]} bind:value /> Binding You can configure which set of keys you want to activate the binding by listing the Key Values in a key1+key2+keyN format via the IKeybindOptions.binds: string | string[] option. You can (theoretically ) listen to as many keys as you want. (active = event.detail.active), }} /> Press SHIFT+M to activate bind. You can also have a single binding listen to multiple sets of keys by passing in an array. (active = event.detail.active), }} /> Press CTRL+ENTER OR SHIFT+M to activate bind. Active Binding You can detect if the keybind is currently being pressed via the IKeybindEvent.detail.active member. Event Management Just like with regular events, you can use IKeybindEvent.preventDefault: () => void / IKeybindEvent.stopPropagation: () => void functions to cancel propagation / the Browser using default behavior. { event.preventDefault(); active = event.detail.active; }, }} /> Press F5 to activate bind. Repeat You can enable listening to repeat binding activations (e.g. binding being held down) via the IKeybindOptions.repeat: boolean option. And then detect if the current callback is a repeat via the IKeybindEvent.detail.repeat member. { active = event.detail.active; if (event.detail.repeat) { value += \"I am on repeat!\\n\"; } }, }} /> Press and hold SHIFT+M to activate bind. {value} Throttling When listening to repeat binding activations, you can throttle activation callbacks for every N amount of milliseconds via the IKeybindOptions.repeat_throttle: number option. { active = event.detail.active; if (event.detail.repeat) { value += \"I am on repeat!\\n\"; } }, }} /> Press and hold SHIFT+M to activate bind. {value} NOTE : Introduced feature in v0.4.13. NOTE : By using throttle_cancel in this pseudo search UI, the Browser scrolling via arrow keys is disabled. You can also enable the keybind Action to automatically call preventDefault / stopPropagation on all throttled keydown / keyup events via the IKeybindOptions.throttle_cancel: boolean option. { if (!event.detail.active) return; event.preventDefault(); current = Math.min(current + 1, 9); update_scrollable(); }, }, ], [ keybind, { binds: \"arrowup\", repeat: true, repeat_throttle: 100, throttle_cancel: true, on_bind: (event) => { if (!event.detail.active) return; event.preventDefault(); current = Math.max(current - 1, 0); update_scrollable(); }, }, ], ]} on:focusin={() => (active = true)} on:focusout={() => (active = false)} /> {#each new Array(10).fill(null) as _, index} Search Result #{index + 1} {/each} "},{"identifier":"/docs/actions/lost_focus","title":"lost_focus","text":"lost_focus NOTE : Introduced feature in v0.5.0. lost_focus is a Svelte Action , which runs a on_lost_focus(): void callback whenever another element is focused which is not a child of the attached element, OR, the Browser window / tab is no longer actively focused. (has_focus = false), }, ], ]} on:focusin={() => (has_focus = true)} /> Imports import {lost_focus} from \"@kahi-ui/framework\"; Compatibility Svelte Actions are always ran on Javascript-enabled Browser. So should not be used for critical end-user functionality, only progressive enhancement. Ignore You can ignore elements that matches a given CSS Selector via the ILostFocusOptions.ignore: string option. TODO : snippet "},{"identifier":"/docs/actions/mutation_observer","title":"mutation_observer","text":"mutation_observer NOTE : Introduced feature in v0.4.1. mutation_observer is a Svelte Action , which runs a on_mutate(mutations: MutationRecord[]): void callback whenever the targetted element intersects the root viewport.
console.log(\"on_mutate\", {mutations}), }} > click the above button and watch console for logging
Imports import {mutation_observer} from \"@kahi-ui/framework\"; Compatibility Svelte Actions are always ran on Javascript-enabled Browser. So should not be used for critical end-user functionality, only progressive enhancement. The Action is dependent on MutationObserver . "},{"identifier":"/docs/actions/overflow_clipping","title":"overflow_clipping","text":"overflow_clipping NOTE : Introduced feature in v0.4.13. IMPORTANT : overflow_clipping only detects if the attached element has is clipping on a given axis, not if the scrollbar is visible. WARNING : This feature can cause performance degradation while enabled. overflow_clipping is a Svelte Action , which when IOverflowClippingOptions.enabled: boolean is true, runs the IOverflowClippingOptions.on_clip: (entry: {horizontal: boolean, vertical: boolean}) => void callback. Whenever content is clipping the bounding box of the attached element. Toggle on additional content (horizontal_clipping = entry.horizontal), }, ], ]} style=\"width:15rem;\" > Hello World! {#if additional_content} And again! {/if} (vertical_clipping = entry.vertical), }, ], ]} style=\"height:3rem;\" > Hello World! {#if additional_content} And again! {/if} Imports import {overflow_clipping} from \"@kahi-ui/framework\"; Compatibility Svelte Actions are always ran on Javascript-enabled Browser. So should not be used for critical end-user functionality, only progressive enhancement. "},{"identifier":"/docs/actions/trap_focus","title":"trap_focus","text":"trap_focus NOTE : Introduced feature in v0.4.13. USAGE : This feature can not be demonstrated in the REPL, click the Link button to open in Playground. trap_focus is a Svelte Action , which when ITrapFocusOptions.enabled: boolean is true, traps focus movement (TAB / SHIFT+TAB) to within the attached element's first and last found focusable elements. {enabled ? \"unselect the checkbox to disabled focus trapping\" : \"select the checkbox to enable focus trapping\"}
Imports import {trap_focus} from \"@kahi-ui/framework\"; Compatibility Svelte Actions are always ran on Javascript-enabled Browser. So should not be used for critical end-user functionality, only progressive enhancement. First + Last USAGE : This feature can not be demonstrated in the REPL, click the Link button to open in Playground. You can customize the first / last focusable elements with references or CSS Selectors via the ITrapFocusOptions.first: HTMLElement | string / ITrapFocusOptions.last: HTMLElement | string options. {enabled ? \"unselect the checkbox to disabled focus trapping\" : \"select the checkbox to enable focus trapping\"}
"},{"identifier":"/docs/disclosure/accordion","title":"Accordion","text":"Accordion NOTE : Introduced feature in v0.4.5. Accordion Components are used for displaying related content in a collapsible stack of buttons, that toggles between views. Section One Item One Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Section Two Item Two Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Section Three Item Three Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Imports Logic State NOTE : Introduced feature in v0.5.2. WARNING : This feature is only available in Javascript-enabled clients. You can manually choose which Components are active via the logic_state property. Section One Item One Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Section Two Item Two Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Section Three Item Three Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Inclusive You can change the behavior of the Accordion to allow multiple items to be revealed at once via the behavior property. Section One Item One Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Section Two Item Two Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Section Three Item Three Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Slot NOTE : Introduced feature in v0.5.2. You can customize the icons the icons that represent the if an Component is open or not via the close / open slots. Section One - + Item One Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Section Two - + Item Two Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Section Three - + Item Three Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Palette You can change the color palette of the Accordion buttons via the palette property. DEFAULT Section DEFAULT Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ACCENT Section ACCENT Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. NEUTRAL Section NEUTRAL Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. DARK Section DARK Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. LIGHT Section LIGHT Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ALERT Section ALERT Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. AFFIRMATIVE Section AFFIRMATIVE Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. INFORMATIVE Section INFORMATIVE Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. NEGATIVE Section NEGATIVE Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Loading USAGE : Use your Browser's devtools to observe this feature. You can customize the slot loading behavior of individual Accordion.Section Components to not render their children, via the loading property. Section One Item One Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Section Two Item Two Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Section Three Item Three Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Transitions You can use Transition Components to provide fancy switching animations. Section One Item One Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Section Two Item Two Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Section Three Item Three Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. "},{"identifier":"/docs/disclosure/carousel","title":"Carousel","text":"Carousel NOTE : Introduced feature in v0.4.6. Carousel allows the user to scroll through \"slides\" of content without having to extend the page dimensions.
300 x 200
300 x 200
300 x 200
 Imports Orientation You can set the Carousel to render vertically via the orientation property.
300 x 200
300 x 200
300 x 200
 Spacing NOTE : By passing an array, you can set responsive values . e.g. spacing={[\"medium\", \"tablet:small\", \"mobile:tiny\"]} You can adjust the spacing between items via the spacing, spacing_x, and spacing_y properties.
DEFAULT
300 x 200
300 x 200
300 x 200
NANO
300 x 200
300 x 200
300 x 200
TINY
300 x 200
300 x 200
300 x 200
SMALL
300 x 200
300 x 200
300 x 200
MEDIUM
300 x 200
300 x 200
300 x 200
LARGE
300 x 200
300 x 200
300 x 200
HUGE
300 x 200
300 x 200
300 x 200
MASSIVE
300 x 200
300 x 200
300 x 200
"},{"identifier":"/docs/disclosure/tab","title":"Tab","text":"Tab NOTE : Introduced feature in v0.3.1. Tab Components are used for turning what would be multi-page content, into a block of multiple views with a set of radio buttons to toggle between. Tab One Tab One Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Tab Two Tab Two Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Tab Three Tab Three Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Imports Logic State NOTE : Introduced feature in v0.5.2. WARNING : This feature is only available in Javascript-enabled clients. You can manually choose which Component is active via the logic_state property. Tab One Tab One Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Tab Two Tab Two Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Tab Three Tab Three Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Sed pellentesque rutrum tellus, in iaculis dolor tincidunt non. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Palette You can change the color palette of the Tab radio buttons via the palette property. Tab DEFAULT Tab DEFAULT Content Tab ACCENT Tab ACCENT Content Tab NEUTRAL Tab NEUTRAL Content Tab DARK Tab DARK Content Tab LIGHT Tab LIGHT Content Tab ALERT Tab ALERT Content Tab AFFIRMATIVE Tab AFFIRMATIVE Content Tab INFORMATIVE Tab INFORMATIVE Content Tab NEGATIVE Tab NEGATIVE Content Sizing You can alter how large each Tab radio button should be via the sizing property.
DEFAULT Tab One Tab One Content Tab Two Tab Two Content Tab Three Tab Three Content
NANO Tab One Tab One Content Tab Two Tab Two Content Tab Three Tab Three Content
TINY Tab One Tab One Content Tab Two Tab Two Content Tab Three Tab Three Content
SMALL Tab One Tab One Content Tab Two Tab Two Content Tab Three Tab Three Content
MEDIUM Tab One Tab One Content Tab Two Tab Two Content Tab Three Tab Three Content
LARGE Tab One Tab One Content Tab Two Tab Two Content Tab Three Tab Three Content
HUGE Tab One Tab One Content Tab Two Tab Two Content Tab Three Tab Three Content
MASSIVE Tab One Tab One Content Tab Two Tab Two Content Tab Three Tab Three Content
Alignment You can change the alignment of each Tab radio button via the alignment_x property.
LEFT Tab One Tab One Content Tab Two Tab Two Content Tab Three Tab Three Content
CENTER Tab One Tab One Content Tab Two Tab Two Content Tab Three Tab Three Content
RIGHT Tab One Tab One Content Tab Two Tab Two Content Tab Three Tab Three Content
STRETCH Tab One Tab One Content Tab Two Tab Two Content Tab Three Tab Three Content
Loading USAGE : Use your Browser's devtools to observe this feature. You can customize the slot loading behavior of individual Tab.Section Components to not render their children, via the loading property. Tab One Tab One Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Tab Two Tab Two Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Tab Three Tab Three Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Anchor You can substitute Tab.Label for Tab.Anchor to support per-page tabbed views. Tab One Tab One Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Tab Two ... Tab Three ... Transitions You can use Transition Components to provide fancy switching animations. Tab One Tab One Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Tab Two Tab Two Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. Tab Three Tab Three Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin et consectetur orci. Curabitur a egestas turpis, vitae convallis sapien. "},{"identifier":"/docs/display/badge","title":"Badge","text":"Badge NOTE : Introduced feature in v0.2.0. WARNING : This feature received a breaking change in v0.6.0 . Badge is typically used to subtlely display to the user some type of ancillary information, relating to its siblings / parent UI elements. This is a Badge! Imports Palette You can change the color palette of the Badge via the palette property. This is a DEFAULT Badge This is a ACCENT Badge This is a NEUTRAL Badge This is a DARK Badge This is a LIGHT Badge This is a ALERT Badge This is a AFFIRMATIVE Badge This is a INFORMATIVE Badge This is a NEGATIVE Badge Radius NOTE : Introduced feature in v0.6.0. NOTE : By passing an array, you can set responsive values . e.g. radius={[\"tiny\", \"tablet:medium\", \"mobile:medium\"]} You can modify the border radius of the Badge via the radius property. DEFAULT Badge NANO Badge TINY Badge SMALL Badge MEDIUM Badge LARGE Badge HUGE Badge MASSIVE Badge Shape NOTE : Introduced feature in v0.6.0. NOTE : By passing an array, you can set responsive values . e.g. shape={[\"circle\", \"tablet:pill\", \"mobile:pill\"]} You can modify the shape of the Badge via the shape property. DEFAULT Badge CIRCLE Badge PILL Badge "},{"identifier":"/docs/display/datestamp","title":"DateStamp","text":"DateStamp NOTE : Introduced feature in v0.4.10. DateStamp formats an ISO 8601 / RFC 3339 timestamp into a human readable string, using the user preferences provided by the Browser. Imports Custom Format NOTE : By using custom format settings, the user's defaults will not be loaded and you will have to opt into each unit of information. You can customize how each individual component of the timestamp is displayed via the day, month, weekday, and year properties respectively. "},{"identifier":"/docs/display/datetimestamp","title":"DateTimeStamp","text":"DateTimeStamp NOTE : Introduced feature in v0.4.10. DateTimeStamp formats an ISO 8601 / RFC 3339 timestamp into a human readable string, using the user preferences provided by the Browser. Imports 12 Hour You can have the timestamp render as 12-hour time (1...12 AM/PM) instead of 24-hour time (0...23) via the hour_12 property. Custom Format NOTE : By using custom format settings, the user's defaults will not be loaded and you will have to opt into each unit of information. You can customize how each individual component of the timestamp is displayed via the day, month, weekday, year, hour , minute, and second properties respectively. "},{"identifier":"/docs/display/kbd","title":"Kbd","text":"Kbd NOTE : Introduced feature in v0.6.0. Kbd is typically used to communicate a keybinding to the user. CTRL+C Imports "},{"identifier":"/docs/display/list","title":"List","text":"List NOTE : Introduced feature in v0.2.4. List is used for rendering simple text lists. Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Proin et consectetur orci. Imports Elements You can change what type of list is being rendered via the is property.
ORDERED Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Proin et consectetur orci.
UNORDERED Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Proin et consectetur orci.
"},{"identifier":"/docs/display/table","title":"Table","text":"Table NOTE : Introduced feature in v0.2.7. Table is typically used to render tabular data in a structured row -> columns format, for end-users to easily read the contents. Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum Table Imports Spans NOTE : Introduced feature in v0.4.4. WARNING : This feature was renamed from colspan / rowspan to span_x / span_y in v0.6.0 respectively. You can use the span_x / span_y properties on / to adjust the size of table items they take up. span_x 2 x span_y 1 span_x 1 x span_y 1 span_x 1 x span_y 1 span_x 1 x span_y 2 span_x 1 x span_y 1 span_x 3 x span_y 1 Borders You can make a Table have borders via the variation property. Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum Stripes You can make a Table have stripes via the variation property. Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum Borders + Stripes You can make a Table have both borders AND stripes via the variation property. Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum Sizing NOTE : Introduced feature in v0.3.5. You can change the sizes / spacings of the child elements via the sizing property.
DEFAULT Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum
NANO Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum
TINY Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum
SMALL Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum
MEDIUM Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum
LARGE Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum
HUGE Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum
MASSIVE Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum
Scrollable Tables You can make a Table scrollable by wrapping it with a Scrollable . Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Minimum Maximum "},{"identifier":"/docs/display/timestamp","title":"TimeStamp","text":"TimeStamp NOTE : Introduced feature in v0.4.10. TimeStamp formats an ISO 8601 / RFC 3339 timestamp into a human readable string, using the user preferences provided by the Browser. Imports 12 Hour You can have the timestamp render as 12-hour time (1...12 AM/PM) instead of 24-hour time (0...23) via the hour_12 property. Custom Format NOTE : By using custom format settings, the user's defaults will not be loaded and you will have to opt into each unit of information. You can customize how each individual component of the timestamp is displayed via the hour, minute, and second properties respectively. "},{"identifier":"/docs/embedded/figure","title":"Figure","text":"Figure NOTE : Introduced feature in v0.2.1. WARNING : This feature received a breaking change in v0.6.0 . Figure is a multimedia container Component, providing modifications for things such as images and videos.
Imports Fit NOTE : By passing an array, you can set responsive values . e.g. fit={[\"contain\", \"tablet:cover\", \"mobile:cover\"]} You can change how the child content is stretched across the Figure container via the fit property.
DEFAULT
CONTAIN
COVER
FILL
NONE
SCALE-DOWN
Radius NOTE : Introduced feature in v0.6.0. NOTE : By passing an array, you can set responsive values . e.g. radius={[\"tiny\", \"tablet:medium\", \"mobile:medium\"]} You can modify the border radius of the child content via the radius property.
DEFAULT
NONE
NANO
TINY
SMALL
MEDIUM
LARGE
HUGE
MASSIVE
Shape NOTE : Introduced feature in v0.6.0. NOTE : By passing an array, you can set responsive values . e.g. shape={[\"circle\", \"tablet:pill\", \"mobile:pill\"]} You can modify the shape of the child content via the shape property.
DEFAULT
CIRCLE
PILL
"},{"identifier":"/docs/feedback/dot","title":"Dot","text":"Dot NOTE : Introduced feature in v0.2.0. WARNING : This feature received a breaking change in v0.6.0 . Dot is typically used for calling out other UI elements to the end-user, that they need attention. Imports Palette You can change the color palette of the Dot via the palette property.
DEFAULT
ACCENT
NEUTRAL
DARK
LIGHT
ALERT
AFFIRMATIVE
INFORMATIVE
NEGATIVE
"},{"identifier":"/docs/feedback/ellipsis","title":"Ellipsis","text":"Ellipsis NOTE : Introduced feature in v0.2.5. Ellipsis is an indicator used to tell the user that something is loading in the background. Loading Imports Slot You can customize the content used for the animation via the by passing into the default slot. Loading/ Animations NOTE : Introduced feature in v0.6.0. You can customize which animation is played via the animation property.
DEFAULT
BOUNCE
PING
PULSE
Iterations NOTE : Introduced feature in v0.6.0. You can customize how many times the content is repeated via the iterations property. {#key iterations} {/key} "},{"identifier":"/docs/feedback/progress","title":"Progress","text":"Progress NOTE : Introduced feature in v0.3.1. Progress is typically used to render feedback to the end-user about how complete a current task is. Imports Radius NOTE : Introduced feature in v0.6.0. NOTE : By passing an array, you can set responsive values . e.g. radius={[\"tiny\", \"tablet:medium\", \"mobile:medium\"]} You can modify the border radius of a bar Progress via the radius property.
DEFAULT
NONE
NANO
TINY
SMALL
MEDIUM
LARGE
HUGE
MASSIVE
Shape You can modify the shape of the Progress via the shape property. Palette You can change the color palette of the Progress via the palette property.
DEFAULT
ACCENT
NEUTRAL
DARK
LIGHT
ALERT
AFFIRMATIVE
INFORMATIVE
NEGATIVE
DEFAULT
ACCENT
NEUTRAL
DARK
LIGHT
ALERT
AFFIRMATIVE
INFORMATIVE
NEGATIVE
Sizing WARNING : This feature was renamed from size to sizing in v0.6.0 . You can change the size of the Progress via the sizing property.
DEFAULT
TINY
SMALL
MEDIUM
LARGE
HUGE
DEFAULT
TINY
SMALL
MEDIUM
LARGE
HUGE
Indeterminate By not passing the value property, the Progress will render with an animation for tasks that don't have trackable progression.
DEFAULT
ACCENT
NEUTRAL
DARK
LIGHT
ALERT
AFFIRMATIVE
INFORMATIVE
NEGATIVE
DEFAULT
ACCENT
NEUTRAL
DARK
LIGHT
ALERT
AFFIRMATIVE
INFORMATIVE
NEGATIVE
"},{"identifier":"/docs/framework/browser-support","title":"Browser Support","text":"Browser Support Modern Browsers listed below and generally their derivatives. Primary testing happens on Chrome / Firefox, both mobile and desktop. With occasional testing on Gnome Web which is based on WebKit. Chrome Edge Firefox Safari Edge (Pre Chromium) Internet Explorer Estimated Minimum 88+ January 2021 88+ January 2021 84+ December 2020 14.1+ April 2021 NOT SUPPORTED NOT SUPPORTED Tested Minimum 89+ ? 87+ ? NOT SUPPORTED NOT SUPPORTED Features Used The features listed below are used within Kahi UI, and are newer features. So they raise the minimum Browser versions needed. CSS clip-path w/ Shapes CSS Custom Properties Flexbox w/ Gap Grid inset :is :not w/ Selector List prefers-color-scheme Javascript TODO : Run through the codebase and look for newer JS features used "},{"identifier":"/docs/framework/custom-builds","title":"Custom Builds","text":"Custom Builds WARNING : When using manual builds of Kahi UI, you'll need to rebuild the distributables every time you upgrade Kahi UI. If you're building a Web Application that's particularly sensitive to latency, page sizes, etc. It's recommended to create custom builds of the Framework's CSS distributables. Downloading First, you'll need to head over to Releases , download the source code .zip / .tar.gz archive that matches the version of Kahi UI you're developing against, and decompress the archive onto your filesystem. Installation Once you've got everything downloaded and decompressed, open a terminal in the source code directory and install Kahi UI's dependencies. npm ci Building Now you can start building the CSS distributables via a NPM script. npm run build:framework Which should output in the package/ directory like so. package/ │ └───kahi-ui.framework.css // Main CSS rules and stylings └───kahi-ui.framework.css.map // Source map for the above file └───kahi-ui.theme.default.css // Themeing variables that define the look and feel └───kahi-ui.theme.default.css.map // Source map for the above file Then just copy the files you require into your Web Application's codebase and import them. Minifying You can also build the minified versions of the CSS distributables with another NPM script. npm run build:minify Which would output to package/ without source maps like so. package/ │ └───kahi-ui.framework.min.css // Main CSS rules and stylings └───kahi-ui.theme.default.min.css // Themeing variables that define the look and feel Filters Each individual feature of Kahi UI that requires CSS can turned off, removing it from builds. And it's as simple as adding command line parameters. Just run either of the NPM scripts with filter parameters following this format: --disable-{SCOPE}-{FEATURE}. For instance, if wanting to disable Grid and the responsitivity of Spacings (e.g. margin={[\"mobile:medium\"]}), try the following. USAGE : The double dashes (--) after build:framework / build:minify is required so NPM passes our command line parameters to the script. npm run build:framework -- --disable-globals-intrinsics-responsitivity --disable-components-grid Components Disclosure --disable-components-disclosure-accordion — Accordion --disable-components-disclosure-carousel — Carousel --disable-components-disclosure-tab — Tab Display --disable-components-display-badge — Badge --disable-components-display-kbd — Kbd --disable-components-display-list — List --disable-components-display-table — Table Embedded --disable-components-embedded-figure — Figure Feedback --disable-components-feedback-dot — Dot --disable-components-feedback-ellipsis — Ellipsis --disable-components-feedback-progress — Progress Interactables --disable-components-interactables-button — Button --disable-components-interactables-check — Check --disable-components-interactables-file-drop-input — FileDropInput --disable-components-interactables-form — Form --disable-components-interactables-number-input — NumberInput --disable-components-interactables-radio — Radio --disable-components-interactables-switch — Switch --disable-components-interactables-text-input — TextInput Layouts --disable-components-layouts-center — Center --disable-components-layouts-container — Container --disable-components-layouts-divider — Divider --disable-components-layouts-grid — Grid --disable-components-layouts-group — Group --disable-components-layouts-mosaic — Mosaic --disable-components-layouts-position — Position --disable-components-layouts-scrollable — Scrollable --disable-components-layouts-spacer — Spacer --disable-components-layouts-stack — Stack Navigation --disable-components-navigation-anchor — Anchor --disable-components-navigation-aside — Aside --disable-components-navigation-breadcrumb — Breadcrumb --disable-components-navigation-menu — Menu --disable-components-navigation-omni — Omni Overlays --disable-components-overlays-backdrop — Backdrop --disable-components-overlays-clickable — Clickable --disable-components-overlays-overlay — Overlay --disable-components-overlays-popover — Popover Surfaces --disable-components-surfaces-box — Box --disable-components-surfaces-card — Card --disable-components-surfaces-hero — Hero --disable-components-surfaces-tile — Tile Typography --disable-components-typography-blockquote — Blockquote --disable-components-typography-code — Code --disable-components-typography-heading — Heading --disable-components-typography-text — Text Utilities --disable-components-utilities-animation — Animation --disable-components-utilities-portal — Portal --disable-components-utilities-transition — Transition Widgets --disable-components-widgets-dataselect — DataSelect Globals WARNING : Most non-Component specific properties are implemented as global CSS attributes to reduce redundancy. If you turn off the feature, it turns off for ALL Components. --disable-globals-alignments — <* alignment=\"{ALIGNMENT}\" alignment_x=\"{ALIGNMENT}\" alignment_y=\"{ALIGNMENT}\"> --disable-globals-alignments-responsitivity — <* alignment={[\"{VIEWPORT}:{ALIGNMENT}]} alignment_x={[\"{VIEWPORT}:{ALIGNMENT}]} alignment_y={[\"{VIEWPORT}:{ALIGNMENT}]}> --disable-globals-elevations — <* elevation=\"{ELEVATION}\"> --disable-globals-elevations-responsitivity — <* elevation={[\"{VIEWPORT}:{ELEVATION}\"]}> --disable-globals-fit — <* fit=\"{FIT}\"> --disable-globals-fit-responsitivity — <* fit={[\"{VIEWPORT}:{FIT}\"]}> --disable-globals-grid — <* points=\"{POINTS}\" span=\"{SPAN}\" span_x=\"{SPAN}\" span_y=\"{SPAN}\"> --disable-globals-grid-responsitivity — <* points={[\"{VIEWPORT}:{POINTS}\"]} span={[\"{VIEWPORT}:{SPAN}\"]} span_x={[\"{VIEWPORT}:{SPAN}\"]} span_y={[\"{VIEWPORT}:{SPAN}\"]}> --disable-globals-intrinsics — <* height max_height min_height margin padding size max_size min_size width max_width min_width> --disable-globals-intrinsics-responsitivity — <* height max_height min_height margin padding size max_size min_size width max_width min_width> --disable-globals-orientations — <* orientation=\"{ORIENTATION}\"> --disable-globals-orientations-responsitivity — <* orientation={[\"{VIEWPORT}:{ORIENTATION}\"]}> --disable-globals-palettes — <* palette=\"{PALETTE}\"> --disable-globals-radius — <* radius=\"{RADIUS}\"> --disable-globals-radius-responsitivity — <* radius={[\"{VIEWPORT}:{RADIUS}\"]}> --disable-globals-sizings — <* sizing=\"{SIZING}\"> --disable-globals-sizings-responsitivity — <* sizing={[\"{VIEWPORT}:{SIZING}\"]}> --disable-globals-spacings — <* spacing=\"{SPACING}\" spacing_x=\"{SPACING}\" spacing_y=\"{SPACING}\"> --disable-globals-spacings-responsitivity— <* spacing={[\"{VIEWPORT}:{SPACING}\"]} spacing_x={[\"{VIEWPORT}:{SPACING}\"]} spacing_y={[\"{VIEWPORT}:{SPACING}\"]}> "},{"identifier":"/docs/framework/responsitivity","title":"Responsitivity","text":"Responsitivity Kahi UI supports responsive design out of the box for the majority of its Components. Such as Grid , where you can define how many items are displayed at each Viewport. Viewports As mentioned above, Kahi UI has the concept of four pre-defined breakpoints that are known as Viewports. Which are only active whenever the Browser window's width is within two sizes. Viewport Minimum Maximum mobile 0px 640px tablet 641px 768px desktop 769px 1024px widescreen 1025px ∞ Syntax To be able to use Viewport-specific values, you just need to prefix your values with {VIEWPORT}:, e.g. . But then you can't specify default values or other Viewport-specifics. For that you need to pass an array in like below. USAGE : REPL does not support viewport values, resize your Browser to observe this feature. "},{"identifier":"/docs/globals/actions","title":"Actions","text":"Actions NOTE : Introduced feature in v0.4.11. As a limitation of Svelte, you cannot use Actions on Components. So the Framework provides a special syntax to support forwarding actions to a Component's main elements. (clicked = false)}, ], ]} on:click={() => (clicked = true)} > {clicked ? \"I was clicked inside!\" : \"I am currently not clicked...\"} "},{"identifier":"/docs/globals/contents","title":"Contents","text":"Contents NOTE : Introduced feature in v0.5.0. All Components have access to the data-contents global HTML attribute via the contents property which removes the Component's bounding box / stylings from the DOM tree. USAGE : REPL does not support viewport values, resize your Browser to observe this feature. NOTE : By passing an array, you can set responsive values . e.g. contents={[\"mobile\", \"tablet\"]} I have no styling on Mobile / Tablet Viewports. I have no styling on Desktop / Widescreen Viewports. "},{"identifier":"/docs/globals/elements","title":"Elements","text":"Elements Like binding DOM nodes , most Components support binding their top-level layout HTMLElement via the element property instead of this. "},{"identifier":"/docs/globals/events","title":"Events","text":"Events Like binding normal DOM events with Svelte. Various Components in the Framework support forwarding their element's native events , or supply their own events for their own specific logic. "},{"identifier":"/docs/globals/hidden","title":"Hidden","text":"Hidden NOTE : Introduced feature in v0.2.2. All Components have access to the data-hidden global HTML attribute via the hidden property. Unlike the standard hidden HTML attribute, data-hidden supports Responsitivity . USAGE : REPL does not support viewport values, resize your Browser to observe this feature. NOTE : By passing an array, you can set responsive values . e.g. hidden={[\"mobile\", \"tablet\"]} "},{"identifier":"/docs/globals/html5","title":"HTML5","text":"HTML5 All Components have access to common HTML5 global attributes and events. class NOTE : Introduced feature in v0.2.0. class allows you to apply CSS classes that you've defined to Components. However, you will have to use :global on your class names to bypass Svelte's local scoping. Lorem ipsum dolor sit amet, consectetur adipiscing elit. style NOTE : Introduced feature in v0.2.0. style allows you to apply inline CSS properties to Components. Lorem ipsum dolor sit amet, consectetur adipiscing elit. id NOTE : Introduced feature in v0.2.0. id allows you to set an identifier that other elements can target or targettable for scrolling by a URL fragment . Scroll to Heading! Hello World! name NOTE : Introduced feature in v0.2.0. name allows you to set an identifier for the Component to set its value to in a form, or, can targettable by an Anchor . Open Landing Page