@geoffcox/sterling-svelte 1.0.11 → 1.0.12

package/dist/Callout.svelte

@@ -83,9 +83,7 @@ const getArrowPlacementStyle = (position) => {
             case 'top':
             case 'top-start':
             case 'top-end':
-                return (`bottom: -${arrowRef.offsetWidth}px;` +
-                    `filter: drop-shadow(-1px -2px 1px rgba(0,0,0,0.2));` +
-                    `transform:translate(0, -50%) rotate(135deg);`);
+                return (`bottom: -${arrowRef.offsetWidth}px;` + `transform:translate(0, -50%) rotate(135deg);`);
             case 'right':
             case 'right-start':
             case 'right-end':
@@ -97,9 +95,7 @@ const getArrowPlacementStyle = (position) => {
             case 'left':
             case 'left-start':
             case 'left-end':
-                return (`right: -${arrowRef.offsetWidth}px;` +
-                    `filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.2));` +
-                    `transform:translate(-50%, 0) rotate(45deg);`);
+                return (`right: -${arrowRef.offsetWidth}px;` + `transform:translate(-50%, 0) rotate(45deg);`);
         }
     }
     return '';
@@ -155,6 +151,18 @@ ensurePortalHost();
       bind:this={popupRef}
       class={`sterling-callout ${variant}`}
       class:open
+      class:top={popupPosition.placement === 'top'}
+      class:top-start={popupPosition.placement === 'top-start'}
+      class:top-end={popupPosition.placement === 'top-end'}
+      class:right={popupPosition.placement === 'right'}
+      class:right-start={popupPosition.placement === 'right-start'}
+      class:right-end={popupPosition.placement === 'right-end'}
+      class:bottom={popupPosition.placement === 'bottom'}
+      class:bottom-start={popupPosition.placement === 'bottom-start'}
+      class:bottom-end={popupPosition.placement === 'bottom-end'}
+      class:left={popupPosition.placement === 'left'}
+      class:left-start={popupPosition.placement === 'left-start'}
+      class:left-end={popupPosition.placement === 'left-end'}
       role="tooltip"
       on:blur
       on:click

package/dist/Dropdown.svelte

@@ -4,6 +4,7 @@ import { clickOutside } from './actions/clickOutside';
 import { idGenerator } from './idGenerator';
 import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
 import { slide } from 'svelte/transition';
+import { usingKeyboard } from './mediaQueries/usingKeyboard';
 const popupId = idGenerator.nextId('Dropdown-popup');
 // ----- Props ----- //
 /** Disables the dropdown. */
@@ -79,6 +80,8 @@ $: slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
   aria-expanded={open}
   class={`sterling-dropdown ${variant}`}
   class:disabled
+  class:open
+  class:using-keyboard={$usingKeyboard}
   role="combobox"
   tabindex="0"
   use:clickOutside={{ ignoreOthers: [popupContentRef] }}
@@ -126,7 +129,7 @@ $: slideMotion = !$prefersReducedMotion ? slide : slideNoOp;
     </div>
   </slot>
 
-  <Popover reference={dropdownRef} open={!disabled && open}>
+  <Popover reference={dropdownRef} open={!disabled && open} placement="bottom-start">
     <div
       class={`sterling-dropdown-popup-content ${variant}`}
       transition:slideMotion|global={{ duration: 200 }}

package/dist/css/Button.base.css

@@ -19,7 +19,10 @@
   padding: 0.5em 1em;
   text-decoration: none;
   text-overflow: ellipsis;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   white-space: nowrap;
   user-select: none;
 }
@@ -44,29 +47,6 @@
   outline-width: 2px;
 }
 
