@geoffcox/sterling-svelte 0.0.6 → 0.0.7

package/@types/clickOutside.d.ts

@@ -0,0 +1,5 @@
+declare namespace svelte.JSX {
+	interface DOMAttributes<T> {
+		onclick_outside?: (e: CustomEvent) => void;
+	}
+}

package/index.d.ts

@@ -7,8 +7,11 @@ export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 export { type ButtonVariant, type ButtonShape } from './buttons/types';
+export { clickOutside } from './clickOutside';
 import Button from './buttons/Button.svelte';
 import Input from './inputs/Input.svelte';
+import List from './lists/List.svelte';
 import Checkbox from './inputs/Checkbox.svelte';
 import Radio from './inputs/Radio.svelte';
-export { Button, Checkbox, Input, Radio };
+import Select from './inputs/Select.svelte';
+export { Button, Checkbox, Input, List, Radio, Select };

package/index.js

@@ -7,8 +7,11 @@ export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
 export {} from './buttons/types';
+export { clickOutside } from './clickOutside';
 import Button from './buttons/Button.svelte';
 import Input from './inputs/Input.svelte';
+import List from './lists/List.svelte';
 import Checkbox from './inputs/Checkbox.svelte';
 import Radio from './inputs/Radio.svelte';
-export { Button, Checkbox, Input, Radio };
+import Select from './inputs/Select.svelte';
+export { Button, Checkbox, Input, List, Radio, Select };

package/inputs/Input.svelte

@@ -90,6 +90,7 @@ export let disabled = false;
 		font-size: 0.7em;
 		margin: 0.5em 0 0 0.7em;
 		color: var(--Display__color--subtle);
+		transition: background-color 250ms, color 250ms, border-color 250ms;
 	}
 
 	.label-content.disabled {
@@ -151,6 +152,7 @@ export let disabled = false;
 
 	.sterling-input::placeholder {
 		color: var(--Display__color--faint);
+		transition: background-color 250ms, color 250ms, border-color 250ms;
 	}
 
 	.sterling-input:disabled::placeholder {

package/inputs/Radio.svelte

@@ -156,6 +156,7 @@ $: {
 
 	.label-content {
 		color: var(--Input__color);
+		transition: background-color 250ms, color 250ms, border-color 250ms;
 	}
 
 	.label-content.disabled {

package/inputs/Select.svelte

@@ -137,8 +137,7 @@ const onPendingItemSelected = (event) => {
 
 <!--
 @component
-Pops up a list of items when clicked. 
-A single item can be selected and is displayed as the value.
+A single item that can be selected from a popup list of items.
   -->
 <div
 	bind:this={selectRef}
@@ -178,7 +177,7 @@ A single item can be selected and is displayed as the value.
 	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label class="sterling-select-label">
 		{#if $$slots.label}
-			<div class="label-content">
+			<div class="label-content" class:disabled>
 				<slot name="label" />
 			</div>
 		{/if}
@@ -189,7 +188,7 @@ A single item can be selected and is displayed as the value.
 				</slot>
 			</div>
 			<div class="button">
-				<slot name="button">
+				<slot name="button" {open}>
 					<div class="chevron" />
 				</slot>
 			</div>
@@ -241,6 +240,15 @@ A single item can be selected and is displayed as the value.
 </div>
 
 <style>
+	/* 
+		sterling-select
+			sterling-select-label
+				label-content
+			input
+				value
+				button
+			(popup)
+	 */
 	.sterling-select {
 		background-color: var(--Input__background-color);
 		border-color: var(--Input__border-color);
@@ -248,10 +256,7 @@ A single item can be selected and is displayed as the value.
 		border-style: var(--Input__border-style);
 		border-width: var(--Input__border-width);
 		color: var(--Input__color);
-		display: flex;
-		flex-direction: row;
 		padding: 0;
-		position: relative;
 		transition: background-color 250ms, color 250ms, border-color 250ms;
 	}
 
@@ -279,21 +284,23 @@ A single item can be selected and is displayed as the value.
 		outline: none;
 	}
 
-	.label {
-		display: flex;
-		flex-direction: column;
-	}
-
 	.label-content {
 		font-size: 0.7em;
 		margin: 0.5em 0.7em 0 0.7em;
 		color: var(--Display__color--subtle);
+		transition: background-color 250ms, color 250ms, border-color 250ms;
+	}
+
+	.label-content.disabled {
+		color: var(--Display__color--disabled);
 	}
 
 	.input {
-		display: flex;
-		flex-direction: row;
-		align-items: stretch;
+		display: grid;
+		grid-template-columns: 1fr auto;
+		grid-template-rows: auto;
+		align-content: center;
+		align-items: center;
 	}
 
 	.value {
@@ -341,8 +348,7 @@ A single item can be selected and is displayed as the value.
 		display: none;
 		overflow: hidden;
 		position: absolute;
-		box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
-			rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+		box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
 		width: fit-content;
 		height: fit-content;
 		z-index: 1;

package/inputs/Select.svelte.d.ts

@@ -37,7 +37,9 @@ declare const __propDef: {
     slots: {
         label: {};
         value: {};
-        button: {};
+        button: {
+            open: boolean;
+        };
         list: {};
         default: {
             disabled: boolean;
@@ -50,10 +52,7 @@ declare const __propDef: {
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;
 export type SelectSlots = typeof __propDef.slots;
-/**
- * Pops up a list of items when clicked.
- * A single item can be selected and is displayed as the value.
- */
+/** A single item that can be selected from a popup list of items. */
 export default class Select extends SvelteComponentTyped<SelectProps, SelectEvents, SelectSlots> {
 }
 export {};

package/lists/List.svelte

@@ -93,7 +93,7 @@ A list of items where a single item can be selected.
 {#if $$slots.label}
 	<!-- svelte-ignore a11y-label-has-associated-control -->
 	<label class="sterling-list-label" class:horizontal class:disabled>
-		<div class="label-content">
+		<div class="label-content" class:disabled>
 			<slot name="label" />
 		</div>
 		<div
@@ -265,6 +265,7 @@ A list of items where a single item can be selected.
 		cursor: not-allowed;
 	}
 
+	/* The background, border, and outline are removed when labeled as the label provides them  */
 	.sterling-list.labeled,
 	.sterling-list.labeled:hover,
 	.sterling-list.labeled:focus-visible,
@@ -284,6 +285,13 @@ A list of items where a single item can be selected.
 		font-size: 0.7em;
 		margin: 0.5em 0.7em;
 		color: var(--Display__color--subtle);
+		transition: background-color 250ms, color 250ms, border-color 250ms;
+	}
+
+	.label-content.disabled {
+		font-size: 0.7em;
+		margin: 0.5em 0.7em;
+		color: var(--Display__color--disabled);
 	}
 
 	.list-item {
@@ -293,7 +301,7 @@ A list of items where a single item can be selected.
 		padding: 0.5em;
 		outline: none;
 		text-overflow: ellipsis;
-		transition: background-color 150ms, color 150ms;
+		transition: background-color 250ms, color 250ms, border-color 250ms;
 		white-space: nowrap;
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "devDependencies": {
     "@fontsource/fira-mono": "^4.5.10",
     "@fontsource/overpass": "^4.5.10",
@@ -9,6 +9,7 @@
     "@sveltejs/adapter-static": "^1.0.0",
     "@sveltejs/kit": "^1.0.0",
     "@sveltejs/package": "^1.0.0",
+    "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
     "eslint": "^8.28.0",