kemet-ui 4.0.0 → 4.0.2

package/dist/elements/svgs.js

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/svgs.ts
+var svgs_exports = {};
+__export(svgs_exports, {
+  default: () => KemetSVGs
+});
+module.exports = __toCommonJS(svgs_exports);
+var import_lit = require("lit");
+var import_decorators = require("lit/decorators.js");
+var KemetSVGs = class extends import_lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.set = "svgs";
+  }
+  firstUpdated() {
+    this.slotElement = this.shadowRoot.querySelector("slot");
+    document.kemetSVGs = document.kemetSVGs || {};
+    this.populateIcons();
+    this.slotElement.addEventListener("slotchange", () => this.populateIcons());
+  }
+  render() {
+    return import_lit.html`<slot></slot>`;
+  }
+  populateIcons() {
+    const svg = this.slotElement.assignedElements()[0];
+    const svgContents = svg ? svg.querySelectorAll("defs > g") : null;
+    if (svgContents) {
+      document.kemetSVGs[this.set] = svgContents;
+    }
+  }
+};
+KemetSVGs.styles = [import_lit.css`
+    :host {
+      display: none;
+    }
+  `];
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetSVGs.prototype, "set", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetSVGs.prototype, "slotElement", 2);
+KemetSVGs = __decorateClass([
+  (0, import_decorators.customElement)("kemet-svgs")
+], KemetSVGs);
+//# sourceMappingURL=svgs.js.map

