@apliteni/apliteni-ui 0.41.2 → 0.41.3

package/guidelines/command-palette.md

@@ -6,7 +6,7 @@
 
 **Rule:** Put something in the palette only if a reader can name it.
 
-**Why:** Named items are easier to find and understand.
+**Why:** Readers can search for “New invoice”; “More” gives them no name to search for.
 
 **Do:** Include recognisable commands and numbered records that readers can also reach by clicking through the product.
 
@@ -22,7 +22,7 @@
 
 **Why:** Groups tell readers whether a result opens a record, changes location or runs a command.
 
-**Do:** Use three sentence-case headings at the 13px label rank for actions, destinations and recent items.
+**Do:** Use sentence-case headings at the 13px label rank, such as Actions, Destinations and Recent items.
 
 **Don't:** Show nine ungrouped rows that hide whether Enter runs a command, opens an invoice or goes to a page.
 

package/guidelines/component-choice.md

@@ -22,9 +22,9 @@
 
 **Except:** Use a drawer when the answer needs a form instead of two buttons.
 
-**Do:** The question stops the page.
+**Do:** Ask “Rotate this token?” in a confirm with “Keep token” and “Rotate token” buttons.
 
-**Don't:** Show the same question with nothing to answer.
+**Don't:** Put “Rotate this token?” in a callout with no answer buttons.
 
 ## Show lasting conditions
 
@@ -44,29 +44,29 @@
 
 <!-- rule: panels -->
 
-**Rule:** Use tabs() when the control owns a panel and segmented() when it owns nothing.
+**Rule:** Use `tabs()` to switch panels and `segmented()` for a choice that owns no panel, such as a value, filter or sort order.
 
 **Why:** A tablist promises a panel and arrow-key support; a strip without either fails the reader.
 
 **Except:** Links between locations are neither; the kit’s nav uses aria-current, not a tablist.
 
-**Do:** Use a filter strip that owns no panel.
+**Do:** Use a segmented control to filter one list by Any, Verified or Pending.
 
-**Don't:** Use a tablist that owns no panels.
+**Don't:** Give those same list filters tab roles when they have no separate panels.
 
 ## Match confirmation scale
 
 <!-- rule: scale -->
 
-**Rule:** Choose the confirmation by how much of the screen it owns.
+**Rule:** Use `successPanel()` for a confirmation inside a page and `success()` for a full-page confirmation or a next action.
 
 **Why:** successPanel() is a page block; success() is the page and tells the reader where to go next.
 
 **Except:** A block that needs somewhere to go next still uses success(); successPanel() takes two strings.
 
-**Do:** Use a block confirmation inside the page.
+**Do:** Use `successPanel()` to confirm sent feedback inside a card.
 
-**Don't:** Force a page-sized confirmation into a card.
+**Don't:** Put the full-page `success()` layout inside that card.
 
 ## Add dropdown search
 

package/guidelines/dense-tables.md

@@ -1,7 +1,5 @@
 # Dense tables
 
-Keep numbers comparable when the dataset needs many rows and columns.
-
 ## Use the right surface
 
 <!-- rule: surface -->
@@ -54,7 +52,7 @@ Keep numbers comparable when the dataset needs many rows and columns.
 
 <!-- rule: units -->
 
-**Why:** Units carry information even when they are secondary to the value.
+**Why:** A value without a readable unit leaves readers guessing whether it means euros, percent or a count.
 
 **Rule:** Keep units smaller and in body ink.
 

package/guidelines/destructive-actions.md

@@ -24,9 +24,9 @@
 
 **Except:** Use “Cancel” when there is nothing to keep yet, such as a new form or upload.
 
-**Do:** Each label makes sense alone.
+**Do:** Pair “Revoke access” with “Keep access”.
 
-**Don't:** Use “Are you sure?” without saying what will happen.
+**Don't:** Pair “OK” with “Cancel” under “Are you sure?” without naming the action.
 
 ## Choose confirmation or undo
 

package/guidelines/iconography.md

@@ -40,7 +40,7 @@
 
 **Do:** Keep the Lucide path unchanged and document a different name.
 
-**Don't:** Trace or copy a path without recording the difference.
+**Don't:** Redraw a Lucide path or rename the glyph without recording its original name.
 
 ## Status stroke width
 

package/guidelines/labels-and-titles.md

@@ -36,9 +36,9 @@
 
 **Except:** Keep inherently capitalised words as written, including acronyms, currency codes and key names such as USD, API and Esc.
 
-**Do:** Written and shown in sentence case.
+**Do:** Write “Total revenue” and display it without a text-transform override.
 
-**Don't:** Use all capitals, which pulls attention from the figures.
+**Don't:** Display “TOTAL REVENUE” above the figure.
 
 ## Rank card titles
 
@@ -50,7 +50,7 @@
 
 **Do:** Use --text-2xl for the page title and --text-lg for the card title.
 
-**Don't:** Use a second h1 for the card; it creates two page titles.
+**Don't:** Give the card title the same `--text-2xl` size as the page title.
 
 ## Use heading levels
 

package/guidelines/layout-and-density.md

@@ -8,7 +8,7 @@
 
 **Why:** Shared tokens prevent conflicting page widths and topbar overrides.
 
-**Do:** Use one token for both kit and site.
+**Do:** Use `--container` for the page and topbar widths.
 
 **Don't:** Put four page-width numbers in different files.
 
