@onsvisual/svelte-components 0.1.86-component.toolbar → 0.1.87

package/dist/index.js

@@ -41,6 +41,7 @@ export { default as Titleblock } from "./layout/Titleblock/Titleblock.svelte";
 export { default as Twisty } from "./layout/Twisty/Twisty.svelte";
 
 // Inputs
+export { default as AccessibleSelect } from "./inputs/AccessibleSelect/AccessibleSelect.svelte";
 export { default as Button } from "./inputs/Button/Button.svelte";
 export { default as Checkbox } from "./inputs/Checkbox/Checkbox.svelte";
 export { default as Checkboxes } from "./inputs/Checkboxes/Checkboxes.svelte";
@@ -52,14 +53,6 @@ export { default as Radio } from "./inputs/Radios/Radio.svelte";
 export { default as Radios } from "./inputs/Radios/Radios.svelte";
 export { default as Select } from "./inputs/Select/Select.svelte";
 export { default as Textarea } from "./inputs/Textarea/Textarea.svelte";
-export { default as HelpModal } from "./inputs/Toolbar/HelpModal.svelte";
-export { default as Icon } from "./inputs/Toolbar/Icon.svelte";
-export { default as Toolbar } from "./inputs/Toolbar/Toolbar.svelte";
-export { default as ToolbarButton } from "./inputs/Toolbar/ToolbarButton.svelte";
-export { default as ToolbarDivider } from "./inputs/Toolbar/ToolbarDivider.svelte";
-export { default as ToolbarsContainer } from "./inputs/Toolbar/ToolbarsContainer.svelte";
-export { default as ToolControl } from "./inputs/Toolbar/ToolControl.svelte";
-export { default as ToolControls } from "./inputs/Toolbar/ToolControls.svelte";
 
 // Decorators
 export { default as Blockquote } from "./decorators/Blockquote/Blockquote.svelte";

package/dist/inputs/AccessibleSelect/AccessibleSelect.svelte

