@onsvisual/svelte-components 0.1.102-component.toolbar → 0.1.103

package/dist/layout/Titleblock/Titleblock.svelte

@@ -58,11 +58,6 @@
    * @type {string}
    */
   export let titleBadgeColor = "#003C57";
-  /**
-   * Set a width for the container
-   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
-   */
-  export let width = "wide";
 
   $: titleBadgeTextColor = contrastColor(titleBadgeColor);
 </script>
@@ -72,7 +67,6 @@
   themeOverrides="{themeOverrides}"
   allowClientOverrides="{allowClientOverrides}"
   background="{background}"
-  width="{width}"
 >
   <section class="ons-u-mb-xl">
     <slot name="before" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.102-component.toolbar",
+  "version": "0.1.103",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -17,8 +17,7 @@
     "build": "npm-run-all build:package build:docs",
     "deploy": "gh-pages -d docs -t true",
     "prepublishOnly": "npm run build:package",
-    "postversion": "git push origin && git push origin --tags",
-    "watch:package": "npx nodemon --ext svelte,js,ts --ignore dist/ --exec 'npm run build:package'"
+    "postversion": "git push origin && git push origin --tags"
   },
   "license": "MIT",
   "types": "./dist/@types/index.d.ts",
@@ -71,8 +70,6 @@
     "fs-extra": "^11.1.1",
     "gh-pages": "^6.2.0",
     "kleur": "^4.1.5",
-    "nanoid": "^5.0.9",
-    "nodemon": "^3.1.9",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.24",
     "postcss-load-config": "^4.0.1",
@@ -129,10 +126,10 @@
     "./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/ButtonGroup/ButtonGroup.svelte": "./dist/inputs/ButtonGroup/ButtonGroup.svelte",
-    "./inputs/ButtonGroup/ButtonGroupItem.svelte": "./dist/inputs/ButtonGroup/ButtonGroupItem.svelte",
     "./inputs/Checkbox/Checkbox.svelte": "./dist/inputs/Checkbox/Checkbox.svelte",
     "./inputs/Checkboxes/Checkboxes.svelte": "./dist/inputs/Checkboxes/Checkboxes.svelte",
     "./inputs/Dropdown/Dropdown.svelte": "./dist/inputs/Dropdown/Dropdown.svelte",
@@ -143,14 +140,6 @@
     "./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",

package/dist/@types/inputs/ButtonGroup/ButtonGroup.svelte.d.ts

@@ -1,33 +0,0 @@
-/** @typedef {typeof __propDef.props}  ButtonGroupProps */
-/** @typedef {typeof __propDef.events}  ButtonGroupEvents */
-/** @typedef {typeof __propDef.slots}  ButtonGroupSlots */
-export default class ButtonGroup extends SvelteComponentTyped<{
-    value: any;
-    legend?: string;
-    name?: string;
-    visuallyHideLegend?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type ButtonGroupProps = typeof __propDef.props;
-export type ButtonGroupEvents = typeof __propDef.events;
-export type ButtonGroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        value: any;
-        legend?: string;
-        name?: string;
-        visuallyHideLegend?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/dist/@types/inputs/ButtonGroup/ButtonGroupItem.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  ButtonGroupItemProps */
-/** @typedef {typeof __propDef.events}  ButtonGroupItemEvents */
-/** @typedef {typeof __propDef.slots}  ButtonGroupItemSlots */
-export default class ButtonGroupItem extends SvelteComponentTyped<{
-    label?: string;
-    value?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type ButtonGroupItemProps = typeof __propDef.props;
-export type ButtonGroupItemEvents = typeof __propDef.events;
-export type ButtonGroupItemSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        label?: string;
-        value?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

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 {};

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

@@ -1,33 +0,0 @@
-/** @typedef {typeof __propDef.props}  ToolbarProps */
-/** @typedef {typeof __propDef.events}  ToolbarEvents */
-/** @typedef {typeof __propDef.slots}  ToolbarSlots */
-export default class Toolbar extends SvelteComponentTyped<{
-    classes?: string;
-    ariaLabel?: string;
-    orientation?: "horizontal" | "vertical";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-    controls: {};
-}> {
-}
-export type ToolbarProps = typeof __propDef.props;
-export type ToolbarEvents = typeof __propDef.events;
-export type ToolbarSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        classes?: string;
-        ariaLabel?: string;
-        orientation?: 'horizontal' | 'vertical';
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        controls: {};
-    };
-};
-export {};

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

@@ -1,32 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        id?: string;
-        icon?: string;
-        label?: string;
-        disabled?: boolean;
-        classes?: string;
-        helpText?: string | null;
-        selected?: boolean;
-        custom?: boolean;
-        hasAriaControls?: boolean;
-        sticky?: boolean;
-        transient?: boolean;
-        disableHelp?: boolean;
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        custom: {};
-        default: {};
-    };
-};
-export type ToolbarButtonProps = typeof __propDef.props;
-export type ToolbarButtonEvents = typeof __propDef.events;
-export type ToolbarButtonSlots = typeof __propDef.slots;
-export default class ToolbarButton extends SvelteComponentTyped<ToolbarButtonProps, ToolbarButtonEvents, ToolbarButtonSlots> {
-}
-export {};

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

