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

package/dist/styles/components/Autocomplete.css

@@ -0,0 +1,201 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Autocomplete - Mojave Theme
+ *
+ * No component tokens. The input is Input (Input.css), the clear button is an icon
+ * button, and the list is a popup of item rows with the shared group label,
+ * separator and empty message.
+ */
+
+.AutocompleteRoot {
+  position: relative;
+  width: 100%;
+}
+
+/* Room for the clear button at the end of the input. Scoped to the root so it wins
+   over Input.css, which loads later. */
+.AutocompleteRoot .AutocompleteInput {
+  padding-inline-end: calc(var(--sl-control-padding-inline) + var(--sl-icon-button-size));
+}
+
+/* ============================================
+   CLEAR BUTTON
+   ============================================ */
+
+.AutocompleteClear {
+  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;
+  inset-inline-end: var(--sl-space-3);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+}
+
+.AutocompleteClear:hover {
+  background: var(--sl-icon-button-background-hover);
+  color: var(--sl-icon-button-color-hover);
+}
+
+.AutocompleteClear: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);
+}
+
+/* ============================================
+   POSITIONER AND POPUP
+   ============================================ */
+
+.AutocompletePositioner {
+  z-index: var(--sl-popup-z-index);
+}
+
+.AutocompletePopup {
+  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;
+  width: var(--anchor-width); /* Base UI's own variable */
+  max-width: var(--available-width); /* Base UI's own variable */
+  margin-block-start: var(--sl-space-1);
+  border-radius: var(--sl-popup-radius-field);
+  overflow: hidden;
+  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);
+  }
+}
+
+.AutocompletePopup[data-ending-style] {
+  animation: slideUp var(--sl-popup-animation-duration) var(--sl-popup-animation-easing);
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--sl-space-2)));
+  }
+}
+
+.AutocompleteList {
+  max-height: var(--sl-popup-list-max-height);
+  overflow-y: auto;
+  margin: 0;
+  padding: var(--sl-popup-padding);
+  list-style: none;
+}
+
+/* ============================================
+   ITEM
+   ============================================ */
+
+.AutocompleteItem {
+  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;
+  list-style: none;
+}
+
+.AutocompleteItem:hover,
+.AutocompleteItem[data-highlighted] {
+  background: var(--sl-item-background-hover);
+  color: var(--sl-item-color-hover);
+}
+
+.AutocompleteItem[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);
+}
+
+.AutocompleteItem[data-disabled] {
+  color: var(--sl-item-color-disabled);
+  cursor: not-allowed;
+  opacity: var(--sl-item-opacity-disabled);
+}
+
+/* ============================================
+   GROUP, SEPARATOR, EMPTY
+   ============================================ */
+
+.AutocompleteGroupLabel {
+  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);
+}
+
+.AutocompleteSeparator {
+  height: var(--sl-stroke-default);
+  margin-block: var(--sl-popup-separator-spacing);
+  border: none;
+  background: var(--sl-popup-separator-color);
+}
+
+.AutocompleteEmpty {
+  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);
+  padding-block: var(--sl-popup-empty-padding-block);
+  padding-inline: var(--sl-item-padding-inline);
+  color: var(--sl-text-tertiary);
+  text-align: center;
+}
+
+/* ============================================
+   STATUS (for screen readers)
+   Give Autocomplete.Status the shared .visually-hidden class
+   (reset-accessibility.css).
+   ============================================ */

package/dist/styles/components/Avatar.css

