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

package/dist/styles/components/Tabs.css

@@ -0,0 +1,135 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Tabs - Mojave Theme
+ *
+ * No component tokens. The divider, the selected line and color, hover and the disabled
+ * fade are the disclosure concept (tokens/semantic/disclosure.json). Tabs use the text
+ * style of their tier and switch to that tier's selected style when chosen, like a
+ * selected row in a list.
+ */
+
+.TabsRoot {
+  display: flex;
+  flex-direction: column;
+}
+
+.TabsRoot[data-orientation='vertical'] {
+  flex-direction: row;
+}
+
+/* Tab list: a divider along the edge the tabs sit on. */
+.TabsList {
+  display: flex;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-disclosure-divider-color);
+}
+
+.TabsRoot[data-orientation='vertical'] .TabsList {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: var(--sl-stroke-default) solid var(--sl-disclosure-divider-color);
+}
+
+/* Tab: a transparent line under it that turns accent when selected. */
+.TabsTab {
+  all: unset;
+  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);
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--sl-space-2) var(--sl-space-4);
+  color: var(--sl-text-secondary);
+  border-bottom: var(--sl-disclosure-indicator-width) solid transparent;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: var(--sl-transition-button);
+}
+
+.TabsTab:hover:not([data-disabled]) {
+  color: var(--sl-text-primary);
+  background: var(--sl-disclosure-trigger-background-hover);
+}
+
+.TabsTab[data-active] {
+  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);
+  color: var(--sl-disclosure-selected-color);
+  border-bottom-color: var(--sl-disclosure-indicator-color);
+}
+
+.TabsTab:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+.TabsTab[data-disabled] {
+  color: var(--sl-text-disabled);
+  opacity: var(--sl-disclosure-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.TabsRoot[data-orientation='vertical'] .TabsTab {
+  border-bottom: none;
+  border-right: var(--sl-disclosure-indicator-width) solid transparent;
+}
+
+.TabsRoot[data-orientation='vertical'] .TabsTab[data-active] {
+  border-right-color: var(--sl-disclosure-indicator-color);
+}
+
+/* Panel */
+.TabsPanel {
+  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);
+  padding: var(--sl-space-4);
+  color: var(--sl-text-primary);
+}
+
+.TabsPanel:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+}
+
+/* Sizes: the minimize tier for small tabs, more room for large ones. */
+.TabsRoot[data-size='sm'] .TabsTab {
+  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);
+  padding: var(--sl-space-1-5) var(--sl-space-3);
+}
+
+.TabsRoot[data-size='sm'] .TabsTab[data-active] {
+  font-family: var(--sl-font-minimize-selected-font-family);
+  font-size: var(--sl-font-minimize-selected-font-size);
+  font-weight: var(--sl-font-minimize-selected-font-weight);
+  line-height: var(--sl-font-minimize-selected-line-height);
+  letter-spacing: var(--sl-font-minimize-selected-letter-spacing);
+}
+
+.TabsRoot[data-size='sm'] .TabsPanel {
+  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);
+  padding: var(--sl-space-3);
+}
+
+.TabsRoot[data-size='lg'] .TabsTab {
+  padding: var(--sl-space-3) var(--sl-space-6);
+}
+
+.TabsRoot[data-size='lg'] .TabsPanel {
+  padding: var(--sl-space-6);
+}

package/dist/styles/components/Toast.css

