carbon-components-svelte 0.98.1 → 0.98.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-svelte",
-  "version": "0.98.1",
+  "version": "0.98.2",
   "license": "Apache-2.0",
   "description": "Svelte implementation of the Carbon Design System",
   "type": "module",

package/src/Checkbox/Checkbox.svelte

@@ -53,7 +53,7 @@
   export let title = undefined;
 
   /** Set an id for the input label */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the input HTML element */
   export let ref = null;

package/src/Checkbox/InlineCheckbox.svelte

@@ -12,7 +12,7 @@
   export let title = undefined;
 
   /** Set an id for the input label */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the input HTML element */
   export let ref = null;

package/src/CodeSnippet/CodeSnippet.svelte

@@ -103,7 +103,7 @@
   export let showMoreLess = true;
 
   /** Set an id for the code element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the pre HTML element */
   export let ref = null;
@@ -127,7 +127,7 @@
 
   $: expandText = expanded ? showLessText : showMoreText;
   $: minHeight = expanded ? 16 * 15 : 48;
-  $: maxHeight = expanded ? "none" : 16 * 15 + "px";
+  $: maxHeight = expanded ? "none" : `${16 * 15}px`;
 
   // Show more/less only applies to multi-line code snippets
   $: if (type !== "multi") showMoreLess = false;

package/src/ComboBox/ComboBox.svelte

@@ -120,7 +120,7 @@
   export let translateWithIdSelection = undefined;
 
   /** Set an id for the list box component */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the input.
@@ -200,10 +200,9 @@
   }
 
   /**
-   * Clear the combo box programmatically
+   * Clear the combo box programmatically.
+   * By default, focuses the combo box after clearing. Set `options.focus` to `false` to prevent focusing.
    * @type {(options?: { focus?: boolean; }) => Promise<void>}
-   * @param {object} [options] - Configuration options for clearing
-   * @param {boolean} [options.focus=true] - Whether to focus the combo box after clearing
    * @example
    * ```svelte
    * <ComboBox bind:this={comboBox} items={items} />

package/src/ContainedList/ContainedList.svelte

@@ -21,7 +21,7 @@
   export let inset = false;
 
   /** Set an id for the list element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   $: labelId = `label-${id}`;
 </script>

package/src/ContentSwitcher/Switch.svelte

@@ -18,7 +18,7 @@
   export let disabled = false;
 
   /** Set an id for the button element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the button HTML element */
   export let ref = null;

package/src/ContextMenu/ContextMenuOption.svelte

@@ -55,7 +55,7 @@
    * Specify the id.
    * It's recommended to provide an id as a value to bind to within a selectable/radio menu group.
    */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the list item HTML element */
   export let ref = null;

package/src/DataTable/DataTable.svelte

@@ -102,7 +102,7 @@
    * When the table is inside a form, this name will
    * be included in the form data on submit.
    */
-  export let inputName = "ccs-" + Math.random().toString(36);
+  export let inputName = `ccs-${Math.random().toString(36)}`;
 
   /** Set to `true` to use zebra styles */
   export let zebra = false;
@@ -223,7 +223,7 @@
 
   // Internal ID prefix for radio buttons, checkboxes, etc.
   // since there may be multiple `DataTable` instances that have overlapping row ids.
-  const id = "ccs-" + Math.random().toString(36);
+  const id = `ccs-${Math.random().toString(36)}`;
 
   // Store a copy of the original rows for filter restoration.
   $: originalRows = [...rows];
@@ -272,7 +272,7 @@
         return searchableKeys.some((key) => {
           const _value = resolvePath(row, key);
           if (typeof _value === "string" || typeof _value === "number") {
-            return (_value + "")?.toLowerCase().includes(value);
+            return `${_value}`?.toLowerCase().includes(value);
           }
           return false;
         });

package/src/DataTable/TableHeader.svelte

@@ -31,7 +31,7 @@
   export let translateWithId = (id) => defaultTranslations[id];
 
   /** Set an id for the top-level element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   import ArrowsVertical from "../icons/ArrowsVertical.svelte";
   import ArrowUp from "../icons/ArrowUp.svelte";

package/src/DatePicker/DatePicker.svelte

@@ -57,7 +57,7 @@
   export let light = false;
 
   /** Set an id for the date picker element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Override the options passed to the Flatpickr instance.

package/src/DatePicker/DatePickerInput.svelte

@@ -24,7 +24,7 @@
   export let iconDescription = "";
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Specify the label text */
   export let labelText = "";

package/src/DatePicker/DatePickerSkeleton.svelte

@@ -3,7 +3,7 @@
   export let range = false;
 
   /** Set an id to be used by the label element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->

package/src/Dropdown/Dropdown.svelte

@@ -95,7 +95,7 @@
   export let translateWithId = undefined;
 
   /** Set an id for the list box component */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the list box.

package/src/FileUploader/FileUploaderButton.svelte

@@ -40,7 +40,7 @@
   export let labelText = "Add file";
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Specify a name attribute for the input */
   export let name = "";

