@geoffcox/sterling-svelte 0.0.31 → 1.0.1

package/Progress.svelte

@@ -1,28 +1,31 @@
-<script>export let value = 0;
+<script>//----- Props ----- //
+/** When true, the progress bar is disabled. */
+export let disabled = false;
+/** The maximum value. */
 export let max = 100;
+/** A read-only percentage between 0 and 100 calculated from value and max. */
 export let percent = 0;
+/** The current status of the progress. */
+export let status = 'none';
+/** The current value. */
+export let value = 0;
+/** Additional class names to apply. */
+export let variant = '';
+/** When true, the progress bar is displayed vertically. */
 export let vertical = false;
-export let status = "none";
-export let disabled = false;
+//----- State ----- //
 let clientHeight;
 let clientWidth;
-$:
-  clampMax = Math.max(1, max);
-$:
-  clampValue = Math.max(0, Math.min(value, clampMax));
-$:
-  ratio = clampValue / clampMax;
+$: clampMax = Math.max(1, max);
+$: clampValue = Math.max(0, Math.min(value, clampMax));
+$: ratio = clampValue / clampMax;
 $: {
-  percent = Math.round(ratio * 100);
+    percent = Math.round(ratio * 100);
 }
-$:
-  percentHeight = clientHeight * ratio;
-$:
-  percentWidth = clientWidth * ratio;
-$:
-  indicatorStyle = vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`;
-$:
-  indicatorColor = status === "auto" ? percent === 100 ? "success" : "info" : status;
+$: percentHeight = clientHeight * ratio;
+$: percentWidth = clientWidth * ratio;
+$: indicatorStyle = vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`;
+$: indicatorColor = status === 'auto' ? (percent === 100 ? 'success' : 'info') : status;
 </script>
 
 <!--
@@ -31,11 +34,15 @@ $:
 	Does not use the HTML progress element.
 -->
 <!-- svelte-ignore a11y-label-has-associated-control -->
-
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <div
-  class="sterling-progress"
+  class={`sterling-progress ${variant}`}
   class:disabled
   class:vertical
+  class:info={indicatorColor === 'info'}
+  class:success={indicatorColor === 'success'}
+  class:warning={indicatorColor === 'warning'}
+  class:error={indicatorColor === 'danger'}
   role="progressbar"
   on:blur
   on:click
@@ -71,111 +78,6 @@ $:
   {...$$restProps}
 >
   <div class="container" bind:clientWidth bind:clientHeight>
-    <div
-      class="indicator"
-      class:info={indicatorColor === 'info'}
-      class:success={indicatorColor === 'success'}
-      class:warning={indicatorColor === 'warning'}
-      class:error={indicatorColor === 'danger'}
-      style={indicatorStyle}
-    />
+    <div class="indicator" style={indicatorStyle} />
   </div>
 </div>
