@ostack.tech/ui-kform 0.10.5 → 0.11.1

package/dist/types/components/Annexes/Annex.d.ts

@@ -17,9 +17,9 @@ export interface AnnexProps extends AnnexObject, Omit<ComponentPropsWithoutRef<t
      *
      * These messages are used by the `IssueMessages` component.
      *
-     * **Note:** Changes to `issueMessages` are handled correctly, but are not
-     * efficient. Please make sure that the identity of the provided value doesn't
-     * change at every render.
+     * > **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * > efficient. Please make sure that the identity of the provided value doesn't
+     * > change at every render.
      *
      * Example value:
      *

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

@@ -49,9 +49,9 @@ export type FormAppProps<T = any> = Pick<ComponentPropsWithoutRef<typeof Root>,
      *
      * These messages are used by the `IssueMessages` component.
      *
-     * **Note:** Changes to `issueMessages` are handled correctly, but are not
-     * efficient. Please make sure that the identity of the provided value
-     * doesn't change at every render.
+     * > **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * > efficient. Please make sure that the identity of the provided value
+     * > doesn't change at every render.
      *
      * Example value:
      *
@@ -76,7 +76,7 @@ export type FormAppProps<T = any> = Pick<ComponentPropsWithoutRef<typeof Root>,
      *   for navigating issues.
      * - `panel` mode displays issue messages within the bottom issues panel.
      *
-     * @default inline
+     * @default "inline"
      */
     issuesDisplayMode?: IssuesDisplayMode;
     /**
@@ -186,9 +186,9 @@ export declare const FormApp: import('react').ForwardRefExoticComponent<Pick<Omi
      *
      * These messages are used by the `IssueMessages` component.
      *
-     * **Note:** Changes to `issueMessages` are handled correctly, but are not
-     * efficient. Please make sure that the identity of the provided value
-     * doesn't change at every render.
+     * > **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * > efficient. Please make sure that the identity of the provided value
+     * > doesn't change at every render.
      *
      * Example value:
      *
@@ -213,7 +213,7 @@ export declare const FormApp: import('react').ForwardRefExoticComponent<Pick<Omi
      *   for navigating issues.
      * - `panel` mode displays issue messages within the bottom issues panel.
      *
-     * @default inline
+     * @default "inline"
      */
     issuesDisplayMode?: IssuesDisplayMode;
     /**

package/dist/types/components/FormPages/FormPage.d.ts

@@ -20,9 +20,9 @@ export interface FormPageProps extends FormPageObject, Omit<ComponentPropsWithou
      *
      * These messages are used by the `IssueMessages` component.
      *
-     * **Note:** Changes to `issueMessages` are handled correctly, but are not
-     * efficient. Please make sure that the identity of the provided value doesn't
-     * change at every render.
+     * > **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * > efficient. Please make sure that the identity of the provided value doesn't
+     * > change at every render.
      *
      * Example value:
      *

package/dist/types/components/FormStepper/FormStep.d.ts

@@ -1,8 +1,45 @@
-import { AbsolutePath } from '@ostack.tech/kform';
+import { ErrorBoundary, StepContent } from '@ostack.tech/ui';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
+import { IssueMessagesByCode } from '../IssueMessages';
+import { FormStepObject } from './FormStepper.tsx';
 /** Properties of the form step component. */