package/src/FileUploader/FileUploaderDropContainer.svelte

@@ -39,7 +39,7 @@
   export let tabindex = "0";
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Specify a name attribute for the input */
   export let name = "";

package/src/FileUploader/FileUploaderItem.svelte

@@ -28,7 +28,7 @@
   export let errorBody = "";
 
   /** Set an id for the top-level element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Specify the file uploader name */
   export let name = "";

package/src/FormLabel/FormLabel.svelte

@@ -1,6 +1,6 @@
 <script>
   /** Set an id to be used by the label element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->

package/src/ImageLoader/ImageLoader.svelte

@@ -42,9 +42,9 @@
   export let fadeIn = false;
 
   /**
-   * Method invoked to load the image provided a `src` value
+   * Method invoked to load the image provided a `src` value.
+   * If no URL is provided, uses the component's `src` prop.
    * @type {(url?: string) => void}
-   * @param {string} [url] - Optional URL to load. If not provided, uses the component's `src` prop
    * @example
    * ```svelte
    * <ImageLoader bind:this={loader} src="default.jpg" />

package/src/ListBox/ListBoxField.svelte

@@ -22,7 +22,7 @@
   export let translateWithId = (id) => defaultTranslations[id];
 
   /** Set an id for the top-level element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the top-level HTML element */
   export let ref = null;

package/src/ListBox/ListBoxMenu.svelte

@@ -1,6 +1,6 @@
 <script>
   /** Set an id for the top-level element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the HTML element */
   export let ref = null;

package/src/Modal/Modal.svelte

@@ -98,7 +98,7 @@
   export let preventCloseOnClickOutside = false;
 
   /** Set an id for the top-level element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the top-level HTML element */
   export let ref = null;

package/src/MultiSelect/MultiSelect.svelte

@@ -145,7 +145,7 @@
   export let hideLabel = false;
 
   /** Set an id for the list box component */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the select.
@@ -546,6 +546,7 @@
             role="option"
             aria-labelledby="checkbox-{item.id}"
             aria-selected={item.checked}
+            aria-checked={item.checked}
             active={item.checked}
             highlighted={highlightedIndex === i}
             disabled={item.disabled}

package/src/Notification/InlineNotification.svelte

@@ -32,7 +32,7 @@
    * Specify the ARIA label for the status icon.
    * @type {string}
    * */
-  export let statusIconDescription = kind + " icon";
+  export let statusIconDescription = `${kind} icon`;
 
   /** Specify the ARIA label for the close button */
   export let closeButtonDescription = "Close notification";

package/src/Notification/NotificationQueue.svelte

@@ -52,8 +52,8 @@
   /**
    * Add a notification to the queue.
    * If a notification with the same id exists, the call is ignored.
-   * @param {NotificationData} notification
-   * @returns {string} The notification id
+   * Returns the notification id (either the provided id or a generated one).
+   * @type {(notification: NotificationData) => string}
    */
   export function add(notification) {
     const id = notification.id ?? generateId();
@@ -83,8 +83,8 @@
 
   /**
    * Remove a notification by id.
-   * @param {string} id
-   * @returns {boolean} True if the notification was found and removed
+   * Returns true if the notification was found and removed, false otherwise.
+   * @type {(id: string) => boolean}
    */
   export function remove(id) {
     const index = notifications.findIndex((n) => n.id === id);

package/src/Notification/ToastNotification.svelte

@@ -32,7 +32,7 @@
    * Specify the ARIA label for the status icon.
    * @type {string}
    * */
-  export let statusIconDescription = kind + " icon";
+  export let statusIconDescription = `${kind} icon`;
 
   /** Specify the ARIA label for the close button */
   export let closeButtonDescription = "Close notification";

package/src/NumberInput/NumberInput.svelte

@@ -97,7 +97,7 @@
   };
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the input.

package/src/OverflowMenu/OverflowMenu.svelte

@@ -48,7 +48,7 @@
   export let iconDescription = "Open and close list of options";
 
   /** Set an id for the button element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the trigger button element */
   export let buttonRef = null;
@@ -170,14 +170,14 @@
 
       if (direction === "top") {
         menuRef.style.top = "auto";
-        menuRef.style.bottom = height + "px";
+        menuRef.style.bottom = `${height}px`;
       } else if (direction === "bottom") {
-        menuRef.style.top = height + "px";
+        menuRef.style.top = `${height}px`;
       }
 
       if (ctxBreadcrumbItem) {
-        menuRef.style.top = height + 10 + "px";
-        menuRef.style.left = -11 + "px";
+        menuRef.style.top = `${height + 10}px`;
+        menuRef.style.left = `${-11}px`;
       }
     }
 
@@ -198,7 +198,7 @@
   // Use CSS custom properties instead of dynamic style injection for better
   // performance. The previous approach created individual `style` tags per
   // instance, causing overhead when many OverflowMenu components are rendered.
-  $: overflowMenuOptionsAfterWidth = buttonWidth ? buttonWidth + "px" : "2rem";
+  $: overflowMenuOptionsAfterWidth = buttonWidth ? `${buttonWidth}px` : "2rem";
 </script>
 
 <svelte:window