-
-<style>
-  .sterling-progress {
-    align-content: flex-start;
-    align-items: flex-start;
-    background: var(--stsv-common__background-color);
-    border-width: var(--stsv-common__border-width);
-    border-style: var(--stsv-common__border-style);
-    border-color: var(--stsv-common__border-color);
-    border-radius: var(--stsv-common__border-radius);
-    box-sizing: border-box;
-    display: block;
-    height: 1em;
-    padding: 0.25em;
-    position: relative;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-progress.disabled::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    background: repeating-linear-gradient(
-      var(--stsv-common--disabled__stripe-angle),
-      var(--stsv-common--disabled__stripe-color),
-      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt)
-        calc(2 * var(--stsv-common--disabled__stripe-width))
-    );
-    pointer-events: none;
-  }
-
-  .container {
-    display: flex;
-    justify-content: flex-start;
-    width: 100%;
-    height: 100%;
-  }
-
-  .indicator {
-    background-color: var(--stsv-common__border-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;
-    height: unset;
-    width: 1em;
-  }
-
-  .sterling-progress.vertical .container {
-    flex-direction: column;
-    justify-content: flex-end;
-    min-width: unset;
-  }
-
-  .sterling-progress.vertical .indicator {
-    height: unset;
-    min-height: unset;
-    min-width: 1px;
-    width: 100%;
-  }
-
-  /* ----- Colorful ----- */
-
-  .indicator.info {
-    background-color: var(--stsv-status--info__border-color);
-  }
-
-  .indicator.success {
-    background-color: var(--stsv-status--success__border-color);
-  }
-
-  .indicator.warning {
-    background-color: var(--stsv-status--warning__border-color);
-  }
-
-  .indicator.error {
-    background-color: var(--stsv-status--danger__border-color);
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-progress,
-    .indicator {
-      transition: none;
-    }
-  }
-</style>

package/Progress.svelte.d.ts

@@ -2,12 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: number | undefined;
+        disabled?: boolean | undefined;
         max?: number | undefined;
         percent?: number | undefined;
-        vertical?: boolean | undefined;
         status?: string | undefined;
-        disabled?: boolean | undefined;
+        value?: number | undefined;
+        variant?: string | undefined;
+        vertical?: boolean | undefined;
     };
     events: {
         blur: FocusEvent;

package/Radio.svelte

@@ -1,57 +1,71 @@
-<script>import { idGenerator } from "./idGenerator";
+<script>import { idGenerator } from './idGenerator';
+// ----- Props ----- //
 export let checked = false;
 export let disabled = false;
-export let group = void 0;
-export let id = void 0;
-export let colorful = false;
+// bind:group doesn't seem to work properly (yet) in a nested radio.
+// The workaround is to export `checked` and `group` properties
+// and implement the same behavior.
+export let group = undefined;
+export let id = undefined;
+/** Additional class names to apply. */
+export let variant = '';
+// ensure initial state is consistent
 if (checked && $$restProps.value !== group) {
-  group = $$restProps.value;
-} else if (!checked && $$restProps.value === group) {
-  checked = true;
+    group = $$restProps.value;
+}
+else if (!checked && $$restProps.value === group) {
+    checked = true;
 }
+// ----- State ----- //
 let inputRef;
 let previousChecked = checked;
 let previousGroup = group;
 const reconcile = () => {
-  if (checked !== previousChecked) {
-    if (checked && $$restProps.value) {
-      group = $$restProps.value;
-      previousGroup = $$restProps.value;
+    if (checked !== previousChecked) {
+        // when checked, set group to value
+        if (checked && $$restProps.value) {
+            group = $$restProps.value;
+            previousGroup = $$restProps.value;
+        }
+        previousChecked = checked;
     }
-    previousChecked = checked;
-  } else if (group !== previousGroup) {
-    if ($$restProps.value) {
-      checked = $$restProps.value === group;
-      previousChecked = checked;
+    else if (group !== previousGroup) {
+        // when group changes, update checked
+        if ($$restProps.value) {
+            checked = $$restProps.value === group;
+            previousChecked = checked;
+        }
+        previousGroup = group;
     }
-    previousGroup = group;
-  }
 };
-$:
-  checked, group, $$restProps.value, reconcile();
+$: checked, group, $$restProps.value, reconcile();
 $: {
-  if (inputRef && checked && !inputRef.checked) {
-    inputRef.click();
-  }
+    if (inputRef && checked && !inputRef.checked) {
+        // setting checked doesn't cause raise on:change,
+        // so we click the radio to cause it to be checked.
+        inputRef.click();
+    }
 }
 $: {
-  if ($$slots.default && id === void 0) {
-    id = idGenerator.nextId("Radio");
-  }
+    if ($$slots.default && id === undefined) {
+        id = idGenerator.nextId('Radio');
+    }
 }
+// ----- Methods ----- //
 export const blur = () => {
-  inputRef?.blur();
+    inputRef?.blur();
 };
 export const click = () => {
-  inputRef?.click();
+    inputRef?.click();
 };
 export const focus = (options) => {
-  inputRef?.focus(options);
+    inputRef?.focus(options);
 };
+// ----- Event Handlers ----- //
 const onChange = (e) => {
-  if (e.currentTarget.checked) {
-    group = $$restProps.value;
-  }
+    if (e.currentTarget.checked) {
+        group = $$restProps.value;
+    }
 };
 </script>
 
@@ -59,13 +73,13 @@ const onChange = (e) => {
 	@component
 	A styled HTML input type=radio element with optional label.
 -->
-<div class="sterling-radio" class:colorful class:disabled>
+<div class={`sterling-radio ${variant}`} class:disabled>
   <div class="container">
     <input
       bind:this={inputRef}
       {checked}
       {disabled}
-      {group}
+      name={group}
       {id}
       type="radio"
       on:blur
@@ -100,164 +114,7 @@ const onChange = (e) => {
   </div>
   {#if $$slots.default}
     <label for={id}>
-      <slot {colorful} {checked} {disabled} {group} inputId={id} value={$$restProps.value} />
+      <slot {checked} {disabled} {group} inputId={id} value={$$restProps.value} {variant} />
     </label>
   {/if}
 </div>
-
-<style>
-  .sterling-radio {
-    align-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    display: inline-flex;
-    font: inherit;
-    margin: 0;
-    outline: none;
-    padding: 0;
-  }
-  /* 
-		The container 
-		- allows the input to be hidden
-		- avoids input participating in layout
-		- prevents collisions with surrounding slots
-	 */
-  .container {
-    box-sizing: border-box;
-    position: relative;
-    font: inherit;
-    display: flex;
-    align-items: center;
-    margin-right: 0.25em;
-  }
-
-  /*
-		The input is hidden since the built-in browser radio cannot be customized
-	*/
-  input {
-    font: inherit;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    opacity: 0;
-    height: 21px;
-    width: 21px;
-  }
-
-  /*
-	 	The indicator handles both the radio box and circle mark.
-	 	The box cannot be on the container since the adjacent sibling selector is needed
-		and there is not a parent CSS selector.
-	*/
-  .indicator {
-    background-color: var(--stsv-input__background-color);
-    border-color: var(--stsv-input__border-color);
-    border-style: var(--stsv-input__border-style);
-    border-width: var(--stsv-input__border-width);
-    border-radius: 10000px;
-    box-sizing: border-box;
-    display: inline-block;
-    height: 21px;
-    position: relative;
-    pointer-events: none;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-    width: 21px;
-  }
-
-  input:checked + .indicator {
-    background-color: var(--stsv-input__background-color);
-    border-color: var(--stsv-input__border-color);
-  }
-
-  .sterling-radio:not(.disabled):hover .indicator {
-    background-color: var(--stsv-input__background-color--hover);
-    border-color: var(--stsv-input__border-color--hover);
-  }
-
-  input:focus-visible + .indicator {
-    outline-color: var(--stsv-common__outline-color);
-    outline-offset: var(--stsv-common__outline-offset);
-    outline-style: var(--stsv-common__outline-style);
-    outline-width: var(--stsv-common__outline-width);
-  }
-
-  .indicator::after {
-    background-color: transparent;
-    border-radius: 10000px;
-    content: '';
-    height: 9px;
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    transition: background-color 250ms;
-    width: 9px;
-  }
-
-  input:checked + .indicator::after {
-    background-color: var(--stsv-input__color);
-  }
-
-  .sterling-radio.colorful .indicator {
-    background-color: var(--stsv-input--colorful__background-color);
-    border-color: var(--stsv-input--colorful__border-color);
-  }
-
-  .sterling-radio.colorful input:checked + .indicator {
-    background-color: var(--stsv-input--colorful__background-color);
-    border-color: var(--stsv-input--colorful__border-color);
-  }
-
-  .sterling-radio.colorful:not(.disabled):hover .indicator {
-    background-color: var(--stsv-input--colorful__background-color--hover);
-    border-color: var(--stsv-input--colorful__border-color--hover);
-  }
-
-  .sterling-radio.colorful input:checked + .indicator::after {
-    background-color: var(--stsv-input--colorful__color);
-  }
-
-  .sterling-radio.disabled * {
-    cursor: not-allowed;
-  }
-
-  .container::after {
-    background: repeating-linear-gradient(
-      var(--stsv-common--disabled__stripe-angle),
-      var(--stsv-common--disabled__stripe-color),
-      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
-      var(--stsv-common--disabled__stripe-color--alt)
-        calc(2 * var(--stsv-common--disabled__stripe-width))
-    );
-    border-radius: 10000px;
-    bottom: 0;
-    content: '';
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    pointer-events: none;
-    transition: opacity 250ms;
-  }
-
-  label {
-    color: var(--stsv-common__color);
-    transition: color 250ms;
-    font: inherit;
-  }
-
-  .sterling-radio.disabled .container::after {
-    opacity: 1;
-  }
-
-  @media (prefers-reduced-motion) {
-    .indicator,
-    .indicator::after,
-    .container::after,
-    label {
-      transition: none;
-    }
-  }
-</style>

package/Radio.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         group?: any | undefined | null;
         id?: string | undefined;
-        colorful?: boolean | undefined;
+        variant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -42,12 +42,12 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            colorful: boolean;
             checked: boolean;
             disabled: boolean;
             group: any;
             inputId: string | undefined;
             value: any;
+            variant: string;
         };
     };
 };