@geoffcox/sterling-svelte 1.0.11 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "1.0.11",
+  "version": "2.0.0",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight UI component library for Svelte.",
   "license": "MIT",
@@ -10,7 +10,7 @@
   "homepage": "https://github.com/GeoffCox/sterling-svelte/blob/main/README.md",
   "keywords": [
     "svelte",
-    "svelte 4",
+    "svelte 5",
     "sveltekit",
     "design system",
     "component",
@@ -21,7 +21,6 @@
     "button",
     "callout",
     "checkbox",
-    "colorpicker",
     "dialog",
     "dropdown",
     "input",
@@ -42,16 +41,14 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    },
-    "./css/*.css": "./dist/css/*.css",
-    "./*.svelte": "./dist/*.svelte"
+      "types": "./index.d.ts",
+      "svelte": "./index.js"
+    }
   },
   "files": [
-    "dist/*",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
+    "**/*",
+    "!**/*.test.*",
+    "!**/*.spec.*"
   ],
   "scripts": {
     "build": "vite build && npm run package",
@@ -67,42 +64,43 @@
     "test:unit": "vitest"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
+    "@fontsource/atkinson-hyperlegible": "^5.1.1",
     "@fontsource/open-sans": "^4.5.14",
     "@fontsource/source-code-pro": "^4.5.14",
-    "@playwright/test": "^1.28.1",
+    "@geoffcox/sterling-svelte-themes": "^1.0.2",
+    "@eslint/compat": "^1.2.3",
+    "@playwright/test": "^1.45.3",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/adapter-static": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/eslint": "^8.56.7",
     "@types/lodash-es": "^4.17.6",
-    "eslint": "^9.0.0",
+    "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.36.0",
     "globals": "^15.0.0",
-    "mdsvex": "^0.11.0",
-    "prettier": "^3.1.1",
-    "prettier-plugin-svelte": "^3.1.2",
-    "publint": "^0.1.9",
-    "svelte": "^4.2.7",
-    "svelte-check": "^3.6.0",
-    "svelte-preprocess": "^5.0.4",
+    "prettier": "^3.3.2",
+    "prettier-plugin-svelte": "^3.2.6",
+    "publint": "^0.2.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-preprocess": "^6.0.3",
     "typescript": "^5.0.0",
-    "typescript-eslint": "^8.0.0-alpha.20",
-    "vite": "^5.0.11",
-    "vitest": "^1.2.0"
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.4"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^4.1.0",
     "@floating-ui/dom": "^1.1.0",
     "keyborg": "^2.0.0",
     "lodash-es": "^4.17.21"
   },
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "svelte": "./index.js",
+  "types": "./index.d.ts",
   "type": "module"
 }

package/README.md

