@geoffcox/sterling-svelte 1.0.10 → 1.0.12

package/dist/css/Progress.base.css

@@ -11,7 +11,10 @@
   height: 1em;
   padding: 0.25em;
   position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-progress .container {
@@ -26,7 +29,10 @@
   box-sizing: border-box;
   height: 100%;
   min-height: 1px;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 /* ----- vertical ----- */
@@ -69,26 +75,6 @@
   background-color: var(--stsv-status--danger__border-color);
 }
 
-/* ----- disabled ----- */
-
-.sterling-progress.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;
-}
-
 /* ----- prefers-reduced-motion ----- */
 
 @media (prefers-reduced-motion) {

package/dist/css/Progress.css

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

package/dist/css/Progress.disabled.css

@@ -0,0 +1,17 @@
+.sterling-progress.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/Radio.base.css

@@ -52,7 +52,10 @@
   height: 21px;
   position: relative;
   pointer-events: none;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   width: 21px;
 }
 
@@ -90,41 +93,12 @@
   background-color: var(--stsv-input__color);
 }
 
-.sterling-radio.disabled * {
-  cursor: not-allowed;
-}
-
-.sterling-radio .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))
-  );
-  border-radius: 10000px;
-  bottom: 0;
-  content: '';
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  pointer-events: none;
-  transition: opacity 250ms;
-}
-
 .sterling-radio label {
   color: var(--stsv-common__color);
   transition: color 250ms;
   font: inherit;
 }
 
