Skip to content
This repository was archived by the owner on Feb 18, 2026. It is now read-only.

Commit c6a12f9

Browse files
estherbrunnerestherbrunner
committed
docs(examples): improvements to color and pagination components
1 parent 0d1d8bc commit c6a12f9

File tree

225 files changed

+1704
-988
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

225 files changed

+1704
-988
lines changed

‎docs-src/components/form-colorgraph/form-colorgraph.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,14 @@ form-colorgraph {
158158
height: var(--input-height);
159159
width: 100%;
160160
transition: color var(--transition-short) var(--easing-inout);
161+
appearance: textfield;
162+
-moz-appearance: textfield;
163+
164+
&::-webkit-outer-spin-button,
165+
&::-webkit-inner-spin-button {
166+
-webkit-appearance: none;
167+
margin: 0;
168+
}
161169

162170
&[aria-invalid="true"] {
163171
box-shadow: 0 0 var(--space-xxs) 2px var(--color-error-invalid);
@@ -303,7 +311,7 @@ form-colorgraph {
303311
}
304312
}
305313

306-
@container (width > 27rem) {
314+
@container (width > 18rem) {
307315
form-colorgraph {
308316
display: grid;
309317
grid-template-areas: "graph graph graph" "slider slider slider" "lightness chroma hue";

‎docs-src/components/form-colorgraph/form-colorgraph.ts‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,13 @@ export default component<FormColorgraphProps>(
8484
// Initialize
8585
lInput.min = '0'
8686
lInput.max = '100'
87+
lInput.step = 'any'
8788
cInput.min = '0'
8889
cInput.max = '0.4'
90+
cInput.step = 'any'
8991
hInput.min = '0'
9092
hInput.max = '360'
93+
hInput.step = 'any'
9194
slider.setAttribute('aria-valuemin', '0')
9295
slider.setAttribute('aria-valuemax', '360')
9396

@@ -395,9 +398,14 @@ export default component<FormColorgraphProps>(
395398
'Add a <button.increment> to increment a value for a color channel.',
396399
),
397400
on('keydown', ({ event }) => {
398-
const target = event.target as HTMLElement
399-
if (target?.localName === 'input') return
400401
const { key, shiftKey } = event
402+
const target = event.target as HTMLElement | null
403+
if (
404+
!target ||
405+
(target.localName === 'input' &&
406+
(key === 'ArrowLeft' || key === 'ArrowRight'))
407+
)
408+
return
401409
if (
402410
key.substring(0, 5) === 'Arrow' ||
403411
['+', '-'].includes(key)
@@ -406,10 +414,31 @@ export default component<FormColorgraphProps>(
406414
event.stopPropagation()
407415
const axis = getAxis(target)
408416
if (axis) {
409-
if (key === 'ArrowLeft' || key === '-')
417+
if (
418+
key === 'ArrowLeft' ||
419+
key === 'ArrowDown' ||
420+
key === '-'
421+
)
410422
el.stepDown(axis, shiftKey)
411-
else if (key === 'ArrowRight' || key === '+')
423+
else if (
424+
key === 'ArrowRight' ||
425+
key === 'ArrowUp' ||
426+
key === '+'
427+
)
412428
el.stepUp(axis, shiftKey)
429+
} else if (target.role === 'slider') {
430+
if (
431+
key === 'ArrowLeft' ||
432+
key === 'ArrowDown' ||
433+
key === '-'
434+
)
435+
el.stepDown('h', shiftKey)
436+
else if (
437+
key === 'ArrowRight' ||
438+
key === 'ArrowUp' ||
439+
key === '+'
440+
)
441+
el.stepUp('h', shiftKey)
413442
} else {
414443
switch (key) {
415444
case 'ArrowDown':

‎docs-src/components/form-colorslider/form-colorslider.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@ form-colorslider {
3030
height: var(--input-height);
3131
width: 100%;
3232
transition: color var(--transition-short) var(--easing-inout);
33+
appearance: textfield;
34+
-moz-appearance: textfield;
35+
36+
&::-webkit-outer-spin-button,
37+
&::-webkit-inner-spin-button {
38+
-webkit-appearance: none;
39+
margin: 0;
40+
}
3341

3442
&[aria-invalid="true"] {
3543
box-shadow: 0 0 var(--space-xxs) 2px var(--color-error-invalid);

‎docs-src/components/module-colorinfo/module-colorinfo.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
module-colorinfo {
22
--swatch-size: var(--input-height);
3+
--color-fallback: transparent;
34

45
display: inline-flex;
56
gap: var(--space-l);
@@ -26,11 +27,23 @@ module-colorinfo {
2627
}
2728

2829
.swatch {
30+
position: relative;
2931
display: inline-block;
3032
background: var(--color-swatch);
3133
width: var(--swatch-size);
3234
height: var(--swatch-size);
3335
border-radius: var(--space-xxs);
36+
overflow: hidden;
37+
38+
&::before {
39+
position: absolute;
40+
content: "";
41+
display: block;
42+
width: 0;
43+
height: 0;
44+
border-left: var(--swatch-size) solid transparent;
45+
border-bottom: var(--swatch-size) solid var(--color-fallback);
46+
}
3447
}
3548

3649
.label {

‎docs-src/components/module-colorinfo/module-colorinfo.html‎

Lines changed: 34 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,51 @@
55
<span class="swatch"></span>
66
<span class="label">
77
<strong>Blue</strong>
8-
<small class="value">#143dda</small>
8+
<small class="hex"></small>
99
</span>
1010
</div>
1111
</summary>
1212
<div class="details">
1313
<dl>
1414
<dt>Lightness:</dt>
15-
<dd class="lightness"></dd>
15+
<dd>
16+
<basic-number
17+
class="lightness"
18+
options="{style:'percent',maximumFractionDigits:2}"
19+
></basic-number>
20+
</dd>
1621
<dt>Chroma:</dt>
17-
<dd class="chroma"></dd>
22+
<dd>
23+
<basic-number
24+
class="chroma"
25+
options="{maximumFractionDigits:4}"
26+
></basic-number>
27+
</dd>
1828
<dt>Hue:</dt>
19-
<dd class="hue"></dd>
29+
<dd>
30+
<basic-number
31+
class="hue"
32+
options="{maximumFractionDigits:2}"
33+
></basic-number>
34+
</dd>
2035
</dl>
2136
<dl>
2237
<dt>OKLCH:</dt>
23-
<dd class="oklch"></dd>
38+
<dd>
39+
oklch(<basic-number
40+
class="lightness"
41+
options="{maximumFractionDigits:4}"
42+
></basic-number>
43+
<basic-number
44+
class="chroma"
45+
options="{maximumFractionDigits:4}"
46+
></basic-number>
47+
<basic-number
48+
class="hue"
49+
options="{maximumFractionDigits:2}"
50+
></basic-number
51+
>)
52+
</dd>
2453
<dt>RGB:</dt>
2554
<dd class="rgb"></dd>
2655
<dt>HSL:</dt>

‎docs-src/components/module-colorinfo/module-colorinfo.ts‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
component,
55
fromDOM,
66
getText,
7+
pass,
78
setStyle,
89
setText,
910
} from '../../..'
@@ -20,38 +21,39 @@ import { asOklch } from '../../functions/parser/asOklch'
2021
export type ModuleColorinfoProps = {
2122
name: string
2223
color: Oklch
24+
readonly css: string
25+
readonly hex: string
26+
readonly rgb: string
27+
readonly hsl: string
28+
readonly lightness: number
29+
readonly chroma: number
30+
readonly hue: number
2331
}
2432

25-
const fn2Digits = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 })
26-
.format
27-
const fn4Digits = new Intl.NumberFormat('en-US', { maximumFractionDigits: 4 })
28-
.format
29-
3033
export default component(
3134
'module-colorinfo',
3235
{
3336
name: asString(fromDOM({ '.label strong': getText() }, '')),
3437
color: asOklch(),
38+
css: (el: HTMLElement & { color: Oklch }) => () => formatCss(el.color),
39+
hex: (el: HTMLElement & { color: Oklch }) => () => formatHex(el.color),
40+
rgb: (el: HTMLElement & { color: Oklch }) => () => formatRgb(el.color),
41+
hsl: (el: HTMLElement & { color: Oklch }) => () => formatHsl(el.color),
42+
lightness: (el: HTMLElement & { color: Oklch }) => () => el.color.l,
43+
chroma: (el: HTMLElement & { color: Oklch }) => () => el.color.c,
44+
hue: (el: HTMLElement & { color: Oklch }) => () => el.color.h ?? 0,
3545
},
36-
(el, { first }) => {
37-
const fns = [
38-
setStyle('--color-swatch', () => formatCss(el.color)),
39-
first('.label strong', setText('name')),
40-
]
41-
for (const [name, fn] of Object.entries({
42-
value: () => formatHex(el.color),
43-
lightness: () => `${fn2Digits(el.color.l * 100)}%`,
44-
chroma: () => fn4Digits(el.color.c),
45-
hue: () => `${fn2Digits(el.color.h ?? 0)}°`,
46-
oklch: () =>
47-
`oklch(${fn4Digits(el.color.l)} ${fn4Digits(el.color.c)} ${fn2Digits(el.color.h ?? 0)})`,
48-
rgb: () => formatRgb(el.color),
49-
hsl: () => formatHsl(el.color),
50-
})) {
51-
fns.push(first(`.${name}`, setText(fn)))
52-
}
53-
return fns
54-
},
46+
(_, { all, first }) => [
47+
setStyle('--color-swatch', 'css'),
48+
setStyle('--color-fallback', 'hex'),
49+
first('.label strong', setText('name')),
50+
first('.hex', setText('hex')),
51+
first('.rgb', setText('rgb')),
52+
first('.hsl', setText('hsl')),
53+
all('.lightness', pass({ value: 'lightness' })),
54+
all('.chroma', pass({ value: 'chroma' })),
55+
all('.hue', pass({ value: 'hue' })),
56+
],
5557
)
5658

5759
declare global {

‎docs-src/components/module-pagination/module-pagination.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,14 @@ module-pagination {
2020
height: var(--input-height);
2121
transition: color var(--transition-short) var(--easing-inout);
2222
text-align: right;
23+
appearance: textfield;
24+
-moz-appearance: textfield;
25+
26+
&::-webkit-outer-spin-button,
27+
&::-webkit-inner-spin-button {
28+
-webkit-appearance: none;
29+
margin: 0;
30+
}
2331
}
2432

2533
.buttons {

‎docs-src/pages/api/classes/CircularMutationError.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
# Class: CircularMutationError
88

9-
Defined in: [src/core/errors.ts:10](https://github.com/zeixcom/ui-element/blob/59c53763de8d2253b945b5a93a0a730fbee86942/src/core/errors.ts#L10)
9+
Defined in: [src/core/errors.ts:10](https://github.com/zeixcom/ui-element/blob/0d1d8bcd09361c4e51ed49d4aa52794efffd13c3/src/core/errors.ts#L10)
1010

1111
Error thrown when a circular dependency is detected in a selection signal
1212

@@ -24,7 +24,7 @@ Error thrown when a circular dependency is detected in a selection signal
2424

2525
> **new CircularMutationError**(`host`, `selector`): `CircularMutationError`
2626
27-
Defined in: [src/core/errors.ts:15](https://github.com/zeixcom/ui-element/blob/59c53763de8d2253b945b5a93a0a730fbee86942/src/core/errors.ts#L15)
27+
Defined in: [src/core/errors.ts:15](https://github.com/zeixcom/ui-element/blob/0d1d8bcd09361c4e51ed49d4aa52794efffd13c3/src/core/errors.ts#L15)
2828

2929
#### Parameters
3030

‎docs-src/pages/api/classes/DependencyTimeoutError.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
# Class: DependencyTimeoutError
88

9-
Defined in: [src/core/errors.ts:115](https://github.com/zeixcom/ui-element/blob/59c53763de8d2253b945b5a93a0a730fbee86942/src/core/errors.ts#L115)
9+
Defined in: [src/core/errors.ts:115](https://github.com/zeixcom/ui-element/blob/0d1d8bcd09361c4e51ed49d4aa52794efffd13c3/src/core/errors.ts#L115)
1010

1111
Error when a component's dependencies are not met within a specified timeout
1212

@@ -24,7 +24,7 @@ Error when a component's dependencies are not met within a specified timeout
2424

2525
> **new DependencyTimeoutError**(`host`, `missing`): `DependencyTimeoutError`
2626
27-
Defined in: [src/core/errors.ts:116](https://github.com/zeixcom/ui-element/blob/59c53763de8d2253b945b5a93a0a730fbee86942/src/core/errors.ts#L116)
27+
Defined in: [src/core/errors.ts:116](https://github.com/zeixcom/ui-element/blob/0d1d8bcd09361c4e51ed49d4aa52794efffd13c3/src/core/errors.ts#L116)
2828

2929
#### Parameters
3030

‎docs-src/pages/api/classes/InvalidComponentNameError.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
# Class: InvalidComponentNameError
88

9-
Defined in: [src/core/errors.ts:28](https://github.com/zeixcom/ui-element/blob/59c53763de8d2253b945b5a93a0a730fbee86942/src/core/errors.ts#L28)
9+
Defined in: [src/core/errors.ts:28](https://github.com/zeixcom/ui-element/blob/0d1d8bcd09361c4e51ed49d4aa52794efffd13c3/src/core/errors.ts#L28)
1010

1111
Error thrown when component name violates rules for custom element names
1212

@@ -24,7 +24,7 @@ Error thrown when component name violates rules for custom element names
2424

2525
> **new InvalidComponentNameError**(`component`): `InvalidComponentNameError`
2626
27-
Defined in: [src/core/errors.ts:32](https://github.com/zeixcom/ui-element/blob/59c53763de8d2253b945b5a93a0a730fbee86942/src/core/errors.ts#L32)
27+
Defined in: [src/core/errors.ts:32](https://github.com/zeixcom/ui-element/blob/0d1d8bcd09361c4e51ed49d4aa52794efffd13c3/src/core/errors.ts#L32)
2828

2929
#### Parameters
3030

0 commit comments

Comments
 (0)