@geoffcox/sterling-svelte 0.0.22 → 0.0.24

package/Radio.svelte

@@ -43,7 +43,7 @@ onMount(() => {
 	@component
 	A styled HTML input type=radio element with optional label.
 -->
-<div class="sterling-radio">
+<div class="sterling-radio" class:disabled>
   <div class="container">
     <input
       bind:this={radioRef}
@@ -56,6 +56,12 @@ onMount(() => {
       on:change
       on:change={onChange}
       on:dblclick
+      on:dragend
+      on:dragenter
+      on:dragleave
+      on:dragover
+      on:dragstart
+      on:drop
       on:focus
       on:focusin
       on:focusout
@@ -70,34 +76,30 @@ onMount(() => {
       on:mouseover
       on:mouseout
       on:mouseup
-      on:toggle
       on:wheel
       {...$$restProps}
     />
     <div class="indicator" />
   </div>
   {#if $$slots.default}
-    <div class="label">
-      <Label {disabled} for={id}>
-        <slot {checked} {disabled} {group} inputId={id} value={$$restProps.value}>
-          {$$restProps.value}
-        </slot>
-      </Label>
-    </div>
+    <Label {disabled} for={id}>
+      <slot {checked} {disabled} {group} inputId={id} value={$$restProps.value}>
+        {$$restProps.value}
+      </slot>
+    </Label>
   {/if}
 </div>
 
 <style>
   .sterling-radio {
-    display: inline-flex;
-    align-content: stretch;
-    align-items: stretch;
+    align-content: center;
+    align-items: center;
     box-sizing: border-box;
+    display: inline-flex;
     font: inherit;
-    gap: 0.4em;
+    margin: 0;
     outline: none;
     padding: 0;
-    margin: 0;
   }
   /* 
 		The container 
@@ -111,6 +113,7 @@ onMount(() => {
     font: inherit;
     display: flex;
     align-items: center;
+    margin-right: 0.25em;
   }
 
   /*
@@ -151,6 +154,11 @@ onMount(() => {
     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);
@@ -158,11 +166,6 @@ onMount(() => {
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  input:disabled + .indicator {
-    background-color: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv-Common__border-color--disabled);
-  }
-
   .indicator::after {
     background-color: transparent;
     border-radius: 10000px;
@@ -180,18 +183,32 @@ onMount(() => {
     background-color: var(--stsv-Input__color);
   }
 
-  input:checked:disabled + .indicator::after {
-    background-color: var(--stsv-Common__color--disabled);
+  .sterling-radio.disabled * {
+    cursor: not-allowed;
+  }
+
+  .container::after {
+    background: var(--stsv-Disabled__background);
+    border-radius: 10000px;
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
   }
 
-  .label {
-    user-select: none;
-    margin-top: 0.25em;
+  .sterling-radio.disabled .container::after {
+    opacity: 1;
   }
 
   @media (prefers-reduced-motion) {
     .indicator,
-    .indicator::after {
+    .indicator::after,
+    .container::after {
       transition: none;
     }
   }

package/Radio.svelte.d.ts

@@ -15,6 +15,12 @@ declare const __propDef: {
         click: MouseEvent;
         change: Event;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;
@@ -29,7 +35,6 @@ declare const __propDef: {
         mouseover: MouseEvent;
         mouseout: MouseEvent;
         mouseup: MouseEvent;
-        toggle: Event;
         wheel: WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/Select.svelte

@@ -176,6 +176,12 @@ const onListSelect = (event) => {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -249,6 +255,7 @@ const onListSelect = (event) => {
     grid-template-rows: auto;
     outline: none;
     padding: 0;
+    position: relative;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -269,13 +276,27 @@ const onListSelect = (event) => {
   }
 
   .sterling-select.disabled {
-    background-color: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv--Common__border-color--disabled);
-    color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
     outline: none;
   }
 
+  .sterling-select::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
+  }
+
+  .sterling-select.disabled::after {
+    opacity: 1;
+  }
+
   .sterling-select.composed,
   .sterling-select.composed:hover,
   .sterling-select.composed.focus,
@@ -285,6 +306,10 @@ const onListSelect = (event) => {
     outline: none;
   }
 
+  .sterling-select.composed.disabled::after {
+    opacity: 0;
+  }
+
   .value {
     padding: 0.5em;
   }
@@ -349,7 +374,8 @@ const onListSelect = (event) => {
   }
 
   @media (prefers-reduced-motion) {
-    .sterling-select {
+    .sterling-select,
+    .sterling-select::after {
       transition: none;
     }
   }

package/Select.svelte.d.ts

@@ -17,6 +17,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Slider.svelte

@@ -146,6 +146,12 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -230,6 +236,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     height: 1.5em;
     overflow: hidden;
     padding: 0;
+    position: relative;
     text-decoration: none;
     transition: background-color 250ms, color 250ms, border-color 250ms;
     white-space: nowrap;
@@ -321,19 +328,26 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
 
   /* ----- disabled ----- */
 
-  .sterling-slider.disabled .track {
-    background: var(--stsv-Common__background-color--disabled);
+  .sterling-slider.disabled .thumb {
+    cursor: not-allowed;
+    outline: none;
   }
 
-  .sterling-slider.disabled .fill {
-    background: var(--stsv-Common__color--disabled);
+  .sterling-slider .thumb::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
   }
 
-  .sterling-slider.disabled .thumb {
-    background-color: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv-Common__border-color--disabled);
-    color: var(--stsv-Common__color--disabled);
-    cursor: not-allowed;
+  .sterling-slider.disabled .thumb::after {
+    opacity: 1;
   }
 
   .sterling-slider.composed,
@@ -349,7 +363,8 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     .sterling-slider,
     .track,
     .fill,
-    .thumb {
+    .thumb,
+    .thumb::after {
       transition: none;
     }
   }

package/Slider.svelte.d.ts

@@ -18,6 +18,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/Switch.svelte

@@ -49,6 +49,12 @@ export const focus = (options) => {
     on:click
     on:change
     on:dblclick
+    on:dragend
+    on:dragenter
+    on:dragleave
+    on:dragover
+    on:dragstart
+    on:drop
     on:focus
     on:focusin
     on:focusout
@@ -63,7 +69,6 @@ export const focus = (options) => {
     on:mouseover
     on:mouseout
     on:mouseup
-    on:toggle
     on:wheel
     {...$$restProps}
   />
@@ -103,6 +108,14 @@ export const focus = (options) => {
     position: relative;
   }
 
+  .sterling-switch input {
+    cursor: pointer;
+  }
+
+  .sterling-switch.disabled input {
+    cursor: not-allowed;
+  }
+
   .sterling-switch:not(.vertical) {
     align-items: center;
     column-gap: 0.5em;
@@ -170,12 +183,6 @@ export const focus = (options) => {
     outline-width: var(--stsv-Common__outline-width);
   }
 
-  .sterling-switch.disabled .switch {
-    background-color: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv-Common__border-color--disabled);
-    color: var(--stsv-Common__color--disabled);
-  }
-
   .sterling-switch:not(.vertical) .switch {
     width: 2em;
     height: 1.25em;
@@ -199,7 +206,6 @@ export const focus = (options) => {
     border-width: var(--stsv-Button__border-width);
     box-sizing: border-box;
     color: var(--stsv-Button__color);
-    cursor: pointer;
     display: block;
     font: inherit;
     height: 1.25em;
@@ -220,10 +226,21 @@ export const focus = (options) => {
     color: var(--stsv-Button__color--hover);
   }
 
-  .sterling-switch.disabled .thumb {
-    background-color: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv-Common__border-color--disabled);
-    color: var(--stsv-Common__color--disabled);
+  .sterling-switch .thumb::after {
+    background: var(--stsv-Disabled__background);
+    bottom: 0;
+    content: '';
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+    transition: opacity 250ms;
+  }
+
+  .sterling-switch.disabled .thumb::after {
+    opacity: 1;
   }
 
   .sterling-switch:not(.vertical) .thumb {
@@ -235,4 +252,12 @@ export const focus = (options) => {
     left: calc(-1 * var(--stsv-Button__border-width));
     transform: translateY(calc(var(--thumb-offset) - var(--stsv-Button__border-width)));
   }
+
+  @media (prefers-reduced-motion) {
+    .switch,
+    .thumb,
+    .thumb::after {
+      transition: none;
+    }
+  }
 </style>

package/Switch.svelte.d.ts

@@ -16,6 +16,12 @@ declare const __propDef: {
         click: MouseEvent;
         change: Event;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;
@@ -30,7 +36,6 @@ declare const __propDef: {
         mouseover: MouseEvent;
         mouseout: MouseEvent;
         mouseup: MouseEvent;
-        toggle: Event;
         wheel: WheelEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/Tab.svelte

@@ -47,6 +47,12 @@ export const focus = (options) => {
   on:blur
   on:click
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -96,6 +102,7 @@ export const focus = (options) => {
     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;
@@ -138,8 +145,25 @@ export const focus = (options) => {
   }
 
   .sterling-tab:disabled {
-    color: var(--stsv-Common__color--disabled);
     cursor: not-allowed;
+    outline: none;
+  }
+
+  .sterling-tab::after {
+    background: var(--stsv-Disabled__background);
+    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 {
@@ -184,7 +208,11 @@ export const focus = (options) => {
     background-color: var(--stsv-Input__color);
   }
 
-  .sterling-tab.selected:disabled .indicator {
-    background-color: var(--stsv-Common__color--disabled);
+  @media (prefers-reduced-motion) {
+    .sterling-tab,
+    .sterling-tab::after,
+    .indicator {
+      transition: none;
+    }
   }
 </style>

package/Tab.svelte.d.ts

@@ -13,6 +13,12 @@ declare const __propDef: {
         blur: FocusEvent;
         click: MouseEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;

package/TabList.svelte

@@ -193,6 +193,12 @@ setContext(TAB_LIST_CONTEXT_KEY, {
   on:copy
   on:cut
   on:dblclick
+  on:dragend
+  on:dragenter
+  on:dragleave
+  on:dragover
+  on:dragstart
+  on:drop
   on:focus
   on:focusin
   on:focusout
@@ -228,7 +234,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
     grid-auto-flow: column;
     grid-template-columns: repeat(auto-fill, auto);
     grid-template-rows: 1fr;
-    overflow-x: scroll;
+    overflow-x: auto;
     overflow-y: hidden;
   }
 
@@ -237,7 +243,7 @@ setContext(TAB_LIST_CONTEXT_KEY, {
     grid-template-rows: auto;
     grid-template-columns: 1fr;
     overflow-x: hidden;
-    overflow-y: scroll;
+    overflow-y: auto;
     row-gap: 0.5em;
   }
 

package/TabList.svelte.d.ts

@@ -18,6 +18,12 @@ declare const __propDef: {
         copy: ClipboardEvent;
         cut: ClipboardEvent;
         dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
         focus: FocusEvent;
         focusin: FocusEvent;
         focusout: FocusEvent;