CHANGELOG

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

• Revamped internal library typings.

CHANGELOG

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.

CHANGELOG

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.

CHANGELOG

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

  • Display

    • Table

      • <Table.Column colspan={number | string} rowspan={number | string}> / <Table.Heading colspan={number | string} rowspan={number | string}> — Bindings to colspan / rowspan attributes.

• 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.

CHANGELOG

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

      • Providing child content in the default unnamed slot will wrap the Component and content in a <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

        • Use <Anchor palette="XXX"> to color links according to palette.

CHANGELOG

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

      • (BREAKING) <Badge position="floated/raised"> — Current behavior is deprecated in favor of using Position.

  • Feedback

    • Dot

      • (BREAKING) <Dot position="floated/raised"> — Current behavior is deprecated in favor of using Position.

CHANGELOG

• 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.
    • NOTE: Properties map to snake_case, e.g. 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.
    • NOTE: Properties map to snake_case, e.g. 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.

CHANGELOG

• 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

      • (BREAKING) <Spinner variation="dual"> — Removed previously deprecated feature.

CHANGELOG

• 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.

CHANGELOG

• 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

  • *

    • Added slot typing to all Components.

  • Utilities

    • Portal

      • Updated to hide content whenever not yet mounted.

CHANGELOG

• 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

      • Updated spacing for separators small -> tiny tier.

  • Surfaces

    • Card

      • <Card.Figure> — non-fullbleed media is now centered on both axis.
      • Updated border / spacing handling to work better with <Card.Figure> with non-fullbleed media.

    • Card / Tile

      • <Card.Header> / <Tile.Header> — Updated font size large -> medium
      • Updated spacing to be slightly more compact.

CHANGELOG

• Fixed attribute mapping not rejecting false values.

CHANGELOG

• 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.

CHANGELOG

• First NPM release, install via npm install @kahi-ui/framework.

• 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.

    • e.g. 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.

    • e.g. 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.

    • e.g. color: rgb(var(--palette-accent-bold));
    • IMPORTANT: The semantic shades naming depends on the theme used. e.g. the default theme flips light <-> dark shades around and shifts the shading scale, for dark mode.
    • NOTE: The auto / auto-off palettes are their respective dark / light, depending on if the Framework is in dark mode.
    • NOTE: The inverse / inverse-off palettes are always the opposite of the auto / auto-off palettes.
    • NOTE: The 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.

    • e.g. 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.

    • e.g. 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.

    • e.g. 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

      • (BREAKING) <Spinner variation="dual"> — Will no longer be available in the future.

    • Wave

      • (BREAKING) <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 Buttons 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.

CHANGELOG

• 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

  • *

    • Migrated all Components to internally use new experiemental $$Props TypeScript type aliasing.
    • Fixed Svelte Compiler warnings for unused exports.

  • Navigation

    • Menu

      • <Menu.Container class="XXX"> — Fixed not accepting property input.

CHANGELOG

• Updated the following Components

  • Display

    • Table

      • Fixed table bottom borders to use deeper nested ::before to fix Chrome rendering bug.

  • Navigation

    • Aside

      • Removed rendering of Offscreen wrapper when logic_id is not set.

  • Overlays

    • Offscreen / Popover

      • Removed unintended behavior of inheriting the current logic / state contexts.

    • Overlay

      • Removed unintended property typings.

  • Utilities

    • Portal

      • Fixed exception thrown when trying to mount Portal container element.
      • Fixed Portal not removing children upon being destroyed.

• Updated the following Actions

  • click_outside

    • (POTENTIALLY BREAKING) Added validation check if the click target is actually inside the the DOM or off-screen.
      • If you had a Component which changes its DOM layout before the click event handler was fired, previously the action would emit a false positive.
      • e.g. the documentation web application's dark mode toggle icon. It changes the icon whenever clicked.

• 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

    • (POTENTIALLY BREAKING) Updated to remove attributes set target element if provided value is falsy.

  • prefersscheme

    • Updated to utilize the new mediaquery Store internally.

  • viewports(viewports: Record<string, boolean>): Readable<string>

    • Refactored implementation for quicker updates.
    • Only passing in a single Viewport will return an instance of viewport.

• 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

      • Updated to disable line wrapping on the inner characters.

  • Interactables

    • Check / Radio

      • Added <XXX variation="flush"> — Changes the appearance to only show the inner box / circle shape.

  • Navigation

    • Menu

      • Added <Menu.Label> — Useful for wrapping a form Component as a Menu option.
      • Added property passthrough for Menu.Anchor / Menu.Button / Menu.Divider / Menu.Heading to Menu.Item.
      • Updated typings for Menu.Anchor / Menu.Button / Menu.Divider / Menu.Heading.

  • Surfaces

    • Card / Tile

      • Added <XXX variation="flush"> — Changes the appearance to remove exterior padding, background, and box shadow.

CHANGELOG

• Upgraded Storybook 6.3.0-rc.11 -> 6.3.2.

• Updated the following Components

  • Interactables

    • Form

      • Updated 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.

        • IMPORTANT: This will only affect the VISUAL DISPLAY, not the value retrieved via value binding.

    • Check / Radio / Switch / TextInput

      • Added <XXX on:blur on:focus> — Events fired whenever the Component loses focus or gains focus from the end-user, respectively.

  • Navigation

    • Aside

      • Updated <Aside.Section> with disabled flex-shrink when not last of type.

  • Typography

    • Heading / Text

      • Updated handling for <Heading align="XXX" transform="XXX"> / <Text align="XXX" transform="XXX"> to internally use variables.

    • Text

      • Updated all <Text is="XXX"> elements to accept <Text align="XXX">.

CHANGELOG

• Bump Browser minimum version requirements.

  • Utilizing inset in Popover.

    • Chrome 87+ (November 2020)

    • Edge 87+ (November 2020)

    • Firefox 66+ (March 2019)

      • Minimum was already Firefox 67+.

    • Safari 14.1+ (April 2021)

      • Minimum was already Safari 14.1+.

• 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

      • Added <Aside.Container placement="left/right"> — Used to control which Viewport edge the Aside will be on when collapsed on Mobile / Tablet.
      • Added <Aside.Container on:active> — Fires whenever the Aside is made active, either via scripting or the end-user.
      • Added <Aside.Container on:dismiss> — Fires whenever the Aside is dismissed, either via scripting or the end-user.
      • Migrated <Aside.Container> to internally use Offscreen for collapsing functionality.
      • Updated last <Aside.Section> to flew grow to parent height.

  • Overlays

    • Overlay

      • Fixed Overlay potentially resetting between viewport changes.

  • Surfaces

    • Card

      • Updated <Card.Section> to have increased y-axis padding when the first / last child of a <Card.Container>.
      • Updated only last <Card.Section> to only flex grow parent height.

    • Card / Tile

      • Updated border size slightly for better Dark Mode readability.
      • Updated default elevation to be 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.