v0.6.4

CHANGELOG

ALL CHANGES: v0.6.3...v0.6.4

• Card

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

• keybind

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

• Tile

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

v0.6.3

CHANGELOG

ALL CHANGES: v0.6.2...v0.6.3

• Aside

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

• Divider

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

• keybind

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

• Omni

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

v0.6.2 - Introducing DataSelect

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

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

kahi-ui-dataselect-preview.mp4

Searching

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

kahi-ui-dataselect-filter.mp4

Multiple

And of course, multiple choices are allowed!

kahi-ui-dataselect-multiple.mp4

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

kahi-ui-dataselect-max.mp4

Conclusion

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

CHANGELOG

ALL CHANGES: v0.6.1...v0.6.2

• DataSelect

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• DataTable

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

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

• DateTimeStamp

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

• Popover

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

v0.6.1

CHANGELOG

ALL CHANGES: v0.6.0...v0.6.1

• Fixed packaging file inclusion.

v0.6.0 - Alpha 1

v0.6.0 Alpha 1

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

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

Custom Builds

For more information, see the Custom Builds documentation.

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

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

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

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

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

Custom Themes

For more information, see the Custom Themes documentation.

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

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

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

e.g.

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

Alternatively, you can manually specify shades.

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

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

CHANGELOG

ALL CHANGES: v0.5.7...v0.6.0

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

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

• Added the following Components / Component Features

  • *

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

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

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

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

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

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

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

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

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

  • Disclosure

    • Tab

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

  • Display

    • Badge

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

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

  • Embedded

    • Figure

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

  • Feedback

    • Ellipsis

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

    • Progress

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

  • Interactables

    • Button

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

    • Form

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

    • NumberInput

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

    • TextInput

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

  • Layouts

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

      • <a> — Renders similarly to <Anchor> along with a palette color configured by theme.
      • <blockquote> / <cite> — Renders similarly to <Blockquote.Container> / <Blockquote.Cite>, with inner children spacing and bottom margin.
      • <code> / <pre><code> — Renders similarly to <Code>.
      • ...

v0.5.7

CHANGELOG

ALL CHANGES: v0.5.6...v0.5.7

• Deprecated the following Components / Component Features

  • Display

    • Table

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

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

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

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

  • Feedback

    • Dot

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

    • Spinner

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

    • Wave

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

  • Interactables

    • Button

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

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

    • NumberInput

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

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

    • TextInput

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

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

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

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

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

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

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

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

  • Typography

    • Text

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

  • Widgets

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

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

    • DayStepper / MonthStepper / YearStepper

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

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

    • TimePicker

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

v0.5.6

CHANGELOG

ALL CHANGES: v0.5.5...v0.5.6

• Fixed the following Stores / Store Features

  • darkmode

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

v0.5.5

CHANGELOG

ALL CHANGES: v0.5.4...v0.5.5

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

v0.5.4

CHANGELOG

ALL CHANGES: v0.5.3...v0.5.4

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

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

• Deprecated the following Components / Component Features

  • Embedded

    • Figure

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

  • Feedback

    • Progress

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

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

    • Spinner

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

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

  • Interactables

    • Button

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

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

    • Check

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

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

    • NumberInput

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

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

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

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

    • Radio

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

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

    • Switch

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

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

    • TextInput

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

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

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

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

  • Layouts

    • Container

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

    • Mosaic

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

    • Stack

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

  • Navigation

    • Menu

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

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

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

  • Overlays

    • Overlay

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

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

    • Popover

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

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

  • Typography

    • Heading

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

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

    • Text

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

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

• Deprecated the following Stores / Store Features

  • htmlpalette

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

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

• Updated the following Components / Component Features

  • *

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

v0.5.3

CHANGELOG

ALL CHANGES: v0.5.2...v0.5.3

• Added the following Actions / Action Features

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

    • Enter, (space)

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

    • Esc

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

    • Enter

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

    • ArrowDown
    • Repeatable, 250ms throttle

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

    • ArrowLeft
    • Repeatable, 250ms throttle

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

    • ArrowRight
    • Repeatable, 250ms throttle

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

    • ArrowUp
    • Repeatable, 250ms throttle

• Added the following Components / Component Features

  • Widgets

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Fixed the following Components / Component Features

  • Widget

    • Pagination

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