Changelog — Pranesh Nikhar

 󰈤

0.1.6

Properly display the Table Component when it has a single row
Adds the Accordion Component
Updated the Progress Component to use CSS variables for better cross-browser compatibility

Migration Guide from 0.1.5

You can no longer use the <progress> HTML element to display a styled progress bar due to incompatibilities with Gecko-based browsers. Use something like a <div> that supports CSS pseudo-elements.

Additionally, you can no longer use the value and max attributes to control the progress bar. Use the --progress-value and --progress-max instead.

<div is-="progress" style="--progress-value: 50;">50%</div>
<div is-="progress" style="--progress-value: 8; --progress-max: 10;">8/10</div>

To control the progress bar dynamically with JavaScript:

document
    .getElementById('my-progress-element')
    .style.setProperty('--progress-max', '100')

0.1.5

Added the View Component
Added the Progress Component
Removed the arrow marker from the Popover Component on Safari

0.1.4

Hotfix: fixed input styles not getting applied

0.1.3

Added the Spinner Component
Added the Range Component
Fixed table borders
Fixed input component scoping

0.1.2

Switches appear dimmer when unchecked
Switches correctly show the track when the <input> stylesheet is imported
Added edge/bisecting caps to the Separator Component
Properly aligns Badges vertically
Removes an invalid initial-value property from the Dialog Component
Removes the markdown-like # markers prefixing heading elements <h1>-<h6>
Allows the --box-border-color CSS to be inherited and controlled with CSS variables
Allows the --table-border-color CSS to be inherited and controlled with CSS variables
Allows the --separator-color CSS to be inherited and controlled with CSS variables

Migration Guide from < 0.1.1

Heading Markers

The markdown-like # markers on heading elements <h1>-<h6> have been removed

If you intend to keep this behavior, use the following CSS code

h1::before {
    content: '# ';
}
h2::before {
    content: '## ';
}
h3::before {
    content: '### ';
}
h4::before {
    content: '#### ';
}
h5::before {
    content: '##### ';
}
h6::before {
    content: '###### ';
}

Inherited Color Variables

Prior to this release, --box-border-color, --table-border-color, and --separator-color always defaulted to --foreground0.

Now all child elements of an element with any of these CSS variables will inherit the value from its closest ancestor

<body style="--box-border-color: red;">
    <div box-="square">red border</div>
    <div box-="square" style="--box-border-color: blue;">blue border</div>
    <div style="--box-border-color: green;">
        <div box-="square">green border</div>
    </div>
</body>

The defaults for these variables can be controlled from :root

@layer base {
    :root {
        --box-border-color: var(--background1);
        --table-border-color: var(--background2);
        --separator-color: var(--cyan);
    }
}

0.1.1

Adds the Switch Component
Adds a half-block height variant to the Pre Component so it doesn’t appear so tall
Tooltips remain visible when you hover over their content

Migration Guide from 0.1.0

Pre Size

The default size for pre elements has been changed to make them shorter

1	<pre size-="small">Small</pre>
2	<pre>Default</pre>
3	<pre size-="large">Large (old default)</pre>

1
2	body {
3	display: flex;
4	flex-direction: column;
5	gap: 1ch;
6	}
7

0.1.0

Removed the contain:* keyword from the box- utility property in favor of shear-
Adds the pre Component
Adds the Tooltip Component
Adds the Table Component
Adds the Dialog Component
Adds a half-block height variants to Buttons so they don’t appear so tall

Migration Guide from 0.0.x

Box Containment

In versions prior to 0.1.0, a second keyword was added to the box- utility property to control whether the box should pad the top and/or bottom lines

<div box-="square contain:!top"></div>
<div box-="square contain:!bottom"></div>
<div box-="square contain:none"></div>

This has been replaced with the shear- property

<div box-="square" shear-="top"></div>
<div box-="square" shear-="bottom"></div>
<div box-="square" shear-="both"></div>

Since the selector for box- no longer allows more than one keyword, most elements using the box- utility will be affected by this change

Button Variants

The default button variant has been changed to make the button shorter

1	<button size-="large">Large (old default)</button>
2	<button>Default</button>
3	<button size-="small">Small</button>
4

1
2	body {
3	display: flex;
4	align-items: flex-start;
5	gap: 1ch;
6	}
7

The default button variant is still three lines tall but appears to be shorter as its background doesn’t take up the full height of three lines

0.0.6

Added the Separator Component
Added the Radio Component

0.0.5

Fixed black lines between badges
Split out nerd font plugin to only provide the font

0.0.4

Introduced Checkbox Component

0.0.3

Introduced Popover Component

0.0.2

Introduced Dynamic Theme Approach

0.0.1

Initial Release

← [b]ack

webtui/ ASCII Boxes [n]ext → webtui/ Installation