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

package/dist/styles/components/ContextMenu.css

@@ -0,0 +1,168 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Context Menu - Mojave Theme
+ *
+ * No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the
+ * dense menu height, and group labels, separators and check slots are the shared list
+ * parts, so menus and listboxes read as one family.
+ */
+
+.ContextMenuTrigger {
+  cursor: context-menu;
+  user-select: none;
+}
+
+.ContextMenuPositioner {
+  z-index: var(--sl-popup-z-index);
+}
+
+.ContextMenuPopup {
+  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;
+  min-width: var(--sl-popup-min-width);
+  padding: var(--sl-popup-padding);
+  animation: contextMenuFadeIn var(--sl-popup-animation-duration) var(--sl-popup-animation-easing);
+}
+
+@keyframes contextMenuFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(var(--sl-popup-scale-closed));
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================
+   ITEM (regular, checkbox, radio, submenu trigger)
+   ============================================ */
+
+.ContextMenuItem,
+.ContextMenuCheckboxItem,
+.ContextMenuRadioItem,
+.ContextMenuSubmenuTrigger {
+  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);
+  padding-block: var(--sl-item-padding-block-dense);
+  cursor: pointer;
+  list-style: none;
+}
+
+.ContextMenuItem:hover,
+.ContextMenuCheckboxItem:hover,
+.ContextMenuRadioItem:hover,
+.ContextMenuSubmenuTrigger:hover,
+.ContextMenuItem[data-highlighted],
+.ContextMenuCheckboxItem[data-highlighted],
+.ContextMenuRadioItem[data-highlighted],
+.ContextMenuSubmenuTrigger[data-highlighted] {
+  background: var(--sl-item-background-hover);
+  color: var(--sl-item-color-hover);
+}
+
+.ContextMenuItem[data-disabled],
+.ContextMenuCheckboxItem[data-disabled],
+.ContextMenuRadioItem[data-disabled],
+.ContextMenuSubmenuTrigger[data-disabled] {
+  color: var(--sl-item-color-disabled);
+  cursor: not-allowed;
+  opacity: var(--sl-item-opacity-disabled);
+}
+
+/* ============================================
+   CHECKBOX & RADIO ITEM INDICATORS
+   ============================================ */
+
+.ContextMenuCheckboxItemIndicator,
+.ContextMenuRadioItemIndicator {
+  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;
+}
+
+.ContextMenuCheckboxItemIndicatorIcon,
+.ContextMenuRadioItemIndicatorIcon {
+  font-size: var(--sl-item-indicator-size);
+  line-height: 1;
+}
+
+/* Unchecked radios show an empty circle; it hides once the item's checked indicator appears */
+.ContextMenuRadioItem:has(.ContextMenuRadioItemIndicator:not([data-unchecked])) [data-unchecked] {
+  display: none;
+}
+
+/* ============================================
+   GROUP, GROUP LABEL, SEPARATOR
+   ============================================ */
+
+.ContextMenuGroup {
+  padding: 0;
+}
+
+.ContextMenuGroupLabel {
+  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);
+}
+
+.ContextMenuSeparator {
+  height: var(--sl-stroke-default);
+  margin-block: var(--sl-popup-separator-spacing);
+  border: none;
+  background: var(--sl-popup-separator-color);
+}
+
+/* ============================================
+   SUBMENU TRIGGER ARROW
+   ============================================ */
+
+.ContextMenuSubmenuTrigger::after {
+  content: '→';
+  margin-left: auto;
+  color: var(--sl-text-tertiary);
+}
+
+/* ============================================
+   ARROW
+   ============================================ */
+
+.ContextMenuArrow {
+  width: var(--sl-space-2-5);
+  height: var(--sl-space-2-5);
+}
+
+.ContextMenuArrow > svg {
+  fill: var(--sl-popup-arrow-fill);
+  stroke: var(--sl-popup-arrow-stroke);
+  stroke-width: var(--sl-stroke-default);
+}

package/dist/styles/components/Dialog.css

