sit-onyx 1.6.0-dev-20260108104845 → 1.6.0-dev-20260111214528

package/dist/components/OnyxBasicDialog/OnyxBasicDialog.d.vue.ts

@@ -37,6 +37,7 @@ declare const __VLS_component: import('vue', { with: { "resolution-mode": "impor
     modal: boolean;
     nonDismissible: boolean;
     alignment: import('./types.js', { with: { "resolution-mode": "import" } }).DialogAlignment;
+    backdrop: "soft" | "medium";
 }, {}, {}, {}, string, import('vue', { with: { "resolution-mode": "import" } }).ComponentProvideOptions, false, {
     dialogRef: HTMLDialogElement;
     contentRef: HTMLDivElement;

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

@@ -30,6 +30,11 @@ export type OnyxBasicDialogProps = DensityProp & {
      * How to align the dialog horizontally. If "left" or "right", the modal will also be made full height.
      */
     alignment?: DialogAlignment;
+    /**
+     * The intensity of the backdrop.
+     * @default "soft"
+     */
+    backdrop?: "soft" | "medium";
 };
 export declare const DIALOG_ALIGNMENTS: readonly ["left", "center", "right"];
 export type DialogAlignment = (typeof DIALOG_ALIGNMENTS)[number];

package/dist/components/OnyxGlobalSearch/OnyxGlobalSearch.d.vue.ts

@@ -21,6 +21,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue', { with: { "resolut
             readonly nonDismissible?: boolean | undefined;
             readonly alert?: boolean | undefined;
             readonly alignment?: import('../OnyxBasicDialog/types.js', { with: { "resolution-mode": "import" } }).DialogAlignment | undefined;
+            readonly backdrop?: "soft" | "medium" | undefined;
             readonly "onUpdate:open"?: ((open: boolean) => any) | undefined;
         } & import('vue', { with: { "resolution-mode": "import" } }).VNodeProps & import('vue', { with: { "resolution-mode": "import" } }).AllowedComponentProps & import('vue', { with: { "resolution-mode": "import" } }).ComponentCustomProps;
         $attrs: {
@@ -51,6 +52,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue', { with: { "resolut
             modal: boolean;
             nonDismissible: boolean;
             alignment: import('../OnyxBasicDialog/types.js', { with: { "resolution-mode": "import" } }).DialogAlignment;
+            backdrop: "soft" | "medium";
         }, {}, string, {}, import('vue', { with: { "resolution-mode": "import" } }).GlobalComponents, import('vue', { with: { "resolution-mode": "import" } }).GlobalDirectives, string, import('vue', { with: { "resolution-mode": "import" } }).ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -76,9 +78,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue', { with: { "resolut
         modal: boolean;
         nonDismissible: boolean;
         alignment: import('../OnyxBasicDialog/types.js', { with: { "resolution-mode": "import" } }).DialogAlignment;
+        backdrop: "soft" | "medium";
     }> & Omit<Readonly<import('../OnyxBasicDialog/types.js', { with: { "resolution-mode": "import" } }).OnyxBasicDialogProps> & Readonly<{
         "onUpdate:open"?: ((open: boolean) => any) | undefined;
-    }>, "dialog" | ("alert" | "modal" | "nonDismissible" | "alignment")> & import('vue', { with: { "resolution-mode": "import" } }).ShallowUnwrapRef<{
+    }>, "dialog" | ("alert" | "modal" | "nonDismissible" | "alignment" | "backdrop")> & import('vue', { with: { "resolution-mode": "import" } }).ShallowUnwrapRef<{
         dialog: Readonly<import('vue', { with: { "resolution-mode": "import" } }).ShallowRef<HTMLDialogElement | null>>;
     }> & {} & import('vue', { with: { "resolution-mode": "import" } }).ComponentCustomProperties & {} & {
         $slots: Readonly<{

package/dist/components/OnyxSidebar/OnyxSidebar.d.vue.ts

@@ -47,6 +47,7 @@ declare function __VLS_template(): {
                 readonly alert?: boolean | undefined;
                 readonly open?: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>;
                 readonly nonDismissible?: boolean | undefined;
+                readonly backdrop?: "soft" | "medium" | undefined;
                 readonly "onUpdate:open"?: ((open: boolean) => any) | undefined;
             } & import('vue', { with: { "resolution-mode": "import" } }).VNodeProps & import('vue', { with: { "resolution-mode": "import" } }).AllowedComponentProps & import('vue', { with: { "resolution-mode": "import" } }).ComponentCustomProps;
             $attrs: {
@@ -125,6 +126,7 @@ declare const __VLS_component: import('vue', { with: { "resolution-mode": "impor
             readonly alert?: boolean | undefined;
             readonly open?: import('../../index.js', { with: { "resolution-mode": "import" } }).Nullable<boolean>;
             readonly nonDismissible?: boolean | undefined;
+            readonly backdrop?: "soft" | "medium" | undefined;
             readonly "onUpdate:open"?: ((open: boolean) => any) | undefined;
         } & import('vue', { with: { "resolution-mode": "import" } }).VNodeProps & import('vue', { with: { "resolution-mode": "import" } }).AllowedComponentProps & import('vue', { with: { "resolution-mode": "import" } }).ComponentCustomProps;
         $attrs: {

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

@@ -32,7 +32,7 @@ export type OnyxSidebarProps = DensityProp & {
 };
 export declare const SIDEBAR_ALIGNMENT: readonly ["left", "right"];
 export type SidebarAlignment = (typeof SIDEBAR_ALIGNMENT)[number];
-export type TemporarySidebar = Pick<OnyxModalProps, "open" | "nonDismissible"> & {
+export type TemporarySidebar = Pick<OnyxModalProps, "open" | "nonDismissible" | "backdrop"> & {
     /**
      * If `true`, the sidebar will have a small gap from the viewport and have rounded corners.
      */

package/dist/index.esm-bundler.js

@@ -494,7 +494,13 @@ function createElRef() {
   const elementRef = shallowRef();
   return computed({
     set: (element) => {
-      elementRef.value = element != null && "$el" in element ? element.$el : element;
+      if (Array.isArray(element)) {
+        elementRef.value = element.at(0);
+      } else if (element != null && "$el" in element) {
+        elementRef.value = element.$el;
+      } else {
+        elementRef.value = element;
+      }
     },
     get: () => elementRef.value
   });
@@ -1887,7 +1893,8 @@ const _sfc_main$1P = /* @__PURE__ */ defineComponent({
     modal: { type: Boolean, required: false, default: false },
     nonDismissible: { type: Boolean, required: false, default: false },
     alert: { type: Boolean, required: false, default: false },
-    alignment: { type: null, required: false, default: "center" }
+    alignment: { type: null, required: false, default: "center" },
+    backdrop: { type: String, required: false, default: "soft" }
   },
   emits: ["update:open"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -1953,6 +1960,7 @@ function _sfc_render$1P(_ctx, _cache, $props, $setup, $data, $options) {
       $setup.densityClass,
       "onyx-truncation-multiline",
       "onyx-basic-dialog",
+      { "onyx-basic-dialog__backdrop--medium": $setup.props.backdrop === "medium" },
       { [`onyx-basic-dialog--${$setup.props.alignment}`]: $setup.props.alignment !== "center" }
     ]),
     "aria-modal": $setup.props.modal,
@@ -10658,6 +10666,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     open: { type: [Boolean, null], required: false, skipCheck: true },
     nonDismissible: { type: Boolean, required: false },
     alert: { type: Boolean, required: false },
+    backdrop: { type: String, required: false },
     modelValue: { type: null, required: false },
     loading: { type: Boolean, required: false }
   },
@@ -11243,7 +11252,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     label: { type: String, required: true },
     open: { type: [Boolean, null], required: false, skipCheck: true },
     nonDismissible: { type: Boolean, required: false },
-    alert: { type: Boolean, required: false }
+    alert: { type: Boolean, required: false },
+    backdrop: { type: String, required: false }
   },
   emits: ["update:open"],
   setup(__props, { expose: __expose, emit: __emit }) {