@scattered-light/loomiere-base-ui 0.1.1 → 0.3.0

package/dist/styles/components/OTPField.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
 /* OTP Field - Mojave Theme
  *
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input

package/dist/styles/components/Popover.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -48,7 +48,8 @@
   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);
+  /* No fixed cap: wide content (a calendar, a form) fits; Base UI reports the room beside the trigger. */
+  max-width: var(--available-width, 100vw);
   padding: var(--sl-popup-padding-panel);
 }
 
@@ -70,6 +71,7 @@
   letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
   color: var(--sl-text-primary);
   margin: 0 0 var(--sl-space-block-xs) 0;
+  max-width: var(--sl-popover-text-max-width);
 }
 
 /* ============================================
@@ -84,6 +86,7 @@
   letter-spacing: var(--sl-font-base-letter-spacing);
   color: var(--sl-text-secondary);
   margin: 0;
+  max-width: var(--sl-popover-text-max-width);
 }
 
 /* ============================================

package/dist/styles/components/PreviewCard.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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

package/dist/styles/components/Progress.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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

package/dist/styles/components/Radio.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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).

package/dist/styles/components/ScrollArea.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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

package/dist/styles/components/Select.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · 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

package/dist/styles/components/Separator.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · 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

package/dist/styles/components/Slider.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · 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

package/dist/styles/components/Switch.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · 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,

package/dist/styles/components/Tabs.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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

package/dist/styles/components/Toast.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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

package/dist/styles/components/Toggle.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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.

package/dist/styles/components/ToggleGroup.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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

package/dist/styles/components/Toolbar.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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

package/dist/styles/components/Tooltip.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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

package/dist/styles/index.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.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';
@@ -26,6 +26,7 @@
 @import './components/Dialog.css';
 @import './components/Drawer.css';
 @import './components/Field.css';
+@import './components/IconButton.css';
 @import './components/Fieldset.css';
 @import './components/Form.css';
 @import './components/Input.css';

package/dist/styles/reset/accessibility.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {

package/dist/styles/reset/reset-accessibility.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
 /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
 
 /* Remove default focus; keyboard focus styled in accessibility-theme.css */

package/dist/styles/reset/reset-tailwind.css

