@onsvisual/svelte-components 0.1.90-component.toolbar → 0.1.92-component.toolbar

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

@@ -10,6 +10,8 @@ declare const __propDef: {
         selected?: boolean;
         custom?: boolean;
         hasAriaControls?: boolean;
+        sticky?: boolean;
+        transient?: boolean;
     };
     events: {
         click: CustomEvent<any>;

package/dist/inputs/Toolbar/Icon.svelte

@@ -97,6 +97,12 @@
       d: "M17.5 22.5C17.5 22.7967 17.412 23.0867 17.2472 23.3334C17.0824 23.58 16.8481 23.7723 16.574 23.8858C16.2999 23.9993 15.9983 24.0291 15.7074 23.9712C15.4164 23.9133 15.1491 23.7704 14.9393 23.5607C14.7296 23.3509 14.5867 23.0836 14.5288 22.7926C14.471 22.5017 14.5007 22.2001 14.6142 21.926C14.7277 21.6519 14.92 21.4176 15.1667 21.2528C15.4133 21.088 15.7033 21 16 21C16.3978 21 16.7794 21.158 17.0607 21.4393C17.342 21.7206 17.5 22.1022 17.5 22.5ZM16 9C13.2425 9 11 11.0188 11 13.5V14C11 14.2652 11.1054 14.5196 11.2929 14.7071C11.4804 14.8946 11.7348 15 12 15C12.2652 15 12.5196 14.8946 12.7071 14.7071C12.8946 14.5196 13 14.2652 13 14V13.5C13 12.125 14.3463 11 16 11C17.6538 11 19 12.125 19 13.5C19 14.875 17.6538 16 16 16C15.7348 16 15.4804 16.1054 15.2929 16.2929C15.1054 16.4804 15 16.7348 15 17V18C15 18.2652 15.1054 18.5196 15.2929 18.7071C15.4804 18.8946 15.7348 19 16 19C16.2652 19 16.5196 18.8946 16.7071 18.7071C16.8946 18.5196 17 18.2652 17 18V17.91C19.28 17.4913 21 15.6725 21 13.5C21 11.0188 18.7575 9 16 9ZM29 16C29 18.5712 28.2376 21.0846 26.8091 23.2224C25.3807 25.3603 23.3503 27.0265 20.9749 28.0104C18.5995 28.9944 15.9856 29.2518 13.4638 28.7502C10.9421 28.2486 8.6257 27.0105 6.80762 25.1924C4.98953 23.3743 3.75141 21.0579 3.2498 18.5362C2.74819 16.0144 3.00563 13.4006 3.98957 11.0251C4.97351 8.64968 6.63975 6.61935 8.77759 5.1909C10.9154 3.76244 13.4288 3 16 3C19.4467 3.00364 22.7512 4.37445 25.1884 6.81163C27.6256 9.24882 28.9964 12.5533 29 16ZM27 16C27 13.8244 26.3549 11.6977 25.1462 9.88873C23.9375 8.07979 22.2195 6.66989 20.2095 5.83733C18.1995 5.00476 15.9878 4.78692 13.854 5.21136C11.7202 5.6358 9.76021 6.68345 8.22183 8.22183C6.68345 9.7602 5.63581 11.7202 5.21137 13.854C4.78693 15.9878 5.00477 18.1995 5.83733 20.2095C6.66989 22.2195 8.07979 23.9375 9.88873 25.1462C11.6977 26.3549 13.8244 27 16 27C18.9164 26.9967 21.7123 25.8367 23.7745 23.7745C25.8367 21.7123 26.9967 18.9164 27 16Z",
       viewBox: "0 0 32 32",
     },
+    bin: {
+      selected:
+        "M25 7V26C25 26.2652 24.8946 26.5196 24.7071 26.7071C24.5196 26.8946 24.2652 27 24 27H8C7.73478 27 7.48043 26.8946 7.29289 26.7071C7.10536 26.5196 7 26.2652 7 26V7H25Z",
+      d: "M27 6H22V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2H13C12.2044 2 11.4413 2.31607 10.8787 2.87868C10.3161 3.44129 10 4.20435 10 5V6H5C4.73478 6 4.48043 6.10536 4.29289 6.29289C4.10536 6.48043 4 6.73478 4 7C4 7.26522 4.10536 7.51957 4.29289 7.70711C4.48043 7.89464 4.73478 8 5 8H6V26C6 26.5304 6.21071 27.0391 6.58579 27.4142C6.96086 27.7893 7.46957 28 8 28H24C24.5304 28 25.0391 27.7893 25.4142 27.4142C25.7893 27.0391 26 26.5304 26 26V8H27C27.2652 8 27.5196 7.89464 27.7071 7.70711C27.8946 7.51957 28 7.26522 28 7C28 6.73478 27.8946 6.48043 27.7071 6.29289C27.5196 6.10536 27.2652 6 27 6ZM12 5C12 4.73478 12.1054 4.48043 12.2929 4.29289C12.4804 4.10536 12.7348 4 13 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V6H12V5ZM24 26H8V8H24V26ZM14 13V21C14 21.2652 13.8946 21.5196 13.7071 21.7071C13.5196 21.8946 13.2652 22 13 22C12.7348 22 12.4804 21.8946 12.2929 21.7071C12.1054 21.5196 12 21.2652 12 21V13C12 12.7348 12.1054 12.4804 12.2929 12.2929C12.4804 12.1054 12.7348 12 13 12C13.2652 12 13.5196 12.1054 13.7071 12.2929C13.8946 12.4804 14 12.7348 14 13ZM20 13V21C20 21.2652 19.8946 21.5196 19.7071 21.7071C19.5196 21.8946 19.2652 22 19 22C18.7348 22 18.4804 21.8946 18.2929 21.7071C18.1054 21.5196 18 21.2652 18 21V13C18 12.7348 18.1054 12.4804 18.2929 12.2929C18.4804 12.1054 18.7348 12 19 12C19.2652 12 19.5196 12.1054 19.7071 12.2929C19.8946 12.4804 20 12.7348 20 13Z",
+      viewBox: "0 0 32 32",
+    },
   };
 </script>
 

