@mellow.io/ds 0.1.0

package/dist/components/table/table.styles.js

@@ -0,0 +1,261 @@
+import { css as e } from "lit";
+const r = e`
+  :host {
+    display: block;
+    overflow-x: auto;
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', system-ui, sans-serif);
+  }
+
+  /* ---- Table ---- */
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  /* ---- Head Cell ---- */
+
+  thead th {
+    height: 40px;
+    padding: 0 var(--mellow-space-6, 24px);
+    background-color: var(--mellow-button-secondary-default, #ede2d6);
+    border-bottom: 1px solid var(--mellow-border-tertiary, #f5eddf);
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', system-ui, sans-serif);
+    font-size: var(--mellow-font-size-12, 12px);
+    font-weight: var(--mellow-typography-font-weight-regular, 400);
+    line-height: var(--mellow-line-height-14, 14px);
+    letter-spacing: 0;
+    color: var(--mellow-text-primary, #232222);
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+  }
+
+  thead th.sortable {
+    cursor: pointer;
+    user-select: none;
+    padding-left: var(--mellow-space-6, 24px);
+    padding-right: var(--mellow-space-4, 16px);
+  }
+
+  thead th.sortable:hover {
+    background-color: var(--mellow-button-secondary-hovered, #e4d3c4);
+  }
+
+  thead th.sortable:active {
+    background-color: var(--mellow-button-secondary-pressed, #d3b69e);
+  }
+
+  thead th.sorted {
+    background-color: var(--mellow-button-secondary-hovered, #e4d3c4);
+  }
+
+  .th-content {
+    display: flex;
+    align-items: center;
+    gap: var(--mellow-space-1, 4px);
+    min-width: 0;
+    flex: 1 0 0;
+  }
+
+  .th-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .sort-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    margin-left: auto;
+    color: var(--mellow-text-primary, #232222);
+  }
+
+  .sort-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* ---- Body Cell (Size M) ---- */
+
+  tbody td {
+    height: var(--mellow-space-14, 56px);
+    padding: 0 var(--mellow-space-6, 24px);
+    background-color: var(--mellow-colors-bg-surface-primary, #ffffff);
+    border-bottom: 1px solid var(--mellow-border-tertiary, #f5eddf);
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', system-ui, sans-serif);
+    font-size: var(--mellow-font-size-14, 14px);
+    font-weight: var(--mellow-typography-font-weight-regular, 400);
+    line-height: var(--mellow-line-height-18, 18px);
+    letter-spacing: 0;
+    color: var(--mellow-text-primary, #232222);
+    vertical-align: middle;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* ---- Size L ---- */
+
+  :host([size='l']) tbody td {
+    height: 74px;
+    padding: var(--mellow-space-2-5, 10px) var(--mellow-space-6, 24px);
+    vertical-align: top;
+  }
+
+  /* ---- Row hover state ---- */
+
+  :host([hoverable]) tbody tr:hover td {
+    background-color: var(--mellow-colors-bg-surface-secondary, #faf6f2);
+  }
+
+  /* ---- Row selected state ---- */
+
+  tbody tr.selected td {
+    background-color: var(--mellow-colors-bg-surface-brand, #fcf2e8);
+  }
+
+  /* ---- Striped rows ---- */
+
+  :host([striped]) tbody tr:nth-child(even) td {
+    background-color: var(--mellow-colors-bg-surface-secondary, #faf6f2);
+  }
+
+  /* ---- Column borders ---- */
+
+  :host([bordered]) tbody td {
+    border-left: 1px solid var(--mellow-border-tertiary, #f5eddf);
+  }
+
+  :host([bordered]) tbody td:first-child {
+    border-left: none;
+  }
+
+  /* ---- Footer ---- */
+
+  .table-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 56px;
+    padding: 12px 16px;
+    background-color: var(--mellow-colors-bg-surface-primary, #ffffff);
+    border-bottom: 1px solid var(--mellow-border-tertiary, #f5eddf);
+    border-left: 1px solid var(--mellow-border-tertiary, #f5eddf);
+    border-right: 1px solid var(--mellow-border-tertiary, #f5eddf);
+    border-bottom-left-radius: var(--mellow-radius-1-5, 6px);
+    border-bottom-right-radius: var(--mellow-radius-1-5, 6px);
+    overflow: clip;
+    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\'l', system-ui, sans-serif);
+    font-size: var(--mellow-font-size-14, 14px);
+    font-weight: var(--mellow-typography-font-weight-regular, 400);
+    line-height: var(--mellow-line-height-18, 18px);
+    color: var(--mellow-text-secondary, #8a8686);
+  }
+
+  .footer-pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--mellow-space-2, 8px);
+  }
+
+  .footer-info {
+    white-space: nowrap;
+  }
+
+  .footer-info .highlight {
+    color: var(--mellow-text-primary, #232222);
+  }
+
+  .footer-rows {
+    display: flex;
+    align-items: center;
+    gap: var(--mellow-space-2, 8px);
+    height: 32px;
+    padding: 0 var(--mellow-space-3, 12px);
+    background-color: var(--mellow-button-secondary-default, #ede2d6);
+    border-radius: var(--mellow-radius-1-5, 6px);
+    cursor: pointer;
+    border: none;
+    font-family: inherit;
+    font-size: var(--mellow-font-size-14, 14px);
+    line-height: var(--mellow-line-height-18, 18px);
+    color: var(--mellow-text-primary, #232222);
+  }
+
+  .footer-rows:hover {
+    background-color: var(--mellow-button-secondary-hovered, #e4d3c4);
+  }
+
+  .footer-rows svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .footer-nav {
+    display: flex;
+    align-items: center;
+    height: 32px;
+    border-radius: 6px;
+    overflow: clip;
+  }
+
+  .footer-nav-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 8px;
+    height: 100%;
+    background-color: var(--mellow-colors-bg-secondary, #ede2d6);
+    border: none;
+    cursor: pointer;
+    color: var(--mellow-text-primary, #232222);
+  }
+
+  .footer-nav-btn:hover {
+    background-color: var(--mellow-button-secondary-hovered, #e4d3c4);
+  }
+
+  .footer-nav-btn:disabled {
+    opacity: 0.48;
+    cursor: not-allowed;
+  }
+
+  .footer-nav-btn svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* ---- Empty state ---- */
+
+  .empty-row td {
+    text-align: center;
+    color: var(--mellow-text-secondary, #8a8686);
+    font-style: italic;
+  }
+
+  /* ---- Focus visible ---- */
+
+  thead th.sortable:focus-visible {
+    outline: 2px solid var(--mellow-colors-primary-mellow-orange, #ff6f23);
+    outline-offset: -2px;
+  }
+
+  .footer-rows:focus-visible,
+  .footer-nav-btn:focus-visible {
+    outline: 2px solid var(--mellow-colors-primary-mellow-orange, #ff6f23);
+    outline-offset: 2px;
+  }
+`;
+export {
+  r as tableStyles
+};
+//# sourceMappingURL=table.styles.js.map

