@geoffcox/sterling-svelte 0.0.6 → 0.0.8

package/@types/clickOutside.d.ts

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

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,172 @@
+<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);
+	}
+
+	.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;
+	}
+
+	/* ----- 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);
+	}
+</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,9 +6,15 @@ 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 Input from './inputs/Input.svelte';
 import Checkbox from './inputs/Checkbox.svelte';
+import Input from './inputs/Input.svelte';
+import List from './lists/List.svelte';
+import Progress from './display/Progress.svelte';
 import Radio from './inputs/Radio.svelte';
-export { Button, Checkbox, Input, Radio };
+import Select from './inputs/Select.svelte';
+import Slider from './inputs/Slider.svelte';
+export { Button, Checkbox, Input, List, Progress, Radio, Select, Slider };

package/index.js

@@ -6,9 +6,15 @@ 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 Input from './inputs/Input.svelte';
 import Checkbox from './inputs/Checkbox.svelte';
+import Input from './inputs/Input.svelte';
+import List from './lists/List.svelte';
+import Progress from './display/Progress.svelte';
 import Radio from './inputs/Radio.svelte';
-export { Button, Checkbox, Input, Radio };
+import Select from './inputs/Select.svelte';
+import Slider from './inputs/Slider.svelte';
+export { Button, Checkbox, Input, List, Progress, Radio, Select, Slider };

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/inputs/Slider.svelte

@@ -121,64 +121,112 @@ 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}
->
+{#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="container"
-		bind:this={sliderRef}
-		bind:clientWidth={sliderWidth}
-		bind:clientHeight={sliderHeight}
+		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="track" />
-		<div class="fill" style={vertical ? `height: ${valueOffset}px` : `width: ${valueOffset}px`} />
-		<div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
+		<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>
-</div>
+{/if}
 
 <style>
-	.sterling-slider {
-		box-sizing: border-box;
-		outline: none;
-		padding: 0;
-		overflow: visible;
+	.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 {
@@ -186,48 +234,11 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
 		background: var(--Display__background-color);
 	}
 
-	.sterling-slider.horizontal .track {
-		left: 0;
-		right: 0;
-		top: 50%;
-		height: 3px;
-		transform: translate(0, -50%);
-	}
-
-	.sterling-slider.vertical .track {
-		bottom: 0;
-		left: 50%;
-		top: 0;
-		transform: translate(-50%, 0);
-		width: 3px;
-	}
-
-	.sterling-slider.disabled .track {
-		background: var(--Common__background-color--disabled);
-	}
-
 	.fill {
 		background: var(--Display__color);
 		position: absolute;
 	}
 
-	.sterling-slider.horizontal .fill {
-		height: 3px;
-		top: 50%;
-		transform: translate(0, -50%);
-	}
-
-	.sterling-slider.vertical .fill {
-		bottom: 0;
-		left: 50%;
-		transform: translate(-50%, 0);
-		width: 3px;
-	}
-
-	.sterling-slider.disabled .fill {
-		background: var(--Common__color--disabled);
-	}
-
 	.thumb {
 		background-color: var(--Button__background-color);
 		border-color: var(--Button__border-color);
@@ -249,28 +260,97 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
 		width: 1.5em;
 	}
 
+	/* ----- horizontal ----- */
+
+	.sterling-slider.horizontal {
+		height: 2em;
+	}
+
+	.sterling-slider.horizontal .container {
+		margin: 0 0.75em;
+	}
+
+	.sterling-slider.horizontal .track {
+		left: 0;
+		right: 0;
+		top: 50%;
+		height: 3px;
+		transform: translate(0, -50%);
+	}
+
+	.sterling-slider.horizontal .fill {
+		height: 3px;
+		top: 50%;
+		transform: translate(0, -50%);
+	}
+
 	.sterling-slider.horizontal .thumb {
 		top: 50%;
 		transform: translate(-50%, -50%);
 	}
 
+	/* ----- vertical ----- */
+
+	.sterling-slider.vertical {
+		width: 2em;
+	}
+	.sterling-slider.vertical .container {
+		margin: 0.75em 0;
+	}
+
+	.sterling-slider.vertical .track {
+		bottom: 0;
+		left: 50%;
+		top: 0;
+		transform: translate(-50%, 0);
+		width: 3px;
+	}
+
+	.sterling-slider.vertical .fill {
+		bottom: 0;
+		left: 50%;
+		transform: translate(-50%, 0);
+		width: 3px;
+	}
+
 	.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);

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

@@ -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.8",
   "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",
@@ -27,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",

package/theme/lightTheme.js

@@ -22,8 +22,8 @@ export const lightTheme = {
     '--Common__outline-width': '2px',
     // disabled
     '--Common__background-color--disabled': neutrals.neutral96,
-    '--Common__border-color--disabled': neutrals.neutral60,
-    '--Common__color--disabled': neutrals.neutral60,
+    '--Common__border-color--disabled': neutrals.neutral75,
+    '--Common__color--disabled': neutrals.neutral75,
     // ----- Layer ---- //
     '--Layer__background-color--1': neutrals.neutral98,
     '--Layer__color--1': neutrals.neutral15,