-.sterling-button:disabled {
-  cursor: not-allowed;
-  position: relative;
-}
-
-.sterling-button: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;
-}
-
 @media (prefers-reduced-motion) {
   .sterling-button {
     transition: none;

package/dist/css/Button.css

@@ -5,3 +5,4 @@
 @import url('./Button.secondary.colorful.css');
 @import url('./Button.tool.css');
 @import url('./Button.tool.colorful.css');
+@import url('./Button.disabled.css');

package/dist/css/Button.disabled.css

@@ -0,0 +1,22 @@
+.sterling-button:disabled {
+  cursor: not-allowed;
+  position: relative;
+}
+
+.sterling-button: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;
+}

package/dist/css/Callout.base.css

@@ -41,3 +41,15 @@
   /* The -100% and 200% allow for the drop-shadow to not be clipped */
   clip-path: polygon(-100% -100%, 200% -100%, 200% 200%, -100% -100%);
 }
+
+.sterling-callout.top-start .arrow,
+.sterling-callout.top .arrow,
+.sterling-callout.top-end .arrow {
+  filter: drop-shadow(-1px -2px 1px rgba(0, 0, 0, 0.2));
+}
+
+.sterling-callout.left-start .arrow,
+.sterling-callout.left .arrow,
+.sterling-callout.left-end .arrow {
+  filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.2));
+}

package/dist/css/Checkbox.base.css

@@ -50,7 +50,10 @@ and there is not a parent CSS selector.
   display: inline-block;
   height: 20px;
   position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   width: 20px;
   pointer-events: none;
 }
@@ -87,7 +90,9 @@ The checkmark is a rotated L centered in the box.
   top: 45%;
   transform: translate(-50%, -50%) rotate(45deg);
   transform-origin: center;
-  transition: border-color 250ms, opacity 150ms;
+  transition:
+    border-color 250ms,
+    opacity 150ms;
   width: 7px;
   opacity: 0;
 }
@@ -100,41 +105,12 @@ The checkmark is a rotated L centered in the box.
   border-color: var(--stsv-input__color--hover);
 }
 
-.sterling-checkbox.disabled,
-.sterling-checkbox.disabled input {
-  cursor: not-allowed;
-}
-
-.sterling-checkbox .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))
-  );
-  bottom: 0;
-  content: '';
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  pointer-events: none;
-  transition: opacity 250ms;
-}
-
 .sterling-checkbox > label {
   color: var(--stsv-common__color);
   transition: color 250ms;
   font: inherit;
 }
 
-.sterling-checkbox.disabled .container::after {
-  opacity: 1;
-}
-
 @media (prefers-reduced-motion) {
   .sterling-checkbox .indicator,
   .sterling-checkbox .indicator::after,

package/dist/css/Checkbox.css

@@ -1,2 +1,3 @@
 @import url('./Checkbox.base.css');
 @import url('./Checkbox.colorful.css');
+@import url('./Checkbox.disabled.css');

package/dist/css/Checkbox.disabled.css

@@ -0,0 +1,28 @@
+.sterling-checkbox.disabled,
+.sterling-checkbox.disabled input {
+  cursor: not-allowed;
+}
+
+.sterling-checkbox .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))
+  );
+  bottom: 0;
+  content: '';
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+  transition: opacity 250ms;
+}
+
+.sterling-checkbox.disabled .container::after {
+  opacity: 1;
+}

package/dist/css/Dropdown.base.css

@@ -14,7 +14,10 @@
   overflow: hidden;
   padding: 0;
   position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-dropdown:hover {
@@ -33,51 +36,6 @@
   outline-width: 2px;
 }
 
-.sterling-dropdown.disabled {
-  cursor: not-allowed;
-  outline: none;
-}
-
-.sterling-dropdown.disabled .button {
-  cursor: not-allowed;
-}
-
-.sterling-dropdown::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-dropdown.disabled::after {
-  opacity: 1;
-}
-
-.sterling-dropdown.composed,
-.sterling-dropdown.composed:hover,
-.sterling-dropdown.composed.focus {
-  background: none;
-  border: none;
-  outline: none;
-}
-
-.sterling-dropdown.composed.disabled::after {
-  opacity: 0;
-}
-
 .sterling-dropdown > .value {
   overflow: hidden;
 }

package/dist/css/Dropdown.composed.css

@@ -0,0 +1,11 @@
+.sterling-dropdown.composed,
+.sterling-dropdown.composed:hover,
+.sterling-dropdown.composed.focus {
+  background: none;
+  border: none;
+  outline: none;
+}
+
+.sterling-dropdown.composed.disabled::after {
+  opacity: 0;
+}