@@ -0,0 +1,235 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Toast - Mojave Theme
+ *
+ * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
+ * is success, warning, error or info takes that palette (the build points the scope at it);
+ * data-color picks any other palette. Toast tokens hold only the stack's place and width.
+ */
+
+/* ============================================
+   VIEWPORT
+   ============================================ */
+
+.Viewport {
+  position: fixed;
+  z-index: var(--sl-notice-z-index);
+  width: var(--sl-toast-viewport-width);
+  margin: 0 auto;
+  bottom: var(--sl-toast-viewport-margin);
+  right: var(--sl-toast-viewport-margin);
+  left: auto;
+  top: auto;
+  outline: 0;
+}
+
+@media (min-width: 500px) {
+  .Viewport {
+    bottom: var(--sl-toast-viewport-margin-md);
+    right: var(--sl-toast-viewport-margin-md);
+    width: var(--sl-toast-viewport-width-md);
+  }
+}
+
+/* ============================================
+   TOAST ROOT
+   ============================================ */
+
+.Toast {
+  /* Stacking: each toast behind the front one shrinks and peeks out above it */
+  --gap: var(--sl-notice-gap);
+  --peek: var(--sl-notice-peek);
+  --scale: calc(max(0, 1 - (var(--toast-index) * 0.1)));
+  --shrink: calc(1 - var(--scale));
+  --height: var(--toast-frontmost-height, var(--toast-height));
+  --offset-y: calc(
+    var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) +
+      var(--toast-swipe-movement-y)
+  );
+
+  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;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  margin: 0 auto;
+  margin-right: 0;
+  width: 100%;
+  color: var(--sl-text-primary);
+  padding: var(--sl-notice-padding);
+  background-clip: padding-box;
+  transform-origin: bottom center;
+  user-select: none;
+  cursor: default;
+
+  z-index: calc(1000 - var(--toast-index));
+  height: var(--height);
+
+  transform: translateX(var(--toast-swipe-movement-x))
+    translateY(
+      calc(
+        var(--toast-swipe-movement-y) - (var(--toast-index) * var(--peek)) -
+          (var(--shrink) * var(--height))
+      )
+    )
+    scale(var(--scale));
+
+  transition:
+    transform var(--sl-notice-animation-duration) var(--sl-notice-animation-easing),
+    opacity var(--sl-notice-animation-duration),
+    height var(--sl-duration-fast);
+}
+
+/* A tinted toast: the palette's soft fill, edge and text */
+.Toast:is([data-color], [data-type='success'], [data-type='warning'], [data-type='error'], [data-type='info']) {
+  --notice-text: var(--sl-scope-on-soft);
+  --notice-close-hover: var(--sl-scope-soft-hover);
+  background: var(--sl-scope-soft);
+  border-color: var(--sl-scope-border);
+  color: var(--notice-text);
+}
+
+/* Expanded state - when hovering viewport */
+.Toast[data-expanded] {
+  transform: translateX(var(--toast-swipe-movement-x))
+    translateY(var(--offset-y));
+  height: var(--toast-height);
+}
+
+.Toast[data-starting-style],
+.Toast[data-ending-style] {
+  transform: translateY(150%);
+}
+
+.Toast[data-ending-style] {
+  opacity: 0;
+}
+
+.Toast[data-ending-style][data-swipe-direction='up'] {
+  transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
+}
+
+.Toast[data-ending-style][data-swipe-direction='down'] {
+  transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
+}
+
+.Toast[data-ending-style][data-swipe-direction='left'] {
+  transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))
+    translateY(var(--offset-y));
+}
+
+.Toast[data-ending-style][data-swipe-direction='right'] {
+  transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))
+    translateY(var(--offset-y));
+}
+
+/* Limited (removed due to exceeding limit) */
+.Toast[data-limited] {
+  opacity: 0;
+}
+
+/* Keeps the pointer inside the stack across the gaps between toasts */
+.Toast::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  left: 0;
+  height: calc(var(--gap) + 1px);
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.Content {
+  overflow: hidden;
+  transition: opacity var(--sl-notice-animation-duration);
+}
+
+.Content[data-behind] {
+  opacity: 0;
+}
+
+.Content[data-expanded] {
+  opacity: 1;
+}
+
+/* ============================================
+   TITLE AND DESCRIPTION
+   ============================================ */
+
+.Title {
+  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);
+  margin: 0;
+}
+
+.Description {
+  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(--notice-text, var(--sl-notice-description-color));
+  margin: 0;
+  margin-top: var(--sl-notice-text-gap);
+}
+
+/* ============================================
+   CLOSE BUTTON
+   ============================================ */
+
+.Close {
+  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);
+  color: var(--notice-text, var(--sl-icon-button-color));
+}
+
+.Close:hover {
+  background-color: var(--notice-close-hover, var(--sl-icon-button-background-hover));
+  color: var(--notice-text, var(--sl-icon-button-color-hover));
+}
+
+.Close:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+.Close .Icon {
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+/* One tier above the description, the same rule as a button icon */
+.Icon {
+  width: var(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+  flex-shrink: 0;
+}

package/dist/styles/components/Toggle.css

@@ -0,0 +1,109 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Toggle - Mojave Theme
+ * A toggle is a button that stays pressed: the same heights, padding, gap and
+ * trigger text style as a button of the same size.
+ */
+
+/* ============================================
+   ROOT
+   ============================================ */
+
+.Toggle {
+  all: unset;
+  box-sizing: border-box;
+  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);
+  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);
+  background: var(--sl-surface-base);
+  border: var(--sl-stroke-default) solid var(--sl-border-default);
+  border-radius: var(--sl-radius-chrome);
+  cursor: pointer;
+  user-select: none;
+  transition: var(--sl-transition-button);
+}
+
+.Toggle:hover:not([data-disabled]):not(:disabled) {
+  background: var(--sl-surface-raised);
+  border-color: var(--sl-border-strong);
+}
+
+.Toggle[data-pressed],
+.Toggle[aria-pressed='true'] {
+  background: var(--sl-interactive-tint-hover);
+  color: var(--sl-interactive-default);
+  border-color: var(--sl-border-accent);
+}
+
+.Toggle[data-pressed]:hover:not([data-disabled]):not(:disabled),
+.Toggle[aria-pressed='true']:hover:not([data-disabled]):not(:disabled) {
+  background: var(--sl-interactive-tint-strong);
+  border-color: var(--sl-interactive-hover);
+}
+
+.Toggle: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);
+}
+
+.Toggle[data-disabled],
+.Toggle:disabled {
+  opacity: var(--sl-toggle-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+
+.Toggle[data-size='sm'] {
+  gap: var(--sl-gap-control-sm);
+  height: var(--sl-control-height-sm);
+  padding-inline: var(--sl-control-padding-inline-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);
+  border-radius: var(--sl-radius-item);
+}
+
+.Toggle[data-size='lg'] {
+  height: var(--sl-control-height-lg);
+  padding-inline: var(--sl-control-padding-inline-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);
+  border-radius: var(--sl-radius-surface);
+}
+
+/* ============================================
+   ICON (one tier above the text, like a button)
+   ============================================ */
+
+.Toggle svg {
+  width: var(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+  flex-shrink: 0;
+}
+
+.Toggle[data-size='sm'] svg {
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+}
+
+.Toggle[data-size='lg'] svg {
+  width: var(--sl-icon-size-maximize);
+  height: var(--sl-icon-size-maximize);
+}

package/dist/styles/components/ToggleGroup.css

@@ -0,0 +1,20 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Toggle Group - Mojave Theme
+ *
+ * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
+ * toggles are Toggle, with item corners so they nest inside the strip's.
+ */
+
+.ToggleGroup {
+  box-sizing: border-box;
+  padding: var(--sl-bar-padding);
+  background: var(--sl-bar-background);
+  border: var(--sl-bar-border-width) solid var(--sl-bar-border-color);
+  border-radius: var(--sl-bar-radius);
+  display: inline-flex;
+  gap: var(--sl-bar-gap);
+}
+
+.ToggleGroup .Toggle {
+  border-radius: var(--sl-radius-item);
+}

package/dist/styles/components/Toolbar.css

@@ -0,0 +1,61 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Toolbar - Mojave Theme
+ *
+ * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
+ * and inputs inside it keep their own styles; only the field's width is the toolbar's.
+ */
+
+.Toolbar {
+  box-sizing: border-box;
+  padding: var(--sl-bar-padding);
+  background: var(--sl-bar-background);
+  border: var(--sl-bar-border-width) solid var(--sl-bar-border-color);
+  border-radius: var(--sl-bar-radius);
+  display: flex;
+  align-items: center;
+  gap: var(--sl-bar-group-gap);
+}
+
+.ToolbarGroup {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-bar-gap);
+}
+
+.ToolbarSeparator {
+  width: var(--sl-bar-border-width);
+  height: var(--sl-bar-separator-length);
+  margin-inline: var(--sl-bar-separator-spacing);
+  background: var(--sl-bar-separator-color);
+  border: none;
+}
+
+/* Link: secondary text that darkens on hover. */
+.ToolbarLink {
+  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: inline-flex;
+  align-items: center;
+  padding-inline: var(--sl-control-padding-inline-sm);
+  color: var(--sl-text-secondary);
+  text-decoration: none;
+  transition: var(--sl-transition-button);
+}
+
+.ToolbarLink:hover {
+  color: var(--sl-text-primary);
+}
+
+.ToolbarLink: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);
+  border-radius: var(--sl-radius-item);
+}
+
+.Toolbar .ToolbarInput {
+  max-width: var(--sl-toolbar-input-max-width);
+}

