@geoffcox/sterling-svelte 0.0.26 → 0.0.27

package/Tree.svelte

@@ -2,14 +2,16 @@
 import { writable } from "svelte/store";
 import { TREE_CONTEXT_KEY } from "./Tree.constants";
 import { usingKeyboard } from "./stores/usingKeyboard";
+export let colorful = false;
 export let composed = false;
 export let disabled = false;
 export let selectedValue = void 0;
 export let expandedValues = [];
 let treeRef;
-const selectedValueStore = writable(selectedValue);
-const expandedValuesStore = writable(expandedValues);
+const colorfulStore = writable(colorful);
 const disabledStore = writable(disabled);
+const expandedValuesStore = writable(expandedValues);
+const selectedValueStore = writable(selectedValue);
 export const blur = () => {
   treeRef?.blur();
 };
@@ -37,13 +39,17 @@ $: {
   expandedValues = $expandedValuesStore;
   raiseExpandCollapse($expandedValuesStore);
 }
+$: {
+  colorfulStore.set(colorful);
+}
 $: {
   disabledStore.set(disabled);
 }
 setContext(TREE_CONTEXT_KEY, {
+  colorful: colorfulStore,
+  disabled: disabledStore,
   expandedValues: expandedValuesStore,
-  selectedValue: selectedValueStore,
-  disabled: disabledStore
+  selectedValue: selectedValueStore
 });
 </script>
 
