@logosphere-ui/core 0.0.0-alpha.33 → 0.0.0-alpha.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +7 -2
- package/dist/AGENTS.md +7 -2
- package/dist/atoms/Button/button.d.ts +5 -3
- package/dist/atoms/Checkbox/checkbox.d.ts +2 -1
- package/dist/atoms/Slider/index.d.ts +1 -0
- package/dist/atoms/Slider/slider.d.ts +54 -0
- package/dist/{chatbot-p4CmxSdZ.js → chatbot-Cr6iOO7s.js} +1 -1
- package/dist/{chatbot-8etAVHNx.cjs → chatbot-Dl6P98Jq.cjs} +1 -1
- package/dist/chatbot.cjs +1 -1
- package/dist/chatbot.js +1 -1
- package/dist/checkbox-CX0LgsWP.js +148 -0
- package/dist/checkbox-DpbKHANK.cjs +53 -0
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/{combobox-CTqEZUg6.js → combobox-CFF30L-n.js} +67 -61
- package/dist/{combobox-BV4AKTqp.cjs → combobox-s7NFPAd3.cjs} +3 -2
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.js +1 -1
- package/dist/index.cjs +291 -1
- package/dist/index.d.ts +6 -0
- package/dist/index.js +906 -49
- package/dist/index.umd.js +471 -163
- package/dist/molecules/Accordion/accordion.d.ts +42 -0
- package/dist/molecules/Accordion/index.d.ts +2 -0
- package/dist/molecules/Collapse/collapse.d.ts +42 -0
- package/dist/molecules/Collapse/index.d.ts +2 -0
- package/dist/molecules/InputGroup/index.d.ts +1 -0
- package/dist/molecules/InputGroup/input-group.d.ts +40 -0
- package/dist/molecules/SplitButton/index.d.ts +2 -0
- package/dist/molecules/SplitButton/split-button.d.ts +53 -0
- package/dist/molecules/Stepper/index.d.ts +2 -0
- package/dist/molecules/Stepper/stepper.d.ts +34 -0
- package/dist/organisms/Tab/tab.d.ts +13 -1
- package/dist/{pagination-BLNrwUSO.js → pagination-DG56TV5n.js} +1 -1
- package/dist/{pagination-AclB9qi1.cjs → pagination-HyX0EAZr.cjs} +1 -1
- package/dist/pagination.cjs +1 -1
- package/dist/pagination.js +1 -1
- package/dist/shared/types/button.types.d.ts +7 -0
- package/dist/tab-CDMcFHvP.cjs +41 -0
- package/dist/tab-CuBCFGoO.js +204 -0
- package/dist/tab.cjs +1 -1
- package/dist/tab.js +1 -1
- package/package.json +31 -1
- package/dist/checkbox-CdDTRdKV.cjs +0 -37
- package/dist/checkbox-g6kl2jGR.js +0 -119
- package/dist/tab-BmrITzOL.cjs +0 -40
- package/dist/tab-Ca_OyNqQ.js +0 -176
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
import type { CollapseIconPosition, CollapseBorder, CollapseSize } from "../Collapse/collapse.js";
|
|
3
|
+
import "../Collapse/collapse.js";
|
|
4
|
+
export type { CollapseIconPosition, CollapseBorder, CollapseSize };
|
|
5
|
+
export interface AccordionItem {
|
|
6
|
+
title: string;
|
|
7
|
+
content: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare class Accordion extends LitElement {
|
|
11
|
+
static styles: import("lit").CSSResult[];
|
|
12
|
+
/**
|
|
13
|
+
* Built-in item list. When provided, renders managed Collapse components.
|
|
14
|
+
* Leave empty and use the default slot for custom content.
|
|
15
|
+
*/
|
|
16
|
+
items: AccordionItem[];
|
|
17
|
+
/** Allow multiple panels to be open simultaneously */
|
|
18
|
+
multiple: boolean;
|
|
19
|
+
/** Index(es) of initially open panel(s) */
|
|
20
|
+
defaultOpen: number | number[];
|
|
21
|
+
/** Border style applied to each panel */
|
|
22
|
+
border: CollapseBorder;
|
|
23
|
+
/** Icon position applied to each panel */
|
|
24
|
+
iconPosition: CollapseIconPosition;
|
|
25
|
+
/** Size applied to each panel */
|
|
26
|
+
size: CollapseSize;
|
|
27
|
+
private _openSet;
|
|
28
|
+
connectedCallback(): void;
|
|
29
|
+
disconnectedCallback(): void;
|
|
30
|
+
/**
|
|
31
|
+
* When consumers slot in their own logosphere-collapse elements, this
|
|
32
|
+
* handler intercepts the toggle event and enforces single-open behaviour.
|
|
33
|
+
*/
|
|
34
|
+
private _onSlottedToggle;
|
|
35
|
+
private _toggle;
|
|
36
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
37
|
+
}
|
|
38
|
+
declare global {
|
|
39
|
+
interface HTMLElementTagNameMap {
|
|
40
|
+
"logosphere-accordion": Accordion;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
import "../../shared/icons/ui-icon";
|
|
3
|
+
export type CollapseIconPosition = "left" | "right";
|
|
4
|
+
export type CollapseBorder = "full" | "bottom";
|
|
5
|
+
export type CollapseSize = "default" | "small";
|
|
6
|
+
export declare class Collapse extends LitElement {
|
|
7
|
+
static styles: import("lit").CSSResult[];
|
|
8
|
+
/** Header title text */
|
|
9
|
+
title: string;
|
|
10
|
+
/** Whether the panel is expanded */
|
|
11
|
+
expanded: boolean;
|
|
12
|
+
/** Disabled state — prevents toggling */
|
|
13
|
+
disabled: boolean;
|
|
14
|
+
/** Arrow icon position */
|
|
15
|
+
iconPosition: CollapseIconPosition;
|
|
16
|
+
/**
|
|
17
|
+
* Border style:
|
|
18
|
+
* - "full" → rounded border around the whole component
|
|
19
|
+
* - "bottom" → only a bottom border under the header (flat / accordion style)
|
|
20
|
+
*/
|
|
21
|
+
border: CollapseBorder;
|
|
22
|
+
/** Size variant */
|
|
23
|
+
size: CollapseSize;
|
|
24
|
+
private _inner?;
|
|
25
|
+
private _body?;
|
|
26
|
+
private _toggle;
|
|
27
|
+
private _onKeydown;
|
|
28
|
+
/**
|
|
29
|
+
* CLOSING: Called inside willUpdate — BEFORE Lit re-renders — so we can
|
|
30
|
+
* capture and lock the current height before the CSS class is removed.
|
|
31
|
+
*/
|
|
32
|
+
private _lockHeightForClose;
|
|
33
|
+
willUpdate(changed: Map<PropertyKey, unknown>): void;
|
|
34
|
+
updated(changed: Map<PropertyKey, unknown>): void;
|
|
35
|
+
private _renderIcon;
|
|
36
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
37
|
+
}
|
|
38
|
+
declare global {
|
|
39
|
+
interface HTMLElementTagNameMap {
|
|
40
|
+
"logosphere-collapse": Collapse;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { InputGroup } from "./input-group.js";
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* InputGroup — a layout wrapper that connects FormField-based components
|
|
4
|
+
* (Input, Combobox, Textarea) into a single visual unit by:
|
|
5
|
+
*
|
|
6
|
+
* • Adjusting each child's border-radius via --formfield-border-radius
|
|
7
|
+
* (cascades into the child's Shadow DOM through CSS custom property
|
|
8
|
+
* inheritance).
|
|
9
|
+
*
|
|
10
|
+
* • Suppressing the shared border between adjacent children via
|
|
11
|
+
* --formfield-border-right-width / --formfield-border-left-width
|
|
12
|
+
* so there is no double-border.
|
|
13
|
+
*
|
|
14
|
+
* Buttons and icon addons are handled via the prefix/suffix slots of
|
|
15
|
+
* the individual Input/Combobox components — no need to place them here.
|
|
16
|
+
*
|
|
17
|
+
* Usage:
|
|
18
|
+
* <logosphere-input-group>
|
|
19
|
+
* <logosphere-combobox ...></logosphere-combobox>
|
|
20
|
+
* <logosphere-input ...></logosphere-input>
|
|
21
|
+
* </logosphere-input-group>
|
|
22
|
+
*/
|
|
23
|
+
export declare class InputGroup extends LitElement {
|
|
24
|
+
static styles: import("lit").CSSResult[];
|
|
25
|
+
/** Stretch all children to the same height (default: true) */
|
|
26
|
+
stretch: boolean;
|
|
27
|
+
firstUpdated(): void;
|
|
28
|
+
disconnectedCallback(): void;
|
|
29
|
+
private _onSlotChange;
|
|
30
|
+
private _getChildren;
|
|
31
|
+
private _onFocusIn;
|
|
32
|
+
private _onFocusOut;
|
|
33
|
+
private _applyGroupStyles;
|
|
34
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
35
|
+
}
|
|
36
|
+
declare global {
|
|
37
|
+
interface HTMLElementTagNameMap {
|
|
38
|
+
"logosphere-input-group": InputGroup;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
import type { ButtonSize, ButtonTheme } from "../../shared/types/button.types.js";
|
|
3
|
+
import "../../shared/icons/ui-icon";
|
|
4
|
+
export type { ButtonSize, ButtonTheme };
|
|
5
|
+
export interface SplitButtonItem {
|
|
6
|
+
label: string;
|
|
7
|
+
value: string;
|
|
8
|
+
icon?: string;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
/** Renders a separator line BEFORE this item */
|
|
11
|
+
divider?: boolean;
|
|
12
|
+
}
|
|
13
|
+
export declare class SplitButton extends LitElement {
|
|
14
|
+
static styles: import("lit").CSSResult[];
|
|
15
|
+
/** Main action button label */
|
|
16
|
+
label: string;
|
|
17
|
+
/** Size — shared with Button */
|
|
18
|
+
size: ButtonSize;
|
|
19
|
+
/** Color theme — shared with Button */
|
|
20
|
+
theme: ButtonTheme;
|
|
21
|
+
/** Disable the entire component */
|
|
22
|
+
disabled: boolean;
|
|
23
|
+
/** Disable only the dropdown arrow, leaving the main action active */
|
|
24
|
+
dropdownDisabled: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Built-in item list. When provided, SplitButton renders its own dropdown.
|
|
27
|
+
* If omitted, consumers should use slot="dropdown" for custom content.
|
|
28
|
+
*/
|
|
29
|
+
items: SplitButtonItem[];
|
|
30
|
+
private _open;
|
|
31
|
+
private _dropdownBtn;
|
|
32
|
+
private _panel?;
|
|
33
|
+
private _popper?;
|
|
34
|
+
connectedCallback(): void;
|
|
35
|
+
disconnectedCallback(): void;
|
|
36
|
+
updated(changed: Map<string, unknown>): void;
|
|
37
|
+
private _initPopper;
|
|
38
|
+
private _destroyPopper;
|
|
39
|
+
private _onDocClick;
|
|
40
|
+
private _onDocKeydown;
|
|
41
|
+
private _setOpen;
|
|
42
|
+
private _onActionClick;
|
|
43
|
+
private _onDropdownClick;
|
|
44
|
+
private _onItemClick;
|
|
45
|
+
private _onKeydown;
|
|
46
|
+
private _renderPanel;
|
|
47
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
48
|
+
}
|
|
49
|
+
declare global {
|
|
50
|
+
interface HTMLElementTagNameMap {
|
|
51
|
+
"logosphere-split-button": SplitButton;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
import "../../shared/icons/ui-icon";
|
|
3
|
+
export type StepState = "completed" | "current" | "upcoming" | "disabled";
|
|
4
|
+
export type StepperOrientation = "horizontal" | "vertical";
|
|
5
|
+
export interface StepItem {
|
|
6
|
+
title: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
state?: StepState;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export declare class Stepper extends LitElement {
|
|
12
|
+
static styles: import("lit").CSSResult[];
|
|
13
|
+
/** Array of step definitions */
|
|
14
|
+
steps: StepItem[];
|
|
15
|
+
/** Index of the currently active step (0-based). Used when steps have no explicit state. */
|
|
16
|
+
activeStep: number;
|
|
17
|
+
/** Layout direction */
|
|
18
|
+
orientation: StepperOrientation;
|
|
19
|
+
/** Allow clicking on steps to navigate */
|
|
20
|
+
clickable: boolean;
|
|
21
|
+
private _resolveState;
|
|
22
|
+
private _onStepClick;
|
|
23
|
+
private _onStepKeydown;
|
|
24
|
+
private _focusStep;
|
|
25
|
+
private _renderIndicator;
|
|
26
|
+
private _renderConnector;
|
|
27
|
+
private _renderStep;
|
|
28
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
29
|
+
}
|
|
30
|
+
declare global {
|
|
31
|
+
interface HTMLElementTagNameMap {
|
|
32
|
+
"logosphere-stepper": Stepper;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -13,14 +13,26 @@ export declare class LogosphereTab extends LitElement {
|
|
|
13
13
|
tabs: TabItem[];
|
|
14
14
|
activeTab: string;
|
|
15
15
|
lazy: boolean;
|
|
16
|
-
variant: "default" | "card";
|
|
16
|
+
variant: "default" | "card" | "segmented";
|
|
17
17
|
private _focusedIndex;
|
|
18
18
|
private _renderedTabs;
|
|
19
19
|
private tablist?;
|
|
20
|
+
private _pillInitialized;
|
|
21
|
+
private _pillResizeObserver?;
|
|
20
22
|
connectedCallback(): void;
|
|
23
|
+
disconnectedCallback(): void;
|
|
21
24
|
protected willUpdate(changedProperties: PropertyValues): void;
|
|
22
25
|
private handleTabClick;
|
|
23
26
|
private handleKeyDown;
|
|
27
|
+
protected updated(changedProperties: PropertyValues): void;
|
|
28
|
+
/**
|
|
29
|
+
* Observe the tablist so the pill is repositioned whenever the list gains or
|
|
30
|
+
* changes size — this covers the cases where the first render happens while
|
|
31
|
+
* the tab is hidden (nested/lazy panels) or before web fonts load, when
|
|
32
|
+
* layout measurements would otherwise be 0 / stale.
|
|
33
|
+
*/
|
|
34
|
+
private _ensurePillObserver;
|
|
35
|
+
private _updateSegmentPill;
|
|
24
36
|
private scrollTabIntoView;
|
|
25
37
|
private renderTabButton;
|
|
26
38
|
private renderTabPanel;
|
|
@@ -2,7 +2,7 @@ import { LitElement as h, unsafeCSS as b, css as v, html as i, nothing as p } fr
|
|
|
2
2
|
import { property as o, state as f, query as _ } from "lit/decorators.js";
|
|
3
3
|
import { live as y } from "lit/directives/live.js";
|
|
4
4
|
import "./ui-icon-Ctn4nGFa.js";
|
|
5
|
-
import "./combobox-
|
|
5
|
+
import "./combobox-CFF30L-n.js";
|
|
6
6
|
const x = ":host{display:block;width:100%}.pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4) var(--spacing-6);background-color:var(--color-body-bg);border-top:1px solid var(--color-border);font-family:var(--font-family-base);gap:var(--spacing-4)}.pagination--justify-end{justify-content:flex-end}.pagination--justify-start{justify-content:flex-start}.pagination--justify-center{justify-content:center}.pagination__nav{display:flex;align-items:center;gap:var(--spacing-1)}.pagination__nav-group{display:flex;align-items:center}.pagination__btn{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);border:none;background:transparent;border-radius:var(--radius-base);cursor:pointer;color:var(--color-secondary);transition:background-color .15s ease,color .15s ease,opacity .15s ease}.pagination__btn:hover:not(:disabled){background-color:var(--color-body-bg-hover)}.pagination__btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.pagination__btn:disabled{opacity:.4;cursor:not-allowed}.pagination__btn--icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:var(--spacing-2);border:1px solid var(--color-border);background-color:var(--color-body-bg);border-radius:var(--radius-base);cursor:pointer;color:var(--color-secondary);transition:background-color .15s ease,border-color .15s ease,opacity .15s ease}.pagination__btn--icon:hover:not(:disabled){background-color:var(--color-body-bg-hover);border-color:var(--color-border-hover)}.pagination__btn--icon:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.pagination__btn--icon:disabled{opacity:.4;cursor:not-allowed}.pagination__btn--text{display:flex;align-items:center;justify-content:center;gap:var(--spacing-1);height:32px;min-width:100px;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);background-color:var(--color-body-bg);border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-secondary);cursor:pointer;transition:all .15s ease}.pagination__btn--text:hover:not(:disabled){background-color:var(--color-body-bg-hover);border-color:var(--color-border-hover)}.pagination__btn--text:disabled{color:var(--color-secondary-disabled);cursor:not-allowed}.pagination__btn--number{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);background-color:var(--color-body-bg);border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-secondary);cursor:pointer;transition:all .15s ease}.pagination__btn--number:hover:not(:disabled):not(.pagination__btn--active){background-color:var(--color-body-bg-hover)}.pagination__btn--active{background-color:var(--color-secondary);border-color:var(--color-secondary);color:#fff;font-weight:var(--font-weight-semibold)}.pagination__btn--ellipsis{border:none;background:transparent;cursor:default;min-width:32px}.pagination__btn--ellipsis:hover{background:transparent}.pagination__input-container{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px}.pagination__input{width:100%;height:100%;min-width:32px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-base);background-color:var(--color-body-bg);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-body-text);text-align:center;outline:none;transition:border-color .15s ease}.pagination__input:focus{border-color:var(--color-primary)}.pagination__input::-webkit-outer-spin-button,.pagination__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pagination__input[type=number]{-moz-appearance:textfield}.pagination__separator{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-tertiary);line-height:18px;letter-spacing:-.12px;margin-right:var(--spacing-1)}.pagination__info{display:flex;align-items:center;gap:var(--spacing-2)}.pagination__page-info{display:flex;align-items:center;gap:var(--spacing-1);font-size:var(--font-size-xs);line-height:18px;letter-spacing:-.12px}.pagination__page-info-text{color:var(--color-secondary)}.pagination__page-info-separator{color:var(--color-tertiary)}.pagination__total{display:flex;align-items:center;gap:var(--spacing-1);font-size:var(--font-size-xs);line-height:18px;letter-spacing:-.12px}.pagination__total-separator{color:var(--color-tertiary)}.pagination__total-text{color:var(--color-secondary)}.pagination__page-size{display:flex;align-items:center}@media(max-width:768px){.pagination{flex-wrap:wrap;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4)}.pagination__btn--text{min-width:80px;font-size:var(--font-size-xs)}}@media(max-width:480px){.pagination__nav,.pagination__info{flex-wrap:wrap;justify-content:center}}";
|
|
7
7
|
var m = Object.defineProperty, n = (u, t, e, r) => {
|
|
8
8
|
for (var s = void 0, l = u.length - 1, g; l >= 0; l--)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const a=require("lit"),n=require("lit/decorators.js"),h=require("lit/directives/live.js");require("./ui-icon-jKyMV1zp.cjs");require("./combobox-
|
|
1
|
+
"use strict";const a=require("lit"),n=require("lit/decorators.js"),h=require("lit/directives/live.js");require("./ui-icon-jKyMV1zp.cjs");require("./combobox-s7NFPAd3.cjs");const u=":host{display:block;width:100%}.pagination{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4) var(--spacing-6);background-color:var(--color-body-bg);border-top:1px solid var(--color-border);font-family:var(--font-family-base);gap:var(--spacing-4)}.pagination--justify-end{justify-content:flex-end}.pagination--justify-start{justify-content:flex-start}.pagination--justify-center{justify-content:center}.pagination__nav{display:flex;align-items:center;gap:var(--spacing-1)}.pagination__nav-group{display:flex;align-items:center}.pagination__btn{display:flex;align-items:center;justify-content:center;padding:var(--spacing-2);border:none;background:transparent;border-radius:var(--radius-base);cursor:pointer;color:var(--color-secondary);transition:background-color .15s ease,color .15s ease,opacity .15s ease}.pagination__btn:hover:not(:disabled){background-color:var(--color-body-bg-hover)}.pagination__btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.pagination__btn:disabled{opacity:.4;cursor:not-allowed}.pagination__btn--icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:var(--spacing-2);border:1px solid var(--color-border);background-color:var(--color-body-bg);border-radius:var(--radius-base);cursor:pointer;color:var(--color-secondary);transition:background-color .15s ease,border-color .15s ease,opacity .15s ease}.pagination__btn--icon:hover:not(:disabled){background-color:var(--color-body-bg-hover);border-color:var(--color-border-hover)}.pagination__btn--icon:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.pagination__btn--icon:disabled{opacity:.4;cursor:not-allowed}.pagination__btn--text{display:flex;align-items:center;justify-content:center;gap:var(--spacing-1);height:32px;min-width:100px;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);background-color:var(--color-body-bg);border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-secondary);cursor:pointer;transition:all .15s ease}.pagination__btn--text:hover:not(:disabled){background-color:var(--color-body-bg-hover);border-color:var(--color-border-hover)}.pagination__btn--text:disabled{color:var(--color-secondary-disabled);cursor:not-allowed}.pagination__btn--number{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:var(--spacing-1) var(--spacing-3);border:1px solid var(--color-border);background-color:var(--color-body-bg);border-radius:var(--radius-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-secondary);cursor:pointer;transition:all .15s ease}.pagination__btn--number:hover:not(:disabled):not(.pagination__btn--active){background-color:var(--color-body-bg-hover)}.pagination__btn--active{background-color:var(--color-secondary);border-color:var(--color-secondary);color:#fff;font-weight:var(--font-weight-semibold)}.pagination__btn--ellipsis{border:none;background:transparent;cursor:default;min-width:32px}.pagination__btn--ellipsis:hover{background:transparent}.pagination__input-container{display:flex;align-items:center;justify-content:center;min-width:32px;height:32px}.pagination__input{width:100%;height:100%;min-width:32px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-base);background-color:var(--color-body-bg);font-size:var(--font-size-sm);font-weight:var(--font-weight-regular);color:var(--color-body-text);text-align:center;outline:none;transition:border-color .15s ease}.pagination__input:focus{border-color:var(--color-primary)}.pagination__input::-webkit-outer-spin-button,.pagination__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pagination__input[type=number]{-moz-appearance:textfield}.pagination__separator{font-size:var(--font-size-xs);font-weight:var(--font-weight-regular);color:var(--color-tertiary);line-height:18px;letter-spacing:-.12px;margin-right:var(--spacing-1)}.pagination__info{display:flex;align-items:center;gap:var(--spacing-2)}.pagination__page-info{display:flex;align-items:center;gap:var(--spacing-1);font-size:var(--font-size-xs);line-height:18px;letter-spacing:-.12px}.pagination__page-info-text{color:var(--color-secondary)}.pagination__page-info-separator{color:var(--color-tertiary)}.pagination__total{display:flex;align-items:center;gap:var(--spacing-1);font-size:var(--font-size-xs);line-height:18px;letter-spacing:-.12px}.pagination__total-separator{color:var(--color-tertiary)}.pagination__total-text{color:var(--color-secondary)}.pagination__page-size{display:flex;align-items:center}@media(max-width:768px){.pagination{flex-wrap:wrap;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4)}.pagination__btn--text{min-width:80px;font-size:var(--font-size-xs)}}@media(max-width:480px){.pagination__nav,.pagination__info{flex-wrap:wrap;justify-content:center}}";var b=Object.defineProperty,o=(d,t,e,r)=>{for(var s=void 0,l=d.length-1,p;l>=0;l--)(p=d[l])&&(s=p(t,e,s)||s);return s&&b(t,e,s),s};const c=class c extends a.LitElement{constructor(){super(...arguments),this.variant="default",this.page=1,this.pageSize=25,this.total=0,this.pageSizeOptions=[10,25,50,100],this.showPageSize=!0,this.showTotal=!0,this.disabled=!1,this.prevLabel="Önceki",this.nextLabel="Sonraki",this.pageLabel="Sayfa",this.perPageLabel="/ sayfa",this.totalLabel="kayıt",this.inputValue="1",this.goFirst=()=>{this.canGoPrev&&this.goToPage(1)},this.goPrev=()=>{this.canGoPrev&&this.goToPage(this.page-1)},this.goNext=()=>{this.canGoNext&&this.goToPage(this.page+1)},this.goLast=()=>{this.canGoNext&&this.goToPage(this.totalPages)},this.handleInputChange=t=>{const e=t.target;this.inputValue=e.value},this.handleInputBlur=()=>{const t=parseInt(this.inputValue,10);isNaN(t)?this.inputValue=String(this.page):this.goToPage(t)},this.handleInputKeydown=t=>{t.key==="Enter"&&t.target.blur()},this.handlePageSizeChange=t=>{const e=t.detail?.value?.[0];if(e){const r=e.value;r!==this.pageSize&&(this.pageSize=r,this.page=1,this.emitPageChange())}}}get totalPages(){return Math.max(1,Math.ceil(this.total/this.pageSize))}get canGoPrev(){return this.page>1&&!this.disabled}get canGoNext(){return this.page<this.totalPages&&!this.disabled}firstUpdated(){this.updateComboboxSelection()}updated(t){super.updated(t),t.has("page")&&(this.inputValue=String(this.page)),t.has("pageSize")&&this.updateComboboxSelection()}updateComboboxSelection(){this._combobox&&this.showPageSize&&this._combobox.setSelected(this.selectedPageSizeItem)}emitPageChange(){this.dispatchEvent(new CustomEvent("page-change",{bubbles:!0,composed:!0,detail:{page:this.page,pageSize:this.pageSize,totalPages:this.totalPages}}))}goToPage(t){const e=Math.max(1,Math.min(t,this.totalPages));e!==this.page&&(this.page=e,this.emitPageChange())}get pageSizeItems(){return this.pageSizeOptions.map(t=>({label:`${t} ${this.perPageLabel}`,value:t}))}get selectedPageSizeItem(){return[{label:`${this.pageSize} ${this.perPageLabel}`,value:this.pageSize}]}getPageNumbers(){const t=[],e=this.totalPages,r=this.page,s=1;if(e<=7)for(let l=1;l<=e;l++)t.push(l);else{t.push(1),r>3&&t.push("ellipsis");const l=Math.max(2,r-s),p=Math.min(e-1,r+s);for(let g=l;g<=p;g++)t.includes(g)||t.push(g);r<e-2&&t.push("ellipsis"),t.includes(e)||t.push(e)}return t}renderNavButtons(t=!1){const e=t?"pagination__btn--icon":"pagination__btn";return a.html`
|
|
2
2
|
<div class="pagination__nav-group">
|
|
3
3
|
<button
|
|
4
4
|
type="button"
|
package/dist/pagination.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./pagination-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./pagination-HyX0EAZr.cjs");exports.Pagination=i.Pagination;
|
package/dist/pagination.js
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Shared Button Types
|
|
3
|
+
* Used by Button, SplitButton, and any other component that needs button-like sizing/theming.
|
|
4
|
+
*/
|
|
5
|
+
export type ButtonVariant = "solid" | "outline" | "text";
|
|
6
|
+
export type ButtonSize = "sm" | "md" | "lg";
|
|
7
|
+
export type ButtonTheme = "primary" | "secondary" | "success" | "danger" | "info" | "warning" | "light" | "dark";
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";const s=require("lit"),r=require("lit/decorators.js"),h=".tab{width:100%;font-family:var(--font-family-base)}.tab__list{display:flex;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--color-border);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab__list::-webkit-scrollbar{display:none}.tab__button{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);min-width:120px;position:relative;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;font-family:var(--font-family-base);white-space:nowrap;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:var(--color-light)}.tab__button--active{border-bottom-color:var(--color-primary)}.tab__button--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.tab__icon{font-size:var(--font-size-xl);flex-shrink:0;color:inherit;line-height:1}.tab__content{display:flex;flex-direction:column;align-items:flex-start}.tab__label{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);color:var(--color-body-text)}.tab__label--inactive{color:var(--color-tertiary)}.tab__description{font-size:var(--font-size-xs);text-align:left;color:var(--color-tertiary)}.tab__description--active{color:var(--color-secondary)}.tab__panel{padding:var(--spacing-4);outline:none}.tab__panel--hidden{display:none}.tab--segmented .tab__list{display:inline-flex;position:relative;border-bottom:none;background-color:var(--color-light);border-radius:var(--radius-base);padding:0;gap:0;overflow:visible}.tab__segment-pill{position:absolute;top:0;bottom:0;left:0;width:0;background-color:var(--color-white, #ffffff);border:1px solid var(--color-border);border-radius:var(--radius-base);pointer-events:none;z-index:0;transition:transform .22s cubic-bezier(.35,0,.25,1),width .22s cubic-bezier(.35,0,.25,1)}.tab--segmented .tab__button{position:relative;z-index:1;min-width:unset;height:32px;padding:var(--spacing-1) var(--spacing-3);border:1px solid transparent;border-bottom:1px solid transparent;border-radius:var(--radius-base);background:transparent;transition:color var(--transition-speed-base) var(--transition-timing)}.tab--segmented .tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:transparent}.tab--segmented .tab__button--active{background-color:transparent;border-color:transparent}.tab--segmented .tab__label{color:var(--color-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:20px;letter-spacing:-.14px}.tab--segmented .tab__label--inactive{color:var(--color-secondary)}.tab--segmented .tab__button--active .tab__label,.tab--segmented .tab__button--active .tab__label--inactive{color:var(--color-primary)}.tab--segmented .tab__icon{color:inherit;font-size:var(--font-size-base)}.tab--segmented .tab__panels{margin-top:var(--spacing-3)}.tab--segmented .tab__panel{padding:0}";var p=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(b,t,i,e)=>{for(var a=e>1?void 0:e?_(t,i):t,o=b.length-1,n;o>=0;o--)(n=b[o])&&(a=(e?n(t,i,a):n(a))||a);return e&&a&&p(t,i,a),a};exports.LogosphereTab=class extends s.LitElement{constructor(){super(...arguments),this.tabs=[],this.activeTab="",this.lazy=!0,this.variant="default",this._focusedIndex=0,this._renderedTabs=new Set,this._pillInitialized=!1}connectedCallback(){super.connectedCallback(),!this.activeTab&&this.tabs.length>0&&(this.activeTab=this.tabs[0].id)}disconnectedCallback(){super.disconnectedCallback(),this._pillResizeObserver?.disconnect(),this._pillResizeObserver=void 0}willUpdate(t){if(super.willUpdate(t),t.has("activeTab")&&this.activeTab){this._renderedTabs.add(this.activeTab);const i=this.tabs.findIndex(e=>e.id===this.activeTab);i!==-1&&(this._focusedIndex=i)}t.has("tabs")&&this.tabs.length>0&&(this.tabs.some(e=>e.id===this.activeTab)||(this.activeTab=this.tabs[0].id),this._focusedIndex=this.tabs.findIndex(e=>e.id===this.activeTab))}handleTabClick(t,i){if(i)return;const e=this.activeTab;this.activeTab=t,this._focusedIndex=this.tabs.findIndex(a=>a.id===t),this.dispatchEvent(new CustomEvent("tab-change",{detail:{oldTab:e,newTab:t},bubbles:!0,composed:!0}))}handleKeyDown(t){const{tabs:i}=this;if(i.filter(o=>!o.disabled).length===0)return;let e=this._focusedIndex;const a=this._focusedIndex;switch(t.key){case"ArrowLeft":t.preventDefault();do e=e>0?e-1:i.length-1;while(i[e]?.disabled&&e!==a);break;case"ArrowRight":t.preventDefault();do e=e<i.length-1?e+1:0;while(i[e]?.disabled&&e!==a);break;case"Home":for(t.preventDefault(),e=0;i[e]?.disabled&&e<i.length-1;)e++;break;case"End":for(t.preventDefault(),e=i.length-1;i[e]?.disabled&&e>0;)e--;break;default:return}if(e!==this._focusedIndex&&!i[e]?.disabled){const o=this.activeTab;this._focusedIndex=e,this.activeTab=i[e].id,this.updateComplete.then(()=>{this.shadowRoot?.querySelector(`[role="tab"][data-tab-id="${i[e].id}"]`)?.focus()}),this.dispatchEvent(new CustomEvent("tab-change",{detail:{oldTab:o,newTab:i[e].id},bubbles:!0,composed:!0}))}}updated(t){super.updated(t),this.variant==="segmented"&&(this._ensurePillObserver(),this._updateSegmentPill())}_ensurePillObserver(){if(this._pillResizeObserver)return;const t=this.shadowRoot?.querySelector(".tab__list");!t||typeof ResizeObserver>"u"||(this._pillResizeObserver=new ResizeObserver(()=>this._updateSegmentPill()),this._pillResizeObserver.observe(t))}_updateSegmentPill(){const t=this.shadowRoot?.querySelector(".tab__segment-pill"),i=this.shadowRoot?.querySelector(".tab__button--active"),e=this.shadowRoot?.querySelector(".tab__list");if(!t||!i||!e)return;const a=e.getBoundingClientRect(),o=i.getBoundingClientRect();if(o.width===0)return;const n=parseFloat(getComputedStyle(e).paddingLeft)||0,d=o.left-a.left-e.clientLeft-n+e.scrollLeft,c=o.width;this._pillInitialized?(t.style.transform=`translateX(${d}px)`,t.style.width=`${c}px`):(t.style.transition="none",t.style.transform=`translateX(${d}px)`,t.style.width=`${c}px`,requestAnimationFrame(()=>{t.style.transition=""}),this._pillInitialized=!0)}scrollTabIntoView(t){this.updateComplete.then(()=>{const i=this.shadowRoot?.querySelector(`[role="tab"][data-tab-id="${t}"]`);if(i&&this.tablist){const e=this.tablist.getBoundingClientRect(),a=i.getBoundingClientRect();a.left<e.left?this.tablist.scrollLeft-=e.left-a.left+16:a.right>e.right&&(this.tablist.scrollLeft+=a.right-e.right+16)}})}renderTabButton(t,i){const e=this.activeTab===t.id,a=this._focusedIndex===i,o=["tab__button",e?"tab__button--active":"",t.disabled?"tab__button--disabled":""].filter(Boolean).join(" "),n=["tab__label",e?"":"tab__label--inactive"].filter(Boolean).join(" "),d=["tab__description",e?"tab__description--active":""].filter(Boolean).join(" ");return s.html`
|
|
2
|
+
<button
|
|
3
|
+
role="tab"
|
|
4
|
+
class=${o}
|
|
5
|
+
data-tab-id=${t.id}
|
|
6
|
+
aria-selected=${e?"true":"false"}
|
|
7
|
+
aria-controls="panel-${t.id}"
|
|
8
|
+
tabindex=${e||a?"0":"-1"}
|
|
9
|
+
?disabled=${t.disabled}
|
|
10
|
+
@click=${()=>this.handleTabClick(t.id,t.disabled)}
|
|
11
|
+
@focus=${()=>this.scrollTabIntoView(t.id)}
|
|
12
|
+
>
|
|
13
|
+
${t.icon?s.html`<i class="${t.icon} tab__icon"></i>`:s.nothing}
|
|
14
|
+
<div class="tab__content">
|
|
15
|
+
<span class=${n}>${t.label}</span>
|
|
16
|
+
${t.description?s.html`<span class=${d}>${t.description}</span>`:s.nothing}
|
|
17
|
+
</div>
|
|
18
|
+
</button>
|
|
19
|
+
`}renderTabPanel(t){const i=this.activeTab===t.id;if(!(!this.lazy||this._renderedTabs.has(t.id)))return s.nothing;const a=["tab__panel",i?"":"tab__panel--hidden"].filter(Boolean).join(" ");return s.html`
|
|
20
|
+
<div
|
|
21
|
+
role="tabpanel"
|
|
22
|
+
id="panel-${t.id}"
|
|
23
|
+
aria-labelledby="tab-${t.id}"
|
|
24
|
+
class=${a}
|
|
25
|
+
tabindex="0"
|
|
26
|
+
>
|
|
27
|
+
<slot name=${`panel-${t.id}`}>
|
|
28
|
+
${typeof t.content=="string"?s.html`${t.content}`:s.nothing}
|
|
29
|
+
</slot>
|
|
30
|
+
</div>
|
|
31
|
+
`}render(){return s.html`
|
|
32
|
+
<div class="tab tab--${this.variant}">
|
|
33
|
+
<div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
|
|
34
|
+
${this.variant==="segmented"?s.html`<span class="tab__segment-pill" aria-hidden="true"></span>`:s.nothing}
|
|
35
|
+
${this.tabs.map((t,i)=>this.renderTabButton(t,i))}
|
|
36
|
+
</div>
|
|
37
|
+
<div class="tab__panels">${this.tabs.map(t=>this.renderTabPanel(t))}</div>
|
|
38
|
+
</div>
|
|
39
|
+
`}};exports.LogosphereTab.styles=[s.css`
|
|
40
|
+
${s.unsafeCSS(h)}
|
|
41
|
+
`];l([r.property({type:Array})],exports.LogosphereTab.prototype,"tabs",2);l([r.property({type:String})],exports.LogosphereTab.prototype,"activeTab",2);l([r.property({type:Boolean})],exports.LogosphereTab.prototype,"lazy",2);l([r.property({type:String})],exports.LogosphereTab.prototype,"variant",2);l([r.state()],exports.LogosphereTab.prototype,"_focusedIndex",2);l([r.state()],exports.LogosphereTab.prototype,"_renderedTabs",2);l([r.query('[role="tablist"]')],exports.LogosphereTab.prototype,"tablist",2);exports.LogosphereTab=l([r.customElement("logosphere-tab")],exports.LogosphereTab);
|
|
@@ -0,0 +1,204 @@
|
|
|
1
|
+
import { unsafeCSS as _, css as u, LitElement as v, nothing as b, html as d } from "lit";
|
|
2
|
+
import { property as c, state as h, query as f, customElement as g } from "lit/decorators.js";
|
|
3
|
+
const m = ".tab{width:100%;font-family:var(--font-family-base)}.tab__list{display:flex;overflow-x:auto;overflow-y:hidden;border-bottom:1px solid var(--color-border);scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.tab__list::-webkit-scrollbar{display:none}.tab__button{display:inline-flex;flex-direction:row;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);min-width:120px;position:relative;cursor:pointer;border:none;border-bottom:2px solid transparent;background:transparent;font-family:var(--font-family-base);white-space:nowrap;transition:background-color var(--transition-speed-base) var(--transition-timing),border-color var(--transition-speed-base) var(--transition-timing)}.tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:var(--color-light)}.tab__button--active{border-bottom-color:var(--color-primary)}.tab__button--disabled{cursor:not-allowed;opacity:.4;pointer-events:none}.tab__icon{font-size:var(--font-size-xl);flex-shrink:0;color:inherit;line-height:1}.tab__content{display:flex;flex-direction:column;align-items:flex-start}.tab__label{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm);color:var(--color-body-text)}.tab__label--inactive{color:var(--color-tertiary)}.tab__description{font-size:var(--font-size-xs);text-align:left;color:var(--color-tertiary)}.tab__description--active{color:var(--color-secondary)}.tab__panel{padding:var(--spacing-4);outline:none}.tab__panel--hidden{display:none}.tab--segmented .tab__list{display:inline-flex;position:relative;border-bottom:none;background-color:var(--color-light);border-radius:var(--radius-base);padding:0;gap:0;overflow:visible}.tab__segment-pill{position:absolute;top:0;bottom:0;left:0;width:0;background-color:var(--color-white, #ffffff);border:1px solid var(--color-border);border-radius:var(--radius-base);pointer-events:none;z-index:0;transition:transform .22s cubic-bezier(.35,0,.25,1),width .22s cubic-bezier(.35,0,.25,1)}.tab--segmented .tab__button{position:relative;z-index:1;min-width:unset;height:32px;padding:var(--spacing-1) var(--spacing-3);border:1px solid transparent;border-bottom:1px solid transparent;border-radius:var(--radius-base);background:transparent;transition:color var(--transition-speed-base) var(--transition-timing)}.tab--segmented .tab__button:hover:not(.tab__button--disabled):not(.tab__button--active){background-color:transparent}.tab--segmented .tab__button--active{background-color:transparent;border-color:transparent}.tab--segmented .tab__label{color:var(--color-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:20px;letter-spacing:-.14px}.tab--segmented .tab__label--inactive{color:var(--color-secondary)}.tab--segmented .tab__button--active .tab__label,.tab--segmented .tab__button--active .tab__label--inactive{color:var(--color-primary)}.tab--segmented .tab__icon{color:inherit;font-size:var(--font-size-base)}.tab--segmented .tab__panels{margin-top:var(--spacing-3)}.tab--segmented .tab__panel{padding:0}";
|
|
4
|
+
var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (t, i, e, a) => {
|
|
5
|
+
for (var s = a > 1 ? void 0 : a ? w(i, e) : i, o = t.length - 1, r; o >= 0; o--)
|
|
6
|
+
(r = t[o]) && (s = (a ? r(i, e, s) : r(s)) || s);
|
|
7
|
+
return a && s && y(i, e, s), s;
|
|
8
|
+
};
|
|
9
|
+
let n = class extends v {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments), this.tabs = [], this.activeTab = "", this.lazy = !0, this.variant = "default", this._focusedIndex = 0, this._renderedTabs = /* @__PURE__ */ new Set(), this._pillInitialized = !1;
|
|
12
|
+
}
|
|
13
|
+
connectedCallback() {
|
|
14
|
+
super.connectedCallback(), !this.activeTab && this.tabs.length > 0 && (this.activeTab = this.tabs[0].id);
|
|
15
|
+
}
|
|
16
|
+
disconnectedCallback() {
|
|
17
|
+
super.disconnectedCallback(), this._pillResizeObserver?.disconnect(), this._pillResizeObserver = void 0;
|
|
18
|
+
}
|
|
19
|
+
willUpdate(t) {
|
|
20
|
+
if (super.willUpdate(t), t.has("activeTab") && this.activeTab) {
|
|
21
|
+
this._renderedTabs.add(this.activeTab);
|
|
22
|
+
const i = this.tabs.findIndex((e) => e.id === this.activeTab);
|
|
23
|
+
i !== -1 && (this._focusedIndex = i);
|
|
24
|
+
}
|
|
25
|
+
t.has("tabs") && this.tabs.length > 0 && (this.tabs.some((e) => e.id === this.activeTab) || (this.activeTab = this.tabs[0].id), this._focusedIndex = this.tabs.findIndex((e) => e.id === this.activeTab));
|
|
26
|
+
}
|
|
27
|
+
// ==================== EVENTS ====================
|
|
28
|
+
handleTabClick(t, i) {
|
|
29
|
+
if (i) return;
|
|
30
|
+
const e = this.activeTab;
|
|
31
|
+
this.activeTab = t, this._focusedIndex = this.tabs.findIndex((a) => a.id === t), this.dispatchEvent(
|
|
32
|
+
new CustomEvent("tab-change", {
|
|
33
|
+
detail: { oldTab: e, newTab: t },
|
|
34
|
+
bubbles: !0,
|
|
35
|
+
composed: !0
|
|
36
|
+
})
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
handleKeyDown(t) {
|
|
40
|
+
const { tabs: i } = this;
|
|
41
|
+
if (i.filter((s) => !s.disabled).length === 0) return;
|
|
42
|
+
let e = this._focusedIndex;
|
|
43
|
+
const a = this._focusedIndex;
|
|
44
|
+
switch (t.key) {
|
|
45
|
+
case "ArrowLeft":
|
|
46
|
+
t.preventDefault();
|
|
47
|
+
do
|
|
48
|
+
e = e > 0 ? e - 1 : i.length - 1;
|
|
49
|
+
while (i[e]?.disabled && e !== a);
|
|
50
|
+
break;
|
|
51
|
+
case "ArrowRight":
|
|
52
|
+
t.preventDefault();
|
|
53
|
+
do
|
|
54
|
+
e = e < i.length - 1 ? e + 1 : 0;
|
|
55
|
+
while (i[e]?.disabled && e !== a);
|
|
56
|
+
break;
|
|
57
|
+
case "Home":
|
|
58
|
+
for (t.preventDefault(), e = 0; i[e]?.disabled && e < i.length - 1; ) e++;
|
|
59
|
+
break;
|
|
60
|
+
case "End":
|
|
61
|
+
for (t.preventDefault(), e = i.length - 1; i[e]?.disabled && e > 0; ) e--;
|
|
62
|
+
break;
|
|
63
|
+
default:
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
if (e !== this._focusedIndex && !i[e]?.disabled) {
|
|
67
|
+
const s = this.activeTab;
|
|
68
|
+
this._focusedIndex = e, this.activeTab = i[e].id, this.updateComplete.then(() => {
|
|
69
|
+
this.shadowRoot?.querySelector(
|
|
70
|
+
`[role="tab"][data-tab-id="${i[e].id}"]`
|
|
71
|
+
)?.focus();
|
|
72
|
+
}), this.dispatchEvent(
|
|
73
|
+
new CustomEvent("tab-change", {
|
|
74
|
+
detail: { oldTab: s, newTab: i[e].id },
|
|
75
|
+
bubbles: !0,
|
|
76
|
+
composed: !0
|
|
77
|
+
})
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
updated(t) {
|
|
82
|
+
super.updated(t), this.variant === "segmented" && (this._ensurePillObserver(), this._updateSegmentPill());
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* Observe the tablist so the pill is repositioned whenever the list gains or
|
|
86
|
+
* changes size — this covers the cases where the first render happens while
|
|
87
|
+
* the tab is hidden (nested/lazy panels) or before web fonts load, when
|
|
88
|
+
* layout measurements would otherwise be 0 / stale.
|
|
89
|
+
*/
|
|
90
|
+
_ensurePillObserver() {
|
|
91
|
+
if (this._pillResizeObserver) return;
|
|
92
|
+
const t = this.shadowRoot?.querySelector(".tab__list");
|
|
93
|
+
!t || typeof ResizeObserver > "u" || (this._pillResizeObserver = new ResizeObserver(() => this._updateSegmentPill()), this._pillResizeObserver.observe(t));
|
|
94
|
+
}
|
|
95
|
+
_updateSegmentPill() {
|
|
96
|
+
const t = this.shadowRoot?.querySelector(".tab__segment-pill"), i = this.shadowRoot?.querySelector(".tab__button--active"), e = this.shadowRoot?.querySelector(".tab__list");
|
|
97
|
+
if (!t || !i || !e) return;
|
|
98
|
+
const a = e.getBoundingClientRect(), s = i.getBoundingClientRect();
|
|
99
|
+
if (s.width === 0) return;
|
|
100
|
+
const o = parseFloat(getComputedStyle(e).paddingLeft) || 0, r = s.left - a.left - e.clientLeft - o + e.scrollLeft, p = s.width;
|
|
101
|
+
this._pillInitialized ? (t.style.transform = `translateX(${r}px)`, t.style.width = `${p}px`) : (t.style.transition = "none", t.style.transform = `translateX(${r}px)`, t.style.width = `${p}px`, requestAnimationFrame(() => {
|
|
102
|
+
t.style.transition = "";
|
|
103
|
+
}), this._pillInitialized = !0);
|
|
104
|
+
}
|
|
105
|
+
scrollTabIntoView(t) {
|
|
106
|
+
this.updateComplete.then(() => {
|
|
107
|
+
const i = this.shadowRoot?.querySelector(
|
|
108
|
+
`[role="tab"][data-tab-id="${t}"]`
|
|
109
|
+
);
|
|
110
|
+
if (i && this.tablist) {
|
|
111
|
+
const e = this.tablist.getBoundingClientRect(), a = i.getBoundingClientRect();
|
|
112
|
+
a.left < e.left ? this.tablist.scrollLeft -= e.left - a.left + 16 : a.right > e.right && (this.tablist.scrollLeft += a.right - e.right + 16);
|
|
113
|
+
}
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
// ==================== RENDER ====================
|
|
117
|
+
renderTabButton(t, i) {
|
|
118
|
+
const e = this.activeTab === t.id, a = this._focusedIndex === i, s = [
|
|
119
|
+
"tab__button",
|
|
120
|
+
e ? "tab__button--active" : "",
|
|
121
|
+
t.disabled ? "tab__button--disabled" : ""
|
|
122
|
+
].filter(Boolean).join(" "), o = ["tab__label", e ? "" : "tab__label--inactive"].filter(Boolean).join(" "), r = ["tab__description", e ? "tab__description--active" : ""].filter(Boolean).join(" ");
|
|
123
|
+
return d`
|
|
124
|
+
<button
|
|
125
|
+
role="tab"
|
|
126
|
+
class=${s}
|
|
127
|
+
data-tab-id=${t.id}
|
|
128
|
+
aria-selected=${e ? "true" : "false"}
|
|
129
|
+
aria-controls="panel-${t.id}"
|
|
130
|
+
tabindex=${e || a ? "0" : "-1"}
|
|
131
|
+
?disabled=${t.disabled}
|
|
132
|
+
@click=${() => this.handleTabClick(t.id, t.disabled)}
|
|
133
|
+
@focus=${() => this.scrollTabIntoView(t.id)}
|
|
134
|
+
>
|
|
135
|
+
${t.icon ? d`<i class="${t.icon} tab__icon"></i>` : b}
|
|
136
|
+
<div class="tab__content">
|
|
137
|
+
<span class=${o}>${t.label}</span>
|
|
138
|
+
${t.description ? d`<span class=${r}>${t.description}</span>` : b}
|
|
139
|
+
</div>
|
|
140
|
+
</button>
|
|
141
|
+
`;
|
|
142
|
+
}
|
|
143
|
+
renderTabPanel(t) {
|
|
144
|
+
const i = this.activeTab === t.id;
|
|
145
|
+
if (!(!this.lazy || this._renderedTabs.has(t.id))) return b;
|
|
146
|
+
const a = ["tab__panel", i ? "" : "tab__panel--hidden"].filter(Boolean).join(" ");
|
|
147
|
+
return d`
|
|
148
|
+
<div
|
|
149
|
+
role="tabpanel"
|
|
150
|
+
id="panel-${t.id}"
|
|
151
|
+
aria-labelledby="tab-${t.id}"
|
|
152
|
+
class=${a}
|
|
153
|
+
tabindex="0"
|
|
154
|
+
>
|
|
155
|
+
<slot name=${`panel-${t.id}`}>
|
|
156
|
+
${typeof t.content == "string" ? d`${t.content}` : b}
|
|
157
|
+
</slot>
|
|
158
|
+
</div>
|
|
159
|
+
`;
|
|
160
|
+
}
|
|
161
|
+
render() {
|
|
162
|
+
return d`
|
|
163
|
+
<div class="tab tab--${this.variant}">
|
|
164
|
+
<div role="tablist" aria-label="Tabs" class="tab__list" @keydown=${this.handleKeyDown}>
|
|
165
|
+
${this.variant === "segmented" ? d`<span class="tab__segment-pill" aria-hidden="true"></span>` : b}
|
|
166
|
+
${this.tabs.map((t, i) => this.renderTabButton(t, i))}
|
|
167
|
+
</div>
|
|
168
|
+
<div class="tab__panels">${this.tabs.map((t) => this.renderTabPanel(t))}</div>
|
|
169
|
+
</div>
|
|
170
|
+
`;
|
|
171
|
+
}
|
|
172
|
+
};
|
|
173
|
+
n.styles = [
|
|
174
|
+
u`
|
|
175
|
+
${_(m)}
|
|
176
|
+
`
|
|
177
|
+
];
|
|
178
|
+
l([
|
|
179
|
+
c({ type: Array })
|
|
180
|
+
], n.prototype, "tabs", 2);
|
|
181
|
+
l([
|
|
182
|
+
c({ type: String })
|
|
183
|
+
], n.prototype, "activeTab", 2);
|
|
184
|
+
l([
|
|
185
|
+
c({ type: Boolean })
|
|
186
|
+
], n.prototype, "lazy", 2);
|
|
187
|
+
l([
|
|
188
|
+
c({ type: String })
|
|
189
|
+
], n.prototype, "variant", 2);
|
|
190
|
+
l([
|
|
191
|
+
h()
|
|
192
|
+
], n.prototype, "_focusedIndex", 2);
|
|
193
|
+
l([
|
|
194
|
+
h()
|
|
195
|
+
], n.prototype, "_renderedTabs", 2);
|
|
196
|
+
l([
|
|
197
|
+
f('[role="tablist"]')
|
|
198
|
+
], n.prototype, "tablist", 2);
|
|
199
|
+
n = l([
|
|
200
|
+
g("logosphere-tab")
|
|
201
|
+
], n);
|
|
202
|
+
export {
|
|
203
|
+
n as L
|
|
204
|
+
};
|
package/dist/tab.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tab-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./tab-CDMcFHvP.cjs");Object.defineProperty(exports,"LogosphereTab",{enumerable:!0,get:()=>e.LogosphereTab});
|
package/dist/tab.js
CHANGED