@mhmo91/schmancy 0.9.22 → 0.9.24

package/types/src/index.d.ts

@@ -37,6 +37,7 @@ export * from './list';
 export * from './mailbox';
 export * from './map';
 export * from './menu';
+export * from './metric';
 export * from './nav-drawer';
 export * from './navigation-bar';
 export * from './navigation-rail';

package/types/src/metric/index.d.ts

@@ -0,0 +1 @@
+export * from './metric';

package/types/src/metric/metric.d.ts

@@ -0,0 +1,39 @@
+export type MetricTrend = 'up' | 'down' | 'neutral';
+export type MetricSize = 'sm' | 'md' | 'lg';
+declare const SchmancyMetric_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * KPI metric — a label + value pair for dashboards, with optional trend + delta indicators.
+ *
+ * @element schmancy-metric
+ * @summary The building block of dashboards and meta bars. Pass `label` + `value` for a basic stat; add `trend` / `delta` for the delta-from-last-period pattern. Use multiple metrics side-by-side with Tailwind flex/grid utilities.
+ * @example
+ * <schmancy-metric label="In flight" value="4"></schmancy-metric>
+ * <schmancy-metric label="Open value" value="€165,900" trend="up" delta="+12%"></schmancy-metric>
+ * <schmancy-metric label="Error rate" value="0.3%" trend="down" delta="-0.1%"></schmancy-metric>
+ * @platform div - Styled `<div>` with two text lines + optional trend arrow. Degrades to a plain div+spans if the tag never registers.
+ * @slot - Optional custom value rendering (overrides the `value` attribute if present).
+ * @slot label - Optional custom label rendering (overrides the `label` attribute if present).
+ * @csspart label - The label line.
+ * @csspart value - The value line.
+ * @csspart delta - The delta pill (only when `delta` is set).
+ */
+export declare class SchmancyMetric extends SchmancyMetric_base {
+    /** Upper-case caption shown above the value. */
+    label: string;
+    /** Primary metric value, rendered large. Pre-format numbers/currency yourself. */
+    value: string;
+    /** Optional trend direction. Controls the color + arrow on the delta pill. */
+    trend?: MetricTrend;
+    /** Optional delta copy displayed in a pill next to the value (e.g. `+12%`). */
+    delta?: string;
+    /** Size scale affecting label + value typography. */
+    size: MetricSize;
+    private _arrowFor;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-metric': SchmancyMetric;
+    }
+}
+export {};

package/types/src/typography/typography.d.ts

@@ -1,3 +1,14 @@
+import { type PropertyValues } from 'lit';
+/**
+ * Preset → (type, token) shorthand. Saves the two-decision-per-text-node
+ * fatigue that 50+ typography nodes in a single page cause.
+ */
+export type TypographyPreset = 'display' | 'display-lg' | 'display-md' | 'display-sm' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'title-lg' | 'title-md' | 'title-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'label-lg' | 'label-md' | 'label-sm' | 'caption';
+/**
+ * Allowed semantic tag names for the `as` prop. Closed enum so we can
+ * use `literal` template parts safely with `lit/static-html`.
+ */
+export type TypographyTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';
 declare const SchmancyTypography_base: import("../../mixins").Constructor<CustomElementConstructor> & import("../../mixins").Constructor<import("@mixins/tailwind.mixin").ITailwindElementMixin> & import("../../mixins").Constructor<import("lit").LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
 /**
  * @element schmancy-typography
@@ -11,6 +22,26 @@ export declare class SchmancyTypography extends SchmancyTypography_base {
      * @type {'display' | 'headline' | 'title' | 'subtitle' | 'body' | 'label'}
      */
     type: 'display' | 'headline' | 'title' | 'subtitle' | 'body' | 'label';
+    /**
+     * Shorthand for picking a (type, token) pair in one go. When set, derives
+     * `type` and `token` automatically — saves the two-decisions-per-text-node
+     * fatigue that hits when a single page has 50+ typography nodes.
+     *
+     * @attr preset
+     * @type {TypographyPreset}
+     * @example <schmancy-typography preset="heading-md">Title</schmancy-typography>
+     */
+    preset?: TypographyPreset;
+    /**
+     * Render the slot wrapped in the requested semantic HTML element so screen
+     * readers expose the right role / heading level. Without `as`, the slot
+     * sits directly in the shadow root and the host is a generic element.
+     *
+     * @attr as
+     * @type {TypographyTag}
+     * @example <schmancy-typography preset="heading-md" as="h2">Section</schmancy-typography>
+     */
+    as?: TypographyTag;
     /**
      * @attr token - The size token.
      * @deprecated Prefer using Tailwind responsive text classes for better responsive design.
@@ -49,6 +80,7 @@ export declare class SchmancyTypography extends SchmancyTypography_base {
     /** Placeholder shown when editable and empty */
     placeholder: string;
     private _editRef;
+    protected willUpdate(changed: PropertyValues): void;
     /** Focus and select all text in editable mode */
     selectAll(): void;
     connectedCallback(): void;