@@ -1,16 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        classes?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ToolbarDividerProps = typeof __propDef.props;
-export type ToolbarDividerEvents = typeof __propDef.events;
-export type ToolbarDividerSlots = typeof __propDef.slots;
-export default class ToolbarDivider extends SvelteComponentTyped<ToolbarDividerProps, ToolbarDividerEvents, ToolbarDividerSlots> {
-}
-export {};

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

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        resetHelp?: () => void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ToolbarsContainerProps = typeof __propDef.props;
-export type ToolbarsContainerEvents = typeof __propDef.events;
-export type ToolbarsContainerSlots = typeof __propDef.slots;
-export default class ToolbarsContainer extends SvelteComponentTyped<ToolbarsContainerProps, ToolbarsContainerEvents, ToolbarsContainerSlots> {
-    get resetHelp(): () => void;
-}
-export {};

package/dist/inputs/ButtonGroup/ButtonGroup.svelte

@@ -1,55 +0,0 @@
-<script>
-  import { setContext } from "svelte";
-  import { writable } from "svelte/store";
-
-  export let name = "";
-  export let legend = "";
-  export let value;
-  export let visuallyHideLegend = false;
-
-  // create the store
-  const selectedValue = writable(value);
-
-  // Sync the store with the prop on mount and when the prop changes
-  $: selectedValue.set(value);
-
-  //  When store changes and update prop
-
-  $: if ($selectedValue !== value) {
-    value = $selectedValue;
-  }
-
-  // Create a context to share with child Button components
-  setContext("buttonGroup", {
-    groupName: name,
-    selectedValue,
-  });
-</script>
-
-<fieldset class="button-group">
-  {#if legend}
-    <legend class:ons-u-vh="{visuallyHideLegend}">{legend}</legend>
-  {/if}
-  <div class="buttons">
-    <slot />
-  </div>
-</fieldset>
-
-<style>
-  .button-group {
-    display: inline-block;
-  }
-
-  legend {
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-  }
-
-  .buttons {
-    display: flex;
-    gap: 8px;
-    background: #f5f5f6;
-    padding: 4px;
-    border-radius: 8px;
-    justify-content: space-between;
-  }</style>

package/dist/inputs/ButtonGroup/ButtonGroupItem.svelte

@@ -1,103 +0,0 @@
-<script>
-  import { getContext } from "svelte";
-
-  export let value = "";
-  export let label = "";
-
-  // Get the parent ButtonGroup context
-  const buttonGroup = getContext("buttonGroup");
-  const { selectedValue } = buttonGroup;
-
-  // Reactive variable to track selection
-  let selected = false;
-
-  // Subscribe to selectedValue store
-  $: selectedValue.subscribe(($selectedValue) => {
-    selected = $selectedValue === value;
-  });
-
-  function handleClick() {
-    selectedValue.set(value); // Update the store
-  }
-
-  let buttonRef;
-
-  function handleKeydown(event) {
-    const buttons = Array.from(document.querySelectorAll(`[name="${buttonGroup.groupName}"]`));
-    const currentIndex = buttons.indexOf(buttonRef);
-
-    let newIndex = -1;
-
-    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-      newIndex = (currentIndex + 1) % buttons.length;
-    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-      newIndex = (currentIndex - 1 + buttons.length) % buttons.length;
-    } else if (event.key === "Enter" || event.key === " ") {
-      handleClick();
-      return;
-    }
-
-    if (newIndex !== -1) {
-      buttons[newIndex].focus();
-    }
-  }
-</script>
-
-<div class="button-container">
-  <input
-    type="radio"
-    id="{value}"
-    name="{buttonGroup.groupName}"
-    value="{value}"
-    checked="{selected}"
-    class="radio-input"
-    on:click="{handleClick}"
-    on:keydown="{handleKeydown}"
-    aria-checked="{selected}"
-    tabindex="0"
-    bind:this="{buttonRef}"
-  />
-  <label for="{value}" class="button" class:selected="{selected}" on:click="{handleClick}">
-    {label || value}
-  </label>
-</div>
-
-<style>
-  .button-container {
-    display: flex;
-  }
-
-  .radio-input {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .button {
-    flex-grow: 0;
-    padding: 4px 8px;
-    border: none;
-    background: transparent;
-    font-size: 14px;
-    cursor: pointer;
-    border-radius: 6px;
-    transition: background 0.2s ease, color 0.2s ease;
-    color: #707071;
-    text-align: center;
-  }
-
-  .button:hover {
-    background-color: #e8e8e8;
-  }
-
-  .button:focus {
-    box-shadow: orange 0 0 0 2px;
-  }
-
-  .button.selected {
-    background: white;
-    font-weight: bold;
-    color: #206095;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-  }</style>