package/dist/styles/components/Tooltip.css

@@ -0,0 +1,59 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Tooltip - Mojave Theme
+ *
+ * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
+ * reads as a label laid over the page. Motion is the popup's; only the width limit is
+ * the tooltip's own (tokens/component/tooltip.json).
+ */
+
+.TooltipTrigger {
+  cursor: help;
+}
+
+.TooltipPositioner {
+  z-index: var(--sl-z-index-tooltip);
+}
+
+.TooltipPopup {
+  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);
+  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);
+  max-width: var(--sl-tooltip-max-width);
+  padding: var(--sl-space-1-5) var(--sl-space-2-5);
+  border-radius: var(--sl-radius-chrome);
+  background: var(--sl-surface-inverse);
+  color: var(--sl-text-on-inverse-surface);
+  box-shadow: var(--sl-popup-shadow);
+  overflow-wrap: break-word;
+  user-select: none;
+}
+
+.TooltipPopup[data-starting-style],
+.TooltipPopup[data-ending-style] {
+  opacity: 0;
+  transform: scale(var(--sl-popup-scale-closed));
+}
+
+/* Arrow: as wide as three spacing steps and half as tall, in the tooltip's fill. */
+.TooltipArrow {
+  width: var(--sl-space-3);
+  height: calc(var(--sl-space-3) / 2);
+}
+
+.TooltipArrow svg {
+  fill: var(--sl-surface-inverse);
+}
+
+/* The reset already stops transitions; this only removes the grow. */
+@media (prefers-reduced-motion: reduce) {
+  .TooltipPopup[data-starting-style],
+  .TooltipPopup[data-ending-style] {
+    transform: none;
+  }
+}

