Align 10.51 (#1021)

* chore(deps-dev): upgrade carbon-components to v10.51.0

* fix(slider): input should also be labelled

* refactor(date-picker): remove hotfix logic to prevent disabled icon from being clickable

Ref: https://github.com/carbon-design-system/carbon-components-svelte/pull/860

* feat(progress-step): update icons for current, incomplete steps

docs/package.json

@@ -12,7 +12,7 @@
     "@sveltech/routify": "^1.9.9",
     "@sveltejs/vite-plugin-svelte": "^1.0.0-next.33",
     "autoprefixer": "^10.2.3",
-    "carbon-components": "10.48.0",
+    "carbon-components": "10.51.0",
     "carbon-components-10.47": "npm:carbon-components@10.47",
     "carbon-components-svelte": "../",
     "carbon-icons-svelte": "^10.44.3",

docs/yarn.lock

@@ -471,10 +471,10 @@ carbon-components-svelte@../:
   dependencies:
     flatpickr "4.6.9"
 
-carbon-components@10.48.0:
+carbon-components@10.51.0:
-  version "10.48.0"
+  version "10.51.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.48.0.tgz#e1c31b7b5d27cf12299fd86f6c9b8f0546bb6b43"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.51.0.tgz#a09b259db12fa3ea7868489bbea6cb165d4f814a"
-  integrity sha512-kz6WlB4sVyOW/fUZLQ+f83cS2AAvcNRXkMi6au1guUHMdoTtIBz62AGKGxq54Xy2hQZK0Ca6aH01NopxOV4wUw==
+  integrity sha512-TkcfsYdFioZBx5vasC6bMOxI4XqJPt6EM7AqWAjwOeS7HByfBREYALHbZ3pBslb9yauoSbxQFKO2JlK5l+Baag==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"

package.json

@@ -28,7 +28,7 @@
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@tsconfig/svelte": "^1.0.10",
     "autoprefixer": "^10.2.4",
-    "carbon-components": "10.48.0",
+    "carbon-components": "10.51.0",
     "carbon-components-10.47": "npm:carbon-components@10.47",
     "carbon-icons-svelte": "^10.38.0",
     "husky": "^4.3.8",

src/DatePicker/DatePickerInput.svelte

@@ -154,10 +154,7 @@
         class="bx--date-picker__icon"
         aria-label="{iconDescription}"
         title="{iconDescription}"
-        on:click="{() => {
+        on:click="{openCalendar}"
-          if (disabled || ref.matches(':disabled')) return;
-          openCalendar();
-        }}"
       />
     {/if}
   </div>

src/ProgressIndicator/ProgressStep.svelte

@@ -26,6 +26,8 @@
   import { onMount, getContext } from "svelte";
   import CheckmarkOutline16 from "../icons/CheckmarkOutline16.svelte";
   import Warning16 from "../icons/Warning16.svelte";
+  import CircleDash16 from "../icons/CircleDash16.svelte";
+  import Incomplete16 from "../icons/Incomplete16.svelte";
 
   let step = {};
 
