@sankhyatronics/sankhya-cms 0.1.10 → 0.1.12

package/dist/attention-panel/index.d.ts

@@ -0,0 +1,23 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * A tinted panel that calls out the most serious item needing action: an icon, a title, a line of
+ * detail and an action link. `tone` picks the colour: `warning` (amber) for things due soon,
+ * `danger` (red) for overdue or failing items, `accent` (blue) for set-up tips.
+ *
+ * Slots: `icon` (a glyph beside the title), default (the detail text), `action` (a link or button).
+ */
+declare class AttentionPanel extends LitElement {
+    static styles: lit.CSSResult;
+    /** Colour of the panel: `accent` for tips, `warning` for due soon, `danger` for overdue. */
+    tone: 'accent' | 'warning' | 'danger';
+    /** Bold line at the top of the panel. */
+    heading: string;
+    /** Set when an element is slotted into `icon`, so the icon tile only renders with an icon. */
+    hasIcon: boolean;
+    connectedCallback(): void;
+    render(): lit.TemplateResult<1>;
+}
+
+export { AttentionPanel };

package/dist/attention-panel/index.js

@@ -0,0 +1,9 @@
+import {
+  AttentionPanel
+} from "../chunk-4PXZPGWQ.js";
+import "../chunk-KMU6ABQF.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  AttentionPanel
+};
+//# sourceMappingURL=index.js.map

package/dist/attention-panel/index.js.map

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

package/dist/bar-chart/index.d.ts

@@ -0,0 +1,43 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface BarChartBar {
+    /** Category under the bar (for example a month abbreviation). */
+    label: string;
+    /** Bar height in the chart's units. `null` draws a grey stub, for periods not reached yet. */
+    value: number | null;
+    /** The value text above the bar. Format it before passing it in (for example "5.74 L"). */
+    valueLabel?: string;
+    /** Highlights this bar in the lighter accent, for the current period. */
+    current?: boolean;
+}
+interface BarChartTick {
+    /** Height of the gridline, in the chart's units. */
+    value: number;
+    /** Text at the left edge of the gridline, already formatted. */
+    label: string;
+}
+/**
+ * A vertical bar chart for a fixed set of categories: value labels above the bars, gridlines with
+ * labels on the left, and category labels underneath. Heights scale to `max`, or to the largest
+ * bar or tick when `max` is not set. Values are not formatted here: pass `valueLabel` and tick
+ * labels already formatted (currency, lakh/crore), so this element stays locale-free.
+ */
+declare class BarChart extends LitElement {
+    static styles: lit.CSSResult;
+    /** The bars, in order from left to right. */
+    bars: BarChartBar[];
+    /** Optional gridlines with labels. */
+    ticks: BarChartTick[];
+    /** The value that maps to the top of the plot. Defaults to the largest bar or tick. */
+    max: number | null;
+    /** Plot height in pixels, excluding category labels. */
+    plotHeight: number;
+    /** Accessible name for the chart. */
+    chartLabel: string;
+    private topValue;
+    private heightPct;
+    render(): lit.TemplateResult<1>;
+}
+
+export { BarChart };

package/dist/bar-chart/index.js

@@ -0,0 +1,9 @@
+import {
+  BarChart
+} from "../chunk-AG2COC64.js";
+import "../chunk-KMU6ABQF.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  BarChart
+};
+//# sourceMappingURL=index.js.map

package/dist/bar-chart/index.js.map

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

package/dist/chip/index.d.ts

@@ -0,0 +1,21 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * A small rounded status pill: text in the default slot, with an optional leading dot. Tones map
+ * to the theme's status tokens (soft background, text colour on that background), so a chip reads
+ * the same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the
+ * status tones for meaning only (success = done, warning = due soon, danger = overdue).
+ */
+declare class Chip extends LitElement {
+    static styles: lit.CSSResult;
+    /** Colour treatment: a soft tint of the matching theme token. */
+    tone: 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
+    /** `sm` for dense lists and table cells. */
+    size: 'md' | 'sm';
+    /** Shows a leading dot in the chip's text colour. */
+    dot: boolean;
+    render(): lit.TemplateResult<1>;
+}
+
+export { Chip };

