@c2n/button 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,23 @@
+# @c2n/button
+
+`c2-button` is a themeable button with slots for the label text, a prefix icon, a suffix icon and a running (busy) icon.
+
+```bash
+npm install @c2n/button
+```
+
+```html
+<script type="module">
+  import '@c2n/button'
+</script>
+
+<c2-button>
+  <svg slot="prefix-icon" viewBox="0 0 24 24" ...></svg>
+  Save
+</c2-button>
+
+<c2-button running>Saving…</c2-button>
+<c2-button disabled>Disabled</c2-button>
+```
+
+Every visual aspect is controlled through `--c2-button__*` CSS custom properties; see the generated `custom-elements.json` or the demo site for the full list.

package/dist/button.js

@@ -0,0 +1,72 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/button.scss?inline
+var button_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-button {\n  all: unset;\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n  gap: var(--c2-button__container--gap,8px);\n  height: var(--c2-button__container--height,36px);\n  padding-left: var(--c2-button__container--padding-left,16px);\n  padding-right: var(--c2-button__container--padding-right,16px);\n  border: var(--c2-button__container--border,1px solid transparent);\n  border-radius: var(--c2-button__container--border-radius,6px);\n  background-color: var(--c2-button__container--background-color,rgb(2, 101, 220));\n  color: var(--c2-button__container--color,#ffffff);\n  font-family: inherit;\n  font-size: var(--c2-button__container--font-size,14px);\n  font-weight: var(--c2-button__container--font-weight,500);\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  will-change: background-color, color, border-color;\n  transition: background-color 250ms cubic-bezier(0.2, 0, 0, 1), color 250ms cubic-bezier(0.2, 0, 0, 1), border-color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n.c2-button:hover:not(:disabled) {\n  background-color: var(--c2-button__container__hover--background-color,var(--c2-button__container--background-color,rgb(1, 84, 184)));\n  color: var(--c2-button__container__hover--color,var(--c2-button__container--color,#ffffff));\n  border: var(--c2-button__container__hover--border,var(--c2-button__container--border,1px solid transparent));\n}\n.c2-button:active:not(:disabled) {\n  background-color: var(--c2-button__container__active--background-color,var(--c2-button__container__hover--background-color,var(--c2-button__container--background-color,rgb(1, 70, 154))));\n}\n.c2-button:focus-visible {\n  outline: var(--c2-button__container__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-button__container__focus--outline-offset,2px);\n}\n\n:host([selected]) .c2-button,\n:host([selected]) .c2-button:hover:not(:disabled) {\n  background-color: var(--c2-button__container__selected--background-color,var(--c2-button__container__hover--background-color,var(--c2-button__container--background-color,rgb(1, 84, 184))));\n  color: var(--c2-button__container__selected--color,var(--c2-button__container--color,#ffffff));\n  border: var(--c2-button__container__selected--border,var(--c2-button__container--border,1px solid transparent));\n}\n\n:host([disabled]) .c2-button {\n  cursor: default;\n  opacity: var(--c2-button__container__disabled--opacity,0.38);\n}\n\n:host([running]) .c2-button {\n  cursor: progress;\n}\n\n.label {\n  display: inline-flex;\n  align-items: center;\n}\n\n.icon::slotted(*) {\n  flex-shrink: 0;\n  width: var(--c2-button__icon--size,18px);\n  height: var(--c2-button__icon--size,18px);\n  color: var(--c2-button__icon--color,var(--c2-button__container--color,#ffffff));\n  --c2-feather-icon--size: var(--c2-button__icon--size,18px);\n  --c2-mat-icon--font-size: var(--c2-button__icon--size,18px);\n}\n\n.running-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--c2-button__running-icon--size,18px);\n  height: var(--c2-button__running-icon--size,18px);\n  color: var(--c2-button__running-icon--color,var(--c2-button__container--color,#ffffff));\n  --c2-feather-icon--size: var(--c2-button__running-icon--size,18px);\n  --c2-mat-icon--font-size: var(--c2-button__running-icon--size,18px);\n  animation: c2-button-spin var(--c2-button__running-icon--animation-duration,800ms) linear infinite;\n}\n\n.running-icon ::slotted(*),\n.running-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n@keyframes c2-button-spin {\n  to {\n    transform: rotate(360deg);\n  }\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.ts
+var Button = class Button extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.running = false;
+		this.selected = false;
+		this.toggle = false;
+	}
+	static {
+		this.styles = unsafeCSS(button_default);
+	}
+	static {
+		this.shadowRootOptions = {
+			...LitElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	render() {
+		return html`
+      <button
+        class="c2-button"
+        part="button"
+        ?disabled=${this.disabled || this.running}
+        aria-busy=${this.running ? "true" : nothing}
+        aria-pressed=${this.selected ? "true" : this.toggle ? "false" : nothing}
+      >
+        ${this.running ? html`<span class="running-icon" part="running-icon">
+                <slot name="running-icon">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true" focusable="false">
+                    <path d="M21 12a9 9 0 1 1-6.22-8.56"></path>
+                  </svg>
+                </slot>
+              </span>` : html`<slot name="prefix-icon" class="icon prefix-icon"></slot>`}
+        <span class="label"><slot></slot></span>
+        <slot name="suffix-icon" class="icon suffix-icon"></slot>
+      </button>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Button.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Button.prototype, "running", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Button.prototype, "selected", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Button.prototype, "toggle", void 0);
+Button = __decorate([customElement("c2-button")], Button);
+//#endregion
+export { Button };

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@c2n/button",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/button.js",
+  "exports": {
+    ".": {
+      "default": "./dist/button.js",
+      "types": "./types/src/button.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "button",
+    "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"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/button.d.ts

@@ -0,0 +1,61 @@
+import { LitElement } from 'lit';
+/**
+ * @tag c2-button
+ *
+ * @slot default - Button label text.
+ * @slot prefix-icon - Icon shown before the label. Replaced by `running-icon` while the button is running.
+ * @slot suffix-icon - Icon shown after the label.
+ * @slot running-icon - Icon shown in place of the prefix icon while `running` is set. Defaults to a spinner; the slot wrapper rotates, so slotted content spins too.
+ *
+ * @cssproperty {pixel} [--c2-button__container--height=36px]
+ * @cssproperty {padding} [--c2-button__container--padding-left=16px]
+ * @cssproperty {padding} [--c2-button__container--padding-right=16px]
+ * @cssproperty {pixel} [--c2-button__container--gap=8px]
+ * @cssproperty {border-radius} [--c2-button__container--border-radius=6px]
+ * @cssproperty {border} [--c2-button__container--border=1px solid transparent]
+ * @cssproperty {color} [--c2-button__container--background-color=rgb(2, 101, 220)]
+ * @cssproperty {color} [--c2-button__container--color=#ffffff]
+ * @cssproperty {pixel} [--c2-button__container--font-size=14px]
+ * @cssproperty {font-weight} [--c2-button__container--font-weight=500]
+ *
+ * @cssproperty {color} [--c2-button__container__hover--background-color=rgb(1, 84, 184)]
+ * @cssproperty {color} --c2-button__container__hover--color
+ * @cssproperty {border} --c2-button__container__hover--border
+ *
+ * @cssproperty {color} [--c2-button__container__active--background-color=rgb(1, 70, 154)]
+ *
+ * @cssproperty {color} --c2-button__container__selected--background-color - Pressed state of a toggle button (see `selected`).
+ * @cssproperty {color} --c2-button__container__selected--color
+ * @cssproperty {border} --c2-button__container__selected--border
+ *
+ * @cssproperty {outline} [--c2-button__container__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-button__container__focus--outline-offset=2px]
+ *
+ * @cssproperty {opacity} [--c2-button__container__disabled--opacity=0.38]
+ *
+ * @cssproperty {pixel} [--c2-button__icon--size=18px]
+ * @cssproperty {color} --c2-button__icon--color
+ *
+ * @cssproperty {pixel} [--c2-button__running-icon--size=18px]
+ * @cssproperty {color} --c2-button__running-icon--color
+ * @cssproperty {duration} [--c2-button__running-icon--animation-duration=800ms]
+ */
+export declare class Button extends LitElement {
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: ShadowRootInit;
+    /** Disables the button: it no longer receives clicks and is rendered dimmed. */
+    disabled: boolean;
+    /** Marks the button as busy: clicks are ignored and the `running-icon` slot replaces the prefix icon. */
+    running: boolean;
+    /** Pressed state of a toggle button (`aria-pressed="true"`); styled with the `container__selected--*` variables. */
+    selected: boolean;
+    /** Declares a toggle button: `aria-pressed` is announced as `false` while not selected. Set by `c2-button-group` in selection modes. */
+    toggle: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-button': Button;
+    }
+}
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAI1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAAoB;IAE1C,OAAgB,iBAAiB,EAAE,cAAc,CAA4D;IAE7G,gFAAgF;IACpC,QAAQ,UAAQ;IAE5D,yGAAyG;IAC7D,OAAO,UAAQ;IAE3D,oHAAoH;IACxE,QAAQ,UAAQ;IAE5D,wIAAwI;IAC5F,MAAM,UAAQ;IAEjD,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAA;KACpB;CACF"}