package/dist/components/table/table.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.styles.js","sources":["../../../src/components/table/table.styles.ts"],"sourcesContent":["import { css } from 'lit'\n\nexport const tableStyles = css`\n  :host {\n    display: block;\n    overflow-x: auto;\n    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\\\'l', system-ui, sans-serif);\n  }\n\n  /* ---- Table ---- */\n\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n\n  /* ---- Head Cell ---- */\n\n  thead th {\n    height: 40px;\n    padding: 0 var(--mellow-space-6, 24px);\n    background-color: var(--mellow-button-secondary-default, #ede2d6);\n    border-bottom: 1px solid var(--mellow-border-tertiary, #f5eddf);\n    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\\\'l', system-ui, sans-serif);\n    font-size: var(--mellow-font-size-12, 12px);\n    font-weight: var(--mellow-typography-font-weight-regular, 400);\n    line-height: var(--mellow-line-height-14, 14px);\n    letter-spacing: 0;\n    color: var(--mellow-text-primary, #232222);\n    text-align: left;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: middle;\n  }\n\n  thead th.sortable {\n    cursor: pointer;\n    user-select: none;\n    padding-left: var(--mellow-space-6, 24px);\n    padding-right: var(--mellow-space-4, 16px);\n  }\n\n  thead th.sortable:hover {\n    background-color: var(--mellow-button-secondary-hovered, #e4d3c4);\n  }\n\n  thead th.sortable:active {\n    background-color: var(--mellow-button-secondary-pressed, #d3b69e);\n  }\n\n  thead th.sorted {\n    background-color: var(--mellow-button-secondary-hovered, #e4d3c4);\n  }\n\n  .th-content {\n    display: flex;\n    align-items: center;\n    gap: var(--mellow-space-1, 4px);\n    min-width: 0;\n    flex: 1 0 0;\n  }\n\n  .th-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  .sort-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 16px;\n    height: 16px;\n    margin-left: auto;\n    color: var(--mellow-text-primary, #232222);\n  }\n\n  .sort-icon svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  /* ---- Body Cell (Size M) ---- */\n\n  tbody td {\n    height: var(--mellow-space-14, 56px);\n    padding: 0 var(--mellow-space-6, 24px);\n    background-color: var(--mellow-colors-bg-surface-primary, #ffffff);\n    border-bottom: 1px solid var(--mellow-border-tertiary, #f5eddf);\n    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\\\'l', system-ui, sans-serif);\n    font-size: var(--mellow-font-size-14, 14px);\n    font-weight: var(--mellow-typography-font-weight-regular, 400);\n    line-height: var(--mellow-line-height-18, 18px);\n    letter-spacing: 0;\n    color: var(--mellow-text-primary, #232222);\n    vertical-align: middle;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ---- Size L ---- */\n\n  :host([size='l']) tbody td {\n    height: 74px;\n    padding: var(--mellow-space-2-5, 10px) var(--mellow-space-6, 24px);\n    vertical-align: top;\n  }\n\n  /* ---- Row hover state ---- */\n\n  :host([hoverable]) tbody tr:hover td {\n    background-color: var(--mellow-colors-bg-surface-secondary, #faf6f2);\n  }\n\n  /* ---- Row selected state ---- */\n\n  tbody tr.selected td {\n    background-color: var(--mellow-colors-bg-surface-brand, #fcf2e8);\n  }\n\n  /* ---- Striped rows ---- */\n\n  :host([striped]) tbody tr:nth-child(even) td {\n    background-color: var(--mellow-colors-bg-surface-secondary, #faf6f2);\n  }\n\n  /* ---- Column borders ---- */\n\n  :host([bordered]) tbody td {\n    border-left: 1px solid var(--mellow-border-tertiary, #f5eddf);\n  }\n\n  :host([bordered]) tbody td:first-child {\n    border-left: none;\n  }\n\n  /* ---- Footer ---- */\n\n  .table-footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    height: 56px;\n    padding: 12px 16px;\n    background-color: var(--mellow-colors-bg-surface-primary, #ffffff);\n    border-bottom: 1px solid var(--mellow-border-tertiary, #f5eddf);\n    border-left: 1px solid var(--mellow-border-tertiary, #f5eddf);\n    border-right: 1px solid var(--mellow-border-tertiary, #f5eddf);\n    border-bottom-left-radius: var(--mellow-radius-1-5, 6px);\n    border-bottom-right-radius: var(--mellow-radius-1-5, 6px);\n    overflow: clip;\n    font-family: var(--mellow-typography-font-family-body, 'Suisse Int\\\\'l', system-ui, sans-serif);\n    font-size: var(--mellow-font-size-14, 14px);\n    font-weight: var(--mellow-typography-font-weight-regular, 400);\n    line-height: var(--mellow-line-height-18, 18px);\n    color: var(--mellow-text-secondary, #8a8686);\n  }\n\n  .footer-pagination {\n    display: flex;\n    align-items: center;\n    gap: var(--mellow-space-2, 8px);\n  }\n\n  .footer-info {\n    white-space: nowrap;\n  }\n\n  .footer-info .highlight {\n    color: var(--mellow-text-primary, #232222);\n  }\n\n  .footer-rows {\n    display: flex;\n    align-items: center;\n    gap: var(--mellow-space-2, 8px);\n    height: 32px;\n    padding: 0 var(--mellow-space-3, 12px);\n    background-color: var(--mellow-button-secondary-default, #ede2d6);\n    border-radius: var(--mellow-radius-1-5, 6px);\n    cursor: pointer;\n    border: none;\n    font-family: inherit;\n    font-size: var(--mellow-font-size-14, 14px);\n    line-height: var(--mellow-line-height-18, 18px);\n    color: var(--mellow-text-primary, #232222);\n  }\n\n  .footer-rows:hover {\n    background-color: var(--mellow-button-secondary-hovered, #e4d3c4);\n  }\n\n  .footer-rows svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .footer-nav {\n    display: flex;\n    align-items: center;\n    height: 32px;\n    border-radius: 6px;\n    overflow: clip;\n  }\n\n  .footer-nav-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 6px 8px;\n    height: 100%;\n    background-color: var(--mellow-colors-bg-secondary, #ede2d6);\n    border: none;\n    cursor: pointer;\n    color: var(--mellow-text-primary, #232222);\n  }\n\n  .footer-nav-btn:hover {\n    background-color: var(--mellow-button-secondary-hovered, #e4d3c4);\n  }\n\n  .footer-nav-btn:disabled {\n    opacity: 0.48;\n    cursor: not-allowed;\n  }\n\n  .footer-nav-btn svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  /* ---- Empty state ---- */\n\n  .empty-row td {\n    text-align: center;\n    color: var(--mellow-text-secondary, #8a8686);\n    font-style: italic;\n  }\n\n  /* ---- Focus visible ---- */\n\n  thead th.sortable:focus-visible {\n    outline: 2px solid var(--mellow-colors-primary-mellow-orange, #ff6f23);\n    outline-offset: -2px;\n  }\n\n  .footer-rows:focus-visible,\n  .footer-nav-btn:focus-visible {\n    outline: 2px solid var(--mellow-colors-primary-mellow-orange, #ff6f23);\n    outline-offset: 2px;\n  }\n`\n"],"names":["tableStyles","css"],"mappings":";AAEO,MAAMA,IAAcC;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;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;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;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;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,6 @@
+export { MellowTabs } from './tabs.js';
+export type { TabsSize } from './tabs.js';
+export { MellowTab } from './tab.js';
+export type { TabConfiguration } from './tab.js';
+export { MellowTabPanel } from './tab-panel.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACtC,YAAY,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AACpC,YAAY,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/components/tabs/tab-panel.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class MellowTabPanel extends LitElement {
+    static styles: import("lit").CSSResult;
+    active: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-tab-panel': MellowTabPanel;
+    }
+}
+//# sourceMappingURL=tab-panel.d.ts.map

