@sveltia/ui 0.4.0 → 0.6.0

package/package/components/alert/alert.svelte

@@ -0,0 +1,55 @@
+<!--
+  @component
+  Inline alert message.
+  @see https://w3c.github.io/aria/#alert
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+-->
+<script>
+  import Icon from '../icon/icon.svelte';
+
+  /**
+   * Alert type.
+   * @type {'error' | 'warning' | 'info' | 'success'}
+   */
+  export let type = 'error';
+</script>
+
+<div class="sui alert {type}" role="alert" {...$$restProps}>
+  {#if $$slots.icon}
+    <slot name="icon" />
+  {:else}
+    <Icon name={type === 'success' ? 'check_circle' : type} />
+  {/if}
+  <slot />
+</div>
+
+<style>.alert {
+  display: flex;
+  align-items: center;
+  gap: var(--gap, 8px);
+  padding: var(--padding, 8px);
+  border-width: var(--border-width, var(--sui-control-medium-border-width));
+  border-style: var(--border-style, solid);
+  border-radius: var(--border-radius, var(--sui-control-medium-border-radius));
+  font-size: var(--font-size, var(--sui-font-size-default));
+}
+.alert.error {
+  border-color: var(--sui-error-border-color);
+  color: var(--sui-error-foreground-color);
+  background-color: var(--sui-error-background-color);
+}
+.alert.warning {
+  border-color: var(--sui-warning-border-color);
+  color: var(--sui-warning-foreground-color);
+  background-color: var(--sui-warning-background-color);
+}
+.alert.info {
+  border-color: var(--sui-info-border-color);
+  color: var(--sui-info-foreground-color);
+  background-color: var(--sui-info-background-color);
+}
+.alert.success {
+  border-color: var(--sui-success-border-color);
+  color: var(--sui-success-foreground-color);
+  background-color: var(--sui-success-background-color);
+}</style>

package/package/components/alert/alert.svelte.d.ts

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  AlertProps */
+/** @typedef {typeof __propDef.events}  AlertEvents */
+/** @typedef {typeof __propDef.slots}  AlertSlots */
+/**
+ * Inline alert message.
+ * @see https://w3c.github.io/aria/#alert
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+ */
+export default class Alert extends SvelteComponent<{
+    [x: string]: any;
+    type?: "error" | "warning" | "info" | "success";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    icon: {};
+    default: {};
+}> {
+}
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        type?: 'error' | 'warning' | 'info' | 'success';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+        default: {};
+    };
+};
+export {};

package/package/components/button/button.svelte