@@ -52,6 +58,7 @@ setContext(TREE_CONTEXT_KEY, {
   bind:this={treeRef}
   aria-disabled={disabled}
   class="sterling-tree"
+  class:colorful
   class:composed
   class:disabled
   class:using-keyboard={$usingKeyboard}
@@ -86,23 +93,23 @@ setContext(TREE_CONTEXT_KEY, {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <div class="container">
-    <slot {composed} {disabled} />
+    <slot {colorful} {composed} {disabled} />
   </div>
 </div>
 
 <style>
   .sterling-tree {
-    background-color: var(--stsv-Common__background-color);
-    border-color: var(--stsv-Common__border-color);
-    border-radius: var(--stsv-Common__border-radius);
-    border-style: var(--stsv-Common__border-style);
-    border-width: var(--stsv-Common__border-width);
+    background-color: var(--stsv-common__background-color);
+    border-color: var(--stsv-common__border-color);
+    border-radius: var(--stsv-common__border-radius);
+    border-style: var(--stsv-common__border-style);
+    border-width: var(--stsv-common__border-width);
     box-sizing: border-box;
-    color: var(--stsv-Common__color);
+    color: var(--stsv-common__color);
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
@@ -111,17 +118,17 @@ setContext(TREE_CONTEXT_KEY, {
   }
 
   .sterling-tree:hover {
-    border-color: var(--stsv-Common__border-color--hover);
-    color: var(--stsv-Common__color--hover);
+    border-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
   }
 
   .sterling-tree.using-keyboard:focus-within {
-    border-color: var(--stsv-Button__border-color--focus);
-    color: var(--stsv-Common__color--focus);
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
+    border-color: var(--stsv-button__border-color--focus);
+    color: var(--stsv-input__color--focus);
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
   }
 
   .sterling-tree.composed,
@@ -147,7 +154,13 @@ setContext(TREE_CONTEXT_KEY, {
   }
 
   .container::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      45deg,
+      var(--stsv-common__background-color1--disabled),
+      var(--stsv-common__background-color1--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 6px
+    );
     bottom: 0;
     content: '';
     left: 0;

package/Tree.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
         selectedValue?: string | undefined;
@@ -48,6 +49,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
+            colorful: boolean;
             composed: boolean;
             disabled: boolean;
         };

package/Tree.types.d.ts

@@ -3,6 +3,7 @@ import type { Readable, Writable } from 'svelte/store';
  * Context for a Tree and its tree items.
  */
 export type TreeContext = {
+    colorful: Readable<boolean>;
     /** If the tree is disabled */
     disabled: Readable<boolean>;
     /**

package/TreeChevron.svelte

@@ -52,7 +52,7 @@ $: {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 />
 

package/TreeItem.svelte

@@ -2,9 +2,10 @@
 import { slide } from "svelte/transition";
 import { TREE_CONTEXT_KEY, TREE_ITEM_CONTEXT_KEY } from "./Tree.constants";
 import TreeItemDisplay from "./TreeItemDisplay.svelte";
-import { writable } from "svelte/store";
+import { readable, writable } from "svelte/store";
 import { prefersReducedMotion } from "./stores/prefersReducedMotion";
 export let disabled = false;
+export let label = void 0;
 export let value;
 const slidNoOp = (node, params) => {
   return { delay: 0, duration: 0 };
@@ -12,11 +13,17 @@ const slidNoOp = (node, params) => {
 $:
   slideMotion = !$prefersReducedMotion ? slide : slidNoOp;
 const {
+  colorful,
+  disabled: treeDisabled,
   expandedValues,
-  selectedValue,
-  disabled: treeDisabled
+  selectedValue
 } = getContext(TREE_CONTEXT_KEY);
-const { depth = 0 } = getContext(TREE_ITEM_CONTEXT_KEY) || {};
+const { depth = 0 } = getContext(TREE_ITEM_CONTEXT_KEY) || {
+  colorful: readable(false),
+  disabled: readable(false),
+  expandedValues: readable([]),
+  selectedValue: readable(void 0)
+};
 let treeItemRef;
 $:
   hasChildren = $$slots.default;
@@ -244,6 +251,7 @@ A item in a Tree displaying the item and children.
   aria-expanded={expanded}
   bind:this={treeItemRef}
   class="sterling-tree-item"
+  class:colorful={$colorful}
   class:disabled={_disabled}
   data-value={value}
   role="treeitem"
@@ -277,7 +285,7 @@ A item in a Tree displaying the item and children.
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
@@ -289,10 +297,33 @@ A item in a Tree displaying the item and children.
     on:keydown={onKeydown}
   >
     <slot name="item" {depth} disabled={_disabled} {expanded} {hasChildren} {selected} {value}>
-      <TreeItemDisplay {depth} disabled={_disabled} {expanded} {hasChildren} {selected} {value}>
-        <svelte:fragment let:depth let:disabled let:expanded let:hasChildren let:selected let:value>
-          <slot name="label" {depth} {disabled} {expanded} {hasChildren} {selected} {value}
-            >{value}</slot
+      <TreeItemDisplay
+        colorful={$colorful}
+        {depth}
+        disabled={_disabled}
+        {expanded}
+        {hasChildren}
+        {selected}
+        {value}
+      >
+        <svelte:fragment
+          let:colorful
+          let:depth
+          let:disabled
+          let:expanded
+          let:hasChildren
+          let:selected
+          let:value
+        >
+          <slot
+            name="label"
+            {colorful}
+            {depth}
+            {disabled}
+            {expanded}
+            {hasChildren}
+            {selected}
+            {value}>{label || value}</slot
           >
         </svelte:fragment>
       </TreeItemDisplay>

package/TreeItem.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         disabled?: boolean | undefined;
+        label?: string | undefined;
         value: string;
         collapse?: (() => boolean) | undefined;
         expand?: (() => boolean) | undefined;
@@ -60,6 +61,7 @@ declare const __propDef: {
             value: string;
         };
         label: {
+            colorful: import("svelte/store").Readable<boolean>;
             depth: number;
             disabled: boolean;
             expanded: boolean;

package/TreeItemDisplay.svelte

@@ -2,6 +2,7 @@
 import { TREE_CONTEXT_KEY } from "./Tree.constants";
 import TreeChevron from "./TreeChevron.svelte";
 import { readable } from "svelte/store";
+export let colorful = false;
 export let depth = 0;
 export let disabled = false;
 export let expanded = false;
@@ -26,6 +27,7 @@ export const focus = (options) => {
 <div
   bind:this={divRef}
   class="sterling-tree-item-display"
+  class:colorful
   class:disabled={disabled && !$treeDisabled}
   class:item-disabled={disabled}
   class:expanded
@@ -61,11 +63,11 @@ export const focus = (options) => {
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <TreeChevron {expanded} {hasChildren} />
-  <slot {depth} {disabled} {expanded} {hasChildren} {selected} {value} />
+  <slot {colorful} {depth} {disabled} {expanded} {hasChildren} {selected} {value} />
 </div>
 
 <style>
@@ -74,7 +76,7 @@ export const focus = (options) => {
     align-items: center;
     background-color: transparent;
     box-sizing: border-box;
-    color: var(--stsv-Input__color);
+    color: var(--stsv-input__color);
     display: grid;
     grid-template-columns: auto 1fr;
     column-gap: 0.25em;
@@ -89,13 +91,23 @@ export const focus = (options) => {
   }
 
   .sterling-tree-item-display:not(.item-disabled):not(.selected):hover {
-    background-color: var(--stsv-Button__background-color--hover);
-    color: var(--stsv-Button__color--hover);
+    background-color: var(--stsv-button__background-color--hover);
+    color: var(--stsv-button__color--hover);
   }
 
   .sterling-tree-item-display.selected {
-    background-color: var(--stsv-Input__background-color--selected);
-    color: var(--stsv-Input__color--selected);
+    background-color: var(--stsv-button__background-color--active);
+    color: var(--stsv-button__color--active);
+  }
+
+  .sterling-tree-item-display.colorful:not(.item-disabled):not(.selected):hover {
+    background-color: var(--stsv-button--colorful__background-color--hover);
+    color: var(--stsv-button--colorful__color--hover);
+  }
+
+  .sterling-tree-item-display.colorful.selected {
+    background-color: var(--stsv-button--colorful__background-color--active);
+    color: var(--stsv-button--colorful__color--active);
   }
 
   .sterling-tree-item-display.disabled {
@@ -104,7 +116,13 @@ export const focus = (options) => {
   }
 
   .sterling-tree-item-display::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      45deg,
+      var(--stsv-common__background-color1--disabled),
+      var(--stsv-common__background-color1--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 6px
+    );
     bottom: 0;
     content: '';
     left: 0;

package/TreeItemDisplay.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         depth?: number | undefined;
         disabled?: boolean | undefined;
         expanded?: boolean | undefined;
@@ -49,6 +50,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
+            colorful: boolean;
             depth: number;
             disabled: boolean;
             expanded: boolean;

package/actions/clickOutside.js

@@ -9,7 +9,7 @@ export const clickOutside = (node, params) => {
         const targetNode = event?.target;
         if (targetNode &&
             !node.contains(targetNode) &&
-            (!ignoreOthers || ignoreOthers.every((x) => !x.contains(targetNode)))) {
+            (!ignoreOthers || ignoreOthers.filter(Boolean).every((x) => !x.contains(targetNode)))) {
             node.dispatchEvent(new CustomEvent('click_outside', {
                 detail: { mouseEvent: event }
             }));

package/actions/trapKeyboardFocus.d.ts

@@ -0,0 +1,3 @@
+export declare const trapKeyboardFocus: (node: HTMLElement) => {
+    destroy: () => void;
+};

package/actions/trapKeyboardFocus.js

@@ -0,0 +1,52 @@
+const getFirstFocusable = (node) => {
+    // we can't select [tabIndex] as many elements don't have tabIndex as a declared property
+    // but do default to tabIndex >= 0.
+    const nodes = node.querySelectorAll('*');
+    const elements = Array.from(nodes)
+        .map((n) => n)
+        .filter((n) => n.tabIndex !== undefined && n.tabIndex >= 0);
+    return elements.length > 0 ? elements[0] : null;
+};
+const getLastFocusable = (node) => {
+    // we can't select [tabIndex] as many elements don't have tabIndex as a declared property
+    // but do default to tabIndex >= 0.
+    const nodes = node.querySelectorAll('*');
+    const elements = Array.from(nodes)
+        .map((n) => n)
+        .filter((n) => n.tabIndex !== undefined && n.tabIndex >= 0);
+    return elements.length > 0 ? elements[elements.length - 1] : null;
+};
+export const trapKeyboardFocus = (node) => {
+    const onKeydown = (e) => {
+        let handledFocus = false;
+        if (e.key === 'Tab') {
+            if (e.shiftKey) {
+                const firstFocusable = getFirstFocusable(node);
+                if (document.activeElement === firstFocusable) {
+                    const lastFocusable = getLastFocusable(node);
+                    lastFocusable?.focus();
+                    handledFocus = true;
+                }
+            }
+            else {
+                const lastFocusable = getLastFocusable(node);
+                if (document.activeElement === lastFocusable) {
+                    const firstFocusable = getFirstFocusable(node);
+                    firstFocusable?.focus();
+                    handledFocus = true;
+                }
+            }
+        }
+        if (handledFocus) {
+            e.stopPropagation();
+            e.preventDefault();
+            return false;
+        }
+    };
+    node.addEventListener('keydown', onKeydown);
+    return {
+        destroy: () => {
+            node.removeEventListener('keydown', onKeydown);
+        }
+    };
+};

package/floating-ui.types.d.ts

@@ -1,2 +1,4 @@
 import type { Placement } from '@floating-ui/dom';
+import type { Options as OffsetOptions } from '@floating-ui/core/src/middleware/offset';
 export type FloatingPlacement = Placement;
+export type FloatingOffsetOptions = OffsetOptions;

package/index.d.ts

@@ -1,6 +1,7 @@
 export { clickOutside } from './actions/clickOutside';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
+export { trapKeyboardFocus } from './actions/trapKeyboardFocus';
 export { idGenerator } from './idGenerator';
 export { type Theme, type ThemeActionParams } from './theme/types';
 export { applyDarkTheme } from './theme/applyDarkTheme';
@@ -8,11 +9,11 @@ export { applyLightTheme } from './theme/applyLightTheme';
 export { applyTheme } from './theme/applyTheme';
 export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
-export { neutralColors, lightStatusColors, darkStatusColors } from './theme/colors';
+export { neutralColors, lightStatusColors, darkStatusColors, blueColors as blueAccentColors } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 export type { ButtonVariant, ButtonShape } from './Button.types';
 export type { FieldStatus } from './Field.types';
-export type { FloatingPlacement } from './floating-ui.types';
+export type { FloatingPlacement, FloatingOffsetOptions } from './floating-ui.types';
 export type { LinkVariant } from './Link.types';
 export type { ListContext } from './List.types';
 export type { MenuBarContext } from './MenuBar.types';
@@ -37,9 +38,12 @@ export { TOOLTIP_SHOW_ONS } from './Tooltip.constants';
 export { TREE_CONTEXT_KEY as treeContextKey, TREE_ITEM_CONTEXT_KEY as treeItemContextKey } from './Tree.constants';
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';
+import ColorPicker from './ColorPicker.svelte';
 import Dialog from './Dialog.svelte';
 import Dropdown from './Dropdown.svelte';
 import Field from './Field.svelte';
+import HexColorSliders from './HexColorSliders.svelte';
+import HslColorSliders from './HslColorSliders.svelte';
 import Input from './Input.svelte';
 import Label from './Label.svelte';
 import Link from './Link.svelte';
@@ -54,6 +58,7 @@ import MenuSeparator from './MenuSeparator.svelte';
 import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
+import RgbColorSliders from './RgbColorSliders.svelte';
 import Select from './Select.svelte';
 import Slider from './Slider.svelte';
 import Switch from './Switch.svelte';
@@ -65,4 +70,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, ColorPicker, Dialog, Dropdown, Field, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/index.js

@@ -2,6 +2,7 @@
 export { clickOutside } from './actions/clickOutside';
 export { forwardEvents } from './actions/forwardEvents';
 export { portal } from './actions/portal';
+export { trapKeyboardFocus } from './actions/trapKeyboardFocus';
 // ----- functions ----- //
 export { idGenerator } from './idGenerator';
 // ----- theme ----- //
@@ -11,7 +12,7 @@ export { applyLightTheme } from './theme/applyLightTheme';
 export { applyTheme } from './theme/applyTheme';
 export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
-export { neutralColors, lightStatusColors, darkStatusColors } from './theme/colors';
+export { neutralColors, lightStatusColors, darkStatusColors, blueColors as blueAccentColors } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 // ----- Component constants ----- //
 export { BUTTON_SHAPES, BUTTON_VARIANTS } from './Button.constants';
@@ -29,9 +30,12 @@ export { TREE_CONTEXT_KEY as treeContextKey, TREE_ITEM_CONTEXT_KEY as treeItemCo
 // ----- Components ----- //
 import Button from './Button.svelte';
 import Checkbox from './Checkbox.svelte';
+import ColorPicker from './ColorPicker.svelte';
 import Dialog from './Dialog.svelte';
 import Dropdown from './Dropdown.svelte';
 import Field from './Field.svelte';
+import HexColorSliders from './HexColorSliders.svelte';
+import HslColorSliders from './HslColorSliders.svelte';
 import Input from './Input.svelte';
 import Label from './Label.svelte';
 import Link from './Link.svelte';
@@ -46,6 +50,7 @@ import MenuSeparator from './MenuSeparator.svelte';
 import Popover from './Popover.svelte';
 import Progress from './Progress.svelte';
 import Radio from './Radio.svelte';
+import RgbColorSliders from './RgbColorSliders.svelte';
 import Select from './Select.svelte';
 import Slider from './Slider.svelte';
 import Switch from './Switch.svelte';
@@ -57,4 +62,4 @@ import Tree from './Tree.svelte';
 import TreeChevron from './TreeChevron.svelte';
 import TreeItem from './TreeItem.svelte';
 import TreeItemDisplay from './TreeItemDisplay.svelte';
-export { Button, Checkbox, Dialog, Dropdown, Field, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };
+export { Button, Checkbox, ColorPicker, Dialog, Dropdown, Field, HexColorSliders, HslColorSliders, Input, Label, Link, List, ListItem, Menu, MenuBar, MenuButton, MenuItem, MenuItemDisplay, MenuSeparator, Popover, Progress, Radio, RgbColorSliders, Select, Slider, Switch, Tab, TabList, TextArea, Tooltip, Tree, TreeChevron, TreeItem, TreeItemDisplay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -26,6 +26,7 @@
     "@sveltejs/kit": "^1.5.0",
     "@sveltejs/package": "^1.0.0",
     "@types/lodash-es": "^4.17.6",
+    "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "eslint": "^8.28.0",
@@ -43,6 +44,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@ctrl/tinycolor": "^3.6.0",
     "@floating-ui/dom": "^1.1.0",
     "keyborg": "^2.0.0",
     "lodash-es": "^4.17.21"
@@ -53,11 +55,16 @@
     "./Button.svelte": "./Button.svelte",
     "./Button.types": "./Button.types.js",
     "./Checkbox.svelte": "./Checkbox.svelte",
+    "./ColorPicker.constants": "./ColorPicker.constants.js",
+    "./ColorPicker.svelte": "./ColorPicker.svelte",
+    "./ColorPicker.types": "./ColorPicker.types.js",
     "./Dialog.svelte": "./Dialog.svelte",
     "./Dropdown.svelte": "./Dropdown.svelte",
     "./Field.constants": "./Field.constants.js",
     "./Field.svelte": "./Field.svelte",
     "./Field.types": "./Field.types.js",
+    "./HexColorSliders.svelte": "./HexColorSliders.svelte",
+    "./HslColorSliders.svelte": "./HslColorSliders.svelte",
     "./Input.svelte": "./Input.svelte",
     "./Label.svelte": "./Label.svelte",
     "./Link.constants": "./Link.constants.js",
@@ -83,6 +90,7 @@
     "./Progress.svelte": "./Progress.svelte",
     "./Progress.types": "./Progress.types.js",
     "./Radio.svelte": "./Radio.svelte",
+    "./RgbColorSliders.svelte": "./RgbColorSliders.svelte",
     "./Select.svelte": "./Select.svelte",
     "./Slider.svelte": "./Slider.svelte",
     "./Switch.svelte": "./Switch.svelte",
@@ -106,6 +114,7 @@
     "./actions/clickOutside": "./actions/clickOutside.js",
     "./actions/forwardEvents": "./actions/forwardEvents.js",
     "./actions/portal": "./actions/portal.js",
+    "./actions/trapKeyboardFocus": "./actions/trapKeyboardFocus.js",
     "./floating-ui.constants": "./floating-ui.constants.js",
     "./floating-ui.types": "./floating-ui.types.js",
     "./idGenerator": "./idGenerator.js",

package/theme/applyTheme.js

@@ -1,6 +1,6 @@
 const _applyTheme = (node, theme) => {
     Object.keys(theme).map((key) => {
-        node.style.setProperty(key, theme[key] ? `${theme[key]}` : null);
+        node.style.setProperty(`--${key}`, theme[key] ? `${theme[key]}` : null);
     });
 };
 /**
@@ -12,7 +12,8 @@ export const applyTheme = (node, params) => {
     return {
         update: (params) => {
             if (params) {
-                _applyTheme(document.documentElement, params?.theme);
+                const element = params.atDocumentRoot ? document.documentElement : node;
+                _applyTheme(element, params?.theme);
             }
         }
     };

package/theme/colors.d.ts

@@ -51,3 +51,4 @@ export declare const darkStatusColors: {
         color: string;
     };
 };
+export declare const blueColors: Record<string, string>;

package/theme/colors.js

@@ -1,17 +1,17 @@
 export const neutralColors = {
-    neutral0: 'hsl(0, 0%, 0%)',
-    neutral10: 'hsl(0, 0%, 12%)',
-    neutral15: 'hsl(0, 0%, 15%)',
-    neutral20: 'hsl(0, 0%, 20%)',
-    neutral30: 'hsl(0, 0%, 30%)',
-    neutral45: 'hsl(0, 0%, 45%)',
-    neutral60: 'hsl(0, 0%, 60%)',
-    neutral75: 'hsl(0, 0%, 75%)',
-    neutral85: 'hsl(0, 0%, 85%)',
-    neutral92: 'hsl(0, 0%, 92%)',
-    neutral96: 'hsl(0, 0%, 96%)',
-    neutral98: 'hsl(0, 0%, 98%)',
-    neutral100: 'hsl(0, 0%, 100%)'
+    color0: 'hsl(0, 0%, 0%)',
+    color1: 'hsl(0, 0%, 12%)',
+    color2: 'hsl(0, 0%, 15%)',
+    color3: 'hsl(0, 0%, 20%)',
+    color4: 'hsl(0, 0%, 30%)',
+    color5: 'hsl(0, 0%, 45%)',
+    color6: 'hsl(0, 0%, 60%)',
+    color7: 'hsl(0, 0%, 75%)',
+    color8: 'hsl(0, 0%, 85%)',
+    color9: 'hsl(0, 0%, 92%)',
+    color10: 'hsl(0, 0%, 96%)',
+    color11: 'hsl(0, 0%, 98%)',
+    color12: 'hsl(0, 0%, 100%)'
 };
 /**
  * Status colors for a light theme.
@@ -65,3 +65,18 @@ export const darkStatusColors = {
         color: 'hsl(5, 100%, 50%)'
     }
 };
+export const blueColors = {
+    color0: 'hsl(204, 100%, 0%)',
+    color1: 'hsl(204, 100%, 18%)',
+    color2: 'hsl(204, 100%, 25%)',
+    color3: 'hsl(204, 100%, 30%)',
+    color4: 'hsl(204, 100%, 35%)',
+    color5: 'hsl(204, 100%, 42%)',
+    color6: 'hsl(204, 100%, 50%)',
+    color7: 'hsl(204, 100%, 60%)',
+    color8: 'hsl(204, 100%, 70%)',
+    color9: 'hsl(204, 100%, 80%)',
+    color10: 'hsl(204, 100%, 90%)',
+    color11: 'hsl(204, 100%, 98%)',
+    color12: 'hsl(204, 100%, 100%)'
+};