cladux-html 0.1.0 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cladux-html",
-  "version": "0.1.0",
-  "description": "Cladux for plain HTML: one stylesheet and one small script, from a CDN or npm.",
+  "version": "0.3.0",
+  "description": "Cladux for plain HTML: one stylesheet, or just the components you use, and one small script, from a CDN or npm.",
   "keywords": [
     "cladux",
     "css",
@@ -24,16 +24,47 @@
   "author": "Killer88967",
   "type": "module",
   "style": "cl.css",
+  "module": "cl.mjs",
+  "types": "types/index.d.ts",
   "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "default": "./cl.mjs"
+    },
+    "./cl.mjs": {
+      "types": "./types/index.d.ts",
+      "default": "./cl.mjs"
+    },
+    "./cl.min.mjs": {
+      "types": "./types/index.d.ts",
+      "default": "./cl.min.mjs"
+    },
     "./cl.css": "./cl.css",
+    "./cl.min.css": "./cl.min.css",
+    "./core.css": "./core.css",
+    "./core.min.css": "./core.min.css",
+    "./components/*": "./components/*",
     "./cl.js": "./cl.js",
+    "./cl.min.js": "./cl.min.js",
     "./package.json": "./package.json"
   },
   "files": [
     "cl.css",
-    "cl.js"
+    "cl.min.css",
+    "core.css",
+    "core.min.css",
+    "components",
+    "cl.js",
+    "cl.min.js",
+    "cl.mjs",
+    "cl.min.mjs",
+    "types"
+  ],
+  "sideEffects": [
+    "*.css",
+    "./cl.js",
+    "./cl.min.js"
   ],
-  "sideEffects": true,
   "publishConfig": {
     "access": "public"
   },

package/types/accordion.d.ts

@@ -0,0 +1 @@
+export declare function onAccordionClick(event: MouseEvent, target: Element): void;

package/types/carousel.d.ts

@@ -0,0 +1,8 @@
+/** Makes the slides reachable from the keyboard, labels them, and sets the buttons. */
+export declare function setupCarousels(root?: ParentNode): void;
+export declare function onCarouselClick(target: Element): void;
+export declare function onCarouselKeyDown(event: KeyboardEvent, target: Element): void;
+/** Scroll events don't bubble, so this listens in the capture phase; one update a frame. */
+export declare function onCarouselScroll(event: Event): void;
+/** A mouse drags the slides; touch screens and trackpads already scroll them. */
+export declare function onCarouselPointerDown(event: PointerEvent, target: Element): void;

package/types/combobox.d.ts

@@ -0,0 +1,11 @@
+/** Gives each combobox the ARIA roles and ids it needs, so the markup can stay short. */
+export declare function setupComboboxes(root?: ParentNode): void;
+export declare function onComboboxClick(target: Element): void;
+export declare function onComboboxInput(target: Element): void;
+export declare function onComboboxKeyDown(event: KeyboardEvent, target: Element): void;
+export declare function onComboboxPointerMove(target: Element): void;
+/** Keeps the focus in the input when the list is clicked. */
+export declare function onComboboxPointerDown(event: PointerEvent, target: Element): void;
+export declare function onComboboxFocusOut(event: FocusEvent, target: Element): void;
+/** Moves open lists with their input when the page scrolls or resizes. */
+export declare function repositionComboboxes(): void;

package/types/dialog.d.ts

@@ -0,0 +1,3 @@
+/** Opens a <dialog> by id as a modal. */
+export declare function openDialog(id: string): void;
+export declare function onDialogClick(event: MouseEvent, target: Element): void;

package/types/floating.d.ts

