chore(deps-dev): upgrade prettier-plugin-svelte (#498)

2025-09-15 18:31:06 +00:00 · 2021-01-27 15:02:02 -08:00 · 2021-01-27 15:02:02 -08:00 · 3d002f3246
commit 3d002f3246
parent 3e7511e3f8
72 changed files with 944 additions and 733 deletions
--- a/src/Breadcrumb/BreadcrumbItem.svelte
+++ b/src/Breadcrumb/BreadcrumbItem.svelte
@ -17,7 +17,8 @@

 <li
  class:bx--breadcrumb-item="{true}"
-  class:bx--breadcrumb-item--current="{isCurrentPage && $$restProps['aria-current'] !== 'page'}"
+  class:bx--breadcrumb-item--current="{isCurrentPage &&
+    $$restProps['aria-current'] !== 'page'}"
  {...$$restProps}
  on:click
  on:mouseover
@ -30,7 +31,10 @@
    </Link>
  {:else}
    <slot
-      props="{{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }}"
+      props="{{
+        'aria-current': $$restProps['aria-current'],
+        class: 'bx--link',
+      }}"
    />
  {/if}
 </li>
--- a/src/Button/ButtonSkeleton.svelte
+++ b/src/Button/ButtonSkeleton.svelte
@ -33,7 +33,7 @@
    on:mouseenter
    on:mouseleave
  >
-    {''}
+    {""}
  </a>
 {:else}
  <div
--- a/src/Checkbox/CheckboxSkeleton.svelte
+++ b/src/Checkbox/CheckboxSkeleton.svelte
@ -8,8 +8,6 @@
  on:mouseenter
  on:mouseleave
 >
-  <span
-    class:bx--checkbox-label-text="{true}"
-    class:bx--skeleton="{true}"
+  <span class:bx--checkbox-label-text="{true}" class:bx--skeleton="{true}"
  ></span>
 </div>
--- a/src/Checkbox/InlineCheckbox.svelte
+++ b/src/Checkbox/InlineCheckbox.svelte
@ -34,5 +34,4 @@
  for="{id}"
  title="{title}"
  aria-label="{$$props['aria-label']}"
-  class:bx--checkbox-label="{true}"
-></label>
+  class:bx--checkbox-label="{true}"></label>
--- a/src/CodeSnippet/CodeSnippet.svelte
+++ b/src/CodeSnippet/CodeSnippet.svelte
@ -104,7 +104,7 @@
    on:mouseleave
  />
 {:else}
