@c2n/color-slider 0.0.6 → 0.0.8

package/dist/color-slider.js

@@ -1,6 +1,7 @@
-import { LitElement, html, unsafeCSS } from "lit";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
 import { isServer } from "lit-html/is-server.js";
-import { customElement, property, query } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import { redispatchEvent } from "@c2n/core/dom-helper.js";
 //#region src/color-slider.scss?inline
 var color_slider_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n}\n\n.c2-color-slider {\n  display: block;\n  position: relative;\n  cursor: pointer;\n  touch-action: none;\n  outline: none;\n}\n.c2-color-slider .gradient {\n  flex: 1;\n  border-top-left-radius: var(--c2-color-slider--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-color-slider--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-color-slider--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-color-slider--border-bottom-right-radius,8px);\n  border-top: var(--c2-color-slider--border-top,1px solid rgb(248, 248, 248));\n  border-bottom: var(--c2-color-slider--border-bottom,1px solid rgb(248, 248, 248));\n  border-right: var(--c2-color-slider--border-right,1px solid rgb(248, 248, 248));\n  border-left: var(--c2-color-slider--border-left,1px solid rgb(248, 248, 248));\n  width: var(--c2-color-slider--width,160px);\n  height: var(--c2-color-slider--height,12px);\n  pointer-events: none;\n  background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);\n}\n.c2-color-slider .gradient ::slotted(*) {\n  width: var(--c2-color-slider--width,160px);\n  height: var(--c2-color-slider--height,12px);\n  border-top-left-radius: var(--c2-color-slider--border-top-left-radius,8px);\n  border-top-right-radius: var(--c2-color-slider--border-top-right-radius,8px);\n  border-bottom-left-radius: var(--c2-color-slider--border-bottom-left-radius,8px);\n  border-bottom-right-radius: var(--c2-color-slider--border-bottom-right-radius,8px);\n}\n.c2-color-slider .input-slider {\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: inherit;\n  top: 0;\n  left: 0;\n  width: var(--c2-color-slider--width,160px);\n  height: var(--c2-color-slider--height,12px);\n}\n.c2-color-slider .color-handle {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n  width: var(--c2-color-slider__color-handle--width,12px);\n  height: var(--c2-color-slider__color-handle--height,12px);\n  border-top-left-radius: var(--c2-color-slider__color-handle--border-top-left-radius,6px);\n  border-top-right-radius: var(--c2-color-slider__color-handle--border-top-right-radius,6px);\n  border-bottom-left-radius: var(--c2-color-slider__color-handle--border-bottom-left-radius,6px);\n  border-bottom-right-radius: var(--c2-color-slider__color-handle--border-bottom-right-radius,6px);\n  top: 50%;\n  left: 0;\n  border: 2px solid white;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0.6px;\n  cursor: inherit;\n  transform: translateY(-50%);\n}";
