@ponchia/ui 0.3.4 → 0.3.5

package/docs/reference.md

@@ -9,7 +9,7 @@ rendering of every class is the kitchen-sink demo:
 **<https://ponchia.github.io/bronto-ui/>**. Theming knobs and the token
 contract: [docs/theming.md](theming.md).
 
-- 230 classes across 101 component groups
+- 260 classes across 109 component groups
 - Import the typed registry: `import { cls, ui, cx } from '@ponchia/ui/classes'`
 - Tokens as data: `import { cssVars, tokens, themeColor } from '@ponchia/ui/tokens'`
 
@@ -206,6 +206,20 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.caret` | `ui-caret` | base |
 
+### `.ui-carousel`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.carousel` | `ui-carousel` | base |
+| `cls.carouselNext` | `ui-carousel__next` | part |
+| `cls.carouselPrev` | `ui-carousel__prev` | part |
+| `cls.carouselSlide` | `ui-carousel__slide` | part |
+| `cls.carouselStage` | `ui-carousel__stage` | part |
+| `cls.carouselStatus` | `ui-carousel__status` | part |
+| `cls.carouselThumb` | `ui-carousel__thumb` | part |
+| `cls.carouselThumbs` | `ui-carousel__thumbs` | part |
+| `cls.carouselViewport` | `ui-carousel__viewport` | part |
+
 ### `.ui-center`
 
 | Registry key | Class | Kind |
@@ -390,6 +404,20 @@ each one matches a real selector in the stylesheet.
 | `cls.inputGroup` | `ui-input-group` | base |
 | `cls.inputGroupAddon` | `ui-input-group__addon` | part |
 
+### `.ui-input-icon`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.inputIcon` | `ui-input-icon` | base |
+| `cls.inputIconSlot` | `ui-input-icon__icon` | part |
+| `cls.inputIconEnd` | `ui-input-icon--end` | modifier |
+
+### `.ui-kbd`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.kbd` | `ui-kbd` | base |
+
 ### `.ui-key-value`
 
 | Registry key | Class | Kind |
@@ -402,6 +430,13 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.label` | `ui-label` | base |
 
+### `.ui-lightbox`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.lightbox` | `ui-lightbox` | base |
+| `cls.lightboxClose` | `ui-lightbox__close` | part |
+
 ### `.ui-link`
 
 | Registry key | Class | Kind |
@@ -438,6 +473,17 @@ each one matches a real selector in the stylesheet.
 | `cls.meta` | `ui-meta` | base |
 | `cls.metaItem` | `ui-meta__item` | part |
 
+### `.ui-meter`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.meter` | `ui-meter` | base |
+| `cls.meterFill` | `ui-meter__fill` | part |
+| `cls.meterAccent` | `ui-meter--accent` | modifier |
+| `cls.meterDanger` | `ui-meter--danger` | modifier |
+| `cls.meterSuccess` | `ui-meter--success` | modifier |
+| `cls.meterWarning` | `ui-meter--warning` | modifier |
+
 ### `.ui-modal`
 
 | Registry key | Class | Kind |
@@ -471,6 +517,14 @@ each one matches a real selector in the stylesheet.
 | `cls.numNeg` | `ui-num--neg` | modifier |
 | `cls.numPos` | `ui-num--pos` | modifier |
 
+### `.ui-pagehead`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.pagehead` | `ui-pagehead` | base |
+| `cls.pageheadActions` | `ui-pagehead__actions` | part |
+| `cls.pageheadTitle` | `ui-pagehead__title` | part |
+
 ### `.ui-pagination`
 
 | Registry key | Class | Kind |
@@ -637,6 +691,14 @@ each one matches a real selector in the stylesheet.
 | --- | --- | --- |
 | `cls.status` | `ui-status` | base |
 
+### `.ui-steps`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.steps` | `ui-steps` | base |
+| `cls.stepsItem` | `ui-steps__item` | part |
+| `cls.stepsItemDone` | `ui-steps__item--done` | modifier |
+
 ### `.ui-surface`
 
 | Registry key | Class | Kind |
@@ -721,6 +783,14 @@ each one matches a real selector in the stylesheet.
 | `cls.themetoggleThumb` | `ui-themetoggle__thumb` | part |
 | `cls.themetoggleTrack` | `ui-themetoggle__track` | part |
 
+### `.ui-timeline`
+
+| Registry key | Class | Kind |
+| --- | --- | --- |
+| `cls.timeline` | `ui-timeline` | base |
+| `cls.timelineItem` | `ui-timeline__item` | part |
+| `cls.timelineTime` | `ui-timeline__time` | part |
+
 ### `.ui-toast`
 
 | Registry key | Class | Kind |