-  {#if type === 'inline'}
+  {#if type === "inline"}
    {#if hideCopyButton}
      <span
        class:bx--snippet="{true}"
@ -128,11 +128,16 @@
        feedback="{feedback}"
        feedbackTimeout="{feedbackTimeout}"
        class="bx--snippet {type && `bx--snippet--${type}`}
-          {type === 'inline' && 'bx--btn--copy'}
-          {expanded && 'bx--snippet--expand'}
-          {light && 'bx--snippet--light'}
-          {hideCopyButton && 'bx--snippet--no-copy'}
-          {wrapText && 'bx--snippet--wraptext'}"
+          {type ===
+          'inline' && 'bx--btn--copy'}
+          {expanded &&
+          'bx--snippet--expand'}
+          {light &&
+          'bx--snippet--light'}
+          {hideCopyButton &&
+          'bx--snippet--no-copy'}
+          {wrapText &&
+          'bx--snippet--wraptext'}"
        {...$$restProps}
        on:click
        on:mouseover
--- a/src/CodeSnippet/CodeSnippetSkeleton.svelte
+++ b/src/CodeSnippet/CodeSnippetSkeleton.svelte
@ -18,8 +18,8 @@
  on:mouseleave
 >
  <div class:bx--snippet-container="{true}">
-    {#if type === 'single'}
+    {#if type === "single"}
      <span></span>
-    {:else if type === 'multi'}<span></span> <span></span> <span></span>{/if}
+    {:else if type === "multi"}<span></span> <span></span> <span></span>{/if}
  </div>
 </div>
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@ -221,7 +221,10 @@
        on:blur
        on:blur="{({ relatedTarget }) => {
          if (!open || !relatedTarget) return;
-          if (relatedTarget.getAttribute('role') !== 'button' && relatedTarget.getAttribute('role') !== 'searchbox') {
+          if (
+            relatedTarget.getAttribute('role') !== 'button' &&
+            relatedTarget.getAttribute('role') !== 'searchbox'
+          ) {
            ref.focus();
          }
        }}"
--- a/src/Copy/Copy.svelte
+++ b/src/Copy/Copy.svelte
@ -45,7 +45,7 @@
  }}"
 >
  <slot>
-    {#if animation}{feedback || $$restProps['aria-label']}{/if}
+    {#if animation}{feedback || $$restProps["aria-label"]}{/if}
  </slot>
  <span
    aria-hidden="true"
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@ -252,7 +252,9 @@
              on:click="{() => {
                dispatch('click', { header });
                let active = header.key === $sortHeader.key;
-                let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
+                let currentSortDirection = active
+                  ? $sortHeader.sortDirection
+                  : 'none';
                let sortDirection = sortDirectionMap[currentSortDirection];
                dispatch('click:header', { header, sortDirection });
                sortHeader.set({
@ -273,7 +275,13 @@
      {#each sorting ? sortedRows : rows as row, i (row.id)}
        <TableRow
          id="row-{row.id}"
-          class="{selectedRowIds.includes(row.id) ? 'bx--data-table--selected' : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable ? 'bx--parent-row' : ''} {expandable && parentRowId === row.id ? 'bx--expandable-row--hover' : ''}"
+          class="{selectedRowIds.includes(row.id)
+            ? 'bx--data-table--selected'
+            : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable
+            ? 'bx--parent-row'
+            : ''} {expandable && parentRowId === row.id
+            ? 'bx--expandable-row--hover'
+            : ''}"
          on:click="{() => {
            dispatch('click', { row });
            dispatch('click:row', row);
@ -289,16 +297,22 @@
            <TableCell
              class="bx--table-expand"
              headers="expand"
-              data-previous-value="{expandedRows[row.id] ? 'collapsed' : undefined}"
+              data-previous-value="{expandedRows[row.id]
+                ? 'collapsed'
+                : undefined}"
            >
              <button
                type="button"
                class:bx--table-expand__button="{true}"
-                aria-label="{expandedRows[row.id] ? 'Collapse current row' : 'Expand current row'}"
+                aria-label="{expandedRows[row.id]
+                  ? 'Collapse current row'
+                  : 'Expand current row'}"
                on:click="{() => {
                  const rowExpanded = !!expandedRows[row.id];

-                  expandedRowIds = rowExpanded ? expandedRowIds.filter((id) => id !== row.id) : [...expandedRowIds, row.id];
+                  expandedRowIds = rowExpanded
+                    ? expandedRowIds.filter((id) => id !== row.id)
+                    : [...expandedRowIds, row.id];

                  dispatch('click:row--expand', {
                    row,
@ -329,7 +343,9 @@
                  checked="{selectedRowIds.includes(row.id)}"
                  on:change="{() => {
                    if (selectedRowIds.includes(row.id)) {
-                      selectedRowIds = selectedRowIds.filter((id) => id !== row.id);
+                      selectedRowIds = selectedRowIds.filter(
+                        (id) => id !== row.id
+                      );
                    } else {
                      selectedRowIds = [...selectedRowIds, row.id];
                    }
@ -342,7 +358,9 @@
            {#if headers[j].empty}
              <td class:bx--table-column-menu="{headers[j].columnMenu}">
                <slot name="cell" row="{row}" cell="{cell}">
-                  {headers[j].display ? headers[j].display(cell.value) : cell.value}
+                  {headers[j].display
+                    ? headers[j].display(cell.value)
+                    : cell.value}
                </slot>
              </td>
            {:else}
@ -353,7 +371,9 @@
                }}"
              >
                <slot name="cell" row="{row}" cell="{cell}">
-                  {headers[j].display ? headers[j].display(cell.value) : cell.value}
+                  {headers[j].display
+                    ? headers[j].display(cell.value)
+                    : cell.value}
                </slot>
              </TableCell>
            {/if}
--- a/src/DataTable/DataTableSkeleton.svelte
+++ b/src/DataTable/DataTableSkeleton.svelte
@ -58,8 +58,7 @@
        <span
          class:bx--skeleton="{true}"
          class:bx--btn="{true}"
-          class:bx--btn--sm="{true}"
-        ></span>
+          class:bx--btn--sm="{true}"></span>
      </div>
    </section>
  {/if}
@ -78,7 +77,7 @@
    <thead>
      <tr>
        {#each cols as col (col)}
-          <th>{values[col] || ''}</th>
+          <th>{values[col] || ""}</th>
        {/each}
      </tr>
    </thead>
--- a/src/DataTable/TableHeader.svelte
+++ b/src/DataTable/TableHeader.svelte
@ -37,7 +37,8 @@
    <button
      class:bx--table-sort="{true}"
      class:bx--table-sort--active="{active}"
-      class:bx--table-sort--ascending="{active && $sortHeader.sortDirection === 'descending'}"
+      class:bx--table-sort--ascending="{active &&
+        $sortHeader.sortDirection === 'descending'}"
      on:click
    >
      <div class:bx--table-header-label="{true}">
--- a/src/DatePicker/DatePicker.svelte
+++ b/src/DatePicker/DatePicker.svelte
@ -188,8 +188,11 @@
    class:bx--date-picker="{true}"
    class:bx--date-picker--short="{short}"
    class:bx--date-picker--light="{light}"
-    class="{datePickerType && `bx--date-picker--${datePickerType}`}
-      {datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}"
+    class="{datePickerType &&
+      `bx--date-picker--${datePickerType}`}
+      {datePickerType === 'range' &&
+      $labelTextEmpty &&
+      'bx--date-picker--nolabel'}"
  >
    <slot />
  </div>
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@ -155,11 +155,17 @@
    id="{id}"
    name="{name}"
    aria-label="{$$props['aria-label']}"
-    class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid && warn && 'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
-      {size === 'sm' && 'bx--dropdown--sm'}
-      {size === 'xl' && 'bx--dropdown--xl'}
-      {inline && 'bx--dropdown--inline'}
-      {disabled && 'bx--dropdown--disabled'}
+    class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid &&
+      warn &&
+      'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
+      {size ===
+      'sm' && 'bx--dropdown--sm'}
+      {size === 'xl' &&
+      'bx--dropdown--xl'}
+      {inline &&
+      'bx--dropdown--inline'}
+      {disabled &&
+      'bx--dropdown--disabled'}
      {light && 'bx--dropdown--light'}"
    on:click="{({ target }) => {
      open = ref.contains(target) ? !open : false;
--- a/src/FileUploader/Filename.svelte
+++ b/src/FileUploader/Filename.svelte
@ -17,7 +17,7 @@
  import { Loading } from "../Loading";
 </script>

-{#if status === 'uploading'}
+{#if status === "uploading"}
  <Loading
    description="{iconDescription}"
    {...$$restProps}
@ -26,7 +26,7 @@
  />
 {/if}

-{#if status === 'edit'}
+{#if status === "edit"}
  {#if invalid}
    <WarningFilled16 class="bx--file-invalid" />
  {/if}
@ -40,7 +40,7 @@
  />
 {/if}

-{#if status === 'complete'}
+{#if status === "complete"}
  <CheckmarkFilled16
    aria-label="{iconDescription}"
    title="{iconDescription}"
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/src/InlineLoading/InlineLoading.svelte
@ -54,11 +54,11 @@
  on:mouseleave
 >
  <div class:bx--inline-loading__animation="{true}">
-    {#if status === 'error'}
+    {#if status === "error"}
      <Error20 class="bx--inline-loading--error" />
-    {:else if status === 'finished'}
+    {:else if status === "finished"}
      <CheckmarkFilled16 class="bx--inline-loading__checkmark-container" />
-    {:else if status === 'inactive' || status === 'active'}
+    {:else if status === "inactive" || status === "active"}
      <Loading
        small
        description="{iconDescription}"
--- a/src/ListBox/ListBoxField.svelte
+++ b/src/ListBox/ListBoxField.svelte
@ -50,7 +50,9 @@
  aria-owns="{(ariaExpanded && menuId) || undefined}"
  aria-controls="{(ariaExpanded && menuId) || undefined}"
  aria-disabled="{disabled}"
-  aria-label="{ariaExpanded ? translateWithId('close') : translateWithId('open')}"
+  aria-label="{ariaExpanded
+    ? translateWithId('close')
+    : translateWithId('open')}"
  tabindex="{disabled ? '-1' : tabindex}"
  class:bx--list-box__field="{true}"
  {...$$restProps}
--- a/src/Loading/Loading.svelte
+++ b/src/Loading/Loading.svelte
@ -40,15 +40,13 @@
            class:bx--loading__background="{true}"
            cx="50%"
            cy="50%"
-            r="{spinnerRadius}"
-          ></circle>
+            r="{spinnerRadius}"></circle>
        {/if}
        <circle
          class:bx--loading__stroke="{true}"
          cx="50%"
          cy="50%"
-          r="{spinnerRadius}"
-        ></circle>
+          r="{spinnerRadius}"></circle>
      </svg>
    </div>
  </div>
@ -71,15 +69,13 @@
          class:bx--loading__background="{true}"
          cx="50%"
          cy="50%"
-          r="{spinnerRadius}"
-        ></circle>
+          r="{spinnerRadius}"></circle>
      {/if}
      <circle
        class:bx--loading__stroke="{true}"
        cx="50%"
        cy="50%"
-        r="{spinnerRadius}"
-      ></circle>
+        r="{spinnerRadius}"></circle>
    </svg>
  </div>
 {/if}
--- a/src/MultiSelect/MultiSelect.svelte
+++ b/src/MultiSelect/MultiSelect.svelte
@ -253,10 +253,14 @@
    warn="{warn}"
    warnText="{warnText}"
    class="bx--multi-select {filterable && 'bx--combo-box'}
-      {filterable && 'bx--multi-select--filterable'}
-      {invalid && 'bx--multi-select--invalid'}
-      {inline && 'bx--multi-select--inline'}
-      {checked.length > 0 && 'bx--multi-select--selected'}"
+      {filterable &&
+      'bx--multi-select--filterable'}
+      {invalid &&
+      'bx--multi-select--invalid'}
+      {inline &&
+      'bx--multi-select--inline'}
+      {checked.length > 0 &&
+      'bx--multi-select--selected'}"
  >
    {#if invalid}
      <WarningFilled16 class="bx--list-box__invalid-icon" />
@ -298,7 +302,9 @@
          change(-1);
        } else if (key === 'Enter') {
          if (highlightedIndex > -1) {
-            sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
+            sortedItems[highlightedIndex].checked = !sortedItems[
+              highlightedIndex
+            ].checked;
          }
        }
      }}"
@ -347,7 +353,9 @@
          on:keydown|stopPropagation="{({ key }) => {
            if (key === 'Enter') {
              if (highlightedIndex > -1) {
-                sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
+                sortedItems[highlightedIndex].checked = !sortedItems[
+                  highlightedIndex
+                ].checked;
              }
            } else if (key === 'Tab') {
              open = false;
@ -360,7 +368,10 @@
          on:focus
          on:blur
          on:blur="{({ relatedTarget }) => {
-            if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
+            if (
+              relatedTarget &&
+              relatedTarget.getAttribute('role') !== 'button'
+            ) {
              inputRef.focus();
            }
          }}"
--- a/src/Notification/NotificationTextDetails.svelte
+++ b/src/Notification/NotificationTextDetails.svelte
@ -15,7 +15,7 @@
  export let caption = "Caption";
 </script>

-{#if notificationType === 'toast'}
+{#if notificationType === "toast"}
  <div class:bx--toast-notification__details="{true}">
    <h3 class:bx--toast-notification__title="{true}">{title}</h3>
    <div class:bx--toast-notification__subtitle="{true}">{subtitle}</div>
@ -24,7 +24,7 @@
  </div>
 {/if}

-{#if notificationType === 'inline'}
+{#if notificationType === "inline"}
  <div class:bx--inline-notification__text-wrapper="{true}">
    <p class:bx--inline-notification__title="{true}">{title}</p>
    <div class:bx--inline-notification__subtitle="{true}">{subtitle}</div>
--- a/src/Pagination/Pagination.svelte
+++ b/src/Pagination/Pagination.svelte
@ -121,7 +121,11 @@
      {#if pagesUnknown}
        {itemText(pageSize * (page - 1) + 1, page * pageSize)}
      {:else}
-        {itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems)}
+        {itemRangeText(
+          Math.min(pageSize * (page - 1) + 1, totalItems),
+          Math.min(page * pageSize, totalItems),
+          totalItems
+        )}
      {/if}
    </span>
  </div>
@ -153,7 +157,9 @@
      icon="{CaretLeft16}"
      iconDescription="{backwardText}"
      disabled="{backButtonDisabled}"
-      class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled ? 'bx--pagination__button--no-index' : ''}"
+      class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
+        ? 'bx--pagination__button--no-index'
+        : ''}"
      on:click="{() => {
        page--;
      }}"
@ -166,7 +172,9 @@
      icon="{CaretRight16}"
      iconDescription="{forwardText}"
      disabled="{forwardButtonDisabled}"
-      class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled ? 'bx--pagination__button--no-index' : ''}"
+      class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled
+        ? 'bx--pagination__button--no-index'
+        : ''}"
      on:click="{() => {
        page++;
      }}"
--- a/src/PaginationNav/PaginationNav.svelte
+++ b/src/PaginationNav/PaginationNav.svelte
@ -94,7 +94,7 @@
        active="{page === 0}"
        on:click="{() => (page = 0)}"
      >
-        {page === 0 ? 'Active, Page' : 'Page'}
+        {page === 0 ? "Active, Page" : "Page"}
      </PaginationItem>
    {/if}
    <PaginationOverflow
@ -108,7 +108,7 @@
        active="{page === item}"
        on:click="{() => (page = item)}"
      >
-        {page === item ? 'Active, Page' : 'Page'}
+        {page === item ? "Active, Page" : "Page"}
      </PaginationItem>
    {/each}
    <PaginationOverflow
@ -124,7 +124,7 @@
        active="{page === total - 1}"
        on:click="{() => (page = total - 1)}"
      >
-        {page === total - 1 ? 'Active, Page' : 'Page'}
+        {page === total - 1 ? "Active, Page" : "Page"}
      </PaginationItem>
    {/if}
    <li class:bx--pagination-nav__list-item="{true}">
--- a/src/RadioButton/RadioButtonSkeleton.svelte
+++ b/src/RadioButton/RadioButtonSkeleton.svelte
@ -7,8 +7,6 @@
  on:mouseleave
 >
  <div class:bx--radio-button="{true}" class:bx--skeleton="{true}"></div>
-  <span
-    class:bx--radio-button__label="{true}"
-    class:bx--skeleton="{true}"
+  <span class:bx--radio-button__label="{true}" class:bx--skeleton="{true}"
  ></span>
 </div>
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@ -151,9 +151,15 @@
      on:mousedown="{startHolding}"
      on:touchstart="{startHolding}"
      on:keydown="{({ shiftKey, key }) => {
-        const keys = { ArrowDown: -1, ArrowLeft: -1, ArrowRight: 1, ArrowUp: 1 };
+        const keys = {
+          ArrowDown: -1,
+          ArrowLeft: -1,
+          ArrowRight: 1,
+          ArrowUp: 1,
+        };
        if (keys[key]) {
-          value += step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
+          value +=
+            step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
        }
      }}"
    >
--- a/src/Tag/TagSkeleton.svelte
+++ b/src/Tag/TagSkeleton.svelte
@ -5,5 +5,4 @@
  on:click
  on:mouseover
  on:mouseenter
-  on:mouseleave
-></span>
+  on:mouseleave></span>
--- a/src/TextArea/TextArea.svelte
+++ b/src/TextArea/TextArea.svelte
@ -94,8 +94,7 @@
        value = target.value;
      }}"
      on:focus
-      on:blur
-    ></textarea>
+      on:blur></textarea>
  </div>
  {#if !invalid && helperText}
    <div
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@ -143,20 +143,22 @@
      class:bx--btn--disabled="{disabled}"
      class:bx--tooltip__trigger="{true}"
      class:bx--tooltip--a11y="{true}"
-      class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
-        {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
+      class="{tooltipPosition &&
+        `bx--tooltip--${tooltipPosition}`}
+        {tooltipAlignment &&
+        `bx--tooltip--align-${tooltipAlignment}`}"
      on:click="{() => {
        type = type === 'password' ? 'text' : 'password';
      }}"
    >
      {#if !disabled}
        <span class:bx--assistive-text="{true}">
-          {#if type === 'text'}
+          {#if type === "text"}
            {hidePasswordLabel}
          {:else}{showPasswordLabel}{/if}
        </span>
      {/if}
-      {#if type === 'text'}
+      {#if type === "text"}
        <ViewOff16 class="bx--icon-visibility-off" />
      {:else}
        <View16 class="bx--icon-visibility-on" />
--- a/src/Tile/ExpandableTile.svelte
+++ b/src/Tile/ExpandableTile.svelte
@ -63,7 +63,9 @@
  class:bx--tile--is-expanded="{expanded}"
  class:bx--tile--light="{light}"
  {...$$restProps}
-  style="{expanded ? $$restProps.style : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}"
+  style="{expanded
+    ? $$restProps.style
+    : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}"
  on:click
  on:click="{() => {
    expanded = !expanded;
--- a/src/Toggle/Toggle.svelte
+++ b/src/Toggle/Toggle.svelte
@ -70,10 +70,9 @@
      <span aria-hidden="true" class:bx--toggle__text--off="{true}">
        {labelA}
      </span>
-      <span
-        aria-hidden="true"
-        class:bx--toggle__text--on="{true}"
-      >{labelB}</span>
+      <span aria-hidden="true" class:bx--toggle__text--on="{true}"
+        >{labelB}</span
+      >
    </span>
  </label>
 </div>
--- a/src/Toggle/ToggleSkeleton.svelte
+++ b/src/Toggle/ToggleSkeleton.svelte
@ -28,7 +28,9 @@
    class:bx--skeleton="{true}"
  />
  <label
-    aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}"
+    aria-label="{labelText
+      ? undefined
+      : $$props['aria-label'] || 'Toggle is loading'}"
    for="{id}"
    class:bx--toggle__label="{true}"
    class:bx--skeleton="{true}"
--- a/src/ToggleSmall/ToggleSmall.svelte
+++ b/src/ToggleSmall/ToggleSmall.svelte
@ -78,10 +78,9 @@
      <span aria-hidden="true" class:bx--toggle__text--off="{true}">
        {labelA}
      </span>
-      <span
-        aria-hidden="true"
-        class:bx--toggle__text--on="{true}"
-      >{labelB}</span>
+      <span aria-hidden="true" class:bx--toggle__text--on="{true}"
+        >{labelB}</span
+      >
    </span>
  </label>
 </div>
--- a/src/ToggleSmall/ToggleSmallSkeleton.svelte
+++ b/src/ToggleSmall/ToggleSmallSkeleton.svelte
@ -28,7 +28,9 @@
    class:bx--skeleton="{true}"
  />
  <label
-    aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}"
+    aria-label="{labelText
+      ? undefined
+      : $$props['aria-label'] || 'Toggle is loading'}"
    class:bx--toggle__label="{true}"
    class:bx--skeleton="{true}"
    for="{id}"