package/dist/chip/index.js

@@ -0,0 +1,9 @@
+import {
+  Chip
+} from "../chunk-LGGLQNSU.js";
+import "../chunk-KMU6ABQF.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  Chip
+};
+//# sourceMappingURL=index.js.map

package/dist/chip/index.js.map

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

package/dist/chunk-4PXZPGWQ.js

@@ -0,0 +1,127 @@
+import {
+  fontFamilyStyles
+} from "./chunk-KMU6ABQF.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/attention-panel/AttentionPanel.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var AttentionPanel = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.tone = "accent";
+    this.heading = "";
+    this.hasIcon = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.hasIcon = this.querySelector('[slot="icon"]') !== null;
+  }
+  render() {
+    return html`
+      ${this.hasIcon ? html`<span class="icon" part="icon"><slot name="icon"></slot></span>` : nothing}
+      <div class="body">
+        <p class="title" part="title">${this.heading}</p>
+        <div class="detail" part="detail"><slot></slot></div>
+        <div class="action" part="action"><slot name="action"></slot></div>
+      </div>
+    `;
+  }
+};
+AttentionPanel.styles = css`
+    ${fontFamilyStyles}
+
+    :host {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--st-space-12);
+      padding: var(--st-space-16);
+      border-radius: var(--st-radius-md);
+      background: var(--st-color-accent-subtle);
+      color: var(--st-color-text);
+    }
+
+    :host([tone='warning']) {
+      background: var(--st-color-warning-subtle);
+    }
+
+    :host([tone='danger']) {
+      background: var(--st-color-danger-subtle);
+    }
+
+    .icon {
+      display: inline-grid;
+      place-items: center;
+      width: 32px;
+      height: 32px;
+      border-radius: var(--st-radius-sm);
+      background: var(--st-color-surface);
+      flex: none;
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-4);
+      min-width: 0;
+      flex: 1;
+    }
+
+    .title {
+      margin: 0;
+      font-size: var(--st-text-lg);
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+    }
+
+    .detail {
+      font-size: var(--st-text-base);
+      line-height: 1.5;
+      color: var(--st-color-text-secondary);
+    }
+
+    .action {
+      margin-top: var(--st-space-6);
+      font-size: var(--st-text-base);
+      font-weight: var(--st-font-weight-semibold);
+    }
+
+    :host([tone='warning']) .action {
+      color: var(--st-color-warning-text);
+    }
+
+    :host([tone='danger']) .action {
+      color: var(--st-color-danger-text);
+    }
+
+    :host([tone='accent']) .action {
+      color: var(--st-color-accent-text);
+    }
+
+    .action:empty {
+      display: none;
+    }
+
+    .icon:empty {
+      display: none;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], AttentionPanel.prototype, "tone", 2);
+__decorateClass([
+  property({ type: String })
+], AttentionPanel.prototype, "heading", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "has-icon" })
+], AttentionPanel.prototype, "hasIcon", 2);
+AttentionPanel = __decorateClass([
+  customElement("st-attention-panel")
+], AttentionPanel);
+
+export {
+  AttentionPanel
+};
+//# sourceMappingURL=chunk-4PXZPGWQ.js.map

package/dist/chunk-4PXZPGWQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/attention-panel/AttentionPanel.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\n/**\n * A tinted panel that calls out the most serious item needing action: an icon, a title, a line of\n * detail and an action link. `tone` picks the colour: `warning` (amber) for things due soon,\n * `danger` (red) for overdue or failing items, `accent` (blue) for set-up tips.\n *\n * Slots: `icon` (a glyph beside the title), default (the detail text), `action` (a link or button).\n */\n@customElement('st-attention-panel')\nexport class AttentionPanel extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--st-space-12);\n      padding: var(--st-space-16);\n      border-radius: var(--st-radius-md);\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-text);\n    }\n\n    :host([tone='warning']) {\n      background: var(--st-color-warning-subtle);\n    }\n\n    :host([tone='danger']) {\n      background: var(--st-color-danger-subtle);\n    }\n\n    .icon {\n      display: inline-grid;\n      place-items: center;\n      width: 32px;\n      height: 32px;\n      border-radius: var(--st-radius-sm);\n      background: var(--st-color-surface);\n      flex: none;\n    }\n\n    .body {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-4);\n      min-width: 0;\n      flex: 1;\n    }\n\n    .title {\n      margin: 0;\n      font-size: var(--st-text-lg);\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n    }\n\n    .detail {\n      font-size: var(--st-text-base);\n      line-height: 1.5;\n      color: var(--st-color-text-secondary);\n    }\n\n    .action {\n      margin-top: var(--st-space-6);\n      font-size: var(--st-text-base);\n      font-weight: var(--st-font-weight-semibold);\n    }\n\n    :host([tone='warning']) .action {\n      color: var(--st-color-warning-text);\n    }\n\n    :host([tone='danger']) .action {\n      color: var(--st-color-danger-text);\n    }\n\n    :host([tone='accent']) .action {\n      color: var(--st-color-accent-text);\n    }\n\n    .action:empty {\n      display: none;\n    }\n\n    .icon:empty {\n      display: none;\n    }\n  `;\n\n  /** Colour of the panel: `accent` for tips, `warning` for due soon, `danger` for overdue. */\n  @property({ type: String, reflect: true })\n  tone: 'accent' | 'warning' | 'danger' = 'accent';\n\n  /** Bold line at the top of the panel. */\n  @property({ type: String })\n  heading = '';\n\n  /** Set when an element is slotted into `icon`, so the icon tile only renders with an icon. */\n  @property({ type: Boolean, reflect: true, attribute: 'has-icon' })\n  hasIcon = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.hasIcon = this.querySelector('[slot=\"icon\"]') !== null;\n  }\n\n  render() {\n    return html`\n      ${this.hasIcon ? html`<span class=\"icon\" part=\"icon\"><slot name=\"icon\"></slot></span>` : nothing}\n      <div class=\"body\">\n        <p class=\"title\" part=\"title\">${this.heading}</p>\n        <div class=\"detail\" part=\"detail\"><slot></slot></div>\n        <div class=\"action\" part=\"action\"><slot name=\"action\"></slot></div>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAYjC,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC;AAAA;AAkFL,gBAAwC;AAIxC,mBAAU;AAIV,mBAAU;AAAA;AAAA,EAEV,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,UAAU,KAAK,cAAc,eAAe,MAAM;AAAA,EACzD;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,UAAU,wEAAwE,OAAO;AAAA;AAAA,wCAE9D,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlD;AACF;AA3Ga,eACJ,SAAS;AAAA,MACZ,gBAAgB;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;AAgFpB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAjF9B,eAkFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArFf,eAsFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,WAAW,CAAC;AAAA,GAzFtD,eA0FX;AA1FW,iBAAN;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB;","names":[]}

