@likable-hair/svelte 3.0.85 → 3.0.86

package/dist/components/composed/forms/DatePickerTextField.svelte

@@ -149,6 +149,7 @@ $:
               name="mdi-calendar"
               click
               on:click={() => menuOpened = !menuOpened}
+              tabindex={-1}
             ></Icon>
           </slot>
         </svelte:fragment>
@@ -186,6 +187,7 @@ $:
           on:day-click={handleDateSelect}
           on:year-click={handleYearSelect}
           on:month-click={handleMonthSelect}
+          skipTabs
         ></DatePicker>
       </div>
     </Dialog>
@@ -214,6 +216,7 @@ $:
           on:day-click={handleDateSelect}
           on:year-click={handleYearSelect}
           on:month-click={handleMonthSelect}
+          skipTabs
         ></DatePicker>
       </div>
     </Menu>

package/dist/components/simple/buttons/Button.css

@@ -18,6 +18,8 @@
   --button-default-disabled-background-color: rgb(var(--global-color-primary-500), .6);
   --button-default-disabled-color: rgb(var(--global-color-grey-50), .6);
   --button-default-text-active-background-color: rgb(var(--global-color-primary-500), 0.4);
+  --button-default-icon-active-color: rgb(var(--global-color-primary-500));
+  --button-default-icon-focus-color: rgb(var(--global-color-primary-500));
   --button-default-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.3);
   --button-default-text-font-weight: 600;
 }

package/dist/components/simple/buttons/Button.svelte

@@ -282,7 +282,7 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
     outline: 0;
     border-radius: var(
       --button-border-radius, 
-      var(--button-default--icon-border-radius)
+      var(--button-default-icon-border-radius)
     );
     display: flex;
     align-items: center;
@@ -309,6 +309,20 @@ import CircularLoader from "../loaders/CircularLoader.svelte";
     background-color: var(--button-hover-background-color, transparent);
   }
 
+  .button-icon:active:not(.disabled) {
+    color: var(
+      --button-active-color,
+      var(--button-default-icon-active-color)
+    );
+  }
+
+  .button-icon:focus:not(.disabled) {
+    color: var(
+      --button-focus-color,
+      var(--button-default-icon-focus-color)
+    );
+  }
+
   .no-select {
     -webkit-touch-callout: none; /* iOS Safari */
     -webkit-user-select: none; /* Safari */

package/dist/components/simple/dates/DatePicker.svelte

@@ -10,7 +10,7 @@ let clazz = {};
 export { clazz as class };
 export let selectedYear = (/* @__PURE__ */ new Date()).getFullYear(), selectedMonth = (/* @__PURE__ */ new Date()).getMonth(), selectedDate = void 0, visibleMonth = selectedMonth, visibleYear = selectedYear, view = "day", locale = "it", selectableYears = [...Array(150).keys()].map(
   (i) => i + ((/* @__PURE__ */ new Date()).getFullYear() - 75)
-);
+), skipTabs = false;
 let dispatch = createEventDispatcher();
 let selectorText = void 0;
 let elementDisabled = "date";