package/dist/components/tabs/tab-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAA;AAG3C,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,0BAQrB;IAGD,MAAM,UAAQ;IAEL,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAA;KACnC;CACF"}

package/dist/components/tabs/tab-panel.js

@@ -0,0 +1,34 @@
+import { css as c, LitElement as m, html as f } from "lit";
+import { property as i, customElement as v } from "lit/decorators.js";
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (n, t, l, r) => {
+  for (var e = r > 1 ? void 0 : r ? y(t, l) : t, s = n.length - 1, p; s >= 0; s--)
+    (p = n[s]) && (e = (r ? p(t, l, e) : p(e)) || e);
+  return r && e && u(t, l, e), e;
+};
+let o = class extends m {
+  constructor() {
+    super(...arguments), this.active = !1;
+  }
+  render() {
+    return f`<slot></slot>`;
+  }
+};
+o.styles = c`
+    :host {
+      display: block;
+    }
+
+    :host(:not([active])) {
+      display: none;
+    }
+  `;
+a([
+  i({ type: Boolean, reflect: !0 })
+], o.prototype, "active", 2);
+o = a([
+  v("mellow-tab-panel")
+], o);
+export {
+  o as MellowTabPanel
+};
+//# sourceMappingURL=tab-panel.js.map

package/dist/components/tabs/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sources":["../../../src/components/tabs/tab-panel.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('mellow-tab-panel')\nexport class MellowTabPanel extends LitElement {\n  static override styles = css`\n    :host {\n      display: block;\n    }\n\n    :host(:not([active])) {\n      display: none;\n    }\n  `\n\n  @property({ type: Boolean, reflect: true })\n  active = false\n\n  override render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-tab-panel': MellowTabPanel\n  }\n}\n"],"names":["MellowTabPanel","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,IAAMA,IAAN,cAA6BC,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAYL,KAAA,SAAS;AAAA,EAAA;AAAA,EAEA,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AAjBaF,EACK,SAASG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWzBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAX/BL,EAYX,WAAA,UAAA,CAAA;AAZWA,IAANI,EAAA;AAAA,EADNE,EAAc,kBAAkB;AAAA,GACpBN,CAAA;"}

package/dist/components/tabs/tab.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export type TabConfiguration = 'label-only' | 'label-icon' | 'icon-label' | 'icon-only' | 'label-counter';
+export declare class MellowTab extends LitElement {
+    label: string;
+    disabled: boolean;
+    selected: boolean;
+    configuration: TabConfiguration;
+    counter?: number;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-tab': MellowTab;
+    }
+}
+//# sourceMappingURL=tab.d.ts.map

