@c2n/button-group 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# @c2n/button-group
+
+Button group built with Lit: attaches `c2-button` / `c2-icon-button` items into one control, optionally as a segmented control with single or multiple selection.
+
+```bash
+npm install @c2n/button-group
+```
+
+```html
+<script type="module">
+  import '@c2n/button-group'
+</script>
+
+<c2-button-group>
+  <c2-button>Save</c2-button>
+  <c2-button>Publish</c2-button>
+</c2-button-group>
+
+<c2-button-group selection="single" value="week">
+  <c2-button value="day">Day</c2-button>
+  <c2-button value="week">Week</c2-button>
+  <c2-button value="month">Month</c2-button>
+</c2-button-group>
+```
+
+- **Layout**: items share borders and only the outside corners are rounded (`--c2-button-group--border-radius`); a divider (`--c2-button-group__divider--width` / `--color`) separates them. `--c2-button-group--border` puts one border on every item for an outlined group. A positive `--c2-button-group--gap` separates the items into individually rounded buttons. `orientation="vertical"` stacks them.
+- **Selection**: `selection="single"` keeps exactly one item pressed, `selection="multiple"` toggles items independently. Items identify themselves with `value` (their index otherwise); the group's `value` is the pressed value or a comma-separated list. `change` fires on user clicks with `detail.value`; setting `value` from code is silent.
+- **Accessibility**: `role="group"` (name it with `aria-label`); pressed items carry `selected`, which `c2-button` and `c2-icon-button` announce as `aria-pressed`, and the group marks items `toggle` so unpressed ones announce `false`.
+- **Disabled**: `disabled` on the group disables every item and restores them when cleared, leaving items you disabled yourself alone.
+
+Colours and sizes come from the buttons' own variables set on the group (`--c2-button__container--*`, including the `__selected--*` pressed state added for groups; `--c2-icon-button--*` for icon items). `--c2-button-group__item--flex: 1 1 0` makes every item the same width. The full list is in `custom-elements.json` and on the docs site.

package/dist/button-group.js

