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

package/dist/styles/components/Popover.css

@@ -0,0 +1,161 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Popover - Mojave Theme */
+
+/* ============================================
+   TRIGGER
+   ============================================ */
+
+.PopoverTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ============================================
+   BACKDROP
+   ============================================ */
+
+.PopoverBackdrop {
+  position: fixed;
+  inset: 0;
+  background: transparent;
+  z-index: var(--sl-z-index-dropdown);
+}
+
+/* ============================================
+   POSITIONER
+   ============================================ */
+
+.PopoverPositioner {
+  z-index: var(--sl-popup-z-index);
+  outline: 0;
+}
+
+/* ============================================
+   POPUP
+   ============================================ */
+
+.PopoverPopup {
+  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;
+  transform-origin: var(--transform-origin);
+  transition:
+  opacity var(--sl-popup-animation-duration) var(--sl-popup-animation-easing),
+  transform var(--sl-popup-animation-duration) var(--sl-popup-animation-easing);
+  position: relative;
+  min-width: var(--sl-popover-popup-min-width);
+  max-width: var(--sl-popover-popup-max-width);
+  padding: var(--sl-popup-padding-panel);
+}
+
+.PopoverPopup[data-starting-style],
+.PopoverPopup[data-ending-style] {
+  opacity: 0;
+  transform: scale(var(--sl-popup-scale-closed));
+}
+
+/* ============================================
+   TITLE
+   ============================================ */
+
+.PopoverTitle {
+  font-family: var(--sl-font-maximize-lg-font-family);
+  font-size: var(--sl-font-maximize-lg-font-size);
+  font-weight: var(--sl-font-maximize-lg-font-weight);
+  line-height: var(--sl-font-maximize-lg-line-height);
+  letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
+  color: var(--sl-text-primary);
+  margin: 0 0 var(--sl-space-block-xs) 0;
+}
+
+/* ============================================
+   DESCRIPTION
+   ============================================ */
+
+.PopoverDescription {
+  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);
+  color: var(--sl-text-secondary);
+  margin: 0;
+}
+
+/* ============================================
+   CLOSE BUTTON
+   ============================================ */
+
+.PopoverClose {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--sl-icon-button-size);
+  height: var(--sl-icon-button-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--sl-icon-button-radius);
+  background: transparent;
+  color: var(--sl-icon-button-color);
+  cursor: pointer;
+  outline: none;
+  transition: var(--sl-icon-button-transition);
+  position: absolute;
+  top: var(--sl-icon-button-inset);
+  right: var(--sl-icon-button-inset);
+}
+
+.PopoverClose:hover {
+  background: var(--sl-icon-button-background-hover);
+  color: var(--sl-icon-button-color-hover);
+}
+
+.PopoverClose:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+/* ============================================
+   ARROW
+   ============================================ */
+
+.PopoverArrow {
+  display: flex;
+}
+
+.PopoverArrow[data-side='top'] {
+  bottom: -8px;
+  rotate: 180deg;
+}
+
+.PopoverArrow[data-side='bottom'] {
+  top: -8px;
+  rotate: 0deg;
+}
+
+.PopoverArrow[data-side='left'] {
+  right: -13px;
+  rotate: 90deg;
+}
+
+.PopoverArrow[data-side='right'] {
+  left: -13px;
+  rotate: -90deg;
+}
+
+.PopoverArrowFill {
+  fill: var(--sl-popup-arrow-fill);
+}
+
+.PopoverArrowOuterStroke {
+  fill: var(--sl-popup-arrow-stroke);
+}
+
+.PopoverArrowInnerStroke {
+  fill: var(--sl-popup-arrow-stroke);
+}

package/dist/styles/components/PreviewCard.css