package/dist/css/Dropdown.css

@@ -1,2 +1,4 @@
 @import url('./Dropdown.base.css');
 @import url('./Dropdown.colorful.css');
+@import url('./Dropdown.disabled.css');
+@import url('./Dropdown.composed.css');

package/dist/css/Dropdown.disabled.css

@@ -0,0 +1,32 @@
+.sterling-dropdown.disabled {
+  cursor: not-allowed;
+  outline: none;
+}
+
+.sterling-dropdown.disabled .button {
+  cursor: not-allowed;
+}
+
+.sterling-dropdown::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-dropdown.disabled::after {
+  opacity: 1;
+}

package/dist/css/HexColorSliders.base.css

@@ -56,31 +56,12 @@
       #444 75%,
       #444
     ),
-    repeating-linear-gradient(
-      var(--stsv-common--disabled__stripe-angle),
-      #444 25%,
-      #eee 25%,
-      #eee 75%,
-      #444 75%,
-      #444
-    ),
-    repeating-linear-gradient(
-      -var(--stsv-common--disabled__stripe-angle),
-      #444 25%,
-      transparent 25%,
-      transparent 75%,
-      #444 75%,
-      #444
-    ),
-    repeating-linear-gradient(
-      -var(--stsv-common--disabled__stripe-angle),
-      #444 25%,
-      #eee 25%,
-      #eee 75%,
-      #444 75%,
-      #444
-    );
-  background-position: 0 0, 4px 4px;
+    repeating-linear-gradient(135deg, #444 25%, #eee 25%, #eee 75%, #444 75%, #444),
+    repeating-linear-gradient(-135deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444),
+    repeating-linear-gradient(-135deg, #444 25%, #eee 25%, #eee 75%, #444 75%, #444);
+  background-position:
+    0 0,
+    4px 4px;
   background-size: 8px 8px;
 }
 

package/dist/css/HslColorSliders.base.css

@@ -67,38 +67,19 @@
   background-color: #eee;
   opacity: 0.1;
   background-image: repeating-linear-gradient(
-      var(--stsv-common--disabled__stripe-angle),
+      135deg,
       #444 25%,
       transparent 25%,
       transparent 75%,
       #444 75%,
       #444
     ),
-    repeating-linear-gradient(
-      var(--stsv-common--disabled__stripe-angle),
-      #444 25%,
-      #eee 25%,
-      #eee 75%,
-      #444 75%,
-      #444
-    ),
-    repeating-linear-gradient(
-      -var(--stsv-common--disabled__stripe-angle),
-      #444 25%,
-      transparent 25%,
-      transparent 75%,
-      #444 75%,
-      #444
-    ),
-    repeating-linear-gradient(
-      -var(--stsv-common--disabled__stripe-angle),
-      #444 25%,
-      #eee 25%,
-      #eee 75%,
-      #444 75%,
-      #444
-    );
-  background-position: 0 0, 4px 4px;
+    repeating-linear-gradient(135deg, #444 25%, #eee 25%, #eee 75%, #444 75%, #444),
+    repeating-linear-gradient(-135deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444),
+    repeating-linear-gradient(-135deg, #444 25%, #eee 25%, #eee 75%, #444 75%, #444);
+  background-position:
+    0 0,
+    4px 4px;
   background-size: 8px 8px;
 }
 

package/dist/css/Input.base.css

@@ -54,37 +54,6 @@ input::placeholder {
   color: var(--stsv-common__color--subtle);
 }
 
-/* ----- disabled ----- */
-
-.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;
-}
-
-.sterling-input:not(.composed).disabled::after {
-  opacity: 1;
-}
-
 /* ----- label ----- */
 
 .sterling-input-label {

package/dist/css/Input.composed.css

@@ -6,3 +6,7 @@
   border-color: transparent;
   outline: none;
 }
+
+.sterling-input.composed.disabled::after {
+  opacity: 0;
+}

package/dist/css/Input.css

@@ -1,3 +1,4 @@
 @import url('./Input.base.css');
 @import url('./Input.colorful.css');
+@import url('./Input.disabled.css');
 @import url('./Input.composed.css');

package/dist/css/Input.disabled.css

@@ -0,0 +1,24 @@
+.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;
+}