package/dist/components/tabs/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAGtC,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,GAAG,eAAe,CAAA;AAEzG,qBACa,SAAU,SAAQ,UAAU;IAEvC,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,aAAa,EAAE,gBAAgB,CAAe;IAG9C,OAAO,CAAC,EAAE,MAAM,CAAA;IAEP,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAA;KACxB;CACF"}

package/dist/components/tabs/tab.js

@@ -0,0 +1,37 @@
+import { LitElement as f, html as u } from "lit";
+import { property as o, customElement as i } from "lit/decorators.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, r = (c, l, s, p) => {
+  for (var e = p > 1 ? void 0 : p ? b(l, s) : l, n = c.length - 1, a; n >= 0; n--)
+    (a = c[n]) && (e = (p ? a(l, s, e) : a(e)) || e);
+  return p && e && m(l, s, e), e;
+};
+let t = class extends f {
+  constructor() {
+    super(...arguments), this.label = "", this.disabled = !1, this.selected = !1, this.configuration = "label-only";
+  }
+  render() {
+    return u`<slot></slot>`;
+  }
+};
+r([
+  o()
+], t.prototype, "label", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "selected", 2);
+r([
+  o({ reflect: !0 })
+], t.prototype, "configuration", 2);
+r([
+  o({ type: Number })
+], t.prototype, "counter", 2);
+t = r([
+  i("mellow-tab")
+], t);
+export {
+  t as MellowTab
+};
+//# sourceMappingURL=tab.js.map

