@scattered-light/loomiere-base-ui 0.0.0-stage → 0.1.1

package/dist/styles/components/Select.css

@@ -0,0 +1,273 @@
+/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* Select - Mojave Theme
+ *
+ * The trigger is a field (the field pattern, control sizes, the base text style); the
+ * list is a popup of item rows. Select keeps no tokens of its own.
+ */
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.SelectTrigger {
+  box-sizing: border-box;
+  color: var(--sl-field-color);
+  background: var(--sl-field-background);
+  border: var(--sl-field-border-width) solid var(--sl-field-border-color);
+  border-radius: var(--sl-field-radius);
+  transition: var(--sl-field-transition);
+  outline: none;
+  font-family: var(--sl-font-base-font-family);
+  font-size: var(--sl-font-base-font-size);
+  font-weight: var(--sl-font-base-font-weight);
+  line-height: var(--sl-font-base-line-height);
+  letter-spacing: var(--sl-font-base-letter-spacing);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sl-gap-control);
+  width: 100%;
+  height: var(--sl-control-height-md);
+  padding-block: var(--sl-control-padding-block);
+  padding-inline: var(--sl-control-padding-inline);
+  cursor: pointer;
+}
+
+.SelectTrigger:hover:not(:disabled) {
+  border-color: var(--sl-field-border-color-hover);
+}
+
+.SelectTrigger:focus-visible {
+  border-color: var(--sl-field-border-color-focus);
+  box-shadow: var(--sl-field-shadow-focus);
+}
+
+.SelectTrigger:disabled {
+  background: var(--sl-field-background-disabled);
+  color: var(--sl-field-color-disabled);
+  cursor: not-allowed;
+}
+
+/* ============================================
+   VALUE AND ICON
+   ============================================ */
+
+.SelectValue {
+  flex: 1;
+  text-align: left;
+  color: var(--sl-field-color);
+}
+
+.SelectValue:empty::before {
+  content: attr(data-placeholder);
+  color: var(--sl-field-placeholder-color);
+}
+
+.SelectIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  color: var(--sl-text-tertiary);
+  transition: transform var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.SelectTrigger[aria-expanded='true'] .SelectIcon {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   BACKDROP, POSITIONER, POPUP
+   ============================================ */
+
+.SelectBackdrop {
+  position: fixed;
+  inset: 0;
+  background: color-mix(in srgb, var(--sl-overlay-base) 30%, transparent);
+  z-index: calc(var(--sl-popup-z-index) - 1);
+  animation: fadeIn var(--sl-popup-animation-duration) var(--sl-popup-animation-easing);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.SelectPositioner {
+  z-index: var(--sl-popup-z-index);
+  outline: 0;
+}
+
+.SelectPopup {
+  box-sizing: border-box;
+  background: var(--sl-popup-background);
+  border: var(--sl-popup-border-width) solid var(--sl-popup-border-color);
+  border-radius: var(--sl-popup-radius);
+  box-shadow: var(--sl-popup-shadow);
+  outline: none;
+  border-radius: var(--sl-popup-radius-field);
+  padding: var(--sl-popup-padding);
+  width: var(--anchor-width);
+  max-width: var(--available-width);
+  animation: slideDown var(--sl-popup-animation-duration) var(--sl-popup-animation-easing);
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--sl-space-2)));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.SelectList {
+  max-height: var(--sl-popup-list-max-height);
+  overflow: auto;
+  outline: 0;
+}
+
+/* ============================================
+   ITEM
+   ============================================ */
+
+.SelectItem {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-item-gap);
+  padding-block: var(--sl-item-padding-block);
+  padding-inline: var(--sl-item-padding-inline);
+  border-radius: var(--sl-item-radius);
+  color: var(--sl-item-color);
+  cursor: default;
+  user-select: none;
+  outline: none;
+  transition: var(--sl-item-transition);
+  font-family: var(--sl-font-base-font-family);
+  font-size: var(--sl-font-base-font-size);
+  font-weight: var(--sl-font-base-font-weight);
+  line-height: var(--sl-font-base-line-height);
+  letter-spacing: var(--sl-font-base-letter-spacing);
+  cursor: pointer;
+}
+
+.SelectItem[data-highlighted],
+.SelectItem:hover:not([data-disabled]) {
+  background: var(--sl-item-background-hover);
+  color: var(--sl-item-color-hover);
+}
+
+.SelectItem[data-selected] {
+  font-family: var(--sl-font-base-selected-font-family);
+  font-size: var(--sl-font-base-selected-font-size);
+  font-weight: var(--sl-font-base-selected-font-weight);
+  line-height: var(--sl-font-base-selected-line-height);
+  letter-spacing: var(--sl-font-base-selected-letter-spacing);
+  background: var(--sl-item-background-selected);
+  color: var(--sl-item-color-selected);
+}
+
+.SelectItem[data-disabled] {
+  color: var(--sl-item-color-disabled);
+  cursor: not-allowed;
+  opacity: var(--sl-item-opacity-disabled);
+}
+
+.SelectItemText {
+  flex: 1;
+}
+
+.SelectItemIndicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--sl-item-indicator-size);
+  height: var(--sl-item-indicator-size);
+  color: var(--sl-item-indicator-color);
+  line-height: 1;
+}
+
+.SelectItemIndicatorIcon {
+  font-size: var(--sl-item-indicator-size);
+  line-height: 1;
+}
+
+/* ============================================
+   GROUP AND SEPARATOR
+   ============================================ */
+
+.SelectGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-1);
+}
+
+.SelectGroupLabel {
+  font-family: var(--sl-font-condense-subtitle-label-font-family);
+  font-size: var(--sl-font-condense-subtitle-label-font-size);
+  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
+  line-height: var(--sl-font-condense-subtitle-label-line-height);
+  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
+  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  padding-block: var(--sl-popup-group-label-padding-top) var(--sl-popup-group-label-padding-bottom);
+  padding-inline: var(--sl-item-padding-inline);
+  color: var(--sl-text-secondary);
+}
+
+.SelectSeparator {
+  height: var(--sl-stroke-default);
+  margin-block: var(--sl-popup-separator-spacing);
+  border: none;
+  background: var(--sl-popup-separator-color);
+}
+
+/* ============================================
+   SCROLL ARROWS
+   ============================================ */
+
+.SelectScrollArrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--sl-icon-button-size);
+  color: var(--sl-text-secondary);
+  background: var(--sl-popup-background);
+  cursor: pointer;
+}
+
+.SelectScrollArrow:hover {
+  background: var(--sl-fill-subtle);
+}
+
+.SelectScrollArrowIcon {
+  width: var(--sl-icon-size-minimize);
+  height: var(--sl-icon-size-minimize);
+}
+
+/* ============================================
+   ARROW (popup pointer)
+   ============================================ */
+
+.SelectArrow {
+  width: var(--sl-space-2-5);
+  height: var(--sl-space-2-5);
+}
+
+.SelectArrowFill {
+  fill: var(--sl-popup-arrow-fill);
+}
+
+.SelectArrowStroke {
+  stroke: var(--sl-popup-arrow-stroke);
+  stroke-width: var(--sl-stroke-default);
+}

