@signal9/era-ui 23.1.0 → 23.1.1
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.
- package/CHANGELOG.md +7 -0
- package/dist/eslint/index.js +3 -0
- package/dist/ui/avatar/avatar-fallback.svelte +4 -4
- package/dist/ui/calendar/calendar-day.svelte +8 -1
- package/dist/ui/date-field/date-field-segment.svelte +11 -1
- package/dist/ui/date-picker/date-picker-segment.svelte +11 -1
- package/dist/ui/date-range-field/date-range-field-segment.svelte +11 -1
- package/dist/ui/date-range-picker/date-range-picker-segment.svelte +11 -1
- package/dist/ui/time-field/time-field-segment.svelte +11 -1
- package/dist/ui/time-range-field/time-range-field-segment.svelte +11 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [23.1.1](https://github.com/sig-nine/era-ui/compare/v23.1.0...v23.1.1) (2026-08-09)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
* **docs:** hoist the embedded example out of a mustache ([4da5ee0](https://github.com/sig-nine/era-ui/commit/4da5ee0a911970f009acd967e0b10e3c6aa5723d))
|
|
6
|
+
* **typography:** close the token-cell half of anonymous-text — 106 findings to 26 ([682c5df](https://github.com/sig-nine/era-ui/commit/682c5df012547ad191a9034a3acf880e832a5b69))
|
|
7
|
+
|
|
1
8
|
## [23.1.0](https://github.com/sig-nine/era-ui/compare/v23.0.0...v23.1.0) (2026-08-09)
|
|
2
9
|
|
|
3
10
|
### Features
|
package/dist/eslint/index.js
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
/*
|
|
2
2
|
* ESLINT RULES FOR CONSUMING ERA.
|
|
3
3
|
*
|
|
4
|
+
* era-check-canonical: counter-examples — the messages below quote the var
|
|
5
|
+
* form in order to name it, which is the whole job.
|
|
6
|
+
*
|
|
4
7
|
* era's failure mode is silently wrong, never loudly broken. An unknown class
|
|
5
8
|
* renders as nothing; an arbitrary value renders as SOMETHING, which is worse,
|
|
6
9
|
* because it looks fine on the density you wrote it at and quietly falls off
|
|
@@ -10,12 +10,12 @@
|
|
|
10
10
|
}: PartProps<Avatar.FallbackProps> = $props();
|
|
11
11
|
</script>
|
|
12
12
|
|
|
13
|
+
<!-- era-token-ink: a fallback holds initials and nothing else, so it is the
|
|
14
|
+
text-only case the trim can actually reach. cap/alphabetic is right because
|
|
15
|
+
initials are caps. -->
|
|
13
16
|
<Avatar.Fallback
|
|
14
17
|
bind:ref
|
|
15
|
-
class={cn(
|
|
16
|
-
'inline-flex size-full items-center justify-center bg-elevated text-body text-muted',
|
|
17
|
-
className
|
|
18
|
-
)}
|
|
18
|
+
class={cn('era-token-ink size-full bg-elevated text-body text-muted', className)}
|
|
19
19
|
{...restProps}
|
|
20
20
|
>
|
|
21
21
|
{@render children?.()}
|
|
@@ -5,10 +5,17 @@
|
|
|
5
5
|
let { ref = $bindable(null), class: className, ...restProps }: Calendar.DayProps = $props();
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
|
+
<!-- era-token-ink, not a centring flex box. A day cell holds nothing but a
|
|
9
|
+
number, and bare text in a flex container is an ANONYMOUS flex item that
|
|
10
|
+
text-box-trim can never reach — so 42 of these were centred by font metrics
|
|
11
|
+
rather than by their band, on the component most likely to be on screen in
|
|
12
|
+
bulk. A block with align-content + the trim reaches it. cap/alphabetic is
|
|
13
|
+
the correct band here BECAUSE the content is digits, which are cap-height;
|
|
14
|
+
the x-height band would sit them low. -->
|
|
8
15
|
<Calendar.Day
|
|
9
16
|
bind:ref
|
|
10
17
|
class={cn(
|
|
11
|
-
'
|
|
18
|
+
'era-token-ink size-control cursor-default rounded-control text-body text-fg hover:bg-highlight focus:outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[outside-month]:pointer-events-none data-[outside-month]:text-muted/40 data-[selected]:bg-hover data-[selected]:text-bright data-[unavailable]:text-muted data-[unavailable]:line-through',
|
|
12
19
|
className
|
|
13
20
|
)}
|
|
14
21
|
{...restProps}
|
|
@@ -5,10 +5,20 @@
|
|
|
5
5
|
let { ref = $bindable(null), class: className, ...restProps }: DateField.SegmentProps = $props();
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
|
+
<!-- era-token-ink: a segment holds one token and nothing else, so it is the
|
|
9
|
+
text-only case text-box-trim can actually reach — as a centring flex box its
|
|
10
|
+
digits were an ANONYMOUS flex item and centred by font metrics instead.
|
|
11
|
+
display:block is safe because the field row is flex, so a segment is a flex
|
|
12
|
+
ITEM and still lays out beside its siblings.
|
|
13
|
+
|
|
14
|
+
cap/alphabetic is the band BECAUSE the content is digits, which are
|
|
15
|
+
cap-height. The empty-state placeholder ("yyyy") is lowercase and will sit a
|
|
16
|
+
touch high in that band — the deliberate trade: a field spends its life
|
|
17
|
+
filled, and the muted placeholder is the state that matters least. -->
|
|
8
18
|
<DateField.Segment
|
|
9
19
|
bind:ref
|
|
10
20
|
class={cn(
|
|
11
|
-
'
|
|
21
|
+
'era-token-ink h-chip rounded-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
|
|
12
22
|
className
|
|
13
23
|
)}
|
|
14
24
|
{...restProps}
|
|
@@ -5,10 +5,20 @@
|
|
|
5
5
|
let { ref = $bindable(null), class: className, ...restProps }: DatePicker.SegmentProps = $props();
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
|
+
<!-- era-token-ink: a segment holds one token and nothing else, so it is the
|
|
9
|
+
text-only case text-box-trim can actually reach — as a centring flex box its
|
|
10
|
+
digits were an ANONYMOUS flex item and centred by font metrics instead.
|
|
11
|
+
display:block is safe because the field row is flex, so a segment is a flex
|
|
12
|
+
ITEM and still lays out beside its siblings.
|
|
13
|
+
|
|
14
|
+
cap/alphabetic is the band BECAUSE the content is digits, which are
|
|
15
|
+
cap-height. The empty-state placeholder ("yyyy") is lowercase and will sit a
|
|
16
|
+
touch high in that band — the deliberate trade: a field spends its life
|
|
17
|
+
filled, and the muted placeholder is the state that matters least. -->
|
|
8
18
|
<DatePicker.Segment
|
|
9
19
|
bind:ref
|
|
10
20
|
class={cn(
|
|
11
|
-
'
|
|
21
|
+
'era-token-ink h-chip rounded-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
|
|
12
22
|
className
|
|
13
23
|
)}
|
|
14
24
|
{...restProps}
|
|
@@ -9,10 +9,20 @@
|
|
|
9
9
|
}: DateRangeField.SegmentProps = $props();
|
|
10
10
|
</script>
|
|
11
11
|
|
|
12
|
+
<!-- era-token-ink: a segment holds one token and nothing else, so it is the
|
|
13
|
+
text-only case text-box-trim can actually reach — as a centring flex box its
|
|
14
|
+
digits were an ANONYMOUS flex item and centred by font metrics instead.
|
|
15
|
+
display:block is safe because the field row is flex, so a segment is a flex
|
|
16
|
+
ITEM and still lays out beside its siblings.
|
|
17
|
+
|
|
18
|
+
cap/alphabetic is the band BECAUSE the content is digits, which are
|
|
19
|
+
cap-height. The empty-state placeholder ("yyyy") is lowercase and will sit a
|
|
20
|
+
touch high in that band — the deliberate trade: a field spends its life
|
|
21
|
+
filled, and the muted placeholder is the state that matters least. -->
|
|
12
22
|
<DateRangeField.Segment
|
|
13
23
|
bind:ref
|
|
14
24
|
class={cn(
|
|
15
|
-
'
|
|
25
|
+
'era-token-ink h-chip rounded-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
|
|
16
26
|
className
|
|
17
27
|
)}
|
|
18
28
|
{...restProps}
|
|
@@ -9,10 +9,20 @@
|
|
|
9
9
|
}: DateRangePicker.SegmentProps = $props();
|
|
10
10
|
</script>
|
|
11
11
|
|
|
12
|
+
<!-- era-token-ink: a segment holds one token and nothing else, so it is the
|
|
13
|
+
text-only case text-box-trim can actually reach — as a centring flex box its
|
|
14
|
+
digits were an ANONYMOUS flex item and centred by font metrics instead.
|
|
15
|
+
display:block is safe because the field row is flex, so a segment is a flex
|
|
16
|
+
ITEM and still lays out beside its siblings.
|
|
17
|
+
|
|
18
|
+
cap/alphabetic is the band BECAUSE the content is digits, which are
|
|
19
|
+
cap-height. The empty-state placeholder ("yyyy") is lowercase and will sit a
|
|
20
|
+
touch high in that band — the deliberate trade: a field spends its life
|
|
21
|
+
filled, and the muted placeholder is the state that matters least. -->
|
|
12
22
|
<DateRangePicker.Segment
|
|
13
23
|
bind:ref
|
|
14
24
|
class={cn(
|
|
15
|
-
'
|
|
25
|
+
'era-token-ink h-chip rounded-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
|
|
16
26
|
className
|
|
17
27
|
)}
|
|
18
28
|
{...restProps}
|
|
@@ -5,10 +5,20 @@
|
|
|
5
5
|
let { ref = $bindable(null), class: className, ...restProps }: TimeField.SegmentProps = $props();
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
|
+
<!-- era-token-ink: a segment holds one token and nothing else, so it is the
|
|
9
|
+
text-only case text-box-trim can actually reach — as a centring flex box its
|
|
10
|
+
digits were an ANONYMOUS flex item and centred by font metrics instead.
|
|
11
|
+
display:block is safe because the field row is flex, so a segment is a flex
|
|
12
|
+
ITEM and still lays out beside its siblings.
|
|
13
|
+
|
|
14
|
+
cap/alphabetic is the band BECAUSE the content is digits, which are
|
|
15
|
+
cap-height. The empty-state placeholder ("yyyy") is lowercase and will sit a
|
|
16
|
+
touch high in that band — the deliberate trade: a field spends its life
|
|
17
|
+
filled, and the muted placeholder is the state that matters least. -->
|
|
8
18
|
<TimeField.Segment
|
|
9
19
|
bind:ref
|
|
10
20
|
class={cn(
|
|
11
|
-
'
|
|
21
|
+
'era-token-ink h-chip rounded-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
|
|
12
22
|
className
|
|
13
23
|
)}
|
|
14
24
|
{...restProps}
|
|
@@ -9,10 +9,20 @@
|
|
|
9
9
|
}: TimeRangeField.SegmentProps = $props();
|
|
10
10
|
</script>
|
|
11
11
|
|
|
12
|
+
<!-- era-token-ink: a segment holds one token and nothing else, so it is the
|
|
13
|
+
text-only case text-box-trim can actually reach — as a centring flex box its
|
|
14
|
+
digits were an ANONYMOUS flex item and centred by font metrics instead.
|
|
15
|
+
display:block is safe because the field row is flex, so a segment is a flex
|
|
16
|
+
ITEM and still lays out beside its siblings.
|
|
17
|
+
|
|
18
|
+
cap/alphabetic is the band BECAUSE the content is digits, which are
|
|
19
|
+
cap-height. The empty-state placeholder ("yyyy") is lowercase and will sit a
|
|
20
|
+
touch high in that band — the deliberate trade: a field spends its life
|
|
21
|
+
filled, and the muted placeholder is the state that matters least. -->
|
|
12
22
|
<TimeRangeField.Segment
|
|
13
23
|
bind:ref
|
|
14
24
|
class={cn(
|
|
15
|
-
'
|
|
25
|
+
'era-token-ink h-chip rounded-chip px-[calc(var(--era-sp)/2)] focus:bg-highlight focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
|
|
16
26
|
className
|
|
17
27
|
)}
|
|
18
28
|
{...restProps}
|