@ostack.tech/ui 0.10.4 → 0.11.0

package/dist/types/components/Toast/Toast.d.ts

@@ -6,6 +6,8 @@ import { Icon, IconProp } from '../Icon';
 export type ToastVariant = "solid" | "subtle" | "outlined";
 /** Toast severities. */
 export type ToastSeverity = "neutral" | "info" | "success" | "danger" | "warning";
+/** Toast type of announcement. */
+export type ToastAnnounce = "polite" | "assertive";
 /** Properties of the toast component. */
 export type ToastProps = ToastPropsWithAction | ToastPropsWithoutAction;
 /** Properties of the toast component when it has an action. */
@@ -19,20 +21,33 @@ export interface ToastPropsWithoutAction extends ToastPropsBase {
     actionAltText?: undefined;
 }
 /** Base properties of the toast component. */
-export interface ToastPropsBase extends Pick<ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, "type" | "duration" | "defaultOpen" | "open" | "onOpenChange" | "onEscapeKeyDown" | "onPause" | "onResume" | "onSwipeStart" | "onSwipeEnd" | "forceMount">, Omit<ComponentPropsWithoutRef<"div">, "onPause"> {
+export interface ToastPropsBase extends Pick<ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, "duration" | "defaultOpen" | "open" | "onOpenChange" | "onEscapeKeyDown" | "onPause" | "onResume" | "onSwipeStart" | "onSwipeMove" | "onSwipeEnd" | "onSwipeCancel" | "forceMount">, Omit<ComponentPropsWithoutRef<"div">, "onPause"> {
     /**
      * Toast variant.
      *
-     * @default solid
+     * @default "solid"
      */
     variant?: ToastVariant;
     /**
      * Sets the toast's severity.
      *
-     * @default info
+     * @default "info"
      */
     severity?: ToastSeverity;
-    /** Alert action. */
+    /**
+     * Controls how the toast is announced to screen reader users:
+     *
+     * - `polite`: The screen reader will announce the toast at the next available
+     *   opportunity without interrupting the user. Best for background events not
+     *   directly triggered by the user.
+     * - `assertive`: The screen reader will interrupt any current speech to
+     *   announce this immediately. Recommended for feedback directly resulting
+     *   from a user action.
+     *
+     * @default "assertive"
+     */
+    announce?: ToastAnnounce;
+    /** Toast action. */
     action?: ReactNode;
     /**
      * Describes an alternative way to achieve the action for assistive technology
@@ -43,9 +58,24 @@ export interface ToastPropsBase extends Pick<ComponentPropsWithoutRef<typeof Toa
     actionAltText?: string;
     /** Icon to show. Each severity except `"neutral"` has its own default icon. */
     icon?: IconProp | null;
+    /**
+     * Whether the toast can be manually dismissed by the user. Setting this to
+     * `false` disables all manual exit triggers:
+     *
+     * - The close button is not rendered.
+     * - The `Escape` key is ignored.
+     * - Swipe gestures are disabled.
+     *
+     * > **Note:** This does not affect automatic dismissal via the `duration`
+     * > property. To create a truly "permanent" toast, set `duration` to
+     * > `Infinity`.
+     *
+     * @default true
+     */
+    dismissible?: boolean;
     /**
      * Whether to show a close button. By default, a close button is shown when an
-     * `action` is not specified.
+     * `action` is not specified and when the toast is dismissible..
      */
     showCloseButton?: boolean;
     /**
@@ -71,18 +101,54 @@ export interface ToastPropsBase extends Pick<ComponentPropsWithoutRef<typeof Toa
     closeButtonProps?: ComponentPropsWithRef<typeof CloseButton>;
 }
 /**
- * The `Toast` component is a simple and powerful element that provides
- * non-intrusive, temporary feedback to users. These messages can notify users
- * about system statuses, errors, successes, or informational alerts in a
- * visually appealing and unobtrusive manner.
+ * The toast component provides a brief, temporary notification. Built on top of
+ * the [Radix Toast
+ * primitive](https://www.radix-ui.com/primitives/docs/components/toast).
  *
  * It composes the following subcomponents:
  *
- * - `ToastDescription`: Refers to the content displayed within the `Toast`
- *   component. It typically includes the message or notification that the
- *   `Toast` is meant to convey to the user.
- * - `ToastTitle`: Refers to the title displayed within the `Toast` component. It
- *   is typically used to highlight the main subject or category of the toast
- *   notification.
+ * - `ToastTitle`: Optional title for the toast.
+ * - `ToastDescription`: The primary message content.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import {
+ *   Button,
+ *   Toast,
+ *   ToastTitle,
+ *   ToastDescription,
+ * } from "@ostack.tech/ui";
+ * import { useState } from "react";
+ *
+ * function UpdateProfile() {
+ *   const [notifySaved, setNotifySaved] = useState(false);
+ *
+ *   const handleSave = () => {
+ *     saveProfile();
+ *     setNotifySaved(true);
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <Button onClick={handleSave}>Save changes</Button>
+ *       <Toast open={notifySaved} onOpenChange={setNotifySaved}>
+ *         <ToastTitle>Changes saved</ToastTitle>
+ *         <ToastDescription>
+ *           Your profile information has been updated.
+ *         </ToastDescription>
+ *       </Toast>
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * > **Note:** In most scenarios, you might prefer to use the `useToastManager`
+ * > hook instead, which provides an imperative API to manage toasts.
+ *
+ * > **Note:** The `Root` component automatically initializes the `ToastProvider`
+ * > and `ToastViewport`. These manage the global state, configuration, and the
+ * > accessible region where notifications are rendered. Manual setup of these
+ * > components is not required.
  */
 export declare const Toast: import('react').ForwardRefExoticComponent<ToastProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -62,5 +62,9 @@ export interface TooltipProps extends Omit<ComponentPropsWithoutRef<typeof Toolt
  *   );
  * }
  * ```
+ *
+ * > **Note:** The `Root` component automatically initializes the
+ * > `TooltipProvider`, which manages the global configuration and state for all
+ * > nested tooltips. Manual setup of the provider is not required.
  */
 export declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -17,5 +17,26 @@ export interface VisuallyHiddenOwnProps {
      */
     focusable?: boolean;
 }
-/** Component that hides content from the screen in an accessible way. */
+/**
+ * Component that hides content from the screen while keeping it accessible to
+ * assistive technologies.
+ *
+ * Used to provide context to screen readers that is redundant for sighted
+ * users.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * import { VisuallyHidden } from "@ostack.tech/ui";
+ *
+ * function AddItemButton() {
+ *   return (
+ *     <button onClick={addItem}>
+ *       <span aria-hidden>+</span>
+ *       <VisuallyHidden>Add item</VisuallyHidden>
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
 export declare const VisuallyHidden: PolymorphicComponent<VisuallyHiddenAs, "span", VisuallyHiddenOwnProps>;

package/dist/types/index.d.ts

@@ -18,9 +18,8 @@ export * from './components/ControlAddon';
 export * from './components/ControlCode';
 export * from './components/DataTable';
 export * from './components/DateInput';
-export * from './components/DatePicker';
 export * from './components/DateRangeInput';
-export * from './components/DateRangePicker';
+export * from './components/DescriptionList';
 export * from './components/Dialog';
 export * from './components/DropdownMenu';
 export * from './components/ErrorBoundary';

package/dist/types/providers/AlertDialogProvider/AlertDialogProviderContext.d.ts

@@ -8,7 +8,7 @@ export interface AlertDialogOptions {
     /**
      * Alert dialog content variant.
      *
-     * @default solid
+     * @default "solid"
      */
     variant?: AlertDialogContentVariant;
     /**
@@ -22,7 +22,7 @@ export interface AlertDialogOptions {
     /**
      * Alert dialog content color.
      *
-     * @default neutral
+     * @default "neutral"
      */
     color?: AlertDialogContentColor;
     /** Alert dialog content size. */

package/dist/types/providers/ErrorReportingProvider/ErrorReport.d.ts

@@ -17,9 +17,9 @@ export interface ErrorReport {
     /**
      * Browser's user agent.
      *
-     * **NOTE**: This could also be obtained from the `User-Agent` header of the
-     * HTTP request. However, it is included here since it is possible for the
-     * reporting to go through a proxy, which is free to alter the HTTP header.
+     * > **Note:** This could also be obtained from the `User-Agent` header of the
+     * > HTTP request. However, it is included here since it is possible for the
+     * > reporting to go through a proxy, which is free to alter the HTTP header.
      */
     userAgent: string;
     /** URL where the error occurred. */

package/dist/types/providers/ErrorReportingProvider/ErrorReportingProvider.d.ts

@@ -29,7 +29,7 @@ export interface ErrorReportingProviderProps {
      *
      * This property is ignored when a custom `reportError` is provided.
      *
-     * @default POST
+     * @default "POST"
      */
     errorReportingMethod?: string;
     /**
@@ -47,7 +47,7 @@ export interface ErrorReportingProviderProps {
      *
      * This property is ignored when a custom `reportError` is provided.
      *
-     * @default application/json
+     * @default "application/json"
      */
     encodedErrorReportMimeType?: string;
     /**

package/dist/types/providers/LocalizationProvider/LocalizationObject.d.ts

@@ -1,6 +1,7 @@
 import { Locale as DayPickerLocale } from 'react-day-picker';
 import { CalendarProps } from '../../components/Calendar';
 import { CloseButtonProps } from '../../components/CloseButton';
+import { CollapsibleTriggerChildlessProps } from '../../components/Collapsible/CollapsibleTrigger.tsx';
 import { CommandMenuDialogProps, CommandMenuProps } from '../../components/CommandMenu';
 import { ControlCodeProps } from '../../components/ControlCode';
 import { DataTableContentProps, DataTableFilterProps, DataTablePaginationProps, DataTableProps, DataTableRowsPerPageProps } from '../../components/DataTable';
@@ -16,6 +17,7 @@ import { LabelProps } from '../../components/Label';
 import { NumericInputProps } from '../../components/NumericInput';
 import { RadioGroupProps } from '../../components/RadioGroup';
 import { SelectProps } from '../../components/Select';
+import { StepperFinishTriggerChildlessProps, StepperNextTriggerChildlessProps, StepperPreviousTriggerChildlessProps, StepProps } from '../../components/Stepper';
 import { TableColumnProps, TableHeadProps } from '../../components/Table';
 import { TabListProps } from '../../components/Tabs';
 import { ToastProviderProps, ToastViewportProps } from '../../components/Toast';
@@ -27,6 +29,7 @@ export interface LocalizationObject {
     AlertDialog: Pick<ConfirmDialogOptions, "okText">;
     Calendar: Pick<CalendarProps, "monthSelectLabel" | "yearSelectLabel" | "previousMonthLabel" | "nextMonthLabel">;
     CloseButton: Pick<CloseButtonProps, "label">;
+    CollapsibleTrigger: Pick<CollapsibleTriggerChildlessProps, "expandLabel" | "collapseLabel">;
     CommandMenu: Pick<CommandMenuProps, "label" | "searchPlaceholder" | "listLabel" | "loadingLabel" | "emptyMessage">;
     CommandMenuDialog: Pick<CommandMenuDialogProps, "title" | "description">;
     ConfirmDialog: Pick<ConfirmDialogOptions, "okText" | "cancelText">;
@@ -48,6 +51,10 @@ export interface LocalizationObject {
     NumericInput: Pick<NumericInputProps, "decimalSeparator" | "groupingStyle" | "groupSeparator">;
     RadioGroup: Pick<RadioGroupProps, "clearDescription">;
     Select: Pick<SelectProps, "placeholder" | "clearDescription" | "searchLabel" | "searchPlaceholder" | "emptyMessage" | "optionsLabel" | "loadingOptionsLabel" | "valueTagCloseButtonLabel">;
+    Step: Pick<StepProps, "stepNumberLabel" | "completedLabel">;
+    StepperFinishTrigger: Pick<StepperFinishTriggerChildlessProps, "label">;
+    StepperNextTrigger: Pick<StepperNextTriggerChildlessProps, "label">;
+    StepperPreviousTrigger: Pick<StepperPreviousTriggerChildlessProps, "label">;
     TableColumn: Pick<TableColumnProps, "helperButtonLabel">;
     TableHead: Pick<TableHeadProps, "sortByColumnDescription">;
     TabList: Pick<TabListProps, "scrollLeftButtonLabel" | "scrollRightButtonLabel">;

package/dist/types/providers/ToastManagerProvider/ToastManagerContext.d.ts

@@ -25,11 +25,13 @@ export interface ToastManagerContextValue {
      */
     addToast: (description: ReactNode, toastOptions?: ToastOptions) => ToastId;
     /**
-     * Removes an existing toast with the given identifier.
+     * Removes an existing toast with the given identifier. Calling `removeToast`
+     * with `null`, `undefined`, or the id of a toast which has already been
+     * removed is supported and behaves as a no-op.
      *
      * @param toastId Toast identifier.
      */
-    removeToast: (toastId: ToastId) => void;
+    removeToast: (toastId: ToastId | null | undefined) => void;
 }
 /** Toast manager context. */
 export declare const ToastManagerContext: import('react').Context<ToastManagerContextValue | undefined>;

package/dist/types/utils/control.d.ts

@@ -12,7 +12,7 @@ export interface ControlContextValue {
     variant?: ControlVariant;
     status?: ControlStatus;
     disabled?: boolean;
-    loading?: boolean;
+    softDisabled?: boolean;
     readOnly?: boolean;
 }
 /** Control context. */

package/dist/types/utils/keyboardShortcut.d.ts

@@ -13,7 +13,7 @@ export interface RegisterKeyboardShortcutOptions {
     /**
      * Event type to listen for.
      *
-     * @default keydown
+     * @default "keydown"
      */
     eventType?: "keydown" | "keyup";
     /**

package/dist/types/utils/useSearchParam.d.ts

@@ -9,14 +9,14 @@ export interface SetSearchParamOptions extends SetSearchParamsOptions {
      */
     clearDefaultValue?: boolean;
 }
+/** Accepted search parameter value. */
+export type SearchParamValue = {
+    toString(): string;
+} | null | undefined;
 /** Result of the {@link useSearchParam} hook. */
 export type UseSearchParamResult<TValue extends string | undefined = string | undefined> = [
     searchParamValue: TValue,
-    setSearchParamValue: (nextSearchParamValue: {
-        toString(): string;
-    } | null | undefined | ((prevSearchParamValue: TValue) => {
-        toString(): string;
-    } | null | undefined), options?: SetSearchParamOptions) => void
+    setSearchParamValue: (nextSearchParamValue: SearchParamValue | ((prevSearchParamValue: TValue) => SearchParamValue), options?: SetSearchParamOptions) => void
 ];
 /**
  * Hook exposing the value of a single URL search parameter and a function to

package/dist/types/utils/useSearchParams.d.ts

@@ -8,13 +8,16 @@ export interface SetSearchParamsOptions extends NavigationOptions {
      */
     clearHash?: boolean;
 }
+/** Argument used to initialize a URL search parameters instance. */
+type URLSearchParamsInit = ConstructorParameters<typeof URLSearchParams>[0];
 /** Result of the {@link useSearchParams} hook. */
-export type UseSearchParamsResult = [
-    searchParams: URLSearchParams,
-    setSearchParams: (nextSearchParams: (string[][] | Record<string, string> | string | URLSearchParams) | ((prevSearchParams: URLSearchParams) => string[][] | Record<string, string> | string | URLSearchParams), options?: SetSearchParamsOptions) => void
-];
+export interface UseSearchParamsResult {
+    searchParams: URLSearchParams;
+    setSearchParams: (nextSearchParams: URLSearchParamsInit | ((prevSearchParams: URLSearchParams) => URLSearchParamsInit), options?: SetSearchParamsOptions) => void;
+}
 /**
  * Hook exposing the current URL search parameters and a function to update
  * them.
  */
 export declare function useSearchParams(): UseSearchParamsResult;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui",
   "description": "ostack/UI component library.",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",
@@ -42,11 +42,11 @@
     "copy:scss": "cpy 'src/**/*.scss' '!src/**/*.stories.scss' scss/"
   },
   "dependencies": {
-    "@fortawesome/react-fontawesome": "^3.1.1",
+    "@fortawesome/react-fontawesome": "^3.2.0",
     "@tanstack/react-virtual": "^3.13.18",
     "from-exponential": "^1.1.1",
     "radix-ui": "^1.4.3",
-    "react-day-picker": "^9.13.0",
+    "react-day-picker": "^9.13.2",
     "react-error-boundary": "^6.1.0",
     "react-number-format": "^5.4.4",
     "react-to-print": "^3.2.0",

package/scss/_utils.scss

@@ -29,6 +29,7 @@
 @forward "components/Code/Code-variables";
 @forward "components/Collapsible/Collapsible-variables";
 @forward "components/DataTable/DataTable-variables";
+@forward "components/DescriptionList/DescriptionList-variables";
 @forward "components/Dialog/Dialog-variables";
 @forward "components/CommandMenu/CommandMenu-variables";
 @forward "components/Container/Container-variables";
@@ -37,6 +38,7 @@
 @forward "components/ControlCode/ControlCode-variables";
 @forward "components/DropdownMenu/DropdownMenu-variables";
 @forward "components/FeedbackList/FeedbackList-variables";
+@forward "components/Field/Field-variables";
 @forward "components/FeedbackPopover/FeedbackPopover-variables";
 @forward "components/FieldGroup/FieldGroup-variables";
 @forward "components/Heading/Heading-variables";
@@ -53,6 +55,7 @@
 @forward "components/RadioGroup/Radio-variables";
 @forward "components/Root/Root-variables";
 @forward "components/Select/Select-variables";
+@forward "components/Separator/Separator-variables";
 @forward "components/Stack/Stack-variables";
 @forward "components/Stepper/Stepper-variables";
 @forward "components/Table/Table-variables";

package/scss/components/Checkbox/_Checkbox.scss

@@ -87,7 +87,7 @@
       @extend %#{$prefix}checkable__label--checked;
     }
 
-    #{$checkbox}:is(:disabled, [data-loading]) ~ &-container > & {
+    #{$checkbox}:is(:disabled, [data-disabled]) ~ &-container > & {
       @extend %#{$prefix}checkable__label--disabled;
     }
   }

package/scss/components/Collapsible/_Collapsible-variables.scss

@@ -1,5 +1,4 @@
 @use "../../scss/utils/spacing" as *;
 
-$collapsible-padding: spacing(1) !default;
 $collapsible-animation-duration: 0.35s !default;
 $collapsible-animation-timing-function: ease !default;

package/scss/components/Collapsible/_Collapsible.scss

@@ -4,14 +4,10 @@
 @use "../../scss/utils/declare-var" as *;
 
 .#{$prefix}collapsible {
-  &__trigger {
-    color: inherit !important;
-  }
-
   &__content {
     overflow: hidden;
 
-    &[data-direction="vertical"] {
+    &[data-orientation="vertical"] {
       @include declare-var(
         --#{$prefix}animation-height,
         var(--radix-collapsible-content-height)
@@ -32,7 +28,7 @@
       }
     }
 
-    &[data-direction="horizontal"] {
+    &[data-orientation="horizontal"] {
       @include declare-var(
         --#{$prefix}animation-width,
         var(--radix-collapsible-content-width)

package/scss/components/Container/_Container.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "Container-variables" as *;
 @use "../../scss/base-variables" as *;
 @use "../../scss/utils/breakpoints" as *;
@@ -6,11 +7,19 @@
 $container: ".#{$prefix}container";
 #{$container} {
   width: 100%;
+  max-width: min(
+    var(--#{$prefix}container-max-width, 100%),
+    var(--#{$prefix}container-fluid-max-width, 100%)
+  );
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--#{$prefix}container-left-gutter);
   padding-right: var(--#{$prefix}container-right-gutter);
 
+  @each $container-size, $container-max-width in $container-max-width-by-size {
+    --#{$prefix}container-max-width-#{$container-size}: #{$container-max-width};
+  }
+
   @include responsive-values(
     --#{$prefix}container,
     (
@@ -20,10 +29,12 @@ $container: ".#{$prefix}container";
   );
 }
 
-@each $container-size, $container-max-width in $container-max-width-by-size {
+@each $container-size in map.keys($container-max-width-by-size) {
   @include media-breakpoint-up($container-size) {
-    %#{$prefix}container--#{$container-size} {
-      max-width: $container-max-width;
+    %#{$prefix}container--fluid-#{$container-size} {
+      --#{$prefix}container-fluid-max-width: var(
+        --#{$prefix}container-max-width-#{$container-size}
+      );
     }
 
     // Extend each breakpoint which is smaller or equal to the current
@@ -32,8 +43,8 @@ $container: ".#{$prefix}container";
 
     @each $breakpoint-size, $breakpoint in $breakpoint-by-size {
       @if $extend-breakpoint and $breakpoint > 0 {
-        #{$container}--#{$breakpoint-size} {
-          @extend %#{$prefix}container--#{$container-size};
+        #{$container}--fluid-#{$breakpoint-size} {
+          @extend %#{$prefix}container--fluid-#{$container-size};
         }
 
         // Once the current breakpoint is reached, stop extending

package/scss/components/DescriptionList/_DescriptionList-variables.scss

@@ -0,0 +1,21 @@
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$description-list-font-size: var(--#{$prefix}font-size-sm) !default;
+$description-list-line-height: var(--#{$prefix}line-height-sm) !default;
+
+// Item
+$description-list-item-gap-y: spacing(1) !default;
+
+// Term
+$description-list-term-font-size: null !default;
+$description-list-term-line-height: null !default;
+$description-list-term-font-weight: $font-weight-medium !default;
+$description-list-term-text-transform: null !default;
+$description-list-term-color: var(--#{$prefix}neutral-a11) !default;
+
+// Details
+$description-list-details-font-size: null !default;
+$description-list-details-line-height: null !default;
+$description-list-details-font-weight: null !default;
+$description-list-details-color: null !default;

package/scss/components/DescriptionList/_DescriptionList.scss

@@ -0,0 +1,33 @@
+@use "DescriptionList-variables" as *;
+@use "../../scss/base-variables" as *;
+
+.#{$prefix}description-list {
+  margin-bottom: 0;
+
+  font-size: $description-list-font-size;
+  line-height: $description-list-line-height;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__term {
+    margin-bottom: $description-list-item-gap-y;
+
+    font-size: $description-list-term-font-size;
+    line-height: $description-list-term-line-height;
+    font-weight: $description-list-term-font-weight;
+    text-transform: $description-list-term-text-transform;
+    color: $description-list-term-color;
+  }
+
+  &__details {
+    margin: 0;
+
+    font-size: $description-list-details-font-size;
+    line-height: $description-list-details-line-height;
+    font-weight: $description-list-details-font-weight;
+    color: $description-list-details-color;
+  }
+}

package/scss/components/DropdownMenu/_DropdownMenu.scss

@@ -19,9 +19,7 @@
   }
 
   :is(&__item, &__checkbox-item, &__radio-item)
-    #{$menu-list-item-action}:not(a):not(:disabled):not([data-disabled]):not(
-      [data-loading]
-    ) {
+    #{$menu-list-item-action}:not(a):not(:disabled, [data-disabled]) {
     cursor: $menu-item-button-cursor;
   }
 

package/scss/components/FeedbackPopover/_FeedbackPopover-variables.scss

@@ -1,12 +1,14 @@
 @use "../ControlAddon/ControlAddon-variables" as *;
+@use "../Field/Field-variables" as *;
+@use "../Label/Label-variables" as *;
 @use "../../scss/base-variables" as *;
 @use "../../scss/utils/spacing" as *;
 @use "../../scss/placeholders/control/control-variables" as *;
 
-$feedback-popover-max-width: 500px !default;
-$feedback-popover-max-height: 600px !default;
-$feedback-popover-padding-y: spacing(1) !default;
-$feedback-popover-padding-x: spacing(2) !default;
+$feedback-popover-max-width: $label-helper-popover-max-width !default;
+$feedback-popover-max-height: $label-helper-popover-max-height !default;
+$feedback-popover-padding-y: $label-helper-popover-padding-y !default;
+$feedback-popover-padding-x: $label-helper-popover-padding-x !default;
 
 // Button - Within control
 $feedback-popover-button-control-inset-x: calc(
@@ -19,8 +21,6 @@ $feedback-popover-button-control-inset-x: calc(
 );
 
 // Feedback
-$feedback-popover-feedback-margin-y: spacing(0.5) !default;
-$feedback-popover-feedback-font-size: var(--#{$prefix}font-size-xs) !default;
-$feedback-popover-feedback-line-height: var(
-  --#{$prefix}line-height-xs
-) !default;
+$feedback-popover-feedback-spacing-y: $field-feedback-spacing-y !default;
+$feedback-popover-feedback-font-size: null !default;
+$feedback-popover-feedback-line-height: null !default;

package/scss/components/FeedbackPopover/_FeedbackPopover.scss

@@ -60,7 +60,7 @@
     line-height: $feedback-popover-feedback-line-height;
 
     ~ .#{$prefix}feedback {
-      margin-top: $feedback-popover-feedback-margin-y;
+      margin-top: $feedback-popover-feedback-spacing-y;
     }
   }
 }

package/scss/components/Field/_Field-variables.scss

@@ -0,0 +1,9 @@
+@use "../ControlCode/ControlCode-variables" as *;
+@use "../../scss/base-variables" as *;
+@use "../../scss/utils/spacing" as *;
+
+$field-spacing-y: spacing(1) !default;
+$field-feedback-spacing-y: spacing(0.5) !default;
+
+// Has code
+$field-has-code-margin-left: calc($control-code-width + spacing(0.5)) !default;