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

package/dist/styles/components/Collapsible.css

@@ -0,0 +1,115 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Collapsible - Mojave Theme
+ *
+ * No component tokens. Hover, press, chevron and motion are the disclosure concept
+ * (tokens/semantic/disclosure.json). The trigger is base-subtitle text with a base-size
+ * chevron; the panel lines up under the trigger's text and sits on the overlay surface.
+ */
+
+.Collapsible {
+  display: flex;
+  flex-direction: column;
+}
+
+.CollapsibleTrigger {
+  all: unset;
+  font-family: var(--sl-font-base-subtitle-font-family);
+  font-size: var(--sl-font-base-subtitle-font-size);
+  font-weight: var(--sl-font-base-subtitle-font-weight);
+  line-height: var(--sl-font-base-subtitle-line-height);
+  letter-spacing: var(--sl-font-base-subtitle-letter-spacing);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--sl-space-2);
+  padding: var(--sl-space-1) var(--sl-space-2);
+  border-radius: var(--sl-radius-item);
+  color: var(--sl-text-primary);
+  cursor: pointer;
+  transition: background-color var(--sl-disclosure-animation-duration) var(--sl-disclosure-animation-easing);
+}
+
+@media (hover: hover) {
+  .CollapsibleTrigger:hover {
+    background-color: var(--sl-disclosure-trigger-background-hover);
+  }
+}
+
+.CollapsibleTrigger:active {
+  background-color: var(--sl-disclosure-trigger-background-active);
+}
+
+.CollapsibleTrigger:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+}
+
+/* Chevron: points right when closed and down when open. */
+.CollapsibleIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  font-size: var(--sl-icon-size-base);
+  line-height: 1;
+  color: var(--sl-disclosure-icon-color);
+  transition: transform var(--sl-disclosure-animation-duration) var(--sl-disclosure-animation-easing);
+}
+
+.CollapsibleTrigger[data-panel-open] .CollapsibleIcon {
+  transform: rotate(90deg);
+}
+
+.CollapsiblePanel {
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+  height: var(--collapsible-panel-height);
+  overflow: hidden;
+  transition: height var(--sl-disclosure-animation-duration) var(--sl-disclosure-animation-easing);
+}
+
+.CollapsiblePanel[hidden]:not([hidden='until-found']) {
+  display: none;
+}
+
+.CollapsiblePanel[data-starting-style],
+.CollapsiblePanel[data-ending-style] {
+  height: 0;
+}
+
+/* Content starts under the trigger's text: its padding, the chevron and the gap. */
+.CollapsibleContent {
+  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;
+  flex-direction: column;
+  gap: var(--sl-space-2);
+  margin-top: var(--sl-space-1);
+  padding-block: var(--sl-space-2);
+  padding-inline: calc(var(--sl-space-2) * 2 + var(--sl-icon-size-base)) var(--sl-space-2);
+  border-radius: var(--sl-radius-item);
+  background-color: var(--sl-surface-overlay);
+  color: var(--sl-disclosure-content-color);
+}
+
+.CollapsibleContent p {
+  margin: 0;
+}
+
+.CollapsibleContent code {
+  font-family: var(--sl-font-code-font-family);
+  font-size: var(--sl-font-code-font-size);
+  font-weight: var(--sl-font-code-font-weight);
+  line-height: var(--sl-font-code-line-height);
+  letter-spacing: var(--sl-font-code-letter-spacing);
+  display: block;
+  margin-top: var(--sl-space-2);
+  padding: var(--sl-space-2);
+  border-radius: var(--sl-radius-item);
+  background: var(--sl-surface-raised);
+}

package/dist/styles/components/Combobox.css

