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

package/dist/styles/components/NavigationMenu.css

@@ -0,0 +1,419 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Navigation Menu - Mojave Theme
+ *
+ * The strip is the bar concept, the panel is the popup concept and each link is an item
+ * row with a title and description. Only the panel sizes are its own
+ * (tokens/component/navigation-menu.json). The panel slides between triggers on the
+ * slow duration with the out easing.
+ */
+
+/* ============================================
+   ROOT AND LIST
+   ============================================ */
+
+.NavigationMenuRoot {
+  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-gap);
+  min-width: max-content;
+}
+
+.NavigationMenuList {
+  display: flex;
+  position: relative;
+  align-items: center;
+  gap: var(--sl-bar-gap);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.NavigationMenuList > li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* ============================================
+   TRIGGER: a control-height button on the strip
+   ============================================ */
+
+.NavigationMenuTrigger {
+  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);
+  box-sizing: border-box;
+  display: 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);
+  margin: 0;
+  outline: 0;
+  border: none;
+  border-radius: var(--sl-radius-item);
+  color: var(--sl-text-primary);
+  background: transparent;
+  cursor: pointer;
+  user-select: none;
+  text-decoration: none;
+  transition: var(--sl-transition-button);
+}
+
+@media (hover: hover) {
+  .NavigationMenuTrigger:hover {
+    background: var(--sl-fill-subtle);
+  }
+}
+
+.NavigationMenuTrigger[data-popup-open] {
+  background: var(--sl-item-background-hover);
+  color: var(--sl-item-color-hover);
+}
+
+.NavigationMenuTrigger:focus-visible {
+  position: relative;
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+/* Chevron: the same size and turn as a select's. */
+.NavigationMenuIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  transition: transform var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.NavigationMenuIcon[data-popup-open] {
+  transform: rotate(180deg);
+}
+
+/* ============================================
+   POSITIONER
+   ============================================ */
+
+.NavigationMenuPositioner {
+  --easing: var(--sl-easing-out);
+  --duration: var(--sl-duration-slow);
+
+  box-sizing: border-box;
+  z-index: var(--sl-popup-z-index);
+  transition-property: top, left, right, bottom;
+  transition-duration: var(--duration);
+  transition-timing-function: var(--easing);
+  width: var(--positioner-width);
+  height: var(--positioner-height);
+  max-width: var(--available-width);
+}
+
+/* A safe zone between trigger and panel, so moving the pointer across the gap keeps it open. */
+.NavigationMenuPositioner::before {
+  content: '';
+  position: absolute;
+}
+
+.NavigationMenuPositioner[data-side='top']::before {
+  left: 0;
+  right: 0;
+  bottom: calc(-1 * var(--sl-space-2-5));
+  height: var(--sl-space-2-5);
+}
+
+.NavigationMenuPositioner[data-side='bottom']::before {
+  left: 0;
+  right: 0;
+  top: calc(-1 * var(--sl-space-2-5));
+  height: var(--sl-space-2-5);
+}
+
+.NavigationMenuPositioner[data-side='left']::before {
+  top: 0;
+  bottom: 0;
+  right: calc(-1 * var(--sl-space-2-5));
+  width: var(--sl-space-2-5);
+}
+
+.NavigationMenuPositioner[data-side='right']::before {
+  top: 0;
+  bottom: 0;
+  left: calc(-1 * var(--sl-space-2-5));
+  width: var(--sl-space-2-5);
+}
+
+.NavigationMenuPositioner[data-instant] {
+  transition: none;
+}
+
+/* ============================================
+   POPUP: the popup surface. Its edge is an outline so it doesn't change the size
+   Base UI measures.
+   ============================================ */
+
+.NavigationMenuPopup {
+  position: relative;
+  box-sizing: border-box;
+  background: var(--sl-popup-background);
+  border-radius: var(--sl-popup-radius);
+  outline: var(--sl-popup-border-width) solid var(--sl-popup-border-color);
+  outline-offset: calc(-1 * var(--sl-popup-border-width));
+  box-shadow: var(--sl-popup-shadow);
+  color: var(--sl-text-primary);
+  transform-origin: var(--transform-origin);
+  transition-property: opacity, transform, width, height;
+  transition-duration: var(--duration);
+  transition-timing-function: var(--easing);
+  width: var(--popup-width);
+  height: var(--popup-height);
+}
+
+.NavigationMenuPopup[data-starting-style],
+.NavigationMenuPopup[data-ending-style] {
+  opacity: 0;
+  transform: scale(var(--sl-popup-scale-closed));
+}
+
+.NavigationMenuPopup[data-ending-style] {
+  transition-timing-function: var(--sl-easing-default);
+  transition-duration: var(--sl-duration-fast);
+}
+
+/* ============================================
+   VIEWPORT (content container)
+   ============================================ */
+
+.NavigationMenuViewport {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+/* ============================================
+   CONTENT
+   ============================================ */
+
+.NavigationMenuContent {
+  box-sizing: border-box;
+  transition:
+    opacity calc(var(--duration) * 0.5) ease,
+    transform var(--duration) var(--easing);
+  padding: var(--sl-popup-padding-panel);
+  width: calc(100vw - 2 * var(--sl-space-5));
+  height: 100%;
+}
+
+@media (min-width: 500px) {
+  .NavigationMenuContent {
+    width: max-content;
+    min-width: var(--sl-navigation-menu-popup-min-width);
+  }
+}
+
+.NavigationMenuContent[data-starting-style],
+.NavigationMenuContent[data-ending-style] {
+  opacity: 0;
+}
+
+.NavigationMenuContent[data-starting-style][data-activation-direction='left'] {
+  transform: translateX(-50%);
+}
+
+.NavigationMenuContent[data-starting-style][data-activation-direction='right'] {
+  transform: translateX(50%);
+}
+
+.NavigationMenuContent[data-ending-style][data-activation-direction='left'] {
+  transform: translateX(50%);
+}
+
+.NavigationMenuContent[data-ending-style][data-activation-direction='right'] {
+  transform: translateX(-50%);
+}
+
+/* ============================================
+   LINK LIST
+   ============================================ */
+
+.NavigationMenuLinkList {
+  display: grid;
+  gap: var(--sl-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.NavigationMenuLinkList > li {
+  margin: 0;
+  padding: 0;
+}
+
+.NavigationMenuLinkList[data-columns='1'] {
+  grid-template-columns: 1fr;
+  max-width: var(--sl-navigation-menu-popup-min-width);
+}
+
+.NavigationMenuLinkList[data-columns='2'] {
+  grid-template-columns: repeat(2, var(--sl-navigation-menu-column-width));
+}
+
+@media (max-width: 500px) {
+  .NavigationMenuLinkList[data-columns='2'] {
+    grid-template-columns: 1fr;
+  }
+}
+
+.NavigationMenuLinkList[data-columns='3'] {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* ============================================
+   SECTIONS CONTAINER
+   ============================================ */
+
+.NavigationMenuSections {
+  display: grid;
+  gap: var(--sl-space-2);
+}
+
+.NavigationMenuSections[data-columns='2'] {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.NavigationMenuSections[data-columns='3'] {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* ============================================
+   LINK: an item row with a title over a description
+   ============================================ */
+
+.NavigationMenuLink {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-1);
+  padding: var(--sl-space-2);
+  border-radius: var(--sl-radius-item);
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  text-decoration: none;
+  transition: var(--sl-transition-button);
+  outline: none;
+}
+
+@media (hover: hover) {
+  .NavigationMenuLink:hover {
+    background: var(--sl-fill-subtle);
+  }
+}
+
+.NavigationMenuLink:focus-visible {
+  position: relative;
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+.NavigationMenuLinkTitle {
+  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);
+  margin: 0 0 var(--sl-space-1) 0;
+  color: var(--sl-text-primary);
+}
+
+.NavigationMenuLinkDescription {
+  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);
+}
+
+/* ============================================
+   SECTION
+   ============================================ */
+
+.NavigationMenuSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-2);
+}
+
+.NavigationMenuSectionHeading {
+  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);
+  margin: 0 0 var(--sl-space-2) 0;
+  color: var(--sl-text-secondary);
+}
+
+/* ============================================
+   ARROW: part of the popup, in its fill and edge
+   ============================================ */
+
+.NavigationMenuArrow {
+  display: flex;
+  transition: left var(--duration) var(--easing);
+}
+
+.NavigationMenuArrow[data-side='top'] {
+  bottom: -8px;
+  rotate: 180deg;
+}
+
+.NavigationMenuArrow[data-side='bottom'] {
+  top: -8px;
+  rotate: 0deg;
+}
+
+.NavigationMenuArrow[data-side='left'] {
+  right: -13px;
+  rotate: 90deg;
+}
+
+.NavigationMenuArrow[data-side='right'] {
+  left: -13px;
+  rotate: -90deg;
+}
+
+.NavigationMenuArrowFill {
+  fill: var(--sl-popup-arrow-fill);
+}
+
+.NavigationMenuArrowOuterStroke,
+.NavigationMenuArrowInnerStroke {
+  fill: var(--sl-popup-arrow-stroke);
+}
+
+/* ============================================
+   SEPARATOR
+   ============================================ */
+
+.NavigationMenuSeparator {
+  height: var(--sl-stroke-default);
+  margin-block: var(--sl-popup-separator-spacing);
+  border: none;
+  background: var(--sl-popup-separator-color);
+  width: 100%;
+}

package/dist/styles/components/NumberField.css

@@ -0,0 +1,90 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Number Field - Mojave Theme
+ *
+ * No component tokens. The input is Input (Input.css) and the label, description and
+ * error are Field's parts (Field.css). Only the stepper buttons are drawn here: two
+ * stacked halves of the field's height, as wide as the smallest control.
+ */
+
+.NumberFieldRoot {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--sl-field-gap);
+}
+
+.NumberFieldGroup {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+/* Room for the steppers at the end of the input */
+.NumberFieldInput {
+  padding-inline-end: calc(var(--sl-control-padding-inline) + var(--sl-control-height-xs));
+}
+
+/* ============================================
+   INCREMENT/DECREMENT BUTTONS
+   ============================================ */
+
+.NumberFieldIncrement,
+.NumberFieldDecrement {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 1;
+  position: absolute;
+  right: calc(var(--sl-field-border-width) + var(--sl-space-0-5));
+  width: var(--sl-control-height-xs);
+  height: calc(50% - var(--sl-field-border-width) - var(--sl-space-0-5));
+  padding: 0;
+  border: none;
+  border-radius: var(--sl-radius-item);
+  background: transparent;
+  color: var(--sl-text-secondary);
+  cursor: pointer;
+  outline: none;
+  transition: var(--sl-transition-button);
+}
+
+.NumberFieldIncrement {
+  top: calc(var(--sl-field-border-width) + var(--sl-space-0-5));
+}
+
+.NumberFieldDecrement {
+  bottom: calc(var(--sl-field-border-width) + var(--sl-space-0-5));
+}
+
+.NumberFieldIncrement:hover:not(:disabled),
+.NumberFieldDecrement:hover:not(:disabled) {
+  background: var(--sl-fill-subtle);
+  color: var(--sl-text-primary);
+}
+
+.NumberFieldIncrement:active:not(:disabled),
+.NumberFieldDecrement:active:not(:disabled) {
+  background: var(--sl-fill-default);
+}
+
+.NumberFieldIncrement:focus-visible,
+.NumberFieldDecrement:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+.NumberFieldIncrement:disabled,
+.NumberFieldDecrement:disabled {
+  opacity: var(--sl-field-opacity-disabled);
+  cursor: not-allowed;
+}
+
+/* ============================================
+   SCRUB AREA
+   ============================================ */
+
+.NumberFieldScrubArea,
+.NumberFieldScrubArea[data-scrubbing] {
+  cursor: ns-resize;
+  user-select: none;
+}

package/dist/styles/components/OTPField.css

@@ -0,0 +1,62 @@
+/* @scattered-light/loomiere-base-ui 0.1.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
+ * (Input.css styles .OTPFieldInput with the field pattern, hover, focus, disabled and error), cut
+ * into a square as tall as a control of the same size. data-size on the root picks the control
+ * size and the text tier of the same name, as on Input. No component tokens.
+ */
+
+.OTPFieldRoot {
+  --otp-size: var(--sl-control-height-md);
+  display: flex;
+  align-items: center;
+  gap: var(--sl-space-2);
+}
+
+.OTPFieldInput {
+  width: var(--otp-size);
+  height: var(--otp-size);
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+/* A short dash between groups, in the control border color so it reads at 3:1 */
+.OTPFieldSeparator {
+  flex-shrink: 0;
+  width: var(--sl-space-3);
+  height: var(--sl-stroke-medium);
+  border-radius: var(--sl-radius-pill);
+  background: var(--sl-border-control);
+}
+
+/* ============================================
+   SIZE VARIANTS: control size plus the text tier of the same name
+   ============================================ */
+
+.OTPFieldRoot[data-size='sm'] {
+  --otp-size: var(--sl-control-height-sm);
+  gap: var(--sl-space-1-5);
+}
+
+.OTPFieldRoot[data-size='sm'] .OTPFieldInput {
+  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);
+}
+
+.OTPFieldRoot[data-size='lg'] {
+  --otp-size: var(--sl-control-height-lg);
+  gap: var(--sl-space-3);
+}
+
+.OTPFieldRoot[data-size='lg'] .OTPFieldInput {
+  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);
+}