@@ -84,19 +86,11 @@
     {#if invalid}
       <Warning16 class="bx--progress__warning" title="{description}" />
     {:else if current}
-      <svg>
+      <Incomplete16 title="{description}" />
-        <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"></path>
-        <title>{description}</title>
-      </svg>
     {:else if complete}
       <CheckmarkOutline16 title="{description}" />
     {:else}
-      <svg>
+      <CircleDash16 title="{description}" />
-        <title>{description}</title>
-        <path
-          d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3
-          0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"></path>
-      </svg>
     {/if}
     <slot props="{{ class: 'bx--progress-label' }}">
       <p class:bx--progress-label="{true}">{label}</p>

src/Slider/Slider.svelte

@@ -172,7 +172,6 @@
         tabindex="0"
         class:bx--slider__thumb="{true}"
         style="left: {left}%"
-        aria-labelledby="{labelId}"
         aria-valuemax="{max}"
         aria-valuemin="{min}"
         aria-valuenow="{value}"
@@ -205,6 +204,7 @@
       class:bx--text-input--light="{light}"
       class:bx--text-input--invalid="{invalid}"
       value="{value}"
+      aria-labelledby="{$$props['aria-label'] ? undefined : labelId}"
       aria-label="{$$props['aria-label'] || 'Slider number input'}"
       disabled="{disabled}"
       required="{required}"

src/icons/CircleDash16.svelte

@@ -0,0 +1,51 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = undefined;
+  export let tabindex = undefined;
+  export let focusable = false;
+  export let title = undefined;
+  export let style = undefined;
+
+  $: ariaLabel = $$props["aria-label"];
+  $: ariaLabelledBy = $$props["aria-labelledby"];
+  $: labelled = ariaLabel || ariaLabelledBy || title;
+  $: attributes = {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: tabindex === "0" ? true : focusable,
+    tabindex,
+  };
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<svg
+  data-carbon-icon="CircleDash16"
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keyup
+  on:keydown
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  width="16"
+  height="16"
+  class="{className}"
+  preserveAspectRatio="xMidYMid meet"
+  style="{style}"
+  id="{id}"
+  {...attributes}
+>
+  <path
+    d="M7.7 4.7a14.7 14.7 0 00-3 3.1L6.3 9A13.26 13.26 0 018.9 6.3zM4.6 12.3l-1.9-.6A12.51 12.51 0 002 16H4A11.48 11.48 0 014.6 12.3zM2.7 20.4a14.4 14.4 0 002 3.9l1.6-1.2a12.89 12.89 0 01-1.7-3.3zM7.8 27.3a14.4 14.4 0 003.9 2l.6-1.9A12.89 12.89 0 019 25.7zM11.7 2.7l.6 1.9A11.48 11.48 0 0116 4V2A12.51 12.51 0 0011.7 2.7zM24.2 27.3a15.18 15.18 0 003.1-3.1L25.7 23A11.53 11.53 0 0123 25.7zM27.4 19.7l1.9.6A15.47 15.47 0 0030 16H28A11.48 11.48 0 0127.4 19.7zM29.2 11.6a14.4 14.4 0 00-2-3.9L25.6 8.9a12.89 12.89 0 011.7 3.3zM24.1 4.6a14.4 14.4 0 00-3.9-2l-.6 1.9a12.89 12.89 0 013.3 1.7zM20.3 29.3l-.6-1.9A11.48 11.48 0 0116 28v2A21.42 21.42 0 0020.3 29.3z"
+  ></path>
+  <slot>
+    {#if title}
+      <title>{title}</title>
+    {/if}
+  </slot>
+</svg>

src/icons/Incomplete16.svelte

@@ -0,0 +1,51 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = undefined;
+  export let tabindex = undefined;
+  export let focusable = false;
+  export let title = undefined;
+  export let style = undefined;
+
+  $: ariaLabel = $$props["aria-label"];
+  $: ariaLabelledBy = $$props["aria-labelledby"];
+  $: labelled = ariaLabel || ariaLabelledBy || title;
+  $: attributes = {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: tabindex === "0" ? true : focusable,
+    tabindex,
+  };
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<svg
+  data-carbon-icon="Incomplete16"
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keyup
+  on:keydown
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  width="16"
+  height="16"
+  class="{className}"
+  preserveAspectRatio="xMidYMid meet"
+  style="{style}"
+  id="{id}"
+  {...attributes}
+>
+  <path
+    d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"
+  ></path>
+  <slot>
+    {#if title}
+      <title>{title}</title>
+    {/if}
+  </slot>
+</svg>

yarn.lock

@@ -457,10 +457,10 @@ caniuse-lite@^1.0.30001181:
     lodash.debounce "^4.0.8"
     warning "^3.0.0"
 
-carbon-components@10.48.0:
+carbon-components@10.51.0:
-  version "10.48.0"
+  version "10.51.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.48.0.tgz#e1c31b7b5d27cf12299fd86f6c9b8f0546bb6b43"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.51.0.tgz#a09b259db12fa3ea7868489bbea6cb165d4f814a"
-  integrity sha512-kz6WlB4sVyOW/fUZLQ+f83cS2AAvcNRXkMi6au1guUHMdoTtIBz62AGKGxq54Xy2hQZK0Ca6aH01NopxOV4wUw==
+  integrity sha512-TkcfsYdFioZBx5vasC6bMOxI4XqJPt6EM7AqWAjwOeS7HByfBREYALHbZ3pBslb9yauoSbxQFKO2JlK5l+Baag==
   dependencies:
     "@carbon/telemetry" "0.0.0-alpha.6"
     flatpickr "4.6.1"