@pb33f/cowboy-components 0.7.18 → 0.8.0

package/dist/components/changelog/release.css.js

@@ -53,6 +53,10 @@ export default css `
         text-shadow:  0 0 10px var(--primary-text-shadow)
     }
 
+    :host-context(html[theme="light"]) .milestone {
+        text-shadow: none;
+    }
+
     .latest {
         color: var(--terminal-text);
         text-shadow:  0 0 1rem var(--terminal-text-shadow);
@@ -60,7 +64,7 @@ export default css `
     }
     
     
-    html[theme="light"] .latest {
+    :host-context(html[theme="light"]) .latest {
         text-shadow:  none;
     }
     

package/dist/components/charts/beefy-chart.js

@@ -48,8 +48,6 @@ let BeefyChart = class BeefyChart extends Colorful {
                         backgroundColor: this.secondary,
                         pointStyle: 'rect',
                         radius: 4,
-                        //@ts-ignore
-                        pointBorderColor: this.background,
                     },
                 },
                 scales: {

package/dist/components/charts/doughnut-chart.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValues } from "lit";
 import Chart from 'chart.js/auto';
 import { Colorful } from "./chart-colors";
 import { LineDataSet } from "./config";
@@ -14,9 +15,12 @@ export declare class DoughnutChart extends Colorful {
     id: string;
     firstRun: boolean;
     colors: string[];
+    private _prevDatasets;
+    private _prevLabels;
     constructor();
+    private dataChanged;
     refresh(): void;
     firstUpdated(): void;
-    updated(): void;
+    updated(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/charts/doughnut-chart.js

@@ -11,19 +11,38 @@ import { BinaryChartColors, ChartColors, ChartColorsChanges, Colorful, } from ".
 let DoughnutChart = class DoughnutChart extends Colorful {
     constructor() {
         super();
+        this._prevDatasets = '';
+        this._prevLabels = '';
         this.colors = ChartColors;
         this.width = 300;
         this.height = 300;
         this.id = crypto.randomUUID();
         this.firstRun = true;
     }
+    dataChanged() {
+        const currentDatasets = JSON.stringify(this.datasets?.map(d => d.data));
+        const currentLabels = JSON.stringify(this.labels);
+        if (currentDatasets !== this._prevDatasets || currentLabels !== this._prevLabels) {
+            this._prevDatasets = currentDatasets;
+            this._prevLabels = currentLabels;
+            return true;
+        }
+        return false;
+    }
     refresh() {
         this.chart.update();
     }
     firstUpdated() {
         super.firstUpdated();
     }
-    updated() {
+    updated(changedProperties) {
+        const needsRebuild = !this.chart ||
+            changedProperties.has('changesChart') ||
+            changedProperties.has('breakingChanges') ||
+            this.dataChanged();
+        if (!needsRebuild) {
+            return;
+        }
         if (this.chart) {
             this.chart.destroy();
         }

package/dist/components/credit-ticker/credit-ticker.d.ts

@@ -8,7 +8,10 @@ export declare class CreditTicker extends LitElement {
     downArrow: HTMLElement;
     arrowAnimation: SlAnimation;
     private showArrow;
+    private arrowTimeoutId?;
+    private hideTimeoutId?;
     constructor();
+    disconnectedCallback(): void;
     protected updated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/credit-ticker/credit-ticker.js

@@ -14,6 +14,15 @@ let CreditTicker = class CreditTicker extends LitElement {
         this.credits = -1;
         this.visible = false;
     }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.arrowTimeoutId !== undefined) {
+            clearTimeout(this.arrowTimeoutId);
+        }
+        if (this.hideTimeoutId !== undefined) {
+            clearTimeout(this.hideTimeoutId);
+        }
+    }
     // Trigger animations when component updates
     updated() {
         // If there's a new credit update, animate the arrow
@@ -22,13 +31,20 @@ let CreditTicker = class CreditTicker extends LitElement {
             // Make sure we start with fadeInDown
             this.arrowAnimation.name = 'fadeInDown';
             this.arrowAnimation.play = true;
+            // Clear previous timeouts before setting new ones
+            if (this.arrowTimeoutId !== undefined) {
+                clearTimeout(this.arrowTimeoutId);
+            }
+            if (this.hideTimeoutId !== undefined) {
+                clearTimeout(this.hideTimeoutId);
+            }
             // After 1 second, fade out
-            setTimeout(() => {
+            this.arrowTimeoutId = window.setTimeout(() => {
                 this.arrowAnimation.name = 'fadeOut';
                 this.arrowAnimation.duration = 500;
                 this.arrowAnimation.play = true;
             }, 1000);
-            setTimeout(() => {
+            this.hideTimeoutId = window.setTimeout(() => {
                 this.downArrow.style.display = 'none';
             }, 1500);
         }
@@ -50,7 +66,7 @@ let CreditTicker = class CreditTicker extends LitElement {
         }
         return html `
             <div class="credit-ticker ${arrowClass}">
-                <sl-icon name="cash-coin"></sl-icon>
+                <sl-icon name="cash-coin" aria-hidden="true"></sl-icon>
                 <span class="credits"> 
                     <sl-format-number value="${credits}"></sl-format-number>
                 </span>
@@ -62,7 +78,7 @@ let CreditTicker = class CreditTicker extends LitElement {
                             duration="500"
                             iterations="1"
                     >
-                        <sl-icon name="arrow-down" id="downArrow"></sl-icon>
+                        <sl-icon name="arrow-down" id="downArrow" aria-hidden="true"></sl-icon>
                     </sl-animation>
                 </div>
             </div>

package/dist/components/details-drawer/details-drawer.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/{problem-list → details-drawer}/details-drawer.css.js

@@ -3,11 +3,13 @@ export default css `
     :host {
         font-family: var(--font-stack), monospace;
         font-size: 0.9rem;
+        z-index: 999;
     }
 
     sl-drawer::part(panel) {
         border: 1px dashed var(--secondary-color);
-        z-index: 10
+        height: calc(100% - 30px);
+        z-index: 999;
     }
 
     sl-drawer::part(header) {
@@ -17,13 +19,24 @@ export default css `
     sl-drawer::part(title) {
         padding-top: 10px;
         padding-bottom: 10px;
+        padding-left: 10px;
         font-family:  var(--font-stack-bold), monospace;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
-
+    
     sl-drawer::part(body) {
-        padding-top: 10px;
+        padding: 0;
     }
 
+    sl-drawer::part(footer) {
+        height: 53px;
+        border-top: 1px dashed var(--font-color-sub3);
+        font-family:  var(--font-stack-bold), monospace;
+        padding: 0 6px 0 0;
+    }
+
+
     a:after {
         content: " ↗";
         display: inline-block;
@@ -33,6 +46,8 @@ export default css `
         margin-top: 40px;
         padding-bottom: 10px;
         border-bottom: 1px dashed var(--secondary-color);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     p {

package/dist/components/details-drawer/generic-details-drawer.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/details-drawer/generic-details-drawer.css.js

@@ -0,0 +1,219 @@
+// Copyright 2023-2025 Princess Beef Heavy Industries, LLC / Dave Shanley
+// https://pb33f.io
+import { css } from 'lit';
+export const styles = css `
+    .content-container {
+        width: 100%;
+        overflow-y: auto;
+        position: relative;
+    }
+    
+    .documentation-content, .howto-content, .markdown-content {
+        padding: 0 10px 10px 10px;
+    }
+    
+    .example-container {
+        padding: 10px;
+    }
+    
+    .loading-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: var(--sl-spacing-large);
+        min-height: 200px;
+    }
+
+    .loading-container pb33f-indeterminate-loader {
+        width: 100%;
+        max-width: 400px;
+    }
+
+    .error-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--sl-spacing-small);
+        padding: var(--sl-spacing-large);
+        text-align: center;
+    }
+
+    .error-container sl-icon {
+        font-size: 3rem;
+        color: var(--error-color);
+    }
+
+    .error-container h3 {
+        margin: 0;
+        color: var(--error-color);
+        font-family: var(--font-stack-bold);
+    }
+
+    .error-container p {
+        margin: 0;
+        color: var(--font-color);
+    }
+
+    .empty-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: var(--sl-spacing-x-large);
+        color: var(--tertiary-color);
+    }
+
+    /* Diagram-specific styles */
+    .diagram-container {
+        width: 100%;
+    }
+    .diagram-controls {
+        display: flex;
+        padding-left: 5px;
+        padding-top: 2px;
+        gap: var(--sl-spacing-small);
+    }
+
+    .diagram-controls sl-icon-button {
+        vertical-align: bottom;
+        font-size: 1rem;
+    }
+
+    .diagram-wrapper {
+        flex: 1;
+        width: 100%;
+        height: 100%;
+        border-radius: 0;
+        overflow: hidden;
+        display: flex;
+    }
+
+    .diagram-wrapper pb33f-mermaid-renderer {
+        width: 100%;
+        height: 100%;
+    }
+
+    .diagram-split-panel {
+        height: calc(100vh - 245px);
+        width: 100%;
+    }
+
+    .diagram-split-panel::part(divider) {
+        background: var(--secondary-color);
+    }
+
+    .diagram-view {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .code-view {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        background: var(--background-color);
+        overflow: hidden;
+    }
+
+    .code-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px dashed var(--secondary-color);
+        background: var(--background-color);
+    }
+
+    .code-header strong {
+        font-family: var(--font-stack-bold);
+        color: var(--font-color);
+        display: inline-block;
+        padding-left: 10px;
+    }
+
+    .code-content {
+        flex: 1;
+        overflow: auto;
+        padding: var(--sl-spacing-small);
+        background: var(--background-color);
+    }
+
+    .code-content pre {
+        margin: 0;
+        font-family: var(--font-stack);
+        font-size: 0.85rem;
+    }
+
+    .diagram-info {
+        padding: var(--sl-spacing-small);
+        border-top: 1px dashed var(--secondary-color);
+        font-size: 0.85rem;
+    }
+
+    .diagram-info .json-path {
+        margin: 0;
+        word-break: break-all;
+    }
+
+    .diagram-info code {
+        background: var(--background-color);
+        padding: 2px 6px;
+        border-radius: 0;
+        font-family: var(--font-stack);
+        color: var(--secondary-color);
+    }
+
+    .no-diagram {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--sl-spacing-medium);
+        padding: var(--sl-spacing-x-large);
+        color: var(--text-color);
+    }
+
+    .no-diagram sl-icon {
+        font-size: 3rem;
+        opacity: 0.5;
+    }
+
+    /* Documentation handler styles */
+    .no-documentation,
+    .no-howto,
+    .no-example,
+    .no-markdown,
+    .error-rendering,
+    .error-parsing {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--sl-spacing-medium);
+        padding: var(--sl-spacing-x-large);
+        color: var(--text-color-secondary);
+    }
+
+    .no-documentation sl-icon,
+    .no-howto sl-icon,
+    .no-example sl-icon,
+    .no-markdown sl-icon,
+    .error-rendering sl-icon,
+    .error-parsing sl-icon {
+        font-size: 3rem;
+        opacity: 0.5;
+    }
+
+    /* Code container for examples */
+    .code-container {
+        position: relative;
+    }
+
+    .copy-button {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+`;

package/dist/components/details-drawer/generic-details-drawer.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, TemplateResult } from 'lit';
+import { SlDrawer } from '@shoelace-style/shoelace';
+import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
+import '../indeterminate-loader/indeterminate-loader.js';
+import { AnyDrawerEvent } from '../../model/drawer-content.js';
+export declare class GenericDetailsDrawer extends LitElement {
+    static styles: import("lit").CSSResult[];
+    drawer: SlDrawer;
+    label: string;
+    currentEvent: AnyDrawerEvent | null;
+    useAllSpace: boolean;
+    private content;
+    private isLoading;
+    private error;
+    private drawerWidth;
+    private registry;
+    private currentHandler;
+    private renderSequence;
+    private isOpening;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleWidthToggle;
+    open(event: AnyDrawerEvent): Promise<void>;
+    close(): void;
+    private resetState;
+    private showDrawer;
+    render(): TemplateResult<1>;
+    private getLoadingMessage;
+    private renderContent;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pb33f-generic-details-drawer': GenericDetailsDrawer;
+    }
+}