@geoffcox/sterling-svelte 0.0.30 → 1.0.0

package/css/Slider.base.css

@@ -0,0 +1,182 @@
+.sterling-slider {
+  box-sizing: border-box;
+  outline: none;
+  padding: 0;
+  overflow: visible;
+  display: grid;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+}
+
+.sterling-slider.horizontal {
+  height: 2em;
+}
+
+.sterling-slider.vertical {
+  height: 100%;
+  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 {
+  position: relative;
+}
+
+.sterling-slider.horizontal .container {
+  margin: 0 0.75em;
+}
+
+.sterling-slider.vertical .container {
+  margin: 0.75em 0;
+}
+
+/* ----- track ----- */
+
+.sterling-slider .track {
+  position: absolute;
+  background: var(--stsv-common__background-color--secondary);
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+}
+
+.sterling-slider.horizontal .track {
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 3px;
+  transform: translate(0, -50%);
+}
+
+.sterling-slider.vertical .track {
+  bottom: 0;
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, 0);
+  width: 3px;
+}
+
+.sterling-slider:focus-visible {
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+/* ----- fill ----- */
+
+.sterling-slider .fill {
+  background: var(--stsv-common__color);
+  position: absolute;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+}
+
+.sterling-slider.horizontal .fill {
+  height: 3px;
+  top: 50%;
+  transform: translate(0, -50%);
+}
+
+.sterling-slider.vertical .fill {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 3px;
+}
+
+/* ----- thumb ----- */
+
+.sterling-slider .thumb {
+  background-color: var(--stsv-button__background-color);
+  border-color: var(--stsv-button__border-color);
+  border-radius: 10000px;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-button__color);
+  cursor: pointer;
+  display: block;
+  font: inherit;
+  height: 1.5em;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  text-decoration: none;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+  white-space: nowrap;
+  position: absolute;
+  width: 1.5em;
+}
+
+.sterling-slider.horizontal .thumb {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.sterling-slider.vertical .thumb {
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+.thumb:hover {
+  background-color: var(--stsv-button__background-color--hover);
+  border-color: var(--stsv-button__border-color--hover);
+  color: var(--stsv-button__color--hover);
+}
+
+.thumb:active {
+  background-color: var(--stsv-button__background-color--active);
+  border-color: var(--stsv-button__border-color--active);
+  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) {
+  .sterling-slider,
+  .sterling-slider .track,
+  .sterling-slider .fill,
+  .sterling-slider .thumb,
+  .sterling-slider .thumb::after {
+    transition: none;
+  }
+}

package/css/Slider.colorful.css

@@ -0,0 +1,11 @@
+.sterling-slider.colorful .fill {
+  background: var(--stsv-input--colorful__border-color--selected);
+  position: absolute;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+}
+
+.sterling-slider.colorful .thumb {
+  background-color: var(--stsv-button--colorful__background-color);
+  border-color: var(--stsv-button--colorful__border-color);
+  color: var(--stsv-button--colorful__color);
+}

package/css/Slider.composed.css

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

package/css/Slider.css

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

package/css/Switch.base.css

@@ -0,0 +1,193 @@
+.sterling-switch {
+  cursor: pointer;
+  display: grid;
+  position: relative;
+}
+
+.sterling-switch input {
+  cursor: pointer;
+}
+
+.sterling-switch.disabled input {
+  cursor: not-allowed;
+}
+
+.sterling-switch:not(.vertical) {
+  align-content: center;
+  align-items: center;
+  column-gap: 0.5em;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: auto;
+  justify-content: flex-start;
+  justify-items: flex-start;
+}
+
+.sterling-switch.vertical {
+  align-content: flex-start;
+  align-items: flex-start;
+  grid-template-columns: auto;
+  grid-template-rows: auto;
+  justify-content: center;
+  justify-items: center;
+  row-gap: 0.5em;
+}
+
+.sterling-switch.vertical .off-label {
+  grid-row: 3 / span 1;
+}
+
+.sterling-switch.vertical .on-label {
+  grid-row: 1 / span 1;
+}
+
+/* ----- input hidden ----- */
+
+.sterling-switch input {
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  opacity: 0;
+}
+
+/* ----- switch ----- */
+
+.sterling-switch .switch {
+  background-color: var(--stsv-input__background-color);
+  border-color: var(--stsv-input__border-color);
+  border-radius: 10000px;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-input__color);
+  font: inherit;
+  pointer-events: none;
+  position: relative;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+  user-select: none;
+}
+
+.sterling-switch:hover .switch {
+  background-color: var(--stsv-input__background-color--hover);
+  border-color: var(--stsv-input__border-color--hover);
+  color: var(--stsv-input__color--hover);
+}
+
+input:focus-visible ~ .switch {
+  background-color: var(--stsv-input__background-color--focus);
+  border-color: var(--stsv-input__border-color--focus);
+  color: var(--stsv-common__color--focux);
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+/* ----- switch vertical ----- */
+
+.sterling-switch:not(.vertical) .switch {
+  width: 2em;
+  height: 1.25em;
+}
+
+.sterling-switch.vertical .switch {
+  width: 1.25em;
+  height: 2em;
+}
+
+/* ----- labels ----- */
+
+.sterling-switch label {
+  color: var(--stsv-common__color);
+  transition: color 250ms;
+  font: inherit;
+}
+
+.sterling-switch .off-label,
+.sterling-switch .on-label {
+  padding-top: 2px;
+}
+
+/* ----- thumb ----- */
+
+.sterling-switch .thumb {
+  background-color: var(--stsv-button__background-color);
+  border-color: var(--stsv-button__border-color);
+  border-radius: 10000px;
+  border-style: solid;
+  border-width: 2px;
+  box-sizing: border-box;
+  color: var(--stsv-button__color);
+  display: block;
+  font: inherit;
+  height: 1.25em;
+  position: absolute;
+  transition: background-color 250ms, color 250ms, border-color 250ms, transform 250ms;
+  width: 1.25em;
+}
+
+.sterling-switch:hover .thumb {
+  background-color: var(--stsv-button__background-color--hover);
+  border-color: var(--stsv-button__border-color--hover);
+  color: var(--stsv-button__color--hover);
+}
+
+.sterling-switch:active .thumb {
+  background-color: var(--stsv-button__background-color--active);
+  border-color: var(--stsv-button__border-color--active);
+  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 {
+  top: calc(-1 * 2px);
+  transform: translateX(calc(var(--thumb-offset) - 2px));
+}
+
+.sterling-switch.vertical .thumb {
+  left: calc(-1 * 2px);
+  transform: translateY(calc(var(--thumb-offset) - 2px));
+}
+
+/* ----- reduced motion ----- */
+
+@media (prefers-reduced-motion) {
+  .sterling-switch .switch,
+  .sterling-switch .thumb,
+  .sterling-switch .thumb::after,
+  .sterling-switch label {
+    transition: none;
+  }
+}

package/css/Switch.colorful.css

@@ -0,0 +1,39 @@
+/* ----- switch colorful ----- */
+
+.sterling-switch.colorful .switch {
+  background-color: var(--stsv-input--colorful__background-color);
+  border-color: var(--stsv-input--colorful__border-color);
+  color: var(--stsv-input--colorful__color);
+}
+
+.sterling-switch.colorful:hover .switch {
+  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-switch.colorful input:focus-visible ~ .switch {
+  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);
+}
+
+/* ----- thumb colorful ----- */
+
+.sterling-switch.colorful .thumb {
+  background-color: var(--stsv-button--colorful__background-color);
+  border-color: var(--stsv-button--colorful__border-color);
+  color: var(--stsv-button--colorful__color);
+}
+
+.sterling-switch.colorful:hover .thumb {
+  background-color: var(--stsv-button--colorful__background-color--hover);
+  border-color: var(--stsv-button--colorful__border-color--hover);
+  color: var(--stsv-button--colorful__color--hover);
+}
+
+.sterling-switch.colorful:active .thumb {
+  background-color: var(--stsv-button--colorful__background-color--active);
+  border-color: var(--stsv-button--colorful__border-color--active);
+  color: var(--stsv-button--colorful__color--hover);
+}

package/css/Switch.css

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

package/css/Tab.base.css

@@ -0,0 +1,135 @@
+.sterling-tab {
+  align-content: center;
+  align-items: center;
+  background-color: var(--stsv-common__background-color);
+  border-color: transparent;
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 0;
+  box-sizing: border-box;
+  color: var(--stsv-common__color);
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  overflow: hidden;
+  padding: 0.5em 1em 0.25em 1em;
+  position: relative;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+  white-space: nowrap;
+}
+
+.sterling-tab:not(.vertical) {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr 1em;
+  justify-content: center;
+  justify-items: center;
+  row-gap: 0.15em;
+}
+
+.sterling-tab.vertical {
+  grid-template-columns: auto 1em;
+  grid-template-rows: 1fr;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-end;
+  justify-items: flex-end;
+  column-gap: 0.15em;
+}
+
+.sterling-tab.using-keyboard:focus-visible {
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  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 {
+  padding: 0 0.2em;
+}
+
+.sterling-tab.vertical .content .text {
+  padding-top: 0.25em;
+}
+
+/* ----- indicator -----*/
+
+.sterling-tab .indicator {
+  background-color: transparent;
+  border-radius: 10000px;
+  transition: background-color 500ms;
+}
+
+.sterling-tab:not(.vertical) .indicator {
+  justify-self: stretch;
+  height: 0.4em;
+}
+
+.sterling-tab.vertical .indicator {
+  align-self: stretch;
+  width: 0.4em;
+}
+
+.sterling-tab:not(.selected):not(:active):hover .indicator {
+  background-color: var(--stsv-common__color--subtle);
+}
+
+.sterling-tab:active .indicator {
+  background-color: var(--stsv-input__border-color--selected);
+}
+
+.sterling-tab.selected .indicator {
+  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) {
+  .sterling-tab,
+  .sterling-tab::after,
+  .sterling-tab .indicator {
+    transition: none;
+  }
+}

package/css/Tab.colorful.css

@@ -0,0 +1,13 @@
+/* ----- indicator -----*/
+
+.sterling-tab.colorful:not(.selected):not(:active):hover .indicator {
+  background-color: var(--stsv-input--colorful__border-color--hover);
+}
+
+.sterling-tab.colorful:active .indicator {
+  background-color: var(--stsv-input--colorful__border-color--selected);
+}
+
+.sterling-tab.colorful.selected .indicator {
+  background-color: var(--stsv-input--colorful__border-color--selected);
+}

package/css/Tab.css

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

package/css/TabList.base.css

@@ -0,0 +1,34 @@
+.sterling-tab-list {
+  box-sizing: border-box;
+  display: grid;
+  margin: 0;
+  padding: calc(2 * 2px);
+}
+
+.sterling-tab-list:not(.vertical) {
+  column-gap: 0.5em;
+  grid-auto-flow: column;
+  grid-template-columns: repeat(auto-fill, auto);
+  grid-template-rows: 1fr;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.sterling-tab-list.vertical {
+  grid-auto-flow: row;
+  grid-template-rows: auto;
+  grid-template-columns: 1fr;
+  overflow-x: hidden;
+  overflow-y: auto;
+  row-gap: 0.5em;
+}
+
+.sterling-tab-list:hover {
+  color: var(--stsv-common__color--hover);
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-tab-list {
+    transition: none;
+  }
+}

package/css/TabList.css

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