@geoffcox/sterling-svelte 0.0.7 → 0.0.9

package/buttons/Button.svelte

@@ -7,153 +7,160 @@ export let shape = "rounded";
 	A styled HTML button element.
 -->
 <button
-	class="sterling-button"
-	class:square={shape === 'square'}
-	class:circular={shape === 'circular'}
-	class:outline={variant === 'outline'}
-	class:ghost={variant === 'ghost'}
-	on:blur
-	on:click
-	on:dblclick
-	on:focus
-	on:focusin
-	on:focusout
-	on:keydown
-	on:keypress
-	on:keyup
-	on:mousedown
-	on:mouseenter
-	on:mouseleave
-	on:mousemove
-	on:mouseover
-	on:mouseout
-	on:mouseup
-	on:pointercancel
-	on:pointerdown
-	on:pointerenter
-	on:pointerleave
-	on:pointermove
-	on:pointerover
-	on:pointerout
-	on:pointerup
-	on:wheel
-	{...$$restProps}
+  class="sterling-button"
+  class:square={shape === 'square'}
+  class:circular={shape === 'circular'}
+  class:outline={variant === 'outline'}
+  class:ghost={variant === 'ghost'}
+  type="button"
+  on:blur
+  on:click
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:pointercancel
+  on:pointerdown
+  on:pointerenter
+  on:pointerleave
+  on:pointermove
+  on:pointerover
+  on:pointerout
+  on:pointerup
+  on:wheel
+  {...$$restProps}
 >
-	<slot />
+  <slot />
 </button>
 
 <style>