@@ -0,0 +1,12 @@
+/** Keeps it invisible until it's been positioned, so it never flashes in the wrong spot. */
+export declare function onFloatingBeforeToggle(event: Event): void;
+export declare function onFloatingToggle(event: Event): void;
+/** Re-positions open floating elements when the page scrolls or resizes. */
+export declare function repositionOpen(): void;
+export declare function onMenuKeyDown(event: KeyboardEvent, target: Element): void;
+export declare function onMenuPointerMove(target: Element): void;
+export declare function onMenuPointerLeave(event: PointerEvent): void;
+export declare function onMenuClick(target: Element): void;
+export declare function onTooltipEnter(event: PointerEvent | FocusEvent, target: Element): void;
+export declare function onTooltipLeave(event: PointerEvent | FocusEvent, target: Element): void;
+export declare function hideAllTooltips(): void;

package/types/index.d.ts

@@ -0,0 +1,16 @@
+import { openDialog } from "./dialog.js";
+import { toast } from "./toast.js";
+export { openDialog } from "./dialog.js";
+export { place, type Align, type PlaceOptions, type Side } from "./position.js";
+export { toast, type ToastOptions, type ToastType } from "./toast.js";
+/**
+ * Turns on the behavior for the CSS-only components: accordions, dialogs, popovers,
+ * dropdown menus, tooltips, tabs, sliders, comboboxes, carousels and toasts. Listeners are delegated to the
+ * document, so markup added later works too. Safe to call more than once.
+ */
+export declare function start(): void;
+export declare const cl: {
+    start: typeof start;
+    toast: typeof toast;
+    openDialog: typeof openDialog;
+};

package/types/position.d.ts

@@ -0,0 +1,17 @@
+export type Side = "top" | "bottom" | "left" | "right";
+export type Align = "start" | "center" | "end";
+export interface PlaceOptions {
+    side?: Side;
+    align?: Align;
+    /** Gap between the anchor and the floating element, in px. */
+    offset?: number;
+    /** Space kept free at the viewport edges, in px. */
+    padding?: number;
+}
+/**
+ * Positions a fixed element next to an anchor, flipping to the other side
+ * when it doesn't fit and keeping it inside the viewport.
+ * Sets data-placed to the side used, plus a few CSS variables:
+ * --cl-anchor-width, --cl-available-height and a transform-origin.
+ */
+export declare function place(floating: HTMLElement, anchor: Element, options?: PlaceOptions): void;

package/types/slider.d.ts

@@ -0,0 +1,5 @@
+export declare function onSliderInput(target: Element): void;
+/** Fills the sliders under `root`, and `root` itself if it's one. */
+export declare function setupSliders(root?: ParentNode): void;
+export declare function onFormReset(target: Element): void;
+export declare function onSliderPointerDown(event: PointerEvent, target: Element): void;

package/types/tabs.d.ts

@@ -0,0 +1,4 @@
+export declare function onTabClick(target: Element): void;
+export declare function onTabKeyDown(event: KeyboardEvent, target: Element): void;
+/** Makes sure only the selected tab is in the tab order. */
+export declare function setupTabs(root?: ParentNode): void;

package/types/toast.d.ts

@@ -0,0 +1,21 @@
+export type ToastType = "default" | "success" | "info" | "warning" | "error" | "loading";
+export interface ToastOptions {
+    description?: string;
+    type?: ToastType;
+    /** How long it stays, in ms. Use Infinity to keep it until dismissed. */
+    duration?: number;
+    action?: {
+        label: string;
+        onClick?: (event: MouseEvent) => void;
+    };
+}
+/** Shows a toast. Returns a function that dismisses it. */
+export declare function toast(title: string, options?: ToastOptions): () => void;
+export declare namespace toast {
+    var success: (title: string, options?: Omit<ToastOptions, "type">) => () => void;
+    var info: (title: string, options?: Omit<ToastOptions, "type">) => () => void;
+    var warning: (title: string, options?: Omit<ToastOptions, "type">) => () => void;
+    var error: (title: string, options?: Omit<ToastOptions, "type">) => () => void;
+}
+/** <button data-toast="Saved" data-toast-description="..." data-toast-type="success"> */
+export declare function onToastClick(target: Element): void;