@@ -0,0 +1,116 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Preview Card - Mojave Theme
+ *
+ * The popup concept (surface, arrow, motion) with a maximize-lg title and condense
+ * description. Only its min and max width are its own (tokens/component/preview-card.json).
+ */
+
+/* Trigger: a link with a dotted underline, so it reads as "hover for more". */
+.PreviewCardTrigger {
+  color: var(--sl-content-link-color);
+  text-decoration: underline dotted;
+  text-underline-offset: var(--sl-stroke-medium);
+  cursor: pointer;
+}
+
+.PreviewCardTrigger:hover {
+  color: var(--sl-text-accent);
+}
+
+.PreviewCardPositioner {
+  z-index: var(--sl-popup-z-index);
+  outline: 0;
+}
+
+.PreviewCardPopup {
+  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;
+  transform-origin: var(--transform-origin);
+  transition:
+  opacity var(--sl-popup-animation-duration) var(--sl-popup-animation-easing),
+  transform var(--sl-popup-animation-duration) var(--sl-popup-animation-easing);
+  position: relative;
+  min-width: var(--sl-preview-card-popup-min-width);
+  max-width: var(--sl-preview-card-popup-max-width);
+  overflow: hidden;
+}
+
+.PreviewCardPopup[data-starting-style],
+.PreviewCardPopup[data-ending-style] {
+  opacity: 0;
+  transform: scale(var(--sl-popup-scale-closed));
+}
+
+.PreviewCardImage {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.PreviewCardContent {
+  padding: var(--sl-popup-padding-panel);
+}
+
+.PreviewCardTitle {
+  font-family: var(--sl-font-maximize-lg-font-family);
+  font-size: var(--sl-font-maximize-lg-font-size);
+  font-weight: var(--sl-font-maximize-lg-font-weight);
+  line-height: var(--sl-font-maximize-lg-line-height);
+  letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
+  margin: 0 0 var(--sl-space-2) 0;
+  color: var(--sl-text-primary);
+}
+
+.PreviewCardDescription {
+  font-family: var(--sl-font-condense-font-family);
+  font-size: var(--sl-font-condense-font-size);
+  font-weight: var(--sl-font-condense-font-weight);
+  line-height: var(--sl-font-condense-line-height);
+  letter-spacing: var(--sl-font-condense-letter-spacing);
+  margin: 0;
+  color: var(--sl-text-secondary);
+}
+
+/* ============================================
+   ARROW
+   ============================================ */
+
+.PreviewCardArrow {
+  display: flex;
+}
+
+.PreviewCardArrow[data-side='top'] {
+  bottom: -8px;
+  rotate: 180deg;
+}
+
+.PreviewCardArrow[data-side='bottom'] {
+  top: -8px;
+  rotate: 0deg;
+}
+
+.PreviewCardArrow[data-side='left'] {
+  right: -13px;
+  rotate: 90deg;
+}
+
+.PreviewCardArrow[data-side='right'] {
+  left: -13px;
+  rotate: -90deg;
+}
+
+.PreviewCardArrowFill {
+  fill: var(--sl-popup-arrow-fill);
+}
+
+.PreviewCardArrowOuterStroke {
+  fill: var(--sl-popup-arrow-stroke);
+}
+
+.PreviewCardArrowInnerStroke {
+  fill: var(--sl-popup-arrow-stroke);
+}

package/dist/styles/components/Progress.css

@@ -0,0 +1,76 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Progress - Mojave Theme
+ *
+ * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
+ * the scope around it: the accent by default, or set data-color on the root (success, warning,
+ * error, any palette).
+ */
+
+.ProgressRoot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-gauge-gap);
+  width: 100%;
+}
+
+.ProgressHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.ProgressLabel {
+  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);
+}
+
+.ProgressValue {
+  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);
+}
+
+.ProgressTrack {
+  position: relative;
+  height: var(--sl-gauge-height);
+  background: var(--sl-gauge-track-color);
+  border-radius: var(--sl-gauge-radius);
+  overflow: hidden;
+}
+
+.ProgressIndicator {
+  height: 100%;
+  background: var(--sl-scope-solid);
+  border-radius: var(--sl-gauge-radius);
+  transition: var(--sl-gauge-transition);
+}
+
+/* Indeterminate: the fill sweeps across while the amount is unknown */
+.ProgressRoot[data-indeterminate] .ProgressIndicator {
+  width: 50%;
+  animation: progressIndeterminate var(--sl-gauge-indeterminate-duration) ease-in-out infinite;
+}
+
+@keyframes progressIndeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}
+
+.ProgressRoot[data-size='sm'] .ProgressTrack {
+  height: var(--sl-gauge-height-sm);
+}
+
+.ProgressRoot[data-size='lg'] .ProgressTrack {
+  height: var(--sl-gauge-height-lg);
+}

package/dist/styles/components/Radio.css