package/dist/components/tabs/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sources":["../../../src/components/tabs/tab.ts"],"sourcesContent":["import { LitElement, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nexport type TabConfiguration = 'label-only' | 'label-icon' | 'icon-label' | 'icon-only' | 'label-counter'\n\n@customElement('mellow-tab')\nexport class MellowTab extends LitElement {\n  @property()\n  label = ''\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  @property({ type: Boolean, reflect: true })\n  selected = false\n\n  @property({ reflect: true })\n  configuration: TabConfiguration = 'label-only'\n\n  @property({ type: Number })\n  counter?: number\n\n  override render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-tab': MellowTab\n  }\n}\n"],"names":["MellowTab","LitElement","html","__decorateClass","property","customElement"],"mappings":";;;;;;;AAMO,IAAMA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAEL,KAAA,QAAQ,IAGR,KAAA,WAAW,IAGX,KAAA,WAAW,IAGX,KAAA,gBAAkC;AAAA,EAAA;AAAA,EAKzB,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AAjBEC,EAAA;AAAA,EADCC,EAAA;AAAS,GADCJ,EAEX,WAAA,SAAA,CAAA;AAGAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAJ/BJ,EAKX,WAAA,YAAA,CAAA;AAGAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAP/BJ,EAQX,WAAA,YAAA,CAAA;AAGAG,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAVhBJ,EAWX,WAAA,iBAAA,CAAA;AAGAG,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAbfJ,EAcX,WAAA,WAAA,CAAA;AAdWA,IAANG,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdL,CAAA;"}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+export type TabsSize = 'lg' | 'md' | 'sm';
+export declare class MellowTabs extends LitElement {
+    static styles: import("lit").CSSResult[];
+    selected: number;
+    size: TabsSize;
+    private _tabs;
+    private _panels;
+    private _getTabs;
+    private _getPanels;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _syncSlottedChildren;
+    private _handleSlotChange;
+    private _syncSelection;
+    private _selectTab;
+    private _handleKeydown;
+    private _findNextEnabled;
+    private _renderTabContent;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mellow-tabs': MellowTabs;
+    }
+}
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAA;AAO/C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEzC,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAe;IAGrC,QAAQ,SAAI;IAGZ,IAAI,EAAE,QAAQ,CAAO;IAGrB,OAAO,CAAC,KAAK,CAAkB;IAG/B,OAAO,CAAC,OAAO,CAAuB;IAEtC,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAIT,YAAY,IAAI,IAAI;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMrD,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,iBAAiB;IAehB,MAAM;CA4BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAA;KAC1B;CACF"}

package/dist/components/tabs/tabs.js

@@ -0,0 +1,123 @@
+import { LitElement as p, nothing as c, html as o } from "lit";
+import { property as d, state as b, customElement as _ } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { tabsStyles as f } from "./tabs.styles.js";
+var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (e, t, s, n) => {
+  for (var l = n > 1 ? void 0 : n ? m(t, s) : t, a = e.length - 1, h; a >= 0; a--)
+    (h = e[a]) && (l = (n ? h(t, s, l) : h(l)) || l);
+  return n && l && y(t, s, l), l;
+};
+let i = class extends p {
+  constructor() {
+    super(...arguments), this.selected = 0, this.size = "lg", this._tabs = [], this._panels = [];
+  }
+  _getTabs() {
+    return Array.from(this.querySelectorAll("mellow-tab"));
+  }
+  _getPanels() {
+    return Array.from(this.querySelectorAll("mellow-tab-panel"));
+  }
+  firstUpdated() {
+    this._syncSlottedChildren(), this._syncSelection();
+  }
+  updated(e) {
+    e.has("selected") && this._syncSelection();
+  }
+  _syncSlottedChildren() {
+    this._tabs = this._getTabs(), this._panels = this._getPanels();
+  }
+  _handleSlotChange() {
+    this._syncSlottedChildren(), this._syncSelection();
+  }
+  _syncSelection() {
+    const e = this._tabs, t = this._panels;
+    e.forEach((s, n) => {
+      s.selected = n === this.selected;
+    }), t.forEach((s, n) => {
+      s.active = n === this.selected;
+    });
+  }
+  _selectTab(e) {
+    this._tabs[e]?.disabled || (this.selected = e, this._syncSelection(), this.dispatchEvent(new CustomEvent("mellow-tab-change", {
+      detail: { index: e },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  _handleKeydown(e) {
+    if (this._tabs.length === 0) return;
+    let s = this.selected;
+    if (e.key === "ArrowRight")
+      e.preventDefault(), s = this._findNextEnabled(this.selected, 1);
+    else if (e.key === "ArrowLeft")
+      e.preventDefault(), s = this._findNextEnabled(this.selected, -1);
+    else
+      return;
+    s !== this.selected && (this._selectTab(s), this.shadowRoot?.querySelectorAll(".tab")?.[s]?.focus());
+  }
+  _findNextEnabled(e, t) {
+    const s = this._tabs, n = s.length;
+    let l = e;
+    for (let a = 0; a < n - 1; a++)
+      if (l = (l + t + n) % n, !s[l].disabled)
+        return l;
+    return e;
+  }
+  _renderTabContent(e) {
+    const t = e.configuration, s = t !== "icon-only", n = t === "icon-label" || t === "icon-only", l = t === "label-icon", a = t === "label-counter";
+    return o`
+      ${n ? o`<span class="tab-icon"><slot name="icon-${this._tabs.indexOf(e)}"></slot></span>` : c}
+      ${s ? o`<span class="tab-label">${e.label}</span>` : c}
+      ${l ? o`<span class="tab-icon"><slot name="icon-${this._tabs.indexOf(e)}"></slot></span>` : c}
+      ${a && e.counter !== void 0 ? o`<span class="tab-counter">${e.counter}</span>` : c}
+    `;
+  }
+  render() {
+    return o`
+      <div class="tablist" role="tablist" @keydown=${this._handleKeydown}>
+        ${this._tabs.map((e, t) => {
+      const s = {
+        tab: !0,
+        selected: t === this.selected,
+        "icon-only": e.configuration === "icon-only"
+      };
+      return o`
+            <button
+              class=${u(s)}
+              role="tab"
+              aria-selected=${t === this.selected ? "true" : "false"}
+              aria-controls=${`panel-${t}`}
+              tabindex=${t === this.selected ? "0" : "-1"}
+              ?disabled=${e.disabled}
+              @click=${() => this._selectTab(t)}
+            >${this._renderTabContent(e)}</button>
+          `;
+    })}
+      </div>
+      <slot @slotchange=${this._handleSlotChange}></slot>
+      ${this._panels.map((e, t) => o`
+        <span id=${`panel-${t}`} role="tabpanel" style="display:none"></span>
+      `)}
+    `;
+  }
+};
+i.styles = [f];
+r([
+  d({ type: Number })
+], i.prototype, "selected", 2);
+r([
+  d({ reflect: !0 })
+], i.prototype, "size", 2);
+r([
+  b()
+], i.prototype, "_tabs", 2);
+r([
+  b()
+], i.prototype, "_panels", 2);
+i = r([
+  _("mellow-tabs")
+], i);
+export {
+  i as MellowTabs
+};
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { tabsStyles } from './tabs.styles.js'\nimport type { MellowTab } from './tab.js'\nimport type { MellowTabPanel } from './tab-panel.js'\n\nexport type TabsSize = 'lg' | 'md' | 'sm'\n\n@customElement('mellow-tabs')\nexport class MellowTabs extends LitElement {\n  static override styles = [tabsStyles]\n\n  @property({ type: Number })\n  selected = 0\n\n  @property({ reflect: true })\n  size: TabsSize = 'lg'\n\n  @state()\n  private _tabs: MellowTab[] = []\n\n  @state()\n  private _panels: MellowTabPanel[] = []\n\n  private _getTabs(): MellowTab[] {\n    return Array.from(this.querySelectorAll('mellow-tab'))\n  }\n\n  private _getPanels(): MellowTabPanel[] {\n    return Array.from(this.querySelectorAll('mellow-tab-panel'))\n  }\n\n  override firstUpdated(): void {\n    this._syncSlottedChildren()\n    this._syncSelection()\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('selected')) {\n      this._syncSelection()\n    }\n  }\n\n  private _syncSlottedChildren(): void {\n    this._tabs = this._getTabs()\n    this._panels = this._getPanels()\n  }\n\n  private _handleSlotChange(): void {\n    this._syncSlottedChildren()\n    this._syncSelection()\n  }\n\n  private _syncSelection(): void {\n    const tabs = this._tabs\n    const panels = this._panels\n\n    tabs.forEach((tab, i) => {\n      tab.selected = i === this.selected\n    })\n\n    panels.forEach((panel, i) => {\n      panel.active = i === this.selected\n    })\n  }\n\n  private _selectTab(index: number): void {\n    if (this._tabs[index]?.disabled) return\n\n    this.selected = index\n    this._syncSelection()\n\n    this.dispatchEvent(new CustomEvent('mellow-tab-change', {\n      detail: { index },\n      bubbles: true,\n      composed: true,\n    }))\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    const tabs = this._tabs\n    if (tabs.length === 0) return\n\n    let newIndex = this.selected\n\n    if (e.key === 'ArrowRight') {\n      e.preventDefault()\n      newIndex = this._findNextEnabled(this.selected, 1)\n    } else if (e.key === 'ArrowLeft') {\n      e.preventDefault()\n      newIndex = this._findNextEnabled(this.selected, -1)\n    } else {\n      return\n    }\n\n    if (newIndex !== this.selected) {\n      this._selectTab(newIndex)\n      const tabButtons = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.tab')\n      tabButtons?.[newIndex]?.focus()\n    }\n  }\n\n  private _findNextEnabled(current: number, direction: number): number {\n    const tabs = this._tabs\n    const len = tabs.length\n    let index = current\n\n    for (let i = 0; i < len - 1; i++) {\n      index = (index + direction + len) % len\n      if (!tabs[index].disabled) {\n        return index\n      }\n    }\n\n    return current\n  }\n\n  private _renderTabContent(tab: MellowTab) {\n    const config = tab.configuration\n    const hasLabel = config !== 'icon-only'\n    const hasIconBefore = config === 'icon-label' || config === 'icon-only'\n    const hasIconAfter = config === 'label-icon'\n    const hasCounter = config === 'label-counter'\n\n    return html`\n      ${hasIconBefore ? html`<span class=\"tab-icon\"><slot name=\"icon-${this._tabs.indexOf(tab)}\"></slot></span>` : nothing}\n      ${hasLabel ? html`<span class=\"tab-label\">${tab.label}</span>` : nothing}\n      ${hasIconAfter ? html`<span class=\"tab-icon\"><slot name=\"icon-${this._tabs.indexOf(tab)}\"></slot></span>` : nothing}\n      ${hasCounter && tab.counter !== undefined ? html`<span class=\"tab-counter\">${tab.counter}</span>` : nothing}\n    `\n  }\n\n  override render() {\n    return html`\n      <div class=\"tablist\" role=\"tablist\" @keydown=${this._handleKeydown}>\n        ${this._tabs.map((tab, i) => {\n          const tabClasses = {\n            'tab': true,\n            'selected': i === this.selected,\n            'icon-only': tab.configuration === 'icon-only',\n          }\n          return html`\n            <button\n              class=${classMap(tabClasses)}\n              role=\"tab\"\n              aria-selected=${i === this.selected ? 'true' : 'false'}\n              aria-controls=${`panel-${i}`}\n              tabindex=${i === this.selected ? '0' : '-1'}\n              ?disabled=${tab.disabled}\n              @click=${() => this._selectTab(i)}\n            >${this._renderTabContent(tab)}</button>\n          `\n        })}\n      </div>\n      <slot @slotchange=${this._handleSlotChange}></slot>\n      ${this._panels.map((_, i) => html`\n        <span id=${`panel-${i}`} role=\"tabpanel\" style=\"display:none\"></span>\n      `)}\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mellow-tabs': MellowTabs\n  }\n}\n"],"names":["MellowTabs","LitElement","changed","tabs","panels","tab","i","panel","index","newIndex","current","direction","len","config","hasLabel","hasIconBefore","hasIconAfter","hasCounter","html","nothing","tabClasses","classMap","_","tabsStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/tabs/tabs.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const tabsStyles: import("lit").CSSResult;
+//# sourceMappingURL=tabs.styles.d.ts.map

package/dist/components/tabs/tabs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAkLtB,CAAA"}