@ixfx/components 0.2.3 → 0.2.5

package/dist/panel.js

@@ -0,0 +1,408 @@
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import "./icon-BR5aTIiP.js";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+//#region src/panel/panel.ts
+let PanelElement = class PanelElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.collapsed = false;
+		this.orientation = `horizontal`;
+		this.closable = false;
+		this.title = ``;
+		this.iconName = ``;
+		this.toggleInteraction = `implicit`;
+		this.variant = `titlebar`;
+		this._isVertical = false;
+	}
+	_onToggleClick() {
+		this.collapsed = !this.collapsed;
+		this.dispatchEvent(new CustomEvent(`toggle`, {
+			detail: { collapsed: this.collapsed },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_onCloseClick() {
+		this.dispatchEvent(new CustomEvent(`close`, {
+			bubbles: true,
+			composed: true
+		}));
+		this.remove();
+	}
+	_getCaretIcon() {
+		return `chevron-down`;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`orientation`)) this._isVertical = this.orientation === `vertical`;
+	}
+	render() {
+		const caretIcon = this._getCaretIcon();
+		const showCaret = this.toggleInteraction !== `disabled`;
+		const implicitToggle = this.toggleInteraction === `implicit`;
+		const caretRotation = this._isVertical ? this.collapsed ? `` : `-90deg` : this.collapsed ? `-90deg` : ``;
+		return html`
+      <div
+        class="titlebar"
+        role="toolbar"
+        @click=${implicitToggle ? this._onToggleClick : nothing}
+      >
+        <div class="title-text-wrapper">
+          ${this.iconName ? html`<ixfx-icon class="title-icon" name=${this.iconName}></ixfx-icon>` : nothing}
+          <span class="title-text">${this.title}</span>
+        </div>
+
+        <div class="toolbar" @click=${(e) => e.stopPropagation()}>
+          <slot name="toolbar"></slot>
+          ${this.closable ? html`
+            <button
+              class="close-btn"
+              type="button"
+              aria-label="Close panel"
+              @click=${this._onCloseClick}
+            >
+              <ixfx-icon name="close"></ixfx-icon>
+            </button>
+          ` : nothing}
+          ${showCaret ? html`
+          <button
+            class="caret-btn"
+            type="button"
+            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}
+            @click=${this._onToggleClick}
+          >
+            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>
+          </button>
+          ` : nothing}
+        </div>
+      </div>
+
+      <div class="content-wrapper" ?expanded=${!this.collapsed}>
+        <div class="content-inner">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      background: var(--surface-3);
+      border: var(--border-subtle);
+      border-radius: var(--radius-m);
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+
+    :host([orientation="vertical"]) {
+      flex-direction: row;
+      align-self: flex-start;
+      min-width: 0 !important;
+      flex-shrink: 1;
+    }
+
+    .titlebar {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: var(--space-s) var(--space-m);
+      background: var(--surface-4);
+      color: var(--surface-3-text);
+      min-height: 2em;
+      flex-shrink: 0;
+    }
+
+    :host([orientation="vertical"]) .titlebar {
+      flex-direction: row;
+      min-width: 2em;
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+
+    .caret-btn,
+    .close-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      padding: var(--space-xs);
+      margin: 0;
+      cursor: pointer;
+      color: inherit;
+      border-radius: var(--radius-s);
+      transition: background var(--transition);
+      opacity: var(--prominence-idle-opacity);
+    }
+
+    .caret-btn:hover,
+    .close-btn:hover {
+      background: var(--surface-5);
+      opacity: var(--prominence-tickled-opacity);
+
+    }
+
+    .caret-btn:focus-visible,
+    .close-btn:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 1px;
+    }
+
+    ixfx-icon {
+      width: 1.25em;
+      height: 1.25em;
+      transition: transform var(--transition);
+    }
+
+    .title-icon {
+      flex-shrink: 0;
+    }
+
+    .title-text {
+      flex: 1;
+      padding-left: 1ch;
+      font-family: var(--font-family);
+      font-size: var(--text-m);
+      font-weight: var(--font-weight-bold, 600);
+      white-space: nowrap;
+      overflow: hidden;
+      align-self: center;
+      text-overflow: ellipsis;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+
+    :host([toggle-interaction="implicit"]) .titlebar {
+      cursor: pointer;
+    }
+
+    :host([orientation="vertical"]) .title-text {
+      writing-mode: vertical-rl;
+      padding-left: 0;
+      padding-bottom: 1ch;
+      text-orientation: mixed;
+      transform: rotate(180deg);
+    }
+
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: var(--space-xs);
+      margin-left: auto;
+    }
+
+    :host([orientation="vertical"]) .toolbar {
+      flex-direction: column;
+      margin-left: 0;
+      margin-top: auto;
+      writing-mode: horizontal-tb;
+    }
+
+    slot[name="toolbar"] {
+      display: contents;
+    }
+
+    ::slotted(slot[name="toolbar"]) {
+      display: contents;
+    }
+
+    .content-wrapper {
+      interpolate-size: allow-keywords;
+      overflow: hidden;
+      height: 0;
+      transition: height var(--transition, 0.2s ease-out);
+      background: var(--surface-3);
+     
+    }
+
+    .content-wrapper[expanded] {
+      height: auto;
+    }
+
+    :host([orientation="vertical"]) .content-wrapper {
+      height: unset;
+      width: 0;
+      transition: width var(--transition, 0.2s ease-out);
+    }
+
+    :host([orientation="vertical"]) .content-wrapper[expanded] {
+      width: auto;
+    }
+
+    .content-inner {
+      box-shadow: var(--deboss-3);
+
+      min-height: 0;
+      min-width: 0;
+      overflow: hidden;
+      padding: var(--space-m);
+      transform: translateY(-100%);
+      transition: transform var(--transition, 0.2s ease-out);
+    }
+
+    .content-wrapper[expanded] .content-inner {
+      transform: translateY(0);
+    }
+
+    :host([orientation="vertical"]) .content-inner {
+      width: max-content;
+      height:100%;
+      transform: translateX(-100%);
+    }
+
+    :host([orientation="vertical"]) .content-wrapper[expanded] .content-inner {
+      transform: translateX(0);
+    }
+
+    .title-text-wrapper {
+      display:flex;
+      padding: 0 var(--space-s);
+    }
+
+    /* === Midline variant === */
+
+    :host([variant="midline"]) {
+      border: none !important;
+      border-radius: 0 !important;
+      background: transparent;
+    }
+
+    :host([variant="midline"][orientation="horizontal"]) .titlebar,
+    :host([variant="midline"][orientation="vertical"]) .titlebar {
+      background: transparent;
+      padding: var(--space-xs) var(--space-m);
+      min-height: unset;
+      position: relative;
+    }
+
+    :host([variant="midline"][orientation="vertical"]) .titlebar {
+      padding: var(--space-m) var(--space-xs);
+      min-width: unset;
+    }
+
+    :host([variant="midline"]) .title-text-wrapper {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      gap: var(--space-s);
+      background: var(--surface-3);
+    }
+
+    :host([variant="midline"]) .title-text {
+      font-weight: normal;
+      color: var(--surface-3-text);
+      padding: 0 0.5ch 0 0.5ch;
+      background: transparent;
+      box-shadow: none;
+      flex: unset;
+      width: auto;
+      white-space: nowrap;
+    }
+
+    :host([variant="midline"]) .title-icon {
+      background: transparent;
+      flex-shrink: 0;
+    }
+
+    :host([variant="midline"]) .caret-btn {
+      position: relative;
+      z-index: 1;
+      background: var(--surface-3);
+      opacity: 1;
+    }
+
+    :host([variant="midline"][orientation="vertical"]) .title-text {
+      transform: rotate(180deg);
+      padding: 0.5ch 0 0.5ch 0ch;
+    }
+
+    :host([variant="midline"]) .toolbar {
+      position: relative;
+      z-index: 2;
+      background: var(--surface-3);
+      margin-left: 0;
+    }
+
+    :host([variant="midline"][orientation="horizontal"]) .toolbar {
+      margin-left: auto;
+    }
+
+    /* Debossed line runs from after title-text to before toolbar */
+    :host([variant="midline"]) .titlebar::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: 1px;
+      transform: translateY(-50%);
+      background: var(--surface-2);
+      box-shadow:
+        0 -1px 0 var(--surface-5),
+        0 1px 0 var(--surface-1);
+      z-index: 0;
+    }
+
+    /* For vertical midline, line runs vertically */
+    :host([variant="midline"][orientation="vertical"]) .titlebar::after {
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      right: unset;
+      width: 1px;
+      height: 100%;
+      transform: translateX(-50%);
+      box-shadow:
+        -1px 0 0 var(--surface-5),
+        1px 0 0 var(--surface-1);
+    }
+
+    :host([variant="midline"]) .content-inner {
+      box-shadow: none;
+      background: var(--surface-3);
+    }
+
+    :host([variant="midline"]) .content-wrapper {
+      background: transparent;
+    }
+
+    :host([variant="midline"][orientation="vertical"]) .content-wrapper {
+      background: transparent;
+    }
+  `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PanelElement.prototype, "collapsed", void 0);
+__decorate([property({
+	type: String,
+	attribute: `orientation`,
+	reflect: true
+})], PanelElement.prototype, "orientation", void 0);
+__decorate([property({ type: Boolean })], PanelElement.prototype, "closable", void 0);
+__decorate([property({ type: String })], PanelElement.prototype, "title", void 0);
+__decorate([property({
+	type: String,
+	attribute: `icon-name`
+})], PanelElement.prototype, "iconName", void 0);
+__decorate([property({
+	type: String,
+	attribute: `toggle-interaction`
+})], PanelElement.prototype, "toggleInteraction", void 0);
+__decorate([property({
+	type: String,
+	attribute: `variant`,
+	reflect: true
+})], PanelElement.prototype, "variant", void 0);
+__decorate([state()], PanelElement.prototype, "_isVertical", void 0);
+PanelElement = __decorate([customElement(`ixfx-panel`)], PanelElement);
+//#endregion
+export { PanelElement };
+
+//# sourceMappingURL=panel.js.map

package/dist/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","names":[],"sources":["../src/panel/panel.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport '../icons/icon.js';\n\nexport type PanelOrientation = `horizontal` | `vertical`;\nexport type PanelVariant = `titlebar` | `midline`;\nexport type PanelToggleInteraction = `implicit` | `explicit` | `disabled`;\n\nexport interface PanelToggleDetail {\n  readonly collapsed: boolean;\n}\n\nexport type PanelToggleEvent = CustomEvent<PanelToggleDetail>;\nexport type PanelCloseEvent = CustomEvent<void>;\n\nexport interface PanelElementEventMap {\n  toggle: PanelToggleEvent;\n  close: PanelCloseEvent;\n}\n\n@customElement(`ixfx-panel`)\nexport class PanelElement extends LitElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: `orientation`, reflect: true }) orientation: PanelOrientation = `horizontal`;\n  @property({ type: Boolean }) closable = false;\n  @property({ type: String }) title = ``;\n  @property({ type: String, attribute: `icon-name` }) iconName = ``;\n  @property({ type: String, attribute: `toggle-interaction` }) toggleInteraction: PanelToggleInteraction = `implicit`;\n  @property({ type: String, attribute: `variant`, reflect: true }) variant: PanelVariant = `titlebar`;\n\n  @state() private _isVertical = false;\n\n  private _onToggleClick() {\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(\n      new CustomEvent<PanelToggleDetail>(`toggle`, {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _onCloseClick() {\n    this.dispatchEvent(\n      new CustomEvent<void>(`close`, {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.remove();\n  }\n\n  private _getCaretIcon(): string {\n    return `chevron-down`;\n  }\n\n  protected override updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has(`orientation`)) {\n      this._isVertical = this.orientation === `vertical`;\n    }\n  }\n\n  protected override render() {\n    const caretIcon = this._getCaretIcon();\n    const showCaret = this.toggleInteraction !== `disabled`;\n    const implicitToggle = this.toggleInteraction === `implicit`;\n\n    const caretRotation = this._isVertical\n      ? (this.collapsed ? `` : `-90deg`)\n      : (this.collapsed ? `-90deg` : ``);\n\n    return html`\n      <div\n        class=\"titlebar\"\n        role=\"toolbar\"\n        @click=${implicitToggle ? this._onToggleClick : nothing}\n      >\n        <div class=\"title-text-wrapper\">\n          ${this.iconName ? html`<ixfx-icon class=\"title-icon\" name=${this.iconName}></ixfx-icon>` : nothing}\n          <span class=\"title-text\">${this.title}</span>\n        </div>\n\n        <div class=\"toolbar\" @click=${(e: Event) => e.stopPropagation()}>\n          <slot name=\"toolbar\"></slot>\n          ${this.closable\n            ? html`\n            <button\n              class=\"close-btn\"\n              type=\"button\"\n              aria-label=\"Close panel\"\n              @click=${this._onCloseClick}\n            >\n              <ixfx-icon name=\"close\"></ixfx-icon>\n            </button>\n          `\n            : nothing}\n          ${showCaret\n            ? html`\n          <button\n            class=\"caret-btn\"\n            type=\"button\"\n            aria-label=${this.collapsed ? `Expand panel` : `Collapse panel`}\n            @click=${this._onToggleClick}\n          >\n            <ixfx-icon name=${caretIcon} prominence .rotate=${caretRotation.length > 0 ? caretRotation : nothing}></ixfx-icon>\n          </button>\n          `\n            : nothing}\n        </div>\n      </div>\n\n      <div class=\"content-wrapper\" ?expanded=${!this.collapsed}>\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      background: var(--surface-3);\n      border: var(--border-subtle);\n      border-radius: var(--radius-m);\n      overflow: hidden;\n      box-sizing: border-box;\n    }\n\n    :host([orientation=\"vertical\"]) {\n      flex-direction: row;\n      align-self: flex-start;\n      min-width: 0 !important;\n      flex-shrink: 1;\n    }\n\n    .titlebar {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      padding: var(--space-s) var(--space-m);\n      background: var(--surface-4);\n      color: var(--surface-3-text);\n      min-height: 2em;\n      flex-shrink: 0;\n    }\n\n    :host([orientation=\"vertical\"]) .titlebar {\n      flex-direction: row;\n      min-width: 2em;\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    .caret-btn,\n    .close-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      padding: var(--space-xs);\n      margin: 0;\n      cursor: pointer;\n      color: inherit;\n      border-radius: var(--radius-s);\n      transition: background var(--transition);\n      opacity: var(--prominence-idle-opacity);\n    }\n\n    .caret-btn:hover,\n    .close-btn:hover {\n      background: var(--surface-5);\n      opacity: var(--prominence-tickled-opacity);\n\n    }\n\n    .caret-btn:focus-visible,\n    .close-btn:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 1px;\n    }\n\n    ixfx-icon {\n      width: 1.25em;\n      height: 1.25em;\n      transition: transform var(--transition);\n    }\n\n    .title-icon {\n      flex-shrink: 0;\n    }\n\n    .title-text {\n      flex: 1;\n      padding-left: 1ch;\n      font-family: var(--font-family);\n      font-size: var(--text-m);\n      font-weight: var(--font-weight-bold, 600);\n      white-space: nowrap;\n      overflow: hidden;\n      align-self: center;\n      text-overflow: ellipsis;\n      user-select: none;\n      -webkit-user-select: none;\n    }\n\n    :host([toggle-interaction=\"implicit\"]) .titlebar {\n      cursor: pointer;\n    }\n\n    :host([orientation=\"vertical\"]) .title-text {\n      writing-mode: vertical-rl;\n      padding-left: 0;\n      padding-bottom: 1ch;\n      text-orientation: mixed;\n      transform: rotate(180deg);\n    }\n\n    .toolbar {\n      display: flex;\n      align-items: center;\n      gap: var(--space-xs);\n      margin-left: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .toolbar {\n      flex-direction: column;\n      margin-left: 0;\n      margin-top: auto;\n      writing-mode: horizontal-tb;\n    }\n\n    slot[name=\"toolbar\"] {\n      display: contents;\n    }\n\n    ::slotted(slot[name=\"toolbar\"]) {\n      display: contents;\n    }\n\n    .content-wrapper {\n      interpolate-size: allow-keywords;\n      overflow: hidden;\n      height: 0;\n      transition: height var(--transition, 0.2s ease-out);\n      background: var(--surface-3);\n     \n    }\n\n    .content-wrapper[expanded] {\n      height: auto;\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper {\n      height: unset;\n      width: 0;\n      transition: width var(--transition, 0.2s ease-out);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] {\n      width: auto;\n    }\n\n    .content-inner {\n      box-shadow: var(--deboss-3);\n\n      min-height: 0;\n      min-width: 0;\n      overflow: hidden;\n      padding: var(--space-m);\n      transform: translateY(-100%);\n      transition: transform var(--transition, 0.2s ease-out);\n    }\n\n    .content-wrapper[expanded] .content-inner {\n      transform: translateY(0);\n    }\n\n    :host([orientation=\"vertical\"]) .content-inner {\n      width: max-content;\n      height:100%;\n      transform: translateX(-100%);\n    }\n\n    :host([orientation=\"vertical\"]) .content-wrapper[expanded] .content-inner {\n      transform: translateX(0);\n    }\n\n    .title-text-wrapper {\n      display:flex;\n      padding: 0 var(--space-s);\n    }\n\n    /* === Midline variant === */\n\n    :host([variant=\"midline\"]) {\n      border: none !important;\n      border-radius: 0 !important;\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .titlebar,\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .titlebar {\n      background: transparent;\n      padding: var(--space-xs) var(--space-m);\n      min-height: unset;\n      position: relative;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .titlebar {\n      padding: var(--space-m) var(--space-xs);\n      min-width: unset;\n    }\n\n    :host([variant=\"midline\"]) .title-text-wrapper {\n      position: relative;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      gap: var(--space-s);\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .title-text {\n      font-weight: normal;\n      color: var(--surface-3-text);\n      padding: 0 0.5ch 0 0.5ch;\n      background: transparent;\n      box-shadow: none;\n      flex: unset;\n      width: auto;\n      white-space: nowrap;\n    }\n\n    :host([variant=\"midline\"]) .title-icon {\n      background: transparent;\n      flex-shrink: 0;\n    }\n\n    :host([variant=\"midline\"]) .caret-btn {\n      position: relative;\n      z-index: 1;\n      background: var(--surface-3);\n      opacity: 1;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .title-text {\n      transform: rotate(180deg);\n      padding: 0.5ch 0 0.5ch 0ch;\n    }\n\n    :host([variant=\"midline\"]) .toolbar {\n      position: relative;\n      z-index: 2;\n      background: var(--surface-3);\n      margin-left: 0;\n    }\n\n    :host([variant=\"midline\"][orientation=\"horizontal\"]) .toolbar {\n      margin-left: auto;\n    }\n\n    /* Debossed line runs from after title-text to before toolbar */\n    :host([variant=\"midline\"]) .titlebar::after {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 0;\n      right: 0;\n      height: 1px;\n      transform: translateY(-50%);\n      background: var(--surface-2);\n      box-shadow:\n        0 -1px 0 var(--surface-5),\n        0 1px 0 var(--surface-1);\n      z-index: 0;\n    }\n\n    /* For vertical midline, line runs vertically */\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .titlebar::after {\n      top: 0;\n      bottom: 0;\n      left: 50%;\n      right: unset;\n      width: 1px;\n      height: 100%;\n      transform: translateX(-50%);\n      box-shadow:\n        -1px 0 0 var(--surface-5),\n        1px 0 0 var(--surface-1);\n    }\n\n    :host([variant=\"midline\"]) .content-inner {\n      box-shadow: none;\n      background: var(--surface-3);\n    }\n\n    :host([variant=\"midline\"]) .content-wrapper {\n      background: transparent;\n    }\n\n    :host([variant=\"midline\"][orientation=\"vertical\"]) .content-wrapper {\n      background: transparent;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-panel': PanelElement;\n  }\n}\n\nexport interface PanelElement {\n  addEventListener: (<K extends keyof PanelElementEventMap>(\n    type: K,\n    listener: (this: PanelElement, event: PanelElementEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ) => void) & ((\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ) => void);\n}"],"mappings":";;;;;AAqBO,IAAA,eAAA,MAAM,qBAAqB,WAAW;;;mBACa;qBAC6C;kBAC7D;eACJ;kBAC2B;2BAC0C;iBAChB;qBAE1D;;CAE/B,iBAAyB;AACvB,OAAK,YAAY,CAAC,KAAK;AACvB,OAAK,cACH,IAAI,YAA+B,UAAU;GAC3C,QAAQ,EAAE,WAAW,KAAK,WAAW;GACrC,SAAS;GACT,UAAU;GACX,CAAC,CACH;;CAGH,gBAAwB;AACtB,OAAK,cACH,IAAI,YAAkB,SAAS;GAC7B,SAAS;GACT,UAAU;GACX,CAAC,CACH;AACD,OAAK,QAAQ;;CAGf,gBAAgC;AAC9B,SAAO;;CAGT,QAA2B,SAAqC;AAC9D,QAAM,QAAQ,QAAQ;AACtB,MAAI,QAAQ,IAAI,cAAc,CAC5B,MAAK,cAAc,KAAK,gBAAgB;;CAI5C,SAA4B;EAC1B,MAAM,YAAY,KAAK,eAAe;EACtC,MAAM,YAAY,KAAK,sBAAsB;EAC7C,MAAM,iBAAiB,KAAK,sBAAsB;EAElD,MAAM,gBAAgB,KAAK,cACtB,KAAK,YAAY,KAAK,WACtB,KAAK,YAAY,WAAW;AAEjC,SAAO,IAAI;;;;iBAIE,iBAAiB,KAAK,iBAAiB,QAAQ;;;YAGpD,KAAK,WAAW,IAAI,sCAAsC,KAAK,SAAS,iBAAiB,QAAQ;qCACxE,KAAK,MAAM;;;uCAGT,MAAa,EAAE,iBAAiB,CAAC;;YAE5D,KAAK,WACH,IAAI;;;;;uBAKK,KAAK,cAAc;;;;cAK5B,QAAQ;YACV,YACE,IAAI;;;;yBAIO,KAAK,YAAY,iBAAiB,iBAAiB;qBACvD,KAAK,eAAe;;8BAEX,UAAU,sBAAsB,cAAc,SAAS,IAAI,gBAAgB,QAAQ;;cAGnG,QAAQ;;;;+CAIyB,CAAC,KAAK,UAAU;;;;;;;;gBAQpC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAnG3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,aAAA,WAAA,aAAA,KAAA,EAAA;YAC1C,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,SAAS;CAAM,CAAC,CAAA,EAAA,aAAA,WAAA,eAAA,KAAA,EAAA;YACnE,SAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,aAAA,WAAA,YAAA,KAAA,EAAA;YAC3B,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,aAAA,WAAA,SAAA,KAAA,EAAA;YAC1B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAa,CAAC,CAAA,EAAA,aAAA,WAAA,YAAA,KAAA,EAAA;YAClD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAsB,CAAC,CAAA,EAAA,aAAA,WAAA,qBAAA,KAAA,EAAA;YAC3D,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAW,SAAS;CAAM,CAAC,CAAA,EAAA,aAAA,WAAA,WAAA,KAAA,EAAA;YAE/D,OAAO,CAAA,EAAA,aAAA,WAAA,eAAA,KAAA,EAAA;2BAVT,cAAc,aAAa,CAAA,EAAA,aAAA"}

package/dist/plots.d.ts

@@ -0,0 +1,2 @@
+import { a as SingleAxisAgeStyle, c as PlotDataSeriesOptions, d as ColourResult, f as applyAgeModification, h as readBaseColour, i as PlotSingleAxis, l as ColourMapConfig, m as parseColourScaleAttr, n as XyAgeStyle, o as SingleAxisDrawStyle, p as computeColour, r as XyDrawStyle, s as PlotDataSeries, t as PlotXyAxis, u as ColourMode } from "./xy-axis-CIFok7MF.js";
+export { ColourMapConfig, ColourMode, ColourResult, PlotDataSeries, PlotDataSeriesOptions, PlotSingleAxis, PlotXyAxis, SingleAxisAgeStyle, SingleAxisDrawStyle, XyAgeStyle, XyDrawStyle, applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour };

package/dist/plots.js

@@ -0,0 +1,2 @@
+import { a as computeColour, i as applyAgeModification, n as PlotSingleAxis, o as parseColourScaleAttr, r as PlotDataSeries, s as readBaseColour, t as PlotXyAxis } from "./xy-axis-BANbgrI5.js";
+export { PlotDataSeries, PlotSingleAxis, PlotXyAxis, applyAgeModification, computeColour, parseColourScaleAttr, readBaseColour };

package/dist/polar-pad.d.ts

@@ -0,0 +1,67 @@
+import * as _$lit from "lit";
+import { LitElement, PropertyValues, html } from "lit";
+
+//#region src/polar-pad/polar-pad.d.ts
+declare class PolarPad extends LitElement {
+  static styles: _$lit.CSSResult;
+  /** Current angle in degrees. 0 = right, increases clockwise. */
+  angle: number;
+  /** Current radius 0–1. 0 = origin, 1 = edge. */
+  radius: number;
+  /** Number of concentric rings to display. 0 = none. */
+  rings: number;
+  /** Number of evenly-spaced radial spoke lines to display. 0 = none. */
+  rays: number;
+  /** Show a line from origin to the marker. */
+  showRay: boolean;
+  /** Show a dot at the origin (centre). */
+  showOrigin: boolean;
+  /** Hide cursor during drag and hover. */
+  hideCursor: boolean;
+  /** When set, marker snaps to nearest ring/spoke depending on what's displayed. */
+  snapValue: boolean;
+  /** Disable all interaction (pointer and keyboard). */
+  disabled: boolean;
+  /** Number of quantised stops for both angle and radius. Overridden by stops-angle/stops-radius if set. */
+  stops?: number;
+  /** Number of quantised stops for angle. If set, overrides the stops setting for angle. */
+  stopsAngle?: number;
+  /** Number of quantised stops for radius. If set, overrides the stops setting for radius. */
+  stopsRadius?: number;
+  private _dragging;
+  private _dragStartAngle;
+  private _dragStartRadius;
+  private _pressedKeys;
+  private _prevAngle;
+  private _prevRadius;
+  private _onPointerDown;
+  private _onPointerMove;
+  private _onPointerUp;
+  private _updateFromPointer;
+  private _onKeyDown;
+  private _onKeyUp;
+  private _handleKeyboardMove;
+  private _setCssVars;
+  updated(_changed: PropertyValues): void;
+  disconnectedCallback(): void;
+  private _renderRings;
+  private _renderSpokes;
+  private _renderRay;
+  private _renderOrigin;
+  render(): ReturnType<typeof html>;
+  /** Stable per-instance uid for SVG clipPath IDs. */
+  private readonly _uid;
+}
+type PolarPadInputDetail = {
+  readonly angle: number;
+  readonly radius: number;
+};
+type PolarPadInputEvent = CustomEvent<PolarPadInputDetail>;
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-polar-pad': PolarPad;
+  }
+} //# sourceMappingURL=polar-pad.d.ts.map
+//#endregion
+export { PolarPad, PolarPadInputDetail, PolarPadInputEvent };
+//# sourceMappingURL=polar-pad.d.ts.map

package/dist/polar-pad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polar-pad.d.ts","names":[],"sources":["../src/polar-pad/polar-pad.ts"],"mappings":";;;;cA+Ja,QAAA,SAAiB,UAAA;EAAA,OACZ,MAAA,EADI,KAAA,CACE,SAAA;EAidpB;EAzU0B,KAAA;EAyUA;EAtUA,MAAA;EAsUA;EAnUA,KAAA;;EAGA,IAAA;;EAGuC,OAAA;;EAGG,UAAA;;EAGA,UAAA;;EAGD,SAAA;;EAGzB,QAAA;;EAGhB,KAAA;;EAG0B,UAAA;;EAGC,WAAA;EAAA,QAE/C,SAAA;EAAA,QACA,eAAA;EAAA,QACA,gBAAA;EAAA,QACA,YAAA;EAAA,QACA,UAAA;EAAA,QACA,WAAA;EAAA,QAMA,cAAA;EAAA,QAgBA,cAAA;EAAA,QAOA,YAAA;EAAA,QAeA,kBAAA;EAAA,QAuCA,UAAA;EAAA,QASA,QAAA;EAAA,QAIA,mBAAA;EAAA,QAiEA,WAAA;EAMC,OAAA,CAAQ,QAAA,EAAU,cAAA;EAKlB,oBAAA,CAAA;EAAA,QAUD,YAAA;EAAA,QAWA,aAAA;EAAA,QAiBA,UAAA;EAAA,QAMA,aAAA;EAUC,MAAA,CAAA,GAAU,UAAA,QAAkB,IAAA;;mBA+CpB,IAAA;AAAA;AAAA,KAOP,mBAAA;EAAA,SACD,KAAA;EAAA,SACA,MAAA;AAAA;AAAA,KAGC,kBAAA,GAAqB,WAAA,CAAY,mBAAA;AAAA,QAErC,MAAA;EAAA,UACI,qBAAA;IACR,gBAAA,EAAkB,QAAA;EAAA;AAAA"}