@@ -0,0 +1,484 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Combobox - Mojave Theme
+ *
+ * No component tokens. The input is Input (Input.css); the chips box is a field; the
+ * clear and open buttons are icon buttons; the list is a popup of item rows with the
+ * shared group label, separator and empty message. Rules that adjust Input are scoped
+ * under a Combobox parent so they win over Input.css, which loads later.
+ */
+
+.ComboboxRoot {
+  position: relative;
+  width: 100%;
+}
+
+.ComboboxContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-gap-control);
+  max-width: var(--sl-measure-narrow);
+  min-height: var(--sl-control-height-md);
+  margin-inline: auto;
+}
+
+.ComboboxLabel {
+  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);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-field-label-spacing);
+  width: 100%;
+  color: var(--sl-text-primary);
+}
+
+.ComboboxInputWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* Room for the clear and open buttons at the end of the input */
+.ComboboxInputWrapper .ComboboxInput {
+  padding-inline-end: calc(var(--sl-control-padding-inline) + 2 * var(--sl-icon-button-size) + var(--sl-space-1));
+}
+
+/* ============================================
+   CHIPS (multiple selection): the chips box is the field
+   ============================================ */
+
+.ComboboxChips {
+  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;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-space-0-5);
+  width: 100%;
+  padding: var(--sl-space-1) var(--sl-space-1-5);
+}
+
+.ComboboxChips:focus-within {
+  border-color: var(--sl-field-border-color-focus);
+  box-shadow: var(--sl-field-shadow-focus);
+}
+
+.ComboboxChips .ComboboxInput,
+.ComboboxChips .ComboboxInput:focus {
+  flex: 1;
+  min-width: var(--sl-space-12);
+  height: var(--sl-space-8);
+  margin: 0;
+  padding-block: 0;
+  padding-inline: var(--sl-space-2) 0;
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.ComboboxChip {
+  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);
+  display: flex;
+  align-items: center;
+  gap: var(--sl-space-1);
+  padding-block: var(--sl-space-0-5);
+  padding-inline: var(--sl-space-1-5) var(--sl-space-0-5);
+  overflow: hidden;
+  border-radius: var(--sl-radius-item);
+  background-color: var(--sl-fill-subtle);
+  color: var(--sl-text-primary);
+  outline: 0;
+  cursor: default;
+}
+
+.ComboboxChip:focus-within {
+  background-color: var(--sl-interactive-default);
+  color: var(--sl-text-on-primary);
+}
+
+@media (hover: hover) {
+  .ComboboxChip[data-highlighted] {
+    background-color: var(--sl-interactive-default);
+    color: var(--sl-text-on-primary);
+  }
+}
+
+.ComboboxChipRemove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+  padding: var(--sl-space-1);
+  border: none;
+  border-radius: var(--sl-radius-item);
+  background: none;
+  color: inherit;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .ComboboxChipRemove:hover {
+    background-color: var(--sl-fill-default);
+  }
+}
+
+.ComboboxChipRemoveIcon {
+  font-size: var(--sl-icon-size-condense);
+  line-height: 1;
+}
+
+/* ============================================
+   CLEAR AND OPEN BUTTONS
+   ============================================ */
+
+.ComboboxActionButtons {
+  position: absolute;
+  top: 50%;
+  right: var(--sl-space-3);
+  display: flex;
+  gap: var(--sl-space-1);
+  transform: translateY(-50%);
+}
+
+.ComboboxClear,
+.ComboboxTrigger {
+  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: relative;
+  line-height: 1;
+}
+
+.ComboboxClear:hover,
+.ComboboxTrigger:hover {
+  background: var(--sl-icon-button-background-hover);
+  color: var(--sl-icon-button-color-hover);
+}
+
+.ComboboxClear:focus-visible,
+.ComboboxTrigger: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);
+}
+
+.ComboboxClearIcon,
+.ComboboxTriggerIcon {
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+}
+
+.ComboboxTriggerIcon {
+  transition: transform var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.ComboboxTrigger[aria-expanded='true'] .ComboboxTriggerIcon {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   POSITIONER, POPUP, LIST
+   ============================================ */
+
+.ComboboxPositioner {
+  z-index: var(--sl-popup-z-index);
+}
+
+.ComboboxPopup {
+  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);
+  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);
+  }
+}
+
+.ComboboxList {
+  max-height: var(--sl-popup-list-max-height);
+  overflow-y: auto;
+  margin: 0;
+  padding: var(--sl-popup-padding);
+  list-style: none;
+}
+
+/* ============================================
+   ITEM
+   ============================================ */
+
+.ComboboxItem {
+  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;
+}
+
+.ComboboxItem:hover,
+.ComboboxItem[data-highlighted] {
+  background: var(--sl-item-background-hover);
+  color: var(--sl-item-color-hover);
+}
+
+.ComboboxItem[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);
+}
+
+.ComboboxItem[data-disabled] {
+  color: var(--sl-item-color-disabled);
+  cursor: not-allowed;
+  opacity: var(--sl-item-opacity-disabled);
+}
+
+.ComboboxItemIndicator {
+  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;
+}
+
+.ComboboxItemIndicatorIcon {
+  font-size: var(--sl-item-indicator-size);
+  line-height: 1;
+}
+
+.ComboboxItemText {
+  flex: 1;
+}
+
+/* ============================================
+   GROUP, SEPARATOR, EMPTY, STATUS
+   ============================================ */
+
+.ComboboxGroupLabel {
+  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);
+}
+
+.ComboboxSeparator {
+  height: var(--sl-stroke-default);
+  margin-block: var(--sl-popup-separator-spacing);
+  border: none;
+  background: var(--sl-popup-separator-color);
+}
+
+.ComboboxEmpty:not(:empty) {
+  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 is hidden with the shared .visually-hidden class (reset-accessibility.css)
+   and shown while results load or when it has a message. */
+.ComboboxPopup[aria-busy] .ComboboxStatus,
+.ComboboxStatus:not(:empty) {
+  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);
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: var(--sl-space-3);
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+  text-align: center;
+  color: var(--sl-text-secondary);
+}
+
+.ComboboxPopup[aria-busy] .ComboboxStatus {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sl-space-2);
+}
+
+/* ============================================
+   SELECT-STYLE TRIGGER (input inside the popup)
+   ============================================ */
+
+.ComboboxSelectTrigger {
+  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;
+  width: 100%;
+  height: var(--sl-control-height-md);
+  padding-block: var(--sl-control-padding-block);
+  padding-inline: var(--sl-control-padding-inline);
+  cursor: pointer;
+}
+
+.ComboboxSelectTrigger:hover {
+  border-color: var(--sl-field-border-color-hover);
+}
+
+.ComboboxSelectTrigger:focus-visible {
+  border-color: var(--sl-field-border-color-focus);
+  box-shadow: var(--sl-field-shadow-focus);
+}
+
+.ComboboxIcon {
+  flex-shrink: 0;
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  color: var(--sl-text-tertiary);
+}
+
+.ComboboxInputContainer {
+  padding: var(--sl-space-2);
+  border-bottom: var(--sl-stroke-default) solid var(--sl-popup-separator-color);
+}
+
+.ComboboxInputContainer .ComboboxInput {
+  padding-inline-end: var(--sl-control-padding-inline);
+}
+
+/* ============================================
+   ASYNC AND RICH ITEMS
+   ============================================ */
+
+.ComboboxSpinner {
+  display: inline-block;
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  border: var(--sl-stroke-emphasis) solid var(--sl-fill-default);
+  border-top-color: var(--sl-interactive-default);
+  border-radius: var(--sl-radius-pill);
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.ComboboxItemTitle {
+  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);
+  color: var(--sl-text-primary);
+}
+
+.ComboboxItemSubtitle {
+  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);
+  display: flex;
+  gap: var(--sl-space-2);
+  margin-top: var(--sl-space-0-5);
+  color: var(--sl-text-secondary);
+}
+
+.ComboboxItemUsername {
+  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-interactive-default);
+}
+
+.ComboboxItemEmail {
+  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);
+  margin-top: var(--sl-space-0-5);
+  color: var(--sl-text-tertiary);
+}