@jonmilner/ui 0.2.5 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/Checkbox/Checkbox.css +1 -1
  2. package/dist/docs/Checkbox.md +3 -3
  3. package/dist/docs/manifest.json +1 -1
  4. package/package.json +1 -1
package/dist/Checkbox/Checkbox.css CHANGED
@@ -1,2 +1,2 @@
1
1
  @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.badge, components.button, components.chip, components.field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.toast;
2
- @layer components.checkbox{._1tze2y80{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._1tze2y80:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1tze2y80[aria-disabled=true]{cursor:not-allowed}._1tze2y80[aria-readonly=true]{cursor:default}._1tze2y81{inline-size:var(--space-16);block-size:var(--space-16);border:var(--space-1) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-accent-fg);forced-color-adjust:none;place-items:center;display:grid}._1tze2y80:not([aria-checked=true],[aria-checked=mixed],[aria-invalid=true],[aria-disabled=true],[aria-readonly=true]):hover ._1tze2y81{border-color:var(--color-fg)}._1tze2y80:is([aria-checked=true],[aria-checked=mixed]) ._1tze2y81{background-color:var(--color-accent);border-color:var(--color-accent)}._1tze2y80[aria-disabled=true] ._1tze2y81{border-style:dashed;border-color:var(--color-border-strong);background-color:var(--color-bg-muted);color:var(--color-fg-muted)}._1tze2y80[aria-invalid=true] ._1tze2y81{border-width:var(--space-2);border-color:var(--color-danger)}._1tze2y82{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;block-size:100%;inline-size:100%}._1tze2y80[aria-checked=mixed] ._1tze2y83,._1tze2y80:not([aria-checked=mixed]) ._1tze2y84{display:none}}
2
+ @layer components.checkbox{._1tze2y80{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}._1tze2y80:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1tze2y80[aria-disabled=true]{cursor:not-allowed}._1tze2y80[aria-readonly=true]{cursor:default}._1tze2y81{inline-size:var(--space-16);block-size:var(--space-16);border:var(--space-1) solid var(--color-border-strong);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-accent-fg);forced-color-adjust:none;place-items:center;display:grid}._1tze2y80:not([aria-checked=true],[aria-checked=mixed],[aria-invalid=true],[aria-disabled=true],[aria-readonly=true]):hover ._1tze2y81{border-color:var(--color-fg)}._1tze2y80:is([aria-checked=true],[aria-checked=mixed]) ._1tze2y81{background-color:var(--color-accent);border-color:var(--color-accent)}._1tze2y80[aria-readonly=true] ._1tze2y81{background-clip:padding-box;border-style:dotted}._1tze2y80[aria-disabled=true] ._1tze2y81{border-style:dashed;border-color:var(--color-border-strong);background-clip:border-box;background-color:var(--color-bg-muted);color:var(--color-fg-muted)}._1tze2y80[aria-invalid=true] ._1tze2y81{border-width:var(--space-2);border-color:var(--color-danger)}._1tze2y82{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;block-size:100%;inline-size:100%}._1tze2y80[aria-checked=mixed] ._1tze2y83,._1tze2y80:not([aria-checked=mixed]) ._1tze2y84{display:none}}
package/dist/docs/Checkbox.md CHANGED
@@ -22,13 +22,13 @@ A two-state choice, with a third mixed state for a "select all" over a partly se
22
22
  - Put `name` on the `Field` (or on the Checkbox outside one). A checked box submits `value` (default `"on"`); an unchecked one submits nothing unless you set `uncheckedValue`.
23
23
  - `checked` with `onCheckedChange` controls it; `defaultChecked` leaves it uncontrolled.
24
24
  - `indeterminate` shows the dash and sets `aria-checked="mixed"`, whatever `checked` is. Clear it yourself when the user clicks: Base UI toggles `checked` but leaves `indeterminate` as you pass it.
25
- - `disabled` takes it out of the tab order and dashes the border; `readOnly` keeps it focusable and announced (`aria-readonly`) but unchangeable; it looks like an editable one apart from the cursor and no hover, so say nearby why it cannot change. Set `disabled` on the `Field` to disable the checkbox and mute the label together.
25
+ - `disabled` takes it out of the tab order and dashes the border; `readOnly` keeps it focusable and announced (`aria-readonly`) but unchangeable, dots the border (disabled's dashes win when both are set) and drops the hover; still say nearby why it cannot change. Set `disabled` on the `Field` to disable the checkbox and mute the label together.
26
26
  - Space toggles it; Enter submits the form it is in, as on a native checkbox.
27
27
  - For an error, set `invalid` on the `Field` with the message in `Field.Error`; the box border thickens and turns `danger`, and the message says what is wrong.
28
28
  - Layout and the target are default style props (`display="inline-flex"`, centered, `flexShrink={0}`, `minInlineSize` and `minBlockSize` `"xs"`, 24px). Raise them freely; never set them below `"xs"`. The box is 16px; there are no sizes yet.
29
29
  - `className` is a string and `style` an object (not Base UI's state functions); they go to the span, after the defaults. `render` and `nativeButton` are not accepted.
30
30
  - The module has no hooks, so a server component can render it. `onCheckedChange` is a function: set it from a client component.
31
- - Style states off the ARIA attributes (`[aria-checked='true']`, `'mixed'`, `[aria-disabled='true']`, `[aria-invalid='true']`), not Base UI's `data-*` attributes.
31
+ - Style states off the ARIA attributes (`[aria-checked='true']`, `'mixed'`, `[aria-disabled='true']`, `[aria-readonly='true']`, `[aria-invalid='true']`), not Base UI's `data-*` attributes.
32
32
 
33
33
  ## Do
34
34
 
@@ -77,7 +77,7 @@ A two-state choice, with a third mixed state for a "select all" over a partly se
77
77
 
78
78
  - Role `checkbox` with `aria-checked` `"true"`, `"false"` or `"mixed"`; `aria-disabled`, `aria-readonly` and `aria-required` follow the props, and `aria-invalid` the `Field`.
79
79
  - The label, description and error reach it through `aria-labelledby` and `aria-describedby`, which Base UI adds after hydration; server HTML has the label's `for`.
80
- - Checked and mixed are a filled box with a tick or a dash, invalid a thicker border, disabled a dashed one, so no state is color alone. The box border is `borderStrong` (3:1 on every surface).
80
+ - Checked and mixed are a filled box with a tick or a dash, invalid a thicker border, disabled a dashed one, read-only a dotted one (the fill stops inside it, so the dots show when checked), so no state is color alone and each survives forced colors. The box border is `borderStrong` (3:1 on every surface).
81
81
  - Under forced colors the box keeps its role colors' system mappings: the fill is `LinkText` and the mark `Canvas` when checked, the border `CanvasText`, the focus ring `Highlight`.
82
82
  - The target is 24 by 24 CSS px; the focus ring wraps the target, not the box.
83
83
 
package/dist/docs/manifest.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "./manifest.schema.json",
3
3
  "package": "@jonmilner/ui",
4
- "version": "0.2.5",
4
+ "version": "0.2.6",
5
5
  "components": [
6
6
  {
7
7
  "name": "AlertDialog",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jonmilner/ui",
3
- "version": "0.2.5",
3
+ "version": "0.2.6",
4
4
  "files": [
5
5
  "dist",
6
6
  "THIRD_PARTY_NOTICES.md"