@@ -0,0 +1,115 @@
+import { LitElement, html, isServer, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "@c2n/button";
+//#region src/button-group.scss?inline
+var button_group_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  align-items: stretch;\n  gap: var(--c2-button-group--gap,0px);\n  vertical-align: middle;\n  max-width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation=vertical]) {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n::slotted(*) {\n  position: relative;\n  flex: var(--c2-button-group__item--flex,0 0 auto);\n  min-width: 0;\n  --c2-button__container--border-radius: min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000);\n  --c2-icon-button--border-radius: min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000);\n}\n\n::slotted(*) {\n  --c2-button__container--border: var(--c2-button-group--border,1px solid transparent);\n  --c2-icon-button--border: var(--c2-button-group--border,1px solid transparent);\n}\n\n::slotted(:only-child) {\n  --c2-button__container--border-radius: var(--c2-button-group--border-radius,6px);\n  --c2-icon-button--border-radius: var(--c2-button-group--border-radius,6px);\n}\n\n::slotted(:first-child:not(:only-child)) {\n  --c2-button__container--border-radius: var(--c2-button-group--border-radius,6px) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) var(--c2-button-group--border-radius,6px);\n  --c2-icon-button--border-radius: var(--c2-button-group--border-radius,6px) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) var(--c2-button-group--border-radius,6px);\n}\n\n::slotted(:last-child:not(:only-child)) {\n  --c2-button__container--border-radius: min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) var(--c2-button-group--border-radius,6px) var(--c2-button-group--border-radius,6px) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000);\n  --c2-icon-button--border-radius: min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) var(--c2-button-group--border-radius,6px) var(--c2-button-group--border-radius,6px) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000);\n}\n\n:host(:dir(rtl)) ::slotted(:first-child:not(:only-child)) {\n  --c2-button__container--border-radius: min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) var(--c2-button-group--border-radius,6px) var(--c2-button-group--border-radius,6px) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000);\n  --c2-icon-button--border-radius: min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) var(--c2-button-group--border-radius,6px) var(--c2-button-group--border-radius,6px) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000);\n}\n\n:host(:dir(rtl)) ::slotted(:last-child:not(:only-child)) {\n  --c2-button__container--border-radius: var(--c2-button-group--border-radius,6px) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) var(--c2-button-group--border-radius,6px);\n  --c2-icon-button--border-radius: var(--c2-button-group--border-radius,6px) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) var(--c2-button-group--border-radius,6px);\n}\n\n::slotted(:not(:first-child)) {\n  margin-inline-start: calc(-1 * max(0px, var(--c2-button-group__divider--width,1px) - var(--c2-button-group--gap,0px) * 10000));\n  box-shadow: calc(-1 * max(0px, var(--c2-button-group__divider--width,1px) - var(--c2-button-group--gap,0px) * 10000)) 0 0 0 var(--c2-button-group__divider--color,rgba(255, 255, 255, 0.35));\n}\n\n:host(:dir(rtl)) ::slotted(:not(:first-child)) {\n  box-shadow: max(0px, var(--c2-button-group__divider--width,1px) - var(--c2-button-group--gap,0px) * 10000) 0 0 0 var(--c2-button-group__divider--color,rgba(255, 255, 255, 0.35));\n}\n\n:host([orientation=vertical]) ::slotted(:first-child:not(:only-child)) {\n  --c2-button__container--border-radius: var(--c2-button-group--border-radius,6px) var(--c2-button-group--border-radius,6px) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000);\n  --c2-icon-button--border-radius: var(--c2-button-group--border-radius,6px) var(--c2-button-group--border-radius,6px) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000);\n}\n\n:host([orientation=vertical]) ::slotted(:last-child:not(:only-child)) {\n  --c2-button__container--border-radius: min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) var(--c2-button-group--border-radius,6px) var(--c2-button-group--border-radius,6px);\n  --c2-icon-button--border-radius: min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) min(var(--c2-button-group--border-radius,6px), var(--c2-button-group--gap,0px) * 10000) var(--c2-button-group--border-radius,6px) var(--c2-button-group--border-radius,6px);\n}\n\n:host([orientation=vertical]) ::slotted(:not(:first-child)) {\n  margin-inline-start: 0;\n  margin-block-start: calc(-1 * max(0px, var(--c2-button-group__divider--width,1px) - var(--c2-button-group--gap,0px) * 10000));\n  box-shadow: 0 calc(-1 * max(0px, var(--c2-button-group__divider--width,1px) - var(--c2-button-group--gap,0px) * 10000)) 0 0 var(--c2-button-group__divider--color,rgba(255, 255, 255, 0.35));\n}\n\n::slotted(:hover),\n::slotted(:focus-within),\n::slotted([selected]) {\n  z-index: 1;\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	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;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/button-group.ts
+var GROUP_DISABLED = "data-c2-button-group-disabled";
+var ButtonGroup = class ButtonGroup extends LitElement {
+	static {
+		this.styles = unsafeCSS(button_group_default);
+	}
+	constructor() {
+		super();
+		this.selection = "none";
+		this.value = "";
+		this.disabled = false;
+		this.orientation = "horizontal";
+		this.handleClick = (event) => {
+			if (this.selection === "none" || this.disabled) return;
+			const items = this.items;
+			const item = event.composedPath().find((node) => node instanceof HTMLElement && node.parentElement === this);
+			if (!item || item.hasAttribute("disabled")) return;
+			const value = this.itemValue(item, items.indexOf(item));
+			let next;
+			if (this.selection === "single") {
+				if (this.value === value) return;
+				next = value;
+			} else {
+				const values = this.selectedValues;
+				next = values.includes(value) ? values.filter((entry) => entry !== value).join(",") : [...values, value].join(",");
+			}
+			this.value = next;
+			this.dispatchEvent(new CustomEvent("change", {
+				detail: { value: next },
+				bubbles: true,
+				composed: true
+			}));
+		};
+		if (!isServer) this.addEventListener("click", this.handleClick);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute("role")) this.setAttribute("role", "group");
+		if (!isServer) {
+			this.observer ??= new MutationObserver(() => this.syncItems());
+			this.observer.observe(this, { childList: true });
+			this.syncItems();
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.observer?.disconnect();
+	}
+	/** The item elements, in order. */
+	get items() {
+		return [...this.children].filter((child) => child instanceof HTMLElement);
+	}
+	/** Values of the pressed items. */
+	get selectedValues() {
+		return this.value ? this.value.split(",").filter(Boolean) : [];
+	}
+	itemValue(item, index) {
+		return item.getAttribute("value") ?? String(index);
+	}
+	updated(changed) {
+		if (changed.has("value") || changed.has("selection") || changed.has("disabled")) this.syncItems();
+	}
+	/** Mirrors `value`, `selection` and `disabled` onto the items. */
+	syncItems() {
+		const items = this.items;
+		const selectable = this.selection !== "none";
+		const selected = new Set(this.selectedValues);
+		items.forEach((item, index) => {
+			if (selectable) item.setAttribute("toggle", "");
+			else item.removeAttribute("toggle");
+			if (selectable && selected.has(this.itemValue(item, index))) item.setAttribute("selected", "");
+			else item.removeAttribute("selected");
+			if (this.disabled) {
+				if (!item.hasAttribute("disabled")) {
+					item.setAttribute("disabled", "");
+					item.setAttribute(GROUP_DISABLED, "");
+				}
+			} else if (item.hasAttribute(GROUP_DISABLED)) {
+				item.removeAttribute("disabled");
+				item.removeAttribute(GROUP_DISABLED);
+			}
+		});
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+__decorate([property({ reflect: true })], ButtonGroup.prototype, "selection", void 0);
+__decorate([property({ reflect: true })], ButtonGroup.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ButtonGroup.prototype, "disabled", void 0);
+__decorate([property({ reflect: true })], ButtonGroup.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-label"
+})], ButtonGroup.prototype, "ariaLabel", void 0);
+ButtonGroup = __decorate([customElement("c2-button-group")], ButtonGroup);
+//#endregion
+export { ButtonGroup };

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@c2n/button-group",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/button-group.js",
+  "exports": {
+    ".": {
+      "default": "./dist/button-group.js",
+      "types": "./types/src/button-group.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "button group",
+    "segmented control",
+    "toggle group",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build",
+        "../button:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/button": "0.0.6",
+    "@c2n/core": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/button-group.d.ts

@@ -0,0 +1,58 @@
+import { LitElement, type PropertyValues } from 'lit';
+import '@c2n/button';
+export type ButtonGroupSelection = 'none' | 'single' | 'multiple';
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+/**
+ * Attaches related buttons into one control: shared borders, outside corners only, a divider between items. Children
+ * are `c2-button` or `c2-icon-button` elements (any element works for layout). With `selection="single"` the group is
+ * a segmented control that keeps one item pressed; with `selection="multiple"` each item toggles independently. The
+ * pressed items carry `selected` (and `aria-pressed`), the group reports them in `value` and fires `change`.
+ *
+ * @tag c2-button-group
+ *
+ * @slot - The buttons, in order.
+ *
+ * @event {CustomEvent<{ value: string }>} change - Fired after the user changes the selection. `detail.value` is the new `value`. Not fired for programmatic changes.
+ *
+ * @cssproperty {pixel} [--c2-button-group--gap=0px] - Space between items. Zero attaches them; a positive gap separates them into individually rounded buttons.
+ * @cssproperty {border-radius} [--c2-button-group--border-radius=6px] - Outside corner radius. With a positive gap, applies to every item.
+ * @cssproperty {border} [--c2-button-group--border=1px solid transparent] - Border applied to every item, e.g. `1px solid #d4d4d8` for an outlined group.
+ * @cssproperty {pixel} [--c2-button-group__divider--width=1px] - Width of the line between attached items; also how much their borders overlap.
+ * @cssproperty {color} [--c2-button-group__divider--color=rgba(255, 255, 255, 0.35)] - Colour of the line between attached items. Match the border colour for outlined groups, `transparent` for none.
+ * @cssproperty {flex} [--c2-button-group__item--flex=0 0 auto] - `1 1 0` makes every item grow to the same width.
+ * @slotcomponent c2-button
+ * @slotcomponent c2-icon-button
+ */
+export declare class ButtonGroup extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** `none` (default) for plain attached buttons, `single` for one pressed item, `multiple` for independent toggles. */
+    selection: ButtonGroupSelection;
+    /** `value` of the pressed item; comma-separated values with `selection="multiple"`. Items without a `value` attribute use their index. */
+    value: string;
+    /** Disables every item. */
+    disabled: boolean;
+    /** Stacks the items vertically. */
+    orientation: ButtonGroupOrientation;
+    /** Accessible name of the group. */
+    ariaLabel: string;
+    private observer?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The item elements, in order. */
+    get items(): HTMLElement[];
+    /** Values of the pressed items. */
+    get selectedValues(): string[];
+    private itemValue;
+    updated(changed: PropertyValues<this>): void;
+    /** Mirrors `value`, `selection` and `disabled` onto the items. */
+    private syncItems;
+    private handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-button-group': ButtonGroup;
+    }
+}
+//# sourceMappingURL=button-group.d.ts.map

package/types/src/button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../src/button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA6B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAGhF,OAAO,aAAa,CAAA;AAGpB,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AACjE,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAA;AAI9D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAoB;IAE1C,sHAAsH;IACzF,SAAS,EAAE,oBAAoB,CAAS;IAErE,0IAA0I;IAC7G,KAAK,SAAK;IAEvC,2BAA2B;IACiB,QAAQ,UAAQ;IAE5D,mCAAmC;IACN,WAAW,EAAE,sBAAsB,CAAe;IAE/E,oCAAoC;IAE3B,SAAS,EAAG,MAAM,CAAA;IAE3B,OAAO,CAAC,QAAQ,CAAC,CAAkB;;IAO1B,iBAAiB;IAUjB,oBAAoB;IAK7B,mCAAmC;IACnC,IAAI,KAAK,IAAI,WAAW,EAAE,CAEzB;IAED,mCAAmC;IACnC,IAAI,cAAc,IAAI,MAAM,EAAE,CAE7B;IAED,OAAO,CAAC,SAAS;IAIR,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAI9C,kEAAkE;IAClE,OAAO,CAAC,SAAS;IAsBjB,OAAO,CAAC,WAAW,CAgBlB;IAEQ,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}