-export interface FormStepProps {
-    path: AbsolutePath;
-    index: number;
+export interface FormStepProps extends FormStepObject, Omit<ComponentPropsWithoutRef<typeof StepContent>, "index" | "title"> {
+    /** Sets the step as disabled. */
+    disabled?: boolean;
+    /** Sets the step as read-only. */
+    readOnly?: boolean;
+    /**
+     * Mapping of issue messages from the path of the field with issues to the
+     * issue messages of said field (which are themselves grouped by their code).
+     *
+     * Provided paths are relative to the form step's path and may contain
+     * wildcards, which will have a lower priority when matched against.
+     *
+     * These messages are used by the `IssueMessages` component.
+     *
+     * > **Note:** Changes to `issueMessages` are handled correctly, but are not
+     * > efficient. Please make sure that the identity of the provided value doesn't
+     * > change at every render.
+     *
+     * Example value:
+     *
+     * ```tsx
+     * {
+     *   "**": {
+     *     "valueMissing": "Field is required."
+     *   },
+     *   "field": {
+     *     "valueMissing": "My field cannot be left empty!",
+     *     "someOtherError": "Text of the other error."
+     *   }
+     * }
+     * ```
+     */
+    issueMessages?: Record<string, IssueMessagesByCode>;
+    /** Properties to pass to the `ErrorBoundary` component. */
+    errorBoundaryProps?: ComponentPropsWithRef<typeof ErrorBoundary>;
 }
-/** Form step. */
-export declare function FormStep({ path, index }: FormStepProps): import("react/jsx-runtime").JSX.Element;
+/** Single form step. */
+export declare const FormStep: import('react').ForwardRefExoticComponent<FormStepProps & import('react').RefAttributes<HTMLDivElement>>;
+/** @deprecated Use `FormStep` instead. */
+export declare const FormStepContent: import('react').ForwardRefExoticComponent<FormStepProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/types/components/FormStepper/FormStepButton.d.ts

@@ -0,0 +1,8 @@
+import { AbsolutePath } from '@ostack.tech/kform';
+/** Properties of the form step button component. */
+export interface FormStepButtonProps {
+    path: AbsolutePath;
+    index: number;
+}
+/** Form step button. */
+export declare function FormStepButton({ path, index }: FormStepButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/FormStepper/FormStepList.d.ts

@@ -4,4 +4,4 @@ import { ComponentPropsWithoutRef } from 'react';
 export interface FormStepListProps extends ComponentPropsWithoutRef<typeof StepList> {
 }
 /** Component displaying all form steps in a list. */
-export declare const FormStepList: import('react').ForwardRefExoticComponent<FormStepListProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const FormStepList: import('react').ForwardRefExoticComponent<FormStepListProps & import('react').RefAttributes<HTMLOListElement>>;

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

@@ -6,7 +6,7 @@ export interface FormStepperProps extends Omit<ComponentPropsWithoutRef<typeof S
     /** Base path for all declared form steps. */
     path?: string | Path;
     /** List of all form steps. */
-    steps: FormStepObject[];
+    steps?: FormStepObject[];
     /** Default active form step. */
     defaultActiveStep?: string | Path;
     /** Controlled active form step. */

package/dist/types/components/FormStepper/FormStepperFinishTrigger.d.ts

@@ -0,0 +1,2 @@
+/** Trigger used to conclude the form stepper. */
+export declare const FormStepperFinishTrigger: import('react').ForwardRefExoticComponent<import('@ostack.tech/ui').StepperFinishTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/FormStepper/FormStepperNextTrigger.d.ts

@@ -0,0 +1,2 @@
+/** Trigger used to go to the next step of the form stepper. */
+export declare const FormStepperNextTrigger: import('react').ForwardRefExoticComponent<import('@ostack.tech/ui').StepperNextTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/FormStepper/FormStepperPreviousTrigger.d.ts

@@ -0,0 +1,2 @@
+/** Trigger used to go to the previous step of the form stepper. */
+export declare const FormStepperPreviousTrigger: import('react').ForwardRefExoticComponent<import('@ostack.tech/ui').StepperPreviousTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/FormStepper/FormStepperState.d.ts

@@ -0,0 +1,3 @@
+import { StepperState } from '@ostack.tech/ui';
+/** Component used to access the state of the form stepper and act on its API. */
+export declare const FormStepperState: typeof StepperState;

package/dist/types/components/FormStepper/index.d.ts

@@ -1,4 +1,7 @@
-export * from './FormStepContent.tsx';
+export * from './FormStep.tsx';
 export * from './FormStepList.tsx';
 export * from './FormStepper.tsx';
+export * from './FormStepperFinishTrigger.tsx';
+export * from './FormStepperNextTrigger.tsx';
+export * from './FormStepperPreviousTrigger.tsx';
 export { FormStepRegistrar } from './FormStepRegistrar.tsx';

package/dist/types/components/TableControl/TableControlAddRowTrigger.d.ts

@@ -1,12 +1,9 @@
 import { Button } from '@ostack.tech/ui';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 /** Properties of the table control add row trigger component. */
-export interface TableControlAddRowTriggerProps extends ComponentPropsWithoutRef<typeof Button<"button">> {
-    /**
-     * Text displayed on the button rendered by default when no `children` are
-     * provided. If `children` are provided, this property has no effect.
-     */
-    defaultButtonText?: ReactNode;
+export type TableControlAddRowTriggerProps = TableControlAddRowTriggerChildlessProps | TableControlAddRowTriggerChildrenProps;
+/** Base properties of the table control add row trigger component. */
+export interface TableControlAddRowTriggerPropsBase {
     /** Function called after the row has been added. */
     onRowAdded?: () => void;
     /**
@@ -30,9 +27,26 @@ export interface TableControlAddRowTriggerProps extends ComponentPropsWithoutRef
     showWhilePrinting?: boolean;
 }
 /**
- * Trigger used to add a new row to a table control.
- *
- * By default, it renders a button with text `defaultButtonText`, however, this
- * can be overriden by providing `children`.
+ * Properties of the table control add row trigger component when rendered
+ * without children.
  */
+export interface TableControlAddRowTriggerChildlessProps extends TableControlAddRowTriggerPropsBase, Omit<ComponentPropsWithoutRef<typeof Button<"button">>, "asChild" | "children"> {
+    /** Label displayed on the button. */
+    label?: ReactNode;
+    /**
+     * Label displayed on the button.
+     *
+     * @deprecated Use `label` instead.
+     */
+    defaultButtonText?: ReactNode;
+    children?: never;
+}
+/**
+ * Properties of the table control add row trigger component when rendered with
+ * children.
+ */
+export interface TableControlAddRowTriggerChildrenProps extends TableControlAddRowTriggerPropsBase, ComponentPropsWithoutRef<"button"> {
+    children: ReactNode;
+}
+/** Trigger used to add a new row to a table control. */
 export declare const TableControlAddRowTrigger: import('react').ForwardRefExoticComponent<TableControlAddRowTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/components/TableControl/TableControlRemoveRowTrigger.d.ts

@@ -1,7 +1,9 @@
 import { IconButton } from '@ostack.tech/ui';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 /** Properties of the table control remove row trigger component. */
-export interface TableControlRemoveRowTriggerProps extends Omit<Partial<ComponentPropsWithoutRef<typeof IconButton<"button">>>, "children"> {
+export type TableControlRemoveRowTriggerProps = TableControlRemoveRowTriggerChildlessProps | TableControlRemoveRowTriggerChildrenProps;
+/** Base properties of the table control remove row trigger component. */
+export interface TableControlRemoveRowTriggerChildlessPropsBase {
     /**
      * Whether to show a confirmation message when removing a row.
      *
@@ -15,11 +17,6 @@ export interface TableControlRemoveRowTriggerProps extends Omit<Partial<Componen
     onConfirmRowRemoval?: () => void;
     /** Function called after the row has been removed. */
     onRowRemoved?: () => void;
-    /**
-     * Label displayed on the icon button rendered by default when no `children`
-     * are provided. If `children` are provided, this property has no effect.
-     */
-    defaultButtonLabel?: ReactNode;
     /** Title of the confirmation dialog when `showConfirmation` is `true`. */
     confirmDialogTitle?: ReactNode;
     /**
@@ -44,13 +41,26 @@ export interface TableControlRemoveRowTriggerProps extends Omit<Partial<Componen
      * @default false
      */
     showWhenReadOnly?: boolean;
+}
+/**
+ * Base properties of the table control remove row trigger component when
+ * rendered without children.
+ */
+export interface TableControlRemoveRowTriggerChildlessProps extends TableControlRemoveRowTriggerChildlessPropsBase, Omit<Partial<ComponentPropsWithoutRef<typeof IconButton<"button">>>, "asChild" | "children"> {
     /**
-     * Children of the remove row trigger component. By default, it is an
-     * `IconButton` with label `defaultButtonLabel`. A function can be optionally
-     * passed as children which will receive an argument with whether the row is
-     * currently being removed.
+     * Label of the icon button.
+     *
+     * @deprecated Use `label` instead.
      */
-    children?: ReactNode;
+    defaultButtonLabel?: ReactNode;
+    children?: never;
+}
+/**
+ * Base properties of the table control remove row trigger component when
+ * rendered with children.
+ */
+export interface TableControlRemoveRowTriggerChildrenProps extends TableControlRemoveRowTriggerChildlessPropsBase, Partial<ComponentPropsWithoutRef<"button">> {
+    children: ReactNode;
 }
 /**
  * Trigger used to remove a row of a table controlled by a table control.

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

@@ -11,7 +11,7 @@ import { LoadActionProps } from '../../components/LoadAction';
 import { PrintActionProps } from '../../components/PrintAction';
 import { SaveActionProps } from '../../components/SaveAction';
 import { SubmitActionProps } from '../../components/SubmitAction';
-import { TableControlAddRowTriggerProps, TableControlRemoveRowTriggerProps } from '../../components/TableControl';
+import { TableControlAddRowTriggerChildlessProps, TableControlRemoveRowTriggerChildlessProps } from '../../components/TableControl';
 import { ValidateActionProps } from '../../components/ValidateAction';
 /** Localization object representation. */
 export interface LocalizationObject {
@@ -29,7 +29,7 @@ export interface LocalizationObject {
     SaveAction: Pick<SaveActionProps, "label" | "keybinds" | "saveOptionsLabel" | "saveAsLabel" | "saveAsKeybinds" | "successMessage" | "errorMessage">;
     PrintAction: Pick<PrintActionProps, "label" | "keybinds">;
     SubmitAction: Pick<SubmitActionProps, "label" | "keybinds" | "dialogTitle" | "dialogDescription" | "dialogBody" | "dialogOkText" | "dialogCancelText" | "confirmWarningsCheckboxLabel" | "successMessage" | "errorMessage">;
-    TableControlAddRowTrigger: Pick<TableControlAddRowTriggerProps, "defaultButtonText">;
-    TableControlRemoveRowTrigger: Pick<TableControlRemoveRowTriggerProps, "defaultButtonLabel" | "confirmDialogTitle" | "confirmDialogMessage" | "confirmDialogOkText" | "confirmDialogCancelText">;
+    TableControlAddRowTrigger: Pick<TableControlAddRowTriggerChildlessProps, "label">;
+    TableControlRemoveRowTrigger: Pick<TableControlRemoveRowTriggerChildlessProps, "label" | "confirmDialogTitle" | "confirmDialogMessage" | "confirmDialogOkText" | "confirmDialogCancelText">;
     ValidateAction: Pick<ValidateActionProps, "label" | "keybinds">;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ostack.tech/ui-kform",
   "description": "Integration of ostack/UI with ostack/KForm.",
-  "version": "0.10.5",
+  "version": "0.11.1",
   "homepage": "https://ui.ostack.tech/",
   "author": {
     "name": "Opensoft",
@@ -50,7 +50,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0 || ^7.0.0",
     "@ostack.tech/kform": "~0.32.0",
     "@ostack.tech/kform-react": "~0.32.0",
-    "@ostack.tech/ui": "~0.10.5",
+    "@ostack.tech/ui": "~0.11.1",
     "@types/react": "^18.0.0 || ^19.0.0",
     "@types/react-dom": "^18.0.0 || ^19.0.0",
     "date-fns": "^4.1.0",

package/scss/_utils.scss

@@ -2,5 +2,6 @@
 
 // Component variables
 @forward "components/Annexes/Annexes-variables";
+@forward "components/FormApp/FormApp-variables";
 @forward "components/FormPages/FormPages-variables";
 @forward "components/IssuesPanel/IssuesPanel-variables";

package/scss/components/Annexes/_Annexes-variables.scss

@@ -1,4 +1,4 @@
-@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+@use "@ostack.tech/ui/scss/utils" as o-ui;
 
 // Manager
 $annexes-manager-min-width: 200px !default;
@@ -8,8 +8,7 @@ $annexes-tab-issues-popover-button-icon-border-width: 1px !default;
 $annexes-tab-issues-popover-button-padding: calc(
   (
     (
-        ostack-ui.$icon-button-md-min-size -
-          ostack-ui.$icon-button-md-font-size -
+        o-ui.$icon-button-md-min-size - o-ui.$icon-button-md-font-size -
           $annexes-tab-issues-popover-button-icon-border-width * 2
       ) /
       2

package/scss/components/Annexes/_Annexes.scss

@@ -1,5 +1,5 @@
 @use "sass:color";
-@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+@use "@ostack.tech/ui/scss/utils" as o-ui;
 @use "Annexes-variables" as *;
 @use "../../scss/base-variables" as *;
 
@@ -16,28 +16,28 @@
     flex: 1 1 auto;
 
     &:not(:last-child) {
-      margin-right: ostack-ui.spacing(2);
+      margin-right: o-ui.spacing(2);
 
-      @include ostack-ui.media-breakpoint-up(sm) {
-        margin-right: ostack-ui.spacing(4);
+      @include o-ui.media-breakpoint-up(sm) {
+        margin-right: o-ui.spacing(4);
       }
     }
   }
 
   &__menu-container {
-    margin-bottom: ostack-ui.$tabs-tab-list-annexes-margin-bottom;
-    padding-right: ostack-ui.spacing(2);
-    box-shadow: ostack-ui.$tabs-tab-list-annexes-box-shadow;
+    margin-bottom: o-ui.$tabs-tab-list-annexes-margin-bottom;
+    padding-right: o-ui.spacing(2);
+    box-shadow: o-ui.$tabs-tab-list-annexes-box-shadow;
 
-    @include ostack-ui.media-breakpoint-up(sm) {
-      padding-right: ostack-ui.spacing(4);
+    @include o-ui.media-breakpoint-up(sm) {
+      padding-right: o-ui.spacing(4);
     }
   }
 
   &__issues-popover-container {
-    margin-left: ostack-ui.spacing(-4);
-    margin-right: ostack-ui.spacing(7);
-    padding-top: ostack-ui.spacing(0.5);
+    margin-left: o-ui.spacing(-4);
+    margin-right: o-ui.spacing(7);
+    padding-top: o-ui.spacing(0.5);
     height: $tab-height;
   }
 
@@ -50,14 +50,14 @@
     height: $tab-height;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    color: var(--#{ostack-ui.$prefix}primary-9) !important;
+    color: var(--#{o-ui.$prefix}primary-9) !important;
 
     &[data-state="open"] {
-      border-color: ostack-ui.$neutral-7;
+      border-color: o-ui.$neutral-7;
       border-bottom-color: transparent;
-      background-color: var(--#{ostack-ui.$prefix}background-color) !important;
+      background-color: var(--#{o-ui.$prefix}background-color) !important;
       position: relative;
-      z-index: ostack-ui.$z-index-dropdown + 1;
+      z-index: o-ui.$z-index-dropdown + 1;
     }
   }
 
@@ -72,7 +72,7 @@
       border-bottom-left-radius: 0;
     }
 
-    @include ostack-ui.media-breakpoint-down(sm) {
+    @include o-ui.media-breakpoint-down(sm) {
       min-width: 100vw;
       margin-left: -5px; // XXX: Override Radix's hard-coded collision margin
       border-radius: 0;
@@ -87,14 +87,12 @@
       content: "";
       position: absolute;
       top: 0;
-      left: calc(
-        (ostack-ui.$menu-padding-x + ostack-ui.$menu-item-margin-x) * -1
-      );
+      left: calc((o-ui.$menu-padding-x + o-ui.$menu-item-margin-x) * -1);
       height: 100%;
       width: 3px;
-      border-radius: 0 var(--#{ostack-ui.$prefix}border-radius-sm)
-        var(--#{ostack-ui.$prefix}border-radius-sm) 0;
-      background-color: var(--#{ostack-ui.$prefix}accent-9);
+      border-radius: 0 var(--#{o-ui.$prefix}border-radius-sm)
+        var(--#{o-ui.$prefix}border-radius-sm) 0;
+      background-color: var(--#{o-ui.$prefix}accent-9);
     }
   }
 
@@ -115,27 +113,27 @@
   }
 
   &__menu-annex-title {
-    font-weight: ostack-ui.$font-weight-bold;
+    font-weight: o-ui.$font-weight-bold;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   &__menu-annex-subtitle {
-    margin-left: ostack-ui.spacing(2);
-    font-weight: ostack-ui.$font-weight-normal;
-    font-size: ostack-ui.$font-size-xs;
-    line-height: ostack-ui.$font-size-xs;
+    margin-left: o-ui.spacing(2);
+    font-weight: o-ui.$font-weight-normal;
+    font-size: o-ui.$font-size-xs;
+    line-height: o-ui.$font-size-xs;
     text-transform: none;
   }
 
   &__menu-annex-description {
-    font-weight: ostack-ui.$font-weight-normal;
+    font-weight: o-ui.$font-weight-normal;
     text-transform: none;
   }
 
   &__menu-annex-remove {
-    margin-left: ostack-ui.spacing(2);
+    margin-left: o-ui.spacing(2);
     $min-size: 28px;
     min-height: $min-size;
     min-width: $min-size;
@@ -148,21 +146,25 @@
 
   &__menu-new-annex-title {
     flex: 1;
-    font-weight: ostack-ui.$font-weight-bold;
-    color: ostack-ui.$primary-9;
+    font-weight: o-ui.$font-weight-bold;
+    color: o-ui.$primary-9;
   }
 
   &__menu-new-annex-description {
     flex: 2;
-    margin-left: ostack-ui.spacing(2);
-    font-weight: ostack-ui.$font-weight-normal;
+    margin-left: o-ui.spacing(2);
+    font-weight: o-ui.$font-weight-normal;
     text-transform: none;
   }
 
   &__tab-inner {
+    min-height: $tab-height;
+  }
+
+  &__tab-text {
+    display: flex;
     flex-direction: column;
     height: 100%;
-    min-height: $tab-height;
   }
 
   &__tab-title,
@@ -176,61 +178,58 @@
 
   &__tab-title {
     font-weight: var(
-      --#{ostack-ui.$prefix}tabs-tab-open-font-weight,
-      var(
-        --#{ostack-ui.$prefix}tabs-tab-font-weight,
-        ostack-ui.$font-weight-bold
-      )
+      --#{o-ui.$prefix}tabs-tab-open-font-weight,
+      var(--#{o-ui.$prefix}tabs-tab-font-weight, o-ui.$font-weight-bold)
     );
   }
 
   &__tab-subtitle {
-    font-weight: ostack-ui.$font-weight-normal;
-    font-size: ostack-ui.$font-size-xs;
-    line-height: ostack-ui.$line-height-xs;
+    font-weight: o-ui.$font-weight-normal;
+    font-size: o-ui.$font-size-xs;
+    line-height: o-ui.$line-height-xs;
   }
 
   // Tab issues
   &__tab[data-has-issues] &__tab-inner {
     padding-right: calc(
-      ostack-ui.$tabs-tab-inner-annexes-padding-x * 2 +
-        ostack-ui.$icon-button-md-font-size +
+      o-ui.$tabs-tab-inner-annexes-padding-x * 2 +
+        o-ui.$icon-button-md-font-size +
         $annexes-tab-issues-popover-button-padding
     );
   }
 
   &__tab-issues-popover-button-container {
-    z-index: calc(ostack-ui.$tabs-tab-focus-z-index + 1);
+    z-index: calc(o-ui.$tabs-tab-focus-z-index + 1);
     margin-left: calc(
-      ostack-ui.$icon-button-md-min-size *
-        -1 - var(--#{ostack-ui.$prefix}tabs-tab-list-gap-x) -
+      o-ui.$icon-button-md-min-size *
+        -1 - var(--#{o-ui.$prefix}tabs-tab-list-gap-x) -
         $annexes-tab-issues-popover-button-padding / 2
     );
     padding-right: calc(
-      var(--#{ostack-ui.$prefix}tabs-tab-list-gap-x) +
+      var(--#{o-ui.$prefix}tabs-tab-list-gap-x) +
         $annexes-tab-issues-popover-button-padding / 2
     );
   }
 
-  &__tab-issues-popover-button .#{ostack-ui.$prefix}icon {
+  &__tab-issues-popover-button .#{o-ui.$prefix}icon {
     // Border around the icon
     filter: drop-shadow(
         /* Top */ 0
           calc($annexes-tab-issues-popover-button-icon-border-width * -1) 0
-          var(--#{ostack-ui.$prefix}background-color)
+          var(--#{o-ui.$prefix}background-color)
       )
       drop-shadow(
         /* Right */ $annexes-tab-issues-popover-button-icon-border-width 0 0
-          var(--#{ostack-ui.$prefix}background-color)
+          var(--#{o-ui.$prefix}background-color)
       )
       drop-shadow(
         /* Bottom */ 0 $annexes-tab-issues-popover-button-icon-border-width 0
-          var(--#{ostack-ui.$prefix}background-color)
+          var(--#{o-ui.$prefix}background-color)
       )
       drop-shadow(
         /* Left */
         calc($annexes-tab-issues-popover-button-icon-border-width * -1) 0 0
-          var(--#{ostack-ui.$prefix}background-color)
+          var(--#{o-ui.$prefix}background-color)
       );
   }
 
@@ -251,14 +250,14 @@
     align-items: baseline;
 
     .#{$prefix}annexes__tab-title {
-      font-size: var(--#{ostack-ui.$prefix}font-size-md);
+      font-size: var(--#{o-ui.$prefix}font-size-md);
     }
     .#{$prefix}annexes__tab-subtitle {
       &:not(:first-child)::before {
         content: "\00a0—\00a0";
       }
 
-      font-size: var(--#{ostack-ui.$prefix}font-size-sm);
+      font-size: var(--#{o-ui.$prefix}font-size-sm);
     }
   }
 }

package/scss/components/FileControl/_FileControl.scss

@@ -1,19 +1,16 @@
 @use "sass:map";
-@use "@ostack.tech/ui/scss/utils" as ostack-ui;
+@use "@ostack.tech/ui/scss/utils" as o-ui;
 @use "../../scss/base-variables" as *;
 
 .#{$prefix}file-control {
   &__viewer-dialog {
     width: fit-content;
     min-width: 0;
-    max-width: min(
-      calc(100dvw - ostack-ui.spacing(14)),
-      ostack-ui.$dialog-xl-width
-    );
+    max-width: min(calc(100dvw - o-ui.spacing(14)), o-ui.$dialog-xl-width);
   }
 
   &__viewer-download {
-    margin-left: ostack-ui.spacing(4);
+    margin-left: o-ui.spacing(4);
   }
 
   &__viewer-dialog-title {
@@ -36,9 +33,9 @@
     max-height: $max-height;
     margin: 0 auto;
 
-    border-bottom-left-radius: var(--#{ostack-ui.$prefix}border-radius-xs);
-    border-bottom-right-radius: var(--#{ostack-ui.$prefix}border-radius-xs);
-    background-color: var(--#{ostack-ui.$prefix}background-color);
+    border-bottom-left-radius: var(--#{o-ui.$prefix}border-radius-xs);
+    border-bottom-right-radius: var(--#{o-ui.$prefix}border-radius-xs);
+    background-color: var(--#{o-ui.$prefix}background-color);
 
     &:not([type^="image/"]):not([type^="video/"]):not([type^="audio/"]) {
       width: 100vw;
@@ -47,6 +44,6 @@
   }
 
   &__viewer-fallback {
-    margin: ostack-ui.spacing(3) ostack-ui.spacing(4);
+    margin: o-ui.spacing(3) o-ui.spacing(4);
   }
 }

package/scss/components/FormApp/_FormApp-variables.scss

@@ -0,0 +1,9 @@
+@use "@ostack.tech/ui/scss/utils" as o-ui;
+
+$form-app-default-min-height: 100dvh !default;
+$form-app-background-color: var(--#{o-ui.$prefix}background-color) !default;
+$form-app-base-sticky-top: null !default;
+
+// Focus
+$form-app-focus-outline: 2px solid o-ui.$primary-8 !default;
+$form-app-focus-outline-offset: -3px !default;