@@ -0,0 +1,441 @@
+/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* CSS Reset - Mojave Theme */
+
+/* ============================================
+    FONTS
+    ============================================ */
+
+
+/* ============================================
+    COLOR SCHEME HELPER
+    ============================================ */
+:root {
+  /* Follows the theme in effect (data-theme or the system), so native scrollbars and pickers match. */
+  color-scheme: var(--sl-color-scheme);
+}
+
+/* ============================================
+    BOX SIZING
+    ============================================ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* ============================================
+    OVERRIDES FOR ALL
+    ============================================ */
+* {
+  margin: 0;
+  padding: 0;
+}
+
+/* Respect user's motion preferences */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth; /* Smooth scrolling */
+  }
+
+  a {
+    transition: all 0.2s ease; /* Responsive typography adjustments */
+
+  }
+}
+
+/* ============================================
+    SCROLLBARS
+    ============================================ */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--sl-content-scrollbar-thumb) var(--sl-content-scrollbar-track);
+}
+
+*::-webkit-scrollbar {
+  width: var(--sl-space-2);
+  height: var(--sl-space-2);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--sl-content-scrollbar-track);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--sl-content-scrollbar-thumb);
+  border-radius: 0.25rem;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--sl-content-scrollbar-thumb-hover);
+}
+
+/* ============================================
+    HTML
+    ============================================ */
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-size: 100%; /* Don't override user's browser font size */
+  -webkit-text-size-adjust: 100%; /* Prevent text size adjustment on orientation change */
+}
+
+/* ============================================
+    BODY
+    ============================================ */
+
+body {
+  /* Layout */
+  min-height: 100vh;
+  background: var(--sl-content-page-background);
+  /*Basic text styling*/
+  font-family: var(--sl-font-family-body);
+  font-size: var(--sl-font-size-md);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: var(--sl-line-height-md);
+  letter-spacing: var(--sl-letter-spacing-normal);
+  color: var(--sl-content-prose-color);
+  /* Improve text rendering for better readability */
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'kern' 1; /* Enable kerning */
+}
+
+/* ============================================
+    TYPOGRAPHY
+    ============================================ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--sl-font-family-display);
+  font-weight: var(--sl-font-weight-semibold);
+  font-size: var(--sl-font-size-md);
+  line-height: var(--sl-line-height-md);
+  letter-spacing: var(--sl-letter-spacing-normal);
+  overflow-wrap: break-word;
+}
+
+/* Paragraphs */
+p {
+  overflow-wrap: break-word;
+  max-inline-size: var(--sl-measure-base);
+  text-wrap: pretty;
+  margin-block-end: var(--sl-space-4);
+}
+
+/* Links */
+a {
+  color: var(--sl-content-link-color);
+  text-decoration: underline;
+  text-decoration-color: var(--sl-content-link-underline-color);
+  text-decoration-thickness: 0.125em;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: var(--sl-content-link-hover-color);
+    text-decoration-color: var(--sl-content-link-underline-hover-color);
+
+  }
+}
+
+/* Small text */
+small {
+  font-size: var(--sl-font-size-sm);
+  line-height: var(--sl-line-height-sm);
+}
+
+/* Emphasis */
+strong,
+b {
+  font-weight: var(--sl-font-weight-bold);
+}
+
+em,
+i {
+  font-style: italic;
+}
+
+/* Mark/Highlight */
+mark {
+  background: var(--sl-content-mark-background);
+  color: inherit;
+  padding: var(--sl-space-0-5) var(--sl-space-1-5);
+  border-radius: var(--sl-radius-sm);
+}
+
+/* Abbreviations */
+abbr[title] {
+  text-decoration: underline dotted;
+  text-decoration-color: var(--sl-color-neutral-500);
+  cursor: help;
+}
+
+/* Subscript and Superscript */
+sub,
+sup {
+  font-size: var(--sl-font-size-xs);
+  line-height: var(--sl-line-height-md);
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  inset-block-start: -var(--sl-space-2);
+}
+
+sub {
+  inset-block-end: -var(--sl-space-1);
+}
+
+/* Lists */
+ul,
+ol {
+  list-style: none;
+  max-inline-size: var(--sl-measure-base);
+  padding-inline-start: var(--sl-space-6);
+  margin-block-end: var(--sl-space-4);
+}
+
+/* Better list semantics */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+li {
+  margin-block-end: var(--sl-space-2);
+}
+
+li::marker {
+  color: var(--sl-content-list-marker-color);
+}
+
+/* Nested lists */
+li > ul,
+li > ol {
+  margin-block-start: var(--sl-space-2);
+  margin-block-end: 0;
+}
+
+/* Blockquotes */
+blockquote {
+  max-inline-size: var(--sl-measure-base);
+  margin-block: var(--sl-space-6);
+  margin-inline-start: 0;
+  padding-inline-start: var(--sl-space-6);
+  border-inline-start: var(--sl-space-1) solid var(--sl-content-blockquote-border);
+  font-size: var(--sl-font-size-xl);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: var(--sl-line-height-md);
+  letter-spacing: var(--sl-letter-spacing-normal);
+  font-style: italic;
+  color: inherit;
+}
+
+blockquote cite {
+  display: block;
+  margin-block-start: var(--sl-space-3);
+  font-size: var(--sl-font-size-sm);
+  font-style: normal;
+  color: var(--sl-content-blockquote-cite);
+}
+
+blockquote cite::before {
+  content: '— ';
+}
+
+/* Code */
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--sl-font-family-mono);
+  font-size: var(--sl-font-size-sm);
+}
+
+code {
+  padding: 0.125em 0.375em;
+  background: var(--sl-content-code-background);
+  border: var(--sl-stroke-thin) solid var(--sl-content-code-border);
+  border-radius: var(--sl-radius-sm);
+  color: var(--sl-content-code-text);
+}
+
+pre {
+  max-inline-size: 100%;
+  padding: var(--sl-space-4);
+  background: var(--sl-content-pre-background);
+  border: var(--sl-stroke-thin) solid var(--sl-content-pre-border);
+  color: var(--sl-content-pre-text);
+  border-radius: var(--sl-space-2);
+  overflow-x: auto;
+  margin-block: var(--sl-space-6);
+}
+
+pre code {
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: inherit;
+}
+
+/* ============================================
+    IMAGES AND MEDIA
+    ============================================ */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* ============================================
+    FORM ELEMENTS
+    ============================================ */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  background: transparent;
+  border: var(--sl-stroke-thin) solid transparent;
+  cursor: pointer;
+
+  /* Improve button accessibility */
+  &:disabled { 
+    cursor: not-allowed;
+  opacity: 0.6;
+  }
+}
+
+/* Remove default appearance for form controls */
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+/* Remove spinner from number inputs */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+/* Remove default fieldset styles */
+fieldset {
+  border: var(--sl-stroke-thin) solid var(--sl-content-field-border);
+  border-radius: var(--sl-radius-sm);
+}
+
+/* ============================================
+   TABLES
+   ============================================ */
+/* Improve table accessibility */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}
+
+th {
+  text-align: left;
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+/* ============================================
+    OTHER ELEMENTS
+    ============================================ */
+
+/* Remove default legend styles */
+legend {
+  padding: 0;
+}
+
+/* Keyboard input */
+kbd {
+  padding: var(--sl-space-0-5) var(--sl-space-2-5);
+  background: var(--sl-content-kbd-background);
+  color: var(--sl-content-kbd-text);
+  border-radius: var(--sl-radius-sm);
+  font-size: var(--sl-font-size-sm);
+  box-shadow: var(--sl-elevation-xs);
+}
+
+/* Horizontal rule */
+hr {
+  border: none;
+  border-block-start: var(--sl-stroke-thin) solid var(--sl-content-hr-border);
+  margin-block: var(--sl-space-8);
+}
+
+/* Hidden attribute */
+[hidden] {
+  display: none !important;
+}
+
+/* Disabled state */
+[disabled] {
+  cursor: not-allowed;
+}
+
+/* Color When User Selects Text */
+::selection {
+  background: var(--sl-content-selection-background);
+  color: var(--sl-content-selection-text);
+}
+
+::-moz-selection {
+  background: var(--sl-content-selection-background);
+  color: var(--sl-content-selection-text);
+}
+
+/* ============================================
+   PRINT STYLES
+   ============================================ */
+
+@media print {
+  body {
+    font-size: 12pt;
+    line-height: 1.5;
+    color: #000;
+  }
+
+  h1 {
+    font-size: 24pt;
+  }
+
+  h2 {
+    font-size: 20pt;
+  }
+
+  h3 {
+    font-size: 16pt;
+  }
+
+  a {
+    color: #000;
+    text-decoration: underline;
+  }
+
+  a[href^='http']::after {
+    content: ' (' attr(href) ')';
+    font-size: 0.8em;
+  }
+}

package/dist/styles/reset/reset.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.1.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================

package/dist/styles/tailwind.css

@@ -0,0 +1,56 @@
+/* @scattered-light/loomiere-base-ui 0.3.0 · styles for @base-ui/react 1.9.0 */
+/* Loomiere for Base UI: component styles for Tailwind CSS v4. Load Tailwind and the theme first:
+     @import 'tailwindcss';
+     @import '<your theme>/tokens.css';
+     @import '<your theme>/exports/tailwind.css';
+     @import '@scattered-light/loomiere-base-ui/tailwind.css';
+   The reset sits in Tailwind's base layer and the components in its components layer, so a
+   utility class on a component (class="Button px-6") wins.
+   Load the fonts before tailwindcss (an @import url() after it is dropped), or with a <link>:
+     @import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@300;400;500;600;700&family=Funnel+Display:wght@300;400;500;600;700&family=Roboto+Mono:wght@300;400;500;600;700&display=swap'); */
+@import '@material-symbols/font-400/outlined.css';
+
+/* Document defaults, in Tailwind's base layer after its preflight. */
+@import './reset/reset-tailwind.css' layer(base);
+@import './reset/reset-accessibility.css' layer(base);
+@import './reset/accessibility.css' layer(base);
+
+/* Component styles */
+@import './components/Accordion.css' layer(components);
+@import './components/AlertDialog.css' layer(components);
+@import './components/Autocomplete.css' layer(components);
+@import './components/Avatar.css' layer(components);
+@import './components/Button.css' layer(components);
+@import './components/Checkbox.css' layer(components);
+@import './components/CheckboxGroup.css' layer(components);
+@import './components/Collapsible.css' layer(components);
+@import './components/Combobox.css' layer(components);
+@import './components/ContextMenu.css' layer(components);
+@import './components/Dialog.css' layer(components);
+@import './components/Drawer.css' layer(components);
+@import './components/Field.css' layer(components);
+@import './components/IconButton.css' layer(components);
+@import './components/Fieldset.css' layer(components);
+@import './components/Form.css' layer(components);
+@import './components/Input.css' layer(components);
+@import './components/Menu.css' layer(components);
+@import './components/Menubar.css' layer(components);
+@import './components/Meter.css' layer(components);
+@import './components/NavigationMenu.css' layer(components);
+@import './components/NumberField.css' layer(components);
+@import './components/OTPField.css' layer(components);
+@import './components/Popover.css' layer(components);
+@import './components/PreviewCard.css' layer(components);
+@import './components/Progress.css' layer(components);
+@import './components/Radio.css' layer(components);
+@import './components/ScrollArea.css' layer(components);
+@import './components/Select.css' layer(components);
+@import './components/Separator.css' layer(components);
+@import './components/Slider.css' layer(components);
+@import './components/Switch.css' layer(components);
+@import './components/Tabs.css' layer(components);
+@import './components/Toast.css' layer(components);
+@import './components/Toggle.css' layer(components);
+@import './components/ToggleGroup.css' layer(components);
+@import './components/Toolbar.css' layer(components);
+@import './components/Tooltip.css' layer(components);