--- a/src/UIShell/GlobalHeader/HeaderAction.svelte
+++ b/src/UIShell/GlobalHeader/HeaderAction.svelte
@ -40,22 +40,6 @@
  let refPanel = null;
 </script>

-<style>
-  .action-text {
-    font-size: 16px;
-    line-height: 20px;
-    text-decoration: none;
-    color: #fff;
-    width: 100%;
-    padding: 0 1rem;
-  }
-
-  .action-text > span {
-    margin-left: 0.75rem;
-    vertical-align: top;
-  }
-</style>
-
 <svelte:window
  on:click="{({ target }) => {
    if (isOpen && !ref.contains(target) && !refPanel.contains(target)) {
@ -89,9 +73,28 @@
      bind:this="{refPanel}"
      class:bx--header-panel="{true}"
      class:bx--header-panel--expanded="{true}"
-      transition:slide="{{ ...transition, duration: transition === false ? 0 : transition.duration }}"
+      transition:slide="{{
+        ...transition,
+        duration: transition === false ? 0 : transition.duration,
+      }}"
    >
      <slot />
    </div>
  {/if}
 </div>
+
+<style>
+  .action-text {
+    font-size: 16px;
+    line-height: 20px;
+    text-decoration: none;
+    color: #fff;
+    width: 100%;
+    padding: 0 1rem;
+  }
+
+  .action-text > span {
+    margin-left: 0.75rem;
+    vertical-align: top;
+  }
+</style>
--- a/src/UIShell/GlobalHeader/HeaderActionLink.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionLink.svelte
@ -20,16 +20,6 @@
  import Icon from "../../Icon/Icon.svelte";
 </script>

