@geoffcox/sterling-svelte 0.0.31 → 1.0.0

package/Input.svelte

@@ -1,47 +1,53 @@
-<script>import { idGenerator } from "./idGenerator";
+<script>import { idGenerator } from './idGenerator';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
+// ----- Props ----- //
 export let disabled = false;
-export let id = void 0;
-export let value = "";
-export let colorful = false;
-export let composed = false;
+export let id = undefined;
+export let value = '';
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let inputRef;
 $: {
-  if ($$slots.default && id === void 0) {
-    id = idGenerator.nextId("Input");
-  }
+    if ($$slots.default && id === undefined) {
+        id = idGenerator.nextId('Input');
+    }
 }
+// ----- Methods ----- //
 export const blur = () => {
-  inputRef?.blur();
+    inputRef?.blur();
 };
 export const click = () => {
-  inputRef?.click();
+    inputRef?.click();
 };
 export const focus = (options) => {
-  inputRef?.focus();
+    inputRef?.focus();
 };
 export const select = () => {
-  inputRef?.select();
+    inputRef?.select();
 };
 export const setSelectionRange = (start, end, direction) => {
-  inputRef?.setSelectionRange(start, end, direction);
+    inputRef?.setSelectionRange(start, end, direction);
 };
 export const setRangeText = (replacement, start, end, selectionMode) => {
-  if (start && end) {
-    inputRef?.setRangeText(replacement, start, end, selectionMode);
-  } else {
-    inputRef?.setRangeText(replacement);
-  }
+    if (start && end) {
+        inputRef?.setRangeText(replacement, start, end, selectionMode);
+    }
+    else {
+        inputRef?.setRangeText(replacement);
+    }
 };
 </script>
 
 {#if $$slots.default}
-  <label for={id}>
-    <slot {composed} {disabled} {value} />
+  <label class={`sterling-input-label ${variant}`} for={id}>
+    <slot {disabled} {value} {variant} />
   </label>
 {/if}
-<div class="sterling-input" class:colorful class:composed class:disabled>
+<div class={`sterling-input ${variant}`} class:disabled>
   <input
     bind:this={inputRef}
+    class:using-keyboard={$usingKeyboard}
     {disabled}
     {id}
     bind:value
@@ -81,118 +87,3 @@ export const setRangeText = (replacement, start, end, selectionMode) => {
     {...$$restProps}
   />
 </div>
-
-<style>
-  .sterling-input {
-    box-sizing: border-box;
-    display: inline-block;
-    margin: 0;
-    padding: 0;
-    position: relative;
-  }
-
-  input {
-    background-color: var(--stsv-input__background-color);
-    border-color: var(--stsv-input__border-color);
-    border-radius: var(--stsv-input__border-radius);
-    border-style: var(--stsv-input__border-style);
-    border-width: var(--stsv-input__border-width);
-    box-sizing: border-box;
-    color: var(--stsv-input__color);
-    display: block;
-    font: inherit;
-    margin: 0;
-    outline: none;
-    padding: 0.5em;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-    width: 100%;
-  }
-
-  .sterling-input:hover input:not(:disabled) {
-    background-color: var(--stsv-input__background-color--hover);
-    border-color: var(--stsv-input__border-color--hover);
-    color: var(--stsv-input__color--hover);
-  }
-
-  input:focus {
-    background-color: var(--stsv-input__background-color--focus);
-    border-color: var(--stsv-input__border-color--focus);
-    color: var(--stsv-input__color--focus);
-    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);
-  }
-
-  .sterling-input.colorful input {
-    background-color: var(--stsv-input--colorful__background-color);
-    border-color: var(--stsv-input--colorful__border-color);
-    color: var(--stsv-input--colorful__color);
-  }
-
-  .sterling-input.colorful:hover input:not(:disabled) {
-    background-color: var(--stsv-input--colorful__background-color--hover);
-    border-color: var(--stsv-input--colorful__border-color--hover);
-    color: var(--stsv-input--colorful__color--hover);
-  }
-
-  .sterling-input.colorful input:focus {
-    background-color: var(--stsv-input--colorful__background-color--focus);
-    border-color: var(--stsv-input--colorful__border-color--focus);
-    color: var(--stsv-input--colorful__color--focus);
-  }
-
-  .sterling-input.composed input,
-  .sterling-input.composed:hover input,
-  .sterling-input.composed:focus input {
-    background: transparent;
-    border: none;
-    outline: none;
-  }
-
-  input::placeholder {
-    color: var(--stsv-common__color--subtle);
-  }
-
-  .sterling-input.disabled * {
-    cursor: not-allowed;
-    outline: none;
-  }
-
-  .sterling-input::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))
-    );
-    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-input.disabled::after {
-    opacity: 1;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-input::after,
-    input {
-      transition: none;
-    }
-  }
-</style>

