kemet-ui 4.0.2 → 5.0.0

package/dist/elements/tab-panel/styles.css.js

@@ -0,0 +1,54 @@
+// src/elements/tab-panel/styles.css.ts
+import { css } from "lit";
+var styles_css_default = 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;
+}
+`;
+export {
+  styles_css_default as default
+};
+//# sourceMappingURL=styles.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/tab-panel/styles.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport default css`: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":";AAAA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","names":[]}

package/dist/elements/tabs/index.d.ts

@@ -0,0 +1,132 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { h as EnumDirections } from '../../constants-W9QKPlZP.js';
+import KemetTab from '../tab/index.js';
+import KemetTabPanel from '../tab-panel/index.js';
+import '../icon/index.js';
+import '../../form-controller-3q581XcZ.js';
+
+interface InterfaceLink {
+    width: string;
+    height: string;
+    positionX: string;
+    positionY: string;
+}
+interface InterfaceTabsDetails {
+    element: KemetTabs;
+    selectedName: string;
+    selectedIndex: number;
+}
+declare enum EnumPanelEffect {
+    None = "none",
+    Slide = "slide",
+    Fade = "fade",
+    Stacked = "stacked"
+}
+declare enum EnumTabsAlign {
+    Center = "center",
+    Between = "between",
+    Around = "around",
+    Evenly = "evenly",
+    Start = "start",
+    End = "end"
+}
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-tabs
+ * @summary A group of tabs and panels.
+ *
+ * @prop {string} selected - The selected tab by name
+ * @prop {number} selectedIndex - The selected tab by index
+ * @prop {number} panelPosition - Positions the current panel
+ * @prop {string} panelEffect - The transition effect for panels
+ * @prop {boolean} swipe - Determines whether to enable swipe behavior
+ * @prop {TypeDirection} placement - Places the tabs to the top, right, bottom, or left
+ * @prop {boolean} divider - Determines whether to show a divider line
+ * @prop {TypeTabsAlign} tabsAlign - Spacing alignment of the tabs
+ * @prop {object} ink - An object that contains information about the ink
+ * @prop {boolean} hideInk - Determines whether to hide the ink
+ * @prop {boolean} overflow - Is true when the space of the tabs is larger than it's container
+ * @prop {'light' | 'dark'} polarity - Determines if the component has a dark or light background
+ * @prop {string} dom - The status of dom initalization.
+ *
+ * @slot tab - Place the tabs here.
+ * @slot panel - Place the panels here.
+ *
+ * @csspart links - The container for the tablist.
+ * @csspart tablist - Contains the tabs.
+ * @csspart panels - Contains the panels.
+ * @csspart ink - The ink element.
+ * @csspart divider - The divider element.
+ *
+ * @cssproperty --kemet-tabs-ink-size - The thickness of the ink.
+ * @cssproperty --kemet-tabs-ink-radius - The radius on the ink.
+ * @cssproperty --kemet-tabs-ink-color - The color of the ink.
+ * @cssproperty --kemet-tabs-divider-size - The thickness of the divider.
+ * @cssproperty --kemet-tabs-divider-color - The color of the divider.
+ * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels.
+ * @cssproperty --kemet-tabs-spacer - The space between tabs and panels.
+ *
+ * @event kemet-tabs-change - Fires when a tab is changed
+ *
+ * @fires kemet-tabs-mounted - Fired when the tabs are mounted to the DOM
+ * @detail {HTMLElement} element - The tabs element
+ *
+ */
+declare class KemetTabs extends LitElement {
+    static styles: lit.CSSResult[];
+    selected?: string;
+    selectedIndex: number;
+    panelPosition: number;
+    panelEffect: EnumPanelEffect;
+    swipe: boolean;
+    placement: EnumDirections;
+    divider: boolean;
+    tabsAlign: EnumTabsAlign;
+    ink: InterfaceLink;
+    hideInk: boolean;
+    overflow: boolean;
+    polarity?: 'light' | 'dark';
+    dom: string;
+    tabs: KemetTab[];
+    panels: KemetTabPanel[];
+    xDown: number | null;
+    yDown: number | null;
+    links: HTMLElement;
+    panelsElement: HTMLElement;
+    constructor();
+    firstUpdated(): void;
+    render(): lit_html.TemplateResult<1>;
+    updated(prevProps: Map<string, never>): void;
+    handleLinksSlotChange(): void;
+    handlePanelsSlotChange(): void;
+    handleLeftArrow(): void;
+    handleRightArrow(): void;
+    handleTabClose(event: Event): void;
+    makeInk(location: string): lit_html.TemplateResult<1> | null;
+    makeDivider(): lit_html.TemplateResult<1> | null;
+    makeLeftArrow(): lit_html.TemplateResult<1> | null;
+    makeRightArrow(): lit_html.TemplateResult<1> | null;
+    selectTab(): void;
+    selectPanel(): void;
+    dispatchTabChange(): void;
+    tabSelectedChange(event: Event): void;
+    determineFade(): void;
+    determineStacked(): void;
+    determineOverflow(): void;
+    handleResize(): void;
+    animatePanel(panelName: string | null, panelIndex: number | null): void;
+    handleTabKeydown(event: KeyboardEvent): void;
+    handleTouchStart(event: TouchEvent): void;
+    handleTouchMove(event: TouchEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-tabs': KemetTabs;
+    }
+}
+
+export { EnumPanelEffect, EnumTabsAlign, type InterfaceTabsDetails, KemetTabs as default };