@@ -0,0 +1,145 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Dialog and Alert dialog - Mojave Theme
+ *
+ * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
+ * the modal-surface and modal-backdrop patterns, the maximize-xl heading and base
+ * description. Alert dialog shares every rule here; AlertDialog.css adds nothing of
+ * its own. Action buttons are plain .Button elements, so they follow the emphasis levels.
+ */
+
+/* Backdrop */
+.DialogBackdrop,
+.AlertDialogBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--sl-modal-backdrop-z-index);
+  background: var(--sl-modal-backdrop);
+  transition: opacity var(--sl-modal-animation-duration) var(--sl-modal-animation-easing);
+}
+
+.DialogBackdrop[data-starting-style],
+.DialogBackdrop[data-ending-style],
+.AlertDialogBackdrop[data-starting-style],
+.AlertDialogBackdrop[data-ending-style] {
+  opacity: 0;
+}
+
+/* Popup: centered, growing from just under full size as it opens. */
+.DialogPopup,
+.AlertDialogPopup {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-modal-gap);
+  padding: var(--sl-modal-padding);
+  background: var(--sl-modal-background);
+  border: var(--sl-modal-border-width) solid var(--sl-modal-border-color);
+  border-radius: var(--sl-modal-radius);
+  box-shadow: var(--sl-modal-shadow);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: var(--sl-modal-z-index);
+  width: var(--sl-modal-width);
+  max-width: var(--sl-modal-max-width);
+  max-height: var(--sl-modal-max-height);
+  transform: translate(-50%, -50%);
+  outline: none;
+  transition:
+    opacity var(--sl-modal-animation-duration) var(--sl-modal-animation-easing),
+    transform var(--sl-modal-animation-duration) var(--sl-modal-animation-easing);
+}
+
+.DialogPopup[data-starting-style],
+.DialogPopup[data-ending-style],
+.AlertDialogPopup[data-starting-style],
+.AlertDialogPopup[data-ending-style] {
+  opacity: 0;
+  transform: translate(-50%, -48%) scale(var(--sl-modal-scale-closed));
+}
+
+/* Close button: the X in the corner. */
+.DialogClose {
+  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);
+}
+
+.DialogClose:hover {
+  background: var(--sl-icon-button-background-hover);
+  color: var(--sl-icon-button-color-hover);
+}
+
+.DialogClose:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+/* Title */
+.DialogTitle,
+.AlertDialogTitle {
+  font-family: var(--sl-font-maximize-xl-font-family);
+  font-size: var(--sl-font-maximize-xl-font-size);
+  font-weight: var(--sl-font-maximize-xl-font-weight);
+  line-height: var(--sl-font-maximize-xl-line-height);
+  letter-spacing: var(--sl-font-maximize-xl-letter-spacing);
+  color: var(--sl-modal-title-color);
+  margin: 0;
+}
+
+/* Description */
+.DialogDescription,
+.AlertDialogDescription {
+  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(--sl-modal-description-color);
+  margin: 0;
+}
+
+/* Content: scrolls when it is taller than the dialog, with room for the scrollbar. */
+.DialogContent {
+  flex: 1;
+  overflow-y: auto;
+  margin-block: var(--sl-modal-gap);
+  padding-right: var(--sl-space-2);
+}
+
+.DialogContent p {
+  margin: 0 0 var(--sl-modal-gap) 0;
+}
+
+.DialogContent p:last-child {
+  margin-bottom: 0;
+}
+
+/* A form inside a dialog keeps the dialog's rhythm. */
+.DialogPopup .Form {
+  gap: var(--sl-modal-gap);
+  margin-block: var(--sl-modal-gap);
+}
+
+/* Actions */
+.DialogActions,
+.AlertDialogActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--sl-modal-actions-gap);
+  margin-top: var(--sl-modal-actions-spacing);
+}

package/dist/styles/components/Drawer.css