-	button {
-		background-color: var(--Button__background-color);
-		border-color: var(--Button__border-color);
-		border-radius: var(--Button__border-radius);
-		border-style: var(--Button__border-style);
-		border-width: var(--Button__border-width);
-		box-sizing: border-box;
-		color: var(--Button__color);
-		cursor: pointer;
-		display: inline-flex;
-		flex-direction: row;
-		font: inherit;
-		align-content: center;
-		align-items: center;
-		justify-content: center;
-		justify-items: center;
-		column-gap: 0.25em;
-		overflow: hidden;
-		padding: 0.5em 1em;
-		text-decoration: none;
-		text-overflow: ellipsis;
-		transition: background-color 250ms, color 250ms, border-color 250ms;
-		white-space: nowrap;
-		user-select: none;
-	}
-
-	button.vertical {
-		flex-direction: column;
-		row-gap: 0.15em;
-	}
-
-	button.circular {
-		border-radius: 10000px;
-		padding: 0.5em;
-	}
-
-	button.square {
-		border-radius: 0;
-	}
-
-	button:hover {
-		background-color: var(--Button__background-color--hover);
-		border-color: var(--Button__border-color--hover);
-		color: var(--Button__color--hover);
-	}
-
-	button:active {
-		background-color: var(--Button__background-color--active);
-		border-color: var(--Button__border-color--active);
-		color: var(--Button__color--active);
-	}
-
-	button:focus-visible {
-		border-color: var(--Button__border-color--focus);
-		outline-color: var(--Common__outline-color);
-		outline-offset: var(--Common__outline-offset);
-		outline-style: var(--Common__outline-style);
-		outline-width: var(--Common__outline-width);
-	}
-
-	button:disabled {
-		background-color: var(--Button__background-color--disabled);
-		border-color: var(--Button__border-color--disabled);
-		color: var(--Button__color--disabled);
-		cursor: not-allowed;
-	}
-
-	button.outline {
-		background-color: transparent;
-	}
-
-	button.outline:hover {
-		background-color: var(--Button__background-color--hover);
-	}
-
-	button.outline:active {
-		background-color: var(--Button__background-color--active);
-	}
-
-	button.outline:disabled {
-		background-color: transparent;
-	}
-
-	button.outline:disabled:hover {
-		border-color: var(--Button__border-color--disabled);
-	}
-
-	button.ghost {
-		background-color: transparent;
-		border-color: transparent;
-	}
-
-	button.ghost:hover {
-		background-color: var(--Button__background-color--hover);
-		border-color: transparent;
-	}
-
-	button.ghost:active {
-		background-color: var(--Button__background-color--active);
-		border-color: transparent;
-	}
-
-	button.ghost:focus-visible {
-		border-color: var(--Button__border-color--focus);
-	}
-
-	button.ghost:disabled {
-		border-color: transparent;
-	}
-
-	button.ghost:disabled:hover {
-		background-color: var(--Button__background-color--disabled);
-	}
+  button {
+    align-content: center;
+    align-items: center;
+    background-color: var(--Button__background-color);
+    border-color: var(--Button__border-color);
+    border-radius: var(--Button__border-radius);
+    border-style: var(--Button__border-style);
+    border-width: var(--Button__border-width);
+    box-sizing: border-box;
+    color: var(--Button__color);
+    cursor: pointer;
+    display: inline-flex;
+    flex-direction: row;
+    font: inherit;
+    justify-content: center;
+    justify-items: center;
+    column-gap: 0.25em;
+    overflow: hidden;
+    padding: 0.5em 1em;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  button.vertical {
+    flex-direction: column;
+    row-gap: 0.15em;
+  }
+
+  button.circular {
+    border-radius: 10000px;
+    padding: 0.5em;
+  }
+
+  button.square {
+    border-radius: 0;
+  }
+
+  button:hover {
+    background-color: var(--Button__background-color--hover);
+    border-color: var(--Button__border-color--hover);
+    color: var(--Button__color--hover);
+  }
+
+  button:active {
+    background-color: var(--Button__background-color--active);
+    border-color: var(--Button__border-color--active);
+    color: var(--Button__color--active);
+  }
+
+  button:focus-visible {
+    border-color: var(--Button__border-color--focus);
+    outline-color: var(--Common__outline-color);
+    outline-offset: var(--Common__outline-offset);
+    outline-style: var(--Common__outline-style);
+    outline-width: var(--Common__outline-width);
+  }
+
+  button:disabled {
+    background-color: var(--Button__background-color--disabled);
+    border-color: var(--Button__border-color--disabled);
+    color: var(--Button__color--disabled);
+    cursor: not-allowed;
+  }
+
+  button.outline {
+    background-color: transparent;
+  }
+
+  button.outline:hover {
+    background-color: var(--Button__background-color--hover);
+  }
+
+  button.outline:active {
+    background-color: var(--Button__background-color--active);
+  }
+
+  button.outline:disabled {
+    background-color: transparent;
+  }
+
+  button.outline:disabled:hover {
+    border-color: var(--Button__border-color--disabled);
+  }
+
+  button.ghost {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  button.ghost:hover {
+    background-color: var(--Button__background-color--hover);
+    border-color: transparent;
+  }
+
+  button.ghost:active {
+    background-color: var(--Button__background-color--active);
+    border-color: transparent;
+  }
+
+  button.ghost:focus-visible {
+    border-color: var(--Button__border-color--focus);
+  }
+
+  button.ghost:disabled {
+    border-color: transparent;
+  }
+
+  button.ghost:disabled:hover {
+    background-color: var(--Button__background-color--disabled);
+  }
+
+  @media (prefers-reduced-motion) {
+    button {
+      transition: none;
+    }
+  }
 </style>

package/buttons/Button.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ButtonShape, ButtonVariant } from './types';
+import type { ButtonShape, ButtonVariant } from './Button.types';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/display/Progress.svelte

@@ -0,0 +1,182 @@
+<script>export let value = 0;
+export let max = 100;
+export let percent = 0;
+export let vertical = false;
+export let colorful = "none";
+export let disabled = false;
+let clientHeight;
+let clientWidth;
+$:
+  clampMax = Math.max(1, max);
+$:
+  clampValue = Math.max(0, Math.min(value, clampMax));
+$:
+  ratio = clampValue / clampMax;
+$: {
+  percent = Math.round(ratio * 100);
+}
+$:
+  percentHeight = clientHeight * ratio;
+$:
+  percentWidth = clientWidth * ratio;
+$:
+  indicatorStyle = vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`;
+$:
+  indicatorColor = colorful === "auto" ? percent === 100 ? "success" : "progress" : colorful;
+</script>
+
+<!--
+	@component
+	An indicator of a value between 0 and a maximum value.ß
+	Does not use the HTML progress element.
+-->
+<!-- svelte-ignore a11y-label-has-associated-control -->
+
+<div
+	class="sterling-progress"
+	class:disabled
+	class:vertical
+	on:click
+	on:dblclick
+	on:focus
+	on:blur
+	on:mousedown
+	on:mouseenter
+	on:mouseleave
+	on:mousemove
+	on:mouseover
+	on:mouseout
+	on:mouseup
+	on:wheel
+	{...$$restProps}
+>
+	{#if $$slots.label}
+		<div class="label-content" class:disabled>
+			<slot name="label" />
+		</div>
+	{/if}
+	<div class="progress-bar">
+		<div class="container" bind:clientWidth bind:clientHeight>
+			<div
+				class="indicator"
+				class:progress={indicatorColor === 'progress'}
+				class:success={indicatorColor === 'success'}
+				class:warning={indicatorColor === 'warning'}
+				class:error={indicatorColor === 'error'}
+				style={indicatorStyle}
+			/>
+		</div>
+	</div>
+</div>
+
+<style>
+	.sterling-progress {
+		display: flex;
+		flex-direction: column;
+		align-content: flex-start;
+		align-items: flex-start;
+	}
+
+	.label-content {
+		font-size: 0.7em;
+		margin: 0.5em 0;
+		color: var(--Display__color--subtle);
+		transition: background-color 250ms, color 250ms, border-color 250ms;
+	}
+
+	.progress-bar {
+		display: block;
+		background: var(--Common__background-color);
+		box-sizing: border-box;
+		height: 1em;
+		padding: 0.2em;
+		border-width: var(--Common__border-width);
+		border-style: var(--Common__border-style);
+		border-color: var(--Common__border-color);
+		border-radius: var(--Common__border-radius);
+		transition: background-color 250ms, color 250ms, border-color 250ms;
+	}
+
+	.container {
+		display: flex;
+		justify-content: flex-start;
+		width: 100%;
+		height: 100%;
+		min-width: 100px;
+	}
+
+	.indicator {
+		background-color: var(--Display__color);
+		box-sizing: border-box;
+		height: 100%;
+		min-height: 1px;
+		transition: background-color 250ms, color 250ms, border-color 250ms;
+	}
+
+	/* ----- Vertical ----- */
+
+	.sterling-progress.vertical {
+		align-items: center;
+		align-content: center;
+	}
+
+	.sterling-progress.vertical .progress-bar {
+		height: unset;
+		width: 1em;
+	}
+
+	.sterling-progress.vertical .container {
+		flex-direction: column;
+		justify-content: flex-end;
+		min-width: unset;
+		min-height: 100px;
+	}
+
+	.sterling-progress.vertical .indicator {
+		height: unset;
+		min-height: unset;
+		min-width: 1px;
+		width: 100%;
+	}
+
+	/* ----- Colorful ----- */
+
+	.indicator.progress {
+		background-color: var(--Display__color--progress);
+	}
+
+	.indicator.success {
+		background-color: var(--Display__color--success);
+	}
+
+	.indicator.warning {
+		background-color: var(--Display__color--warning);
+	}
+
+	.indicator.error {
+		background-color: var(--Display__color--error);
+	}
+
+	/* ----- Disabled ----- */
+
+	.label-content.disabled {
+		color: var(--Display__color--disabled);
+	}
+
+	.sterling-progress.disabled .progress-bar {
+		background: var(--Common__background-color--disabled);
+		border-color: var(--Common__border-color--disabled);
+	}
+
+	.sterling-progress.disabled .indicator {
+		background-color: var(--Display__color--disabled);
+	}
+
+	@media (prefers-reduced-motion) {
+		.progress-bar,
+		.indicator,
+		.label-content {
+			transition: none;
+		}
+	}
+</style>

package/display/Progress.svelte.d.ts

@@ -0,0 +1,42 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ProgressColorful } from './Progress.types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: number | undefined;
+        max?: number | undefined;
+        percent?: number | undefined;
+        vertical?: boolean | undefined;
+        colorful?: ProgressColorful | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        dblclick: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        wheel: WheelEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {};
+    };
+};
+export type ProgressProps = typeof __propDef.props;
+export type ProgressEvents = typeof __propDef.events;
+export type ProgressSlots = typeof __propDef.slots;
+/**
+ * An indicator of a value between 0 and a maximum value.ß
+ * Does not use the HTML progress element.
+ */
+export default class Progress extends SvelteComponentTyped<ProgressProps, ProgressEvents, ProgressSlots> {
+}
+export {};

package/display/Progress.types.d.ts

@@ -0,0 +1 @@
+export type ProgressColorful = 'none' | 'auto' | 'progress' | 'success' | 'warning' | 'error';

package/display/Progress.types.js

@@ -0,0 +1 @@
+export {};

package/index.d.ts

@@ -6,12 +6,16 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-export { type ButtonVariant, type ButtonShape } from './buttons/types';
+export { type ButtonVariant, type ButtonShape } from './buttons/Button.types';
+export { type ProgressColorful } from './display/Progress.types';
 export { clickOutside } from './clickOutside';
 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 List from './lists/List.svelte';
-import Checkbox from './inputs/Checkbox.svelte';
+import Progress from './display/Progress.svelte';
 import Radio from './inputs/Radio.svelte';
 import Select from './inputs/Select.svelte';
-export { Button, Checkbox, Input, List, Radio, Select };
+import Slider from './inputs/Slider.svelte';
+export { Button, Checkbox, Dialog, Input, List, Progress, Radio, Select, Slider };

package/index.js

@@ -6,12 +6,16 @@ export { darkTheme } from './theme/darkTheme';
 export { lightTheme } from './theme/lightTheme';
 export { neutrals } from './theme/colors';
 export { toggleDarkTheme } from './theme/toggleDarkTheme';
-export {} from './buttons/types';
+export {} from './buttons/Button.types';
+export {} from './display/Progress.types';
 export { clickOutside } from './clickOutside';
 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 List from './lists/List.svelte';
-import Checkbox from './inputs/Checkbox.svelte';
+import Progress from './display/Progress.svelte';
 import Radio from './inputs/Radio.svelte';
 import Select from './inputs/Select.svelte';
-export { Button, Checkbox, Input, List, Radio, Select };
+import Slider from './inputs/Slider.svelte';
+export { Button, Checkbox, Dialog, Input, List, Progress, Radio, Select, Slider };

package/inputs/Checkbox.svelte

@@ -148,4 +148,12 @@ export let disabled = false;
 	.label-content.disabled {
 		color: var(--Input__color--disabled);
 	}
+
+	@media (prefers-reduced-motion) {
+		.indicator,
+		input:checked + .indicator::after,
+		.label-content {
+			transition: none;
+		}
+	}
 </style>

package/inputs/Input.svelte

@@ -138,7 +138,6 @@ export let disabled = false;
 
 	.sterling-input {
 		padding: 0.5em 0.5em;
-		transition: background-color 250ms, color 250ms, border-color 250ms;
 	}
 
 	.sterling-input.labeled,
@@ -158,4 +157,13 @@ export let disabled = false;
 	.sterling-input:disabled::placeholder {
 		color: var(--Display__color--disabled);
 	}
+
+	@media (prefers-reduced-motion) {
+		.sterling-input-label,
+		.sterling-input,
+		.label-content,
+		.sterling-input::placeholder {
+			transition: none;
+		}
+	}
 </style>

package/inputs/Radio.svelte

@@ -162,4 +162,12 @@ $: {
 	.label-content.disabled {
 		color: var(--Input__color--disabled);
 	}
+
+	@media (prefers-reduced-motion) {
+		.indicator,
+		.indicator::after,
+		.label-content {
+			transition: none;
+		}
+	}
 </style>

package/inputs/Select.svelte

@@ -36,7 +36,6 @@ $: {
   raiseItemSelected(selectedIndex);
 }
 $: {
-  console.log("raise pendingSelectedIndex changed");
   raiseItemSelectPending(pendingSelectedIndex);
 }
 $: {
@@ -240,15 +239,6 @@ A single item that can be selected from a popup list of items.
 </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);
@@ -363,4 +353,11 @@ A single item that can be selected from a popup list of items.
 	.popup-content {
 		max-height: 15em;
 	}
+
+	@media (prefers-reduced-motion) {
+		.sterling-select,
+		.label-content {
+			transition: none;
+		}
+	}
 </style>