@soroush.tech/design-system 1.3.2 → 2.0.0-alpha.0

package/dist/Popover.d.cts

@@ -1,7 +1,7 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { n as PaperElevation, r as PaperProps } from "./index-BW-9sqFG.cjs";
-import { l as ModalCloseReason } from "./index-BBWtMvkm.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as PaperElevation, r as PaperProps } from "./index-BGD4OzzG.cjs";
+import { l as ModalCloseReason } from "./index-B8KscJic.cjs";
 import { ReactNode, Ref } from "react";
 //#region src/Popover/utils/resolveAnchorEl.d.ts
 type PopoverAnchorEl = HTMLElement | (() => HTMLElement | null) | null;
@@ -49,7 +49,7 @@ interface PopoverProps {
   marginThreshold?: Exclude<keyof Theme['space'], 'auto'> | null;
   /** Portal target passed to the underlying Modal. */
   container?: HTMLElement | (() => HTMLElement | null) | null;
-  /** Ref for imperative actions — currently `updatePosition()`. */
+  /** Ref for imperative actions - currently `updatePosition()`. */
   action?: Ref<PopoverActions>;
   /** Props for the paper slot (the surface). */
   slotProps?: {
@@ -59,7 +59,7 @@ interface PopoverProps {
   hasBackdrop?: boolean;
   /** Disable body scroll-lock. When true, the popover re-positions on scroll. Default: false. */
   disableScrollLock?: boolean;
-  /** Skip `aria-hidden` on background content — for non-modal popovers whose trigger stays focused. Default: false. */
+  /** Skip `aria-hidden` on background content - for non-modal popovers whose trigger stays focused. Default: false. */
   disableAriaHidden?: boolean;
   /** Move focus into the popover on open. Default: true. */
   shouldAutoFocus?: boolean;
@@ -77,7 +77,7 @@ interface PopoverProps {
 /**
  * @description Positions its content next to an anchor, portaled above the page.
  * Built on `Modal`, so it inherits the portal, optional backdrop, focus management,
- * scroll lock, and Escape/click-away close — then adds anchor positioning
+ * scroll lock, and Escape/click-away close - then adds anchor positioning
  * (`anchorOrigin`/`transformOrigin`/`marginThreshold`).
  */
 declare function Popover({ open, children, anchorEl, anchorReference, anchorPosition, anchorOrigin, transformOrigin, onClose, elevation, marginThreshold, container, action, slotProps, hasBackdrop, disableScrollLock, disableAriaHidden, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus, shouldKeepMounted, layer }: Readonly<PopoverProps>): import("react").JSX.Element;

package/dist/Popover.d.mts

@@ -1,7 +1,7 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
-import { n as PaperElevation, r as PaperProps } from "./index-CKz1lEdR.mjs";
-import { l as ModalCloseReason } from "./index-CTYZyQ2g.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { n as PaperElevation, r as PaperProps } from "./index-BSR9zrAA.mjs";
+import { l as ModalCloseReason } from "./index-qtKJ56yu.mjs";
 import { ReactNode, Ref } from "react";
 //#region src/Popover/utils/resolveAnchorEl.d.ts
 type PopoverAnchorEl = HTMLElement | (() => HTMLElement | null) | null;
@@ -49,7 +49,7 @@ interface PopoverProps {
   marginThreshold?: Exclude<keyof Theme['space'], 'auto'> | null;
   /** Portal target passed to the underlying Modal. */
   container?: HTMLElement | (() => HTMLElement | null) | null;
-  /** Ref for imperative actions — currently `updatePosition()`. */
+  /** Ref for imperative actions - currently `updatePosition()`. */
   action?: Ref<PopoverActions>;
   /** Props for the paper slot (the surface). */
   slotProps?: {
@@ -59,7 +59,7 @@ interface PopoverProps {
   hasBackdrop?: boolean;
   /** Disable body scroll-lock. When true, the popover re-positions on scroll. Default: false. */
   disableScrollLock?: boolean;
-  /** Skip `aria-hidden` on background content — for non-modal popovers whose trigger stays focused. Default: false. */
+  /** Skip `aria-hidden` on background content - for non-modal popovers whose trigger stays focused. Default: false. */
   disableAriaHidden?: boolean;
   /** Move focus into the popover on open. Default: true. */
   shouldAutoFocus?: boolean;
@@ -77,7 +77,7 @@ interface PopoverProps {
 /**
  * @description Positions its content next to an anchor, portaled above the page.
  * Built on `Modal`, so it inherits the portal, optional backdrop, focus management,
- * scroll lock, and Escape/click-away close — then adds anchor positioning
+ * scroll lock, and Escape/click-away close - then adds anchor positioning
  * (`anchorOrigin`/`transformOrigin`/`marginThreshold`).
  */
 declare function Popover({ open, children, anchorEl, anchorReference, anchorPosition, anchorOrigin, transformOrigin, onClose, elevation, marginThreshold, container, action, slotProps, hasBackdrop, disableScrollLock, disableAriaHidden, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus, shouldKeepMounted, layer }: Readonly<PopoverProps>): import("react").JSX.Element;

package/dist/Popover.mjs

@@ -1,2 +1,2 @@
-import { t as Popover } from "./Popover-CH3yI-j-.mjs";
+import { t as Popover } from "./Popover-DWOrf7sy.mjs";
 export { Popover };

package/dist/Portal.cjs

@@ -8,7 +8,7 @@ function resolveContainer(container) {
 /**
 * Renders its children into a DOM node outside the parent hierarchy (the document
 * body by default). Resolves the container synchronously during render, so the
-* portaled content mounts in the same commit — consumers like Modal can rely on
+* portaled content mounts in the same commit - consumers like Modal can rely on
 * their root ref being attached before their effects run. Renders nothing during
 * server rendering.
 */

package/dist/Portal.d.cts

@@ -9,7 +9,7 @@ interface PortalProps {
 /**
  * Renders its children into a DOM node outside the parent hierarchy (the document
  * body by default). Resolves the container synchronously during render, so the
- * portaled content mounts in the same commit — consumers like Modal can rely on
+ * portaled content mounts in the same commit - consumers like Modal can rely on
  * their root ref being attached before their effects run. Renders nothing during
  * server rendering.
  */

package/dist/Portal.d.mts

@@ -9,7 +9,7 @@ interface PortalProps {
 /**
  * Renders its children into a DOM node outside the parent hierarchy (the document
  * body by default). Resolves the container synchronously during render, so the
- * portaled content mounts in the same commit — consumers like Modal can rely on
+ * portaled content mounts in the same commit - consumers like Modal can rely on
  * their root ref being attached before their effects run. Renders nothing during
  * server rendering.
  */

package/dist/Portal.mjs

@@ -7,7 +7,7 @@ function resolveContainer(container) {
 /**
 * Renders its children into a DOM node outside the parent hierarchy (the document
 * body by default). Resolves the container synchronously during render, so the
-* portaled content mounts in the same commit — consumers like Modal can rely on
+* portaled content mounts in the same commit - consumers like Modal can rely on
 * their root ref being attached before their effects run. Renders nothing during
 * server rendering.
 */

package/dist/Pressable.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BJrcLd7P.cjs");
+const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
-const require_theme = require("./theme-CleLAV6A.cjs");
+const require_theme = require("./theme-BmEAXmwh.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
@@ -52,13 +52,13 @@ const PressableRoot = require_src.styled("div", {
 	]
 })(baseStyles, feedbackStyles, focusVisibleStyles);
 /**
-* An unstyled clickable surface — button semantics (keyboard activation, focus
+* An unstyled clickable surface - button semantics (keyboard activation, focus
 * ring, disabled state) with none of a button's looks, so it can wrap arbitrary
 * content without changing its layout. Use it instead of an `onClick` on a
 * `div`, which no keyboard or screen-reader user can reach.
 *
 * It renders a `div` by default, because `<button>` may not legally contain a
-* link, another button, or block-level content — the shim gives that div a
+* link, another button, or block-level content - the shim gives that div a
 * `role`, a tab stop, and Enter/Space activation, so it is announced and
 * operated as a button either way. Pass `as="button"` for a native button, or
 * `href` for an anchor; both skip the shim and let the browser do the work.

package/dist/Pressable.d.cts

@@ -1,2 +1,2 @@
-import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-CSXMCqrV.cjs";
+import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-CtrxW81j.cjs";
 export { Pressable, PressableColor, PressableFeedback, PressableProps };

package/dist/Pressable.d.mts

@@ -1,2 +1,2 @@
-import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-CrXLEJO4.mjs";
+import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-8mHoIUt5.mjs";
 export { Pressable, PressableColor, PressableFeedback, PressableProps };

package/dist/Pressable.mjs

@@ -1,7 +1,7 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-D3tHU94W.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { alpha } from "./utils.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-Cudynq5K.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-BQGlZoma.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Pressable/Pressable.tsx
@@ -50,13 +50,13 @@ const PressableRoot = styled("div", {
 	]
 })(baseStyles, feedbackStyles, focusVisibleStyles);
 /**
-* An unstyled clickable surface — button semantics (keyboard activation, focus
+* An unstyled clickable surface - button semantics (keyboard activation, focus
 * ring, disabled state) with none of a button's looks, so it can wrap arbitrary
 * content without changing its layout. Use it instead of an `onClick` on a
 * `div`, which no keyboard or screen-reader user can reach.
 *
 * It renders a `div` by default, because `<button>` may not legally contain a
-* link, another button, or block-level content — the shim gives that div a
+* link, another button, or block-level content - the shim gives that div a
 * `role`, a tab stop, and Enter/Space activation, so it is announced and
 * operated as a button either way. Pass `as="button"` for a native button, or
 * `href` for an anchor; both skip the shim and let the browser do the work.

package/dist/Quote.cjs

@@ -1,8 +1,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BJrcLd7P.cjs");
+const require_src = require("./src-DU81aGy9.cjs");
 const require_View = require("./View.cjs");
 //#region src/Quote/Quote.tsx
-/** A View with a 2px primary left-border — used for terminal readouts and markdown blockquotes. */
+/** A View with a 2px primary left-border - used for terminal readouts and markdown blockquotes. */
 const Quote = require_src.styled(require_View.View, {
 	name: "Quote",
 	label: "Quote"

package/dist/Quote.d.cts

@@ -1,9 +1,9 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { s as ViewProps } from "./index-BPzvFTi5.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { s as ViewProps } from "./index-CvWslVk6.cjs";
 //#region src/Quote/Quote.d.ts
 type QuoteProps = ViewProps;
-/** A View with a 2px primary left-border — used for terminal readouts and markdown blockquotes. */
+/** A View with a 2px primary left-border - used for terminal readouts and markdown blockquotes. */
 declare const Quote: import("@emotion/styled").StyledComponent<Pick<{
   theme?: Theme;
   as?: React.ElementType;

package/dist/Quote.d.mts

@@ -1,9 +1,9 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
-import { s as ViewProps } from "./index-m9jUR509.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { s as ViewProps } from "./index-tv-TGYSG.mjs";
 //#region src/Quote/Quote.d.ts
 type QuoteProps = ViewProps;
-/** A View with a 2px primary left-border — used for terminal readouts and markdown blockquotes. */
+/** A View with a 2px primary left-border - used for terminal readouts and markdown blockquotes. */
 declare const Quote: import("@emotion/styled").StyledComponent<Pick<{
   theme?: Theme;
   as?: React.ElementType;

package/dist/Quote.mjs

@@ -1,7 +1,7 @@
-import { o as styled } from "./src-D3tHU94W.mjs";
+import { o as styled } from "./src-DLGYOJMh.mjs";
 import { View } from "./View.mjs";
 //#region src/Quote/Quote.tsx
-/** A View with a 2px primary left-border — used for terminal readouts and markdown blockquotes. */
+/** A View with a 2px primary left-border - used for terminal readouts and markdown blockquotes. */
 const Quote = styled(View, {
 	name: "Quote",
 	label: "Quote"

package/dist/Radio.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BJrcLd7P.cjs");
+const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_FormControl = require("./FormControl.cjs");
 require("react");

package/dist/Radio.d.cts

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
+import { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Radio/Radio.d.ts
@@ -24,7 +24,7 @@ interface RadioProps extends SpaceProps<Theme> {
   id?: string;
   /** Marks the field as required in a form. */
   required?: boolean;
-  /** Radio group name — required for native group exclusivity. */
+  /** Radio group name - required for native group exclusivity. */
   name?: string;
   /** Value submitted with the form when this radio is selected. */
   value?: string | number | readonly string[];

package/dist/Radio.d.mts

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
+import { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 //#region src/Radio/Radio.d.ts
@@ -24,7 +24,7 @@ interface RadioProps extends SpaceProps<Theme> {
   id?: string;
   /** Marks the field as required in a form. */
   required?: boolean;
-  /** Radio group name — required for native group exclusivity. */
+  /** Radio group name - required for native group exclusivity. */
   name?: string;
   /** Value submitted with the form when this radio is selected. */
   value?: string | number | readonly string[];

package/dist/Radio.mjs

@@ -1,4 +1,4 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-D3tHU94W.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import "react";

package/dist/Select.cjs

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BJrcLd7P.cjs");
+const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-CleLAV6A.cjs");
-const require_Icon = require("./Icon-ByDvM-t1.cjs");
+const require_theme = require("./theme-BmEAXmwh.cjs");
+const require_Icon = require("./Icon-CKLBJ7CC.cjs");
 const require_FormControl = require("./FormControl.cjs");
 const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
 const require_NativeSelect = require("./NativeSelect.cjs");
-const require_Popover = require("./Popover-COoJ2p2I.cjs");
+const require_Popover = require("./Popover-Dz6h3A_9.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");

package/dist/Select.d.cts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-CUV79qWU.cjs";
-import "./index-2QPYJgCl.cjs";
-import { n as IconProps, r as IconName } from "./index-D_AwmCU5.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as IconProps, r as IconName } from "./index-DPHwCZYf.cjs";
 import { ReactNode } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Select/utils/isOptionSelected.d.ts
@@ -14,15 +14,15 @@ type SelectBackgroundToken = keyof Theme['background'];
 type SelectVariant = 'default' | 'outlined' | 'text' | 'underline';
 type SelectSize = keyof Theme['sizes'];
 interface SelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
-  /** `MenuItem` children — one per option. */
+  /** `MenuItem` children - one per option. */
   children: ReactNode;
   /** Render a native `<select>` (delegates to `NativeSelect`, single-select) instead of the custom listbox. */
   native?: boolean;
-  /** Allow selecting several options — `value` becomes an array. Ignored on the native path. */
+  /** Allow selecting several options - `value` becomes an array. Ignored on the native path. */
   multiple?: boolean;
   /** Size the trigger to the current selection instead of reserving the widest option's width. When `false` (default) the trigger keeps a stable width, avoiding layout shift on selection. */
   autoWidth?: boolean;
-  /** Controlled value — a single option value, or an array when `multiple`. */
+  /** Controlled value - a single option value, or an array when `multiple`. */
   value?: SelectValue;
   /** Uncontrolled initial value. */
   defaultValue?: SelectValue;
@@ -38,13 +38,13 @@ interface SelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width
   placeholder?: string;
   /** Override the trigger's rendered content for the current value. */
   renderValue?: (value: SelectValue) => ReactNode;
-  /** Corner radius — applies only to `default` and `outlined` variants. */
+  /** Corner radius - applies only to `default` and `outlined` variants. */
   borderRadius?: keyof Theme['radii'];
-  /** Focus/active border color — resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Focus/active border color - resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: SelectColor;
-  /** Text color of the trigger value — resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  /** Text color of the trigger value - resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
   textColor?: SelectTextColor;
-  /** Background color — resolves against `theme.background`. Default: `'terminal'`. */
+  /** Background color - resolves against `theme.background`. Default: `'terminal'`. */
   bg?: SelectBackgroundToken;
   disabled?: boolean;
   error?: boolean;
@@ -52,7 +52,7 @@ interface SelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width
   required?: boolean;
   /** Controls padding and font size. Default: 'md', overridable via `theme.defaults.size`. */
   size?: SelectSize;
-  /** Visual style — mirrors `TextInput`/`NativeSelect`. Default: `'default'`. */
+  /** Visual style - mirrors `TextInput`/`NativeSelect`. Default: `'default'`. */
   variant?: SelectVariant;
   /** Dropdown affordance icon. Default: `'expand_more'` / `'expand_less'` when open. */
   iconName?: IconName;

package/dist/Select.d.mts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-CUV79qWU.mjs";
-import "./index-q9peil7T.mjs";
-import { n as IconProps, r as IconName } from "./index-B0xTqpvt.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { n as IconProps, r as IconName } from "./index-r2avCy1z.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { ReactNode } from "react";
 //#region src/Select/utils/isOptionSelected.d.ts
@@ -14,15 +14,15 @@ type SelectBackgroundToken = keyof Theme['background'];
 type SelectVariant = 'default' | 'outlined' | 'text' | 'underline';
 type SelectSize = keyof Theme['sizes'];
 interface SelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
-  /** `MenuItem` children — one per option. */
+  /** `MenuItem` children - one per option. */
   children: ReactNode;
   /** Render a native `<select>` (delegates to `NativeSelect`, single-select) instead of the custom listbox. */
   native?: boolean;
-  /** Allow selecting several options — `value` becomes an array. Ignored on the native path. */
+  /** Allow selecting several options - `value` becomes an array. Ignored on the native path. */
   multiple?: boolean;
   /** Size the trigger to the current selection instead of reserving the widest option's width. When `false` (default) the trigger keeps a stable width, avoiding layout shift on selection. */
   autoWidth?: boolean;
-  /** Controlled value — a single option value, or an array when `multiple`. */
+  /** Controlled value - a single option value, or an array when `multiple`. */
   value?: SelectValue;
   /** Uncontrolled initial value. */
   defaultValue?: SelectValue;
@@ -38,13 +38,13 @@ interface SelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width
   placeholder?: string;
   /** Override the trigger's rendered content for the current value. */
   renderValue?: (value: SelectValue) => ReactNode;
-  /** Corner radius — applies only to `default` and `outlined` variants. */
+  /** Corner radius - applies only to `default` and `outlined` variants. */
   borderRadius?: keyof Theme['radii'];
-  /** Focus/active border color — resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
+  /** Focus/active border color - resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
   color?: SelectColor;
-  /** Text color of the trigger value — resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  /** Text color of the trigger value - resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
   textColor?: SelectTextColor;
-  /** Background color — resolves against `theme.background`. Default: `'terminal'`. */
+  /** Background color - resolves against `theme.background`. Default: `'terminal'`. */
   bg?: SelectBackgroundToken;
   disabled?: boolean;
   error?: boolean;
@@ -52,7 +52,7 @@ interface SelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width
   required?: boolean;
   /** Controls padding and font size. Default: 'md', overridable via `theme.defaults.size`. */
   size?: SelectSize;
-  /** Visual style — mirrors `TextInput`/`NativeSelect`. Default: `'default'`. */
+  /** Visual style - mirrors `TextInput`/`NativeSelect`. Default: `'default'`. */
   variant?: SelectVariant;
   /** Dropdown affordance icon. Default: `'expand_more'` / `'expand_less'` when open. */
   iconName?: IconName;

package/dist/Select.mjs

@@ -1,11 +1,11 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-D3tHU94W.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-Cudynq5K.mjs";
-import { t as Icon } from "./Icon-CU_nUmsU.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.mjs";
+import { t as Icon } from "./Icon-CkQGOBmm.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import { NativeSelect } from "./NativeSelect.mjs";
-import { t as Popover } from "./Popover-CH3yI-j-.mjs";
+import { t as Popover } from "./Popover-DWOrf7sy.mjs";
 import { Children, cloneElement, isValidElement, useCallback, useId, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/Select/hooks/useSelectPopover.ts

package/dist/Sidebar/Sidebar.cjs

@@ -1,10 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-BJrcLd7P.cjs");
+const require_src = require("../src-DU81aGy9.cjs");
 const require_Flex = require("../Flex.cjs");
+const require_PageLayoutContext = require("../PageLayoutContext-agXGhegE.cjs");
+const require_layoutStyles = require("../layoutStyles-B4Z1K6HZ.cjs");
 const require_SidebarContext = require("../SidebarContext-jG6OioC-.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Sidebar/Sidebar/Sidebar.tsx
+const hideLabels = { "[data-sidebar-item-content] > :not(:first-child)": { display: "none" } };
 const SidebarRoot = require_src.styled(require_Flex.Flex, {
 	name: "Sidebar",
 	label: "Sidebar"
@@ -13,13 +16,21 @@ const SidebarRail = require_src.styled(require_Flex.Flex, {
 	name: "Sidebar",
 	slot: "rail",
 	label: "SidebarRail",
-	shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "expandedWidth" && prop !== "collapsedWidth"
-})(({ isOpen, expandedWidth, collapsedWidth }) => ({
+	shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "expandedWidth" && prop !== "collapsedWidth" && prop !== "panelSide"
+})(({ theme, isOpen, expandedWidth, collapsedWidth, panelSide }) => panelSide ? {
+	width: "100%",
+	overflowX: "hidden",
+	containerType: "inline-size",
+	...require_layoutStyles.layoutStyles(theme, ({ panels }) => {
+		const width = panels[panelSide]?.width;
+		return width === void 0 ? {} : { [`@container (width < ${require_layoutStyles.layoutLength(theme, width)})`]: hideLabels };
+	})
+} : {
 	width: isOpen ? expandedWidth : collapsedWidth,
 	transition: "width 200ms ease",
 	overflowX: "hidden",
 	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
-}));
+});
 const SidebarPanelRoot = require_src.styled(require_Flex.Flex, {
 	name: "Sidebar",
 	slot: "panel",
@@ -33,17 +44,20 @@ const SidebarPanelRoot = require_src.styled(require_Flex.Flex, {
 /**
 * A collapsible vertical icon rail: collapsed it shows icon-only items; open
 * it also shows each item's label, rendered away from the anchored edge.
-* Purely controlled via `isOpen` — pair it with a menu button wherever your
+* Purely controlled via `isOpen` - pair it with a menu button wherever your
 * layout keeps one (usually the app bar). Children consume the state through
-* `SidebarContext`, and any `Flex` prop (`bg`, spacing, …) applies to the rail.
+* `SidebarContext`, and any `Flex` prop (`bg`, spacing, ...) applies to the rail.
 *
 * With `hasPanel`, the rail gains a second column and the selected item's
-* `children` render there instead of inside its row — an icon rail beside a
+* `children` render there instead of inside its row - an icon rail beside a
 * detail panel. The panel appears only when the selected item has children, and
 * is independent of `isOpen`, so a collapsed icons-only rail can sit beside an
 * open panel.
 */
-function Sidebar({ children, isOpen, anchor = "left", variant = "text", expandedWidth = "14rem", collapsedWidth = "3.5rem", hasPanel = false, panelWidth = "18rem", panelProps, "aria-label": ariaLabel, ...rest }) {
+function Sidebar({ children, isOpen, anchor = "left", variant = "text", expandedWidth, collapsedWidth, hasPanel = false, panelWidth = "18rem", panelProps, "aria-label": ariaLabel, ...rest }) {
+	const region = (0, react.useContext)(require_PageLayoutContext.PageLayoutContext);
+	const isSized = expandedWidth !== void 0 || collapsedWidth !== void 0;
+	const panelSide = region?.region === "panel" && !isSized ? region.side : void 0;
 	const panelId = (0, react.useId)();
 	const [panelNode, setPanelNode] = (0, react.useState)(null);
 	const [panelLabel, setPanelLabel] = (0, react.useState)(null);
@@ -68,14 +82,19 @@ function Sidebar({ children, isOpen, anchor = "left", variant = "text", expanded
 		"aria-label": ariaLabel,
 		flexDirection: anchor === "right" ? "row-reverse" : "row",
 		flexShrink: 0,
+		...panelSide && {
+			width: "100%",
+			height: "100%"
+		},
 		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarRail, {
 			flexDirection: "column",
 			gap: 1,
 			flexShrink: 0,
 			isOpen,
-			expandedWidth,
-			collapsedWidth,
+			expandedWidth: expandedWidth ?? "14rem",
+			collapsedWidth: collapsedWidth ?? "3.5rem",
+			panelSide,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SidebarContext.SidebarContext.Provider, {
 				value: context,
 				children

package/dist/Sidebar/Sidebar.d.cts

@@ -1,23 +1,26 @@
-import { n as FlexProps } from "../index-DLUE7t3O.cjs";
-import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-ao6lRfTX.cjs";
+import { n as FlexProps } from "../index-BMJ3tyIw.cjs";
+import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-B1lWrt77.cjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Sidebar/Sidebar/Sidebar.d.ts
 interface SidebarProps extends FlexProps {
   /**
-   * Rail contents — `SidebarItem`s, but any node composes (a sponsor logo,
-   * a footer, dividers, …). Items read the open state from `SidebarContext`.
+   * Rail contents - `SidebarItem`s, but any node composes (a sponsor logo,
+   * a footer, dividers, ...). Items read the open state from `SidebarContext`.
    */
   children: ReactNode;
   /**
-   * Whether item labels are shown. Controlled — the toggle lives with the
+   * Whether item labels are shown. Controlled - the toggle lives with the
    * consumer (typically a menu button in the app bar).
    */
   isOpen: boolean;
-  /** Screen edge the rail hugs — labels render away from it. Default: `'left'`. */
+  /** Screen edge the rail hugs - labels render away from it. Default: `'left'`. */
   anchor?: SidebarAnchor;
-  /** Default variant for every item — an item's own `variant` wins. Default: `'text'`. */
+  /** Default variant for every item - an item's own `variant` wins. Default: `'text'`. */
   variant?: SidebarItemVariant;
-  /** Rail width while open. Default: `'14rem'`. */
+  /**
+   * Rail width while open. Default: `'14rem'`. In a `PageLayout` panel, with neither
+   * width set, the rail fills the panel's track instead.
+   */
   expandedWidth?: string;
   /** Rail width while collapsed (icons only). Default: `'3.5rem'`. */
   collapsedWidth?: string;
@@ -30,7 +33,7 @@ interface SidebarProps extends FlexProps {
   /** Width of the panel column. Only meaningful with `hasPanel`. Default: `'18rem'`. */
   panelWidth?: string;
   /**
-   * Props for the panel column — any `Flex` prop, plus `as` to change its
+   * Props for the panel column - any `Flex` prop, plus `as` to change its
    * element. Overrides `panelWidth` and the derived `aria-label`; its `id` and
    * ref stay owned by the rail, which needs them as the port target and the
    * `aria-controls` anchor.
@@ -38,18 +41,18 @@ interface SidebarProps extends FlexProps {
   panelProps?: Omit<FlexProps, 'children' | 'id'> & {
     as?: ElementType;
   };
-  /** Accessible name of the navigation landmark — required so multiple navs stay distinguishable. */
+  /** Accessible name of the navigation landmark - required so multiple navs stay distinguishable. */
   'aria-label': string;
 }
 /**
  * A collapsible vertical icon rail: collapsed it shows icon-only items; open
  * it also shows each item's label, rendered away from the anchored edge.
- * Purely controlled via `isOpen` — pair it with a menu button wherever your
+ * Purely controlled via `isOpen` - pair it with a menu button wherever your
  * layout keeps one (usually the app bar). Children consume the state through
- * `SidebarContext`, and any `Flex` prop (`bg`, spacing, …) applies to the rail.
+ * `SidebarContext`, and any `Flex` prop (`bg`, spacing, ...) applies to the rail.
  *
  * With `hasPanel`, the rail gains a second column and the selected item's
- * `children` render there instead of inside its row — an icon rail beside a
+ * `children` render there instead of inside its row - an icon rail beside a
  * detail panel. The panel appears only when the selected item has children, and
  * is independent of `isOpen`, so a collapsed icons-only rail can sit beside an
  * open panel.