@geoffcox/sterling-svelte 0.0.13 → 0.0.14

package/inputs/Input.svelte

@@ -11,11 +11,9 @@ const inputId = uuid();
 -->
 <div class="sterling-input">
   {#if $$slots.label}
-    <div class="label">
-      <Label {disabled} for={inputId}>
-        <slot name="label" />
-      </Label>
-    </div>
+    <Label {disabled} for={inputId}>
+      <slot name="label" />
+    </Label>
   {/if}
   <input
     bind:value
@@ -113,9 +111,13 @@ const inputId = uuid();
     color: var(--Display__color--disabled);
   }
 
-  .label {
+  .sterling-input > :global(label) {
     font-size: 0.7em;
-    margin: 0.5em 0 0 0.7em;
+    margin: 0.5em 0.7em;
+  }
+
+  .sterling-input > :global(label):empty {
+    margin: 0;
   }
 
   @media (prefers-reduced-motion) {

package/inputs/Select.svelte

@@ -3,7 +3,7 @@ import { v4 as uuid } from "uuid";
 import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
 import { clickOutside } from "../clickOutside";
 import Label from "../display/Label.svelte";
-import List from "../lists/List.svelte";
+import List from "../containers/List.svelte";
 import Input from "./Input.svelte";
 export let disabled = false;
 export let items = [];
@@ -130,7 +130,6 @@ const onListClick = (event) => {
 };
 const onPendingItemSelected = (event) => {
   pendingSelectedIndex = event.detail.index;
-  console.log("pendingSelectedIndex changed");
   if (!open) {
     selectedIndex = pendingSelectedIndex;
   }
@@ -177,11 +176,16 @@ A single item that can be selected from a popup list of items.
   {...$$restProps}
 >
   {#if $$slots.label}
-    <div class="label">
-      <Label {disabled} for={inputId}>
-        <slot name="label" />
-      </Label>
-    </div>
+    <Label {disabled} for={inputId}>
+      <!-- BUGBUG: Problem with slot let params conflict
+        It seems that when a default slot is used multiple times in a module,
+        the first time sets the possible let params.
+        If we don't define the same let params on this label slot that 
+        is the default slot for label, then using the default slot for list
+        will error saying the property is not defined.
+      -->
+      <slot name="label" index={0} item={undefined} selected={false} />
+    </Label>
   {/if}
   <div class="input" id={inputId}>
     <div class="value">
@@ -204,21 +208,19 @@ A single item that can be selected from a popup list of items.
   >
     <div class="popup-content">
       <slot name="list">
-        {#if $$slots.default === true}
+        {#if $$slots.default}
           <List
             bind:this={listRef}
             selectedIndex={pendingSelectedIndex}
             {items}
             {disabled}
-            let:disabled
-            let:index
-            let:item
-            let:selected
             on:click={onListClick}
             on:keydown={onListKeydown}
             on:itemSelected={onPendingItemSelected}
           >
-            <slot {disabled} {index} {item} {selected} />
+            <svelte:fragment let:disabled let:index let:item let:selected>
+              <slot {disabled} {index} {item} {selected} />
+            </svelte:fragment>
           </List>
         {:else}
           <List
@@ -226,10 +228,6 @@ A single item that can be selected from a popup list of items.
             selectedIndex={pendingSelectedIndex}
             {items}
             {disabled}
-            let:disabled
-            let:index
-            let:item
-            let:selected
             on:click={onListClick}
             on:keydown={onListKeydown}
             on:itemSelected={onPendingItemSelected}
@@ -276,9 +274,13 @@ A single item that can be selected from a popup list of items.
     outline: none;
   }
 
-  .label {
+  .sterling-select > :global(label) {
     font-size: 0.7em;
-    margin: 0.5em 0.7em 0 0.7em;
+    margin: 0.5em 0.7em;
+  }
+
+  .sterling-select > :global(label):empty {
+    margin: 0;
   }
 
   .input {

package/inputs/Select.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
+declare class __sveltets_Render<T> {
+    props(): {
         [x: string]: any;
         disabled?: boolean | undefined;
-        items?: any[] | undefined;
+        items?: T[] | undefined;
         open?: boolean | undefined;
         selectedIndex?: number | undefined;
-        selectedItem?: any;
+        selectedItem?: T | undefined;
     };
-    events: {
+    events(): {
         blur: FocusEvent;
         click: MouseEvent;
         copy: ClipboardEvent;
@@ -34,8 +34,12 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        label: {};
+    slots(): {
+        label: {
+            index: number;
+            item: undefined;
+            selected: boolean;
+        };
         value: {};
         button: {
             open: boolean;
@@ -48,11 +52,11 @@ declare const __propDef: {
             selected: any;
         };
     };
-};
-export type SelectProps = typeof __propDef.props;
-export type SelectEvents = typeof __propDef.events;
-export type SelectSlots = typeof __propDef.slots;
+}
+export type SelectProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type SelectEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type SelectSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 /** A single item that can be selected from a popup list of items. */
-export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
+export default class Select<T> extends SvelteComponentTyped<SelectProps<T>, SelectEvents<T>, SelectSlots<T>> {
 }
 export {};

package/inputs/Slider.svelte

@@ -126,11 +126,9 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
 -->
 <div class="sterling-slider" class:vertical>
   {#if $$slots.label}
-    <div class="label">
-      <Label {disabled} for={inputId}>
-        <slot name="label" />
-      </Label>
-    </div>
+    <Label {disabled} for={inputId}>
+      <slot name="label" />
+    </Label>
   {/if}
   <div
     class="slider"
@@ -174,7 +172,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     height: 100%;
   }
 
-  .label {
+  .sterling-slider > :global(label) {
     font-size: 0.7em;
   }
 

package/inputs/TextArea.svelte

@@ -21,11 +21,9 @@ $:
 
 <div class="sterling-text-area" style={`--TextArea__resize: ${resize};`}>
   {#if $$slots.label}
-    <div class="label">
-      <Label {disabled} for={inputId}>
-        <slot name="label" />
-      </Label>
-    </div>
+    <Label {disabled} for={inputId}>
+      <slot name="label" />
+    </Label>
   {/if}
   <textarea
     {...$$restProps}
@@ -138,9 +136,13 @@ $:
     color: var(--Display__color--disabled);
   }
 
-  .label {
+  .sterling-text-area > :global(label) {
     font-size: 0.7em;
-    margin: 0.5em 0 0 0.7em;
+    margin: 0.5em 0.7em;
+  }
+
+  .sterling-text-area > :global(label):empty {
+    margin: 0;
   }
 
   @media (prefers-reduced-motion) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "author": "Geoff Cox",
   "description": "A modern, accessible, and lightweight component library for Svelte.",
   "license": "MIT",
@@ -53,6 +53,14 @@
     "./buttons/Button.svelte": "./buttons/Button.svelte",
     "./buttons/Button.types": "./buttons/Button.types.js",
     "./clickOutside": "./clickOutside.js",
+    "./containers/List.svelte": "./containers/List.svelte",
+    "./containers/ListItem.svelte": "./containers/ListItem.svelte",
+    "./containers/Tree.constants": "./containers/Tree.constants.js",
+    "./containers/Tree.svelte": "./containers/Tree.svelte",
+    "./containers/Tree.types": "./containers/Tree.types.js",
+    "./containers/TreeChevron.svelte": "./containers/TreeChevron.svelte",
+    "./containers/TreeItem.svelte": "./containers/TreeItem.svelte",
+    "./containers/TreeNode.svelte": "./containers/TreeNode.svelte",
     "./display/Label.svelte": "./display/Label.svelte",
     "./display/Progress.svelte": "./display/Progress.svelte",
     "./display/Progress.types": "./display/Progress.types.js",
@@ -65,7 +73,6 @@
     "./inputs/Switch.svelte": "./inputs/Switch.svelte",
     "./inputs/TextArea.svelte": "./inputs/TextArea.svelte",
     "./inputs/TextArea.types": "./inputs/TextArea.types.js",
-    "./lists/List.svelte": "./lists/List.svelte",
     "./surfaces/CloseX.svelte": "./surfaces/CloseX.svelte",
     "./surfaces/Dialog.svelte": "./surfaces/Dialog.svelte",
     "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",

package/surfaces/Dialog.svelte

@@ -51,7 +51,6 @@ const onCancel = (event) => {
   return false;
 };
 const onSubmit = (event) => {
-  console.log(event);
   const anyEvent = event;
   if (anyEvent?.submitter.type === "submit") {
     if (dialogRef.open) {
@@ -63,7 +62,6 @@ const onSubmit = (event) => {
       return false;
     }
   } else {
-    console.log("cancelling");
     event.preventDefault();
     return false;
   }