-<style>
-  .action-link {
-    text-align: center;
-    align-items: center;
-    vertical-align: middle;
-    justify-content: center;
-    padding-top: 10px;
-  }
-</style>
-
 <a
  bind:this="{ref}"
  class:bx--header__action="{true}"
@ -41,3 +31,13 @@
 >
  <Icon render="{icon}" />
 </a>
+
+<style>
+  .action-link {
+    text-align: center;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    padding-top: 10px;
+  }
+</style>
--- a/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
+++ b/src/UIShell/GlobalHeader/HeaderActionSearch.svelte
@ -54,6 +54,87 @@
  $: showResults = $searchStore ? true : false;
 </script>

+<svelte:window
+  on:mouseup="{({ target }) => {
+    if (target && elTypeSearch) {
+      if (!elTypeSearch.contains(target)) {
+        searchIsActive = false;
+        isSearchFocus = false;
+      }
+    }
+  }}"
+/>
+
+<div
+  bind:this="{elTypeSearch}"
+  role="search"
+  class="search-wrapper"
+  class:search-wrapper-hidden="{!searchIsActive}"
+  class:search-focus="{isSearchFocus || searchIsActive}"
+>
+  <div
+    id="right-panel-action-search"
+    class="search-wrapper-2"
+    role="combobox"
+    aria-expanded="{searchIsActive}"
+  >
+    <button
+      tabindex="{searchTabIndex}"
+      aria-label="Search"
+      class:bx--header__action="{true}"
+      class:btn-search="{true}"
+      class:btn-search-disabled="{searchIsActive}"
+      on:click="{() => {
+        isSearchFocus = true;
+        searchIsActive = true;
+        dispatch('focusInputSearch');
+      }}"
+      type="button"
+      on:keydown="{({ key }) => {
+        if (key === 'Enter') {
+          searchIsActive = !searchIsActive;
+        }
+      }}"
+    >
+      <Icon title="Search" tabindex="0" render="{Search20}" />
+    </button>
+    <input
+      bind:this="{elInput}"
+      id="input-search-field"
+      type="text"
+      autocomplete="off"
+      tabindex="{closeTabIndex}"
+      class="input-search"
+      class:input-hidden="{!searchIsActive}"
+      placeholder="Search"
+      on:focus="{() => dispatch('focusInputSearch')}"
+      on:focusout="{() => dispatch('focusOutInputSearch')}"
+      on:input="{dispatchInputs}"
+    />
+    <button
+      id="right-panel-close-search"
+      tabindex="{closeTabIndex}"
+      class:bx--header__action="{true}"
+      class:btn-clear="{true}"
+      class:btn-clear-hidden="{!searchIsActive}"
+      type="button"
+      aria-label="Clear search"
+      on:click="{() => {
+        isSearchFocus = false;
+        searchIsActive = false;
+        searchStore.clear();
+      }}"
+      on:keydown="{({ key }) => {
+        if (key === 'Enter') {
+          searchIsActive = !searchIsActive;
+        }
+      }}"
+    >
+      <Icon title="Close" tabindex="0" render="{Close20}" />
+    </button>
+  </div>
+</div>
+
 <style>
  .search-wrapper {
    position: relative;
@ -140,84 +221,3 @@
    display: none;
  }
 </style>
