Merge 48b63b9246 into 0405edee7d

COMPONENT_INDEX.md

@@ -1613,7 +1613,7 @@ None.
 | Prop name                  | Required | Kind             | Reactive | Type                                                              | Default value                  | Description                                                                                                      |
 | :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
 | ref                        | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                        | <code>null</code>              | Obtain a reference to the button HTML element                                                                    |
-| isOpen                     | No       | <code>let</code> | Yes      | <code>boolean</code>                                              | <code>false</code>             | Set to `true` to open the panel                                                                                  |
+| open                       | No       | <code>let</code> | Yes      | <code>boolean</code>                                              | <code>false</code>             | Set to `true` to open the panel                                                                                  |
 | icon                       | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent<any></code>         | <code>undefined</code>         | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;`      |
 | closeIcon                  | No       | <code>let</code> | No       | <code>typeof import("svelte").SvelteComponent<any></code>         | <code>undefined</code>         | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;`           |
 | text                       | No       | <code>let</code> | No       | <code>string</code>                                               | <code>undefined</code>         | Specify the text.<br />Alternatively, use the named slot "text" (e.g., `&lt;div slot="text"&gt;...&lt;/div&gt;`) |
@@ -3310,7 +3310,7 @@ None.
 
 | Prop name           | Required | Kind             | Reactive | Type                 | Default value          | Description                                                                                                                                                                                                                                                                 |
 | :------------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| isOpen              | No       | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>     | Set to `true` to toggle the expanded state                                                                                                                                                                                                                                  |
+| open                | No       | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>     | Set to `true` to toggle the expanded state                                                                                                                                                                                                                                  |
 | fixed               | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to use the fixed variant                                                                                                                                                                                                                                      |
 | rail                | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to use the rail variant                                                                                                                                                                                                                                       |
 | ariaLabel           | No       | <code>let</code> | No       | <code>string</code>  | <code>undefined</code> | Specify the ARIA label for the nav                                                                                                                                                                                                                                          |

docs/src/COMPONENT_API.json