@@ -45,7 +45,7 @@
 
 **Rule:** Below the reading column, use `--panel-*` in `px` for component boxes and `--prose-*` in `ch` for text lines.
 
-**Why:** Panel tokens match component widths; prose tokens match text types.
+**Why:** Pixel widths keep mixed-size content in one box; `ch` limits a text line using its own font size.
 
 **Do:** Use panel `sm/md/lg` for 320/420/560px boxes and prose tokens for caption, lede, body, and dense text.
 

package/guidelines/microcopy.md

@@ -6,7 +6,7 @@
 
 **Rule:** Name a control for its current state, and rename it when the state changes.
 
-**Why:** A name that is correct only once becomes unhelpful later.
+**Why:** A checked switch named “Turn off” describes the next action instead of its current state.
 
 **Do:** Name the checked switch “In-app notifications, on.”
 

package/guidelines/motion.md

@@ -20,9 +20,9 @@
 
 **Rule:** Use 150ms for controls, 250ms for surfaces, 400ms for entrances, and 80ms (`--dur-instant`) for presses.
 
-**Why:** Use only `--dur-fast`, `--dur-med`, `--dur-slow`, and `--dur-instant` to keep one tempo.
+**Why:** Shared durations keep the same interaction from taking different amounts of time across the product.
 
-**Do:** Use the matching duration token.
+**Do:** Use `--dur-fast`, `--dur-med`, `--dur-slow`, and `--dur-instant` for controls, surfaces, entrances, and presses respectively.
 
 **Don't:** Use an unrelated duration such as 300ms.
 
@@ -34,9 +34,9 @@
 
 **Why:** Visibility keeps its old value during a transition, so easing adds no benefit.
 
-**Do:** Transition visibility with `linear`.
+**Do:** Use `--ease` for a drawer transition and `linear` for its visibility.
 
-**Don't:** Use CSS `ease` instead of `--ease`.
+**Don't:** Use CSS `ease` for both the drawer transition and its visibility.
 
 ## Honor reduced motion
 

package/guidelines/pagination.md

@@ -16,12 +16,10 @@
 
 <!-- rule: the-jump -->
 
-**Rule:** Use steps for filtering and sorting, numbers for short lists, or jump for a specific page.
+**Rule:** Use steps for filtering and sorting, numbers for short browsable lists such as changelogs and galleries, or jump for a specific page.
 
 **Why:** Filtering and sorting usually need quick jumps, while short lists can use numbered pages.
 
-**Except:** Use numbered pages for short browsable lists such as changelogs and galleries.
-
 **Do:** Use four fixed controls so a ledger’s first and last pages are one press away.
 
 **Don't:** On page 25 of 49, show only 1, 24, 26, and 49 as direct choices.

package/guidelines/stat-bands.md

@@ -6,7 +6,7 @@
 
 **Rule:** Put key figures in a stat band, not in a card of parts.
 
-**Why:** Each figure stays easy to compare and understand.
+**Why:** A shared layout keeps values, changes and their comparison basis in the same place for each figure.
 
 **Do:** Use one card per figure by default, with the figure largest, an arrow, a signed change, and one comparison caption above the row.
 

package/guidelines/state-set.md

@@ -8,9 +8,9 @@
 
 **Why:** One solid band and halo keep focus consistent while the browser decides when to show it.
 
-**Do:** Button and input share one ring.
+**Do:** Apply `--ring` to both the button and input on keyboard focus.
 
-**Don't:** The input draws its own ring.
+**Don't:** Give the input a separate muted outline while the button uses `--ring`.
 
 **Except:** Text-entry controls may match `:focus-visible` on mouse focus. Surface backgrounds set the gap colour and recompose `--ring`; adjust width and colour at the root.
 
@@ -36,9 +36,9 @@
 
 **Why:** Red alone communicates the state only to sighted readers.
 
-**Do:** The field reads its reason with it.
+**Do:** Mark the field `aria-invalid="true"` and connect its error message with `aria-describedby`.
 
-**Don't:** Use the same red with no connected reason.
+**Don't:** Paint the field red and show an error elsewhere without connecting the message to the field.
 
 **Except:** Put `required` in the attribute, not the label wording; the asterisk is decoration and hidden from assistive technology.
 
@@ -50,8 +50,8 @@
 
 **Why:** Silent loading gives screen-reader users no event.
 
-**Do:** Announce the coming shape in a status region.
+**Do:** Mark the loading region busy and announce “Loading…” in its status region.
 
-**Don't:** Let only the button know while the page reads as finished.
+**Don't:** Show a spinner only in the button while the loading region has no busy state or announcement.
 
 **Except:** A toast has its own live region, so a screen reporting through the toast stack needs no second one.

package/guidelines/the-page.md

@@ -56,9 +56,9 @@
 
 **Why:** Skipped levels hide structure, and a fourth level usually means the page should be split.
 
-**Do:** Keep each heading level under the one above it.
+**Do:** Use a page heading, then section headings, then group headings.
 
-**Don't:** Make readers guess which content belongs together.
+**Don't:** Skip from the page heading to a group heading, or add a fourth heading level.
 
 ## Emphasize one action
 
@@ -118,6 +118,6 @@
 
 **Why:** Repeating the title wastes the reader’s time.
 
-**Do:** Add useful context below “Payouts.”
+**Do:** Below “Payouts”, say “Payouts arrive within three business days.”
 
 **Don't:** Write “This is the payouts page” below “Payouts.”

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.41.2",
+  "version": "0.41.3",
   "workspaces": [
     "react"
   ],