@pine-ds/core 1.1.0 → 1.3.0-dev.0

package/dist/collection/components/pds-table/stories/pds-table.stories.js

@@ -1,227 +0,0 @@
-import { html } from 'lit-html';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
-
-export default {
-  argTypes: extractArgTypes('pds-table'),
-  component: 'pds-table',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onclick', 'pdsTableRowSelected'],
-    },
-  },
-  title: 'components/Table',
-};
-
-const BaseTemplate = (args) => html`
-<pds-table
-  compact="${args.compact}"
-  component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
->
-  <pds-table-head>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-  </pds-table-head>
-  <pds-table-body>
-    <pds-table-row value="row1">
-      <pds-table-cell>Row Item Alpha</pds-table-cell>
-      <pds-table-cell>Row Item Alpha</pds-table-cell>
-      <pds-table-cell>Row Item Alpha</pds-table-cell>
-    </pds-table-row>
-    <pds-table-row value="row2">
-      <pds-table-cell>Row Item Bravo</pds-table-cell>
-      <pds-table-cell>Row Item Bravo</pds-table-cell>
-      <pds-table-cell>Row Item Bravo</pds-table-cell>
-    </pds-table-row>
-    <pds-table-row value="row3">
-      <pds-table-cell>Row Item Charlie</pds-table-cell>
-      <pds-table-cell>Row Item Charlie</pds-table-cell>
-      <pds-table-cell>Row Item Charlie</pds-table-cell>
-    </pds-table-row>
-  </pds-table-body>
-</pds-table>`;
-
-const ResponsiveTemplate = (args) => html`
-<pds-table
-  compact="${args.compact}"
-  component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
->
-  <pds-table-head>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-    <pds-table-head-cell>Column Title</pds-table-head-cell>
-  </pds-table-head>
-  <pds-table-body>
-    <pds-table-row value="responsive1">
-      <pds-table-cell>Row Item Alpha</pds-table-cell>
-      <pds-table-cell>Row Item Beta</pds-table-cell>
-      <pds-table-cell>Row Item Charlie</pds-table-cell>
-      <pds-table-cell>Row Item Delta</pds-table-cell>
-      <pds-table-cell>Row Item Echo</pds-table-cell>
-      <pds-table-cell>Row Item Foxtrot</pds-table-cell>
-      <pds-table-cell>Row Item Golf</pds-table-cell>
-      <pds-table-cell>Row Item Hotel</pds-table-cell>
-      <pds-table-cell>Row Item Juliett</pds-table-cell>
-      <pds-table-cell>Row Item Kilo</pds-table-cell>
-      <pds-table-cell>Row Item Lima</pds-table-cell>
-      <pds-table-cell>Row Item Mike</pds-table-cell>
-    </pds-table-row>
-    <pds-table-row value="responsive2">
-      <pds-table-cell>Row Item Alpha</pds-table-cell>
-      <pds-table-cell>Row Item Beta</pds-table-cell>
-      <pds-table-cell>Row Item Charlie</pds-table-cell>
-      <pds-table-cell>Row Item Delta</pds-table-cell>
-      <pds-table-cell>Row Item Echo</pds-table-cell>
-      <pds-table-cell>Row Item Foxtrot</pds-table-cell>
-      <pds-table-cell>Row Item Golf</pds-table-cell>
-      <pds-table-cell>Row Item Hotel</pds-table-cell>
-      <pds-table-cell>Row Item Juliett</pds-table-cell>
-      <pds-table-cell>Row Item Kilo</pds-table-cell>
-      <pds-table-cell>Row Item Lima</pds-table-cell>
-      <pds-table-cell>Row Item Mike</pds-table-cell>
-    </pds-table-row>
-    <pds-table-row value="responsive3">
-      <pds-table-cell>Row Item Alpha</pds-table-cell>
-      <pds-table-cell>Row Item Beta</pds-table-cell>
-      <pds-table-cell>Row Item Charlie</pds-table-cell>
-      <pds-table-cell>Row Item Delta</pds-table-cell>
-      <pds-table-cell>Row Item Echo</pds-table-cell>
-      <pds-table-cell>Row Item Foxtrot</pds-table-cell>
-      <pds-table-cell>Row Item Golf</pds-table-cell>
-      <pds-table-cell>Row Item Hotel</pds-table-cell>
-      <pds-table-cell>Row Item Juliett</pds-table-cell>
-      <pds-table-cell>Row Item Kilo</pds-table-cell>
-      <pds-table-cell>Row Item Lima</pds-table-cell>
-      <pds-table-cell>Row Item Mike</pds-table-cell>
-    </pds-table-row>
-  </pds-table-body>
-</pds-table>`;
-
-const SortableTemplate = (args) => html`
-<pds-table
-  compact="${args.compact}"
-  component-id="${args.componentId}"
-  fixed-column="${args.fixedColumn}"
-  responsive="${args.responsive}"
-  selectable="${args.selectable}"
->
-  <pds-table-head>
-    <pds-table-head-cell sortable=${args.sortable}>Name</pds-table-head-cell>
-    <pds-table-head-cell sortable=${args.sortable}>Email</pds-table-head-cell>
-    <pds-table-head-cell sortable=${args.sortable}>Email Marketing</pds-table-head-cell>
-  </pds-table-head>
-  <pds-table-body>
-    <pds-table-row>
-      <pds-table-cell>John Doe</pds-table-cell>
-      <pds-table-cell>john.doe@example.com</pds-table-cell>
-      <pds-table-cell>Subscribed</pds-table-cell>
-    </pds-table-row>
-    <pds-table-row>
-      <pds-table-cell>Jane Smith</pds-table-cell>
-      <pds-table-cell>jane.smith@example.com</pds-table-cell>
-      <pds-table-cell>Not Subscribed</pds-table-cell>
-    </pds-table-row>
-    <pds-table-row>
-      <pds-table-cell>Michael Johnson</pds-table-cell>
-      <pds-table-cell>michael.johnson@example.com</pds-table-cell>
-      <pds-table-cell>Subscribed</pds-table-cell>
-    </pds-table-row>
-    <pds-table-row>
-      <pds-table-cell>Susan Brown</pds-table-cell>
-      <pds-table-cell>susan.brown@example.com</pds-table-cell>
-      <pds-table-cell>Not Subscribed</pds-table-cell>
-    </pds-table-row>
-    <pds-table-row>
-      <pds-table-cell>William Davis</pds-table-cell>
-      <pds-table-cell>william.davis@example.com</pds-table-cell>
-      <pds-table-cell>Subscribed</pds-table-cell>
-    </pds-table-row>
-    <pds-table-row>
-      <pds-table-cell>Mary Wilson</pds-table-cell>
-      <pds-table-cell>mary.wilson@example.com</pds-table-cell>
-      <pds-table-cell>Not Subscribed</pds-table-cell>
-    </pds-table-row>
-    <pds-table-row>
-      <pds-table-cell>James Lee</pds-table-cell>
-      <pds-table-cell>james.lee@example.com</pds-table-cell>
-      <pds-table-cell>Subscribed</pds-table-cell>
-    </pds-table-row>
-    <pds-table-row>
-      <pds-table-cell>Linda Hall</pds-table-cell>
-      <pds-table-cell>linda.hall@example.com</pds-table-cell>
-      <pds-table-cell>Not Subscribed</pds-table-cell>
-    </pds-table-row>
-  </pds-table-body>
-</pds-table>`;
-
-export const Default = BaseTemplate.bind();
-Default.args = {
-  compact: false,
-  componentId: 'default',
-  fixedColumn: false,
-  responsive: false,
-  selectable: false,
-};
-
-export const Compact = BaseTemplate.bind();
-Compact.args = {
-  compact: true,
-  componentId: 'compact',
-  fixedColumn: false,
-  responsive: false,
-  selectable: false,
-};
-
-export const Selectable = BaseTemplate.bind();
-Selectable.args = {
-  compact: false,
-  componentId: 'selectable',
-  fixedColumn: false,
-  responsive: false,
-  selectable: true,
-};
-
-export const Responsive = ResponsiveTemplate.bind();
-Responsive.args = {
-  compact: false,
-  componentId: 'responsive',
-  fixedColumn: false,
-  responsive: true,
-  selectable: false,
-};
-
-export const fixedColumn = ResponsiveTemplate.bind();
-fixedColumn.args = {
-  compact: false,
-  componentId: 'responsive',
-  fixedColumn: true,
-  responsive: true,
-  selectable: false,
-};
-
-export const Sortable = SortableTemplate.bind();
-Sortable.args = {
-  compact: false,
-  componentId: 'sortable',
-  fixedColumn: false,
-  responsive: false,
-  selectable: false,
-  sortable: true,
-};