package/dist/styles/index.css

@@ -0,0 +1,52 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
+   Loomiere theme. Load the theme first:
+     @import '<your theme>/tokens.css';
+     @import '<your theme>/utilities.css';
+     @import '@scattered-light/loomiere-base-ui/styles.css'; */
+@import '@material-symbols/font-400/outlined.css';
+
+/* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
+   frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
+@import './reset/reset.css' layer(reset);
+@import './reset/reset-accessibility.css' layer(reset);
+@import './reset/accessibility.css' layer(reset);
+
+/* Component styles */
+@import './components/Accordion.css';
+@import './components/AlertDialog.css';
+@import './components/Autocomplete.css';
+@import './components/Avatar.css';
+@import './components/Button.css';
+@import './components/Checkbox.css';
+@import './components/CheckboxGroup.css';
+@import './components/Collapsible.css';
+@import './components/Combobox.css';
+@import './components/ContextMenu.css';
+@import './components/Dialog.css';
+@import './components/Drawer.css';
+@import './components/Field.css';
+@import './components/Fieldset.css';
+@import './components/Form.css';
+@import './components/Input.css';
+@import './components/Menu.css';
+@import './components/Menubar.css';
+@import './components/Meter.css';
+@import './components/NavigationMenu.css';
+@import './components/NumberField.css';
+@import './components/OTPField.css';
+@import './components/Popover.css';
+@import './components/PreviewCard.css';
+@import './components/Progress.css';
+@import './components/Radio.css';
+@import './components/ScrollArea.css';
+@import './components/Select.css';
+@import './components/Separator.css';
+@import './components/Slider.css';
+@import './components/Switch.css';
+@import './components/Tabs.css';
+@import './components/Toast.css';
+@import './components/Toggle.css';
+@import './components/ToggleGroup.css';
+@import './components/Toolbar.css';
+@import './components/Tooltip.css';