package/dist/chunk-AG2COC64.js

@@ -0,0 +1,217 @@
+import {
+  fontFamilyStyles
+} from "./chunk-KMU6ABQF.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/bar-chart/BarChart.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var BarChart = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.bars = [];
+    this.ticks = [];
+    this.max = null;
+    this.plotHeight = 200;
+    this.chartLabel = "";
+  }
+  topValue() {
+    if (this.max !== null && this.max > 0) return this.max;
+    const values = [...this.bars.map((bar) => bar.value ?? 0), ...this.ticks.map((tick) => tick.value)];
+    return Math.max(...values, 0) || 1;
+  }
+  heightPct(value) {
+    if (value === null) return 0;
+    return Math.max(0, Math.min(100, value / this.topValue() * 100));
+  }
+  render() {
+    if (!this.bars.length) {
+      return html`<div class="empty">${this.chartLabel || nothing}</div>`;
+    }
+    const top = this.topValue();
+    return html`
+      <div class="frame" role="img" aria-label=${this.chartLabel || nothing} style="--st-bar-chart-height: ${this.plotHeight}px">
+        <div class="axis" aria-hidden="true">
+          ${this.ticks.map((tick) => html`<span style="bottom: ${tick.value / top * 100}%">${tick.label}</span>`)}
+        </div>
+        <div class="plot">
+          <div class="grid" aria-hidden="true">
+            ${this.ticks.map((tick) => html`<i style="bottom: ${tick.value / top * 100}%"></i>`)}
+          </div>
+          <div class="bars">
+            ${this.bars.map((bar) => {
+      const state = bar.value === null ? "future" : bar.current ? "current" : "default";
+      return html`<div class="col" data-state=${state} title=${bar.valueLabel ?? bar.label}>
+                <div class="stack" style="height: ${this.heightPct(bar.value)}%">
+                  ${bar.valueLabel ? html`<span class="value">${bar.valueLabel}</span>` : nothing}
+                  <div class="bar"></div>
+                </div>
+              </div>`;
+    })}
+          </div>
+        </div>
+        <div></div>
+        <div class="categories" aria-hidden="true">
+          ${this.bars.map((bar) => html`<span class=${bar.current ? "current" : ""}>${bar.label}</span>`)}
+        </div>
+      </div>
+    `;
+  }
+};
+BarChart.styles = css`
+    ${fontFamilyStyles}
+
+    :host {
+      display: block;
+      min-width: 0;
+      color: var(--st-color-text-muted);
+    }
+
+    .frame {
+      position: relative;
+      display: grid;
+      grid-template-columns: auto 1fr;
+      column-gap: var(--st-space-10);
+    }
+
+    .axis {
+      position: relative;
+      height: var(--st-bar-chart-height, 200px);
+      font-size: var(--st-text-xs);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .axis span {
+      position: absolute;
+      right: 0;
+      transform: translateY(50%);
+      white-space: nowrap;
+    }
+
+    .plot {
+      position: relative;
+      height: var(--st-bar-chart-height, 200px);
+      border-bottom: 1px solid var(--st-color-border);
+    }
+
+    .grid {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+
+    .grid i {
+      position: absolute;
+      left: 0;
+      right: 0;
+      border-top: 1px dashed var(--st-color-border);
+    }
+
+    .bars {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      align-items: end;
+      gap: var(--st-space-8);
+    }
+
+    .col {
+      position: relative;
+      height: 100%;
+      min-width: 0;
+    }
+
+    /* The bar and its value label share one box, anchored to the baseline, so the label always
+       sits just above the bar's top edge. */
+    .stack {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    .value {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 100%;
+      padding-bottom: var(--st-space-4);
+      text-align: center;
+      font-size: var(--st-text-xs);
+      font-weight: var(--st-font-weight-medium);
+      white-space: nowrap;
+      color: var(--st-color-text-secondary);
+    }
+
+    .bar {
+      width: 100%;
+      height: 100%;
+      border-radius: 4px 4px 0 0;
+      background: var(--st-color-accent);
+      min-height: 2px;
+    }
+
+    .col[data-state='current'] .bar {
+      background: color-mix(in oklch, var(--st-color-accent) 70%, #ffffff);
+    }
+
+    .col[data-state='future'] .bar {
+      background: var(--st-color-subtle);
+      min-height: 4px;
+    }
+
+    .col[data-state='current'] .value {
+      color: var(--st-color-accent-text);
+      font-weight: var(--st-font-weight-semibold);
+    }
+
+    .categories {
+      display: grid;
+      grid-auto-flow: column;
+      grid-auto-columns: 1fr;
+      gap: var(--st-space-8);
+      margin-top: var(--st-space-8);
+      font-size: var(--st-text-xs);
+      text-align: center;
+    }
+
+    .categories .current {
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-accent-text);
+    }
+
+    .empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 120px;
+      font-size: var(--st-text-base);
+    }
+  `;
+__decorateClass([
+  property({ attribute: false })
+], BarChart.prototype, "bars", 2);
+__decorateClass([
+  property({ attribute: false })
+], BarChart.prototype, "ticks", 2);
+__decorateClass([
+  property({ type: Number })
+], BarChart.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number, attribute: "plot-height" })
+], BarChart.prototype, "plotHeight", 2);
+__decorateClass([
+  property({ type: String, attribute: "chart-label" })
+], BarChart.prototype, "chartLabel", 2);
+BarChart = __decorateClass([
+  customElement("st-bar-chart")
+], BarChart);
+
+export {
+  BarChart
+};
+//# sourceMappingURL=chunk-AG2COC64.js.map