package/dist/collection/components/pds-tabs/pds-tab/pds-tab.css

@@ -1,160 +0,0 @@
-pds-tab {
-  --border-none: var(--pine-border-width-none);
-  --border-radius-availability: var(--pine-border-radius-100);
-  --border-radius-default: var(--pine-border-radius-125);
-  --border-radius-none: var(--pine-border-radius-0);
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
-  --color-background-active: var(--pine-color-charcoal-400);
-  --color-background-availability: var(--pine-color-white);
-  --color-background-default: var(--pine-color-grey-300);
-  --color-background-hover: var(--pine-color-grey-400);
-  --color-text-active: var(--pine-color-charcoal-400);
-  --color-text-active-inverse: var(--pine-color-white);
-  --color-text-default: var(--pine-color-charcoal-200);
-  --color-text-focus: var(--pine-color-charcoal-300);
-  --font-size-availability-content: var(--pine-font-size-075);
-  --font-size-default: var(--pine-font-size-100);
-  --font-size-filter-content: var(--pine-font-size-087);
-  --font-weight-default: var(--pine-font-weight-medium);
-  --line-height-availability-content: var(--pine-line-height-100);
-  --line-height-default: var(--pine-line-height-150);
-  --line-height-filter-content: var(--pine-line-height-125);
-  --outline: 4px solid var(--pine-color-blue-200);
-  --spacing-padding-none: var(--pine-spacing-0);
-  display: inline-block;
-  position: relative;
-}
-
-.pds-tab {
-  appearance: none;
-  background-color: transparent;
-  border: var(--border-none);
-  box-shadow: none;
-  color: inherit;
-  cursor: pointer;
-  font-family: inherit;
-  padding: var(--spacing-padding-none);
-  align-items: center;
-  color: var(--color-text-default);
-  display: inline-flex;
-  position: relative;
-  text-decoration: none;
-  white-space: nowrap;
-}
-.pds-tab.is-active, .pds-tab[aria-selected=true] {
-  color: var(--color-text-active);
-}
-.pds-tab.is-active .pds-tab__content::after, .pds-tab[aria-selected=true] .pds-tab__content::after {
-  opacity: 1;
-}
-.pds-tab:hover {
-  color: var(--color-text-active);
-}
-.pds-tab:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
-}
-.pds-tab .pds-tab__content {
-  font-family: inherit;
-  font-size: var(--font-size-default);
-  font-weight: var(--font-weight-default);
-  line-height: var(--line-height-default);
-  padding-block-end: 11px;
-  position: relative;
-}
-.pds-tab .pds-tab__content::after {
-  background-color: currentColor;
-  bottom: 0;
-  content: "";
-  height: 3px;
-  left: 0;
-  opacity: 0;
-  position: absolute;
-  right: 0;
-}
-.pds-tab .pds-tab-edge {
-  display: none;
-}
-
-.pds-tabs--availability {
-  --color-background-tab: transparent;
-}
-.pds-tabs--availability .pds-tab {
-  background-color: var(--color-background-tab);
-  border-radius: var(--border-radius-availability) var(--border-radius-availability) var(--border-radius-none) var(--border-radius-none);
-  padding: 8px 16px 13px;
-}
-.pds-tabs--availability .pds-tab.is-active, .pds-tabs--availability .pds-tab[aria-selected=true] {
-  --color-background-tab: var(--color-background-availability);
-}
-.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after, .pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after {
-  opacity: 1;
-}
-.pds-tabs--availability .pds-tab.is-active .pds-tab-edge, .pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge {
-  z-index: 1;
-}
-.pds-tabs--availability .pds-tab:hover:not(.is-active, [aria-selected=true]) {
-  --color-background-tab: var(--color-background-default);
-}
-.pds-tabs--availability .pds-tab:focus-visible {
-  color: var(--color-text-default);
-}
-.pds-tabs--availability .pds-tab__content {
-  font-size: var(--font-size-availability-content);
-  line-height: var(--line-height-availability-content);
-  padding-bottom: 7px;
-}
-.pds-tabs--availability .pds-tab-edge {
-  bottom: 0;
-  display: block;
-  height: 8px;
-  inset-inline-end: 100%;
-  overflow: hidden;
-  position: absolute;
-  width: 8px;
-}
-.pds-tabs--availability .pds-tab-edge::before {
-  border-radius: 50%;
-  bottom: 0;
-  box-shadow: 4px 4px 0 0 var(--color-background-tab);
-  content: "";
-  display: block;
-  height: 200%;
-  inset-inline-end: 0;
-  position: absolute;
-  width: 200%;
-}
-.pds-tabs--availability .pds-tab-edge--end {
-  inset-inline-end: unset;
-  inset-inline-start: 100%;
-}
-.pds-tabs--availability .pds-tab-edge--end::before {
-  box-shadow: -4px 4px 0 0 var(--color-background-tab);
-  inset-inline-end: unset;
-  inset-inline-start: 0;
-}
-
-.pds-tabs--filter {
-  --color-background-tab: var(--color-background-active);
-}
-.pds-tabs--filter .pds-tab {
-  background-color: var(--color-background-tab);
-  border-radius: 50px;
-  color: var(--color-text-active);
-  padding: 6px 15px;
-}
-.pds-tabs--filter .pds-tab.is-active, .pds-tabs--filter .pds-tab[aria-selected=true] {
-  --color-background-tab: var(--color-background-active);
-  color: var(--color-text-active-inverse);
-}
-.pds-tabs--filter .pds-tab:hover:not(.is-active, [aria-selected=true]) {
-  --color-background-tab: var(--color-background-hover);
-}
-.pds-tabs--filter .pds-tab__content {
-  font-size: var(--font-size-filter-content);
-  line-height: var(--line-height-filter-content);
-  padding-block-end: 0;
-}
-.pds-tabs--filter .pds-tab__content::after {
-  content: unset;
-}