@@ -0,0 +1,126 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Drawer - a panel that slides in from an edge and can be swiped away.
+   The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
+   drawer reads as a dialog's sibling; only its size and grab bar are its own
+   (--sl-drawer-*). Base UI supplies the swipe through
+   --drawer-swipe-movement-x/y and data-swipe-direction on the popup. */
+
+.DrawerBackdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--sl-modal-backdrop-z-index);
+  background: var(--sl-modal-backdrop);
+  transition: opacity var(--sl-modal-animation-duration) var(--sl-modal-animation-easing);
+}
+
+.DrawerBackdrop[data-starting-style],
+.DrawerBackdrop[data-ending-style] {
+  opacity: 0;
+}
+
+.DrawerViewport {
+  position: fixed;
+  inset: 0;
+  z-index: var(--sl-modal-z-index);
+  pointer-events: none;
+}
+
+.DrawerPopup {
+  --drawer-slide: translateY(100%);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-modal-gap);
+  padding: var(--sl-modal-padding);
+  background: var(--sl-modal-background);
+  border: var(--sl-modal-border-width) solid var(--sl-modal-border-color);
+  border-radius: var(--sl-modal-radius);
+  box-shadow: var(--sl-modal-shadow);
+  position: fixed;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  pointer-events: auto;
+  transform: translate(var(--drawer-swipe-movement-x, 0px), var(--drawer-swipe-movement-y, 0px));
+  transition: transform calc(var(--sl-modal-animation-duration) * var(--drawer-swipe-strength, 1)) var(--sl-modal-animation-easing);
+}
+
+/* Bottom (the default): full width, rounded on top, with a grab bar. */
+.DrawerPopup,
+.DrawerPopup[data-swipe-direction='down'] {
+  inset: auto 0 0 0;
+  max-height: var(--sl-drawer-popup-max-size);
+  border-bottom: 0;
+  border-radius: var(--sl-modal-radius) var(--sl-modal-radius) 0 0;
+}
+
+.DrawerPopup[data-swipe-direction='down']::before,
+.DrawerPopup:not([data-swipe-direction])::before {
+  content: '';
+  align-self: center;
+  flex: none;
+  width: var(--sl-drawer-handle-width);
+  height: var(--sl-drawer-handle-height);
+  border-radius: var(--sl-radius-pill);
+  background: var(--sl-drawer-handle-color);
+}
+
+.DrawerPopup[data-swipe-direction='up'] {
+  --drawer-slide: translateY(-100%);
+  inset: 0 0 auto 0;
+  max-height: var(--sl-drawer-popup-max-size);
+  border-top: 0;
+  border-radius: 0 0 var(--sl-modal-radius) var(--sl-modal-radius);
+}
+
+.DrawerPopup[data-swipe-direction='right'] {
+  --drawer-slide: translateX(100%);
+  inset: 0 0 0 auto;
+  width: var(--sl-drawer-popup-size);
+  max-height: none;
+  border-right: 0;
+  border-radius: var(--sl-modal-radius) 0 0 var(--sl-modal-radius);
+}
+
+.DrawerPopup[data-swipe-direction='left'] {
+  --drawer-slide: translateX(-100%);
+  inset: 0 auto 0 0;
+  width: var(--sl-drawer-popup-size);
+  max-height: none;
+  border-left: 0;
+  border-radius: 0 var(--sl-modal-radius) var(--sl-modal-radius) 0;
+}
+
+.DrawerPopup[data-starting-style],
+.DrawerPopup[data-ending-style] {
+  transform: var(--drawer-slide);
+}
+
+/* Follow the finger while swiping. */
+.DrawerPopup[data-swiping] {
+  transition: none;
+}
+
+.DrawerContent {
+  flex: 1;
+  min-height: 0;
+}
+
+.DrawerTitle {
+  font-family: var(--sl-font-maximize-xl-font-family);
+  font-size: var(--sl-font-maximize-xl-font-size);
+  font-weight: var(--sl-font-maximize-xl-font-weight);
+  line-height: var(--sl-font-maximize-xl-line-height);
+  letter-spacing: var(--sl-font-maximize-xl-letter-spacing);
+  margin: 0;
+  color: var(--sl-modal-title-color);
+}
+
+.DrawerDescription {
+  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);
+  margin: 0;
+  color: var(--sl-modal-description-color);
+}

package/dist/styles/components/Field.css

@@ -0,0 +1,60 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Field - Mojave Theme
+ *
+ * Label, control, description and error. No component tokens: spacing is the field
+ * concept (tokens/semantic/field.json) and text is whole text styles.
+ * Field.Control is styled with Input (Input.css). Number field's label, description and
+ * error are the same parts, so they share these rules.
+ */
+
+.FieldRoot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-field-gap);
+}
+
+.FieldRoot[data-disabled] {
+  opacity: var(--sl-field-opacity-disabled);
+  pointer-events: none;
+}
+
+.FieldLabel,
+.NumberFieldLabel {
+  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: block;
+  margin-bottom: var(--sl-field-label-spacing);
+  color: var(--sl-text-primary);
+}
+
+.FieldDescription,
+.NumberFieldDescription {
+  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: var(--sl-field-message-spacing) 0 0;
+  color: var(--sl-text-secondary);
+}
+
+.FieldError,
+.NumberFieldError {
+  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);
+  margin: var(--sl-field-message-spacing) 0 0;
+  color: var(--sl-status-error);
+}
+
+/* Multi-line Field.Control */
+textarea.FieldControl {
+  resize: vertical;
+  min-height: 80px;
+  height: auto;
+}

package/dist/styles/components/Fieldset.css

@@ -0,0 +1,41 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Fieldset - Mojave Theme
+ *
+ * No component tokens: a titled group of fields, spaced by the stack gaps, with
+ * whole text styles.
+ */
+
+.Fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-gap-stack-lg);
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+.Fieldset[disabled] {
+  opacity: var(--sl-field-opacity-disabled);
+  pointer-events: none;
+}
+
+.FieldsetLegend {
+  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);
+  margin-bottom: var(--sl-space-block-sm);
+  padding: 0;
+  color: var(--sl-text-primary);
+}
+
+.FieldsetDescription {
+  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-bottom: var(--sl-space-block-sm);
+  color: var(--sl-text-secondary);
+}

