@geoffcox/sterling-svelte 0.0.14 → 0.0.16

package/index.js

@@ -7,19 +7,27 @@ export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 export { clickOutside } from './clickOutside';
+export { menuBarContextKey, menuItemContextKey } from './containers/Menus.constants';
 import Button from './buttons/Button.svelte';
 import Checkbox from './inputs/Checkbox.svelte';
 import Dialog from './surfaces/Dialog.svelte';
 import Input from './inputs/Input.svelte';
 import Label from './display/Label.svelte';
 import List from './containers/List.svelte';
+import Menu from './containers/Menu.svelte';
+import MenuBar from './containers/MenuBar.svelte';
+import MenuButton from './buttons/MenuButton.svelte';
+import MenuItem from './containers/MenuItem.svelte';
+import MenuSeparator from './containers/MenuSeparator.svelte';
 import Progress from './display/Progress.svelte';
 import Radio from './inputs/Radio.svelte';
 import Select from './inputs/Select.svelte';
 import Slider from './inputs/Slider.svelte';
 import Switch from './inputs/Switch.svelte';
+import Tab from './containers/Tab.svelte';
+import TabList from './containers/TabList.svelte';
 import TextArea from './inputs/TextArea.svelte';
 import Tree from './containers/Tree.svelte';
 import TreeChevron from './containers/TreeChevron.svelte';
 import TreeItem from './containers/TreeItem.svelte';
-export { Button, Checkbox, Dialog, Input, Label, List, Progress, Radio, Select, Slider, Switch, TextArea, Tree, TreeChevron, TreeItem };
+export { Button, Checkbox, Dialog, Input, Label, List, Menu, MenuBar, MenuButton, MenuItem, MenuSeparator, Progress, Radio, Select, Slider, Switch, Tab, TabList, TextArea, Tree, TreeChevron, TreeItem };

package/inputs/Checkbox.svelte

@@ -43,7 +43,7 @@ const inputId = uuid();
   {#if $$slots.label}
     <div class="label">
       <Label {disabled} for={inputId}>
-        <slot name="label" />
+        <slot name="label" {checked} {disabled} />
       </Label>
     </div>
   {/if}
@@ -136,7 +136,7 @@ const inputId = uuid();
     height: 14px;
     left: 50%;
     position: absolute;
-    top: 50%;
+    top: 45%;
     transform: translate(-50%, -50%) rotate(45deg);
     transform-origin: center;
     transition: border-color 250ms;

package/inputs/Checkbox.svelte.d.ts

@@ -30,7 +30,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {};
+        label: {
+            checked: boolean;
+            disabled: boolean;
+        };
     };
 };
 export type CheckboxProps = typeof __propDef.props;

package/inputs/Input.svelte

