Merge branch 'carbon-design-system:master' into patch-1

.github/workflows/ci.yml

@@ -23,3 +23,13 @@ jobs:
           yarn build:lib
           yarn test:types
           yarn lint
+
+  deploy-docs:
+    if: github.ref == 'refs/heads/master'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Trigger deploy
+        env:
+          deploy_url: ${{ secrets.RENDER_DEPLOY_HOOK_URL }}
+        run: |
+          curl -X GET "$deploy_url"

CHANGELOG.md

@@ -2,26 +2,32 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-### [0.73.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.2...v0.73.3) (2023-03-11)
+### [0.73.5](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.4...v0.73.5) (2023-03-26)
 
+### [0.73.4](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.3...v0.73.4) (2023-03-21)
 
 ### Bug Fixes
 
-* **1684:** hide helper text container in password input when not used ([#1685](https://github.com/carbon-design-system/carbon-components-svelte/issues/1685)) ([42349eb](https://github.com/carbon-design-system/carbon-components-svelte/commit/42349ebc61fdc8756fc5209d4cb63f4f9a63dce9))
+- **selectable-tile:** include dispatched events in types ([#1695](https://github.com/carbon-design-system/carbon-components-svelte/issues/1695)) ([ca40dd1](https://github.com/carbon-design-system/carbon-components-svelte/commit/ca40dd18c2af1bc755b857c39469427038f20ece)), closes [#1694](https://github.com/carbon-design-system/carbon-components-svelte/issues/1694)
+- **text-input:** correctly set input padding for warning state ([#1688](https://github.com/carbon-design-system/carbon-components-svelte/issues/1688)) ([821233a](https://github.com/carbon-design-system/carbon-components-svelte/commit/821233ab4f0bf247dea6a8aa32b79d15424ff059)), closes [#1687](https://github.com/carbon-design-system/carbon-components-svelte/issues/1687)
+
+### [0.73.3](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.2...v0.73.3) (2023-03-11)
+
+### Bug Fixes
+
+- **1684:** hide helper text container in password input when not used ([#1685](https://github.com/carbon-design-system/carbon-components-svelte/issues/1685)) ([42349eb](https://github.com/carbon-design-system/carbon-components-svelte/commit/42349ebc61fdc8756fc5209d4cb63f4f9a63dce9))
 
 ### [0.73.2](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.1...v0.73.2) (2023-02-27)
 
-
 ### Bug Fixes
 
-* `readonly` should override `error` behavior in `TextInput`, `NumberInput` ([#1666](https://github.com/carbon-design-system/carbon-components-svelte/issues/1666)) ([6386c33](https://github.com/carbon-design-system/carbon-components-svelte/commit/6386c33f939b5fa310e8eb5a51412c6151de75d2)), closes [/github.com/carbon-design-system/carbon-components-svelte/pull/1666#pullrequestreview-1314558645](https://github.com/carbon-design-system//github.com/carbon-design-system/carbon-components-svelte/pull/1666/issues/pullrequestreview-1314558645)
+- `readonly` should override `error` behavior in `TextInput`, `NumberInput` ([#1666](https://github.com/carbon-design-system/carbon-components-svelte/issues/1666)) ([6386c33](https://github.com/carbon-design-system/carbon-components-svelte/commit/6386c33f939b5fa310e8eb5a51412c6151de75d2)), closes [/github.com/carbon-design-system/carbon-components-svelte/pull/1666#pullrequestreview-1314558645](https://github.com/carbon-design-system//github.com/carbon-design-system/carbon-components-svelte/pull/1666/issues/pullrequestreview-1314558645)
 
 ### [0.73.1](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.73.0...v0.73.1) (2023-02-19)
 
-
 ### Bug Fixes
 
-* **textinput/passwordinput:** apply aria-describedby to hint text ([b435be4](https://github.com/carbon-design-system/carbon-components-svelte/commit/b435be4f1221b30c9afd7a9e1c6867b38eeadeaa)), closes [#1633](https://github.com/carbon-design-system/carbon-components-svelte/issues/1633)
+- **textinput/passwordinput:** apply aria-describedby to hint text ([b435be4](https://github.com/carbon-design-system/carbon-components-svelte/commit/b435be4f1221b30c9afd7a9e1c6867b38eeadeaa)), closes [#1633](https://github.com/carbon-design-system/carbon-components-svelte/issues/1633)
 
 ### [0.73.0](https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.72.3...v0.73.0) (2023-02-19)
 

COMPONENT_INDEX.md

@@ -1,6 +1,6 @@
 # Component Index
 
-> 165 components exported from carbon-components-svelte@0.73.3.
+> 165 components exported from carbon-components-svelte@0.73.5.
 
 ## Components
 
@@ -3274,13 +3274,15 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
+| Event name | Type       | Detail              |
-| :--------- | :-------- | :----- |
+| :--------- | :--------- | :------------------ |
-| click      | forwarded | --     |
+| select     | dispatched | <code>string</code> |
-| mouseover  | forwarded | --     |
+| deselect   | dispatched | <code>string</code> |
-| mouseenter | forwarded | --     |
+| click      | forwarded  | --                  |
-| mouseleave | forwarded | --     |
+| mouseover  | forwarded  | --                  |
-| keydown    | forwarded | --     |
+| mouseenter | forwarded  | --                  |
+| mouseleave | forwarded  | --                  |
+| keydown    | forwarded  | --                  |
 
 ## `SideNav`
 

README.md

@@ -4,7 +4,7 @@
 ![GitHub](https://img.shields.io/github/license/ibm/carbon-components-svelte?color=262626&style=for-the-badge)
 ![npm downloads to date](https://img.shields.io/npm/dt/carbon-components-svelte?color=262626&style=for-the-badge)
 <a href="https://discord.gg/J7JEUEkTRX">
-  <img src="https://img.shields.io/discord/689212587170201628?color=5865F2&style=for-the-badge" alt="Chat with us on Discord">
+<img src="https://img.shields.io/discord/689212587170201628?color=5865F2&style=for-the-badge" alt="Chat with us on Discord">
 </a>
 
 Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
@@ -20,10 +20,6 @@ The Carbon Svelte portfolio also includes:
 
 ## [Documentation](https://carbon-components-svelte.onrender.com)
 
-The documentation site is deployed to [Render](https://render.com) as a Static Site. See [render.yaml](render.yaml) for details.
-
-[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/carbon-design-system/carbon-components-svelte)
-
 Other forms of documentation are auto-generated:
 
 - **[TypeScript definitions](types)**: Component TypeScript definitions

docs/package.json

@@ -22,7 +22,7 @@
     "prism-svelte": "^0.4.7",
     "prismjs": "^1.28.0",
     "remark-slug": "^6.0.0",
-    "svelte": "^3.49.0",
+    "svelte": "^3.57.0",
     "vite": "^3.0.9"
   },
   "routify": {

docs/src/COMPONENT_API.json

@@ -10551,6 +10551,8 @@
       "moduleExports": [],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
+        { "type": "dispatched", "name": "select", "detail": "string" },
+        { "type": "dispatched", "name": "deselect", "detail": "string" },
         { "type": "forwarded", "name": "click", "element": "label" },
         { "type": "forwarded", "name": "mouseover", "element": "label" },
         { "type": "forwarded", "name": "mouseenter", "element": "label" },

docs/src/components/Theme.svelte

@@ -1,30 +0,0 @@
-<script>
-  export let persist = false;
-  export let persistKey = "carbon-theme";
-  export const themes = ["white", "g10", "g80", "g90", "g100"];
-
-  import { onMount, afterUpdate } from "svelte";
-  import { theme } from "../store";
-
-  const isValidTheme = (value) => themes.includes(value);
-
-  onMount(() => {
-    try {
-      const persisted_theme = localStorage.getItem(persistKey);
-      if (isValidTheme(persisted_theme)) theme.set(persisted_theme);
-    } catch (e) {}
-  });
-
-  afterUpdate(() => {
-    if (isValidTheme($theme)) {
-      document.documentElement.setAttribute("theme", $theme);
-      if (persist) {
-        try {
-          localStorage.setItem(persistKey, $theme);
-        } catch (e) {}
-      }
-    }
-  });
-</script>
-
-<slot />

docs/src/global.css

@@ -33,6 +33,11 @@ html[theme="g90"] .code-override {
   overflow-x: auto;
 }
 
+/* Addig this to the layout grid fixes overstretching. */
+.fix-overflow {
+  min-width: 0;
+}
+
 .token.tag,
 .token.operator {
   color: #6ea6ff;
@@ -167,16 +172,6 @@ html[theme="g90"] .code-override {
   margin-bottom: var(--cds-layout-01);
 }
 
-.table {
-  position: sticky;
-  max-height: calc(100vh - 3rem);
-  top: 3rem;
-  padding-top: var(--cds-spacing-05);
-  padding-bottom: var(--cds-spacing-05);
-  padding-left: var(--cds-spacing-08);
-  overflow-y: auto;
-}
-
 .code-01 {
   font-size: var(--cds-code-01-font-size);
   font-weight: var(--cds-code-01-font-weight);

docs/src/layouts/ComponentLayout.svelte

@@ -66,7 +66,7 @@
 </script>
 
 <Content data-components>
-  <Grid>
+  <Grid class="fix-overflow">
     <Row>
       <Column>
         <h1>{component}</h1>

docs/src/pages/_layout.svelte

@@ -12,10 +12,11 @@
     SideNav,
     SideNavItems,
     SideNavMenuItem,
+    Theme,
     Tag,
   } from "carbon-components-svelte";
   import LogoGithub from "carbon-icons-svelte/lib/LogoGithub.svelte";
-  import Theme from "../components/Theme.svelte";
+  import { theme } from "../store";
 
   const deprecated = [];
   const new_components = [];
@@ -38,7 +39,7 @@
 <!-- routify:options bundle=true -->
 <svelte:window bind:innerWidth />
 
-<Theme persist>
+<Theme persist bind:theme="{$theme}">
   <Header
     aria-label="Navigation"
     href="{$url('/')}"

docs/src/pages/components/Slider.svx

@@ -9,17 +9,17 @@ components: ["Slider", "SliderSkeleton"]
 
 ## Default
 
-<Slider />
+<Slider labelText="Instances" value={0} />
 
 ## Full width
 
 Set `fullWidth` to `true` for the slider to span the full width of its containing element.
 
-<Slider fullWidth />
+<Slider labelText="Instances" fullWidth value={0} />
 
 ## Hidden text input
 
-<Slider hideTextInput />
+<Slider labelText="Instances" hideTextInput value={0} />
 
 ## Custom minimum, maximum values
 

docs/src/pages/components/Tag.svx

@@ -41,7 +41,7 @@
 
 ## Custom icon
 
-Note: rendering a custom icon cannnot be used with the filterable variant.
+Note: rendering a custom icon cannot be used with the filterable variant.
 
 <Tag icon={IbmCloud}>IBM Cloud</Tag>
 

docs/yarn.lock

@@ -165,7 +165,7 @@ bufferutil@^4.0.1:
     node-gyp-build "~3.7.0"
 
 carbon-components-svelte@../:
-  version "0.70.1"
+  version "0.73.3"
   dependencies:
     flatpickr "4.6.9"
 
@@ -1280,10 +1280,10 @@ svelte-hmr@^0.14.12:
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.12.tgz#a127aec02f1896500b10148b2d4d21ddde39973f"
   integrity sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==
 
-svelte@^3.49.0:
+svelte@^3.57.0:
-  version "3.49.0"
+  version "3.57.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.57.0.tgz#a3969cfe51f25f2a55e75f7b98dbd02c3af0980b"
-  integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
+  integrity sha512-WMXEvF+RtAaclw0t3bPDTUe19pplMlfyKDsixbHQYgCWi9+O9VN0kXU1OppzrB9gPAvz4NALuoca2LfW2bOjTQ==
 
 symbol-tree@^3.2.4:
   version "3.2.4"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.73.3",
+  "version": "0.73.5",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "svelte": "./src/index.js",
@@ -39,7 +39,7 @@
     "sass": "^1.49.11",
     "standard-version": "^9.5.0",
     "sveld": "^0.18.0",
-    "svelte": "^3.51.0",
+    "svelte": "^3.57.0",
     "svelte-check": "^2.8.1",
     "typescript": "^4.7.4"
   },

src/ContextMenu/ContextMenu.svelte

@@ -153,6 +153,7 @@
   }}"
 />
 
+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <ul
   bind:this="{ref}"
   role="menu"

src/NumberInput/NumberInput.svelte

@@ -191,8 +191,8 @@
         type="number"
         pattern="[0-9]*"
         aria-describedby="{errorId}"
-        data-invalid="{(error) || undefined}"
+        data-invalid="{error || undefined}"
-        aria-invalid="{(error) || undefined}"
+        aria-invalid="{error || undefined}"
         aria-label="{label ? undefined : ariaLabel}"
         disabled="{disabled}"
         id="{id}"

src/OverflowMenu/OverflowMenu.svelte

@@ -242,6 +242,7 @@
     />
   </slot>
   {#if open}
+    <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
     <ul
       bind:this="{menuRef}"
       role="menu"

src/ProgressIndicator/ProgressStep.svelte

@@ -53,7 +53,6 @@
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 <li
-  aria-disabled="{disabled}"
   id="{id}"
   class:bx--progress-step="{true}"
   class:bx--progress-step--current="{current}"

src/Tabs/Tabs.svelte

@@ -151,6 +151,7 @@
     </a>
     <ChevronDown aria-hidden="true" title="{iconDescription}" />
   </div>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul
     bind:this="{refTabList}"
     role="tablist"

src/Tile/SelectableTile.svelte

@@ -1,4 +1,9 @@
 <script>
+  /**
+   * @event {string} "select"
+   * @event {string} "deselect"
+   */
+
   /** Set to `true` to select the tile */
   export let selected = false;
 

src/TreeView/TreeView.svelte

@@ -188,6 +188,7 @@
   </label>
 {/if}
 
+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <ul
   {...$$restProps}
   role="tree"

src/TreeView/TreeViewNode.svelte

@@ -75,6 +75,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
 <li
   bind:this="{ref}"
   role="treeitem"

src/TreeView/TreeViewNodeList.svelte

@@ -72,6 +72,7 @@
     {/if}
   {/each}
 {:else}
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <li
     bind:this="{ref}"
     role="treeitem"

src/UIShell/HeaderNav.svelte

@@ -6,6 +6,7 @@
 </script>
 
 <nav {...props} class:bx--header__nav="{true}" {...$$restProps}>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul {...props} role="menubar" class:bx--header__menu-bar="{true}">
     <slot />
   </ul>

src/UIShell/HeaderNavMenu.svelte

@@ -94,6 +94,7 @@
     {text}
     <ChevronDown class="bx--header__menu-arrow" />
   </a>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul
     bind:this="{menuRef}"
     role="menu"

src/UIShell/HeaderSearch.svelte

@@ -134,6 +134,7 @@
   </div>
 
   {#if active && results.length > 0}
+    <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
     <ul aria-labelledby="search-label" role="menu" id="search-menu">
       {#each results as result, i}
         <li role="none">

src/UIShell/SideNavMenu.svelte

@@ -48,6 +48,7 @@
       <ChevronDown />
     </div>
   </button>
+  <!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
   <ul
     role="menu"
     class:bx--side-nav__menu="{true}"

types/Tile/SelectableTile.svelte.d.ts

@@ -67,6 +67,8 @@ export interface SelectableTileProps
 export default class SelectableTile extends SvelteComponentTyped<
   SelectableTileProps,
   {
+    select: CustomEvent<string>;
+    deselect: CustomEvent<string>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];

yarn.lock

@@ -2018,16 +2018,16 @@ svelte-preprocess@^4.10.6:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
-svelte@^3.51.0:
-  version "3.51.0"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.51.0.tgz#a1a0afb25dc518217f353dd73ea6471c128ddf84"
-  integrity sha512-PBITYIrsNOuW+Dtds00gSY68raNZQn7i59Dg/fjgf6WwyawPKeBwle692coO7ILZqSO+UJe9899aDn9sMdeOHA==
-
 svelte@^3.52.0:
   version "3.54.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.54.0.tgz#b4bcd865bd9e927f9f7b76563288ef5f4d72867a"
   integrity sha512-tdrgeJU0hob0ZWAMoKXkhcxXA7dpTg6lZGxUeko5YqvPdJBiyRspGsCwV27kIrbrqPP2WUoSV9ca0gnLlw8YzQ==
 
+svelte@^3.57.0:
+  version "3.57.0"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.57.0.tgz#a3969cfe51f25f2a55e75f7b98dbd02c3af0980b"
+  integrity sha512-WMXEvF+RtAaclw0t3bPDTUe19pplMlfyKDsixbHQYgCWi9+O9VN0kXU1OppzrB9gPAvz4NALuoca2LfW2bOjTQ==
+
 terser@^5.0.0:
   version "5.14.2"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.14.2.tgz#9ac9f22b06994d736174f4091aa368db896f1c10"