@@ -1137,6 +1138,7 @@ var ColorSlider = class ColorSlider extends LitElement {
 		this.value = 0;
 		this.min = 0;
 		this.max = 360;
+		this.ariaLabel = null;
 		if (!isServer) this.resizeObserver = new ResizeObserver(() => {
 			this.colorHandleRect = void 0;
 			this.inputSliderRect = void 0;
@@ -1160,9 +1162,8 @@ var ColorSlider = class ColorSlider extends LitElement {
 		if (!this.inputSliderRect) this.inputSliderRect = this.inputSlider.getBoundingClientRect();
 		const handleWidth = this.colorHandleRect.width;
 		const range = this.max - this.min;
-		let position = this.inputSliderRect.width / range * this.value;
-		const delta = handleWidth / (this.inputSliderRect.width / position);
-		position = position - delta;
+		const fraction = range > 0 ? Math.min(1, Math.max(0, (this.value - this.min) / range)) : 0;
+		let position = (this.inputSliderRect.width - handleWidth) * fraction;
 		position = Math.max(0, position);
 		position = Math.min(position, this.inputSliderRect.width - handleWidth);
 		this.colorHandle.style.setProperty("transform", `translate(${position}px, -50%)`);
@@ -1180,7 +1181,16 @@ var ColorSlider = class ColorSlider extends LitElement {
 		});
 		return html`
       <div class="c2-color-slider">
-        <input type="range" class="input-slider" min=${this.min} max=${this.max} step="1" .value=${String(this.value)} @input=${this.handleInput} />
+        <input
+          aria-label=${this.ariaLabel || nothing}
+          type="range"
+          class="input-slider"
+          min=${this.min}
+          max=${this.max}
+          step="1"
+          .value=${String(this.value)}
+          @input=${this.handleInput}
+        />
         <div class="gradient">
           <slot></slot>
         </div>
@@ -1201,6 +1211,7 @@ __decorate([property({
 	type: Number,
 	reflect: true
 })], ColorSlider.prototype, "max", void 0);
+__decorate([property({ attribute: "aria-label" })], ColorSlider.prototype, "ariaLabel", void 0);
 __decorate([query(".color-handle")], ColorSlider.prototype, "colorHandle", void 0);
 __decorate([query(".input-slider")], ColorSlider.prototype, "inputSlider", void 0);
 ColorSlider = __decorate([customElement("c2-color-slider")], ColorSlider);

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "@c2n/color-slider",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/color-slider.js",
   "exports": {
     ".": {
-      "default": "./dist/color-slider.js",
-      "types": "./types/src/color-slider.d.ts"
+      "types": "./types/src/color-slider.d.ts",
+      "default": "./dist/color-slider.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-slider",
@@ -48,7 +60,7 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.8",
     "@ctrl/tinycolor": "4.2.0",
     "lit": "3.3.3"
   },
@@ -56,5 +68,5 @@
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
 }

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-slider. Import once, anywhere in the program:
+//
+//     import '@c2n/color-slider/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 { ColorSlider } from '@c2n/color-slider'
+
+/** 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-slider': C2Props<ColorSlider>
+    }
+  }
+}
+
+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-slider.d.ts

@@ -1,8 +1,19 @@
 import { LitElement, type PropertyValueMap } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+/** Events fired by {@link ColorSlider}, keyed for `addEventListener`. */
+export interface ColorSliderEventMap {
+    input: Event;
+}
+export interface ColorSlider {
+    addEventListener: TypedAddEventListener<ColorSlider, ColorSliderEventMap>;
+    removeEventListener: TypedRemoveEventListener<ColorSlider, ColorSliderEventMap>;
+}
 /**
+ * Horizontal numeric slider rendered as a colour-gradient track, typically used for hue.
+ *
  * @tag c2-color-slider
  *
- * @event {CustomEvent} input
+ * @event {Event} input - Re-dispatched from the inner range input while its value changes.
  *
  *
  * @cssproperty {border-radius} [--c2-color-slider--border-radius=8px]
@@ -32,9 +43,14 @@ import { LitElement, type PropertyValueMap } from 'lit';
  */
 export declare class ColorSlider extends LitElement {
     static styles: import("lit").CSSResult;
+    /** Current numeric value. */
     value: number;
+    /** Minimum selectable value. */
     min: number;
+    /** Maximum selectable value. */
     max: number;
+    /** Accessible name forwarded to the inner range input. */
+    ariaLabel: string | null;
     colorHandle: HTMLElement;
     inputSlider: HTMLElement;
     private colorHandleRect?;

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

@@ -1 +1 @@
-{"version":3,"file":"color-slider.d.ts","sourceRoot":"","sources":["../../src/color-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAMxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAoB;IAEC,KAAK,EAAE,MAAM,CAAI;IACjB,GAAG,EAAE,MAAM,CAAI;IACf,GAAG,EAAE,MAAM,CAAM;IAEpC,WAAW,EAAG,WAAW,CAAA;IACzB,WAAW,EAAG,WAAW,CAAA;IAEjD,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,cAAc,CAAC,CAAgB;;IAYvC,OAAO,CAAC,WAAW;IAKV,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,yBAAyB;cAiBd,OAAO,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAOnE,MAAM;CAYhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}
+{"version":3,"file":"color-slider.d.ts","sourceRoot":"","sources":["../../src/color-slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,gBAAgB,EAAE,MAAM,KAAK,CAAA;AAIjF,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAIhG,yEAAyE;AACzE,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,KAAK,CAAA;CACb;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAoB;IAE1C,6BAA6B;IACc,KAAK,EAAE,MAAM,CAAI;IAC5D,gCAAgC;IACW,GAAG,EAAE,MAAM,CAAI;IAC1D,gCAAgC;IACW,GAAG,EAAE,MAAM,CAAM;IAE5D,0DAA0D;IACV,SAAS,EAAE,MAAM,GAAG,IAAI,CAAO;IAEvD,WAAW,EAAG,WAAW,CAAA;IACzB,WAAW,EAAG,WAAW,CAAA;IAEjD,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,cAAc,CAAC,CAAgB;;IAYvC,OAAO,CAAC,WAAW;IAKV,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,yBAAyB;cAgBd,OAAO,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAOnE,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}

package/vue.d.ts

@@ -0,0 +1,34 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/color-slider. Import once, anywhere in the program:
+//
+//     import '@c2n/color-slider/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 { ColorSlider, ColorSliderEventMap } from '@c2n/color-slider'
+
+/** 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-slider': DefineComponent<
+      C2Props<ColorSlider> & {
+        'aria-label'?: unknown
+        onInput?: (event: ColorSliderEventMap['input']) => 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 {}