@geoffcox/sterling-svelte-themes 1.0.0

package/css/sterling/List.css

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

package/css/sterling/List.disabled.css

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

package/css/sterling/ListItem.base.css

@@ -0,0 +1,33 @@
+.sterling-list-item {
+  background-color: transparent;
+  box-sizing: border-box;
+  color: var(--stsv-common__color);
+  cursor: pointer;
+  margin: 0;
+  padding: 0.5em;
+  position: relative;
+  outline: none;
+  text-overflow: ellipsis;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+  white-space: nowrap;
+}
+
+.sterling-list-item:not(.disabled):not(.selected):hover {
+  background-color: var(--stsv-button__background-color--hover);
+  color: var(--stsv-button__color--hover);
+}
+
+.sterling-list-item.selected {
+  background-color: var(--stsv-button__background-color--active);
+  color: var(--stsv-button__color--active);
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-list-item,
+  .sterling-list-item::after {
+    transition: none;
+  }
+}

package/css/sterling/ListItem.css

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

package/css/sterling/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/css/sterling/Menu.base.css

@@ -0,0 +1,21 @@
+.sterling-menu {
+  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);
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  height: auto;
+  padding: 0.25em;
+}
+
+.sterling-menu .menu-items {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  row-gap: calc(2 * 2px);
+}

package/css/sterling/Menu.css

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

package/css/sterling/MenuBar.base.css

@@ -0,0 +1,9 @@
+.sterling-menu-bar {
+  background-color: transparent;
+  align-items: center;
+  align-content: stretch;
+  display: flex;
+  gap: 1em;
+  justify-content: flex-start;
+  justify-items: flex-start;
+}

package/css/sterling/MenuBar.css

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

package/css/sterling/MenuButton.base.css

@@ -0,0 +1,13 @@
+.menu-button .reference {
+  align-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  justify-items: center;
+  column-gap: 0.25em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/css/sterling/MenuButton.css

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

package/css/sterling/MenuItem.base.css

@@ -0,0 +1,48 @@
+.sterling-menu-item {
+  background-color: transparent;
+  border-color: transparent;
+  border-radius: 8px;
+  border-style: none;
+  border-width: 0;
+  box-sizing: border-box;
+  color: var(--stsv-common__color);
+  cursor: pointer;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  outline: none;
+  overflow: hidden;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  transition: background-color 250ms, color 250ms, border-color 250ms;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.sterling-menu-item:hover {
+  background-color: var(--stsv-button__background-color--hover);
+  color: var(--stsv-button__color--hover);
+}
+
+.sterling-menu-item:focus {
+  outline: none;
+}
+
+.sterling-menu-item.using-keyboard:focus {
+  border-color: var(--stsv-button__border-color--focus);
+  outline-color: var(--stsv-common__outline-color);
+  outline-offset: 0;
+  outline-style: solid;
+  outline-width: 2px;
+}
+
+.sterling-menu-item:focus {
+  background-color: var(--stsv-input__background-color--selected);
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-menu-item {
+    transition: none;
+  }
+}

package/css/sterling/MenuItem.css

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

package/css/sterling/MenuItemDisplay.base.css

@@ -0,0 +1,84 @@
+.sterling-menu-item-display {
+  align-items: center;
+  justify-items: flex-start;
+  display: grid;
+  grid-template-columns: 1em 1fr auto auto;
+  column-gap: 0.5em;
+  padding: 0.25em;
+  position: relative;
+}
+
+.sterling-menu-item-display .check {
+  box-sizing: border-box;
+  pointer-events: none;
+  width: 20px;
+  height: 20px;
+  position: relative;
+  transition:
+    background-color 250ms,
+    color 250ms,
+    border-color 250ms;
+}
+
+.sterling-menu-item-display .check.checkmark.checked::after {
+  border-color: currentColor;
+  border-style: solid;
+  border-width: 0 0.2em 0.2em 0;
+  box-sizing: border-box;
+  content: '';
+  height: 0.8em;
+  left: 45%;
+  position: absolute;
+  top: 45%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  transform-origin: center;
+  transition: border-color 250ms;
+  width: 0.4em;
+}
+
+.sterling-menu-item-display .check.bullet.checked::after {
+  background-color: currentColor;
+  border-radius: 10000px;
+  content: '';
+  height: 0.5em;
+  left: 45%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: background-color 250ms;
+  width: 0.5em;
+}
+
+.sterling-menu-item-display .shortcut {
+  font-size: 0.8em;
+  color: var(--stsv-common__color--secondary);
+}
+
+.sterling-menu-item-display .chevron {
+  position: relative;
+  border: none;
+  background: none;
+  height: 1em;
+  width: 1em;
+  transform-origin: 50% 50%;
+}
+
+.sterling-menu-item-display .chevron.has-children::after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  width: 7px;
+  height: 7px;
+  border-right: 3px solid currentColor;
+  border-top: 3px solid currentColor;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-menu-item-display::after,
+  .sterling-menu-item-display .check,
+  .sterling-menu-item-display .check::after {
+    transition: none;
+  }
+}

package/css/sterling/MenuItemDisplay.css

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

package/css/sterling/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/css/sterling/MenuSeparator.base.css

@@ -0,0 +1,5 @@
+.sterling-menu-separator {
+  height: 2px;
+  background-color: var(--stsv-common__border-color);
+  margin: 0.1em 0;
+}

package/css/sterling/MenuSeparator.css

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

package/css/sterling/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: auto;
+  left: 0;
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  width: max-content;
+}
+
+.sterling-popover.open {
+  display: grid;
+}

package/css/sterling/Progress.base.css

@@ -0,0 +1,93 @@
+.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-status .indicator {
+  background-color: var(--stsv-status--info__border-color);
+}
+
+.sterling-progress.success-status .indicator {
+  background-color: var(--stsv-status--success__border-color);
+}
+
+.sterling-progress.warning-status .indicator {
+  background-color: var(--stsv-status--warning__border-color);
+}
+
+.sterling-progress.error-status .indicator {
+  background-color: var(--stsv-status--danger__border-color);
+}
+
+.sterling-progress.auto-status[data-progress-percent] .indicator {
+  background-color: var(--stsv-status--info__border-color);
+}
+
+.sterling-progress.auto-status[data-progress-percent='100'] .indicator {
+  background-color: var(--stsv-status--success__border-color);
+}
+
+/* ----- prefers-reduced-motion ----- */
+
+@media (prefers-reduced-motion) {
+  .sterling-progress,
+  .sterling-progress .indicator {
+    transition: none;
+  }
+}

package/css/sterling/Progress.css

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

package/css/sterling/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/css/sterling/Radio.base.css

@@ -0,0 +1,109 @@
+.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 label {
+  color: var(--stsv-common__color);
+  transition: color 250ms;
+  font: inherit;
+}
+
+@media (prefers-reduced-motion) {
+  .sterling-radio .indicator,
+  .sterling-radio .indicator::after,
+  .sterling-radio .container::after,
+  .sterling-radio label {
+    transition: none;
+  }
+}

package/css/sterling/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/sterling/Radio.css

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

package/css/sterling/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;
+}