@@ -144,72 +144,72 @@ button[disabled] {
 button:global(.primary), button:global(.secondary), button:global(.tertiary), button:global(.ghost) {
   justify-content: center;
   border-width: 1px;
-  border-radius: var(--button--medium--border-radius);
-  padding: var(--button--medium--padding, 0 8px);
-  height: var(--button--medium--height);
+  border-radius: var(--sui-button-medium-border-radius);
+  padding: var(--sui-button-medium-padding, 0 8px);
+  height: var(--sui-button-medium-height);
 }
 button:global(.primary) :global(.label:only-child), button:global(.secondary) :global(.label:only-child), button:global(.tertiary) :global(.label:only-child), button:global(.ghost) :global(.label:only-child) {
   padding: 0 4px;
 }
 button:global(.primary) {
-  border-color: var(--control-border-color);
-  color: var(--primary-accent-color-foreground);
-  background-color: var(--primary-accent-color);
+  border-color: var(--sui-control-border-color);
+  color: var(--sui-primary-accent-color-foreground);
+  background-color: var(--sui-primary-accent-color);
 }
 button:global(.primary):hover, button:global(.primary):focus-visible {
-  background-color: var(--primary-accent-color-lighter);
+  background-color: var(--sui-primary-accent-color-lighter);
 }
 button:global(.primary):active {
-  background-color: var(--primary-accent-color-darker);
+  background-color: var(--sui-primary-accent-color-darker);
 }
 button:global(.secondary) {
-  border-color: var(--primary-accent-color);
-  color: var(--primary-accent-color-lighter);
-  background-color: var(--tertiary-background-color);
+  border-color: var(--sui-primary-accent-color);
+  color: var(--sui-primary-accent-color-lighter);
+  background-color: var(--sui-tertiary-background-color);
 }
 button:global(.secondary):hover, button:global(.secondary):focus-visible {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 button:global(.secondary)[aria-pressed=true] {
-  background-color: var(--primary-accent-color);
+  background-color: var(--sui-primary-accent-color);
 }
 button:global(.tertiary) {
-  border-color: var(--control-border-color);
-  color: var(--highlight-foreground-color);
-  background-color: var(--tertiary-background-color);
+  border-color: var(--sui-control-border-color);
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-tertiary-background-color);
 }
 button:global(.tertiary):hover, button:global(.tertiary):focus-visible {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 button:global(.tertiary)[aria-pressed=true] {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 button:global(.ghost):hover, button:global(.ghost):focus-visible {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 button:global(.ghost)[aria-pressed=true] {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 button:global(.danger) {
-  background-color: var(--danger-background-color);
+  background-color: var(--sui-error-background-color);
 }
 button:global(.large) {
-  height: var(--button--large--height);
+  height: var(--sui-button-large-height);
 }
 button:global(.small) {
-  padding: var(--button--small--padding, 0 8px);
-  height: var(--button--small--height);
-  font-size: var(--font-size--small);
+  padding: var(--sui-button-small-padding, 0 8px);
+  height: var(--sui-button-small-height);
+  font-size: var(--sui-font-size-small);
 }
 button:global(.small) :global(.icon) {
-  font-size: var(--font-size--large);
+  font-size: var(--sui-font-size-large);
 }
 button:global(.pill) {
-  border-radius: var(--button--medium--pill--height, 16px);
-  padding: var(--button--medium--pill--padding, 0 16px);
+  border-radius: var(--sui-button-medium-pill-height, 16px);
+  padding: var(--sui-button-medium-pill-padding, 0 16px);
 }
 button:global(.link) {
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
 }
 button:global(.iconic) {
   justify-content: center;

package/package/components/button/button.svelte.d.ts

@@ -6,12 +6,12 @@
  * @see https://w3c.github.io/aria/#button
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
  */
-export default class Button extends SvelteComponentTyped<{
+export default class Button extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     label?: string;
-    disabled?: boolean;
     type?: "reset" | "submit" | "button";
-    class?: string;
+    disabled?: boolean;
     element?: HTMLButtonElement;
     role?: string;
     size?: "small" | "medium" | "large";
@@ -71,14 +71,14 @@ export default class Button extends SvelteComponentTyped<{
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
 export type ButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         label?: string;
-        disabled?: boolean;
         type?: ('button' | 'submit' | 'reset');
-        class?: string;
+        disabled?: boolean;
         element?: HTMLButtonElement | null;
         role?: string;
         size?: ('small' | 'medium' | 'large');

package/package/components/button/select-button-group.svelte

@@ -57,7 +57,7 @@
 }
 .select-button-group :global(button) {
   border-radius: 0;
-  color: var(--secondary-foreground-color);
+  color: var(--sui-secondary-foreground-color);
 }
 .select-button-group :global(button):first-child {
   border-radius: 4px 0 0 4px;
@@ -69,6 +69,6 @@
   border-radius: 0 4px 4px 0;
 }
 .select-button-group :global(button[aria-checked="true"]) {
-  color: var(--highlight-foreground-color);
-  background-color: var(--highlight-background-color);
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-highlight-background-color);
 }</style>

package/package/components/button/select-button-group.svelte.d.ts

@@ -6,10 +6,10 @@
  * @see https://w3c.github.io/aria/#radiogroup
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
-export default class SelectButtonGroup extends SvelteComponentTyped<{
+export default class SelectButtonGroup extends SvelteComponent<{
+    class?: string;
     disabled?: boolean;
     value?: string;
-    class?: string;
     element?: HTMLElement;
     ariaLabel?: string;
 }, {
@@ -23,12 +23,12 @@ export default class SelectButtonGroup extends SvelteComponentTyped<{
 export type SelectButtonGroupProps = typeof __propDef.props;
 export type SelectButtonGroupEvents = typeof __propDef.events;
 export type SelectButtonGroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
+        class?: string;
         disabled?: boolean;
         value?: string;
-        class?: string;
         element?: HTMLElement | null;
         ariaLabel?: string;
     };

package/package/components/button/select-button.svelte.d.ts

@@ -6,7 +6,7 @@
  * @see https://w3c.github.io/aria/#radio
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
-export default class SelectButton extends SvelteComponentTyped<{
+export default class SelectButton extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     selected?: boolean;
@@ -27,7 +27,7 @@ export default class SelectButton extends SvelteComponentTyped<{
 export type SelectButtonProps = typeof __propDef.props;
 export type SelectButtonEvents = typeof __propDef.events;
 export type SelectButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/calendar/calendar.svelte

@@ -195,17 +195,17 @@
   align-items: center;
   width: 24px;
   height: 24px;
-  font-size: var(--font-size--small);
+  font-size: var(--sui-font-size-small);
 }
 .grid div.weekday {
-  color: var(--secondary-foreground-color);
+  color: var(--sui-secondary-foreground-color);
 }
 .grid div.other-month {
-  color: var(--tertiary-foreground-color);
+  color: var(--sui-tertiary-foreground-color);
 }
 .grid div.today :global(button) {
-  color: var(--highlight-foreground-color);
-  background-color: var(--primary-accent-color);
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-primary-accent-color);
 }
 .grid div :global(button) {
   justify-content: center;
@@ -214,15 +214,15 @@
   border-radius: 50%;
 }
 .grid div :global(button):hover {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 .grid div :global(button):focus {
   border-width: 1px;
-  border-color: var(--primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color-lighter);
 }
 
 .footer :global(button) {
-  font-size: var(--font-size--small);
+  font-size: var(--sui-font-size-small);
 }
 
 .popup-inner {

package/package/components/calendar/calendar.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  CalendarEvents */
 /** @typedef {typeof __propDef.slots}  CalendarSlots */
 /** A calendar (date picker) widget. */
-export default class Calendar extends SvelteComponentTyped<{
+export default class Calendar extends SvelteComponent<{
     value?: string;
 }, {
     click: MouseEvent;
@@ -13,7 +13,7 @@ export default class Calendar extends SvelteComponentTyped<{
 export type CalendarProps = typeof __propDef.props;
 export type CalendarEvents = typeof __propDef.events;
 export type CalendarSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         value?: string | null;

package/package/components/checkbox/checkbox-group.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  CheckboxGroupEvents */
 /** @typedef {typeof __propDef.slots}  CheckboxGroupSlots */
 /** The layout container of `<Checkbox>`es. */
-export default class CheckboxGroup extends SvelteComponentTyped<{
+export default class CheckboxGroup extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     orientation?: "vertical" | "horizontal";
@@ -16,7 +16,7 @@ export default class CheckboxGroup extends SvelteComponentTyped<{
 export type CheckboxGroupProps = typeof __propDef.props;
 export type CheckboxGroupEvents = typeof __propDef.events;
 export type CheckboxGroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/checkbox/checkbox.svelte

@@ -103,30 +103,30 @@
   cursor: default;
 }
 .checkbox.disabled label {
-  color: var(--disabled-foreground-color);
+  color: var(--sui-disabled-foreground-color);
 }
 .checkbox :global(button) {
   align-items: center;
   justify-content: center;
   overflow: hidden;
   border-width: 2px;
-  border-color: var(--checkbox-border-color);
+  border-color: var(--sui-checkbox-border-color);
   border-radius: 4px;
   width: 20px;
   height: 20px;
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
   transition: all 200ms;
 }
 .checkbox :global(button) :global(.icon) {
   font-size: 20px;
 }
 .checkbox :global(button[aria-checked="true"]) {
-  border-color: var(--primary-accent-color-lighter);
-  color: var(--control-background-color);
-  background-color: var(--primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color-lighter);
+  color: var(--sui-control-background-color);
+  background-color: var(--sui-primary-accent-color-lighter);
 }
 .checkbox :global(button[aria-checked="mixed"]) {
-  color: var(--checkbox-border-color);
+  color: var(--sui-checkbox-border-color);
 }
 .checkbox :global(button[aria-checked="false"]) {
   color: transparent;

package/package/components/checkbox/checkbox.svelte.d.ts

@@ -7,13 +7,13 @@
  * @see https://w3c.github.io/aria/#checkbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
  */
-export default class Checkbox extends SvelteComponentTyped<{
+export default class Checkbox extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
+    name?: string;
     label?: string;
     disabled?: boolean;
-    name?: string;
     value?: string;
-    class?: string;
     checked?: string | boolean;
     indeterminate?: boolean;
 }, {
@@ -27,15 +27,15 @@ export default class Checkbox extends SvelteComponentTyped<{
 export type CheckboxProps = typeof __propDef.props;
 export type CheckboxEvents = typeof __propDef.events;
 export type CheckboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
+        name?: string;
         label?: string | null;
         disabled?: boolean;
-        name?: string;
         value?: string | null;
-        class?: string;
         checked?: (boolean | string | undefined);
         indeterminate?: boolean;
     };

package/package/components/dialog/dialog.svelte

@@ -217,7 +217,7 @@
   justify-content: center;
   align-items: center;
   outline: 0;
-  background-color: var(--popup-backdrop-color);
+  background-color: var(--sui-popup-backdrop-color);
 }
 dialog.open form {
   opacity: 1;
@@ -247,9 +247,9 @@ dialog form {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
-  background-color: var(--secondary-background-color-translucent);
+  background-color: var(--sui-secondary-background-color-translucent);
   backdrop-filter: blur(16px);
-  box-shadow: 0 8px 16px var(--popup-shadow-color);
+  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   will-change: opacity, transform;
   transition-property: opacity, transform;
 }
@@ -281,12 +281,12 @@ dialog.x-large form {
   box-sizing: content-box;
   margin: 0 16px;
   border-width: 0 0 1px;
-  border-color: var(--secondary-border-color);
+  border-color: var(--sui-secondary-border-color);
   padding: 16px 8px;
   height: 32px;
 }
 .header .title {
-  font-size: var(--font-size--large);
+  font-size: var(--sui-font-size-large);
 }
 
 .footer {

package/package/components/dialog/dialog.svelte.d.ts

@@ -6,11 +6,11 @@
  * @see https://w3c.github.io/aria/#dialog
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
-export default class Dialog extends SvelteComponentTyped<{
+export default class Dialog extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     title?: string;
     open?: boolean;
-    class?: string;
     size?: "small" | "medium" | "large" | "x-large";
     modal?: boolean;
     showCancel?: boolean;
@@ -39,13 +39,13 @@ export default class Dialog extends SvelteComponentTyped<{
 export type DialogProps = typeof __propDef.props;
 export type DialogEvents = typeof __propDef.events;
 export type DialogSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         title?: string;
         open?: boolean;
-        class?: string;
         size?: ('small' | 'medium' | 'large' | 'x-large');
         modal?: boolean;
         showCancel?: boolean;

package/package/components/disclosure/disclosure.svelte.d.ts

@@ -6,10 +6,10 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
  */
-export default class Disclosure extends SvelteComponentTyped<{
+export default class Disclosure extends SvelteComponent<{
     [x: string]: any;
-    label?: string;
     class?: string;
+    label?: string;
     expanded?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -20,12 +20,12 @@ export default class Disclosure extends SvelteComponentTyped<{
 export type DisclosureProps = typeof __propDef.props;
 export type DisclosureEvents = typeof __propDef.events;
 export type DisclosureSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        label?: string;
         class?: string;
+        label?: string;
         expanded?: boolean;
     };
     events: {

package/package/components/divider/divider.svelte

@@ -25,7 +25,7 @@
 
 <style>.divider {
   flex: none;
-  background-color: var(--secondary-border-color);
+  background-color: var(--sui-secondary-border-color);
 }
 .divider[aria-orientation=horizontal] {
   height: 1px;

package/package/components/divider/divider.svelte.d.ts

@@ -5,7 +5,7 @@
  * A content divider with a visible vertical/horizontal line.
  * @see https://w3c.github.io/aria/#separator
  */
-export default class Divider extends SvelteComponentTyped<{
+export default class Divider extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     orientation?: "vertical" | "horizontal";
@@ -16,7 +16,7 @@ export default class Divider extends SvelteComponentTyped<{
 export type DividerProps = typeof __propDef.props;
 export type DividerEvents = typeof __propDef.events;
 export type DividerSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/divider/spacer.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  SpacerEvents */
 /** @typedef {typeof __propDef.slots}  SpacerSlots */
 /** A content divider with no line. It can be flexible. */
-export default class Spacer extends SvelteComponentTyped<{
+export default class Spacer extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     flex?: boolean;
@@ -13,7 +13,7 @@ export default class Spacer extends SvelteComponentTyped<{
 export type SpacerProps = typeof __propDef.props;
 export type SpacerEvents = typeof __propDef.events;
 export type SpacerSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/drawer/drawer.svelte

@@ -201,7 +201,7 @@
 <style>dialog {
   overflow: hidden;
   outline: 0;
-  background-color: var(--popup-backdrop-color);
+  background-color: var(--sui-popup-backdrop-color);
 }
 dialog.open form {
   opacity: 1;
@@ -232,9 +232,9 @@ dialog form {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
-  background-color: var(--secondary-background-color-translucent);
+  background-color: var(--sui-secondary-background-color-translucent);
   backdrop-filter: blur(16px);
-  box-shadow: 0 8px 16px var(--popup-shadow-color);
+  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   will-change: opacity, transform;
   transition-property: opacity, transform;
 }
@@ -330,12 +330,12 @@ dialog.horizontal.x-large form {
   box-sizing: content-box;
   margin: 0 16px;
   border-width: 0 0 1px;
-  border-color: var(--secondary-border-color);
+  border-color: var(--sui-secondary-border-color);
   padding: 16px 8px;
   height: 32px;
 }
 .header .title {
-  font-size: var(--font-size--large);
+  font-size: var(--sui-font-size-large);
 }
 
 .footer {

package/package/components/drawer/drawer.svelte.d.ts

@@ -6,12 +6,12 @@
  * @see https://w3c.github.io/aria/#dialog
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
  */
-export default class Drawer extends SvelteComponentTyped<{
+export default class Drawer extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     title?: string;
     position?: "top" | "right" | "bottom" | "left";
     open?: boolean;
-    class?: string;
     size?: "small" | "medium" | "large" | "x-large";
     showClose?: false | "inside" | "outside";
     closeOnBackdropClick?: boolean;
@@ -32,14 +32,14 @@ export default class Drawer extends SvelteComponentTyped<{
 export type DrawerProps = typeof __propDef.props;
 export type DrawerEvents = typeof __propDef.events;
 export type DrawerSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         title?: string;
         position?: ('top' | 'right' | 'bottom' | 'left');
         open?: boolean;
-        class?: string;
         size?: ('small' | 'medium' | 'large' | 'x-large');
         showClose?: ('inside' | 'outside' | false);
         closeOnBackdropClick?: boolean;