-
-<svelte:window
-  on:mouseup="{({ target }) => {
-    if (target && elTypeSearch) {
-      if (!elTypeSearch.contains(target)) {
-        searchIsActive = false;
-        isSearchFocus = false;
-      }
-    }
-  }}"
-/>
-
-<div
-  bind:this="{elTypeSearch}"
-  role="search"
-  class="search-wrapper"
-  class:search-wrapper-hidden="{!searchIsActive}"
-  class:search-focus="{isSearchFocus || searchIsActive}"
->
-  <div
-    id="right-panel-action-search"
-    class="search-wrapper-2"
-    role="combobox"
-    aria-expanded="{searchIsActive}"
-  >
-    <button
-      tabindex="{searchTabIndex}"
-      aria-label="Search"
-      class:bx--header__action="{true}"
-      class:btn-search="{true}"
-      class:btn-search-disabled="{searchIsActive}"
-      on:click="{() => {
-        isSearchFocus = true;
-        searchIsActive = true;
-        dispatch('focusInputSearch');
-      }}"
-      type="button"
-      on:keydown="{({ key }) => {
-        if (key === 'Enter') {
-          searchIsActive = !searchIsActive;
-        }
-      }}"
-    >
-      <Icon title="Search" tabindex="0" render="{Search20}" />
-    </button>
-    <input
-      bind:this="{elInput}"
-      id="input-search-field"
-      type="text"
-      autocomplete="off"
-      tabindex="{closeTabIndex}"
-      class="input-search"
-      class:input-hidden="{!searchIsActive}"
-      placeholder="Search"
-      on:focus="{() => dispatch('focusInputSearch')}"
-      on:focusout="{() => dispatch('focusOutInputSearch')}"
-      on:input="{dispatchInputs}"
-    />
-    <button
-      id="right-panel-close-search"
-      tabindex="{closeTabIndex}"
-      class:bx--header__action="{true}"
-      class:btn-clear="{true}"
-      class:btn-clear-hidden="{!searchIsActive}"
-      type="button"
-      aria-label="Clear search"
-      on:click="{() => {
-        isSearchFocus = false;
-        searchIsActive = false;
-        searchStore.clear();
-      }}"
-      on:keydown="{({ key }) => {
-        if (key === 'Enter') {
-          searchIsActive = !searchIsActive;
-        }
-      }}"
-    >
-      <Icon title="Close" tabindex="0" render="{Close20}" />
-    </button>
-  </div>
-</div>
--- a/src/UIShell/GlobalHeader/HeaderPanelDivider.svelte
+++ b/src/UIShell/GlobalHeader/HeaderPanelDivider.svelte
@ -1,3 +1,9 @@
+<li class="subject-divider">
+  <span>
+    <slot />
+  </span>
+</li>
+
 <style>
  .subject-divider {
    color: #525252;
@ -14,9 +20,3 @@
    color: #c6c6c6;
  }
 </style>
