@geoffcox/sterling-svelte 0.0.7 → 0.0.9

package/inputs/Slider.svelte

@@ -121,160 +121,247 @@ const onKeyDown = (event) => {
 <!-- @component
 Slider lets the user chose a value within a min/max range by dragging a thumb button.
 -->
-<div
-	class="sterling-slider"
-	class:disabled
-	class:horizontal={!vertical}
-	class:vertical
-	tabindex={!disabled ? 0 : undefined}
-	{...$$restProps}
-	on:keydown={onKeyDown}
-	on:pointerdown={onPointerDown}
-	on:pointermove={onPointerMove}
-	on:pointerup={onPointerUp}
->
-	<div
-		class="container"
-		bind:this={sliderRef}
-		bind:clientWidth={sliderWidth}
-		bind:clientHeight={sliderHeight}
-	>
-		<div class="track" />
-		<div class="fill" style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`} />
-		<div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
-	</div>
-</div>
+{#if $$slots.label}
+  <label class="sterling-slider-label" class:vertical>
+    <div class="label-content" class:disabled>
+      <slot name="label" />
+    </div>
+    <div
+      class="sterling-slider labeled"
+      class:disabled
+      class:horizontal={!vertical}
+      class:vertical
+      role="slider"
+      aria-valuemin={0}
+      aria-valuenow={value}
+      aria-valuemax={max}
+      tabindex={!disabled ? 0 : undefined}
+      {...$$restProps}
+      on:keydown={onKeyDown}
+      on:pointerdown={onPointerDown}
+      on:pointermove={onPointerMove}
+      on:pointerup={onPointerUp}
+    >
+      <div
+        class="container"
+        bind:this={sliderRef}
+        bind:clientWidth={sliderWidth}
+        bind:clientHeight={sliderHeight}
+      >
+        <div class="track" />
+        <div
+          class="fill"
+          style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`}
+        />
+        <div
+          class="thumb"
+          style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`}
+        />
+      </div>
+    </div>
+  </label>
+{:else}
+  <div
+    class="sterling-slider"
+    class:disabled
+    class:horizontal={!vertical}
+    class:vertical
+    role="slider"
+    aria-valuemin={0}
+    aria-valuenow={value}
+    aria-valuemax={max}
+    tabindex={!disabled ? 0 : undefined}
+    {...$$restProps}
+    on:keydown={onKeyDown}
+    on:pointerdown={onPointerDown}
+    on:pointermove={onPointerMove}
+    on:pointerup={onPointerUp}
+  >
+    <div
+      class="container"
+      bind:this={sliderRef}
+      bind:clientWidth={sliderWidth}
+      bind:clientHeight={sliderHeight}
+    >
+      <div class="track" />
+      <div class="fill" style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`} />
+      <div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
+    </div>
+  </div>
+{/if}
 
 <style>