package/dist/styles/components/Form.css

@@ -0,0 +1,19 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Form - Mojave Theme
+ *
+ * No component tokens: fields stack with the large block space, and the action
+ * buttons sit in a row after them.
+ */
+
+.Form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-block-lg);
+}
+
+.FormActions {
+  display: flex;
+  justify-content: flex-start;
+  gap: var(--sl-space-3);
+  margin-top: var(--sl-space-block-md);
+}

package/dist/styles/components/Input.css

@@ -0,0 +1,136 @@
+/* @scattered-light/loomiere-base-ui 0.1.0 · styles for @base-ui/react 1.9.0 */
+/* Input - Mojave Theme
+ *
+ * No component tokens: the look is the field concept (tokens/semantic/field.json),
+ * sizes are control.*, and text is a whole text style. Field.Control is the same
+ * control inside a Field, and Number field's, Autocomplete's and Combobox's inputs are the same
+ * control with buttons at the end, and an OTP field's slots are the same control cut into
+ * squares (OTPField.css sizes them), so they share these rules.
+ */
+
+/* ============================================
+   BASE INPUT
+   ============================================ */
+
+.Input,
+.FieldControl,
+.NumberFieldInput,
+.AutocompleteInput,
+.ComboboxInput,
+.OTPFieldInput {
+  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);
+  width: 100%;
+  height: var(--sl-control-height-md);
+  padding-block: var(--sl-control-padding-block);
+  padding-inline: var(--sl-control-padding-inline);
+}
+
+.Input::placeholder,
+.FieldControl::placeholder,
+.NumberFieldInput::placeholder,
+.AutocompleteInput::placeholder,
+.ComboboxInput::placeholder,
+.OTPFieldInput::placeholder {
+  color: var(--sl-field-placeholder-color);
+}
+
+.Input:hover:not(:disabled):not(:focus),
+.FieldControl:hover:not(:disabled):not(:focus),
+.NumberFieldInput:hover:not(:disabled):not(:focus),
+.AutocompleteInput:hover:not(:disabled):not(:focus),
+.ComboboxInput:hover:not(:disabled):not(:focus),
+.OTPFieldInput:hover:not(:disabled):not(:focus) {
+  border-color: var(--sl-field-border-color-hover);
+}
+
+.Input:focus,
+.FieldControl:focus,
+.NumberFieldInput:focus,
+.AutocompleteInput:focus,
+.ComboboxInput:focus,
+.OTPFieldInput:focus {
+  border-color: var(--sl-field-border-color-focus);
+  box-shadow: var(--sl-field-shadow-focus);
+}
+
+.Input:disabled,
+.FieldControl:disabled,
+.NumberFieldInput:disabled,
+.AutocompleteInput:disabled,
+.ComboboxInput:disabled,
+.OTPFieldInput:disabled {
+  background: var(--sl-field-background-disabled);
+  color: var(--sl-field-color-disabled);
+  cursor: not-allowed;
+}
+
+/* ============================================
+   ERROR STATE
+   ============================================ */
+
+.Input[data-error],
+.Input[aria-invalid='true'],
+.FieldRoot[data-invalid] .FieldControl,
+.FieldControl[aria-invalid='true'],
+.NumberFieldRoot[data-invalid] .NumberFieldInput,
+.OTPFieldInput[data-invalid] {
+  border-color: var(--sl-field-border-color-error);
+}
+
+.Input[data-error]:focus,
+.Input[aria-invalid='true']:focus,
+.FieldRoot[data-invalid] .FieldControl:focus,
+.FieldControl[aria-invalid='true']:focus,
+.NumberFieldRoot[data-invalid] .NumberFieldInput:focus,
+.OTPFieldInput[data-invalid]:focus {
+  border-color: var(--sl-field-border-color-error);
+  box-shadow: var(--sl-field-shadow-focus-error);
+}
+
+/* ============================================
+   SIZE VARIANTS: control size plus the text tier of the same name
+   ============================================ */
+
+.Input[data-size='xs'] {
+  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);
+  height: var(--sl-control-height-xs);
+  padding-block: var(--sl-control-padding-block-xs);
+  padding-inline: var(--sl-control-padding-inline-xs);
+}
+
+.Input[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);
+  height: var(--sl-control-height-sm);
+  padding-block: var(--sl-control-padding-block-sm);
+  padding-inline: var(--sl-control-padding-inline-sm);
+}
+
+.Input[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);
+  height: var(--sl-control-height-lg);
+  padding-block: var(--sl-control-padding-block-lg);
+  padding-inline: var(--sl-control-padding-inline-lg);
+}