-
-<li class="subject-divider">
-  <span>
-    <slot />
-  </span>
-</li>
--- a/src/UIShell/HeaderSearch.svelte
+++ b/src/UIShell/HeaderSearch.svelte
@ -53,6 +53,109 @@
    : undefined;
 </script>

+<svelte:window
+  on:mouseup="{({ target }) => {
+    if (active && !refSearch.contains(target)) active = false;
+  }}"
+/>
+
+<div bind:this="{refSearch}" role="search" class:active>
+  <label for="search-input" id="search-label">Search</label>
+  <div role="combobox" aria-expanded="{active}">
+    <button
+      type="button"
+      aria-label="Search"
+      tabindex="{active ? '-1' : '0'}"
+      class:bx--header__action="{true}"
+      class:disabled="{active}"
+      on:click="{() => {
+        active = true;
+      }}"
+    >
+      <Search20 title="Search" />
+    </button>
+    <input
+      bind:this="{ref}"
+      type="text"
+      autocomplete="off"
+      placeholder="Search..."
+      tabindex="{active ? '0' : '-1'}"
+      class:active
+      {...$$restProps}
+      id="search-input"
+      aria-activedescendant="{selectedId}"
+      bind:value
+      on:change
+      on:input
+      on:focus
+      on:blur
+      on:keydown
+      on:keydown="{(e) => {
+        switch (e.key) {
+          case 'Enter':
+            selectResult();
+            break;
+          case 'ArrowDown':
+            e.preventDefault();
+            if (selectedResultIndex === results.length - 1) {
+              selectedResultIndex = 0;
+            } else {
+              selectedResultIndex += 1;
+            }
+            break;
+          case 'ArrowUp':
+            e.preventDefault();
+            if (selectedResultIndex === 0) {
+              selectedResultIndex = results.length - 1;
+            } else {
+              selectedResultIndex -= 1;
+            }
+            break;
+        }
+      }}"
+    />
+    <button
+      type="button"
+      aria-label="Clear search"
+      tabindex="{active ? '0' : '-1'}"
+      class:bx--header__action="{true}"
+      class:hidden="{!active}"
+      on:click="{() => {
+        reset();
+        dispatch('clear');
+      }}"
+    >
+      <Close20 title="Close" />
+    </button>
+  </div>
+
+  {#if active && results.length > 0}
+    <ul aria-labelledby="search-label" role="menu" id="search-menu">
+      {#each results as result, i}
+        <li>
+          <a
+            tabindex="-1"
+            id="search-menuitem-{i}"
+            role="menuitem"
+            href="{result.href}"
+            class:selected="{selectedId === `search-menuitem-${i}`}"
+            on:click|preventDefault="{async () => {
+              selectedResultIndex = i;
+              await tick();
+              selectResult();
+            }}"
+          >
+            <slot result="{result}" index="{i}">
+              {result.text}
+              {#if result.description}<span>– {result.description}</span>{/if}
+            </slot>
+          </a>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
 <style>
  label {
    position: absolute;
@ -185,106 +288,3 @@
    color: #c6c6c6;
  }
 </style>
-
-<svelte:window
-  on:mouseup="{({ target }) => {
-    if (active && !refSearch.contains(target)) active = false;
-  }}"
-/>
-
-<div bind:this="{refSearch}" role="search" class:active>
-  <label for="search-input" id="search-label">Search</label>
-  <div role="combobox" aria-expanded="{active}">
-    <button
-      type="button"
-      aria-label="Search"
-      tabindex="{active ? '-1' : '0'}"
-      class:bx--header__action="{true}"
-      class:disabled="{active}"
-      on:click="{() => {
-        active = true;
-      }}"
-    >
-      <Search20 title="Search" />
-    </button>
-    <input
-      bind:this="{ref}"
-      type="text"
-      autocomplete="off"
-      placeholder="Search..."
-      tabindex="{active ? '0' : '-1'}"
-      class:active
-      {...$$restProps}
-      id="search-input"
-      aria-activedescendant="{selectedId}"
-      bind:value
-      on:change
-      on:input
-      on:focus
-      on:blur
-      on:keydown
-      on:keydown="{(e) => {
-        switch (e.key) {
-          case 'Enter':
-            selectResult();
-            break;
-          case 'ArrowDown':
-            e.preventDefault();
-            if (selectedResultIndex === results.length - 1) {
-              selectedResultIndex = 0;
-            } else {
-              selectedResultIndex += 1;
-            }
-            break;
-          case 'ArrowUp':
-            e.preventDefault();
-            if (selectedResultIndex === 0) {
-              selectedResultIndex = results.length - 1;
-            } else {
-              selectedResultIndex -= 1;
-            }
-            break;
-        }
-      }}"
-    />
-    <button
-      type="button"
-      aria-label="Clear search"
-      tabindex="{active ? '0' : '-1'}"
-      class:bx--header__action="{true}"
-      class:hidden="{!active}"
-      on:click="{() => {
-        reset();
-        dispatch('clear');
-      }}"
-    >
-      <Close20 title="Close" />
-    </button>
-  </div>
-
-  {#if active && results.length > 0}
-    <ul aria-labelledby="search-label" role="menu" id="search-menu">
-      {#each results as result, i}
-        <li>
-          <a
-            tabindex="-1"
-            id="search-menuitem-{i}"
-            role="menuitem"
-            href="{result.href}"
-            class:selected="{selectedId === `search-menuitem-${i}`}"
-            on:click|preventDefault="{async () => {
-              selectedResultIndex = i;
-              await tick();
-              selectResult();
-            }}"
-          >
-            <slot result="{result}" index="{i}">
-              {result.text}
-              {#if result.description}<span>– {result.description}</span>{/if}
-            </slot>
-          </a>
-        </li>
-      {/each}
-    </ul>
-  {/if}
-</div>