@c2n/button 0.0.6 → 0.0.7

package/dist/button.js

@@ -1,7 +1,8 @@
 import { LitElement, html, nothing, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.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}";
+var button_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  width: var(--c2-button__container--width,auto);\n  border-radius: var(--c2-button__container--border-radius,6px);\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: var(--c2-button__container--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  flex-grow: var(--c2-button__label--flex-grow,0);\n  justify-content: var(--c2-button__label--justify-content,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) {

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "@c2n/button",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/button.js",
   "exports": {
     ".": {
-      "default": "./dist/button.js",
-      "types": "./types/src/button.d.ts"
+      "types": "./types/src/button.d.ts",
+      "default": "./dist/button.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
     },
     "./custom-elements.json": "./custom-elements.json"
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
   ],
   "keywords": [
     "button",
@@ -50,12 +62,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.7",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
 }

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/button. Import once, anywhere in the program:
+//
+//     import '@c2n/button/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Button } from '@c2n/button'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-button': C2Props<Button>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/button.d.ts

@@ -1,5 +1,7 @@
 import { LitElement } from 'lit';
 /**
+ * Action button with optional leading/trailing icons, busy state and toggle-button semantics.
+ *
  * @tag c2-button
  *
  * @slot default - Button label text.
@@ -8,6 +10,10 @@ import { LitElement } from 'lit';
  * @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 {width} [--c2-button__container--width=auto] - Width of the host. `100%` makes a full-width button.
+ * @cssproperty {justify-content} [--c2-button__container--justify-content=center] - How the label and its icons sit in the button. `flex-start` for a row-shaped button (a list entry, a group header), `space-between` to push a trailing hint to the far edge.
+ * @cssproperty {number} [--c2-button__label--flex-grow=0] - Whether the label takes the leftover width. `1` pushes a suffix icon to the far edge of a fixed-width button.
+ * @cssproperty {justify-content} [--c2-button__label--justify-content=center] - How the label sits once it has grown. `flex-start` keeps the text next to a prefix icon.
  * @cssproperty {padding} [--c2-button__container--padding-left=16px]
  * @cssproperty {padding} [--c2-button__container--padding-right=16px]
  * @cssproperty {pixel} [--c2-button__container--gap=8px]

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

@@ -1 +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"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAK1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;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"}

package/vue.d.ts

@@ -0,0 +1,29 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/button. Import once, anywhere in the program:
+//
+//     import '@c2n/button/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Button } from '@c2n/button'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-button': DefineComponent<C2Props<Button>>
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}