package/docs/usage.md

@@ -86,6 +86,39 @@ destructive action).
 | toast    | transient, out-of-flow, system-initiated. Danger toasts route to an assertive live region; everything else polite. |
 | tooltip  | supplemental, hover/focus, never essential info (it's not announced reliably; don't hide required content in it). |
 
+## Meter vs progress
+
+Both are a thin horizontal bar; they mean different things.
+
+- **`ui-progress`** — *task* progress: how far an operation has run. Can be
+  indeterminate (`ui-progress--indeterminate`). The fill is always accent.
+- **`ui-meter`** — a *measured static value*: coverage, disk, capacity, a
+  KPI against a target. Never indeterminate. Tone the fill by threshold
+  (`ui.meter({ tone })` → accent/success/warning/danger); the unset
+  default is neutral. Drive the width with the shared `--value` knob
+  (`style="--value: 72"`, 0–100) and author `role="meter"` +
+  `aria-valuenow/min/max` for AT.
+
+Rule of thumb: *something is happening* → progress; *something measures
+this much* → meter.
+
+## Steps, timeline, kbd, input icons
+
+- **`ui-steps`** — a stepper for a multi-step flow. Use an `<ol>`. State is
+  ARIA-driven (the framework rule): the active step is `aria-current="step"`
+  (no class); completed steps take `ui-steps__item--done`. Markers are
+  auto-numbered by CSS counter.
+- **`ui-timeline`** — a vertical event list on a hairline spine (`<ol>` of
+  `ui-timeline__item`, optional `ui-timeline__time`). `aria-current` on an
+  item marks the live/most-recent event.
+- **`ui-kbd`** — an inline keyboard-key glyph. Wrap a `<kbd>`; for a
+  shortcut, use one per key (`<kbd>⌘</kbd> <kbd>K</kbd>`).
+- **`ui-input-icon`** — a leading (or `--end` trailing) icon *inside* one
+  control. This is distinct from `ui-input-group`, whose addon sits
+  *adjacent* to the control. Wrap the input; the icon is decorative
+  (`aria-hidden`) and the input keeps its full width. Don't hand-roll an
+  absolute overlay.
+
 ## Modal: native `<dialog>` vs `is-open`
 
 Prefer the **native `<dialog>`** path — you get top-layer, backdrop and
@@ -94,6 +127,25 @@ when a portal/React modal genuinely can't be a `<dialog>`; then the
 backdrop and focus-trap are **yours** to provide. A drawer is a modal
 that enters from an edge — same rule.
 
+## Carousel & lightbox: one primitive, two skins
+
+`ui-carousel` is a scroll-snap track of `__slide`s wired by `initCarousel`
+(prev/next, keyboard, a `__thumb` strip, the `__status` counter, ARIA).
+Because the track is **native horizontal scroll**, touch and trackpad
+swipe — with momentum — are the browser's; the behavior only keeps the JS
+index in sync with the scroll both ways. Add `data-bronto-carousel-loop`
+to wrap at the ends.
+
+A **lightbox is the same carousel inside a native
+`<dialog class="ui-lightbox">`**, opened with `data-bronto-open` (wired by
+`initDialog`). Do **not** hand-roll an overlay: the `<dialog>` gives the
+top layer, the backdrop, the focus-trap, Escape, and focus-return for
+free — exactly the parts a from-scratch lightbox gets wrong. The inline
+carousel crops (`cover`); the lightbox shows the whole image (`contain`).
+
+This is deliberately *not* an auto-playing marketing slider (no timers, no
+infinite-clone track). It's a gallery: the user drives it.
+
 ## When to add a behavior
 
 The CSS is the framework; `@ponchia/ui/behaviors` is the *sanctioned*

package/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2024 The Doto Project Authors (https://github.com/oliverlalan/Doto)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/package.json

@@ -1,8 +1,23 @@
 {
   "name": "@ponchia/ui",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
-  "description": "Shared Bronto UI framework — Nothing-inspired monochrome CSS theme, dot-matrix motifs, admin shell.",
+  "description": "Nothing-inspired, CSS-first UI framework — monochrome design tokens, one rationed accent, dot-matrix motifs, zero runtime dependencies, framework-agnostic.",
+  "keywords": [
+    "css",
+    "ui",
+    "ui-framework",
+    "design-system",
+    "design-tokens",
+    "cascade-layers",
+    "css-layers",
+    "nothing",
+    "monochrome",
+    "framework-agnostic",
+    "zero-dependencies",
+    "dark-mode",
+    "accessibility"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",