package/dist/styles/components/Separator.css

@@ -0,0 +1,27 @@
+/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* Separator - Mojave Theme
+ *
+ * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
+ * space on either side. No component tokens.
+ */
+
+.Separator {
+  border: none;
+  background: var(--sl-border-default);
+  flex-shrink: 0;
+}
+
+.Separator[data-orientation='horizontal'],
+.Separator:not([data-orientation]) {
+  width: 100%;
+  height: var(--sl-stroke-default);
+  margin-block: var(--sl-space-4);
+  margin-inline: 0;
+}
+
+.Separator[data-orientation='vertical'] {
+  width: var(--sl-stroke-default);
+  height: 100%;
+  margin-block: 0;
+  margin-inline: var(--sl-space-4);
+}

package/dist/styles/components/Slider.css

@@ -0,0 +1,165 @@
+/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* Slider - Mojave Theme
+ *
+ * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
+ * Meter and Progress, thin size), and the fill is the scope's solid color, so data-color on the
+ * root re-colors it. The thumb is a field-colored knob ringed in that color. Only the knob size
+ * and the vertical length are slider tokens.
+ */
+
+.SliderRoot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-gauge-gap);
+  width: 100%;
+}
+
+.SliderHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.SliderLabel {
+  font-family: var(--sl-font-base-label-font-family);
+  font-size: var(--sl-font-base-label-font-size);
+  font-weight: var(--sl-font-base-label-font-weight);
+  line-height: var(--sl-font-base-label-line-height);
+  letter-spacing: var(--sl-font-base-label-letter-spacing);
+  color: var(--sl-gauge-label-color);
+}
+
+.SliderValue {
+  font-family: var(--sl-font-minimize-font-family);
+  font-size: var(--sl-font-minimize-font-size);
+  font-weight: var(--sl-font-minimize-font-weight);
+  line-height: var(--sl-font-minimize-line-height);
+  letter-spacing: var(--sl-font-minimize-letter-spacing);
+  color: var(--sl-gauge-value-color);
+}
+
+/* ============================================
+   CONTROL
+   ============================================ */
+
+/* Padding keeps the whole knob inside the hit area */
+.SliderControl {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  position: relative;
+  touch-action: none;
+  cursor: pointer;
+  width: 100%;
+  padding-block: calc(var(--sl-slider-thumb-size) / 2);
+  user-select: none;
+}
+
+/* Disabled fades as a whole, like a checkbox, so it keeps its color but reads as off */
+.SliderControl[data-disabled] {
+  cursor: not-allowed;
+  opacity: var(--sl-check-opacity-disabled);
+}
+
+.SliderControl[data-orientation='vertical'] {
+  height: var(--sl-slider-vertical-height);
+  width: auto;
+  padding-block: 0;
+  padding-inline: calc(var(--sl-slider-thumb-size) / 2);
+}
+
+/* ============================================
+   TRACK AND FILL
+   ============================================ */
+
+.SliderTrack {
+  position: relative;
+  width: 100%;
+  height: var(--sl-gauge-height-sm);
+  background: var(--sl-gauge-track-color);
+  border-radius: var(--sl-gauge-radius);
+  user-select: none;
+}
+
+.SliderControl[data-orientation='vertical'] .SliderTrack {
+  width: var(--sl-gauge-height-sm);
+  height: 100%;
+}
+
+.SliderIndicator {
+  position: absolute;
+  background: var(--sl-scope-solid);
+  border-radius: var(--sl-gauge-radius);
+  user-select: none;
+}
+
+.SliderControl[data-orientation='horizontal'] .SliderIndicator,
+.SliderControl:not([data-orientation]) .SliderIndicator {
+  height: 100%;
+}
+
+.SliderControl[data-orientation='vertical'] .SliderIndicator {
+  width: 100%;
+}
+
+/* ============================================
+   THUMB
+   ============================================ */
+
+.SliderThumb {
+  box-sizing: border-box;
+  width: var(--sl-slider-thumb-size);
+  height: var(--sl-slider-thumb-size);
+  background: var(--sl-field-background);
+  border: var(--sl-stroke-emphasis) solid var(--sl-scope-solid);
+  border-radius: var(--sl-radius-pill);
+  cursor: grab;
+  outline: none;
+  user-select: none;
+  transition: box-shadow var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+/* A pale halo grows as you reach for the knob and grows again while you drag it */
+@media (hover: hover) {
+  .SliderThumb:hover:not([data-disabled]) {
+    box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-scope-soft-hover);
+  }
+}
+
+.SliderThumb:has(:focus-visible) {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.SliderThumb[data-dragging] {
+  cursor: grabbing;
+  box-shadow: 0 0 0 calc(var(--sl-focus-halo-spread) * 1.5) var(--sl-scope-soft-active);
+}
+
+.SliderThumb[data-disabled] {
+  cursor: not-allowed;
+}
+
+/* ============================================
+   MARKS
+   ============================================ */
+
+/* A tick across the track: as long as the track is thick, twice over */
+.SliderMark {
+  position: absolute;
+  top: 50%;
+  width: var(--sl-stroke-emphasis);
+  height: calc(var(--sl-gauge-height-sm) * 2);
+  background: var(--sl-fill-strong);
+  border-radius: var(--sl-radius-pill);
+  transform: translate(-50%, -50%);
+}
+
+.SliderControl[data-orientation='vertical'] .SliderMark {
+  width: calc(var(--sl-gauge-height-sm) * 2);
+  height: var(--sl-stroke-emphasis);
+  left: 50%;
+  top: auto;
+  transform: translate(-50%, 50%);
+}

package/dist/styles/components/Switch.css

@@ -0,0 +1,165 @@
+/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* Switch - Mojave Theme
+ * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
+ * worked out from them: the thumb fills the track's height inside the padding,
+ * travels (width - height), and the text centers in the part the thumb leaves free.
+ */
+
+/* ============================================
+   CONTAINER
+   ============================================ */
+
+.SwitchContainer {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sl-gap-control);
+  color: var(--sl-text-primary);
+  cursor: pointer;
+  user-select: none;
+  --switch-width: var(--sl-switch-track-width);
+  --switch-height: var(--sl-switch-track-height);
+  --switch-text-size: var(--sl-switch-track-text-font-size);
+}
+
+.SwitchContainer[data-size='sm'] {
+  --switch-width: var(--sl-switch-track-width-sm);
+  --switch-height: var(--sl-switch-track-height-sm);
+  --switch-text-size: var(--sl-switch-track-text-font-size-sm);
+}
+
+.SwitchContainer[data-size='lg'] {
+  --switch-width: var(--sl-switch-track-width-lg);
+  --switch-height: var(--sl-switch-track-height-lg);
+  --switch-text-size: var(--sl-switch-track-text-font-size-lg);
+}
+
+.SwitchContainer[data-disabled] {
+  cursor: not-allowed;
+}
+
+/* ============================================
+   ROOT (Switch.Root - the track)
+   ============================================ */
+
+.SwitchRoot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  appearance: none;
+  margin: 0;
+  width: var(--switch-width);
+  height: var(--switch-height);
+  padding: var(--sl-switch-track-padding);
+  border: var(--sl-check-border-width) solid var(--sl-check-border-color);
+  border-radius: var(--sl-radius-pill);
+  background-color: var(--sl-fill-default);
+  cursor: pointer;
+  outline: none;
+  transition: background-color var(--sl-duration-normal) var(--sl-easing-in-out);
+}
+
+/* Track text (on/off), centered in the free part of the track */
+.SwitchRoot::before {
+  content: 'off';
+  position: absolute;
+  inset-block: 0;
+  right: var(--sl-switch-track-padding);
+  width: calc(var(--switch-width) - var(--switch-height));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--sl-font-condense-subtitle-label-font-family);
+  font-size: var(--sl-font-condense-subtitle-label-font-size);
+  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
+  line-height: var(--sl-font-condense-subtitle-label-line-height);
+  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
+  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+  font-size: var(--switch-text-size);
+  line-height: 1;
+  color: var(--sl-text-secondary);
+  pointer-events: none;
+  transition: opacity var(--sl-duration-normal) var(--sl-easing-in-out);
+}
+
+.SwitchRoot[data-checked] {
+  background-color: var(--sl-check-background-checked);
+  border-color: var(--sl-check-border-color-checked);
+}
+
+.SwitchRoot[data-checked]::before {
+  content: 'on';
+  right: auto;
+  left: var(--sl-switch-track-padding);
+  color: var(--sl-check-mark-color);
+}
+
+.SwitchRoot:hover:not([data-disabled]) {
+  background-color: var(--sl-fill-strong);
+}
+
+.SwitchRoot[data-checked]:hover:not([data-disabled]) {
+  background-color: var(--sl-interactive-hover);
+}
+
+.SwitchRoot:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.SwitchRoot[data-disabled] {
+  opacity: var(--sl-check-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ============================================
+   THUMB (Switch.Thumb - the moving circle)
+   ============================================ */
+
+.SwitchThumb {
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  border-radius: var(--sl-radius-pill);
+  background-color: var(--sl-check-background);
+  box-shadow: var(--sl-elevation-sm);
+  transition: translate var(--sl-duration-normal) var(--sl-easing-in-out);
+}
+
+.SwitchThumb[data-checked] {
+  translate: calc(var(--switch-width) - var(--switch-height)) 0;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+/* Switch labels run one step smaller than checkbox and radio labels (switch.json). */
+.SwitchLabel {
+  font-family: var(--sl-font-base-label-font-family);
+  font-size: var(--sl-font-base-label-font-size);
+  font-weight: var(--sl-font-base-label-font-weight);
+  line-height: var(--sl-font-base-label-line-height);
+  letter-spacing: var(--sl-font-base-label-letter-spacing);
+}
+
+.SwitchContainer[data-size='sm'] .SwitchLabel {
+  font-family: var(--sl-font-minimize-font-family);
+  font-size: var(--sl-font-minimize-font-size);
+  font-weight: var(--sl-font-minimize-font-weight);
+  line-height: var(--sl-font-minimize-line-height);
+  letter-spacing: var(--sl-font-minimize-letter-spacing);
+}
+
+.SwitchContainer[data-size='lg'] .SwitchLabel {
+  font-family: var(--sl-font-base-font-family);
+  font-size: var(--sl-font-base-font-size);
+  font-weight: var(--sl-font-base-font-weight);
+  line-height: var(--sl-font-base-line-height);
+  letter-spacing: var(--sl-font-base-letter-spacing);
+}
+
+.SwitchContainer[data-disabled] .SwitchLabel {
+  color: var(--sl-text-disabled);
+}