@geoffcox/sterling-svelte 0.0.30 → 1.0.0

package/css/Popover copy.css

@@ -0,0 +1,21 @@
+.sterling-popover-portal {
+  position: relative;
+  overflow: visible;
+}
+
+.sterling-popover {
+  box-sizing: border-box;
+  display: none;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  height: fit-content;
+  left: 0;
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  width: max-content;
+}
+
+.sterling-popover.open {
+  display: grid;
+}

package/css/Popover.css

@@ -0,0 +1,21 @@
+.sterling-popover-portal {
+  position: relative;
+  overflow: visible;
+}
+
+.sterling-popover {
+  box-sizing: border-box;
+  display: none;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  height: fit-content;
+  left: 0;
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  width: max-content;
+}
+
+.sterling-popover.open {
+  display: grid;
+}

package/css/Progress.base.css

@@ -0,0 +1,99 @@
+.sterling-progress {
+  align-content: flex-start;
+  align-items: flex-start;
+  background: var(--stsv-common__background-color);
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--stsv-common__border-color);
+  border-radius: 0;
+  box-sizing: border-box;
+  display: block;
+  height: 1em;
+  padding: 0.25em;
+  position: relative;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+}
+
+.sterling-progress .container {
+  display: flex;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+}
+
+.sterling-progress .indicator {
+  background-color: var(--stsv-common__border-color);
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 1px;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+}
+
+/* ----- vertical ----- */
+
+.sterling-progress.vertical {
+  align-items: center;
+  align-content: center;
+  height: unset;
+  width: 1em;
+}
+
+.sterling-progress.vertical .container {
+  flex-direction: column;
+  justify-content: flex-end;
+  min-width: unset;
+}
+
+.sterling-progress.vertical .indicator {
+  height: unset;
+  min-height: unset;
+  min-width: 1px;
+  width: 100%;
+}
+
+/* ----- status ----- */
+
+.sterling-progress.info .indicator {
+  background-color: var(--stsv-status--info__border-color);
+}
+
+.sterling-progress.success .indicator {
+  background-color: var(--stsv-status--success__border-color);
+}
+
+.sterling-progress.warning .indicator {
+  background-color: var(--stsv-status--warning__border-color);
+}
+
+.sterling-progress.error .indicator {
+  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) {
+  .sterling-progress,
+  .sterling-progress .indicator {
+    transition: none;
+  }
+}

package/css/Progress.css

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

package/css/Radio.base.css

