@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 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) |
@@ -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";
@@ -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
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@f-ewald/components",
3
3
  "private": false,
4
- "version": "1.9.0",
4
+ "version": "1.10.0",
5
5
  "description": "A collection of universally usable web components for various tasks.",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",