Make UI Shell HeaderAction panel transition configurable (#419)

* fix(ui-shell): remove fly transition from hamburger menu

* feat(header-action): make panel transition configurable

* chore: rebuild types, docs

* docs(ui-shell): document transition prop in Header app switcher example

types/Accordion/AccordionItem.d.ts

@@ -3,7 +3,7 @@
 export interface AccordionItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
   /**
    * Specify the title of the accordion item heading
-   * Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
+   * Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
    * @default "title"
    */
   title?: string;

types/Button/Button.d.ts

@@ -47,7 +47,7 @@ export interface ButtonProps
 
   /**
    * Set to `true` to render a custom HTML element
-   * Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
+   * Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>)
    * @default false
    */
   as?: boolean;

types/CodeSnippet/CodeSnippet.d.ts

@@ -9,7 +9,7 @@ export interface CodeSnippetProps {
 
   /**
    * Set the code snippet text
-   * Alternatively, use the default slot (e.g. <CodeSnippet>{`code`}</CodeSnippet>)
+   * Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
    */
   code?: string;
 

types/ContentSwitcher/Switch.d.ts

@@ -3,7 +3,7 @@
 export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
   /**
    * Specify the switch text
-   * Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
+   * Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>)
    * @default "Provide text"
    */
   text?: string;

types/Grid/Column.d.ts

@@ -12,7 +12,7 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
 export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Set to `true` to render a custom HTML element
-   * Props are destructured as `props` in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)
+   * Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>)
    * @default false
    */
   as?: boolean;

types/Grid/Grid.d.ts

@@ -3,7 +3,7 @@
 export interface GridProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Set to `true` to render a custom HTML element
-   * Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)
+   * Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>)
    * @default false
    */
   as?: boolean;

types/Grid/Row.d.ts

@@ -3,7 +3,7 @@
 export interface RowProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
   /**
    * Set to `true` to render a custom HTML element
-   * Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)
+   * Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>)
    * @default false
    */
   as?: boolean;

types/Tabs/Tab.d.ts

@@ -3,7 +3,7 @@
 export interface TabProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
   /**
    * Specify the tab label
-   * Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>)
+   * Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)
    * @default ""
    */
   label?: string;

types/Tooltip/Tooltip.d.ts

@@ -21,7 +21,7 @@ export interface TooltipProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
 
   /**
    * Specify the icon from `carbon-icons-svelte` to render for the tooltip button
-   * Icon size must be 16px (e.g. `Add16`, `Task16`)
+   * Icon size must be 16px (e.g., `Add16`, `Task16`)
    */
   icon?: typeof import("carbon-icons-svelte").CarbonIcon;
 

types/UIShell/GlobalHeader/Header.d.ts

@@ -30,7 +30,7 @@ export interface HeaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNam
 
   /**
    * Specify the platform name
-   * Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>)
+   * Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>)
    * @default ""
    */
   platformName?: string;

types/UIShell/GlobalHeader/HeaderAction.d.ts

@@ -1,5 +1,11 @@
 /// <reference types="svelte" />
 
+export interface HeaderActionSlideTransition {
+  delay?: number;
+  duration?: number;
+  easing?: (t: number) => number;
+}
+
 export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
   /**
    * Set to `true` to open the panel
@@ -14,7 +20,7 @@ export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElement
 
   /**
    * Specify the text
-   * Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>)
+   * Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
    */
   text?: string;
 
@@ -23,6 +29,13 @@ export interface HeaderActionProps extends svelte.JSX.HTMLAttributes<HTMLElement
    * @default null
    */
   ref?: null | HTMLButtonElement;
+
+  /**
+   * Customize the panel transition (i.e., `transition:slide`)
+   * Set to `false` to disable the transition
+   * @default { duration: 200 }
+   */
+  transition?: false | HeaderActionSlideTransition;
 }
 
 export default class HeaderAction {