@@ -73,16 +73,18 @@ function handleMonthChange() {
   <div
     class="header {clazz.header || ''}"
   >
-    <span
+    <button
       class:disabled={elementDisabled == "year"}
       on:click={() => {
         view = "year";
       }}
       on:keypress={() => {
         view = "year";
-      }}>{visibleYear}</span
-    >
-    <h2
+      }}
+      class="unstyled year"
+      tabindex={skipTabs ? -1 : undefined}
+    >{visibleYear}</button>
+    <button
       class:disabled={elementDisabled == "date"}
       on:click={() => {
         view = "day";
@@ -90,11 +92,13 @@ function handleMonthChange() {
       on:keypress={() => {
         view = "day";
       }}
+      class="unstyled day"
+      tabindex={skipTabs ? -1 : undefined}
     >
       {#if !!selectedDate}
         {dateToString(selectedDate, "dayAndMonth", locale)}
       {/if}
-    </h2>
+    </button>
   </div>
   <div class="body">
     {#if visibleSelector}
@@ -106,16 +110,19 @@ function handleMonthChange() {
             --icon-size="25pt"
             icon="mdi-chevron-left"
             on:click={previous}
+            tabindex={skipTabs ? -1 : undefined}
           />
         </div>
         <div class="row-elem selector">
           {#key selectorText}
-            <div
+            <button
+              class="unstyled selector-text"
               on:click={SelectorHandler}
               on:keypress={SelectorHandler}
+              tabindex={skipTabs ? -1 : undefined}
             >
               {selectorText}
-            </div>
+            </button>
           {/key}
         </div>
         <div class="row-elem">
@@ -125,6 +132,7 @@ function handleMonthChange() {
             --icon-size="25pt"
             icon="mdi-chevron-right"
             on:click={next}
+            tabindex={skipTabs ? -1 : undefined}
           />
         </div>
       </div>
@@ -191,17 +199,23 @@ function handleMonthChange() {
       var(--date-picker-default-header-color)
     );
   }
-  .header > h2 {
+  .header > button.day {
     margin-left: 15px;
     margin-top: 5px;
     transition: 0.1s;
     opacity: 0.8;
+    display: block;
+    font-size: 1.3rem;
+    font-weight: 700;
   }
-  .header > h2:hover {
+  .header > button.day:hover {
     opacity: 1;
     cursor: pointer;
   }
-  .header > span {
+  .header > button.day:focus, .header > button.day:active {
+    text-decoration: underline;
+  }
+  .header > button.year {
     display: inline-block;
     line-height: 100%;
     margin-left: 15px;
@@ -209,10 +223,13 @@ function handleMonthChange() {
     opacity: 0.8;
     transition: 0.1s;
   }
-  .header > span:hover {
+  .header > button.year:hover {
     opacity: 1;
     cursor: pointer;
   }
+  .header > button.year:focus, .header > button.year:active {
+    text-decoration: underline;
+  }
   .selector-row {
     display: flex;
     justify-content: space-between;
@@ -235,4 +252,18 @@ function handleMonthChange() {
     pointer-events: none;
     opacity: 1 !important;
   }
+
+  .selector-text:active, .selector-text:focus {
+    color: rgb(var(--global-color-primary-500));
+  }
+
+  button.unstyled {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+  }
 </style>

package/dist/components/simple/dates/DatePicker.svelte.d.ts

@@ -17,6 +17,7 @@ declare const __propDef: {
         view?: "day" | "year" | "month" | undefined;
         locale?: Locale | undefined;
         selectableYears?: number[] | undefined;
+        skipTabs?: boolean | undefined;
     };
     events: {
         'day-click': CustomEvent<{

package/dist/components/simple/media/Icon.svelte

@@ -1,4 +1,4 @@
-<script>export let name, click = false;
+<script>export let name, click = false, tabindex = void 0;
 let clazz = "";
 export { clazz as class };
 import "../common/materialDesign.css";
@@ -9,6 +9,7 @@ import "../common/materialDesign.css";
     on:click
     on:keypress
     class="{clazz}"
+    {tabindex}
   >
     <span
       class="icon mdi {name} {clazz}"
@@ -17,9 +18,6 @@ import "../common/materialDesign.css";
 {:else}
   <span
     class="icon mdi {name} {clazz}"
-    class:click
-    on:click
-    on:keypress
   />
 {/if}
 
@@ -42,6 +40,13 @@ import "../common/materialDesign.css";
     )
   }
 
+  button:active, button:focus {
+    color: var(
+      --icon-active-color,
+      rgb(var(--global-color-primary-500))
+    );
+  }
+
   .icon {
     font-size: var(
       --icon-size,

package/dist/components/simple/media/Icon.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         name: string;
         click?: boolean | undefined;
+        tabindex?: number | null | undefined;
         class?: string | undefined;
     };
     events: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "3.0.85",
+  "version": "3.0.86",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",