@@ -0,0 +1,134 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Avatar - Mojave Theme
+ *
+ * A round picture with a ring in the page color, so avatars in a group cut out of each other in
+ * both themes. Initials sit on the scope's solid fill in its on-solid text (the bold emphasis
+ * colors), so data-color re-colors them. Initials use the heading text style one tier per size.
+ * Only the sizes are avatar tokens.
+ */
+
+.AvatarRoot {
+  --avatar-size: var(--sl-avatar-size-md);
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  border-radius: var(--sl-radius-pill);
+  overflow: hidden;
+  background: var(--sl-fill-subtle);
+  border: var(--sl-stroke-emphasis) solid var(--sl-surface-canvas);
+  box-shadow: var(--sl-elevation-sm);
+}
+
+.AvatarImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.AvatarFallback {
+  font-family: var(--sl-font-maximize-md-font-family);
+  font-size: var(--sl-font-maximize-md-font-size);
+  font-weight: var(--sl-font-maximize-md-font-weight);
+  line-height: var(--sl-font-maximize-md-line-height);
+  letter-spacing: var(--sl-font-maximize-md-letter-spacing);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: var(--sl-scope-solid);
+  color: var(--sl-scope-on-solid);
+  text-transform: uppercase;
+  user-select: none;
+}
+
+/* ============================================
+   SIZES
+   ============================================ */
+
+.AvatarRoot[data-size='xs'] {
+  --avatar-size: var(--sl-avatar-size-xs);
+}
+
+.AvatarRoot[data-size='xs'] .AvatarFallback {
+  font-family: var(--sl-font-maximize-xs-font-family);
+  font-size: var(--sl-font-maximize-xs-font-size);
+  font-weight: var(--sl-font-maximize-xs-font-weight);
+  line-height: var(--sl-font-maximize-xs-line-height);
+  letter-spacing: var(--sl-font-maximize-xs-letter-spacing);
+}
+
+.AvatarRoot[data-size='sm'] {
+  --avatar-size: var(--sl-avatar-size-sm);
+}
+
+.AvatarRoot[data-size='sm'] .AvatarFallback {
+  font-family: var(--sl-font-maximize-sm-font-family);
+  font-size: var(--sl-font-maximize-sm-font-size);
+  font-weight: var(--sl-font-maximize-sm-font-weight);
+  line-height: var(--sl-font-maximize-sm-line-height);
+  letter-spacing: var(--sl-font-maximize-sm-letter-spacing);
+}
+
+.AvatarRoot[data-size='lg'] {
+  --avatar-size: var(--sl-avatar-size-lg);
+}
+
+.AvatarRoot[data-size='lg'] .AvatarFallback {
+  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);
+}
+
+.AvatarRoot[data-size='xl'] {
+  --avatar-size: var(--sl-avatar-size-xl);
+}
+
+.AvatarRoot[data-size='xl'] .AvatarFallback {
+  font-family: var(--sl-font-maximize-2xl-font-family);
+  font-size: var(--sl-font-maximize-2xl-font-size);
+  font-weight: var(--sl-font-maximize-2xl-font-weight);
+  line-height: var(--sl-font-maximize-2xl-line-height);
+  letter-spacing: var(--sl-font-maximize-2xl-letter-spacing);
+}
+
+/* ============================================
+   AVATAR GROUP
+   ============================================ */
+
+/* Each avatar tucks a third of itself under the one before it */
+.AvatarGroup {
+  display: flex;
+  align-items: center;
+}
+
+.AvatarGroup .AvatarRoot {
+  margin-inline-start: calc(var(--avatar-size) * -0.33);
+  transition: transform var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.AvatarGroup .AvatarRoot:first-child {
+  margin-inline-start: 0;
+}
+
+.AvatarGroup .AvatarRoot:hover {
+  z-index: 1;
+  transform: translateY(calc(var(--sl-stroke-emphasis) * -1));
+}
+
+/* ============================================
+   REDUCED MOTION
+   The reset already stops transitions and animations; this only removes movement.
+   ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .AvatarGroup .AvatarRoot:hover {
+    transform: none;
+  }
+}

package/dist/styles/components/Button.css

@@ -0,0 +1,129 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Button - Mojave Theme
+ *
+ * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
+ * text style of each tier, and icons fill the button line (icon-size one tier up).
+ * Only the pill shape and disabled fade are Button's own (tokens/component/button.json).
+ */
+
+/* ============================================
+   BASE BUTTON (md)
+   ============================================ */
+
+.Button {
+  font-family: var(--sl-font-base-trigger-font-family);
+  font-size: var(--sl-font-base-trigger-font-size);
+  font-weight: var(--sl-font-base-trigger-font-weight);
+  line-height: var(--sl-font-base-trigger-line-height);
+  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sl-gap-control);
+  height: var(--sl-control-height-md);
+  padding-inline: var(--sl-control-padding-inline);
+  border: var(--sl-stroke-default) solid transparent;
+  border-radius: var(--sl-button-radius);
+  transition: var(--sl-transition-button);
+  cursor: pointer;
+  outline: none;
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.Button svg {
+  width: var(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+}
+
+/* ============================================
+   EMPHASIS (data-emphasis="bold | standard | subtle | quiet")
+   The brand's roles decide each level's style and color (tokens/semantic/emphasis.json);
+   data-color="<palette>" re-colors any level. data-variant is an alias:
+   solid = bold (also the default), outline = standard, ghost = quiet. The aliases are
+   written with the levels in tokens.css, so data-emphasis wins when both are set.
+   ============================================ */
+
+.Button {
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+  border-color: var(--sl-e-border);
+}
+
+.Button:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--sl-e-bg-hover);
+  border-color: var(--sl-e-border-hover);
+}
+
+.Button:active:not(:disabled):not([aria-disabled='true']) {
+  background: var(--sl-e-bg-active);
+}
+
+/* Focus: a solid ring in the scope's focus color with a soft glow outside it. */
+.Button:focus-visible {
+  outline: var(--sl-a11y-focus-outline-width) solid var(--sl-scope-focus);
+  outline-offset: var(--sl-a11y-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-scope-soft-hover);
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.Button:disabled,
+.Button[aria-disabled='true'] {
+  opacity: var(--sl-button-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ============================================
+   SIZE VARIANTS: control size, the trigger text of the same tier, icons one tier up
+   ============================================ */
+
+.Button[data-size='xs'] {
+  font-family: var(--sl-font-minimize-trigger-font-family);
+  font-size: var(--sl-font-minimize-trigger-font-size);
+  font-weight: var(--sl-font-minimize-trigger-font-weight);
+  line-height: var(--sl-font-minimize-trigger-line-height);
+  letter-spacing: var(--sl-font-minimize-trigger-letter-spacing);
+  gap: var(--sl-gap-control-xs);
+  height: var(--sl-control-height-xs);
+  padding-inline: var(--sl-control-padding-inline-xs);
+}
+
+.Button[data-size='xs'] svg {
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+}
+
+.Button[data-size='sm'] {
+  font-family: var(--sl-font-condense-trigger-font-family);
+  font-size: var(--sl-font-condense-trigger-font-size);
+  font-weight: var(--sl-font-condense-trigger-font-weight);
+  line-height: var(--sl-font-condense-trigger-line-height);
+  letter-spacing: var(--sl-font-condense-trigger-letter-spacing);
+  gap: var(--sl-gap-control-sm);
+  height: var(--sl-control-height-sm);
+  padding-inline: var(--sl-control-padding-inline-sm);
+}
+
+.Button[data-size='sm'] svg {
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+}
+
+.Button[data-size='lg'] {
+  font-family: var(--sl-font-magnify-trigger-font-family);
+  font-size: var(--sl-font-magnify-trigger-font-size);
+  font-weight: var(--sl-font-magnify-trigger-font-weight);
+  line-height: var(--sl-font-magnify-trigger-line-height);
+  letter-spacing: var(--sl-font-magnify-trigger-letter-spacing);
+  height: var(--sl-control-height-lg);
+  padding-inline: var(--sl-control-padding-inline-lg);
+}
+
+.Button[data-size='lg'] svg {
+  width: var(--sl-icon-size-maximize);
+  height: var(--sl-icon-size-maximize);
+}

package/dist/styles/components/Checkbox.css

@@ -0,0 +1,156 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Checkbox - Mojave Theme
+ * Sizes follow the label: the box is the icon size one tier above the label's text
+ * tier (like a button's icon) and the check mark one tier below it.
+ */
+
+/* ============================================
+   LABEL WRAPPER
+   ============================================ */
+
+.CheckboxLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sl-gap-control);
+  color: var(--sl-text-primary);
+  cursor: pointer;
+  user-select: 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);
+  min-height: var(--sl-control-height-md); /* Tap target */
+}
+
+.CheckboxLabel:has(.CheckboxRoot[data-size='sm']) {
+  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);
+}
+
+.CheckboxLabel:has(.CheckboxRoot[data-size='lg']) {
+  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);
+}
+
+.CheckboxLabel:has(.CheckboxRoot[data-disabled]) {
+  color: var(--sl-text-disabled);
+  cursor: not-allowed;
+}
+
+/* ============================================
+   CHECKBOX ROOT (the box)
+   ============================================ */
+
+.CheckboxRoot {
+  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(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+  border-radius: var(--sl-check-radius);
+}
+
+.CheckboxRoot[data-size='sm'] {
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+}
+
+.CheckboxRoot[data-size='lg'] {
+  width: var(--sl-icon-size-maximize);
+  height: var(--sl-icon-size-maximize);
+}
+
+.CheckboxRoot:hover {
+  border-color: var(--sl-check-border-color-hover);
+}
+
+.CheckboxRoot: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);
+}
+
+.CheckboxRoot[data-checked],
+.CheckboxRoot[data-indeterminate] {
+  background: var(--sl-check-background-checked);
+  border-color: var(--sl-check-border-color-checked);
+}
+
+.CheckboxRoot[data-disabled] {
+  opacity: var(--sl-check-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ============================================
+   INDICATOR AND ICON (the mark)
+   ============================================ */
+
+.CheckboxIndicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+  width: 100%;
+  height: 100%;
+  color: var(--sl-check-mark-color);
+  line-height: 0;
+}
+
+.CheckboxIcon {
+  display: block;
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  fill: currentColor;
+}
+
+.CheckboxRoot[data-size='sm'] .CheckboxIcon {
+  width: var(--sl-icon-size-minimize);
+  height: var(--sl-icon-size-minimize);
+}
+
+.CheckboxRoot[data-size='lg'] .CheckboxIcon {
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+}
+
+/* ============================================
+   STYLE VARIANTS
+   ============================================ */
+
+/* Outline: the box stays empty and only the mark takes the color. */
+.CheckboxRoot[data-variant='outline'][data-checked],
+.CheckboxRoot[data-variant='circular-outline'][data-checked] {
+  background: transparent;
+}
+
+.CheckboxRoot[data-variant='outline'][data-checked] .CheckboxIndicator,
+.CheckboxRoot[data-variant='circular-outline'][data-checked] .CheckboxIndicator {
+  color: var(--sl-check-mark-color-outline);
+}
+
+.CheckboxRoot[data-variant='outline'][data-disabled][data-checked] .CheckboxIndicator,
+.CheckboxRoot[data-variant='circular-outline'][data-disabled][data-checked] .CheckboxIndicator {
+  color: var(--sl-check-mark-color-disabled);
+}
+
+.CheckboxRoot[data-variant='circular'],
+.CheckboxRoot[data-variant='circular-outline'] {
+  border-radius: var(--sl-radius-pill);
+}

package/dist/styles/components/CheckboxGroup.css

@@ -0,0 +1,15 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Checkbox Group - Mojave Theme */
+
+/* Each checkbox row is already a full tap target tall, so the rows sit close. */
+.CheckboxGroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-0-5);
+}
+
+.CheckboxGroup[data-disabled] {
+  opacity: var(--sl-check-opacity-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}