package/Input.svelte.d.ts

@@ -5,8 +5,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         id?: string | undefined;
         value?: string | undefined;
-        colorful?: boolean | undefined;
-        composed?: boolean | undefined;
+        variant?: string | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -53,9 +52,9 @@ declare const __propDef: {
     };
     slots: {
         default: {
-            composed: boolean;
             disabled: boolean;
             value: string;
+            variant: string;
         };
     };
 };

package/Label.constants.d.ts

@@ -1 +1,2 @@
 export declare const LABEL_STATUSES: string[];
+export declare const LABEL_VARIANTS: readonly ["regular", "container", "inline"];

package/Label.constants.js

@@ -1 +1,2 @@
 export const LABEL_STATUSES = ['none', 'info', 'success', 'warning', 'danger'];
+export const LABEL_VARIANTS = ['regular', 'container', 'inline'];

package/Label.svelte

@@ -1,88 +1,122 @@
-<script>import Tooltip from "./Tooltip.svelte";
-import { usingKeyboard } from "./stores/usingKeyboard";
-let htmlFor = void 0;
+<script>import Tooltip from './Tooltip.svelte';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
+// ----- Props ----- //
+let htmlFor = undefined;
 export { htmlFor as for };
+/**
+ * If true, clicking the label invokes a click on the content.
+ * Needed only when the label is not associated with the content through containment or the `for`/`id` relationship.
+ */
 export let forwardClick = false;
-export let text = void 0;
-export let message = void 0;
+/** The text to display in the label. Not used if the text slot is filled. */
+export let text = undefined;
+/** The status message to display. */
+export let message = undefined;
+/** When true, indicates a value is required. */
 export let required = false;
-export let requiredReason = "required";
-export let status = "none";
+/** The reason the value is required. */
+export let requiredReason = 'required';
+/** The status of the label. */
+export let status = 'none';
+/** Additional class names to apply. */
+export let variant = '';
+/** When true, the label appears above the content. */
+export let vertical = true;
+// ----- State ----- //
 let labelRef;
 let targetDisabled = false;
 let targetRef = null;
 const findTarget = () => {
-  let candidate = null;
-  if (htmlFor) {
-    candidate = labelRef?.querySelector(`[id="${htmlFor}"]`);
-  }
-  if (!candidate) {
-    candidate = labelRef?.querySelector(
-      'a[href], audio[controls], button, details, div[contenteditable], form, input, select, textarea, video[controls], [tabindex]:not([tabindex="-1"])'
-    );
-  }
-  targetRef = candidate;
+    let candidate = null;
+    if (htmlFor) {
+        candidate = labelRef?.querySelector(`[id="${htmlFor}"]`);
+    }
+    if (!candidate) {
+        candidate = labelRef?.querySelector('a[href], ' +
+            'audio[controls], ' +
+            'button, ' +
+            'details, ' +
+            'div[contenteditable], ' +
+            'form, ' +
+            'input, ' +
+            'select, ' +
+            'textarea, ' +
+            'video[controls], ' +
+            '[tabindex]:not([tabindex="-1"])');
+    }
+    targetRef = candidate;
 };
 const isElementDisabled = (element) => {
-  if (element) {
-    return element.getAttribute("aria-disabled") === "true" || element?.matches(":disabled") || element?.disabled === true || element?.classList.contains("disabled");
-  }
-  return false;
+    if (element) {
+        return (element.getAttribute('aria-disabled') === 'true' ||
+            element?.matches(':disabled') ||
+            element?.disabled === true ||
+            element?.classList.contains('disabled'));
+    }
+    return false;
 };
