@geoffcox/sterling-svelte 0.0.4 → 0.0.5

package/buttons/Button.svelte

@@ -4,7 +4,7 @@ export let shape = "rounded";
 
 <!--
 	@component
-	provides a styled HTML button element.
+	A styled HTML button element.
 -->
 <button
 	class="sterling-button"

package/buttons/Button.svelte.d.ts

@@ -42,7 +42,7 @@ declare const __propDef: {
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
-/** provides a styled HTML button element. */
+/** A styled HTML button element. */
 export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
 }
 export {};

package/index.d.ts

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

package/index.js

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

package/inputs/Checkbox.svelte

@@ -1,6 +1,11 @@
 <script>export let checked = false;
+export let disabled = false;
 </script>
 
+<!--
+	@component
+	A styled HTML input type=checkbox element.
+-->
 <!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="sterling-checkbox">
 	<div class="container">
@@ -28,10 +33,11 @@
 			on:wheel
 			bind:checked
 			{...$$restProps}
+			{disabled}
 		/>
 		<div class="indicator" />
 	</div>
-	<div class="label-content">
+	<div class="label-content" class:disabled>
 		<slot />
 	</div>
 </label>
@@ -133,8 +139,13 @@
 	}
 
 	.label-content {
-		color: var(--Common__color);
+		color: var(--Input__color);
 		user-select: none;
 		margin-top: 0.25em;
+		transition: background-color 250ms, color 250ms, border-color 250ms;
+	}
+
+	.label-content.disabled {
+		color: var(--Input__color--disabled);
 	}
 </style>

package/inputs/Checkbox.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         checked?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -35,6 +36,7 @@ declare const __propDef: {
 export type CheckboxProps = typeof __propDef.props;
 export type CheckboxEvents = typeof __propDef.events;
 export type CheckboxSlots = typeof __propDef.slots;
+/** A styled HTML input type=checkbox element. */
 export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
 }
 export {};

package/inputs/Input.svelte

@@ -1,6 +1,10 @@
 <script>export let value = "";
 </script>
 
+<!--
+	@component
+	A styled HTML input element with optional label.
+-->
 <!-- svelte-ignore a11y-label-has-associated-control -->
 {#if $$slots.label}
 	<label class="sterling-input-label">

package/inputs/Input.svelte.d.ts

@@ -41,6 +41,7 @@ declare const __propDef: {
 export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;
 export type InputSlots = typeof __propDef.slots;
+/** A styled HTML input element with optional label. */
 export default class Input extends SvelteComponentTyped<InputProps, InputEvents, InputSlots> {
 }
 export {};

package/inputs/Radio.svelte

@@ -20,6 +20,10 @@ $: {
 }
 </script>
 
+<!--
+	@component
+	A styled HTML input type=radio element with optional label.
+-->
 <!-- svelte-ignore a11y-label-has-associated-control -->
 <label class="sterling-radio">
 	<div class="container">

package/inputs/Radio.svelte.d.ts

@@ -36,6 +36,7 @@ declare const __propDef: {
 export type RadioProps = typeof __propDef.props;
 export type RadioEvents = typeof __propDef.events;
 export type RadioSlots = typeof __propDef.slots;
+/** A styled HTML input type=radio element with optional label. */
 export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
 }
 export {};

package/package.json

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