package/src/OverflowMenu/OverflowMenuItem.svelte

@@ -34,7 +34,7 @@
   export let requireTitle = true;
 
   /** Set an id for the top-level element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the HTML element */
   export let ref = null;

package/src/Pagination/Pagination.svelte

@@ -94,7 +94,7 @@
     `of ${total.toLocaleString()} page${total === 1 ? "" : "s"}`;
 
   /** Set an id for the top-level element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   import { createEventDispatcher } from "svelte";
   import Button from "../Button/Button.svelte";

package/src/ProgressBar/ProgressBar.svelte

@@ -36,7 +36,7 @@
   export let helperText = "";
 
   /** Set an id for the progress bar element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
   import ErrorFilled from "../icons/ErrorFilled.svelte";
@@ -46,7 +46,7 @@
     finished: CheckmarkFilled,
   };
 
-  let helperId = "ccs-" + Math.random().toString(36);
+  let helperId = `ccs-${Math.random().toString(36)}`;
 
   $: indeterminate = value === undefined && status === "active";
   let capped;

package/src/ProgressIndicator/ProgressStep.svelte

@@ -21,7 +21,7 @@
   export let secondaryLabel = "";
 
   /** Set an id for the top-level element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   import { getContext, onMount } from "svelte";
   import CheckmarkOutline from "../icons/CheckmarkOutline.svelte";

package/src/RadioButton/RadioButton.svelte

@@ -27,7 +27,7 @@
   export let hideLabel = false;
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the radio button input.

package/src/Search/Search.svelte

@@ -60,7 +60,7 @@
   export let icon = IconSearch;
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the input HTML element */
   export let ref = null;

package/src/Select/Select.svelte

@@ -28,7 +28,7 @@
   export let disabled = false;
 
   /** Set an id for the select element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the select element.

package/src/Select/SelectItem.svelte

@@ -34,7 +34,7 @@
 
   import { getContext, onMount } from "svelte";
 
-  const id = "ccs-" + Math.random().toString(36);
+  const id = `ccs-${Math.random().toString(36)}`;
   const ctx = getContext("Select") || getContext("TimePickerSelect");
 
   $: ctx?.setDefaultValue?.(id, value);

package/src/Slider/Slider.svelte

@@ -50,7 +50,7 @@
   export let fullWidth = false;
 
   /** Set an id for the slider div element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Set to `true` to indicate an invalid state */
   export let invalid = false;

package/src/StructuredList/StructuredListInput.svelte

@@ -9,7 +9,7 @@
   export let value = "value";
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Specify a name attribute for the input */
   export let name = "";

package/src/Tabs/Tab.svelte

@@ -21,7 +21,7 @@
   export let tabindex = "0";
 
   /** Set an id for the top-level element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the anchor HTML element */
   export let ref = null;

package/src/Tabs/TabContent.svelte

@@ -1,6 +1,6 @@
 <script>
   /** Set an id for the top-level element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   import { getContext, onMount } from "svelte";
 

package/src/Tag/Tag.svelte

@@ -32,7 +32,7 @@
   export let icon = undefined;
 
   /** Set an id for the filterable tag */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   import { createEventDispatcher } from "svelte";
   import Close from "../icons/Close.svelte";

package/src/TextArea/TextArea.svelte

@@ -56,7 +56,7 @@
   export let warnText = "";
 
   /** Set an id for the textarea element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the input.

package/src/TextInput/PasswordInput.svelte

@@ -69,7 +69,7 @@
   export let inline = false;
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the input.

package/src/TextInput/TextInput.svelte

@@ -31,7 +31,7 @@
   export let helperText = "";
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the input.

package/src/Tile/ExpandableTile.svelte

@@ -27,7 +27,7 @@
   export let tabindex = "0";
 
   /** Set an id for the top-level div element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /** Obtain a reference to the top-level element */
   export let ref = null;

package/src/Tile/RadioTile.svelte

@@ -25,7 +25,7 @@
   export let iconDescription = "Tile checkmark";
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the radio tile input.

package/src/Tile/SelectableTile.svelte

@@ -26,7 +26,7 @@
   export let iconDescription = "Tile checkmark";
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the input.

package/src/TimePicker/TimePicker.svelte

@@ -39,7 +39,7 @@
   export let invalidText = "";
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the input.

package/src/TimePicker/TimePickerSelect.svelte

@@ -15,7 +15,7 @@
   export let labelText = "";
 
   /** Set an id for the select element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the select element.

package/src/Toggle/Toggle.svelte

@@ -28,7 +28,7 @@
   export let hideLabel = false;
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 
   /**
    * Specify a name attribute for the checkbox input.

package/src/Toggle/ToggleSkeleton.svelte

@@ -9,7 +9,7 @@
   export let labelText = "";
 
   /** Set an id for the input element */
-  export let id = "ccs-" + Math.random().toString(36);
+  export let id = `ccs-${Math.random().toString(36)}`;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->