-$:
-  $$slots.default, labelRef, htmlFor, findTarget();
+$: $$slots.default, labelRef, htmlFor, findTarget();
 $: {
-  targetDisabled = isElementDisabled(targetRef);
+    targetDisabled = isElementDisabled(targetRef);
 }
 const mutationCallback = (mutations) => {
-  let disabled = void 0;
-  for (let i = 0; i < mutations.length; i++) {
-    const mutation = mutations[i];
-    if (mutation.type === "attributes") {
-      if (mutation.attributeName === "aria-disabled" || mutation.attributeName === "disabled" || mutation.attributeName === "class") {
-        if (isElementDisabled(targetRef)) {
-          disabled = true;
-          break;
+    let disabled = undefined;
+    for (let i = 0; i < mutations.length; i++) {
+        const mutation = mutations[i];
+        if (mutation.type === 'attributes') {
+            if (mutation.attributeName === 'aria-disabled' ||
+                mutation.attributeName === 'disabled' ||
+                mutation.attributeName === 'class') {
+                if (isElementDisabled(targetRef)) {
+                    // a mutation caused the target to be disabled
+                    disabled = true;
+                    break;
+                }
+                // a mutation caused the target to be enabled
+                disabled = false;
+            }
         }
-        disabled = false;
-      }
     }
-  }
-  if (disabled !== void 0) {
-    targetDisabled = disabled;
-  }
+    // if we found a mutation that changed disabled, then set targetDisabled
+    if (disabled !== undefined) {
+        targetDisabled = disabled;
+    }
 };
 let mutationObserver = new MutationObserver(mutationCallback);
 $: {
-  mutationObserver.disconnect();
-  if (targetRef) {
-    mutationObserver.observe(targetRef, {
-      attributes: true
-    });
-  }
+    mutationObserver.disconnect();
+    if (targetRef) {
+        mutationObserver.observe(targetRef, {
+            attributes: true
+        });
+    }
 }
+// ----- Methods ----- //
 export const click = () => {
-  labelRef?.click();
+    labelRef?.click();
 };
 export const blur = () => {
-  labelRef?.blur();
+    labelRef?.blur();
 };
 export const focus = (options) => {
-  labelRef?.focus(options);
+    labelRef?.focus(options);
 };
+// ----- Event Handlers ----- //
 const onClick = () => {
-  if (forwardClick) {
-    targetRef?.click();
-  }
+    if (forwardClick) {
+        targetRef?.click();
+    }
 };
 </script>
 
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <label
   bind:this={labelRef}
   aria-disabled={targetDisabled}
-  class="sterling-label"
+  class={`sterling-label ${variant}`}
   class:disabled={targetDisabled}
   class:using-keyboard={$usingKeyboard}
+  class:vertical
   for={htmlFor}
   on:blur
   on:click
@@ -115,7 +149,15 @@ const onClick = () => {
   {...$$restProps}
 >
   {#if text || $$slots.text}
-    <slot name="text" disabled={targetDisabled} for={htmlFor} {forwardClick} {text} {required}>
+    <slot
+      name="text"
+      disabled={targetDisabled}
+      for={htmlFor}
+      {forwardClick}
+      {required}
+      {text}
+      {variant}
+    >
       <div class="text">
         {text}
       </div>
@@ -127,7 +169,7 @@ const onClick = () => {
     </div>
   {/if}
   {#if message}
-    <slot name="message" disabled={targetDisabled} {message} {required} {status}>
+    <slot name="message" disabled={targetDisabled} {message} {required} {status} {variant}>
       <div
         class="message"
         class:info={status === 'info'}
@@ -140,7 +182,7 @@ const onClick = () => {
     </slot>
   {/if}
   {#if required}
-    <slot name="required" {requiredReason}>
+    <slot name="required" {requiredReason} {variant}>
       <Tooltip showOn="hover">
         <span class="required-reason" slot="tip">{requiredReason}</span>
         <div class="required">*</div>
@@ -148,118 +190,3 @@ const onClick = () => {
     </slot>
   {/if}
 </label>
-
-<style>
-  .sterling-label {
-    background-color: var(--stsv-input__background-color);
-    border-color: var(--stsv-input__border-color);
-    border-radius: var(--stsv-input__border-radius);
-    border-style: var(--stsv-input__border-style);
-    border-width: var(--stsv-input__border-width);
-    box-sizing: border-box;
-    color: var(--stsv-input__color);
-    display: flex;
-    flex-direction: column;
-    font: inherit;
-    margin: 0;
-    overflow: visible;
-    padding: 0;
-    position: relative;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .sterling-label:not(.disabled):hover {
-    background-color: var(--stsv-input__background-color--hover);
-    border-color: var(--stsv-input__border-color--hover);
-    color: var(--stsv-input__color--hover);
-  }
-
-  .sterling-label.using-keyboard:focus-within {
-    border-color: var(--stsv-input__border-color--focus);
-    color: var(--stsv-input__color--focus);
-    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);
-  }
-
-  .sterling-label.disabled {
-    cursor: not-allowed;
-  }
-
-  .sterling-label.disabled * {
-    cursor: not-allowed;
-  }
-
-  .text {
-    color: var(--stsv-common__color--secondary);
-    font-size: 0.8em;
-    margin: 0.5em 0.7em 0.2em 0.2em;
-  }
-
-  .text:empty {
-    margin: 0;
-  }
-
-  .content {
-    display: grid;
-  }
-
-  .message {
-    box-sizing: border-box;
-    font-size: 0.8em;
-    background-color: var(--stsv-common__background-color--secondary);
-    color: var(--stsv-common__color--secondary);
-    padding: 0.5em;
-    width: 100%;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-  }
-
-  .message.info {
-    background-color: var(--stsv-status--info__background-color);
-    border-color: var(--stsv-status--info__border-color);
-    color: var(--stsv-status--info__color);
-  }
-
-  .message.success {
-    background-color: var(--stsv-status--success__background-color);
-    border-color: var(--stsv-status--success__border-color);
-    color: var(--stsv-status--success__color);
-  }
-
-  .message.warning {
-    background-color: var(--stsv-status--warning__background-color);
-    border-color: var(--stsv-status--warning__border-color);
-    color: var(--stsv-status--warning__color);
-  }
-
-  .message.error {
-    background-color: var(--stsv-status--danger__background-color);
-    border-color: var(--stsv_--danger-color);
-    color: var(--stsv-status--danger__color);
-  }
-
-  .required {
-    text-align: center;
-    font-weight: bold;
-    box-sizing: border-box;
-    width: 1em;
-    height: 1em;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-
-  .required-reason {
-    display: block;
-    padding: 4px;
-  }
-
-  @media (prefers-reduced-motion) {
-    .sterling-label,
-    .sterling-label::after,
-    .message {
-      transition: none;
-    }
-  }
-</style>

package/Label.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
         required?: boolean | undefined;
         requiredReason?: string | undefined;
         status?: string | undefined;
+        variant?: string | undefined;
+        vertical?: boolean | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -49,8 +51,9 @@ declare const __propDef: {
             disabled: boolean;
             for: string | undefined;
             forwardClick: boolean;
-            text: string | undefined;
             required: boolean;
+            text: string | undefined;
+            variant: string;
         };
         default: {};
         message: {
@@ -58,9 +61,11 @@ declare const __propDef: {
             message: string | undefined;
             required: boolean;
             status: string;
+            variant: string;
         };
         required: {
             requiredReason: string;
+            variant: string;
         };
     };
 };

package/Label.types.d.ts

@@ -1,4 +1,6 @@
-import type { LABEL_STATUSES } from './Label.constants';
+import type { LABEL_STATUSES, LABEL_VARIANTS } from './Label.constants';
 type LabelStatusTuple = typeof LABEL_STATUSES;
 export type LabelStatus = LabelStatusTuple[number];
+type LabelVariantTuple = typeof LABEL_VARIANTS;
+export type LabelVariant = LabelVariantTuple[number];
 export {};