@c2n/color-select 0.0.6 → 0.0.7

package/dist/color-select.js

@@ -1,5 +1,6 @@
 import { LitElement, html, nothing, unsafeCSS } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import "@c2n/overlay";
 import "@c2n/color-area";
 import "@c2n/select";
@@ -1149,6 +1150,7 @@ var ColorSelect = class ColorSelect extends LitElement {
 	get color() {
 		return this._color;
 	}
+	/** Selected CSS colour value. */
 	set color(value) {
 		if (this._color != value) {
 			this._color = value;

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "@c2n/color-select",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/color-select.js",
   "exports": {
     ".": {
-      "default": "./dist/color-select.js",
-      "types": "./types/src/color-select.d.ts"
+      "types": "./types/src/color-select.d.ts",
+      "default": "./dist/color-select.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": [
     "color-select",
@@ -53,12 +65,12 @@
     }
   },
   "dependencies": {
-    "@c2n/color-area": "0.0.6",
-    "@c2n/color-slider": "0.0.6",
-    "@c2n/core": "0.0.6",
-    "@c2n/overlay": "0.0.6",
-    "@c2n/select": "0.0.6",
-    "@c2n/text-field": "0.0.6",
+    "@c2n/color-area": "0.0.7",
+    "@c2n/color-slider": "0.0.7",
+    "@c2n/core": "0.0.7",
+    "@c2n/overlay": "0.0.7",
+    "@c2n/select": "0.0.7",
+    "@c2n/text-field": "0.0.7",
     "@ctrl/tinycolor": "4.2.0",
     "lit": "3.3.3"
   },
@@ -66,5 +78,5 @@
     "@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/color-select. Import once, anywhere in the program:
+//
+//     import '@c2n/color-select/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 { ColorSelect } from '@c2n/color-select'
+
+/** 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-color-select': C2Props<ColorSelect>
+    }
+  }
+}
+
+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/color-select.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
 import { TinyColor } from '@ctrl/tinycolor';
 import '@c2n/overlay';
 import '@c2n/color-area';
@@ -12,10 +13,20 @@ export interface ColorSelectChangeEventDetail {
     v: number;
     a: number;
 }
+/** Events fired by {@link ColorSelect}, keyed for `addEventListener`. */
+export interface ColorSelectEventMap {
+    change: CustomEvent<string>;
+}
+export interface ColorSelect {
+    addEventListener: TypedAddEventListener<ColorSelect, ColorSelectEventMap>;
+    removeEventListener: TypedRemoveEventListener<ColorSelect, ColorSelectEventMap>;
+}
 /**
+ * Popup colour picker combining a colour area, hue control and editable colour value.
+ *
  * @tag c2-color-select
  *
- * @event {CustomEvent} change
+ * @event {CustomEvent<string>} change - Fired when the selected colour changes; `detail` is the serialized colour.
  *
  * @cssproperty {pixel} [--c2-color-select--width=16px]
  * @cssproperty {pixel} [--c2-color-select--height=16px]
@@ -63,9 +74,11 @@ export interface ColorSelectChangeEventDetail {
  */
 export declare class ColorSelect extends LitElement {
     static styles: import("lit").CSSResult;
+    /** Preferred popup placement relative to the trigger. */
     placement: string;
     private _color;
     get color(): string;
+    /** Selected CSS colour value. */
     set color(value: string);
     hue: number;
     saturation: number;

package/types/src/color-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-select.d.ts","sourceRoot":"","sources":["../../src/color-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAE1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAI3C,OAAO,cAAc,CAAA;AACrB,OAAO,iBAAiB,CAAA;AACxB,OAAO,aAAa,CAAA;AACpB,OAAO,iBAAiB,CAAA;AACxB,OAAO,mBAAmB,CAAA;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAIhD,MAAM,WAAW,4BAA4B;IAC3C,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAoB;IAEC,SAAS,SAAiB;IAErE,OAAO,CAAC,MAAM,CAAoB;IAClC,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAK7B;IAEQ,GAAG,SAAI;IACP,UAAU,SAAI;IACd,KAAK,SAAI;IACT,KAAK,SAAI;IAET,SAAS,SAAQ;IACjB,IAAI,UAAQ;IAEC,SAAS,EAAG,SAAS,CAAA;IAE3C,IAAW,SAAS,IAAI,SAAS,CAEhC;IAED,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,oBAAoB;IAc5B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,2BAA2B;IAQnC,OAAO,CAAC,0BAA0B;IAQlC,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,mBAAmB;IAK3B,mBAAmB;IAeV,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}
+{"version":3,"file":"color-select.d.ts","sourceRoot":"","sources":["../../src/color-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAG1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAChG,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAI3C,OAAO,cAAc,CAAA;AACrB,OAAO,iBAAiB,CAAA;AACxB,OAAO,aAAa,CAAA;AACpB,OAAO,iBAAiB,CAAA;AACxB,OAAO,mBAAmB,CAAA;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAIhD,MAAM,WAAW,4BAA4B;IAC3C,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AACD,yEAAyE;AACzE,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;CAC5B;AAED,MAAM,WAAW,WAAW;IAC1B,gBAAgB,EAAE,qBAAqB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAA;IACzE,mBAAmB,EAAE,wBAAwB,CAAC,WAAW,EAAE,mBAAmB,CAAC,CAAA;CAChF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAoB;IAE1C,yDAAyD;IACd,SAAS,SAAiB;IAErE,OAAO,CAAC,MAAM,CAAoB;IAClC,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,iCAAiC;IACjC,IACW,KAAK,CAAC,KAAK,EAAE,MAAM,EAK7B;IAEQ,GAAG,SAAI;IACP,UAAU,SAAI;IACd,KAAK,SAAI;IACT,KAAK,SAAI;IAET,SAAS,SAAQ;IACjB,IAAI,UAAQ;IAEC,SAAS,EAAG,SAAS,CAAA;IAE3C,IAAW,SAAS,IAAI,SAAS,CAEhC;IAED,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,oBAAoB;IAc5B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,2BAA2B;IAQnC,OAAO,CAAC,0BAA0B;IAQlC,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,mBAAmB;IAK3B,mBAAmB;IAeV,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}

package/vue.d.ts

@@ -0,0 +1,33 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/color-select. Import once, anywhere in the program:
+//
+//     import '@c2n/color-select/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 { ColorSelect, ColorSelectEventMap } from '@c2n/color-select'
+
+/** 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-color-select': DefineComponent<
+      C2Props<ColorSelect> & {
+        onChange?: (event: ColorSelectEventMap['change']) => void
+      }
+    >
+  }
+}
+
+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 {}