@geoffcox/sterling-svelte 0.0.5 → 0.0.6

package/index.d.ts

@@ -10,4 +10,5 @@ export { type ButtonVariant, type ButtonShape } from './buttons/types';
 import Button from './buttons/Button.svelte';
 import Input from './inputs/Input.svelte';
 import Checkbox from './inputs/Checkbox.svelte';
-export { Button, Checkbox, Input };
+import Radio from './inputs/Radio.svelte';
+export { Button, Checkbox, Input, Radio };

package/index.js

@@ -10,4 +10,5 @@ export {} from './buttons/types';
 import Button from './buttons/Button.svelte';
 import Input from './inputs/Input.svelte';
 import Checkbox from './inputs/Checkbox.svelte';
-export { Button, Checkbox, Input };
+import Radio from './inputs/Radio.svelte';
+export { Button, Checkbox, Input, Radio };

package/inputs/Checkbox.svelte

@@ -38,7 +38,7 @@ export let disabled = false;
 		<div class="indicator" />
 	</div>
 	<div class="label-content" class:disabled>
-		<slot />
+		<slot name="label" />
 	</div>
 </label>
 

package/inputs/Checkbox.svelte.d.ts

@@ -30,7 +30,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        label: {};
     };
 };
 export type CheckboxProps = typeof __propDef.props;

package/inputs/Input.svelte

@@ -1,4 +1,5 @@
 <script>export let value = "";
+export let disabled = false;
 </script>
 
 <!--
@@ -8,7 +9,7 @@
 <!-- svelte-ignore a11y-label-has-associated-control -->
 {#if $$slots.label}
 	<label class="sterling-input-label">
-		<div class="label-content">
+		<div class="label-content" class:disabled>
 			<slot name="label" />
 		</div>
 		<input
@@ -41,6 +42,7 @@
 			on:reset
 			on:wheel
 			{...$$restProps}
+			{disabled}
 		/>
 	</label>
 {:else}
@@ -74,6 +76,7 @@
 		on:reset
 		on:wheel
 		{...$$restProps}
+		{disabled}
 	/>
 {/if}
 
@@ -83,12 +86,16 @@
 		flex-direction: column;
 	}
 
-	.sterling-input-label > .label-content {
+	.label-content {
 		font-size: 0.7em;
 		margin: 0.5em 0 0 0.7em;
 		color: var(--Display__color--subtle);
 	}
 
+	.label-content.disabled {
+		color: var(--Display__color--disabled);
+	}
+
 	.sterling-input-label,
 	.sterling-input {
 		background-color: var(--Input__background-color);

package/inputs/Input.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         value?: string | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;

package/inputs/Radio.svelte

@@ -1,6 +1,7 @@
 <script>import { onMount } from "svelte";
 export let checked = false;
 export let group = void 0;
+export let disabled = false;
 const onChange = (e) => {
   if (e.currentTarget.checked) {
     group = $$restProps.value;
@@ -52,11 +53,12 @@ $: {
 			on:wheel
 			checked={group === $$restProps.value}
 			{...$$restProps}
+			{disabled}
 		/>
 		<div class="indicator" />
 	</div>
-	<div class="label-content">
-		<slot />
+	<div class="label-content" class:disabled>
+		<slot name="label" />
 	</div>
 </label>
 
@@ -153,6 +155,10 @@ $: {
 	}
 
 	.label-content {
-		color: var(--Common__color);
+		color: var(--Input__color);
+	}
+
+	.label-content.disabled {
+		color: var(--Input__color--disabled);
 	}
 </style>

package/inputs/Radio.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         checked?: boolean | undefined;
         group?: any | undefined | null;
+        disabled?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -30,7 +31,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        label: {};
     };
 };
 export type RadioProps = typeof __propDef.props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoffcox/sterling-svelte",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "devDependencies": {
     "@fontsource/fira-mono": "^4.5.10",
     "@fontsource/overpass": "^4.5.10",