package/dist/inputs/Toolbar/Toolbar.svelte

@@ -42,6 +42,7 @@
 <style>
   .grid--flex {
     display: flex;
+    gap: 4px;
   }
 
   .toolbar {
@@ -59,6 +60,7 @@
     height: 100%;
     margin: 8px;
     background: white;
+    gap: 8px;
   }
 
   .flex-col {

package/dist/inputs/Toolbar/ToolbarButton.svelte

@@ -12,6 +12,8 @@ export let helpText = null;
 export let selected = false;
 export let custom = false;
 export let hasAriaControls = false;
+export let sticky = false;
+export let transient = false;
 const dispatch = createEventDispatcher();
 let buttonElement;
 // Get activeModalId store from context
@@ -31,9 +33,17 @@ $: isActive = $activeModalId === id;
 // Subscribe to the store to determine if this modal is active
 function handleClick() {
     if (!disabled) {
+        if (transient) {
+            // If it's a transient button, just trigger the action and return
+            dispatch("click");
+            return;
+        }
         dispatch("click");
+        if ($activeModalId === id && sticky) {
+            // If it's already active and sticky, keep it selected
+            return;
+        }
         activeModalId.set(isActive ? null : id); // Toggle the modal
-        // maybe something here to check if selected
     }
 }
 </script>
@@ -47,9 +57,9 @@ function handleClick() {
     <button
       type="button"
       aria-label="{label}"
-      class="{`toolbar-button ${disabled ? 'disabled' : ''}  ${
-        isActive ? 'selected' : ''
-      } ${classes}`}"
+      class="toolbar-button {disabled ? 'disabled' : ''} {isActive && !transient
+        ? 'selected'
+        : ''} {classes}"
       on:click="{handleClick}"
       disabled="{disabled}"
       bind:this="{buttonElement}"
@@ -57,7 +67,11 @@ function handleClick() {
       aria-controls="{hasAriaControls ? `panel-${id}` : undefined}"
     >
       {#if icon}
-        <Icon type="{icon}" selected="{isActive ? true : false}" disabled="{disabled}" />
+        <Icon
+          type="{icon}"
+          selected="{!transient ? (isActive ? true : false) : false}"
+          disabled="{disabled}"
+        />
       {:else}
         {label}
       {/if}
@@ -77,6 +91,37 @@ function handleClick() {
   {/if}
 </div>
 
+<!-- 
+
+/* /* Slightly darker gray when clicked */
+
+/* 
+button:active {
+  background-color: #d6d6d6; 
+}
+
+button.active {
+  background-color: #ddd; /* Selected button background */
+  border: 2px solid #333; /* Active button border */
+}
+
+button:hover:active {
+  background-color: #ccc; /* Slightly more contrast when active */
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: #f2f2f2;
+  border: 1px solid #ddd;
+}
+
+button:hover:disabled {
+  background-color: #f2f2f2; /* Keep it the same so disabled buttons don’t change on hover */
+  border: 1px solid #ddd;
+} */
+ -->
+
 <style>
   .toolbar-button-wrapper {
     position: relative;
@@ -101,4 +146,16 @@ function handleClick() {
   .selected {
     background: #e9eff4;
     border-radius: 8px;
+  }
+
+  button:hover {
+    background-color: #f5f5f6;
+    border-radius: 8px;
+  }
+
+  button:focus {
+    outline: 2px solid #fbc900;
+    outline-offset: 2px;
+    box-shadow: 0 0 2px 2px #222222;
+    border-radius: 8px;
   }</style>

package/dist/inputs/Toolbar/ToolbarDivider.svelte

@@ -18,7 +18,6 @@ orientationStore.subscribe((value) => {
 
   .toolbar-divider.horizontal {
     width: 1px;
-    margin: 0 0.5rem;
   }
 
   .toolbar-divider.vertical {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.90-component.toolbar",
+  "version": "0.1.92-component.toolbar",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",