package/dist/elements/svgs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/svgs.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-svgs\n * @summary A set of SVG graphics that can be referenced anywhere in a page or app.\n *\n * @prop {string} set - Defines the name for the set of svgs.\n *\n */\n\n@customElement('kemet-svgs')\nexport default class KemetSVGs extends LitElement {\n  static styles = [css`\n    :host {\n      display: none;\n    }\n  `];\n\n  @property({ type: String })\n  set: string = 'svgs';\n\n  @state()\n  slotElement: HTMLSlotElement;\n\n  firstUpdated() {\n    this.slotElement = this.shadowRoot.querySelector('slot');\n    document.kemetSVGs = document.kemetSVGs || {};\n\n    this.populateIcons();\n    this.slotElement.addEventListener('slotchange', () => this.populateIcons());\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  populateIcons() {\n    const svg = this.slotElement.assignedElements()[0];\n    const svgContents = svg ? svg.querySelectorAll('defs > g') : null;\n\n    if (svgContents) {\n      document.kemetSVGs[this.set] = svgContents;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-svgs': KemetSVGs\n  }\n\n  interface Document {\n    kemetSVGs: any;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAsC;AACtC,wBAA+C;AAc/C,IAAqB,YAArB,cAAuC,sBAAW;AAAA,EAAlD;AAAA;AAQE,eAAc;AAAA;AAAA,EAKd,eAAe;AACb,SAAK,cAAc,KAAK,WAAW,cAAc,MAAM;AACvD,aAAS,YAAY,SAAS,aAAa,CAAC;AAE5C,SAAK,cAAc;AACnB,SAAK,YAAY,iBAAiB,cAAc,MAAM,KAAK,cAAc,CAAC;AAAA,EAC5E;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AAAA,EAEA,gBAAgB;AACd,UAAM,MAAM,KAAK,YAAY,iBAAiB,EAAE,CAAC;AACjD,UAAM,cAAc,MAAM,IAAI,iBAAiB,UAAU,IAAI;AAE7D,QAAI,aAAa;AACf,eAAS,UAAU,KAAK,GAAG,IAAI;AAAA,IACjC;AAAA,EACF;AACF;AAjCqB,UACZ,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA,GAIhB;AAGD;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAPP,UAQnB;AAGA;AAAA,MADC,yBAAM;AAAA,GAVY,UAWnB;AAXmB,YAArB;AAAA,MADC,iCAAc,YAAY;AAAA,GACN;","names":[]}

package/dist/elements/svgs.mjs

@@ -0,0 +1,8 @@
+import {
+  KemetSVGs
+} from "../chunk-H4D2CASA.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetSVGs as default
+};
+//# sourceMappingURL=svgs.mjs.map

package/dist/elements/svgs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/tab-panel.d.mts

@@ -0,0 +1,33 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-tab-panel
+ * @summary A panel in a set of tabs.
+ *
+ * @prop {boolean} selected - Is true when a panel is selected
+ * @prop {string} panel - Identifies the panel to be linked by a tab
+ *
+ * @cssproperty --kemet-tab-panel-fade-speed - The fade speed.
+ *
+ */
+declare class KemetTabPanel extends LitElement {
+    static styles: lit.CSSResult[];
+    selected: boolean;
+    panel: string;
+    index: number;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    a11y(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-tab-panel': KemetTabPanel;
+    }
+}
+
+export { KemetTabPanel as default };

package/dist/elements/tab-panel.d.ts

@@ -0,0 +1,33 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-tab-panel
+ * @summary A panel in a set of tabs.
+ *
+ * @prop {boolean} selected - Is true when a panel is selected
+ * @prop {string} panel - Identifies the panel to be linked by a tab
+ *
+ * @cssproperty --kemet-tab-panel-fade-speed - The fade speed.
+ *
+ */
+declare class KemetTabPanel extends LitElement {
+    static styles: lit.CSSResult[];
+    selected: boolean;
+    panel: string;
+    index: number;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    a11y(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-tab-panel': KemetTabPanel;
+    }
+}
+
+export { KemetTabPanel as default };

package/dist/elements/tab-panel.js

@@ -0,0 +1,348 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/tab-panel.ts
+var tab_panel_exports = {};
+__export(tab_panel_exports, {
+  default: () => KemetTabPanel
+});
+module.exports = __toCommonJS(tab_panel_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/tabs.ts
+var import_lit = require("lit");
+var stylesKemetTabs = import_lit.css`
+  :host {
+    --kemet-tabs-ink-size: 6px;
+    --kemet-tabs-ink-radius: 6px;
+    --kemet-tabs-divider-size: 1px;
+    --kemet-tabs-spacer: 1rem;
+    --kemet-tabs-transition-speed: 0.5s;
+    --kemet-tabs-divider-color: rgb(var(--kemet-color-gray-300));
+    --kemet-tabs-ink-color: rgb(var(--kemet-color-foreground));
+
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+
+  :host([placement='bottom']) {
+    flex-direction: column-reverse;
+  }
+
+  :host([placement='left']) {
+    flex-direction: row;
+  }
+
+  :host([placement='right']) {
+    flex-direction: row-reverse;
+  }
+
+  :host([placement='left']),
+  :host([placement='right']) {
+    overflow: unset;
+  }
+
+  /* panels */
+
+  [part='panels'] > div {
+    display: flex;
+  }
+
+  :host([panel-effect='slide']) [part='panels'] {
+    transition: transform var(--kemet-tabs-transition-speed) linear;
+  }
+
+  :host([panel-effect='fade']) [part='panels'] {
+    transform: none !important;
+  }
+
+  :host([panel-effect='fade']) [part='panels'] > div {
+    flex-flow: row nowrap;
+  }
+
+  :host([placement='left']) [part='panels'],
+  :host([placement='right']) [part='panels'] {
+    transform: none !important;
+    position: relative;
+    width: 100%;
+  }
+
+  :host([placement='top']) [part='panels'] > div {
+    margin-top: var(--kemet-tabs-spacer);
+  }
+
+  :host([placement='right']) [part='panels'] > div {
+    margin-right: var(--kemet-tabs-spacer);
+  }
+
+  :host([placement='bottom']) [part='panels'] > div {
+    margin-bottom: var(--kemet-tabs-spacer);
+  }
+
+  :host([placement='left']) [part='panels'] > div {
+    margin-left: var(--kemet-tabs-spacer);
+  }
+
+  /* tablist */
+
+  [part='tablist'] {
+    display: flex;
+  }
+
+  :host([placement='left']) [part='tablist'],
+  :host([placement='right']) [part='tablist'] {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+  }
+
+  :host([tabs-align='center']) [part='tablist'] {
+    justify-content: center;
+  }
+
+  :host([tabs-align='between']) [part='tablist'] {
+    justify-content: space-between;
+  }
+
+  :host([tabs-align='evenly']) [part='tablist'] {
+    justify-content: space-evenly;
+  }
+
+  :host([tabs-align='around']) [part='tablist'] {
+    justify-content: space-around
+  }
+
+  :host([tabs-align='start']) [part='tablist'] {
+    justify-content: flex-start;
+  }
+
+  :host([tabs-align='end']) [part='tablist'] {
+    justify-content: flex-end;
+  }
+
+  :host([overflow]) [part='tablist'] {
+    justify-content: start;
+  }
+
+  /* divider */
+
+  [part='divider'] {
+    height: var(--kemet-tabs-divider-size);
+    background-color: var(--kemet-tabs-divider-color);
+  }
+
+  :host([placement='left']) [part='divider'],
+  :host([placement='right']) [part='divider'] {
+    width: var(--kemet-tabs-divider-size);
+    height: auto;
+  }
+
+  /* ink */
+
+  [part='ink'] {
+    height: var(--kemet-tabs-ink-size);
+    border-top-left-radius: var(--kemet-tabs-ink-radius);
+    border-top-right-radius: var(--kemet-tabs-ink-radius);
+    transition: all 300ms ease;
+    background-color: var(--kemet-tabs-ink-color);
+  }
+
+  :host([placement='right']) [part='ink'] {
+    width: var(--kemet-tabs-ink-size);
+    border-top-right-radius: var(--kemet-tabs-ink-radius);
+    border-bottom-right-radius: var(--kemet-tabs-ink-radius);
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  :host([placement='left']) [part='ink'] {
+    width: var(--kemet-tabs-ink-size);
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-top-left-radius: var(--kemet-tabs-ink-radius);
+    border-bottom-left-radius: var(--kemet-tabs-ink-radius);
+  }
+
+  :host([placement='bottom']) [part='ink'] {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: var(--kemet-tabs-ink-radius);
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: var(--kemet-tabs-ink-radius);
+  }
+
+  /* links */
+
+  :host([overflow]) [part='links'] {
+    overflow-x: auto;
+    margin: 0 2rem;
+    scroll-behavior: smooth;
+  }
+
+  :host([overflow]) [part='links']::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    background: transparent;
+  }
+
+  :host([placement='bottom']) [part='links'] {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  /* icon */
+
+  [icon*='chevron'] {
+    cursor: pointer;
+    position: absolute;
+    top: 1rem;
+  }
+
+  [icon='chevron-left'] {
+    left: 0;
+  }
+
+  [icon='chevron-right'] {
+    right: 0;
+  }
+
+  :host([placement='bottom']) [icon*='chevron'] {
+    top: auto;
+    bottom: 1rem;
+  }
+`;
+var stylesKemetTab = import_lit.css`
+  :host {
+    --kemet-tab-color: rgb(var(--kemet-color-foreground));
+
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    padding: var(--kemet-tab-padding, 1rem);
+  }
+
+  :host([selected]) {
+    cursor: auto;
+    color: var(--kemet-tab-color);
+  }
+
+  kemet-icon-bootstrap {
+    cursor: pointer;
+    margin-left: 0.5rem;
+  }
+`;
+var stylesKemetTabPanel = import_lit.css`
+  :host {
+    --kemet-tab-panel-fade-speed: 0.5s;
+
+    width: 100%;
+    flex: 0 0 auto;
+  }
+
+  ::slotted(img) {
+    max-width: 100%;
+  }
+
+  :host(.fade) {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--kemet-tab-panel-fade-speed) ease;
+  }
+
+  :host(.fade[selected]) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  :host(.fade.push) {
+    margin-left: -100%;
+  }
+
+  :host(.vertical) {
+    display: none;
+  }
+
+  :host(.vertical[selected]) {
+    display: block;
+  }
+
+  :host(.stacked) {
+    position: absolute;
+    z-index: -1;
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  :host(.stacked[selected]) {
+    position: relative;
+    z-index: 1;
+    opacity: 1;
+    visibility: visible;
+  }
+`;
+
+// src/elements/tab-panel.ts
+var KemetTabPanel = class extends import_lit2.LitElement {
+  constructor() {
+    super(...arguments);
+    this.selected = false;
+  }
+  updated() {
+    this.a11y();
+  }
+  render() {
+    return import_lit2.html`
+      <slot></slot>
+    `;
+  }
+  a11y() {
+    this.setAttribute("role", "tabpanel");
+    if (this.selected) {
+      this.setAttribute("tabindex", "0");
+    } else {
+      this.setAttribute("tabindex", "-1");
+    }
+  }
+};
+KemetTabPanel.styles = [stylesKemetTabPanel];
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetTabPanel.prototype, "selected", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetTabPanel.prototype, "panel", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetTabPanel.prototype, "index", 2);
+KemetTabPanel = __decorateClass([
+  (0, import_decorators.customElement)("kemet-tab-panel")
+], KemetTabPanel);
+//# sourceMappingURL=tab-panel.js.map

package/dist/elements/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/tab-panel.ts","../../src/styles/elements/tabs.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesKemetTabPanel } from '../styles/elements/tabs';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tab-panel\n * @summary A panel in a set of tabs.\n *\n * @prop {boolean} selected - Is true when a panel is selected\n * @prop {string} panel - Identifies the panel to be linked by a tab\n *\n * @cssproperty --kemet-tab-panel-fade-speed - The fade speed.\n *\n */\n\n@customElement('kemet-tab-panel')\nexport default class KemetTabPanel extends LitElement {\n  static styles = [stylesKemetTabPanel];\n\n  @property({ type: Boolean, reflect: true })\n  selected: boolean = false;\n\n  @property({ type: String })\n  panel: string;\n\n  @property({ type: Number })\n  index: number;\n\n  updated() {\n    this.a11y();\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  a11y() {\n    this.setAttribute('role', 'tabpanel');\n\n    if (this.selected) {\n      this.setAttribute('tabindex', '0');\n    } else {\n      this.setAttribute('tabindex', '-1');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tab-panel': KemetTabPanel\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesKemetTabs = css`\n  :host {\n    --kemet-tabs-ink-size: 6px;\n    --kemet-tabs-ink-radius: 6px;\n    --kemet-tabs-divider-size: 1px;\n    --kemet-tabs-spacer: 1rem;\n    --kemet-tabs-transition-speed: 0.5s;\n    --kemet-tabs-divider-color: rgb(var(--kemet-color-gray-300));\n    --kemet-tabs-ink-color: rgb(var(--kemet-color-foreground));\n\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    position: relative;\n  }\n\n  :host([placement='bottom']) {\n    flex-direction: column-reverse;\n  }\n\n  :host([placement='left']) {\n    flex-direction: row;\n  }\n\n  :host([placement='right']) {\n    flex-direction: row-reverse;\n  }\n\n  :host([placement='left']),\n  :host([placement='right']) {\n    overflow: unset;\n  }\n\n  /* panels */\n\n  [part='panels'] > div {\n    display: flex;\n  }\n\n  :host([panel-effect='slide']) [part='panels'] {\n    transition: transform var(--kemet-tabs-transition-speed) linear;\n  }\n\n  :host([panel-effect='fade']) [part='panels'] {\n    transform: none !important;\n  }\n\n  :host([panel-effect='fade']) [part='panels'] > div {\n    flex-flow: row nowrap;\n  }\n\n  :host([placement='left']) [part='panels'],\n  :host([placement='right']) [part='panels'] {\n    transform: none !important;\n    position: relative;\n    width: 100%;\n  }\n\n  :host([placement='top']) [part='panels'] > div {\n    margin-top: var(--kemet-tabs-spacer);\n  }\n\n  :host([placement='right']) [part='panels'] > div {\n    margin-right: var(--kemet-tabs-spacer);\n  }\n\n  :host([placement='bottom']) [part='panels'] > div {\n    margin-bottom: var(--kemet-tabs-spacer);\n  }\n\n  :host([placement='left']) [part='panels'] > div {\n    margin-left: var(--kemet-tabs-spacer);\n  }\n\n  /* tablist */\n\n  [part='tablist'] {\n    display: flex;\n  }\n\n  :host([placement='left']) [part='tablist'],\n  :host([placement='right']) [part='tablist'] {\n    display: flex;\n    flex-direction: column;\n    align-items: start;\n  }\n\n  :host([tabs-align='center']) [part='tablist'] {\n    justify-content: center;\n  }\n\n  :host([tabs-align='between']) [part='tablist'] {\n    justify-content: space-between;\n  }\n\n  :host([tabs-align='evenly']) [part='tablist'] {\n    justify-content: space-evenly;\n  }\n\n  :host([tabs-align='around']) [part='tablist'] {\n    justify-content: space-around\n  }\n\n  :host([tabs-align='start']) [part='tablist'] {\n    justify-content: flex-start;\n  }\n\n  :host([tabs-align='end']) [part='tablist'] {\n    justify-content: flex-end;\n  }\n\n  :host([overflow]) [part='tablist'] {\n    justify-content: start;\n  }\n\n  /* divider */\n\n  [part='divider'] {\n    height: var(--kemet-tabs-divider-size);\n    background-color: var(--kemet-tabs-divider-color);\n  }\n\n  :host([placement='left']) [part='divider'],\n  :host([placement='right']) [part='divider'] {\n    width: var(--kemet-tabs-divider-size);\n    height: auto;\n  }\n\n  /* ink */\n\n  [part='ink'] {\n    height: var(--kemet-tabs-ink-size);\n    border-top-left-radius: var(--kemet-tabs-ink-radius);\n    border-top-right-radius: var(--kemet-tabs-ink-radius);\n    transition: all 300ms ease;\n    background-color: var(--kemet-tabs-ink-color);\n  }\n\n  :host([placement='right']) [part='ink'] {\n    width: var(--kemet-tabs-ink-size);\n    border-top-right-radius: var(--kemet-tabs-ink-radius);\n    border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n  }\n\n  :host([placement='left']) [part='ink'] {\n    width: var(--kemet-tabs-ink-size);\n    border-top-right-radius: 0px;\n    border-bottom-right-radius: 0px;\n    border-top-left-radius: var(--kemet-tabs-ink-radius);\n    border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n  }\n\n  :host([placement='bottom']) [part='ink'] {\n    border-top-right-radius: 0px;\n    border-bottom-right-radius: var(--kemet-tabs-ink-radius);\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: var(--kemet-tabs-ink-radius);\n  }\n\n  /* links */\n\n  :host([overflow]) [part='links'] {\n    overflow-x: auto;\n    margin: 0 2rem;\n    scroll-behavior: smooth;\n  }\n\n  :host([overflow]) [part='links']::-webkit-scrollbar {\n    display: none;\n    width: 0;\n    background: transparent;\n  }\n\n  :host([placement='bottom']) [part='links'] {\n    display: flex;\n    flex-direction: column-reverse;\n  }\n\n  /* icon */\n\n  [icon*='chevron'] {\n    cursor: pointer;\n    position: absolute;\n    top: 1rem;\n  }\n\n  [icon='chevron-left'] {\n    left: 0;\n  }\n\n  [icon='chevron-right'] {\n    right: 0;\n  }\n\n  :host([placement='bottom']) [icon*='chevron'] {\n    top: auto;\n    bottom: 1rem;\n  }\n`;\n\nexport const stylesKemetTab = css`\n  :host {\n    --kemet-tab-color: rgb(var(--kemet-color-foreground));\n\n    cursor: pointer;\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    justify-content: center;\n    white-space: nowrap;\n    padding: var(--kemet-tab-padding, 1rem);\n  }\n\n  :host([selected]) {\n    cursor: auto;\n    color: var(--kemet-tab-color);\n  }\n\n  kemet-icon-bootstrap {\n    cursor: pointer;\n    margin-left: 0.5rem;\n  }\n`;\n\nexport const stylesKemetTabPanel = css`\n  :host {\n    --kemet-tab-panel-fade-speed: 0.5s;\n\n    width: 100%;\n    flex: 0 0 auto;\n  }\n\n  ::slotted(img) {\n    max-width: 100%;\n  }\n\n  :host(.fade) {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity var(--kemet-tab-panel-fade-speed) ease;\n  }\n\n  :host(.fade[selected]) {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  :host(.fade.push) {\n    margin-left: -100%;\n  }\n\n  :host(.vertical) {\n    display: none;\n  }\n\n  :host(.vertical[selected]) {\n    display: block;\n  }\n\n  :host(.stacked) {\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    visibility: hidden;\n  }\n\n  :host(.stacked[selected]) {\n    position: relative;\n    z-index: 1;\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n"],"mappings":"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","names":["import_lit"]}

package/dist/elements/tab-panel.mjs

@@ -0,0 +1,9 @@
+import {
+  KemetTabPanel
+} from "../chunk-JBDFJW7Y.mjs";
+import "../chunk-5LCSEF3N.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetTabPanel as default
+};
+//# sourceMappingURL=tab-panel.mjs.map

package/dist/elements/tab-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/tab.d.mts

@@ -0,0 +1,43 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-tab
+ * @summary A tab in a set of tabs.
+ *
+ * @prop {boolean} selected - Is true when the tab is selected
+ * @prop {string} link - Links to a panel name
+ * @prop {boolean} closable - Determines if the tab can be closed
+ *
+ * @cssproperty --kemet-tab-padding - The padding of the tab.
+ * @cssproperty --kemet-tab-color - The color of the selected tab.
+ *
+ * @event kemet-selected - Fires when a tab is selected
+ * @event kemet-closed - Fires when the tab should close
+ *
+ */
+declare class KemetTab extends LitElement {
+    static styles: lit.CSSResult[];
+    index: number;
+    selected: boolean;
+    link: string;
+    closable: boolean;
+    firstUpdated(): void;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    select(): void;
+    a11y(): void;
+    makeCloseable(): lit_html.TemplateResult<1>;
+    handleClosable(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-tab': KemetTab;
+    }
+}
+
+export { KemetTab as default };

package/dist/elements/tab.d.ts

@@ -0,0 +1,43 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-tab
+ * @summary A tab in a set of tabs.
+ *
+ * @prop {boolean} selected - Is true when the tab is selected
+ * @prop {string} link - Links to a panel name
+ * @prop {boolean} closable - Determines if the tab can be closed
+ *
+ * @cssproperty --kemet-tab-padding - The padding of the tab.
+ * @cssproperty --kemet-tab-color - The color of the selected tab.
+ *
+ * @event kemet-selected - Fires when a tab is selected
+ * @event kemet-closed - Fires when the tab should close
+ *
+ */
+declare class KemetTab extends LitElement {
+    static styles: lit.CSSResult[];
+    index: number;
+    selected: boolean;
+    link: string;
+    closable: boolean;
+    firstUpdated(): void;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+    select(): void;
+    a11y(): void;
+    makeCloseable(): lit_html.TemplateResult<1>;
+    handleClosable(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-tab': KemetTab;
+    }
+}
+
+export { KemetTab as default };