@@ -1,18 +0,0 @@
-# sterling-svelte
-
-A modern, accessible, and lightweight component library for Svelte.
-
-## Installation
-
-```
-npm install @geoffcox/sterling-svelte
-```
-
-## Documentation
-
-The project builds the documentation for the library as a SvelteKit application.
-See the published version of the [documentation](https://geoffcox.github.io/demos/sterling-svelte/).
-
-## Repository
-
-https://github.com/GeoffCox/sterling-svelte

package/dist/Button.constants.d.ts

@@ -1,2 +0,0 @@
-export declare const BUTTON_VARIANTS: readonly ["regular", "outline", "ghost"];
-export declare const BUTTON_SHAPES: readonly ["circular", "rounded", "square"];

package/dist/Button.constants.js

@@ -1,2 +0,0 @@
-export const BUTTON_VARIANTS = ['regular', 'outline', 'ghost'];
-export const BUTTON_SHAPES = ['circular', 'rounded', 'square'];

package/dist/Button.svelte

@@ -1,63 +0,0 @@
-<script>// ----- Props ----- //
-export let disabled = false;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let buttonRef;
-// ----- Methods ----- //
-export const click = () => {
-    buttonRef?.click();
-};
-export const blur = () => {
-    buttonRef?.blur();
-};
-export const focus = (options) => {
-    buttonRef?.focus(options);
-};
-</script>
-
-<!--
-	@component
-	A styled HTML button element.
--->
-<button
-  bind:this={buttonRef}
-  class={`sterling-button ${variant}`}
-  {disabled}
-  type="button"
-  on:blur
-  on:click
-  on:drag
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:dblclick
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:pointercancel
-  on:pointerdown
-  on:pointerenter
-  on:pointerleave
-  on:pointermove
-  on:pointerover
-  on:pointerout
-  on:pointerup
-  on:wheel|passive
-  {...$$restProps}
->
-  <slot {disabled} {variant} />
-</button>

package/dist/Button.svelte.d.ts

@@ -1,65 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        disabled?: boolean | undefined;
-        variant?: string | undefined;
-        click?: (() => void) | undefined;
-        blur?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        drag: DragEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        dblclick: MouseEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        pointercancel: PointerEvent;
-        pointerdown: PointerEvent;
-        pointerenter: PointerEvent;
-        pointerleave: PointerEvent;
-        pointermove: PointerEvent;
-        pointerover: PointerEvent;
-        pointerout: PointerEvent;
-        pointerup: PointerEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            disabled: boolean;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-/** A styled HTML button element. */
-export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
-    get click(): () => void;
-    get blur(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/Button.types.d.ts

@@ -1,6 +0,0 @@
-import type { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
-type ButtonShapeTuple = typeof BUTTON_SHAPES;
-export type ButtonShape = ButtonShapeTuple[number];
-type ButtonVariantTuple = typeof BUTTON_VARIANTS;
-export type ButtonVariant = ButtonVariantTuple[number];
-export {};

package/dist/Callout.svelte.d.ts

@@ -1,56 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        conditionalRender?: boolean | undefined;
-        crossAxisOffset?: number | undefined;
-        mainAxisOffset?: number | undefined;
-        open?: boolean | undefined;
-        placement?: string | undefined;
-        portalHost?: HTMLElement | undefined;
-        reference: HTMLElement | undefined;
-        variant?: string | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        copy: ClipboardEvent;
-        cut: ClipboardEvent;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        scroll: Event;
-        wheel: WheelEvent;
-        paste: ClipboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type CalloutProps = typeof __propDef.props;
-export type CalloutEvents = typeof __propDef.events;
-export type CalloutSlots = typeof __propDef.slots;
-export default class Callout extends SvelteComponent<CalloutProps, CalloutEvents, CalloutSlots> {
-}
-export {};

package/dist/Checkbox.svelte

@@ -1,79 +0,0 @@
-<script>import { idGenerator } from './idGenerator';
-import { usingKeyboard } from './mediaQueries/usingKeyboard';
-// ----- Props ----- //
-export let checked = false;
-export let disabled = false;
-export let id = undefined;
-/** Additional class names to apply. */
-export let variant = '';
-// ----- State ----- //
-let inputRef;
-$: {
-    if ($$slots.default && id === undefined) {
-        id = idGenerator.nextId('Checkbox');
-    }
-}
-// ----- Methods ----- //
-export const blur = () => {
-    inputRef?.blur();
-};
-export const click = () => {
-    inputRef?.click();
-};
-export const focus = (options) => {
-    inputRef?.focus(options);
-};
-</script>
-
-<!--
-	@component
-	A styled HTML input type=checkbox element.
--->
-<div
-  class={`sterling-checkbox ${variant}`}
-  class:checked
-  class:disabled
-  class:using-keyboard={$usingKeyboard}
->
-  <div class="container">
-    <input
-      bind:this={inputRef}
-      bind:checked
-      {disabled}
-      {id}
-      type="checkbox"
-      on:blur
-      on:click
-      on:change
-      on:dblclick
-      on:dragend
-      on:dragenter
-      on:dragleave
-      on:dragover
-      on:dragstart
-      on:drop
-      on:focus
-      on:focusin
-      on:focusout
-      on:keydown
-      on:keypress
-      on:keyup
-      on:input
-      on:mousedown
-      on:mouseenter
-      on:mouseleave
-      on:mousemove
-      on:mouseover
-      on:mouseout
-      on:mouseup
-      on:wheel|passive
-      {...$$restProps}
-    />
-    <div class="indicator" />
-  </div>
-  {#if $$slots.default}
-    <label for={id}>
-      <slot {checked} {disabled} inputId={id} value={$$restProps.value} {variant} />
-    </label>
-  {/if}
-</div>

package/dist/Checkbox.svelte.d.ts

@@ -1,63 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        checked?: boolean | undefined;
-        disabled?: boolean | undefined;
-        id?: string | undefined;
-        variant?: string | undefined;
-        blur?: (() => void) | undefined;
-        click?: (() => void) | undefined;
-        focus?: ((options?: FocusOptions) => void) | undefined;
-    };
-    events: {
-        blur: FocusEvent;
-        click: MouseEvent;
-        change: Event;
-        dblclick: MouseEvent;
-        dragend: DragEvent;
-        dragenter: DragEvent;
-        dragleave: DragEvent;
-        dragover: DragEvent;
-        dragstart: DragEvent;
-        drop: DragEvent;
-        focus: FocusEvent;
-        focusin: FocusEvent;
-        focusout: FocusEvent;
-        keydown: KeyboardEvent;
-        keypress: KeyboardEvent;
-        keyup: KeyboardEvent;
-        input: Event;
-        mousedown: MouseEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        mousemove: MouseEvent;
-        mouseover: MouseEvent;
-        mouseout: MouseEvent;
-        mouseup: MouseEvent;
-        wheel: WheelEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            checked: boolean;
-            disabled: boolean;
-            inputId: string | undefined;
-            value: any;
-            variant: string;
-        };
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type CheckboxProps = typeof __propDef.props;
-export type CheckboxEvents = typeof __propDef.events;
-export type CheckboxSlots = typeof __propDef.slots;
-/** A styled HTML input type=checkbox element. */
-export default class Checkbox extends SvelteComponent<CheckboxProps, CheckboxEvents, CheckboxSlots> {
-    get blur(): () => void;
-    get click(): () => void;
-    get focus(): (options?: FocusOptions | undefined) => void;
-}
-export {};

package/dist/ColorPicker.constants.d.ts

@@ -1 +0,0 @@
-export declare const COLOR_FORMATS: readonly ["hex", "rgb", "hsl"];

package/dist/ColorPicker.constants.js

@@ -1 +0,0 @@
-export const COLOR_FORMATS = ['hex', 'rgb', 'hsl'];