@@ -0,0 +1,135 @@
+.sterling-radio {
+  align-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  font: inherit;
+  margin: 0;
+  outline: none;
+  padding: 0;
+}
+/* 
+		The container 
+		- allows the input to be hidden
+		- avoids input participating in layout
+		- prevents collisions with surrounding slots
+	 */
+.sterling-radio .container {
+  box-sizing: border-box;
+  position: relative;
+  font: inherit;
+  display: flex;
+  align-items: center;
+  margin-right: 0.25em;
+}
+
+/*
+		The input is hidden since the built-in browser radio cannot be customized
+	*/
+.sterling-radio input {
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  opacity: 0;
+  height: 21px;
+  width: 21px;
+}
+
+/*
+	 	The indicator handles both the radio box and circle mark.
+	 	The box cannot be on the container since the adjacent sibling selector is needed
+		and there is not a parent CSS selector.
+	*/
+.sterling-radio .indicator {
+  background-color: var(--stsv-input__background-color);
+  border-color: var(--stsv-input__border-color);
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 10000px;
+  box-sizing: border-box;
+  display: inline-block;
+  height: 21px;
+  position: relative;
+  pointer-events: none;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+  width: 21px;
+}
+
+.sterling-radio input:checked + .indicator {
+  background-color: var(--stsv-input__background-color);
+  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);
+}
+
+.sterling-radio input:focus-visible + .indicator {
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+.sterling-radio .indicator::after {
+  background-color: transparent;
+  border-radius: 10000px;
+  content: '';
+  height: 9px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: background-color 250ms;
+  width: 9px;
+}
+
+.sterling-radio input:checked + .indicator::after {
+  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,
+  .sterling-radio .container::after,
+  .sterling-radio label {
+    transition: none;
+  }
+}

package/css/Radio.colorful.css

@@ -0,0 +1,18 @@
+.sterling-radio.colorful .indicator {
+  background-color: var(--stsv-input--colorful__background-color);
+  border-color: var(--stsv-input--colorful__border-color);
+}
+
+.sterling-radio.colorful input:checked + .indicator {
+  background-color: var(--stsv-input--colorful__background-color);
+  border-color: var(--stsv-input--colorful__border-color);
+}
+
+.sterling-radio.colorful:not(.disabled):hover .indicator {
+  background-color: var(--stsv-input--colorful__background-color--hover);
+  border-color: var(--stsv-input--colorful__border-color--hover);
+}
+
+.sterling-radio.colorful input:checked + .indicator::after {
+  background-color: var(--stsv-input--colorful__color);
+}

package/css/Radio.css

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

package/css/RgbColorSliders.base.css

@@ -0,0 +1,94 @@
+.sterling-rgb-color-sliders {
+  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr 4em;
+  column-gap: 0.5em;
+  row-gap: 0.25em;
+}
+
+.sterling-rgb-color-sliders .slider :global(.fill),
+.sterling-rgb-color-sliders .slider :global(.sterling-slider.colorful .fill) {
+  background-color: transparent;
+}
+
+.sterling-rgb-color-sliders .slider :global(.track),
+.sterling-rgb-color-sliders .slider :global(.sterling-slider.colorful .track) {
+  background-color: transparent;
+  background-image: linear-gradient(to right, #ffffff, #ffffff 1px, #000000 1px, #000000);
+  background-size: 2px 100%;
+  opacity: 0.1;
+}
+
+.sterling-rgb-color-sliders .red-slider {
+  background: linear-gradient(to right, black 0%, rgb(255, 0, 0) 100%);
+}
+
+.sterling-rgb-color-sliders .green-slider {
+  background: linear-gradient(to right, black 0%, rgb(0, 255, 0) 100%);
+}
+
+.sterling-rgb-color-sliders .blue-slider {
+  background: linear-gradient(to right, black 0%, rgb(0, 0, 255) 100%);
+}
+
+.sterling-rgb-color-sliders .alpha {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  place-content: stretch;
+  place-items: stretch;
+}
+
+.sterling-rgb-color-sliders .alpha-gradient,
+.sterling-rgb-color-sliders .alpha-hatch,
+.sterling-rgb-color-sliders .alpha-slider {
+  grid-row: 1 / span 1;
+  grid-column: 1 / span 1;
+}
+
+.sterling-rgb-color-sliders .alpha-hatch {
+  background-color: #eee;
+  opacity: 0.1;
+  background-image: 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
+    ),
+    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;
+  background-size: 8px 8px;
+}
+
+.sterling-rgb-color-sliders .alpha-gradient {
+  background: linear-gradient(
+    to right,
+    rgba(var(--red), var(--green), var(--blue), 0) 0%,
+    rgba(var(--red), var(--green), var(--blue), 100) 100%
+  );
+}

package/css/RgbColorSliders.css

@@ -0,0 +1 @@
+@import url('./RgbColorSliders.base.css');

package/css/Select.base.css

@@ -0,0 +1,127 @@
+.sterling-select {
+  align-content: center;
+  align-items: center;
+  background-color: var(--stsv-input__background-color);
+  border-color: var(--stsv-input__border-color);
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 2px;
+  color: var(--stsv-input__color);
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto;
+  outline: none;
+  padding: 0;
+  position: relative;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+}
+
+.sterling-select:hover {
+  background-color: var(--stsv-input__background-color--hover);
+  border-color: var(--stsv-input__border-color--hover);
+  color: var(--stsv-input__color--hover);
+}
+
+.sterling-select:focus {
+  background-color: var(--stsv-input__background-color--focus);
+  border-color: var(--stsv-input__border-color--focus);
+  color: var(--stsv-input__color--focus);
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  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;
+  align-items: center;
+}
+
+.sterling-select .chevron {
+  display: block;
+  position: relative;
+  border: none;
+  background: none;
+  margin: 0;
+  height: 100%;
+  width: 32px;
+}
+
+.sterling-select .chevron::after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  width: 7px;
+  height: 7px;
+  border-right: 3px solid currentColor;
+  border-top: 3px solid currentColor;
+  /* 
+			The chevron is a right triangle, rotated to face down.
+			It should be moved up so it is centered vertically after rotation.
+			The amount to move is the hypotenuse of the right triangle of the chevron.
+		    For a right triangle with equal a and b where c=1
+			a^2 + b^2 = c^2 	
+		    a^2 + a^2 = c^2 
+		    2a^2 = c^2
+			2a^2 = 1
+			a^2 = 0.5
+			a = sqrt(0.5)
+			a = 0.707
+		*/
+  transform: translate(-50%, calc(-50% / 0.707)) rotate(135deg);
+  transform-origin: 50% 50%;
+}
+
+.sterling-select-popup-content {
+  background-color: var(--stsv-common__background-color);
+  border-color: var(--stsv-common__border-color);
+  border-radius: 0;
+  border-style: solid;
+  border-width: 2px;
+  box-shadow: var(--stsv-common__box-shadow);
+  padding: 0.25em;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  overflow: hidden;
+  max-height: 20em;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-select,
+  .sterling-select::after {
+    transition: none;
+  }
+}

package/css/Select.colorful.css

@@ -0,0 +1,24 @@
+.sterling-select.colorful {
+  background-color: var(--stsv-input--colorful__background-color);
+  border-color: var(--stsv-input--colorful__border-color);
+  color: var(--stsv-input--colorful__color);
+}
+
+.sterling-select.colorful:hover {
+  background-color: var(--stsv-input--colorful__background-color--hover);
+  border-color: var(--stsv-input--colorful__border-color--hover);
+  color: var(--stsv-input--colorful__color--hover);
+}
+
+.sterling-select.colorful:focus {
+  background-color: var(--stsv-input--colorful__background-color--focus);
+  border-color: var(--stsv-input--colorful__border-color--focus);
+  color: var(--stsv-input--colorful__color--focus);
+  outline-color: var(--stsv-common--colorful__outline-color);
+}
+
+.sterling-select-popup-content.colorful {
+  background-color: var(--stsv-common--colorful__background-color);
+  border-color: var(--stsv-common--colorful__border-color);
+  color: var(--stsv-common--colorful__color);
+}

package/css/Select.composed.css

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

package/css/Select.css

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