@@ -113,7 +113,7 @@ const inputId = uuid();
 
   .sterling-input > :global(label) {
     font-size: 0.7em;
-    margin: 0.5em 0.7em;
+    margin: 0.5em 0 0 0.7em;
   }
 
   .sterling-input > :global(label):empty {

package/inputs/Select.svelte

@@ -142,7 +142,6 @@ A single item that can be selected from a popup list of items.
   -->
 <div
   bind:this={selectRef}
-  use:clickOutside
   aria-controls={popupId}
   aria-haspopup="listbox"
   aria-expanded={open}
@@ -150,8 +149,7 @@ A single item that can be selected from a popup list of items.
   class:disabled
   role="combobox"
   tabindex="0"
-  on:click_outside={() => (open = false)}
-  on:click={onSelectClick}
+  use:clickOutside
   on:blur
   on:click
   on:copy
@@ -160,7 +158,6 @@ A single item that can be selected from a popup list of items.
   on:focus
   on:focusin
   on:focusout
-  on:keydown={onSelectKeydown}
   on:keydown
   on:keypress
   on:keyup
@@ -173,6 +170,9 @@ A single item that can be selected from a popup list of items.
   on:mouseup
   on:wheel
   on:paste
+  on:click={onSelectClick}
+  on:click_outside={() => (open = false)}
+  on:keydown={onSelectKeydown}
   {...$$restProps}
 >
   {#if $$slots.label}
@@ -276,7 +276,7 @@ A single item that can be selected from a popup list of items.
 
   .sterling-select > :global(label) {
     font-size: 0.7em;
-    margin: 0.5em 0.7em;
+    margin: 0.5em 0 0 0.7em;
   }
 
   .sterling-select > :global(label):empty {

package/inputs/TextArea.svelte

@@ -39,7 +39,6 @@ $:
     on:focus
     on:focusin
     on:focusout
-    on:input={onInput}
     on:input
     on:invalid
     on:keydown
@@ -56,6 +55,7 @@ $:
     on:submit
     on:reset
     on:wheel
+    on:input={onInput}
     {disabled}
     rows="1"
     {...$$restProps}
@@ -138,7 +138,7 @@ $:
 
   .sterling-text-area > :global(label) {
     font-size: 0.7em;
-    margin: 0.5em 0.7em;
+    margin: 0.5em 0 0 0.7em;
   }
 
   .sterling-text-area > :global(label):empty {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -45,6 +45,7 @@
   "type": "module",
   "dependencies": {
     "@floating-ui/dom": "^1.1.0",
+    "keyborg": "^2.0.0",
     "lodash-es": "^4.17.21",
     "uuid": "^9.0.0"
   },
@@ -52,9 +53,22 @@
     "./package.json": "./package.json",
     "./buttons/Button.svelte": "./buttons/Button.svelte",
     "./buttons/Button.types": "./buttons/Button.types.js",
+    "./buttons/MenuButton.svelte": "./buttons/MenuButton.svelte",
     "./clickOutside": "./clickOutside.js",
     "./containers/List.svelte": "./containers/List.svelte",
     "./containers/ListItem.svelte": "./containers/ListItem.svelte",
+    "./containers/Menu.svelte": "./containers/Menu.svelte",
+    "./containers/MenuBar.svelte": "./containers/MenuBar.svelte",
+    "./containers/MenuItem.svelte": "./containers/MenuItem.svelte",
+    "./containers/MenuItemDisplay.svelte": "./containers/MenuItemDisplay.svelte",
+    "./containers/MenuSeparator.svelte": "./containers/MenuSeparator.svelte",
+    "./containers/Menus.constants": "./containers/Menus.constants.js",
+    "./containers/Menus.types": "./containers/Menus.types.js",
+    "./containers/Menus.utils": "./containers/Menus.utils.js",
+    "./containers/Tab.svelte": "./containers/Tab.svelte",
+    "./containers/TabList.svelte": "./containers/TabList.svelte",
+    "./containers/Tabs.constants": "./containers/Tabs.constants.js",
+    "./containers/Tabs.types": "./containers/Tabs.types.js",
     "./containers/Tree.constants": "./containers/Tree.constants.js",
     "./containers/Tree.svelte": "./containers/Tree.svelte",
     "./containers/Tree.types": "./containers/Tree.types.js",
@@ -64,6 +78,7 @@
     "./display/Label.svelte": "./display/Label.svelte",
     "./display/Progress.svelte": "./display/Progress.svelte",
     "./display/Progress.types": "./display/Progress.types.js",
+    "./forwardEvents": "./forwardEvents.js",
     ".": "./index.js",
     "./inputs/Checkbox.svelte": "./inputs/Checkbox.svelte",
     "./inputs/Input.svelte": "./inputs/Input.svelte",
@@ -73,8 +88,10 @@
     "./inputs/Switch.svelte": "./inputs/Switch.svelte",
     "./inputs/TextArea.svelte": "./inputs/TextArea.svelte",
     "./inputs/TextArea.types": "./inputs/TextArea.types.js",
+    "./portal": "./portal.js",
     "./surfaces/CloseX.svelte": "./surfaces/CloseX.svelte",
     "./surfaces/Dialog.svelte": "./surfaces/Dialog.svelte",
+    "./surfaces/Portal.svelte": "./surfaces/Portal.svelte",
     "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
     "./theme/applyLightTheme": "./theme/applyLightTheme.js",
     "./theme/applyTheme": "./theme/applyTheme.js",

package/portal.d.ts

@@ -0,0 +1,8 @@
+export declare const portal: (node: HTMLElement, params: {
+    target: HTMLElement;
+}) => {
+    update: (params: {
+        target: HTMLElement;
+    }) => void;
+    destroy(): void;
+};

package/portal.js

@@ -0,0 +1,19 @@
+export const portal = (node, params) => {
+    const child = node;
+    let portaled = false;
+    const createPortal = (node, params) => {
+        if (!portaled && params.target && node) {
+            params.target.appendChild(node);
+            portaled = true;
+        }
+    };
+    createPortal(child, params);
+    return {
+        update: (params) => createPortal(child, params),
+        destroy() {
+            if (portaled) {
+                child?.parentNode?.removeChild(child);
+            }
+        }
+    };
+};

package/surfaces/Portal.svelte

@@ -0,0 +1,14 @@
+<script>import { portal } from "../portal";
+export let target = document.body;
+</script>
+
+<div class="portal" use:portal={{ target }}>
+  <slot {...$$restProps} />
+</div>
+
+<style>
+  .portal {
+    position: relative;
+    overflow: visible;
+  }
+</style>

package/surfaces/Portal.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        target?: HTMLElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            [x: string]: any;
+        };
+    };
+};
+export type PortalProps = typeof __propDef.props;
+export type PortalEvents = typeof __propDef.events;
+export type PortalSlots = typeof __propDef.slots;
+export default class Portal extends SvelteComponentTyped<PortalProps, PortalEvents, PortalSlots> {
+}
+export {};