package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js

@@ -1,154 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class PdsTab {
-    constructor() {
-        this.name = undefined;
-        this.parentComponentId = undefined;
-        this.variant = undefined;
-        this.index = undefined;
-        this.selected = false;
-    }
-    onTabClick(index, parentComponentId) {
-        this.pdsTabClick.emit([index, parentComponentId]);
-    }
-    render() {
-        const availabilityTabEdgeInlineStart = (h("span", { key: 'c315c8920c12da7d1913db7e53dc075dc9734280', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (h("span", { key: '37dfaa651e87a0291d28c50fbdda9c1cfa70f41b', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (h(Host, { key: '0aa73a4a6b1ff12fff6f212135f8f33c14e6ff5f', variant: this.variant, slot: "tabs", index: this.index }, h("button", { key: '72443536e14ddad4ac8e19c025165884de81697f', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, h("div", { key: '547a022cb0354b176a11e681e9103bb4486ab1ef', class: "pds-tab__content" }, h("slot", { key: 'db859b0d21de4e57a75e588d069a9b1b86d271c4' })))));
-    }
-    static get is() { return "pds-tab"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-tab.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-tab.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property"
-                },
-                "attribute": "name",
-                "reflect": false
-            },
-            "parentComponentId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "attribute": "parent-component-id",
-                "reflect": false
-            },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "attribute": "variant",
-                "reflect": false
-            },
-            "index": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "attribute": "index",
-                "reflect": false
-            },
-            "selected": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "attribute": "selected",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "pdsTabClick",
-                "name": "pdsTabClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "object",
-                    "resolved": "object",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=pds-tab.js.map

package/dist/collection/components/pds-tabs/pds-tab/pds-tab.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pds-tab.js","sourceRoot":"","sources":["../../../../src/components/pds-tabs/pds-tab/pds-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOvF,MAAM,OAAO,MAAM;;;;;;wBA8BE,KAAK;;IAOhB,UAAU,CAAC,KAAK,EAAE,iBAAiB;QACzC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,iBAAiB,CAAC,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;QACJ,MAAM,8BAA8B,GAAG,CACrC,6DAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,cAAc,GAAQ,CACvD,CAAA;QAED,MAAM,4BAA4B,GAAG,CACnC,6DAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,cAAc,GAAQ,CACzE,CAAA;QAED,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK;YACxD,+DACE,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,mBAC9B,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,EACnE,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,mBACrB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,EACtD,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAEtE,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,8BAA8B;gBACjE,IAAI,CAAC,OAAO,KAAK,cAAc,IAAI,4BAA4B;gBAChE,4DAAK,KAAK,EAAC,kBAAkB;oBAAC,8DAAO,CAAM,CACpC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-tab',\n  styleUrl: 'pds-tab.scss',\n  shadow: false,\n})\nexport class PdsTab {\n  @Element() el: HTMLPdsTabElement;\n\n  /**\n   * Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property\n   */\n  @Prop() name!: string;\n\n  /**\n   * Keeps track of the parentComponentId unique id, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() parentComponentId: string;\n\n  /**\n   * Keeps track of if the expected tab variant, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() variant: string;\n\n  /**\n   * Keeps track of if the tab index number, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() index: number;\n\n  /**\n   * Keeps track of the tabpanel selected state, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() selected = false;\n\n  /**\n   * Emits an event upon tab click for `pds-tab` and `pds-tabpanel` to listen for\n   */\n  /** @internal */\n  @Event() pdsTabClick: EventEmitter<object>;\n  private onTabClick(index, parentComponentId) {\n    this.pdsTabClick.emit([index, parentComponentId]);\n  }\n\n  render() {\n    const availabilityTabEdgeInlineStart = (\n      <span class=\"pds-tab-edge\" role=\"presentation\"></span>\n    )\n\n    const availabilityTabEdgeInlineEnd = (\n      <span class=\"pds-tab-edge pds-tab-edge--end\" role=\"presentation\"></span>\n    )\n\n    return (\n      <Host variant={this.variant} slot=\"tabs\" index={this.index}>\n        <button\n          role=\"tab\"\n          id={this.parentComponentId + \"__\" + this.name}\n          aria-controls={this.parentComponentId + \"__\" + this.name + \"-panel\"}\n          tabindex={this.selected ? \"0\" : \"-1\"}\n          aria-selected={this.selected ? \"true\" : \"false\"}\n          class={this.selected ? \"pds-tab is-active\" : \"pds-tab\"}\n          onClick={this.onTabClick.bind(this, this.index, this.parentComponentId)}\n        >\n          {this.variant === \"availability\" && availabilityTabEdgeInlineStart}\n          {this.variant === \"availability\" && availabilityTabEdgeInlineEnd}\n          <div class=\"pds-tab__content\"><slot/></div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.css

@@ -1,12 +0,0 @@
-:host {
-  display: block;
-}
-
-.pds-tabpanel {
-  display: none;
-  margin-top: var(--spacing-panel-margin-top);
-  padding: var(--spacing-panel-padding);
-}
-.pds-tabpanel.is-active {
-  display: block;
-}

package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js

@@ -1,107 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class PdsTabpanel {
-    constructor() {
-        this.name = undefined;
-        this.parentComponentId = undefined;
-        this.variant = undefined;
-        this.selected = false;
-    }
-    render() {
-        return (h(Host, { key: 'b8619019429f7430c66df0cc41d177d40b59a6e6', slot: "tabpanels" }, h("div", { key: '10a9c2cbf35a60aec932287a839fcca456c41d4c', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: '50593c1f0174dd44b2a51cc94e89cdd1cee7a8ab' }))));
-    }
-    static get is() { return "pds-tabpanel"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-tabpanel.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-tabpanel.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Sets the related tab name, this name must match a `pds-tab`'s tab name property"
-                },
-                "attribute": "name",
-                "reflect": false
-            },
-            "parentComponentId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "attribute": "parent-component-id",
-                "reflect": false
-            },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "attribute": "variant",
-                "reflect": false
-            },
-            "selected": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }],
-                    "text": ""
-                },
-                "attribute": "selected",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=pds-tabpanel.js.map

