spaper 0.4.6 → 0.5.6

package/README.md

@@ -51,6 +51,33 @@ npm i spaper
 
 <hr />
 
+### Sponsors
+
+Thanks to these generous people! :heart:
+
+<table>
+  <tr>
+    <td align="center">
+      <a href="https://github.com/mehdi-dalil">
+        <img src="https://avatars.githubusercontent.com/u/65339771?v=4" width="80px;" alt=""/><br />
+        <sub><b>mehdi-dalil</b></sub>
+      </a>
+    </td>
+  </tr>
+</table>    
+
+
+### Donate
+
+Any donation is greatly appreciated :heart:
+
+| Source          | Link / Address                             |
+| :-------------- | :------------------------------------------|
+| Github Sponsor  | https://github.com/sponsors/Oli8           |
+| PayPal          | https://paypal.me/OliCrt                   |
+| Bitcoin         | 1Ez3Ts2WShUcbeGCjhZapdxVDK77DbYjdU         |
+| Ethereum        | 0x6cd3d316a6ee6d210894981e1fcc83a00a27ede2 |
+
 #### Components
 
 - Alert

package/components/Button.svelte

@@ -9,6 +9,7 @@
   </a>
 {:else}
   <button {...attr}
+          type={nativeType}
           class:disabled
           disabled={disabled}
           on:click>
@@ -24,6 +25,7 @@ export let size = 'default';
 export let block = false;
 export let disabled = false;
 export let outline = null;
+export let nativeType = null;
 export let isLink = false;
 export let href = null;
 export let external = false;

package/components/Button.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         block?: boolean;
         disabled?: boolean;
         outline?: PaperType;
+        nativeType?: 'submit' | 'reset' | 'button';
         isLink?: boolean;
         href?: string;
         external?: boolean;

package/components/Tabs/Tab.svelte

@@ -1,7 +1,11 @@
 <div {...$$restProps}
      class="{$$restProps.class ?? ''} content margin"
      class:content--active={active}
-     aria-hidden={!active}>
+     id={controlLabel}
+     aria-hidden={!active}
+     aria-labelledby={controlLabel}
+     role="tabpanel"
+     tabindex={active ? 0 : -1}>
   {#if $$slots.header}
     <div bind:this={header}
          style="display: none">
@@ -13,6 +17,7 @@
 
 <script >import { onMount, getContext } from 'svelte';
 ;
+import { genControlLabel } from './index';
 export let label;
 const key = {};
 let active = false;
@@ -33,6 +38,7 @@ onMount(() => {
         }
     ]);
 });
+$: controlLabel = genControlLabel(label);
 </script>
 
 <style>

package/components/Tabs/Tabs.svelte

@@ -2,8 +2,13 @@
      class={`row flex-${placement} tabs ${$$restProps.class ?? ''}`}
      style={`text-align: ${contentAlign}`}>
   {#each $tabs as { label, header }, index}
+    {@const selected = index == activeTab}
     <div class="tabs-label-header"
-         class:tabs-label-header--active={index == activeTab}
+         class:tabs-label-header--active={selected}
+         aria-selected={selected}
+         aria-controls={genControlLabel(label)}
+         role="tab"
+         tabindex={selected ? 0 : -1}
          on:click={showContent.bind(null, index)}>
       {#if header}
         {@html header.innerHTML}
@@ -20,6 +25,7 @@
 import { writable } from 'svelte/store';
 ;
 ;
+import { genControlLabel } from './index';
 export let activeTab = 0;
 export let placement = 'spaces';
 export let contentAlign = 'left';

package/components/Tabs/index.d.ts

@@ -12,4 +12,5 @@ export interface TabDataType {
     activeTab: number | string;
     tabs: Writable<iTab[]>;
 }
+export declare function genControlLabel(label: string): string;
 export { Tabs, Tab };

package/components/Tabs/index.js

@@ -1,3 +1,6 @@
 import Tabs from './Tabs.svelte';
 import Tab from './Tab.svelte';
+export function genControlLabel(label) {
+    return `paper-tab-${label}`;
+}
 export { Tabs, Tab };

package/package.json

@@ -8,7 +8,7 @@
     "papercss",
     "components"
   ],
-  "version": "0.4.6",
+  "version": "0.5.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Oli8/spaper.git"
@@ -63,4 +63,4 @@
     "./utils": "./utils.js"
   },
   "svelte": "./index.js"
-}
+}