@geoffcox/sterling-svelte 1.0.10 → 1.0.12

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

@@ -20,7 +20,10 @@
   margin: 0;
   outline: none;
   padding: 0.5em;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   width: 100%;
 }
 
@@ -51,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.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

@@ -5,14 +5,17 @@
   border-right: none;
   border-radius: 0;
   border-bottom-style: solid;
-  border-bottom-width: calc(2px);
+  border-bottom-width: 2px;
   border-bottom-color: var(--stsv-common__border-color);
   color: var(--stsv-common__color);
   cursor: pointer;
   font: inherit;
   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;
 }
@@ -31,18 +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__border-color--disabled);
-  color: var(--stsv-common__color--disabled);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
 /* ----- prefers-reduced-motion ----- */
 
 @media (prefers-reduced-motion) {

package/dist/css/Link.css

@@ -2,5 +2,10 @@
 @import url('./Link.colorful.css');
 @import url('./Link.ghost.css');
 @import url('./Link.ghost.colorful.css');
+@import url('./Link.text-underline.css');
+@import url('./Link.text-underline.ghost.css');
 @import url('./Link.undecorated.css');
 @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/Link.text-underline.css

@@ -0,0 +1,8 @@
+.sterling-link.text-underline,
+.sterling-link.text-underline:hover,
+.sterling-link.text-underline:active,
+.sterling-link.text-underline:visited {
+  border-bottom-width: 0;
+  border-bottom-color: transparent;
+  text-decoration: underline;
+}

package/dist/css/Link.text-underline.ghost.css

@@ -0,0 +1,13 @@
+.sterling-link.text-underline.ghost,
+.sterling-link.text-underline.ghost:visited {
+  border-bottom-color: transparent;
+  border-bottom-width: 0;
+  text-decoration: none;
+}
+
+.sterling-link.text-underline.ghost:hover,
+.sterling-link.text-underline.ghost:active {
+  border-bottom-color: transparent;
+  border-bottom-width: 0;
+  text-decoration: underline;
+}

package/dist/css/Link.undecorated.colorful.css

@@ -2,5 +2,7 @@
 .sterling-link.undecorated.colorful:hover,
 .sterling-link.undecorated.colorful:active,
 .sterling-link.undecorated.colorful:visited {
+  border-bottom-width: 0;
   border-bottom-color: transparent;
+  text-decoration: none;
 }

package/dist/css/Link.undecorated.css

@@ -2,5 +2,7 @@
 .sterling-link.undecorated:hover,
 .sterling-link.undecorated:active,
 .sterling-link.undecorated:visited {
+  border-bottom-width: 0;
   border-bottom-color: transparent;
+  text-decoration: none;
 }

package/dist/css/Link.undecorated.ghost.css

@@ -0,0 +1,8 @@
+.sterling-link.undecorated.ghost,
+.sterling-link.undecorated.ghost:hover,
+.sterling-link.undecorated.ghost:active,
+.sterling-link.undecorated.ghost:visited {
+  border-bottom-width: 0;
+  border-bottom-color: transparent;
+  text-decoration: none;
+}

package/dist/css/Link.undecorated.underline.css

@@ -0,0 +1,8 @@
+.sterling-link.undecorated.underline,
+.sterling-link.undecorated.underline:hover,
+.sterling-link.undecorated.underline:active,
+.sterling-link.undecorated.underline:visited {
+  border-bottom-width: 0;
+  border-bottom-color: transparent;
+  text-decoration: none;
+}

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');

package/dist/css/List.disabled.css

@@ -0,0 +1,7 @@
+.sterling-list.disabled * {
+  cursor: not-allowed;
+}
+
+.sterling-list.disabled .container::after {
+  opacity: 1;
+}

package/dist/css/ListItem.base.css

@@ -8,7 +8,10 @@
   position: relative;
   outline: 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;
 }
 
@@ -22,35 +25,6 @@
   color: var(--stsv-button__color--active);
 }
 
-.sterling-list-item.disabled {
-  cursor: not-allowed;
-  outline: none;
-}
-
-.sterling-list-item::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-list-item.item-disabled:not(.list-disabled)::after {
-  opacity: 1;
-}
-
 @media (prefers-reduced-motion) {
   .sterling-list-item,
   .sterling-list-item::after {

package/dist/css/ListItem.css

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

package/dist/css/ListItem.disabled.css

@@ -0,0 +1,28 @@
+.sterling-list-item.disabled {
+  cursor: not-allowed;
+  outline: none;
+}
+
+.sterling-list-item::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-list-item.item-disabled:not(.list-disabled)::after {
+  opacity: 1;
+}

package/dist/css/MenuItemDisplay.base.css

@@ -5,6 +5,7 @@
   grid-template-columns: 1em 1fr 1em;
   column-gap: 0.5em;
   padding: 0.25em;
+  position: relative;
 }
 
 .sterling-menu-item-display .check {
@@ -13,7 +14,10 @@
   width: 20px;
   height: 20px;
   position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-menu-item-display .check.checkmark.checked::after {
@@ -66,35 +70,6 @@
   transform: translate(-50%, -50%) rotate(45deg);
 }
 
-.sterling-menu-item-display.disabled {
-  cursor: not-allowed;
-  outline: none;
-}
-
-.sterling-menu-item-display::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-menu-item-display.disabled::after {
-  opacity: 1;
-}
-
 @media (prefers-reduced-motion) {
   .sterling-menu-item-display::after,
   .sterling-menu-item-display .check,

package/dist/css/MenuItemDisplay.css

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

package/dist/css/MenuItemDisplay.disabled.css

@@ -0,0 +1,28 @@
+.sterling-menu-item-display.disabled {
+  cursor: not-allowed;
+  outline: none;
+}
+
+.sterling-menu-item-display::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-menu-item-display.disabled::after {
+  opacity: 1;
+}