@@ -0,0 +1,161 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  import accessibleAutocomplete from "accessible-autocomplete";
+
+  const dispatch = createEventDispatcher();
+  const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
+  const chevron = (opts) =>
+    `<svg class="${opts?.className}" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 11.75 7.7" width="18" style="z-index:1"><path fill="currentColor" d="m1.37.15 4.5 5.1 4.5-5.1a.37.37 0 0 1 .6 0l.7.7a.45.45 0 0 1 0 .5l-5.5 6.2a.37.37 0 0 1-.6 0l-5.5-6.1a.64.64 0 0 1 0-.6l.7-.7a.64.64 0 0 1 .6 0Z"></path></svg>`;
+
+  let inputElement;
+  let hideMenu = false;
+
+  export let value = null;
+  export let options = [];
+  export let id = "autocomplete";
+  export let label = "Select an option";
+  export let hideLabel = false;
+  export let mode = "dropdown";
+  export let clearable = true;
+  export let autoClear = false;
+  export let placeholder = mode === "search" ? "Enter text" : "Select one";
+  // export let idKey = "id";
+  export let labelKey = "label";
+  export let groupKey = null;
+  export let loadOptions = (query, populateResults) => {
+    const filteredResults = options.filter((opt) =>
+      opt[labelKey].match(new RegExp(`\\b${query.replace(/[^\w\s]/gi, "")}`, "i"))
+    );
+    populateResults(filteredResults);
+  };
+
+  function inputValueTemplate(result) {
+    return result && result[labelKey];
+  }
+
+  function suggestionTemplate(result) {
+    return (
+      result &&
+      (groupKey
+        ? `${result[labelKey]} <span class="muted-text">${result[groupKey]}</span>`
+        : result[labelKey])
+    );
+  }
+
+  function select(option) {
+    value = option;
+    dispatch("change", value);
+    if (value && autoClear) clearInput();
+  }
+
+  function inputChange(e) {
+    if (!e.target.value) select(null);
+  }
+
+  async function clearInput() {
+    hideMenu = true;
+    await sleep(0);
+    inputElement.value = "";
+    await sleep(100);
+    inputElement.focus();
+    await sleep(0);
+    inputElement.blur();
+    hideMenu = false;
+  }
+
+  function initAutocomplete(element, params) {
+    accessibleAutocomplete({
+      element,
+      id,
+      name: `${id}-input`,
+      source: loadOptions,
+      autoselect: mode === "search",
+      onConfirm: select,
+      confirmOnBlur: false,
+      placeholder,
+      displayMenu: "overlay",
+      showAllValues: mode === "default",
+      dropdownArrow: chevron,
+      minLength: mode === "search" ? 3 : 0,
+      templates: {
+        inputValue: inputValueTemplate,
+        suggestion: suggestionTemplate,
+      },
+    });
+    inputElement = document.getElementById(id);
+    inputElement.addEventListener("blur", inputChange);
+  }
+</script>
+
+<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://alphagov.github.io/accessible-autocomplete/dist/accessible-autocomplete.min.css"
+  />
+</svelte:head>
+
+{#if label}<label for="{id}" style:display="{hideLabel ? "none" : null}">{label}</label>{/if}
+<div class="ons-autocomplete-wrapper">
+  <div
+    id="{id}-container"
+    class="ons-autocomplete"
+    class:hide-menu="{hideMenu}"
+    use:initAutocomplete
+  ></div>
+  {#if clearable && !autoClear && value}
+    <button
+      title="Clear selection"
+      aria-label="Clear selection"
+      on:click="{clearInput}"
+      class="ons-autocomplete-clear"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 14 14" width="18">
+        <path
+          fill="currentColor"
+          d="M13.6 1 l -0.71 -0.71 a 0.5 0.5 0 0 0 -0.71 0 l -5.25 5.25 l -5.25 -5.25 a 0.51 0.51 0 0 0 -0.71 0 l -0.71 0.71 a 0.5 0.5 0 0 0 0 0.71 l 5.25 5.25 l -5.25 5.25 a 0.5 0.5 0 0 0 0 0.71 l 0.71 0.71 a 0.5 0.5 0 0 0 0.71 0 l 5.25 -5.25 l 5.25 5.25 a 0.5 0.5 0 0 0 0.71 0 l 0.71 -0.71 a 0.5 0.5 0 0 0 0 -0.71 l -5.25 -5.25 l 5.25 -5.25 a 0.5 0.5 0 0 0 0 -0.71Z"
+        ></path>
+      </svg>
+    </button>
+  {/if}
+</div>
+
+<style>
+  .ons-autocomplete-wrapper {
+    position: relative;
+  }
+  .ons-autocomplete-clear {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    align-content: center;
+    z-index: 1;
+    right: 3px;
+    top: calc(50% - 14px);
+    height: 28px;
+    width: 28px;
+    border: none;
+    background: white;
+  }
+  .ons-autocomplete-clear:focus {
+    outline: 3px solid #fbc900 !important;
+  }
+  .hide-menu :global(.autocomplete__menu) {
+    display: none;
+  }
+  .ons-autocomplete :global(.autocomplete__input) {
+    border-radius: 4px !important;
+    border-width: 1px !important;
+    background: white;
+  }
+  .ons-autocomplete :global(.autocomplete__input--focused) {
+    box-shadow: inset 0 0 0 1px black !important;
+    outline-color: #fbc900 !important;
+  }
+  .ons-autocomplete :global(.autocomplete__dropdown-arrow-down) {
+    width: 18px !important;
+    transform: translateY(-2px);
+  }
+  .ons-autocomplete :global(.muted-text) {
+    opacity: 0.8;
+    font-size: smaller;
+  }</style>

package/dist/inputs/AccessibleSelect/options.js

@@ -0,0 +1,263 @@
+export default [
+  { id: "AF", label: "Afghanistan", group: "Asia" },
+  { id: "AX", label: "Åland Islands", group: "Europe" },
+  { id: "AL", label: "Albania", group: "Europe" },
+  { id: "DZ", label: "Algeria", group: "Africa" },
+  { id: "AS", label: "American Samoa", group: "Oceania" },
+  { id: "AD", label: "Andorra", group: "Europe" },
+  { id: "AO", label: "Angola", group: "Africa" },
+  { id: "AI", label: "Anguilla", group: "Americas" },
+  { id: "AQ", label: "Antarctica", group: "" },
+  { id: "AG", label: "Antigua and Barbuda", group: "Americas" },
+  { id: "AR", label: "Argentina", group: "Americas" },
+  { id: "AM", label: "Armenia", group: "Asia" },
+  { id: "AW", label: "Aruba", group: "Americas" },
+  { id: "AU", label: "Australia", group: "Oceania" },
+  { id: "AT", label: "Austria", group: "Europe" },
+  { id: "AZ", label: "Azerbaijan", group: "Asia" },
+  { id: "BS", label: "Bahamas", group: "Americas" },
+  { id: "BH", label: "Bahrain", group: "Asia" },
+  { id: "BD", label: "Bangladesh", group: "Asia" },
+  { id: "BB", label: "Barbados", group: "Americas" },
+  { id: "BY", label: "Belarus", group: "Europe" },
+  { id: "BE", label: "Belgium", group: "Europe" },
+  { id: "BZ", label: "Belize", group: "Americas" },
+  { id: "BJ", label: "Benin", group: "Africa" },
+  { id: "BM", label: "Bermuda", group: "Americas" },
+  { id: "BT", label: "Bhutan", group: "Asia" },
+  { id: "BO", label: "Bolivia, Plurinational State of", group: "Americas" },
+  { id: "BQ", label: "Bonaire, Sint Eustatius and Saba", group: "Americas" },
+  { id: "BA", label: "Bosnia and Herzegovina", group: "Europe" },
+  { id: "BW", label: "Botswana", group: "Africa" },
+  { id: "BV", label: "Bouvet Island", group: "Americas" },
+  { id: "BR", label: "Brazil", group: "Americas" },
+  { id: "IO", label: "British Indian Ocean Territory", group: "Africa" },
+  { id: "BN", label: "Brunei Darussalam", group: "Asia" },
+  { id: "BG", label: "Bulgaria", group: "Europe" },
+  { id: "BF", label: "Burkina Faso", group: "Africa" },
+  { id: "BI", label: "Burundi", group: "Africa" },
+  { id: "CV", label: "Cabo Verde", group: "Africa" },
+  { id: "KH", label: "Cambodia", group: "Asia" },
+  { id: "CM", label: "Cameroon", group: "Africa" },
+  { id: "CA", label: "Canada", group: "Americas" },
+  { id: "KY", label: "Cayman Islands", group: "Americas" },
+  { id: "CF", label: "Central African Republic", group: "Africa" },
+  { id: "TD", label: "Chad", group: "Africa" },
+  { id: "CL", label: "Chile", group: "Americas" },
+  { id: "CN", label: "China", group: "Asia" },
+  { id: "CX", label: "Christmas Island", group: "Oceania" },
+  { id: "CC", label: "Cocos (Keeling) Islands", group: "Oceania" },
+  { id: "CO", label: "Colombia", group: "Americas" },
+  { id: "KM", label: "Comoros", group: "Africa" },
+  { id: "CG", label: "Congo", group: "Africa" },
+  { id: "CD", label: "Congo, Democratic Republic of the", group: "Africa" },
+  { id: "CK", label: "Cook Islands", group: "Oceania" },
+  { id: "CR", label: "Costa Rica", group: "Americas" },
+  { id: "CI", label: "Côte d'Ivoire", group: "Africa" },
+  { id: "HR", label: "Croatia", group: "Europe" },
+  { id: "CU", label: "Cuba", group: "Americas" },
+  { id: "CW", label: "Curaçao", group: "Americas" },
+  { id: "CY", label: "Cyprus", group: "Asia" },
+  { id: "CZ", label: "Czechia", group: "Europe" },
+  { id: "DK", label: "Denmark", group: "Europe" },
+  { id: "DJ", label: "Djibouti", group: "Africa" },
+  { id: "DM", label: "Dominica", group: "Americas" },
+  { id: "DO", label: "Dominican Republic", group: "Americas" },
+  { id: "EC", label: "Ecuador", group: "Americas" },
+  { id: "EG", label: "Egypt", group: "Africa" },
+  { id: "SV", label: "El Salvador", group: "Americas" },
+  { id: "GQ", label: "Equatorial Guinea", group: "Africa" },
+  { id: "ER", label: "Eritrea", group: "Africa" },
+  { id: "EE", label: "Estonia", group: "Europe" },
+  { id: "SZ", label: "Eswatini", group: "Africa" },
+  { id: "ET", label: "Ethiopia", group: "Africa" },
+  { id: "FK", label: "Falkland Islands (Malvinas)", group: "Americas" },
+  { id: "FO", label: "Faroe Islands", group: "Europe" },
+  { id: "FJ", label: "Fiji", group: "Oceania" },
+  { id: "FI", label: "Finland", group: "Europe" },
+  { id: "FR", label: "France", group: "Europe" },
+  { id: "GF", label: "French Guiana", group: "Americas" },
+  { id: "PF", label: "French Polynesia", group: "Oceania" },
+  { id: "TF", label: "French Southern Territories", group: "Africa" },
+  { id: "GA", label: "Gabon", group: "Africa" },
+  { id: "GM", label: "Gambia", group: "Africa" },
+  { id: "GE", label: "Georgia", group: "Asia" },
+  { id: "DE", label: "Germany", group: "Europe" },
+  { id: "GH", label: "Ghana", group: "Africa" },
+  { id: "GI", label: "Gibraltar", group: "Europe" },
+  { id: "GR", label: "Greece", group: "Europe" },
+  { id: "GL", label: "Greenland", group: "Americas" },
+  { id: "GD", label: "Grenada", group: "Americas" },
+  { id: "GP", label: "Guadeloupe", group: "Americas" },
+  { id: "GU", label: "Guam", group: "Oceania" },
+  { id: "GT", label: "Guatemala", group: "Americas" },
+  { id: "GG", label: "Guernsey", group: "Europe" },
+  { id: "GN", label: "Guinea", group: "Africa" },
+  { id: "GW", label: "Guinea-Bissau", group: "Africa" },
+  { id: "GY", label: "Guyana", group: "Americas" },
+  { id: "HT", label: "Haiti", group: "Americas" },
+  { id: "HM", label: "Heard Island and McDonald Islands", group: "Oceania" },
+  { id: "VA", label: "Holy See", group: "Europe" },
+  { id: "HN", label: "Honduras", group: "Americas" },
+  { id: "HK", label: "Hong Kong", group: "Asia" },
+  { id: "HU", label: "Hungary", group: "Europe" },
+  { id: "IS", label: "Iceland", group: "Europe" },
+  { id: "IN", label: "India", group: "Asia" },
+  { id: "ID", label: "Indonesia", group: "Asia" },
+  { id: "IR", label: "Iran, Islamic Republic of", group: "Asia" },
+  { id: "IQ", label: "Iraq", group: "Asia" },
+  { id: "IE", label: "Ireland", group: "Europe" },
+  { id: "IM", label: "Isle of Man", group: "Europe" },
+  { id: "IL", label: "Israel", group: "Asia" },
+  { id: "IT", label: "Italy", group: "Europe" },
+  { id: "JM", label: "Jamaica", group: "Americas" },
+  { id: "JP", label: "Japan", group: "Asia" },
+  { id: "JE", label: "Jersey", group: "Europe" },
+  { id: "JO", label: "Jordan", group: "Asia" },
+  { id: "KZ", label: "Kazakhstan", group: "Asia" },
+  { id: "KE", label: "Kenya", group: "Africa" },
+  { id: "KI", label: "Kiribati", group: "Oceania" },
+  { id: "KP", label: "Korea, Democratic People's Republic of", group: "Asia" },
+  { id: "KR", label: "Korea, Republic of", group: "Asia" },
+  { id: "KW", label: "Kuwait", group: "Asia" },
+  { id: "KG", label: "Kyrgyzstan", group: "Asia" },
+  { id: "LA", label: "Lao People's Democratic Republic", group: "Asia" },
+  { id: "LV", label: "Latvia", group: "Europe" },
+  { id: "LB", label: "Lebanon", group: "Asia" },
+  { id: "LS", label: "Lesotho", group: "Africa" },
+  { id: "LR", label: "Liberia", group: "Africa" },
+  { id: "LY", label: "Libya", group: "Africa" },
+  { id: "LI", label: "Liechtenstein", group: "Europe" },
+  { id: "LT", label: "Lithuania", group: "Europe" },
+  { id: "LU", label: "Luxembourg", group: "Europe" },
+  { id: "MO", label: "Macao", group: "Asia" },
+  { id: "MG", label: "Madagascar", group: "Africa" },
+  { id: "MW", label: "Malawi", group: "Africa" },
+  { id: "MY", label: "Malaysia", group: "Asia" },
+  { id: "MV", label: "Maldives", group: "Asia" },
+  { id: "ML", label: "Mali", group: "Africa" },
+  { id: "MT", label: "Malta", group: "Europe" },
+  { id: "MH", label: "Marshall Islands", group: "Oceania" },
+  { id: "MQ", label: "Martinique", group: "Americas" },
+  { id: "MR", label: "Mauritania", group: "Africa" },
+  { id: "MU", label: "Mauritius", group: "Africa" },
+  { id: "YT", label: "Mayotte", group: "Africa" },
+  { id: "MX", label: "Mexico", group: "Americas" },
+  { id: "FM", label: "Micronesia, Federated States of", group: "Oceania" },
+  { id: "MD", label: "Moldova, Republic of", group: "Europe" },
+  { id: "MC", label: "Monaco", group: "Europe" },
+  { id: "MN", label: "Mongolia", group: "Asia" },
+  { id: "ME", label: "Montenegro", group: "Europe" },
+  { id: "MS", label: "Montserrat", group: "Americas" },
+  { id: "MA", label: "Morocco", group: "Africa" },
+  { id: "MZ", label: "Mozambique", group: "Africa" },
+  { id: "MM", label: "Myanmar", group: "Asia" },
+  { id: "NA", label: "Namibia", group: "Africa" },
+  { id: "NR", label: "Nauru", group: "Oceania" },
+  { id: "NP", label: "Nepal", group: "Asia" },
+  { id: "NL", label: "Netherlands, Kingdom of the", group: "Europe" },
+  { id: "NC", label: "New Caledonia", group: "Oceania" },
+  { id: "NZ", label: "New Zealand", group: "Oceania" },
+  { id: "NI", label: "Nicaragua", group: "Americas" },
+  { id: "NE", label: "Niger", group: "Africa" },
+  { id: "NG", label: "Nigeria", group: "Africa" },
+  { id: "NU", label: "Niue", group: "Oceania" },
+  { id: "NF", label: "Norfolk Island", group: "Oceania" },
+  { id: "MK", label: "North Macedonia", group: "Europe" },
+  { id: "MP", label: "Northern Mariana Islands", group: "Oceania" },
+  { id: "NO", label: "Norway", group: "Europe" },
+  { id: "OM", label: "Oman", group: "Asia" },
+  { id: "PK", label: "Pakistan", group: "Asia" },
+  { id: "PW", label: "Palau", group: "Oceania" },
+  { id: "PS", label: "Palestine, State of", group: "Asia" },
+  { id: "PA", label: "Panama", group: "Americas" },
+  { id: "PG", label: "Papua New Guinea", group: "Oceania" },
+  { id: "PY", label: "Paraguay", group: "Americas" },
+  { id: "PE", label: "Peru", group: "Americas" },
+  { id: "PH", label: "Philippines", group: "Asia" },
+  { id: "PN", label: "Pitcairn", group: "Oceania" },
+  { id: "PL", label: "Poland", group: "Europe" },
+  { id: "PT", label: "Portugal", group: "Europe" },
+  { id: "PR", label: "Puerto Rico", group: "Americas" },
+  { id: "QA", label: "Qatar", group: "Asia" },
+  { id: "RE", label: "Réunion", group: "Africa" },
+  { id: "RO", label: "Romania", group: "Europe" },
+  { id: "RU", label: "Russian Federation", group: "Europe" },
+  { id: "RW", label: "Rwanda", group: "Africa" },
+  { id: "BL", label: "Saint Barthélemy", group: "Americas" },
+  {
+    id: "SH",
+    label: "Saint Helena, Ascension and Tristan da Cunha",
+    group: "Africa",
+  },
+  { id: "KN", label: "Saint Kitts and Nevis", group: "Americas" },
+  { id: "LC", label: "Saint Lucia", group: "Americas" },
+  { id: "MF", label: "Saint Martin (French part)", group: "Americas" },
+  { id: "PM", label: "Saint Pierre and Miquelon", group: "Americas" },
+  { id: "VC", label: "Saint Vincent and the Grenadines", group: "Americas" },
+  { id: "WS", label: "Samoa", group: "Oceania" },
+  { id: "SM", label: "San Marino", group: "Europe" },
+  { id: "ST", label: "Sao Tome and Principe", group: "Africa" },
+  { id: "SA", label: "Saudi Arabia", group: "Asia" },
+  { id: "SN", label: "Senegal", group: "Africa" },
+  { id: "RS", label: "Serbia", group: "Europe" },
+  { id: "SC", label: "Seychelles", group: "Africa" },
+  { id: "SL", label: "Sierra Leone", group: "Africa" },
+  { id: "SG", label: "Singapore", group: "Asia" },
+  { id: "SX", label: "Sint Maarten (Dutch part)", group: "Americas" },
+  { id: "SK", label: "Slovakia", group: "Europe" },
+  { id: "SI", label: "Slovenia", group: "Europe" },
+  { id: "SB", label: "Solomon Islands", group: "Oceania" },
+  { id: "SO", label: "Somalia", group: "Africa" },
+  { id: "ZA", label: "South Africa", group: "Africa" },
+  {
+    id: "GS",
+    label: "South Georgia and the South Sandwich Islands",
+    group: "Americas",
+  },
+  { id: "SS", label: "South Sudan", group: "Africa" },
+  { id: "ES", label: "Spain", group: "Europe" },
+  { id: "LK", label: "Sri Lanka", group: "Asia" },
+  { id: "SD", label: "Sudan", group: "Africa" },
+  { id: "SR", label: "Suriname", group: "Americas" },
+  { id: "SJ", label: "Svalbard and Jan Mayen", group: "Europe" },
+  { id: "SE", label: "Sweden", group: "Europe" },
+  { id: "CH", label: "Switzerland", group: "Europe" },
+  { id: "SY", label: "Syrian Arab Republic", group: "Asia" },
+  { id: "TW", label: "Taiwan, Province of China", group: "" },
+  { id: "TJ", label: "Tajikistan", group: "Asia" },
+  { id: "TZ", label: "Tanzania, United Republic of", group: "Africa" },
+  { id: "TH", label: "Thailand", group: "Asia" },
+  { id: "TL", label: "Timor-Leste", group: "Asia" },
+  { id: "TG", label: "Togo", group: "Africa" },
+  { id: "TK", label: "Tokelau", group: "Oceania" },
+  { id: "TO", label: "Tonga", group: "Oceania" },
+  { id: "TT", label: "Trinidad and Tobago", group: "Americas" },
+  { id: "TN", label: "Tunisia", group: "Africa" },
+  { id: "TR", label: "Türkiye", group: "Asia" },
+  { id: "TM", label: "Turkmenistan", group: "Asia" },
+  { id: "TC", label: "Turks and Caicos Islands", group: "Americas" },
+  { id: "TV", label: "Tuvalu", group: "Oceania" },
+  { id: "UG", label: "Uganda", group: "Africa" },
+  { id: "UA", label: "Ukraine", group: "Europe" },
+  { id: "AE", label: "United Arab Emirates", group: "Asia" },
+  {
+    id: "GB",
+    label: "United Kingdom of Great Britain and Northern Ireland",
+    group: "Europe",
+  },
+  { id: "US", label: "United States of America", group: "Americas" },
+  { id: "UM", label: "United States Minor Outlying Islands", group: "Oceania" },
+  { id: "UY", label: "Uruguay", group: "Americas" },
+  { id: "UZ", label: "Uzbekistan", group: "Asia" },
+  { id: "VU", label: "Vanuatu", group: "Oceania" },
+  { id: "VE", label: "Venezuela, Bolivarian Republic of", group: "Americas" },
+  { id: "VN", label: "Viet Nam", group: "Asia" },
+  { id: "VG", label: "Virgin Islands (British)", group: "Americas" },
+  { id: "VI", label: "Virgin Islands (U.S.)", group: "Americas" },
+  { id: "WF", label: "Wallis and Futuna", group: "Oceania" },
+  { id: "EH", label: "Western Sahara", group: "Africa" },
+  { id: "YE", label: "Yemen", group: "Asia" },
+  { id: "ZM", label: "Zambia", group: "Africa" },
+  { id: "ZW", label: "Zimbabwe", group: "Africa" },
+];

package/dist/inputs/Button/Button.svelte

@@ -49,12 +49,18 @@
    * @type {string}
    */
   export let arialabel = "";
+  /**
+   * filename if link is used for a file download
+   * @type {string|null}
+   */
+  export let download = null;
 </script>
 
 {#if href}
   <a
     href="{!disabled ? href : null}"
     role="button"
+    download="{download}"
     class="ons-btn ons-btn--link ons-js-submit-btn"
     class:ons-btn--small="{small}"
     class:ons-btn--secondary="{variant === 'secondary'}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.86-component.toolbar",
+  "version": "0.1.87",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -57,6 +57,7 @@
     "@types/react-syntax-highlighter": "^15.5.7",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
+    "accessible-autocomplete": "^3.0.1",
     "autoprefixer": "^10.4.14",
     "babel-loader": "^9.1.2",
     "change-case": "^4.1.2",
@@ -70,7 +71,6 @@
     "fs-extra": "^11.1.1",
     "gh-pages": "^6.2.0",
     "kleur": "^4.1.5",
-    "nanoid": "^5.0.9",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.24",
     "postcss-load-config": "^4.0.1",
@@ -127,6 +127,8 @@
     "./decorators/Divider/Divider.svelte": "./dist/decorators/Divider/Divider.svelte",
     "./decorators/Em/Em.svelte": "./dist/decorators/Em/Em.svelte",
     "./globals.d.ts": "./dist/globals.d.ts",
+    "./inputs/AccessibleSelect/AccessibleSelect.svelte": "./dist/inputs/AccessibleSelect/AccessibleSelect.svelte",
+    "./inputs/AccessibleSelect/options": "./dist/inputs/AccessibleSelect/options.js",
     "./inputs/Button/Button.svelte": "./dist/inputs/Button/Button.svelte",
     "./inputs/Button/Icon.svelte": "./dist/inputs/Button/Icon.svelte",
     "./inputs/Checkbox/Checkbox.svelte": "./dist/inputs/Checkbox/Checkbox.svelte",
@@ -139,21 +141,13 @@
     "./inputs/Radios/Radios.svelte": "./dist/inputs/Radios/Radios.svelte",
     "./inputs/Select/Select.svelte": "./dist/inputs/Select/Select.svelte",
     "./inputs/Textarea/Textarea.svelte": "./dist/inputs/Textarea/Textarea.svelte",
-    "./inputs/Toolbar/HelpModal.svelte": "./dist/inputs/Toolbar/HelpModal.svelte",
-    "./inputs/Toolbar/Icon.svelte": "./dist/inputs/Toolbar/Icon.svelte",
-    "./inputs/Toolbar/ToolControl.svelte": "./dist/inputs/Toolbar/ToolControl.svelte",
-    "./inputs/Toolbar/ToolControls.svelte": "./dist/inputs/Toolbar/ToolControls.svelte",
-    "./inputs/Toolbar/Toolbar.svelte": "./dist/inputs/Toolbar/Toolbar.svelte",
-    "./inputs/Toolbar/ToolbarButton.svelte": "./dist/inputs/Toolbar/ToolbarButton.svelte",
-    "./inputs/Toolbar/ToolbarDivider.svelte": "./dist/inputs/Toolbar/ToolbarDivider.svelte",
-    "./inputs/Toolbar/ToolbarsContainer.svelte": "./dist/inputs/Toolbar/ToolbarsContainer.svelte",
     "./js/docsPage": "./dist/js/docsPage.js",
     "./js/utils": "./dist/js/utils.js",
     "./js/withParams": "./dist/js/withParams.js",
     "./layout/Accordion/Accordion.svelte": "./dist/layout/Accordion/Accordion.svelte",
     "./layout/Accordion/AccordionItem.svelte": "./dist/layout/Accordion/AccordionItem.svelte",
     "./layout/AnalyticsBanner/AnalyticsBanner.svelte": "./dist/layout/AnalyticsBanner/AnalyticsBanner.svelte",
-    "./layout/BackLink/Backlink.svelte": "./dist/layout/BackLink/Backlink.svelte",
+    "./layout/Backlink/Backlink.svelte": "./dist/layout/Backlink/Backlink.svelte",
     "./layout/Breadcrumb/Breadcrumb.svelte": "./dist/layout/Breadcrumb/Breadcrumb.svelte",
     "./layout/Cards/Card.svelte": "./dist/layout/Cards/Card.svelte",
     "./layout/Cards/Cards.svelte": "./dist/layout/Cards/Cards.svelte",

package/dist/@types/inputs/Toolbar/HelpModal.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        triggerElement?: HTMLElement | null;
-        onClose: () => void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type HelpModalProps = typeof __propDef.props;
-export type HelpModalEvents = typeof __propDef.events;
-export type HelpModalSlots = typeof __propDef.slots;
-export default class HelpModal extends SvelteComponentTyped<HelpModalProps, HelpModalEvents, HelpModalSlots> {
-}
-export {};

package/dist/@types/inputs/Toolbar/Icon.svelte.d.ts

@@ -1,31 +0,0 @@
-/** @typedef {typeof __propDef.props}  IconProps */
-/** @typedef {typeof __propDef.events}  IconEvents */
-/** @typedef {typeof __propDef.slots}  IconSlots */
-export default class Icon extends SvelteComponentTyped<{
-    selected?: boolean;
-    type?: string;
-    marginLeft?: boolean;
-    marginRight?: boolean;
-    disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type IconProps = typeof __propDef.props;
-export type IconEvents = typeof __propDef.events;
-export type IconSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        selected?: boolean;
-        type?: string;
-        marginLeft?: boolean;
-        marginRight?: boolean;
-        disabled?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/@types/inputs/Toolbar/ToolControl.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  ToolControlProps */
-/** @typedef {typeof __propDef.events}  ToolControlEvents */
-/** @typedef {typeof __propDef.slots}  ToolControlSlots */
-export default class ToolControl extends SvelteComponentTyped<{
-    id?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ToolControlProps = typeof __propDef.props;
-export type ToolControlEvents = typeof __propDef.events;
-export type ToolControlSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        id?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/dist/@types/inputs/Toolbar/ToolControls.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  ToolControlsProps */
-/** @typedef {typeof __propDef.events}  ToolControlsEvents */
-/** @typedef {typeof __propDef.slots}  ToolControlsSlots */
-export default class ToolControls extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ToolControlsProps = typeof __propDef.props;
-export type ToolControlsEvents = typeof __propDef.events;
-export type ToolControlsSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};