package/dist/collection/components/pds-tabs/pds-tabpanel/pds-tabpanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pds-tabpanel.js","sourceRoot":"","sources":["../../../../src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,WAAW;;;;;wBAwBY,KAAK;;IAEvC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,WAAW;YACpB,4DACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,QAAQ,EACxD,QAAQ,EAAC,GAAG,qBACK,IAAI,CAAC,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EAC1D,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,cAAc;gBAEhE,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-tabpanel',\n  styleUrl: 'pds-tabpanel.scss',\n  shadow: false,\n})\nexport class PdsTabpanel {\n  @Element() el: HTMLPdsTabpanelElement;\n\n  /**\n   * Sets the related tab name, this name must match a `pds-tab`'s tab name property\n   */\n  @Prop() name!: string;\n\n  /**\n   * Keeps track of the parentComponentId unique id, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() parentComponentId: string;\n\n  /**\n   * Keeps track of if the expected tab variant, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop() variant: string;\n\n  /**\n   * Keeps track of the tabpanel selected state, this property is passed by parent component\n   */\n  /** @internal */\n  @Prop({mutable: true}) selected = false;          // eslint-disable-line @stencil-community/strict-mutable\n\n  render() {\n    return (\n      <Host slot=\"tabpanels\">\n        <div\n          role=\"tabpanel\"\n          id={this.parentComponentId + \"__\" + this.name + '-panel'}\n          tabindex=\"0\"\n          aria-labelledby={this.parentComponentId + \"__\" + this.name}\n          class={this.selected ? \"pds-tabpanel is-active\" : \"pds-tabpanel\"}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}