@geoffcox/sterling-svelte 1.0.1 → 1.0.3

package/Callout.svelte

@@ -26,6 +26,8 @@ let popupRef;
 let arrowRef;
 let popupPosition = { x: 0, y: 0 };
 $: floatingUIPlacement = placement;
+let bodyHeight = 0;
+let resizeObserver = undefined;
 // ----- Portal Host ----- //
 const ensurePortalHost = () => {
     if (document) {
@@ -43,11 +45,6 @@ const ensurePortalHost = () => {
     }
 };
 // ----- Body Height Change ----- //
-let bodyHeight = 0;
-// create an Observer instance
-const resizeObserver = new ResizeObserver((entries) => {
-    bodyHeight = entries[0].target.clientHeight;
-});
 // ----- Position ----- //
 $: middleware = [
     offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
@@ -124,10 +121,15 @@ $: fadeMotion = !$prefersReducedMotion ? fade : fadeNoOp;
 // ----- EventHandlers ----- //
 onMount(() => {
     ensurePortalHost();
+    resizeObserver = new ResizeObserver((entries) => {
+        bodyHeight = entries[0].target.clientHeight;
+    });
     // start observing a DOM node
     resizeObserver.observe(document.body);
     return () => {
-        resizeObserver.unobserve(document.body);
+        resizeObserver?.unobserve(document.body);
+        resizeObserver?.disconnect();
+        resizeObserver = undefined;
     };
 });
 const onKeydown = (event) => {

package/Dropdown.svelte

@@ -113,12 +113,16 @@ $: slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
   on:click_outside={onClickOutside}
   {...$$restProps}
 >
-  <div class="value">
-    <slot name="value" {disabled} {open} {variant} />
-  </div>
+  {#if $$slots.value}
+    <div class="value">
+      <slot name="value" {disabled} {open} {variant} />
+    </div>
+  {/if}
   <slot name="button" {disabled} {open} {variant}>
     <div class="button">
-      <div class="chevron" />
+      <slot name="icon" {disabled} {open} {variant}>
+        <div class="chevron" />
+      </slot>
     </div>
   </slot>
 

package/Dropdown.svelte.d.ts

@@ -52,6 +52,11 @@ declare const __propDef: {
             open: boolean;
             variant: string;
         };
+        icon: {
+            disabled: boolean;
+            open: boolean;
+            variant: string;
+        };
         default: {
             disabled: boolean;
             open: boolean;

package/Input.svelte

@@ -40,7 +40,7 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
 </script>
 
 {#if $$slots.default}
-  <label class={`sterling-input-label ${variant}`} for={id}>
+  <label class={`sterling-input-label ${variant}`} class:disabled for={id}>
     <slot {disabled} {value} {variant} />
   </label>
 {/if}

package/MenuButton.svelte

@@ -13,6 +13,8 @@ export let open = false;
 export let value;
 /** Additional class names to apply. */
 export let variant = '';
+/** Additional class names to apply to the Menu*/
+export let menuVariant = '';
 // ----- State ----- //
 const instanceId = idGenerator.nextId('MenuButton');
 let buttonRef;
@@ -144,8 +146,8 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
     <slot {open} {value} {variant} />
   </div>
   <Popover {reference} {open}>
-    <Menu bind:this={menuRef} id={menuId} {reference} {open}>
-      <slot name="items" {variant} />
+    <Menu bind:this={menuRef} id={menuId} {reference} {open} variant={menuVariant}>
+      <slot name="items" />
     </Menu>
   </Popover>
 </Button>

package/MenuButton.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         open?: boolean | undefined;
         value: string;
         variant?: string | undefined;
+        menuVariant?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -53,9 +54,7 @@ declare const __propDef: {
             value: string;
             variant: string;
         };
-        items: {
-            variant: string;
-        };
+        items: {};
     };
 };
 export type MenuButtonProps = typeof __propDef.props;

package/MenuItem.svelte

@@ -24,6 +24,8 @@ export let text = undefined;
 export let value;
 /** Additional class names to apply. */
 export let variant = '';
+/** Additional class names to apply to the sub Menu*/
+export let menuVariant = '';
 // ----- Get Context ----- //
 const { isMenuBarItem, openValues = writable([]), rootValue = value, depth = 0, closeContainingMenu = undefined, onOpen = undefined, onClose = undefined, onSelect = undefined } = getContext(MENU_ITEM_CONTEXT_KEY) || {};
 const { openPreviousMenuBarItem = undefined, openNextMenuBarItem = undefined } = getContext(MENU_BAR_CONTEXT_KEY) || {};
@@ -376,7 +378,7 @@ setContext(MENU_ITEM_CONTEXT_KEY, {
       placement={isMenuBarItem ? 'bottom-start' : 'right-start'}
       {open}
     >
-      <Menu bind:this={menuRef} id={menuId}>
+      <Menu bind:this={menuRef} id={menuId} variant={menuVariant}>
         <slot {depth} {disabled} />
       </Menu>
     </Popover>

package/MenuItem.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         text?: string | undefined;
         value: string;
         variant?: string | undefined;
+        menuVariant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;

package/Popover.svelte

@@ -23,6 +23,8 @@ export let variant = '';
 let popupRef;
 let popupPosition = { x: 0, y: 0 };
 $: floatingUIPlacement = placement;
+let bodyHeight = 0;
+let resizeObserver = undefined;
 // ----- Portal Host ----- //
 const ensurePortalHost = () => {
     if (document) {
@@ -39,12 +41,6 @@ const ensurePortalHost = () => {
         portalHost = host;
     }
 };
-// ----- Body Height Change ----- //
-let bodyHeight = 0;
-// create an Observer instance
-const resizeObserver = new ResizeObserver((entries) => {
-    bodyHeight = entries[0].target.clientHeight;
-});
 // ----- Position ----- //
 $: middleware = [offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }), flip()];
 const computePopoverPosition = async () => {
@@ -71,10 +67,15 @@ $: open, bodyHeight, middleware, floatingUIPlacement, computePopoverPosition();
 // ----- EventHandlers ----- //
 onMount(() => {
     ensurePortalHost();
+    resizeObserver = new ResizeObserver((entries) => {
+        bodyHeight = entries[0].target.clientHeight;
+    });
     // start observing a DOM node
     resizeObserver.observe(document.body);
     return () => {
-        resizeObserver.unobserve(document.body);
+        resizeObserver?.unobserve(document.body);
+        resizeObserver?.disconnect();
+        resizeObserver = undefined;
     };
 });
 const onKeydown = (event) => {

package/Select.svelte

@@ -12,6 +12,8 @@ export let open = false;
 export let selectedValue = undefined;
 /** Additional class names to apply. */
 export let variant = '';
+/** Additional class names to apply to the List*/
+export let listVariant = '';
 // ----- State ----- //
 // Tracks the previous open state
 let prevOpen = false;
@@ -209,7 +211,9 @@ const onListSelect = (event) => {
   </div>
   <div class="button">
     <slot name="button" {disabled} {open} {selectedValue} {variant}>
-      <div class="chevron" />
+      <slot name="icon" {disabled} {open} {selectedValue} {variant}>
+        <div class="chevron" />
+      </slot>
     </slot>
   </div>
   <Popover reference={selectRef} bind:open id={popupId} conditionalRender={false}>
@@ -222,9 +226,9 @@ const onListSelect = (event) => {
         on:keydown={onListKeydown}
         on:select={onListSelect}
         tabIndex={open ? 0 : -1}
-        variant={`composed ${variant}`}
+        variant={`composed ${listVariant}`}
       >
-        <slot {variant} />
+        <slot {variant} {listVariant} />
       </List>
     </div>
   </Popover>

package/Select.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         open?: boolean | undefined;
         selectedValue?: string | undefined;
         variant?: string | undefined;
+        listVariant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -56,8 +57,15 @@ declare const __propDef: {
             selectedValue: string | undefined;
             variant: string;
         };
+        icon: {
+            disabled: boolean;
+            open: boolean;
+            selectedValue: string | undefined;
+            variant: string;
+        };
         default: {
             variant: string;
+            listVariant: string;
         };
     };
 };

package/css/Input.base.css

@@ -84,7 +84,7 @@ input::placeholder {
 
 /* ----- label ----- */
 
-label {
+.sterling-input-label {
   color: var(--stsv-common__color);
   transition: color 250ms;
   font: inherit;
@@ -94,7 +94,7 @@ label {
 
 @media (prefers-reduced-motion) {
   .sterling-input::after,
-  input {
+  .sterling-input-label {
     transition: none;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",