diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 45441651..b95225f2 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -3945,13 +3945,11 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | -------------------------------- | -------------------------------------------- | -| selected | No | let | Yes | number | 0 | Specify the selected tab index | -| type | No | let | No | "default" | "container" | "default" | Specify the type of tabs | -| autoWidth | No | let | No | boolean | false | Set to `true` for tabs to have an auto-width | -| iconDescription | No | let | No | string | "Show menu options" | Specify the ARIA label for the chevron icon | -| triggerHref | No | let | No | string | "#" | Specify the tab trigger href attribute | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | -------------------------------------------- | +| selected | No | let | Yes | number | 0 | Specify the selected tab index | +| contained | No | let | No | boolean | false | Set to `true` for tabs to be contained | +| autoWidth | No | let | No | boolean | false | Set to `true` for tabs to have an auto-width | ### Slots @@ -3964,8 +3962,6 @@ None. | Event name | Type | Detail | | :--------- | :--------- | :----- | -| keypress | forwarded | -- | -| click | forwarded | -- | | change | dispatched | -- | ## `TabsSkeleton` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 60178302..19257551 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -11856,13 +11856,13 @@ } ], "events": [ - { "type": "forwarded", "name": "click", "element": "li" }, - { "type": "forwarded", "name": "mouseover", "element": "li" }, - { "type": "forwarded", "name": "mouseenter", "element": "li" }, - { "type": "forwarded", "name": "mouseleave", "element": "li" } + { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "forwarded", "name": "mouseover", "element": "a" }, + { "type": "forwarded", "name": "mouseenter", "element": "a" }, + { "type": "forwarded", "name": "mouseleave", "element": "a" } ], "typedefs": [], - "rest_props": { "type": "Element", "name": "li" } + "rest_props": { "type": "Element", "name": "a" } }, { "moduleName": "TabContent", @@ -12187,11 +12187,11 @@ "reactive": true }, { - "name": "type", + "name": "contained", "kind": "let", - "description": "Specify the type of tabs", - "type": "\"default\" | \"container\"", - "value": "\"default\"", + "description": "Set to `true` for tabs to be contained", + "type": "boolean", + "value": "false", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12209,30 +12209,6 @@ "isRequired": false, "constant": false, "reactive": false - }, - { - "name": "iconDescription", - "kind": "let", - "description": "Specify the ARIA label for the chevron icon", - "type": "string", - "value": "\"Show menu options\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false - }, - { - "name": "triggerHref", - "kind": "let", - "description": "Specify the tab trigger href attribute", - "type": "string", - "value": "\"#\"", - "isFunction": false, - "isFunctionDeclaration": false, - "isRequired": false, - "constant": false, - "reactive": false } ], "moduleExports": [], @@ -12240,11 +12216,7 @@ { "name": "__default__", "default": true, "slot_props": "{}" }, { "name": "content", "default": false, "slot_props": "{}" } ], - "events": [ - { "type": "forwarded", "name": "keypress", "element": "div" }, - { "type": "forwarded", "name": "click", "element": "a" }, - { "type": "dispatched", "name": "change" } - ], + "events": [{ "type": "dispatched", "name": "change" }], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, diff --git a/docs/src/pages/components/Tabs.svx b/docs/src/pages/components/Tabs.svx index 90595b5a..6ef7ed36 100644 --- a/docs/src/pages/components/Tabs.svx +++ b/docs/src/pages/components/Tabs.svx @@ -60,9 +60,9 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non- -## Container type +## Contained - + @@ -77,6 +77,6 @@ Using keyboard navigation (left and right arrow keys) will skip to the next non- -## Skeleton (container) +## Skeleton (contained) - \ No newline at end of file + \ No newline at end of file diff --git a/src/Tabs/Tab.svelte b/src/Tabs/Tab.svelte index 1bf59aa3..5ce4cce1 100644 --- a/src/Tabs/Tab.svelte +++ b/src/Tabs/Tab.svelte @@ -30,12 +30,19 @@ - + {label} + diff --git a/src/Tabs/Tabs.svelte b/src/Tabs/Tabs.svelte index 987abbba..02bbb448 100644 --- a/src/Tabs/Tabs.svelte +++ b/src/Tabs/Tabs.svelte @@ -3,26 +3,15 @@ export let selected = 0; /** - * Specify the type of tabs - * @type {"default" | "container"} + * Set to `true` for tabs to be contained */ - export let type = "default"; + export let contained = false; /** Set to `true` for tabs to have an auto-width */ export let autoWidth = false; - /** - * Specify the ARIA label for the chevron icon - * @type {string} - */ - export let iconDescription = "Show menu options"; - - /** Specify the tab trigger href attribute */ - export let triggerHref = "#"; - import { createEventDispatcher, afterUpdate, setContext, tick } from "svelte"; import { writable, derived } from "svelte/store"; - import ChevronDown from "../icons/ChevronDown.svelte"; const dispatch = createEventDispatcher(); @@ -122,43 +111,11 @@ diff --git a/src/Tabs/TabsSkeleton.svelte b/src/Tabs/TabsSkeleton.svelte index 1fdc68fc..afd81be3 100644 --- a/src/Tabs/TabsSkeleton.svelte +++ b/src/Tabs/TabsSkeleton.svelte @@ -14,21 +14,18 @@
-
    +
    {#each Array.from({ length: count }, (_, i) => i) as item} -
  • -
    - -
    -
  • + + + {/each} -
+
diff --git a/types/Tabs/Tab.svelte.d.ts b/types/Tabs/Tab.svelte.d.ts index f5444607..8732c77e 100644 --- a/types/Tabs/Tab.svelte.d.ts +++ b/types/Tabs/Tab.svelte.d.ts @@ -1,7 +1,7 @@ import type { SvelteComponentTyped } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; -type RestProps = SvelteHTMLElements["li"]; +type RestProps = SvelteHTMLElements["a"]; export interface TabProps extends RestProps { /** diff --git a/types/Tabs/Tabs.svelte.d.ts b/types/Tabs/Tabs.svelte.d.ts index 4a336331..2a7ec56d 100644 --- a/types/Tabs/Tabs.svelte.d.ts +++ b/types/Tabs/Tabs.svelte.d.ts @@ -11,10 +11,10 @@ export interface TabsProps extends RestProps { selected?: number; /** - * Specify the type of tabs - * @default "default" + * Set to `true` for tabs to be contained + * @default false */ - type?: "default" | "container"; + contained?: boolean; /** * Set to `true` for tabs to have an auto-width @@ -22,27 +22,11 @@ export interface TabsProps extends RestProps { */ autoWidth?: boolean; - /** - * Specify the ARIA label for the chevron icon - * @default "Show menu options" - */ - iconDescription?: string; - - /** - * Specify the tab trigger href attribute - * @default "#" - */ - triggerHref?: string; - [key: `data-${string}`]: any; } export default class Tabs extends SvelteComponentTyped< TabsProps, - { - keypress: WindowEventMap["keypress"]; - click: WindowEventMap["click"]; - change: CustomEvent; - }, + { change: CustomEvent }, { default: {}; content: {} } > {}