@geoffcox/sterling-svelte 0.0.30 → 1.0.0

package/Switch.svelte

@@ -1,36 +1,37 @@
-<script>import { idGenerator } from "./idGenerator";
+<script>import { idGenerator } from './idGenerator';
+// ----- Props ----- //
 export let checked = false;
 export let disabled = false;
-export let colorful = false;
-export let offText = void 0;
-export let onText = void 0;
+/** The text appearing by the off position. Not used when the offLabel slot is filled. */
+export let offText = undefined;
+/** The text appearing near the on position. Not used when the onLabel slot is filled. */
+export let onText = undefined;
+/** Additional class names to apply. */
+export let variant = '';
+/** When true, the switch is displayed vertically. */
 export let vertical = false;
-const inputId = idGenerator.nextId("Switch");
+// ----- State ----- //
+const inputId = idGenerator.nextId('Switch');
 let inputRef;
 let switchWidth = 0;
 let switchHeight = 0;
 let thumbWidth = 0;
 let thumbHeight = 0;
-$:
-  switchSize = vertical ? switchHeight : switchWidth;
-$:
-  thumbSize = vertical ? thumbHeight : thumbWidth;
-$:
-  ratio = vertical ? checked ? 0 : 1 : checked ? 1 : 0;
-$:
-  valueOffset = (switchSize - thumbSize) * ratio;
-$:
-  hasOffLabel = $$slots.offLabel || offText !== void 0 && offText.length > 0;
-$:
-  hasOnLabel = $$slots.onLabel || onText !== void 0 && onText.length > 0;
+$: switchSize = vertical ? switchHeight : switchWidth;
+$: thumbSize = vertical ? thumbHeight : thumbWidth;
+$: ratio = vertical ? (checked ? 0 : 1) : checked ? 1 : 0;
+$: valueOffset = (switchSize - thumbSize) * ratio;
+$: hasOffLabel = $$slots.offLabel || (offText !== undefined && offText.length > 0);
+$: hasOnLabel = $$slots.onLabel || (onText !== undefined && onText.length > 0);
+// ----- 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);
 };
 </script>
 
