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

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         helpText?: string | null;
         selected?: boolean;
         custom?: boolean;
+        hasAriaControls?: boolean;
     };
     events: {
         click: CustomEvent<any>;

package/dist/inputs/Toolbar/HelpModal.svelte

@@ -21,7 +21,8 @@ $: if (triggerElement) {
     const spaceRight = window.innerWidth - rect.right;
     // Default to position below the trigger element
     modalPosition = {
-        top: rect.bottom + window.scrollY + 10,
+        // top: rect.bottom + window.scrollY + 10,
+        top: window.scrollY + 55,
         left: window.scrollX - 10,
     };
     // Align notch with the center of the trigger element
@@ -118,7 +119,8 @@ function handleKeydown(event) {
         />
       </div>
       <div class="ons-grid--flex ons-grid--between ons-grid--vertical-center">
-        <a on:click="{handleSkip}">Skip</a>
+        <button class="btn-link" on:click="{handleSkip}" aria-label="Skip instructions">Skip</button
+        >
         {#if $buttonIds.indexOf($activeModalId) > 0}
           <span style="margin-left:auto; margin-right:10px">
             <Button variant="secondary" on:click="{previousModal}">Back</Button>
@@ -154,7 +156,7 @@ function handleKeydown(event) {
   }
 
   .help-modal {
-    position: absolute;
+    position: fixed;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
@@ -191,4 +193,28 @@ function handleKeydown(event) {
   .ons-padding-4 {
     padding-top: var(--4-units, 16px);
     padding-bottom: var(--4-units, 16px);
+  }
+
+  button.btn-link {
+    line-height: 1.3;
+    color: var(--link, #206095);
+    background: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-underline-position: under;
+  }
+  button.btn-link:hover {
+    color: var(--link-hover, #003c57) !important;
+    text-decoration-thickness: 2px;
+  }
+  button.btn-link:focus {
+    background-color: #fbc900 !important;
+    box-shadow: 0 -2px #fbc900, 0 4px #222;
+    color: #222 !important;
+    outline: 3px solid transparent;
+    outline-offset: 1px;
+    text-decoration: none;
   }</style>

package/dist/inputs/Toolbar/Toolbar.svelte

@@ -48,7 +48,7 @@
     display: flex;
     align-items: center;
     box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-    border-radius: 16px;
+    border-radius: 8px;
     padding: 8px;
     justify-content: flex-start;
     align-content: flex-start;
@@ -57,6 +57,8 @@
     max-width: -moz-fit-content;
     max-width: fit-content;
     height: 100%;
+    margin: 8px;
+    background: white;
   }
 
   .flex-col {

package/dist/inputs/Toolbar/ToolbarButton.svelte

@@ -11,6 +11,7 @@ export let classes = "";
 export let helpText = null;
 export let selected = false;
 export let custom = false;
+export let hasAriaControls = false;
 const dispatch = createEventDispatcher();
 let buttonElement;
 // Get activeModalId store from context
@@ -53,7 +54,7 @@ function handleClick() {
       disabled="{disabled}"
       bind:this="{buttonElement}"
       id="button-{id}"
-      aria-controls="panel-{id}"
+      aria-controls="{hasAriaControls ? `panel-${id}` : undefined}"
     >
       {#if icon}
         <Icon type="{icon}" selected="{isActive ? true : false}" disabled="{disabled}" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.86-component.toolbar",
+  "version": "0.1.88-component.toolbar",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -17,7 +17,8 @@
     "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"
+    "postversion": "git push origin && git push origin --tags",
+    "watch:package": "npx nodemon --ext svelte,js,ts --ignore dist/ --exec 'npm run build:package'"
   },
   "license": "MIT",
   "types": "./dist/@types/index.d.ts",
@@ -71,6 +72,7 @@
     "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",