package/dist/chunk-AG2COC64.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/bar-chart/BarChart.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\nexport interface BarChartBar {\n  /** Category under the bar (for example a month abbreviation). */\n  label: string;\n  /** Bar height in the chart's units. `null` draws a grey stub, for periods not reached yet. */\n  value: number | null;\n  /** The value text above the bar. Format it before passing it in (for example \"5.74 L\"). */\n  valueLabel?: string;\n  /** Highlights this bar in the lighter accent, for the current period. */\n  current?: boolean;\n}\n\nexport interface BarChartTick {\n  /** Height of the gridline, in the chart's units. */\n  value: number;\n  /** Text at the left edge of the gridline, already formatted. */\n  label: string;\n}\n\n/**\n * A vertical bar chart for a fixed set of categories: value labels above the bars, gridlines with\n * labels on the left, and category labels underneath. Heights scale to `max`, or to the largest\n * bar or tick when `max` is not set. Values are not formatted here: pass `valueLabel` and tick\n * labels already formatted (currency, lakh/crore), so this element stays locale-free.\n */\n@customElement('st-bar-chart')\nexport class BarChart extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: block;\n      min-width: 0;\n      color: var(--st-color-text-muted);\n    }\n\n    .frame {\n      position: relative;\n      display: grid;\n      grid-template-columns: auto 1fr;\n      column-gap: var(--st-space-10);\n    }\n\n    .axis {\n      position: relative;\n      height: var(--st-bar-chart-height, 200px);\n      font-size: var(--st-text-xs);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .axis span {\n      position: absolute;\n      right: 0;\n      transform: translateY(50%);\n      white-space: nowrap;\n    }\n\n    .plot {\n      position: relative;\n      height: var(--st-bar-chart-height, 200px);\n      border-bottom: 1px solid var(--st-color-border);\n    }\n\n    .grid {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n    }\n\n    .grid i {\n      position: absolute;\n      left: 0;\n      right: 0;\n      border-top: 1px dashed var(--st-color-border);\n    }\n\n    .bars {\n      position: absolute;\n      inset: 0;\n      display: grid;\n      grid-auto-flow: column;\n      grid-auto-columns: 1fr;\n      align-items: end;\n      gap: var(--st-space-8);\n    }\n\n    .col {\n      position: relative;\n      height: 100%;\n      min-width: 0;\n    }\n\n    /* The bar and its value label share one box, anchored to the baseline, so the label always\n       sits just above the bar's top edge. */\n    .stack {\n      position: absolute;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .value {\n      position: absolute;\n      left: 0;\n      right: 0;\n      bottom: 100%;\n      padding-bottom: var(--st-space-4);\n      text-align: center;\n      font-size: var(--st-text-xs);\n      font-weight: var(--st-font-weight-medium);\n      white-space: nowrap;\n      color: var(--st-color-text-secondary);\n    }\n\n    .bar {\n      width: 100%;\n      height: 100%;\n      border-radius: 4px 4px 0 0;\n      background: var(--st-color-accent);\n      min-height: 2px;\n    }\n\n    .col[data-state='current'] .bar {\n      background: color-mix(in oklch, var(--st-color-accent) 70%, #ffffff);\n    }\n\n    .col[data-state='future'] .bar {\n      background: var(--st-color-subtle);\n      min-height: 4px;\n    }\n\n    .col[data-state='current'] .value {\n      color: var(--st-color-accent-text);\n      font-weight: var(--st-font-weight-semibold);\n    }\n\n    .categories {\n      display: grid;\n      grid-auto-flow: column;\n      grid-auto-columns: 1fr;\n      gap: var(--st-space-8);\n      margin-top: var(--st-space-8);\n      font-size: var(--st-text-xs);\n      text-align: center;\n    }\n\n    .categories .current {\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-accent-text);\n    }\n\n    .empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 120px;\n      font-size: var(--st-text-base);\n    }\n  `;\n\n  /** The bars, in order from left to right. */\n  @property({ attribute: false })\n  bars: BarChartBar[] = [];\n\n  /** Optional gridlines with labels. */\n  @property({ attribute: false })\n  ticks: BarChartTick[] = [];\n\n  /** The value that maps to the top of the plot. Defaults to the largest bar or tick. */\n  @property({ type: Number })\n  max: number | null = null;\n\n  /** Plot height in pixels, excluding category labels. */\n  @property({ type: Number, attribute: 'plot-height' })\n  plotHeight = 200;\n\n  /** Accessible name for the chart. */\n  @property({ type: String, attribute: 'chart-label' })\n  chartLabel = '';\n\n  private topValue(): number {\n    if (this.max !== null && this.max > 0) return this.max;\n    const values = [...this.bars.map(bar => bar.value ?? 0), ...this.ticks.map(tick => tick.value)];\n    return Math.max(...values, 0) || 1;\n  }\n\n  private heightPct(value: number | null): number {\n    if (value === null) return 0;\n    return Math.max(0, Math.min(100, (value / this.topValue()) * 100));\n  }\n\n  render() {\n    if (!this.bars.length) {\n      return html`<div class=\"empty\">${this.chartLabel || nothing}</div>`;\n    }\n    const top = this.topValue();\n    return html`\n      <div class=\"frame\" role=\"img\" aria-label=${this.chartLabel || nothing} style=\"--st-bar-chart-height: ${this.plotHeight}px\">\n        <div class=\"axis\" aria-hidden=\"true\">\n          ${this.ticks.map(tick => html`<span style=\"bottom: ${(tick.value / top) * 100}%\">${tick.label}</span>`)}\n        </div>\n        <div class=\"plot\">\n          <div class=\"grid\" aria-hidden=\"true\">\n            ${this.ticks.map(tick => html`<i style=\"bottom: ${(tick.value / top) * 100}%\"></i>`)}\n          </div>\n          <div class=\"bars\">\n            ${this.bars.map(bar => {\n              const state = bar.value === null ? 'future' : bar.current ? 'current' : 'default';\n              return html`<div class=\"col\" data-state=${state} title=${bar.valueLabel ?? bar.label}>\n                <div class=\"stack\" style=\"height: ${this.heightPct(bar.value)}%\">\n                  ${bar.valueLabel ? html`<span class=\"value\">${bar.valueLabel}</span>` : nothing}\n                  <div class=\"bar\"></div>\n                </div>\n              </div>`;\n            })}\n          </div>\n        </div>\n        <div></div>\n        <div class=\"categories\" aria-hidden=\"true\">\n          ${this.bars.map(bar => html`<span class=${bar.current ? 'current' : ''}>${bar.label}</span>`)}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-DAGSL2JV.js

@@ -0,0 +1,83 @@
+import {
+  fontFamilyStyles
+} from "./chunk-KMU6ABQF.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/date-tile/DateTile.ts
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var DateTile = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.month = "";
+    this.day = "";
+    this.tone = "default";
+  }
+  render() {
+    return html`<span class="month" part="month">${this.month}</span><span class="day" part="day">${this.day}</span>`;
+  }
+};
+DateTile.styles = css`
+    ${fontFamilyStyles}
+
+    :host {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: stretch;
+      width: 52px;
+      border: 1px solid var(--st-color-border);
+      border-radius: var(--st-radius-sm);
+      background: var(--st-color-surface);
+      overflow: hidden;
+      text-align: center;
+      flex: none;
+    }
+
+    .month {
+      padding: var(--st-space-3) 0;
+      font-size: var(--st-text-2xs);
+      font-weight: var(--st-font-weight-bold);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      background: var(--st-color-accent-subtle);
+      color: var(--st-color-accent-text);
+    }
+
+    :host([tone='warning']) .month {
+      background: var(--st-color-warning-subtle);
+      color: var(--st-color-warning-text);
+    }
+
+    :host([tone='danger']) .month {
+      background: var(--st-color-danger-subtle);
+      color: var(--st-color-danger-text);
+    }
+
+    .day {
+      padding: var(--st-space-6) 0 var(--st-space-8);
+      font-size: var(--st-text-2xl);
+      font-weight: var(--st-font-weight-bold);
+      line-height: 1;
+      font-variant-numeric: tabular-nums;
+      color: var(--st-color-text-strong);
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], DateTile.prototype, "month", 2);
+__decorateClass([
+  property({ type: String })
+], DateTile.prototype, "day", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DateTile.prototype, "tone", 2);
+DateTile = __decorateClass([
+  customElement("st-date-tile")
+], DateTile);
+
+export {
+  DateTile
+};
+//# sourceMappingURL=chunk-DAGSL2JV.js.map

package/dist/chunk-DAGSL2JV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/date-tile/DateTile.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\n/**\n * A calendar date tile: a month band over a large day number, as used for due dates. `tone`\n * colours the month band: `default` for a neutral date, `warning` for due soon, `danger` for\n * overdue.\n */\n@customElement('st-date-tile')\nexport class DateTile extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: inline-flex;\n      flex-direction: column;\n      align-items: stretch;\n      width: 52px;\n      border: 1px solid var(--st-color-border);\n      border-radius: var(--st-radius-sm);\n      background: var(--st-color-surface);\n      overflow: hidden;\n      text-align: center;\n      flex: none;\n    }\n\n    .month {\n      padding: var(--st-space-3) 0;\n      font-size: var(--st-text-2xs);\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-accent-text);\n    }\n\n    :host([tone='warning']) .month {\n      background: var(--st-color-warning-subtle);\n      color: var(--st-color-warning-text);\n    }\n\n    :host([tone='danger']) .month {\n      background: var(--st-color-danger-subtle);\n      color: var(--st-color-danger-text);\n    }\n\n    .day {\n      padding: var(--st-space-6) 0 var(--st-space-8);\n      font-size: var(--st-text-2xl);\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1;\n      font-variant-numeric: tabular-nums;\n      color: var(--st-color-text-strong);\n    }\n  `;\n\n  /** Month abbreviation shown in the band (for example \"NOV\"). */\n  @property({ type: String })\n  month = '';\n\n  /** Day of the month (for example \"11\"). */\n  @property({ type: String })\n  day = '';\n\n  /** Colour of the month band. */\n  @property({ type: String, reflect: true })\n  tone: 'default' | 'warning' | 'danger' = 'default';\n\n  render() {\n    return html`<span class=\"month\" part=\"month\">${this.month}</span><span class=\"day\" part=\"day\">${this.day}</span>`;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAUjC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AAiDL,iBAAQ;AAIR,eAAM;AAIN,gBAAyC;AAAA;AAAA,EAEzC,SAAS;AACP,WAAO,wCAAwC,KAAK,KAAK,uCAAuC,KAAK,GAAG;AAAA,EAC1G;AACF;AA9Da,SACJ,SAAS;AAAA,MACZ,gBAAgB;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;AA+CpB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhDf,SAiDX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApDf,SAqDX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAxD9B,SAyDX;AAzDW,WAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;","names":[]}