@f-ewald/components 1.9.0 → 1.10.0
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/README.md +1 -0
- package/custom-elements.json +131 -0
- package/dist/button-group.d.ts +38 -0
- package/dist/button-group.d.ts.map +1 -0
- package/dist/button-group.js +170 -0
- package/dist/button-group.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/docs/button-group.md +64 -0
- package/llms.txt +30 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -50,6 +50,7 @@ import "@f-ewald/components/roman-numeral.js";
|
|
|
50
50
|
| `<app-shell>` | [API reference](https://f-ewald.github.io/components/docs/app-shell.html) |
|
|
51
51
|
| `<app-sidebar>` | [API reference](https://f-ewald.github.io/components/docs/app-sidebar.html) |
|
|
52
52
|
| `<autocomplete-input>` | [API reference](https://f-ewald.github.io/components/docs/autocomplete-input.html) |
|
|
53
|
+
| `<button-group>` | [API reference](https://f-ewald.github.io/components/docs/button-group.html) |
|
|
53
54
|
| `<calendar-entry>` | [API reference](https://f-ewald.github.io/components/docs/calendar-entry.html) |
|
|
54
55
|
| `<calendar-month>` | [API reference](https://f-ewald.github.io/components/docs/calendar-month.html) |
|
|
55
56
|
| `<calendar-year>` | [API reference](https://f-ewald.github.io/components/docs/calendar-year.html) |
|
package/custom-elements.json
CHANGED
|
@@ -1877,6 +1877,121 @@
|
|
|
1877
1877
|
}
|
|
1878
1878
|
]
|
|
1879
1879
|
},
|
|
1880
|
+
{
|
|
1881
|
+
"kind": "javascript-module",
|
|
1882
|
+
"path": "src/button-group.ts",
|
|
1883
|
+
"declarations": [
|
|
1884
|
+
{
|
|
1885
|
+
"kind": "class",
|
|
1886
|
+
"description": "Single-select segmented control — a strip of buttons joined into one\nshared-border shape, for a small, persistent set of mutually exclusive\nchoices (a view switcher, a theme picker) where the *currently selected*\noption should read as visually \"pressed,\" not just checked. For many\nshort, individually pill-shaped choices, use `radio-pills` instead. Wraps\nnative radio inputs for keyboard/a11y and fires `change` rather than\nrelying on form submission.",
|
|
1887
|
+
"name": "ButtonGroup",
|
|
1888
|
+
"members": [
|
|
1889
|
+
{
|
|
1890
|
+
"kind": "field",
|
|
1891
|
+
"name": "options",
|
|
1892
|
+
"type": {
|
|
1893
|
+
"text": "ButtonGroupOption[]"
|
|
1894
|
+
},
|
|
1895
|
+
"default": "[]",
|
|
1896
|
+
"description": "Options to render, one segment each."
|
|
1897
|
+
},
|
|
1898
|
+
{
|
|
1899
|
+
"kind": "field",
|
|
1900
|
+
"name": "value",
|
|
1901
|
+
"type": {
|
|
1902
|
+
"text": "string"
|
|
1903
|
+
},
|
|
1904
|
+
"default": "\"\"",
|
|
1905
|
+
"description": "Currently selected value.",
|
|
1906
|
+
"attribute": "value"
|
|
1907
|
+
},
|
|
1908
|
+
{
|
|
1909
|
+
"kind": "field",
|
|
1910
|
+
"name": "disabled",
|
|
1911
|
+
"type": {
|
|
1912
|
+
"text": "boolean"
|
|
1913
|
+
},
|
|
1914
|
+
"default": "false",
|
|
1915
|
+
"description": "Disables every native radio in the group.",
|
|
1916
|
+
"attribute": "disabled"
|
|
1917
|
+
},
|
|
1918
|
+
{
|
|
1919
|
+
"kind": "field",
|
|
1920
|
+
"name": "#name",
|
|
1921
|
+
"privacy": "private",
|
|
1922
|
+
"readonly": true,
|
|
1923
|
+
"default": "`button-group-${++instanceCount}`"
|
|
1924
|
+
},
|
|
1925
|
+
{
|
|
1926
|
+
"kind": "method",
|
|
1927
|
+
"name": "_onChange",
|
|
1928
|
+
"privacy": "private",
|
|
1929
|
+
"parameters": [
|
|
1930
|
+
{
|
|
1931
|
+
"name": "value",
|
|
1932
|
+
"type": {
|
|
1933
|
+
"text": "string"
|
|
1934
|
+
}
|
|
1935
|
+
}
|
|
1936
|
+
]
|
|
1937
|
+
}
|
|
1938
|
+
],
|
|
1939
|
+
"events": [
|
|
1940
|
+
{
|
|
1941
|
+
"name": "change",
|
|
1942
|
+
"type": {
|
|
1943
|
+
"text": "CustomEvent"
|
|
1944
|
+
},
|
|
1945
|
+
"description": "A segment was selected; detail: { value }."
|
|
1946
|
+
}
|
|
1947
|
+
],
|
|
1948
|
+
"attributes": [
|
|
1949
|
+
{
|
|
1950
|
+
"name": "value",
|
|
1951
|
+
"type": {
|
|
1952
|
+
"text": "string"
|
|
1953
|
+
},
|
|
1954
|
+
"default": "\"\"",
|
|
1955
|
+
"description": "Currently selected value.",
|
|
1956
|
+
"fieldName": "value"
|
|
1957
|
+
},
|
|
1958
|
+
{
|
|
1959
|
+
"name": "disabled",
|
|
1960
|
+
"type": {
|
|
1961
|
+
"text": "boolean"
|
|
1962
|
+
},
|
|
1963
|
+
"default": "false",
|
|
1964
|
+
"description": "Disables every native radio in the group.",
|
|
1965
|
+
"fieldName": "disabled"
|
|
1966
|
+
}
|
|
1967
|
+
],
|
|
1968
|
+
"superclass": {
|
|
1969
|
+
"name": "LitElement",
|
|
1970
|
+
"package": "lit"
|
|
1971
|
+
},
|
|
1972
|
+
"tagName": "button-group",
|
|
1973
|
+
"customElement": true
|
|
1974
|
+
}
|
|
1975
|
+
],
|
|
1976
|
+
"exports": [
|
|
1977
|
+
{
|
|
1978
|
+
"kind": "js",
|
|
1979
|
+
"name": "ButtonGroup",
|
|
1980
|
+
"declaration": {
|
|
1981
|
+
"name": "ButtonGroup",
|
|
1982
|
+
"module": "src/button-group.ts"
|
|
1983
|
+
}
|
|
1984
|
+
},
|
|
1985
|
+
{
|
|
1986
|
+
"kind": "custom-element-definition",
|
|
1987
|
+
"name": "button-group",
|
|
1988
|
+
"declaration": {
|
|
1989
|
+
"name": "ButtonGroup",
|
|
1990
|
+
"module": "src/button-group.ts"
|
|
1991
|
+
}
|
|
1992
|
+
}
|
|
1993
|
+
]
|
|
1994
|
+
},
|
|
1880
1995
|
{
|
|
1881
1996
|
"kind": "javascript-module",
|
|
1882
1997
|
"path": "src/calendar-entry.ts",
|
|
@@ -6164,6 +6279,22 @@
|
|
|
6164
6279
|
"module": "./radio-pills.js"
|
|
6165
6280
|
}
|
|
6166
6281
|
},
|
|
6282
|
+
{
|
|
6283
|
+
"kind": "js",
|
|
6284
|
+
"name": "ButtonGroup",
|
|
6285
|
+
"declaration": {
|
|
6286
|
+
"name": "ButtonGroup",
|
|
6287
|
+
"module": "./button-group.js"
|
|
6288
|
+
}
|
|
6289
|
+
},
|
|
6290
|
+
{
|
|
6291
|
+
"kind": "js",
|
|
6292
|
+
"name": "ButtonGroupOption",
|
|
6293
|
+
"declaration": {
|
|
6294
|
+
"name": "ButtonGroupOption",
|
|
6295
|
+
"module": "./button-group.js"
|
|
6296
|
+
}
|
|
6297
|
+
},
|
|
6167
6298
|
{
|
|
6168
6299
|
"kind": "js",
|
|
6169
6300
|
"name": "UiButton",
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { TemplateResult } from "lit";
|
|
2
|
+
import { LitElement } from "lit";
|
|
3
|
+
export interface ButtonGroupOption {
|
|
4
|
+
value: string;
|
|
5
|
+
label: string;
|
|
6
|
+
/** Optional pre-rendered icon template displayed before the label. */
|
|
7
|
+
icon?: TemplateResult;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Single-select segmented control — a strip of buttons joined into one
|
|
11
|
+
* shared-border shape, for a small, persistent set of mutually exclusive
|
|
12
|
+
* choices (a view switcher, a theme picker) where the *currently selected*
|
|
13
|
+
* option should read as visually "pressed," not just checked. For many
|
|
14
|
+
* short, individually pill-shaped choices, use `radio-pills` instead. Wraps
|
|
15
|
+
* native radio inputs for keyboard/a11y and fires `change` rather than
|
|
16
|
+
* relying on form submission.
|
|
17
|
+
*
|
|
18
|
+
* @element button-group
|
|
19
|
+
* @fires change - A segment was selected; detail: { value }.
|
|
20
|
+
*/
|
|
21
|
+
export declare class ButtonGroup extends LitElement {
|
|
22
|
+
#private;
|
|
23
|
+
static styles: import("lit").CSSResult[];
|
|
24
|
+
/** Options to render, one segment each. */
|
|
25
|
+
options: ButtonGroupOption[];
|
|
26
|
+
/** Currently selected value. */
|
|
27
|
+
value: string;
|
|
28
|
+
/** Disables every native radio in the group. */
|
|
29
|
+
disabled: boolean;
|
|
30
|
+
private _onChange;
|
|
31
|
+
render(): TemplateResult<1>;
|
|
32
|
+
}
|
|
33
|
+
declare global {
|
|
34
|
+
interface HTMLElementTagNameMap {
|
|
35
|
+
"button-group": ButtonGroup;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=button-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../src/button-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAID;;;;;;;;;;;GAWG;AACH,qBACa,WAAY,SAAQ,UAAU;;IACzC,OAAgB,MAAM,4BA8FpB;IAEF,2CAA2C;IACX,OAAO,EAAE,iBAAiB,EAAE,CAAM;IAClE,gCAAgC;IACpB,KAAK,SAAM;IACvB,gDAAgD;IACnB,QAAQ,UAAS;IAI9C,OAAO,CAAC,SAAS;IAQR,MAAM,sBAsBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, css, html, nothing } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
|
+
import { repeat } from "lit/directives/repeat.js";
|
|
10
|
+
import { tokens } from "./tokens.js";
|
|
11
|
+
let instanceCount = 0;
|
|
12
|
+
/**
|
|
13
|
+
* Single-select segmented control — a strip of buttons joined into one
|
|
14
|
+
* shared-border shape, for a small, persistent set of mutually exclusive
|
|
15
|
+
* choices (a view switcher, a theme picker) where the *currently selected*
|
|
16
|
+
* option should read as visually "pressed," not just checked. For many
|
|
17
|
+
* short, individually pill-shaped choices, use `radio-pills` instead. Wraps
|
|
18
|
+
* native radio inputs for keyboard/a11y and fires `change` rather than
|
|
19
|
+
* relying on form submission.
|
|
20
|
+
*
|
|
21
|
+
* @element button-group
|
|
22
|
+
* @fires change - A segment was selected; detail: { value }.
|
|
23
|
+
*/
|
|
24
|
+
let ButtonGroup = class ButtonGroup extends LitElement {
|
|
25
|
+
constructor() {
|
|
26
|
+
super(...arguments);
|
|
27
|
+
/** Options to render, one segment each. */
|
|
28
|
+
this.options = [];
|
|
29
|
+
/** Currently selected value. */
|
|
30
|
+
this.value = "";
|
|
31
|
+
/** Disables every native radio in the group. */
|
|
32
|
+
this.disabled = false;
|
|
33
|
+
this.#name = `button-group-${++instanceCount}`;
|
|
34
|
+
}
|
|
35
|
+
static { this.styles = [
|
|
36
|
+
tokens,
|
|
37
|
+
css `
|
|
38
|
+
:host {
|
|
39
|
+
display: inline-block;
|
|
40
|
+
}
|
|
41
|
+
.group {
|
|
42
|
+
display: flex;
|
|
43
|
+
border: 1px solid var(--ui-border, #e2e8f0);
|
|
44
|
+
border-radius: var(--ui-radius-sm, 0.25rem);
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
}
|
|
47
|
+
.segment {
|
|
48
|
+
position: relative;
|
|
49
|
+
display: flex;
|
|
50
|
+
flex: 1 1 auto;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: center;
|
|
53
|
+
gap: 0.25rem;
|
|
54
|
+
height: 2rem;
|
|
55
|
+
box-sizing: border-box;
|
|
56
|
+
padding: 0.5rem 0.75rem;
|
|
57
|
+
border-left: 1px solid var(--ui-border, #e2e8f0);
|
|
58
|
+
cursor: pointer;
|
|
59
|
+
font-family: var(
|
|
60
|
+
--ui-font,
|
|
61
|
+
ui-sans-serif,
|
|
62
|
+
system-ui,
|
|
63
|
+
sans-serif,
|
|
64
|
+
"Apple Color Emoji",
|
|
65
|
+
"Segoe UI Emoji",
|
|
66
|
+
"Segoe UI Symbol",
|
|
67
|
+
"Noto Color Emoji"
|
|
68
|
+
);
|
|
69
|
+
font-size: var(--ui-font-size-sm, 0.75rem);
|
|
70
|
+
font-weight: var(--ui-font-weight-medium, 500);
|
|
71
|
+
line-height: var(--ui-line-height-tight, 1.25);
|
|
72
|
+
color: var(--ui-text, #0f172a);
|
|
73
|
+
white-space: nowrap;
|
|
74
|
+
}
|
|
75
|
+
.segment:first-child {
|
|
76
|
+
border-left: none;
|
|
77
|
+
border-top-left-radius: var(--ui-radius-sm, 0.25rem);
|
|
78
|
+
border-bottom-left-radius: var(--ui-radius-sm, 0.25rem);
|
|
79
|
+
}
|
|
80
|
+
.segment:last-child {
|
|
81
|
+
border-top-right-radius: var(--ui-radius-sm, 0.25rem);
|
|
82
|
+
border-bottom-right-radius: var(--ui-radius-sm, 0.25rem);
|
|
83
|
+
}
|
|
84
|
+
.segment:has(input:checked) {
|
|
85
|
+
background: var(--ui-primary, #4f46e5);
|
|
86
|
+
color: var(--ui-on-accent, #ffffff);
|
|
87
|
+
}
|
|
88
|
+
.segment:not(:has(input:checked)):hover {
|
|
89
|
+
background: var(--ui-surface-muted, #f8fafc);
|
|
90
|
+
}
|
|
91
|
+
.segment input {
|
|
92
|
+
/* Fills the whole segment (not visually-hidden-offscreen) so a real
|
|
93
|
+
click anywhere in the segment — including a test driver clicking
|
|
94
|
+
the input by its accessible role — lands on the input itself,
|
|
95
|
+
not just via native <label> click delegation. */
|
|
96
|
+
position: absolute;
|
|
97
|
+
inset: 0;
|
|
98
|
+
margin: 0;
|
|
99
|
+
opacity: 0;
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
}
|
|
102
|
+
/* Clipped by the group's own overflow:hidden unless promoted above its
|
|
103
|
+
neighbors — the focus ring needs a stacking context of its own. */
|
|
104
|
+
.segment:has(input:focus-visible) {
|
|
105
|
+
z-index: 1;
|
|
106
|
+
outline: none;
|
|
107
|
+
box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
|
|
108
|
+
}
|
|
109
|
+
.segment:has(input:disabled) {
|
|
110
|
+
cursor: not-allowed;
|
|
111
|
+
opacity: 0.6;
|
|
112
|
+
}
|
|
113
|
+
@media (forced-colors: active) {
|
|
114
|
+
.segment:has(input:focus-visible) {
|
|
115
|
+
outline: 2px solid CanvasText;
|
|
116
|
+
outline-offset: 2px;
|
|
117
|
+
box-shadow: none;
|
|
118
|
+
}
|
|
119
|
+
.segment:has(input:checked) {
|
|
120
|
+
background: Highlight;
|
|
121
|
+
color: HighlightText;
|
|
122
|
+
}
|
|
123
|
+
.segment:has(input:disabled) {
|
|
124
|
+
color: GrayText;
|
|
125
|
+
opacity: 1;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
`,
|
|
129
|
+
]; }
|
|
130
|
+
#name;
|
|
131
|
+
_onChange(value) {
|
|
132
|
+
if (this.disabled)
|
|
133
|
+
return;
|
|
134
|
+
this.value = value;
|
|
135
|
+
this.dispatchEvent(new CustomEvent("change", { detail: { value }, bubbles: true, composed: true }));
|
|
136
|
+
}
|
|
137
|
+
render() {
|
|
138
|
+
return html `
|
|
139
|
+
<div class="group">
|
|
140
|
+
${repeat(this.options, (opt) => opt.value, (opt) => html `
|
|
141
|
+
<label class="segment">
|
|
142
|
+
<input
|
|
143
|
+
type="radio"
|
|
144
|
+
name=${this.#name}
|
|
145
|
+
?checked=${this.value === opt.value}
|
|
146
|
+
?disabled=${this.disabled}
|
|
147
|
+
@change=${() => this._onChange(opt.value)}
|
|
148
|
+
/>
|
|
149
|
+
${opt.icon ?? nothing}
|
|
150
|
+
<span>${opt.label}</span>
|
|
151
|
+
</label>
|
|
152
|
+
`)}
|
|
153
|
+
</div>
|
|
154
|
+
`;
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
__decorate([
|
|
158
|
+
property({ attribute: false })
|
|
159
|
+
], ButtonGroup.prototype, "options", void 0);
|
|
160
|
+
__decorate([
|
|
161
|
+
property()
|
|
162
|
+
], ButtonGroup.prototype, "value", void 0);
|
|
163
|
+
__decorate([
|
|
164
|
+
property({ type: Boolean })
|
|
165
|
+
], ButtonGroup.prototype, "disabled", void 0);
|
|
166
|
+
ButtonGroup = __decorate([
|
|
167
|
+
customElement("button-group")
|
|
168
|
+
], ButtonGroup);
|
|
169
|
+
export { ButtonGroup };
|
|
170
|
+
//# sourceMappingURL=button-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-group.js","sourceRoot":"","sources":["../src/button-group.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AASrC,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB;;;;;;;;;;;GAWG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAiGL,2CAA2C;QACX,YAAO,GAAwB,EAAE,CAAC;QAClE,gCAAgC;QACpB,UAAK,GAAG,EAAE,CAAC;QACvB,gDAAgD;QACnB,aAAQ,GAAG,KAAK,CAAC;QAErC,UAAK,GAAG,gBAAgB,EAAE,aAAa,EAAE,CAAC;IAiCrD,CAAC;aAxIiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2FF;KACF,AA9FqB,CA8FpB;IASO,KAAK,CAAqC;IAE3C,SAAS,CAAC,KAAa;QAC7B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAChF,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,MAAM,CACN,IAAI,CAAC,OAAO,EACZ,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,EAClB,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;;;;uBAIA,IAAI,CAAC,KAAK;2BACN,IAAI,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK;4BACvB,IAAI,CAAC,QAAQ;0BACf,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;;gBAEzC,GAAG,CAAC,IAAI,IAAI,OAAO;sBACb,GAAG,CAAC,KAAK;;WAEpB,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAvCiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CAAmC;AAEtD;IAAX,QAAQ,EAAE;0CAAY;AAEM;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AAtGnC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAyIvB","sourcesContent":["import type { TemplateResult } from \"lit\";\nimport { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { repeat } from \"lit/directives/repeat.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport interface ButtonGroupOption {\n value: string;\n label: string;\n /** Optional pre-rendered icon template displayed before the label. */\n icon?: TemplateResult;\n}\n\nlet instanceCount = 0;\n\n/**\n * Single-select segmented control — a strip of buttons joined into one\n * shared-border shape, for a small, persistent set of mutually exclusive\n * choices (a view switcher, a theme picker) where the *currently selected*\n * option should read as visually \"pressed,\" not just checked. For many\n * short, individually pill-shaped choices, use `radio-pills` instead. Wraps\n * native radio inputs for keyboard/a11y and fires `change` rather than\n * relying on form submission.\n *\n * @element button-group\n * @fires change - A segment was selected; detail: { value }.\n */\n@customElement(\"button-group\")\nexport class ButtonGroup extends LitElement {\n static override styles = [\n tokens,\n css`\n :host {\n display: inline-block;\n }\n .group {\n display: flex;\n border: 1px solid var(--ui-border, #e2e8f0);\n border-radius: var(--ui-radius-sm, 0.25rem);\n overflow: hidden;\n }\n .segment {\n position: relative;\n display: flex;\n flex: 1 1 auto;\n align-items: center;\n justify-content: center;\n gap: 0.25rem;\n height: 2rem;\n box-sizing: border-box;\n padding: 0.5rem 0.75rem;\n border-left: 1px solid var(--ui-border, #e2e8f0);\n cursor: pointer;\n font-family: var(\n --ui-font,\n ui-sans-serif,\n system-ui,\n sans-serif,\n \"Apple Color Emoji\",\n \"Segoe UI Emoji\",\n \"Segoe UI Symbol\",\n \"Noto Color Emoji\"\n );\n font-size: var(--ui-font-size-sm, 0.75rem);\n font-weight: var(--ui-font-weight-medium, 500);\n line-height: var(--ui-line-height-tight, 1.25);\n color: var(--ui-text, #0f172a);\n white-space: nowrap;\n }\n .segment:first-child {\n border-left: none;\n border-top-left-radius: var(--ui-radius-sm, 0.25rem);\n border-bottom-left-radius: var(--ui-radius-sm, 0.25rem);\n }\n .segment:last-child {\n border-top-right-radius: var(--ui-radius-sm, 0.25rem);\n border-bottom-right-radius: var(--ui-radius-sm, 0.25rem);\n }\n .segment:has(input:checked) {\n background: var(--ui-primary, #4f46e5);\n color: var(--ui-on-accent, #ffffff);\n }\n .segment:not(:has(input:checked)):hover {\n background: var(--ui-surface-muted, #f8fafc);\n }\n .segment input {\n /* Fills the whole segment (not visually-hidden-offscreen) so a real\n click anywhere in the segment — including a test driver clicking\n the input by its accessible role — lands on the input itself,\n not just via native <label> click delegation. */\n position: absolute;\n inset: 0;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n }\n /* Clipped by the group's own overflow:hidden unless promoted above its\n neighbors — the focus ring needs a stacking context of its own. */\n .segment:has(input:focus-visible) {\n z-index: 1;\n outline: none;\n box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n }\n .segment:has(input:disabled) {\n cursor: not-allowed;\n opacity: 0.6;\n }\n @media (forced-colors: active) {\n .segment:has(input:focus-visible) {\n outline: 2px solid CanvasText;\n outline-offset: 2px;\n box-shadow: none;\n }\n .segment:has(input:checked) {\n background: Highlight;\n color: HighlightText;\n }\n .segment:has(input:disabled) {\n color: GrayText;\n opacity: 1;\n }\n }\n `,\n ];\n\n /** Options to render, one segment each. */\n @property({ attribute: false }) options: ButtonGroupOption[] = [];\n /** Currently selected value. */\n @property() value = \"\";\n /** Disables every native radio in the group. */\n @property({ type: Boolean }) disabled = false;\n\n readonly #name = `button-group-${++instanceCount}`;\n\n private _onChange(value: string) {\n if (this.disabled) return;\n this.value = value;\n this.dispatchEvent(\n new CustomEvent(\"change\", { detail: { value }, bubbles: true, composed: true }),\n );\n }\n\n override render() {\n return html`\n <div class=\"group\">\n ${repeat(\n this.options,\n (opt) => opt.value,\n (opt) => html`\n <label class=\"segment\">\n <input\n type=\"radio\"\n name=${this.#name}\n ?checked=${this.value === opt.value}\n ?disabled=${this.disabled}\n @change=${() => this._onChange(opt.value)}\n />\n ${opt.icon ?? nothing}\n <span>${opt.label}</span>\n </label>\n `,\n )}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"button-group\": ButtonGroup;\n }\n}\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -22,6 +22,7 @@ export { MapPin } from "./map-pin.js";
|
|
|
22
22
|
export { MapCircle } from "./map-circle.js";
|
|
23
23
|
export { RadioCards, type RadioCardOption } from "./radio-cards.js";
|
|
24
24
|
export { RadioPills, type RadioPillOption } from "./radio-pills.js";
|
|
25
|
+
export { ButtonGroup, type ButtonGroupOption } from "./button-group.js";
|
|
25
26
|
export { UiButton, type ButtonVariant } from "./ui-button.js";
|
|
26
27
|
export { StatMeter } from "./stat-meter.js";
|
|
27
28
|
export { StatusPill, type StatusPillColor } from "./status-pill.js";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -22,6 +22,7 @@ export { MapPin } from "./map-pin.js";
|
|
|
22
22
|
export { MapCircle } from "./map-circle.js";
|
|
23
23
|
export { RadioCards } from "./radio-cards.js";
|
|
24
24
|
export { RadioPills } from "./radio-pills.js";
|
|
25
|
+
export { ButtonGroup } from "./button-group.js";
|
|
25
26
|
export { UiButton } from "./ui-button.js";
|
|
26
27
|
export { StatMeter } from "./stat-meter.js";
|
|
27
28
|
export { StatusPill } from "./status-pill.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.js\";\nexport { GalleryItem } from \"./gallery-item.js\";\nexport { GalleryItemVariant } from \"./gallery-item-variant.js\";\nexport {\n PhotoGallery,\n type PhotoGalleryChangeReason,\n type PhotoGalleryObjectFit,\n type PhotoGallerySlideChangeDetail,\n} from \"./photo-gallery.js\";\nexport { RevealButton } from \"./reveal-button.js\";\nexport { RomanNumeral } from \"./roman-numeral.js\";\nexport { ConfirmDialog } from \"./confirm-dialog.js\";\nexport { ContentDivider } from \"./content-divider.js\";\nexport {\n ToastNotification,\n notifySuccess,\n notifyError,\n notifyInfo,\n type ToastVariant,\n} from \"./toast-notification.js\";\nexport { SlidePanel } from \"./slide-panel.js\";\nexport { CopyLinkButton } from \"./copy-link-button.js\";\nexport { RelativeTime } from \"./relative-time.js\";\nexport { DistanceValue } from \"./distance-value.js\";\nexport { PriceHistoryChart, type PricePoint } from \"./price-history-chart.js\";\nexport { DistributionChart, type DistributionValue } from \"./distribution-chart.js\";\nexport { PercentBarChart, type PercentBarGroup } from \"./percent-bar-chart.js\";\nexport { WeightBarChart, type WeightBarItem } from \"./weight-bar-chart.js\";\nexport {\n AddressAutocomplete,\n type AddressSuggestion,\n} from \"./address-autocomplete.js\";\nexport {\n AutocompleteInput,\n type AutocompleteOption,\n} from \"./autocomplete-input.js\";\nexport { UserAvatar } from \"./user-avatar.js\";\nexport { MapPin } from \"./map-pin.js\";\nexport { MapCircle } from \"./map-circle.js\";\nexport { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { StatMeter } from \"./stat-meter.js\";\nexport { StatusPill, type StatusPillColor } from \"./status-pill.js\";\nexport { EditableText } from \"./editable-text.js\";\nexport { LiveTimer } from \"./live-timer.js\";\nexport {\n ChatMessage,\n type ChatMessageRole,\n type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport {\n MultiSelect,\n type MultiSelectOption,\n type MultiSelectVariant,\n} from \"./multi-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { PopoverPanel } from \"./popover-panel.js\";\nexport { DropdownButton, type DropdownOption } from \"./dropdown-button.js\";\nexport { IconButton } from \"./icon-button.js\";\nexport { KbdHint, type KbdPlatform } from \"./kbd-hint.js\";\nexport { FrameBox } from \"./frame-box.js\";\nexport { AppShell, type SidebarToggleDetail } from \"./app-shell.js\";\nexport { AppSidebar } from \"./app-sidebar.js\";\nexport { ActionBar } from \"./action-bar.js\";\nexport { PageHeader } from \"./page-header.js\";\nexport { PaginationNav, type PageChangeDetail } from \"./pagination-nav.js\";\nexport { FormActions } from \"./form-actions.js\";\nexport { TimelineContainer } from \"./timeline-container.js\";\nexport { TimelineEntry } from \"./timeline-entry.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport {\n KanbanBoard,\n type KanbanCardData,\n type KanbanColumnData,\n type KanbanCardMoveDetail,\n type KanbanCardOpenDetail,\n} from \"./kanban-board.js\";\nexport { KanbanColumn } from \"./kanban-column.js\";\nexport { KanbanCard } from \"./kanban-card.js\";\nexport { TextArea } from \"./text-area.js\";\nexport { LinkCard, type LinkCardStatus } from \"./link-card.js\";\nexport { CardGrid } from \"./card-grid.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.js\";\nexport { GalleryItem } from \"./gallery-item.js\";\nexport { GalleryItemVariant } from \"./gallery-item-variant.js\";\nexport {\n PhotoGallery,\n type PhotoGalleryChangeReason,\n type PhotoGalleryObjectFit,\n type PhotoGallerySlideChangeDetail,\n} from \"./photo-gallery.js\";\nexport { RevealButton } from \"./reveal-button.js\";\nexport { RomanNumeral } from \"./roman-numeral.js\";\nexport { ConfirmDialog } from \"./confirm-dialog.js\";\nexport { ContentDivider } from \"./content-divider.js\";\nexport {\n ToastNotification,\n notifySuccess,\n notifyError,\n notifyInfo,\n type ToastVariant,\n} from \"./toast-notification.js\";\nexport { SlidePanel } from \"./slide-panel.js\";\nexport { CopyLinkButton } from \"./copy-link-button.js\";\nexport { RelativeTime } from \"./relative-time.js\";\nexport { DistanceValue } from \"./distance-value.js\";\nexport { PriceHistoryChart, type PricePoint } from \"./price-history-chart.js\";\nexport { DistributionChart, type DistributionValue } from \"./distribution-chart.js\";\nexport { PercentBarChart, type PercentBarGroup } from \"./percent-bar-chart.js\";\nexport { WeightBarChart, type WeightBarItem } from \"./weight-bar-chart.js\";\nexport {\n AddressAutocomplete,\n type AddressSuggestion,\n} from \"./address-autocomplete.js\";\nexport {\n AutocompleteInput,\n type AutocompleteOption,\n} from \"./autocomplete-input.js\";\nexport { UserAvatar } from \"./user-avatar.js\";\nexport { MapPin } from \"./map-pin.js\";\nexport { MapCircle } from \"./map-circle.js\";\nexport { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { ButtonGroup, type ButtonGroupOption } from \"./button-group.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { StatMeter } from \"./stat-meter.js\";\nexport { StatusPill, type StatusPillColor } from \"./status-pill.js\";\nexport { EditableText } from \"./editable-text.js\";\nexport { LiveTimer } from \"./live-timer.js\";\nexport {\n ChatMessage,\n type ChatMessageRole,\n type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport {\n MultiSelect,\n type MultiSelectOption,\n type MultiSelectVariant,\n} from \"./multi-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { PopoverPanel } from \"./popover-panel.js\";\nexport { DropdownButton, type DropdownOption } from \"./dropdown-button.js\";\nexport { IconButton } from \"./icon-button.js\";\nexport { KbdHint, type KbdPlatform } from \"./kbd-hint.js\";\nexport { FrameBox } from \"./frame-box.js\";\nexport { AppShell, type SidebarToggleDetail } from \"./app-shell.js\";\nexport { AppSidebar } from \"./app-sidebar.js\";\nexport { ActionBar } from \"./action-bar.js\";\nexport { PageHeader } from \"./page-header.js\";\nexport { PaginationNav, type PageChangeDetail } from \"./pagination-nav.js\";\nexport { FormActions } from \"./form-actions.js\";\nexport { TimelineContainer } from \"./timeline-container.js\";\nexport { TimelineEntry } from \"./timeline-entry.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport {\n KanbanBoard,\n type KanbanCardData,\n type KanbanColumnData,\n type KanbanCardMoveDetail,\n type KanbanCardOpenDetail,\n} from \"./kanban-board.js\";\nexport { KanbanColumn } from \"./kanban-column.js\";\nexport { KanbanCard } from \"./kanban-card.js\";\nexport { TextArea } from \"./text-area.js\";\nexport { LinkCard, type LinkCardStatus } from \"./link-card.js\";\nexport { CardGrid } from \"./card-grid.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# `<button-group>`
|
|
2
|
+
|
|
3
|
+
Single-select segmented control — a strip of buttons joined into one
|
|
4
|
+
shared-border shape, for a small, persistent set of mutually exclusive
|
|
5
|
+
choices (a view switcher, a theme picker) where the *currently selected*
|
|
6
|
+
option should read as visually "pressed," not just checked. For many
|
|
7
|
+
short, individually pill-shaped choices, use `radio-pills` instead. Wraps
|
|
8
|
+
native radio inputs for keyboard/a11y and fires `change` rather than
|
|
9
|
+
relying on form submission.
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```js
|
|
14
|
+
import "@f-ewald/components/button-group.js";
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<button-group></button-group>
|
|
21
|
+
<script type="module">
|
|
22
|
+
const el = document.querySelector("button-group");
|
|
23
|
+
el.options = [
|
|
24
|
+
{ value: "list", label: "List" },
|
|
25
|
+
{ value: "kanban", label: "Kanban" },
|
|
26
|
+
];
|
|
27
|
+
el.value = "list";
|
|
28
|
+
el.addEventListener("change", (e) => console.log(e.detail.value));
|
|
29
|
+
</script>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Attributes / properties
|
|
33
|
+
|
|
34
|
+
| Property | Attribute | Type | Default | Description |
|
|
35
|
+
| --- | --- | --- | --- | --- |
|
|
36
|
+
| `options` | _(JS property only)_ | `ButtonGroupOption[]` | `[]` | Options to render, one segment each. |
|
|
37
|
+
| `value` | `value` | `string` | `""` | Currently selected value. |
|
|
38
|
+
| `disabled` | `disabled` | `boolean` | `false` | Disables every native radio in the group. |
|
|
39
|
+
|
|
40
|
+
## Events
|
|
41
|
+
|
|
42
|
+
| Event | Description |
|
|
43
|
+
| --- | --- |
|
|
44
|
+
| `change` | A segment was selected; detail: { value }. |
|
|
45
|
+
|
|
46
|
+
## Slots
|
|
47
|
+
|
|
48
|
+
_None._
|
|
49
|
+
|
|
50
|
+
## CSS custom properties
|
|
51
|
+
|
|
52
|
+
| Custom property |
|
|
53
|
+
| --- |
|
|
54
|
+
| `--ui-border` |
|
|
55
|
+
| `--ui-focus-ring` |
|
|
56
|
+
| `--ui-font` |
|
|
57
|
+
| `--ui-font-size-sm` |
|
|
58
|
+
| `--ui-font-weight-medium` |
|
|
59
|
+
| `--ui-line-height-tight` |
|
|
60
|
+
| `--ui-on-accent` |
|
|
61
|
+
| `--ui-primary` |
|
|
62
|
+
| `--ui-radius-sm` |
|
|
63
|
+
| `--ui-surface-muted` |
|
|
64
|
+
| `--ui-text` |
|
package/llms.txt
CHANGED
|
@@ -212,6 +212,36 @@ Example:
|
|
|
212
212
|
</script>
|
|
213
213
|
```
|
|
214
214
|
|
|
215
|
+
## <button-group>
|
|
216
|
+
|
|
217
|
+
Single-select segmented control — a strip of buttons joined into one
|
|
218
|
+
shared-border shape, for a small, persistent set of mutually exclusive
|
|
219
|
+
choices (a view switcher, a theme picker) where the *currently selected*
|
|
220
|
+
option should read as visually "pressed," not just checked. For many
|
|
221
|
+
short, individually pill-shaped choices, use `radio-pills` instead. Wraps
|
|
222
|
+
native radio inputs for keyboard/a11y and fires `change` rather than
|
|
223
|
+
relying on form submission.
|
|
224
|
+
|
|
225
|
+
Import: `import "@f-ewald/components/button-group.js";`
|
|
226
|
+
|
|
227
|
+
Properties: `options` (JS property only) : ButtonGroupOption[], default []; `value` (attribute `value`) : string, default ""; `disabled` (attribute `disabled`) : boolean, default false
|
|
228
|
+
Events: `change`
|
|
229
|
+
CSS custom properties: `--ui-border`, `--ui-focus-ring`, `--ui-font`, `--ui-font-size-sm`, `--ui-font-weight-medium`, `--ui-line-height-tight`, `--ui-on-accent`, `--ui-primary`, `--ui-radius-sm`, `--ui-surface-muted`, `--ui-text`
|
|
230
|
+
|
|
231
|
+
Example:
|
|
232
|
+
```html
|
|
233
|
+
<button-group></button-group>
|
|
234
|
+
<script type="module">
|
|
235
|
+
const el = document.querySelector("button-group");
|
|
236
|
+
el.options = [
|
|
237
|
+
{ value: "list", label: "List" },
|
|
238
|
+
{ value: "kanban", label: "Kanban" },
|
|
239
|
+
];
|
|
240
|
+
el.value = "list";
|
|
241
|
+
el.addEventListener("change", (e) => console.log(e.detail.value));
|
|
242
|
+
</script>
|
|
243
|
+
```
|
|
244
|
+
|
|
215
245
|
## <calendar-entry>
|
|
216
246
|
|
|
217
247
|
Declarative metadata for one calendar event, consumed by a parent
|