@@ -38,7 +39,7 @@ export const focus = (options) => {
 	@component
 	A styled HTML input type=checkbox element.
 -->
-<div class="sterling-switch" class:colorful class:disabled class:vertical>
+<div class={`sterling-switch ${variant}`} class:disabled class:vertical>
   <input
     bind:this={inputRef}
     bind:checked
@@ -74,7 +75,7 @@ export const focus = (options) => {
   />
   {#if hasOffLabel}
     <div class="off-label">
-      <slot name="offLabel" {checked} {disabled} {inputId} {offText} {vertical}>
+      <slot name="offLabel" {checked} {disabled} {inputId} {offText} {variant} {vertical}>
         {#if offText}
           <label for={inputId}>{offText}</label>
         {/if}
@@ -92,7 +93,7 @@ export const focus = (options) => {
   </div>
   {#if hasOnLabel}
     <div class="on-label">
-      <slot name="onLabel" {checked} {disabled} {inputId} {onText} {vertical}>
+      <slot name="onLabel" {checked} {disabled} {inputId} {onText} {variant} {vertical}>
         {#if onText}
           <label for={inputId}>{onText}</label>
         {/if}
@@ -100,239 +101,3 @@ export const focus = (options) => {
     </div>
   {/if}
 </div>
-
-<style>
-  .sterling-switch {
-    cursor: pointer;
-    display: grid;
-    position: relative;
-  }
-
-  .sterling-switch input {
-    cursor: pointer;
-  }
-
-  .sterling-switch.disabled input {
-    cursor: not-allowed;
-  }
-
-  .sterling-switch:not(.vertical) {
-    align-content: center;
-    align-items: center;
-    column-gap: 0.5em;
-    grid-template-columns: auto auto auto;
-    grid-template-rows: auto;
-    justify-content: flex-start;
-    justify-items: flex-start;
-  }
-
-  .sterling-switch.vertical {
-    align-content: flex-start;
-    align-items: flex-start;
-    grid-template-columns: auto;
-    grid-template-rows: auto auto auto;
-    justify-content: center;
-    justify-items: center;
-    row-gap: 0.5em;
-  }
-
-  .sterling-switch.vertical .off-label {
-    grid-row: 3 / span 1;
-  }
-
-  .sterling-switch.vertical .on-label {
-    grid-row: 1 / span 1;
-  }
-
-  /* ----- input hidden ----- */
-
-  input {
-    font: inherit;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    opacity: 0;
-  }
-
-  /* ----- switch ----- */
-
-  .switch {
-    background-color: var(--stsv-input__background-color);
-    border-color: var(--stsv-input__border-color);
-    border-radius: 10000px;
-    border-style: var(--stsv-input__border-style);
-    border-width: var(--stsv-input__border-width);
-    box-sizing: border-box;
-    color: var(--stsv-input__color);
-    font: inherit;
-    pointer-events: none;
-    position: relative;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-    user-select: none;
-  }
-
-  .sterling-switch:hover .switch {
-    background-color: var(--stsv-input__background-color--hover);
-    border-color: var(--stsv-input__border-color--hover);
-    color: var(--stsv-input__color--hover);
-  }
-
-  input:focus-visible ~ .switch {
-    background-color: var(--stsv-input__background-color--focus);
-    border-color: var(--stsv-input__border-color--focus);
-    color: var(--stsv-common__color--focux);
-    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);
-  }
-
-  /* ----- switch vertical ----- */
-
-  .sterling-switch:not(.vertical) .switch {
-    width: 2em;
-    height: 1.25em;
-  }
-
-  .sterling-switch.vertical .switch {
-    width: 1.25em;
-    height: 2em;
-  }
-
-  /* ----- labels ----- */
-
-  label {
-    color: var(--stsv-common__color);
-    transition: color 250ms;
-    font: inherit;
-  }
-
-  .off-label,
-  .on-label {
-    padding-top: var(--stsv-button__border-width);
-  }
-
-  /* ----- switch colorful ----- */
-
-  .sterling-switch.colorful .switch {
-    background-color: var(--stsv-input--colorful__background-color);
-    border-color: var(--stsv-input--colorful__border-color);
-    color: var(--stsv-input--colorful__color);
-  }
-
-  .sterling-switch.colorful:hover .switch {
-    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-switch.colorful input:focus-visible ~ .switch {
-    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);
-  }
-
-  /* ----- thumb ----- */
-
-  .thumb {
-    background-color: var(--stsv-button__background-color);
-    border-color: var(--stsv-button__border-color);
-    border-radius: 10000px;
-    border-style: var(--stsv-button__border-style);
-    border-width: var(--stsv-button__border-width);
-    box-sizing: border-box;
-    color: var(--stsv-button__color);
-    display: block;
-    font: inherit;
-    height: 1.25em;
-    position: absolute;
-    transition: background-color 250ms, color 250ms, border-color 250ms, transform 250ms;
-    width: 1.25em;
-  }
-
-  .sterling-switch:hover .thumb {
-    background-color: var(--stsv-button__background-color--hover);
-    border-color: var(--stsv-button__border-color--hover);
-    color: var(--stsv-button__color--hover);
-  }
-
-  .sterling-switch:active .thumb {
-    background-color: var(--stsv-button__background-color--active);
-    border-color: var(--stsv-button__border-color--active);
-    color: var(--stsv-button__color--hover);
-  }
-
-  /* ----- thumb colorful ----- */
-
-  .sterling-switch.colorful .thumb {
-    background-color: var(--stsv-button--colorful__background-color);
-    border-color: var(--stsv-button--colorful__border-color);
-    color: var(--stsv-button--colorful__color);
-  }
-
-  .sterling-switch.colorful:hover .thumb {
-    background-color: var(--stsv-button--colorful__background-color--hover);
-    border-color: var(--stsv-button--colorful__border-color--hover);
-    color: var(--stsv-button--colorful__color--hover);
-  }
-
-  .sterling-switch.colorful:active .thumb {
-    background-color: var(--stsv-button--colorful__background-color--active);
-    border-color: var(--stsv-button--colorful__border-color--active);
-    color: var(--stsv-button--colorful__color--hover);
-  }
-
-  /* ----- thumb disabled ----- */
-
-  .sterling-switch .thumb::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;
-    border-radius: 10000px;
-    content: '';
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    pointer-events: none;
-    transition: opacity 250ms;
-  }
-
-  .sterling-switch.disabled .thumb::after {
-    opacity: 1;
-  }
-
-  /* ----- thumb vertical ----- */
-
-  .sterling-switch:not(.vertical) .thumb {
-    top: calc(-1 * var(--stsv-button__border-width));
-    transform: translateX(calc(var(--thumb-offset) - var(--stsv-button__border-width)));
-  }
-
-  .sterling-switch.vertical .thumb {
-    left: calc(-1 * var(--stsv-button__border-width));
-    transform: translateY(calc(var(--thumb-offset) - var(--stsv-button__border-width)));
-  }
-
-  /* ----- reduced motion ----- */
-
-  @media (prefers-reduced-motion) {
-    .switch,
-    .thumb,
-    .thumb::after,
-    label {
-      transition: none;
-    }
-  }
-</style>

package/Switch.svelte.d.ts

@@ -4,9 +4,9 @@ declare const __propDef: {
         [x: string]: any;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
-        colorful?: boolean | undefined;
         offText?: string | undefined;
         onText?: string | undefined;
+        variant?: string | undefined;
         vertical?: boolean | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
@@ -47,6 +47,7 @@ declare const __propDef: {
             disabled: boolean;
             inputId: string;
             offText: string | undefined;
+            variant: string;
             vertical: boolean;
         };
         onLabel: {
@@ -54,6 +55,7 @@ declare const __propDef: {
             disabled: boolean;
             inputId: string;
             onText: string | undefined;
+            variant: string;
             vertical: boolean;
         };
     };

package/Tab.svelte

@@ -1,43 +1,48 @@
-<script>import { getContext } from "svelte";
-import { TAB_LIST_CONTEXT_KEY } from "./TabList.constants";
-import { usingKeyboard } from "./stores/usingKeyboard";
+<script>import { getContext } from 'svelte';
+import { TAB_LIST_CONTEXT_KEY } from './TabList.constants';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
+// ----- Props ----- //
+/**
+ * When true, the tab is disabled.
+ * The tab is also disabled when its parent tab list is disabled.
+ */
 export let disabled = false;
+/** When true, the tab is selected. */
 export let selected = false;
-export let text = void 0;
+/** The text of the tab. Not used when the default slot is filled. */
+export let text = undefined;
+/** The value uniquely identifying this tab within the tab list. */
 export let value;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let tabRef;
-const {
-  colorful,
-  disabled: tabListDisabled,
-  selectedValue,
-  vertical
-} = getContext(TAB_LIST_CONTEXT_KEY);
-$:
-  _disabled = $tabListDisabled || disabled;
+const { disabled: tabListDisabled, selectedValue, vertical } = getContext(TAB_LIST_CONTEXT_KEY);
+$: _disabled = $tabListDisabled || disabled;
 $: {
-  selected = $selectedValue === value;
+    selected = $selectedValue === value;
 }
 $: {
-  if (selected) {
-    selectedValue.set(value);
-  }
+    if (selected) {
+        selectedValue.set(value);
+    }
 }
+// ----- Methods ----- //
 export const click = () => {
-  tabRef?.click();
+    tabRef?.click();
 };
 export const blur = () => {
-  tabRef?.blur();
+    tabRef?.blur();
 };
 export const focus = (options) => {
-  tabRef?.focus(options);
+    tabRef?.focus(options);
 };
 </script>
 
 <button
   bind:this={tabRef}
   aria-selected={selected}
-  class="sterling-tab"
-  class:colorful={$colorful}
+  class={`sterling-tab ${variant}`}
   disabled={_disabled}
   class:selected
   class:using-keyboard={$usingKeyboard}
@@ -79,7 +84,7 @@ export const focus = (options) => {
   on:wheel|passive
 >
   <div class="content">
-    <slot disabled={_disabled} {selected} {value} {text}>
+    <slot disabled={_disabled} {selected} {text} {value} {variant}>
       <div class="text">
         {text || value}
       </div>
@@ -87,156 +92,3 @@ export const focus = (options) => {
   </div>
   <div class="indicator" />
 </button>
-
-<style>
-  .sterling-tab {
-    align-content: center;
-    align-items: center;
-    background-color: var(--stsv-common__background-color);
-    border-color: transparent;
-    border-radius: var(--stsv-button__border-radius);
-    border-style: var(--stsv-common__border-style);
-    border-width: 0;
-    box-sizing: border-box;
-    color: var(--stsv-common__color);
-    cursor: pointer;
-    display: grid;
-    font: inherit;
-    overflow: hidden;
-    padding: 0.5em 1em 0.25em 1em;
-    position: relative;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-    white-space: nowrap;
-  }
-
-  .sterling-tab:not(.vertical) {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1em;
-    justify-content: center;
-    justify-items: center;
-    row-gap: 0.15em;
-  }
-
-  .sterling-tab.vertical {
-    grid-template-columns: auto 1em;
-    grid-template-rows: 1fr;
-    align-content: center;
-    align-items: center;
-    justify-content: flex-end;
-    justify-items: flex-end;
-    column-gap: 0.15em;
-  }
-
-  .sterling-tab.using-keyboard:focus-visible {
-    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);
-  }
-
-  /* ----- disabled -----*/
-
-  .sterling-tab:disabled {
-    cursor: not-allowed;
-    outline: none;
-  }
-
-  .sterling-tab::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;
-  }
-
-  .sterling-tab:disabled::after {
-    opacity: 1;
-  }
-
-  /* ----- content -----*/
-
-  .content {
-    padding: 0 0.2em;
-  }
-
-  .sterling-tab.vertical .content .text {
-    padding-top: 0.25em;
-  }
-
-  /* ----- indicator -----*/
-
-  .indicator {
-    background-color: transparent;
-    border-radius: 10000px;
-    transition: background-color 250ms;
-  }
-
-  .sterling-tab:not(.vertical) .indicator {
-    justify-self: stretch;
-    height: 0.4em;
-  }
-
-  .sterling-tab.vertical .indicator {
-    align-self: stretch;
-    width: 0.4em;
-  }
-
-  .sterling-tab:not(.selected):not(:active):hover .indicator {
-    background-color: var(--stsv-input__border-color--hover);
-    opacity: 0.3;
-  }
-
-  .sterling-tab:active .indicator {
-    background-color: var(--stsv-input__border-color--selected);
-  }
-
-  .sterling-tab.selected .indicator {
-    background-color: var(--stsv-input__border-color--selected);
-  }
-
-  /* ----- indicator colorful -----*/
-
-  .sterling-tab.colorful:not(.selected):not(:active):hover .indicator {
-    background-color: var(--stsv-input--colorful__border-color--hover);
-  }
-
-  .sterling-tab.colorful:active .indicator {
-    background-color: var(--stsv-input--colorful__border-color--selected);
-  }
-
-  .sterling-tab.colorful.selected .indicator {
-    background-color: var(--stsv-input--colorful__border-color--selected);
-  }
-
-  /* ----- indicator disabled -----*/
-
-  .sterling-tab:disabled:not(.selected) .indicator,
-  .sterling-tab:disabled:not(.selected):hover .indicator,
-  .sterling-tab:disabled:not(.selected):active .indicator {
-    background-color: transparent;
-  }
-
-  /* ----- reduced motion -----*/
-
-  @media (prefers-reduced-motion) {
-    .sterling-tab,
-    .sterling-tab::after,
-    .indicator {
-      transition: none;
-    }
-  }
-</style>

package/Tab.svelte.d.ts

@@ -3,11 +3,12 @@ declare const __propDef: {
     props: {
         /**
            * When true, the tab is disabled.
-           * The tab is also disabled if the tab list is disabled.
+           * The tab is also disabled when its parent tab list is disabled.
            */ disabled?: boolean | undefined;
         /** When true, the tab is selected. */ selected?: boolean | undefined;
-        /** The text of the tab when the default slot is not replaced. */ text?: string | undefined;
-        /** The value uniquely identifying this item within the tab list. */ value: string;
+        /** The text of the tab. Not used when the default slot is filled. */ text?: string | undefined;
+        /** The value uniquely identifying this tab within the tab list. */ value: string;
+        /** Additional class names to apply. */ variant?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -51,8 +52,9 @@ declare const __propDef: {
         default: {
             disabled: boolean;
             selected: boolean;
-            value: string;
             text: string | undefined;
+            value: string;
+            variant: string;
         };
     };
 };