-	.sterling-slider {
-		box-sizing: border-box;
-		outline: none;
-		padding: 0;
-		overflow: visible;
-		display: grid;
-	}
+  .sterling-slider-label {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
 
-	.sterling-slider.horizontal {
-		height: 2em;
-	}
+  .sterling-slider-label.vertical {
+    justify-items: center;
+    height: 100%;
+  }
 
-	.sterling-slider.vertical {
-		width: 2em;
-	}
+  .label-content {
+    font-size: 0.7em;
+    color: var(--Display__color--subtle);
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
 
-	.sterling-slider:focus-visible {
-		outline-color: var(--Common__outline-color);
-		outline-offset: var(--Common__outline-offset);
-		outline-style: var(--Common__outline-style);
-		outline-width: var(--Common__outline-width);
-	}
+  .label-content.disabled {
+    color: var(--Display__color--disabled);
+  }
 
-	.container {
-		position: relative;
-	}
+  .sterling-slider {
+    box-sizing: border-box;
+    outline: none;
+    padding: 0;
+    overflow: visible;
+    display: grid;
+    height: 100%;
+  }
 
-	.sterling-slider.horizontal .container {
-		margin: 0 0.75em;
-	}
+  .sterling-slider.labeled {
+    height: unset;
+  }
 
-	.sterling-slider.vertical .container {
-		margin: 0.75em 0;
-	}
+  .container {
+    position: relative;
+  }
 
-	.track {
-		position: absolute;
-		background: var(--Display__background-color);
-	}
+  .track {
+    position: absolute;
+    background: var(--Display__background-color);
+  }
 
-	.sterling-slider.horizontal .track {
-		left: 0;
-		right: 0;
-		top: 50%;
-		height: 3px;
-		transform: translate(0, -50%);
-	}
+  .fill {
+    background: var(--Display__color);
+    position: absolute;
+  }
 
-	.sterling-slider.vertical .track {
-		bottom: 0;
-		left: 50%;
-		top: 0;
-		transform: translate(-50%, 0);
-		width: 3px;
-	}
+  .thumb {
+    background-color: var(--Button__background-color);
+    border-color: var(--Button__border-color);
+    border-radius: 10000px;
+    border-style: var(--Button__border-style);
+    border-width: var(--Button__border-width);
+    box-sizing: border-box;
+    color: var(--Button__color);
+    cursor: pointer;
+    display: block;
+    font: inherit;
+    height: 1.5em;
+    overflow: hidden;
+    padding: 0;
+    text-decoration: none;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+    white-space: nowrap;
+    position: absolute;
+    width: 1.5em;
+  }
 
-	.sterling-slider.disabled .track {
-		background: var(--Common__background-color--disabled);
-	}
+  /* ----- horizontal ----- */
 
-	.fill {
-		background: var(--Display__color);
-		position: absolute;
-	}
+  .sterling-slider.horizontal {
+    height: 2em;
+  }
 
-	.sterling-slider.horizontal .fill {
-		height: 3px;
-		top: 50%;
-		transform: translate(0, -50%);
-	}
+  .sterling-slider.horizontal .container {
+    margin: 0 0.75em;
+  }
 
-	.sterling-slider.vertical .fill {
-		bottom: 0;
-		left: 50%;
-		transform: translate(-50%, 0);
-		width: 3px;
-	}
+  .sterling-slider.horizontal .track {
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 3px;
+    transform: translate(0, -50%);
+  }
 
-	.sterling-slider.disabled .fill {
-		background: var(--Common__color--disabled);
-	}
+  .sterling-slider.horizontal .fill {
+    height: 3px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
 
-	.thumb {
-		background-color: var(--Button__background-color);
-		border-color: var(--Button__border-color);
-		border-radius: 10000px;
-		border-style: var(--Button__border-style);
-		border-width: var(--Button__border-width);
-		box-sizing: border-box;
-		color: var(--Button__color);
-		cursor: pointer;
-		display: block;
-		font: inherit;
-		height: 1.5em;
-		overflow: hidden;
-		padding: 0;
-		text-decoration: none;
-		transition: background-color 250ms, color 250ms, border-color 250ms;
-		white-space: nowrap;
-		position: absolute;
-		width: 1.5em;
-	}
+  .sterling-slider.horizontal .thumb {
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
 
-	.sterling-slider.horizontal .thumb {
-		top: 50%;
-		transform: translate(-50%, -50%);
-	}
+  /* ----- vertical ----- */
 
-	.sterling-slider.vertical .thumb {
-		left: 50%;
-		transform: translate(-50%, 50%);
-	}
+  .sterling-slider.vertical {
+    width: 2em;
+  }
+  .sterling-slider.vertical .container {
+    margin: 0.75em 0;
+  }
 
-	.thumb:hover {
-		background-color: var(--Button__background-color--hover);
-		border-color: var(--Button__border-color--hover);
-		color: var(--Button__color--hover);
-	}
+  .sterling-slider.vertical .track {
+    bottom: 0;
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, 0);
+    width: 3px;
+  }
 
-	.thumb:active {
-		background-color: var(--Button__background-color--active);
-		border-color: var(--Button__border-color--active);
-		color: var(--Button__color--active);
-	}
+  .sterling-slider.vertical .fill {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 3px;
+  }
 
-	.sterling-slider.disabled .thumb {
-		background-color: var(--Common__background-color--disabled);
-		border-color: var(--Common__border-color--disabled);
-		color: var(--Common__color--disabled);
-		cursor: not-allowed;
-	}
+  .sterling-slider.vertical .thumb {
+    left: 50%;
+    transform: translate(-50%, 50%);
+  }
+
+  /* ----- hover ----- */
+
+  .thumb:hover {
+    background-color: var(--Button__background-color--hover);
+    border-color: var(--Button__border-color--hover);
+    color: var(--Button__color--hover);
+  }
+
+  /* ----- active ----- */
+
+  .thumb:active {
+    background-color: var(--Button__background-color--active);
+    border-color: var(--Button__border-color--active);
+    color: var(--Button__color--active);
+  }
+
+  /* ----- focus ----- */
+  .sterling-slider:focus-visible {
+    outline-color: var(--Common__outline-color);
+    outline-offset: var(--Common__outline-offset);
+    outline-style: var(--Common__outline-style);
+    outline-width: var(--Common__outline-width);
+  }
+  /* ----- disabled ----- */
+
+  .sterling-slider.disabled .track {
+    background: var(--Common__background-color--disabled);
+  }
+
+  .sterling-slider.disabled .fill {
+    background: var(--Common__color--disabled);
+  }
+
+  .sterling-slider.disabled .thumb {
+    background-color: var(--Common__background-color--disabled);
+    border-color: var(--Common__border-color--disabled);
+    color: var(--Common__color--disabled);
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion) {
+    .thumb,
+    .label-content {
+      transition: none;
+    }
+  }
 </style>

package/inputs/Slider.svelte.d.ts

@@ -15,7 +15,9 @@ declare const __propDef: {
     } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        label: {};
+    };
 };
 export type SliderProps = typeof __propDef.props;
 export type SliderEvents = typeof __propDef.events;

package/lists/List.svelte

@@ -318,4 +318,13 @@ A list of items where a single item can be selected.
 	.list-item.disabled {
 		color: var(--Input__color--disabled);
 	}
+
+	@media (prefers-reduced-motion) {
+		.sterling-list-label,
+		.sterling-list,
+		.list-item,
+		.label-content {
+			transition: none;
+		}
+	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "devDependencies": {
     "@fontsource/fira-mono": "^4.5.10",
     "@fontsource/overpass": "^4.5.10",
@@ -28,13 +28,16 @@
   "type": "module",
   "dependencies": {
     "@floating-ui/dom": "^1.1.0",
+    "lodash-es": "^4.17.21",
     "uuid": "^9.0.0"
   },
   "exports": {
     "./package.json": "./package.json",
     "./buttons/Button.svelte": "./buttons/Button.svelte",
-    "./buttons/types": "./buttons/types.js",
+    "./buttons/Button.types": "./buttons/Button.types.js",
     "./clickOutside": "./clickOutside.js",
+    "./display/Progress.svelte": "./display/Progress.svelte",
+    "./display/Progress.types": "./display/Progress.types.js",
     ".": "./index.js",
     "./inputs/Checkbox.svelte": "./inputs/Checkbox.svelte",
     "./inputs/Input.svelte": "./inputs/Input.svelte",
@@ -42,6 +45,8 @@
     "./inputs/Select.svelte": "./inputs/Select.svelte",
     "./inputs/Slider.svelte": "./inputs/Slider.svelte",
     "./lists/List.svelte": "./lists/List.svelte",
+    "./surfaces/CloseX.svelte": "./surfaces/CloseX.svelte",
+    "./surfaces/Dialog.svelte": "./surfaces/Dialog.svelte",
     "./theme/applyDarkTheme": "./theme/applyDarkTheme.js",
     "./theme/applyLightTheme": "./theme/applyLightTheme.js",
     "./theme/applyTheme": "./theme/applyTheme.js",

package/surfaces/CloseX.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" {...$$restProps}>
+	<path
+		d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
+	/>
+</svg>

package/surfaces/CloseX.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  CloseXProps */
+/** @typedef {typeof __propDef.events}  CloseXEvents */
+/** @typedef {typeof __propDef.slots}  CloseXSlots */
+export default class CloseX extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CloseXProps = typeof __propDef.props;
+export type CloseXEvents = typeof __propDef.events;
+export type CloseXSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};