@geoffcox/sterling-svelte 1.0.11 → 1.0.12

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

@@ -70,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;
+}

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

@@ -19,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 {
@@ -148,37 +139,6 @@
   color: var(--stsv-button__color--active);
 }
 
-/* ----- 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;
-}
-
 /* ----- 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;
@@ -155,33 +151,6 @@ input:checked: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.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;
+}