Readme

# Jhana UI

A beautifully dark-themed Svelte and CSS ui-system that embraces glowing bright colors, round corners and fluid transitions.

## ToDo

- Finish documentation site
- Add back ActionButton stroke thickening on focus-visible to stroked SVGIcon
- Allow function calling ctx-menu
    - How to pass anchor element?
- Implement replacement for .btn.shady used in Filters
- Fix outline on focus (dialogs, unstyled inputs)

## Versions

### 1.38.1 (260107)

- Added /popup as export to package.json

### 1.38.0 (260107)

- Implemented first working version of popups
- Improved ButtonClose styling with glow effect and transition
- Replaced default dev port with custom :38880

### 1.37.1 (250809)

- Fixed card:hover to only change border-color and not completely replace border style

### 1.37.0 (250808)

- BREAKING: Renamed `prog`/`progress` prop to `value` for both `Spinner` and `PageProgress`
    - This makes it consistent with ProgressBar and HTML's native progress element
- Added ProgressBar component
- Added aria-atts for Spinner and PageProgress

### 1.36.0 (250808)

- BREAKING: Renamed `ProgressBar` to `PageProgress`
- Fixed ProgressBar to use fixed instead of absolute positioning
- Fixed scroll-bar on CodeBlock from being next to header

### 1.35.0 (250802)

- Implemented ctx-menu flipping
    - For anchored to element mode
    - And for global mode: Implemented additional adapter, so margin is not flipped
- Internal: Separated out CtxMenuContent (visually styled content) from CtxMenuRoot (positioning and anchoring logic)

### 1.34.0 (250802)

- Added iconFile

### 1.33.0 (250801)

- Added keyboard shortcut indicator to ctx-menu item ('kbd')
- Improved kbd styling

### 1.32.0 (250801)

- Implemented loading state for async ctx-menu actions

### 1.31.0 (250801)

- Properly implemented font setups
    - Fixed font variable fallbacks and optimized their setup
    - Everthing was defined via font-variation-settings and font-feature-settings
    - This was unnecessary, as all of these were available via standard CSS properties
    - Opsz can be auto-derived from font-size with font-optical-sizing: auto
- Added class for styling keyboard shortcuts

### 1.30.0 (250801)

- BREAKING: Changed .tab.btn to display:block
- Added pathname matching modes for NavIndex
    - Allows for handling subpaths correctly

### 1.29.0 (250727)

- Implemented Component support for CtxMenuItem
    - BREAKING: `CtxMenuItem: Snippet` > `CtxMenuItem: { snippet: Snippet<[CtxMenuItemProps]> }`
    - Use with components: `CtxMenuItem: { component: Component<CtxMenuItemProps> }`

### 1.28.1 (250727)

- Had to unwrap further to reach intended goal of v1.28.0: Also removed li wrapper
    - Either use: `li > button`, `li > button + button` repeated as often as the entries you need
    - Or use: `div`, `section`, `p` for uniform block padding and rounded coners
    - Or use your very own setup

### 1.28.0 (250727)

- BREAKING: Removed div.snippet wrapper for `CtxMenuItem Snippets`
    - To keep previous styling, wrap your Snippet in `div`, `section` or `p`
    - Allows for using button, which will be identical to native CtxMenuItem actions
    - Allows for using a reactive Svelte map of multiple buttons

### 1.27.0 (250726)

- Improved ctx-menu opening and closing logic
    - Ignore right-clicks inside context menu
    - Close if open and would open the exact same menu anchored to the same element

### 1.26.0 (250726)

- Implemented workaround for ctx-menu instantly closing again on mobile
- BREAKING: Renamed `ContextGlobal` to `CtxMenuRoot`

### 1.25.0 (250724)

- Implemented left-click CtxMenu
    - Use: onclick={openMenu(menu)}
- Fixed CtxMenuTagMap for disabled menus
- Updated dependencies

### 1.24.0 (250724)

- Disabled pointer events for SVGIcons that have an icon-root
    - Fixes context menu global button handling for icon buttons
- Made callback in clipboard action helpers optional
- BREAKING: Context menu renames
    - type MenuConfig > CtxMenuConfig
    - type MenuItem > CtxMenuItem
    - class ContextMenu > CtxMenu
    - type ContextMenu['tagMap'] > CtxMenuTagMap
- Allowed non-checkers on CtxMenuTagMap
    - CtxMenuOpeningAction can be used as well

### 1.23.0 (250724)

- Added input context menu clipboard action helpers: copy, cut, paste

### 1.22.0 (250723)

- Improved ToggleLink and ToggleLock setup
    - Fixed sizing issues
    - Migrated to SVGIcon snippet syntax
- Added styling for svg containing .toggles and .radios, so they fit in line with text and number inputs inside .input-groups
    - Used by ToggleLink and ToggleLock
- Corrected \[disabled] to :disabled in the global stylesheet
- Removed forced id generation for all input components
    - Not neccessary, since input is child of label
    - Name can either be passed or not, id is no longer used as name fallback