@@ -0,0 +1,151 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Radio - Mojave Theme
+ * Same box as Checkbox, always round. Sizes follow the label the same way, and the
+ * dot is a share of the circle (check.dot-scale).
+ */
+
+/* ============================================
+   ROOT (label wrapper)
+   ============================================ */
+
+.RadioRoot {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sl-gap-control);
+  color: var(--sl-text-primary);
+  cursor: pointer;
+  user-select: none;
+  --radio-size: var(--sl-icon-size-magnify);
+}
+
+.RadioRoot[data-size='sm'] {
+  --radio-size: var(--sl-icon-size-base);
+}
+
+.RadioRoot[data-size='lg'] {
+  --radio-size: var(--sl-icon-size-maximize);
+}
+
+.RadioRoot[data-disabled] {
+  cursor: not-allowed;
+}
+
+/* ============================================
+   RADIO BUTTON (Radio.Root element)
+   ============================================ */
+
+.RadioButton {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  border: var(--sl-check-border-width) solid var(--sl-check-border-color);
+  background: var(--sl-check-background);
+  cursor: pointer;
+  outline: none;
+  transition: var(--sl-check-transition);
+  width: var(--radio-size);
+  height: var(--radio-size);
+  border-radius: var(--sl-radius-pill);
+}
+
+.RadioRoot:hover .RadioButton[data-unchecked]:not([disabled]) {
+  border-color: var(--sl-check-border-color-hover);
+}
+
+.RadioButton[data-checked] {
+  background: var(--sl-check-background-checked);
+  border-color: var(--sl-check-border-color-checked);
+}
+
+.RadioButton: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);
+}
+
+.RadioButton[disabled] {
+  opacity: var(--sl-check-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ============================================
+   RADIO INDICATOR (inner dot)
+   ============================================ */
+
+.RadioIndicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.RadioIndicator[data-unchecked] {
+  display: none;
+}
+
+.RadioIndicator::before {
+  content: '';
+  width: round(var(--radio-size) * var(--sl-check-dot-scale), 1px);
+  height: round(var(--radio-size) * var(--sl-check-dot-scale), 1px);
+  border-radius: var(--sl-radius-pill);
+  background-color: var(--sl-check-mark-color);
+  animation: radioScale var(--sl-duration-fast) var(--sl-easing-out);
+}
+
+@keyframes radioScale {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.RadioLabel {
+  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);
+}
+
+.RadioRoot[data-size='sm'] .RadioLabel {
+  font-family: var(--sl-font-condense-font-family);
+  font-size: var(--sl-font-condense-font-size);
+  font-weight: var(--sl-font-condense-font-weight);
+  line-height: var(--sl-font-condense-line-height);
+  letter-spacing: var(--sl-font-condense-letter-spacing);
+}
+
+.RadioRoot[data-size='lg'] .RadioLabel {
+  font-family: var(--sl-font-magnify-font-family);
+  font-size: var(--sl-font-magnify-font-size);
+  font-weight: var(--sl-font-magnify-font-weight);
+  line-height: var(--sl-font-magnify-line-height);
+  letter-spacing: var(--sl-font-magnify-letter-spacing);
+}
+
+.RadioRoot[data-disabled] .RadioLabel {
+  color: var(--sl-text-disabled);
+}
+
+/* ============================================
+   GROUP
+   ============================================ */
+
+.RadioGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-gap-stack-sm);
+}

package/dist/styles/components/ScrollArea.css

@@ -0,0 +1,81 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Scroll Area - Mojave Theme
+ *
+ * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
+ * you reach for it, and a thumb in the strong fills. No component tokens.
+ */
+
+.ScrollAreaRoot {
+  position: relative;
+  overflow: hidden;
+}
+
+.ScrollAreaViewport {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* ============================================
+   SCROLLBAR
+   ============================================ */
+
+/* 12px bar with the thumb inset by a medium stroke */
+.ScrollAreaScrollbar {
+  display: flex;
+  user-select: none;
+  touch-action: none;
+  padding: var(--sl-stroke-medium);
+  background: var(--sl-content-scrollbar-track);
+  transition: background-color var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.ScrollAreaScrollbar:hover {
+  background: var(--sl-fill-subtle);
+}
+
+.ScrollAreaScrollbar[data-orientation='vertical'] {
+  width: var(--sl-space-3);
+  flex-direction: column;
+}
+
+.ScrollAreaScrollbar[data-orientation='horizontal'] {
+  height: var(--sl-space-3);
+  flex-direction: row;
+}
+
+/* ============================================
+   THUMB
+   ============================================ */
+
+.ScrollAreaThumb {
+  flex: 1;
+  position: relative;
+  background: var(--sl-content-scrollbar-thumb);
+  border-radius: var(--sl-radius-pill);
+  cursor: pointer;
+  transition: background-color var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.ScrollAreaThumb:hover,
+.ScrollAreaThumb:active,
+.ScrollAreaThumb[data-dragging] {
+  background: var(--sl-content-scrollbar-thumb-hover);
+}
+
+/* A 44px hit area however small the thumb gets */
+.ScrollAreaThumb::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  min-width: 44px;
+  min-height: 44px;
+}
+
+.ScrollAreaCorner {
+  background: transparent;
+}