-.sterling-radio.disabled .container::after {
-  opacity: 1;
-}
-
 @media (prefers-reduced-motion) {
   .sterling-radio .indicator,
   .sterling-radio .indicator::after,

package/dist/css/Radio.css

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

package/dist/css/Radio.disabled.css

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

package/dist/css/Select.base.css

@@ -14,7 +14,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-select:hover {
@@ -33,35 +36,6 @@
   outline-width: 2px;
 }
 
-.sterling-select.disabled {
-  cursor: not-allowed;
-  outline: none;
-}
-
-.sterling-select::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-select.disabled::after {
-  opacity: 1;
-}
-
 .sterling-select .value {
   padding: 0.5em;
   display: flex;

package/dist/css/Select.css

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

package/dist/css/Select.disabled.css

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

package/dist/css/Slider.base.css

@@ -4,7 +4,10 @@
   padding: 0;
   overflow: visible;
   display: grid;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-slider.horizontal {
@@ -16,15 +19,6 @@
   width: 2em;
 }
 
-.sterling-slider.composed,
-.sterling-slider.composed:hover,
-.sterling-slider.composed.focus,
-.sterling-slider.composed.disabled {
-  background: none;
-  border: none;
-  outline: none;
-}
-
 /* ----- container ----- */
 
 .sterling-slider .container {
@@ -44,7 +38,10 @@
 .sterling-slider .track {
   position: absolute;
   background: var(--stsv-common__background-color--secondary);
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-slider.horizontal .track {
@@ -75,7 +72,10 @@
 .sterling-slider .fill {
   background: var(--stsv-common__color);
   position: absolute;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 .sterling-slider.horizontal .fill {
@@ -107,9 +107,11 @@
   height: 1.5em;
   overflow: hidden;
   padding: 0;
-  position: relative;
   text-decoration: none;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   white-space: nowrap;
   position: absolute;
   width: 1.5em;
@@ -137,38 +139,6 @@
   color: var(--stsv-button__color--active);
 }
 
-/* ----- thumb disabled ----- */
-
-.sterling-slider.disabled .thumb {
-  cursor: not-allowed;
-  position: relative;
-  outline: none;
-}
-
-.sterling-slider .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;
-  content: '';
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  pointer-events: none;
-  transition: opacity 250ms;
-}
-
-.sterling-slider.disabled .thumb::after {
-  opacity: 1;
-}
-
 /* ----- reduced motion ----- */
 
 @media (prefers-reduced-motion) {

package/dist/css/Slider.css

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

package/dist/css/Slider.disabled.css

@@ -0,0 +1,30 @@
+/* ----- thumb disabled ----- */
+
+.sterling-slider.disabled .thumb {
+  cursor: not-allowed;
+  outline: none;
+}
+
+.sterling-slider .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;
+  content: '';
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  pointer-events: none;
+  transition: opacity 250ms;
+}
+
+.sterling-slider.disabled .thumb::after {
+  opacity: 1;
+}

package/dist/css/Switch.base.css

@@ -8,10 +8,6 @@
   cursor: pointer;
 }
 
-.sterling-switch.disabled input {
-  cursor: not-allowed;
-}
-
 .sterling-switch:not(.vertical) {
   align-content: center;
   align-items: center;
@@ -67,7 +63,10 @@
   font: inherit;
   pointer-events: none;
   position: relative;
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   user-select: none;
 }
 
@@ -87,6 +86,12 @@ input:focus-visible ~ .switch {
   outline-width: 2px;
 }
 
+input:checked ~ .switch,
+input:checked:hover ~ .switch,
+input:checked:focus-visible ~ .switch {
+  background-color: var(--stsv-input__border-color--hover);
+}
+
 /* ----- switch vertical ----- */
 
 .sterling-switch:not(.vertical) .switch {
@@ -126,7 +131,11 @@ input:focus-visible ~ .switch {
   font: inherit;
   height: 1.25em;
   position: absolute;
-  transition: background-color 250ms, color 250ms, border-color 250ms, transform 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms,
+    transform 250ms;
   width: 1.25em;
 }
 
@@ -142,33 +151,6 @@ input:focus-visible ~ .switch {
   color: var(--stsv-button__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 {

package/dist/css/Switch.colorful.css

@@ -18,6 +18,12 @@
   color: var(--stsv-input--colorful__color--focus);
 }
 
+.sterling-switch.colorful input:checked ~ .switch,
+.sterling-switch.colorful input:checked:hover ~ .switch,
+.sterling-switch.colorful input:checked:focus-visible ~ .switch {
+  background-color: var(--stsv-input--colorful__border-color--hover);
+}
+
 /* ----- thumb colorful ----- */
 
 .sterling-switch.colorful .thumb {

package/dist/css/Switch.css

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

package/dist/css/Switch.disabled.css

@@ -0,0 +1,30 @@
+.sterling-switch.disabled input {
+  cursor: not-allowed;
+}
+
+/* ----- 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;
+}

package/dist/css/Tab.base.css

@@ -16,7 +16,10 @@
   position: relative;
   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;
 }
 
@@ -46,37 +49,6 @@
   outline-width: 2px;
 }
 
-/* ----- 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 -----*/
 
 .sterling-tab .content {
@@ -113,14 +85,6 @@
   background-color: var(--stsv-input__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) {

package/dist/css/Tab.css

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

package/dist/css/Tab.disabled.css

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

package/dist/css/TextArea.base.css

@@ -22,7 +22,10 @@
   min-height: 3em;
   overflow: hidden;
   resize: var(--TextArea__resize, none);
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
   width: 100%;
 }
 
@@ -42,38 +45,12 @@
   outline-width: 2px;
 }
 
-.sterling-text-area:disabled {
-  cursor: not-allowed;
-  outline: none;
-}
-
-.sterling-text-area::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-text-area.disabled::after {
-  opacity: 1;
-}
-
 .sterling-text-area textarea::placeholder {
   color: var(--stsv-common__color--subtle);
-  transition: background-color 250ms, color 250ms, border-color 250ms;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
 }
 
 @media (prefers-reduced-motion) {

package/dist/css/TextArea.composed.css

@@ -1,5 +1,5 @@
 .sterling-text-area.composed textarea,
-.sterling-text-area.composed:hover textarea:not(:disabled),
+.sterling-text-area.composed:hover textarea,
 .sterling-text-area.composed textarea:focus,
 .sterling-text-area.composed:hover textarea:focus {
   background-color: transparent;

package/dist/css/TextArea.css

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