package/dist/css/Label.base.css

@@ -11,7 +11,10 @@
   overflow: visible;
   padding: 0;
   position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 /* ----- horizontal | vertical ----- */
@@ -27,16 +30,6 @@
   grid-template-areas: 'text' 'content' 'message';
 }
 
-/* ----- disabled ----- */
-
-.sterling-label.disabled {
-  cursor: not-allowed;
-}
-
-.sterling-label.disabled * {
-  cursor: not-allowed;
-}
-
 /* ----- text ----- */
 
 .sterling-label .text {
@@ -66,7 +59,10 @@
   grid-area: message;
   padding: 0.5em;
   width: 100%;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-label .message.info {

package/dist/css/Label.css

@@ -2,3 +2,4 @@
 @import url('./Label.boxed.css');
 @import url('./Label.colorful.css');
 @import url('./Label.boxed.colorful.css');
+@import url('./Label.disabled.css');

package/dist/css/Label.disabled.css

@@ -0,0 +1,9 @@
+/* ----- disabled ----- */
+
+.sterling-label.disabled {
+  cursor: not-allowed;
+}
+
+.sterling-label.disabled * {
+  cursor: not-allowed;
+}

package/dist/css/Link.base.css

@@ -34,17 +34,6 @@
   color: var(--stsv-input__color--active);
 }
 
-/* ----- disabled ----- */
-
-.sterling-link.disabled,
-.sterling-link.disabled:visited,
-.sterling-link.disabled:hover,
-.sterling-link.disabled:active {
-  border-bottom-color: var(--stsv-common__color--faint);
-  pointer-events: none;
-  position: relative;
-}
-
 /* ----- prefers-reduced-motion ----- */
 
 @media (prefers-reduced-motion) {

package/dist/css/Link.css

@@ -8,3 +8,4 @@
 @import url('./Link.undecorated.colorful.css');
 @import url('./Link.undecorated.ghost.css');
 @import url('./Link.undecorated.underline.css');
+@import url('./Link.disabled.css');

package/dist/css/Link.disabled.css

@@ -0,0 +1,10 @@
+/* ----- disabled ----- */
+
+.sterling-link.disabled,
+.sterling-link.disabled:visited,
+.sterling-link.disabled:hover,
+.sterling-link.disabled:active {
+  border-bottom-color: var(--stsv-common__color--faint);
+  pointer-events: none;
+  position: relative;
+}

package/dist/css/List.base.css

@@ -13,7 +13,10 @@
   outline: none;
   padding: 0;
   position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-list.horizontal {
@@ -37,19 +40,6 @@
   outline-width: 2px;
 }
 
-.sterling-list.composed,
-.sterling-list.composed:hover,
-.sterling-list.composed.using-keyboard:focus-within,
-.sterling-list.composed.disabled {
-  background: none;
-  border: none;
-  outline: none;
-}
-
-.sterling-list.disabled * {
-  cursor: not-allowed;
-}
-
 /* ----- container - a layout panel that grows with the items ----- */
 
 .sterling-list .container {
@@ -84,10 +74,6 @@
   transition: opacity 250ms;
 }
 
-.sterling-list.disabled .container::after {
-  opacity: 1;
-}
-
 /* ----- media queries ----- */
 
 @media (prefers-reduced-motion) {

package/dist/css/List.composed.css

@@ -0,0 +1,8 @@
+.sterling-list.composed,
+.sterling-list.composed:hover,
+.sterling-list.composed.using-keyboard:focus-within,
+.sterling-list.composed.disabled {
+  background: none;
+  border: none;
+  outline: none;
+}

package/dist/css/List.css

@@ -1 +1,3 @@
 @import url('./List.base.css');
+@import url('./List.disabled.css');
+@import url('./List.composed.css');