@@ -4897,7 +4897,7 @@
       "filePath": "src/UIShell/HeaderAction.svelte",
       "props": [
         {
-          "name": "isOpen",
+          "name": "open",
           "kind": "let",
           "description": "Set to `true` to open the panel",
           "type": "boolean",
@@ -10733,7 +10733,7 @@
           "reactive": false
         },
         {
-          "name": "isOpen",
+          "name": "open",
           "kind": "let",
           "description": "Set to `true` to toggle the expanded state",
           "type": "boolean",

docs/src/pages/_layout.svelte

@@ -46,7 +46,7 @@
   let active = false;
   $: results = miniSearch.search(value).slice(0, 10);
 
-  let isOpen = false;
+  let open = false;
   let isSideNavOpen = true;
   let innerWidth = 2048;
 
@@ -121,7 +121,7 @@
         href="https://github.com/carbon-design-system/carbon-components-svelte"
         target="_blank"
       />
-      <HeaderAction transition="{false}" bind:isOpen>
+      <HeaderAction transition="{false}" bind:open>
         <HeaderPanelLinks>
           <HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
           <HeaderPanelLink
@@ -156,7 +156,7 @@
     </HeaderUtilities>
   </Header>
 
-  <SideNav bind:isOpen="{isSideNavOpen}">
+  <SideNav bind:open="{isSideNavOpen}">
     <SideNavItems>
       {#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
         <SideNavMenuItem

docs/src/pages/framed/UIShell/HeaderNav.svelte

@@ -37,7 +37,7 @@
   </HeaderNav>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:open="{isSideNavOpen}">
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />

docs/src/pages/framed/UIShell/HeaderNavRail.svelte

@@ -38,7 +38,7 @@
   </HeaderNav>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}" rail>
+<SideNav bind:open="{isSideNavOpen}" rail>
   <SideNavItems>
     <SideNavLink icon="{Fade}" text="Link 1" href="/" isSelected />
     <SideNavLink icon="{Fade}" text="Link 2" href="/" />

docs/src/pages/framed/UIShell/HeaderSwitcher.svelte

@@ -22,7 +22,7 @@
   import { expoIn } from "svelte/easing";
 
   let isSideNavOpen = false;
-  let isOpen = false;
+  let open = false;
   let selected = "0";
   let transitions = {
     "0": {
@@ -45,7 +45,7 @@
     <SkipToContent />
   </svelte:fragment>
   <HeaderUtilities>
-    <HeaderAction bind:isOpen transition="{transitions[selected].value}">
+    <HeaderAction bind:open transition="{transitions[selected].value}">
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
         <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
@@ -60,7 +60,7 @@
   </HeaderUtilities>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:open="{isSideNavOpen}">
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />

docs/src/pages/framed/UIShell/HeaderUtilities.svelte

@@ -33,7 +33,7 @@
   <HeaderUtilities>
     <HeaderGlobalAction aria-label="Settings" icon="{SettingsAdjust}" />
     <HeaderAction
-      bind:isOpen="{isOpen1}"
+      bind:open="{isOpen1}"
       icon="{UserAvatarFilledAlt}"
       closeIcon="{UserAvatarFilledAlt}"
     >
@@ -50,7 +50,7 @@
         <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
       </HeaderPanelLinks>
     </HeaderAction>
-    <HeaderAction bind:isOpen="{isOpen2}">
+    <HeaderAction bind:open="{isOpen2}">
       <HeaderPanelLinks>
         <HeaderPanelDivider>Switcher subject 1</HeaderPanelDivider>
         <HeaderPanelLink>Switcher item 1</HeaderPanelLink>
@@ -65,7 +65,7 @@
   </HeaderUtilities>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:open="{isSideNavOpen}">
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />

docs/src/pages/framed/UIShell/PersistedHamburgerMenu.svelte

@@ -40,7 +40,7 @@
   </HeaderNav>
 </Header>
 
-<SideNav bind:isOpen="{isSideNavOpen}">
+<SideNav bind:open="{isSideNavOpen}">
   <SideNavItems>
     <SideNavLink text="Link 1" />
     <SideNavLink text="Link 2" />

src/UIShell/HamburgerMenu.svelte

@@ -6,7 +6,7 @@
   export let ariaLabel = undefined;
 
   /** Set to `true` to toggle the open state */
-  export let isOpen = false;
+  export let open = false;
 
   /**
    * Specify the icon to render for the closed state.
@@ -39,7 +39,7 @@
   class:bx--header__menu-toggle="{true}"
   {...$$restProps}
   on:click
-  on:click="{() => (isOpen = !isOpen)}"
+  on:click="{() => (open = !open)}"
 >
-  <svelte:component this="{isOpen ? iconClose : iconMenu}" size="{20}" />
+  <svelte:component this="{open ? iconClose : iconMenu}" size="{20}" />
 </button>

src/UIShell/Header.svelte

@@ -84,7 +84,7 @@
   <slot name="skip-to-content" />
   {#if ($shouldRenderHamburgerMenu && winWidth < expansionBreakpoint) || persistentHamburgerMenu}
     <HamburgerMenu
-      bind:isOpen="{isSideNavOpen}"
+      bind:open="{isSideNavOpen}"
       iconClose="{iconClose}"
       iconMenu="{iconMenu}"
     />

src/UIShell/HeaderAction.svelte

@@ -5,7 +5,7 @@
    */
 
   /** Set to `true` to open the panel */
-  export let isOpen = false;
+  export let open = false;
 
   /**
    * Specify the icon to render when the action panel is closed.
@@ -54,12 +54,12 @@
 <svelte:window
   on:click="{({ target }) => {
     if (
-      isOpen &&
+      open &&
       !ref.contains(target) &&
       !refPanel.contains(target) &&
       !preventCloseOnClickOutside
     ) {
-      isOpen = false;
+      open = false;
       dispatch('close');
     }
   }}"
@@ -69,16 +69,16 @@
   bind:this="{ref}"
   type="button"
   class:bx--header__action="{true}"
-  class:bx--header__action--active="{isOpen}"
+  class:bx--header__action--active="{open}"
   class:action-text="{text}"
   {...$$restProps}
   on:click
   on:click|stopPropagation="{() => {
-    isOpen = !isOpen;
+    open = !open;
-    dispatch(isOpen ? 'open' : 'close');
+    dispatch(open ? 'open' : 'close');
   }}"
 >
-  {#if isOpen}
+  {#if open}
     <slot name="closeIcon">
       <svelte:component this="{closeIcon}" size="{20}" />
     </slot>
@@ -91,7 +91,7 @@
     {#if text}<span>{text}</span>{/if}
   </slot>
 </button>
-{#if isOpen}
+{#if open}
   <div
     bind:this="{refPanel}"
     class:bx--header-panel="{true}"

src/UIShell/SideNav.svelte

@@ -18,7 +18,7 @@
   export let ariaLabel = undefined;
 
   /** Set to `true` to toggle the expanded state */
-  export let isOpen = false;
+  export let open = false;
 
   /**
    * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
@@ -42,8 +42,8 @@
 
   let winWidth = undefined;
 
-  $: dispatch(isOpen ? "open" : "close");
+  $: dispatch(open ? "open" : "close");
-  $: $isSideNavCollapsed = !isOpen;
+  $: $isSideNavCollapsed = !open;
   $: $isSideNavRail = rail;
 
   onMount(() => {
@@ -60,23 +60,23 @@
   <div
     on:click="{() => {
       dispatch('click:overlay');
-      isOpen = false;
+      open = false;
     }}"
     class:bx--side-nav__overlay="{true}"
-    class:bx--side-nav__overlay-active="{isOpen}"
+    class:bx--side-nav__overlay-active="{open}"
-    style:z-index="{isOpen ? 6000 : undefined}"
+    style:z-index="{open ? 6000 : undefined}"
   ></div>
 {/if}
 <nav
-  aria-hidden="{!isOpen}"
+  aria-hidden="{!open}"
   aria-label="{ariaLabel}"
   class:bx--side-nav__navigation="{true}"
   class:bx--side-nav="{true}"
   class:bx--side-nav--ux="{true}"
   class:bx--side-nav--expanded="{rail && winWidth >= expansionBreakpoint
     ? false
-    : isOpen}"
+    : open}"
-  class:bx--side-nav--collapsed="{!isOpen && !rail}"
+  class:bx--side-nav--collapsed="{!open && !rail}"
   class:bx--side-nav--rail="{rail}"
   {...$$restProps}
 >

types/UIShell/HeaderAction.svelte.d.ts

@@ -8,7 +8,7 @@ export interface HeaderActionProps extends RestProps {
    * Set to `true` to open the panel
    * @default false
    */
-  isOpen?: boolean;
+  open?: boolean;
 
   /**
    * Specify the icon to render when the action panel is closed.

types/UIShell/SideNav.svelte.d.ts

@@ -26,7 +26,7 @@ export interface SideNavProps extends RestProps {
    * Set to `true` to toggle the expanded state
    * @default false
    */
-  isOpen?: boolean;
+  open?: boolean;
 
   /**
    * The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.