- BREAKING: Removed highlight prop from Radio, just pass it as the class

### 1.21.0 (250722)

- Improved NumberInput styling
    - Correct cursor for buttons
    - Correct button style on disabled state

### 1.20.0 (250721)

- BREAKING: Removed `.active` class from `Icon`
    - Only :active pseudo-class will be listened to from now on
    - For creating alternative theming for an activated state, the color reactivity should be handled by the parent component
    - Both :hover and :active might be different values on an activated state
    - ActionButton was adapted accordingly

### 1.19.1 (250718)

- Fixed NavIndex, hidden text was visible due to icon-btn change

### 1.19.0 (250718)

- Added /transitions, specifically flexSlide

### 1.18.0 (250718)

- Added .btn.icon style
- Deprecated .btn.icon-btn class, this works automatically now
    - Remove any .icon-btn classes in your repo

### 1.17.1 (250718)

- Fixed recent dirs not being added to package.json to allow importing

### 1.17.0 (250718)

- Added scrollbar styling to global stylesheet

### 1.16.0 (250717)

- Added context menu logic and component
    - Added action-list to global stylesheet

### 1.15.0 (250715)

- BREAKING: Changed input components, so that class and style apply to wrapper
    - Other atts still apply to the input element itself
    - Changed: `NumberInput`, `Radio`, `Toggle`, `ToggleLink`, `ToggleLock`
    - NumberInput had workaround `cls`, which was replaced with `class` again

### 1.14.1 (250715)

- Fixed current location matching for both Tabs and NavIndex
- Docs changes
    - Fixed default minimized state
    - Fixed output for paths, so reloading works on web server

### 1.14.0 (250714)

- Added NavIndex minimized state, with smooth transition

### 1.13.1 (250713)

- Fixed CodeBlock overflowing and breaking layout

### 1.13.0 (250713)

- BREAKING: Separated font-faces from global style sheet
    - You need to import `@leon8ix/jhana-ui/fonts/inter.css` to keep Inter font as before
- Implemented CSS variables for
    - Monospace font
    - Variable font feature and variation settings
- Added bold class to CSS and made `b` and `strong` bold as well
- Improved CodeBlock styling

### 1.12.0 (250712)

- Replaced button texts in CodeBlock with icons

### 1.11.0 (250712)

- BREAKING: Transitioned to flexible `SVGIcon` syntax for all icons
- Added CodeBlock component

### 1.10.2 (250625)

- Fixed NumberInput up/down arrows causing weird numbers (rounds to 12 digits now)

### 1.10.1 (250625)

- Fixed NumberInput disable, applies to up/down arrows as well now

### 1.10.0 (250612)

- Updated all dependencies

### 1.9.0 (250612)

- Changed notify to allow for replacing noti data while open using id

### 1.8.0 (250612)

- Switched over to use Bun instead of NPM

### 1.7.0 (250612)

- Replaced internal utils functions with @leon8ix/utils
    - Auth token not included: Needs to be in user's home directory or consuming package

### 1.6.0 (250420)

- Added Spinner component

### 1.5.1 (250420)

- Removed SVG (and IMG etc.) reset, as it was causing problems with ToggleLock and ToggleLink

### 1.5.0 (250420)

- Made CSS reset much less aggressive
    - Basically no global selector, all default styled elements are targeted specifically
        - Previously global styles would overwrite any SVG's presentation atts
        - Only padding and margin are still global
    - Global 'outline: none' removed for accessibility
        - Only classes that specifically handle :focus-visible have 'outline: none'
    - Tested with
        - Infinipose 3.34.0-pre.4
        - Cover Designer 2.0.0-pre.11

### 1.4.1 (250417)

- Fixed font shorthand overwriting variable font-weight

### 1.4.0 (250417)

- Improved CSS reset in the stylesheet
- Updated dependencies

### 1.3.0 (250416)

- Added keyboard shortcut Svelte action

### 1.2.4 (250315)

- Fixed ActionButton class and color logic

### 1.2.3 (250315)

- Fixed missing unit for space-y-sm

### 1.2.2 (250312)

- Fixed NotifyRoot fixed positioning

### 1.2.1 (250309)

- Added /notify entrypoint

### 1.2.0 (250309)

- Added notification system

### 1.1.2 (250307)

- Fixed btn with non-button tags not having browser style for button line-height: normal

### 1.1.1 (250305)

- Fixed action-btn svg still depending on px unit

### 1.1.0 (250305)

- Replaced rem with em, as rem would cause problems on dynamic font size change

### 1.0.1 (250302)

- Fixed style.css import not working for consuming package

### 1.0.0 (250302)

- Initial commit
- Extracted out from Print Meter v4.0.0
- Before being used for and adapted to Print Meter, it was used in Infinipose
- Before being used for and adapted to Infinipose, it was developed for IconBase