@keenmate/web-components-devkit 0.0.0-stage → 1.0.0-rc01

package/src/examples/css/content.css

@@ -0,0 +1,251 @@
+/* ==============================================================================
+   EXAMPLES KIT — CONTENT
+   ==============================================================================
+   Output panels, code, notes, grids, reference tables, badges. */
+@layer kmwc {
+    /* ==========================================================================
+       OUTPUT
+       ==========================================================================
+       Light `.output` panels; opt into the console look per page with
+       `class="dark-output"` on <body>. */
+    .output {
+        margin-top: 1rem;
+    }
+
+    .output-label {
+        font-weight: 500;
+        margin-bottom: 0.5rem;
+        color: var(--kmwc-text-color-2);
+    }
+
+    .output pre,
+    pre {
+        background: var(--kmwc-page-bg);
+        color: var(--kmwc-text-color-1);
+        padding: 1rem;
+        border-radius: var(--kmwc-radius-sm);
+        overflow-x: auto;
+        font-size: 0.875rem;
+        border: 1px solid var(--kmwc-border-color);
+    }
+
+    .dark-output .output {
+        background: var(--kmwc-code-bg);
+        color: var(--kmwc-console-muted-color);
+        padding: 1rem;
+        border-radius: var(--kmwc-radius-md);
+        margin-top: 1rem;
+        font-family: var(--kmwc-mono-font-family);
+        font-size: 0.875rem;
+        overflow-x: auto;
+        border: none;
+    }
+
+    .dark-output .output-label {
+        color: var(--kmwc-accent-color);
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+    }
+
+    .dark-output .output pre {
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: transparent;
+        color: inherit;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+
+    /* ==========================================================================
+       CODE
+       ==========================================================================
+       The dark surface lives on `.code-block` itself, so it works whether a
+       page wraps code in <pre> or drops a bare <code> straight inside. */
+    .code-block {
+        margin: 1.5rem 0;
+        position: relative;
+        background: var(--kmwc-code-bg);
+        color: var(--kmwc-code-text-color);
+        padding: 1.5rem;
+        border-radius: var(--kmwc-radius-md);
+        overflow-x: auto;
+        font-family: var(--kmwc-mono-font-family);
+        font-size: 0.875rem;
+        line-height: 1.6;
+    }
+
+    .code-block pre {
+        margin: 0;
+        background: transparent;
+        padding: 0;
+        overflow-x: visible;
+        border: none;
+        color: inherit;
+    }
+
+    .code-block > code {
+        white-space: pre;
+        display: block;
+    }
+
+    .code-block .keyword { color: var(--kmwc-code-keyword-color); }
+    .code-block .string { color: var(--kmwc-code-string-color); }
+    .code-block .comment { color: var(--kmwc-code-comment-color); font-style: italic; }
+    .code-block .function { color: var(--kmwc-code-function-color); }
+    .code-block .property { color: var(--kmwc-code-property-color); }
+
+    .code-block .copy-button {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        padding: 0.25rem 0.75rem;
+        font-size: 0.75rem;
+        background: color-mix(in srgb, var(--kmwc-code-text-color) 10%, transparent);
+        color: var(--kmwc-code-text-color);
+        border: 1px solid color-mix(in srgb, var(--kmwc-code-text-color) 20%, transparent);
+        border-radius: 4px;
+    }
+
+    .code-block .copy-button:hover {
+        background: color-mix(in srgb, var(--kmwc-code-text-color) 20%, transparent);
+    }
+
+    code {
+        background: var(--kmwc-inline-code-bg);
+        padding: 0.2rem 0.4rem;
+        border-radius: 3px;
+        font-size: 0.9em;
+        color: var(--kmwc-accent-color);
+        font-family: var(--kmwc-mono-font-family);
+    }
+
+    pre code,
+    .code-block code,
+    .code-block pre code {
+        background: transparent;
+        padding: 0;
+        border-radius: 0;
+        color: inherit;
+        font-size: inherit;
+    }
+
+    /* ==========================================================================
+       NOTES
+       ========================================================================== */
+    .note {
+        --kmwc-note-color: var(--kmwc-accent-color);
+        background: color-mix(in srgb, var(--kmwc-note-color) 10%, transparent);
+        padding: 1rem;
+        border-radius: var(--kmwc-radius-sm);
+        border-left: 4px solid var(--kmwc-note-color);
+        margin: 1rem 0;
+    }
+
+    .note.warning { --kmwc-note-color: var(--kmwc-warning-color); }
+    .note.info { --kmwc-note-color: var(--kmwc-info-color); }
+    .note.success { --kmwc-note-color: var(--kmwc-success-color); }
+    .note.error { --kmwc-note-color: var(--kmwc-danger-color); }
+
+    .note-title {
+        font-weight: 600;
+        color: var(--kmwc-note-color);
+        margin-bottom: 0.5rem;
+    }
+
+    .note ul {
+        margin-left: 1.5rem;
+        margin-top: 0.5rem;
+    }
+
+    .note li {
+        margin-bottom: 0.5rem;
+    }
+
+    /* ==========================================================================
+       GRIDS
+       ==========================================================================
+       One auto-fit grid tuned by `--grid-min` / `--grid-gap`, e.g.
+       `<div class="card-grid" style="--grid-min: 240px">`. */
+    .grid,
+    .grid-2,
+    .card-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 300px), 1fr));
+        gap: var(--grid-gap, 2rem);
+    }
+
+    .grid-2 {
+        --grid-min: 400px;
+    }
+
+    .col-span-full {
+        grid-column: 1 / -1;
+    }
+
+    /* ==========================================================================
+       REFERENCE TABLE & BADGES
+       ========================================================================== */
+    .reference-table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 0.875rem;
+        margin-bottom: 2rem;
+    }
+
+    .reference-table th,
+    .reference-table td {
+        padding: 0.75rem 1rem;
+        text-align: left;
+        border: 1px solid var(--kmwc-border-color);
+    }
+
+    .reference-table th {
+        background: var(--kmwc-elevated-bg);
+        font-weight: 600;
+    }
+
+    .reference-table tbody tr:hover {
+        background: var(--kmwc-hover-bg);
+    }
+
+    .reference-table tr.is-highlight {
+        background: var(--kmwc-accent-light-bg);
+    }
+
+    .reference-table code {
+        padding: 0.125rem 0.375rem;
+        font-size: 0.75rem;
+    }
+
+    /* Section-header badge pill (e.g. a "NEW" tag beside an h2). */
+    .badge {
+        display: inline-block;
+        background: var(--kmwc-accent-color);
+        color: var(--kmwc-text-color-on-accent);
+        padding: 0.25rem 0.75rem;
+        border-radius: 12px;
+        font-size: 0.75rem;
+        font-weight: 600;
+    }
+
+    .badge.new {
+        background: var(--kmwc-badge-new-bg);
+    }
+
+    .muted {
+        color: var(--kmwc-text-color-3);
+    }
+
+    .mt-1 {
+        margin-top: 1rem;
+    }
+
+    @media (max-width: 768px) {
+        .grid,
+        .grid-2,
+        .card-grid {
+            grid-template-columns: 1fr;
+        }
+    }
+}

package/src/examples/css/controls.css

@@ -0,0 +1,205 @@
+/* ==============================================================================
+   EXAMPLES KIT — CONTROLS
+   ==============================================================================
+   Demo forms, the `.controls` switch rows, demo areas and buttons. */
+@layer kmwc {
+    /* ==========================================================================
+       FORMS
+       ========================================================================== */
+    .form-group {
+        margin-bottom: 1.5rem;
+    }
+
+    .form-group label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+        color: var(--kmwc-text-color-1);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .form-text {
+        display: block;
+        margin-top: 0.25rem;
+        font-size: 0.875rem;
+        color: var(--kmwc-text-color-3);
+    }
+
+    /* Demo form panel — a soft card wrapping a live <form>; `.form-actions`
+       holds the submit/inspect buttons below a rule. */
+    form {
+        background: var(--kmwc-elevated-bg);
+        padding: 1.5rem;
+        border-radius: var(--kmwc-radius-md);
+        margin-top: 1rem;
+    }
+
+    .form-actions {
+        margin-top: 1rem;
+        padding-top: 1rem;
+        border-top: 1px solid var(--kmwc-border-color-strong);
+    }
+
+    /* ==========================================================================
+       CONTROL ROWS
+       ==========================================================================
+       `.controls` rows hold the switches that drive a demo; their values are
+       saved by attachControlsPersistence(). */
+    .controls {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+        margin-bottom: 1.5rem;
+        align-items: center;
+    }
+
+    .controls label,
+    .toggle-label {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        cursor: pointer;
+    }
+
+    .toggle-label {
+        margin-bottom: 0.75rem;
+    }
+
+    .controls input[type="checkbox"] {
+        width: 16px;
+        height: 16px;
+        accent-color: var(--kmwc-accent-color);
+    }
+
+    .controls select,
+    .controls input[type="text"],
+    .controls input[type="number"],
+    .controls input[type="search"],
+    .control-group input,
+    .control-group select {
+        padding: 0.4rem 0.6rem;
+        border: var(--kmwc-input-border);
+        border-radius: var(--kmwc-radius-sm);
+        font-size: 0.875rem;
+        background: var(--kmwc-input-bg);
+        color: var(--kmwc-input-color);
+    }
+
+    /* Control group — a label stacked over an input/select; rows of them wrap
+       via `.control-row`. */
+    .control-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+        align-items: flex-end;
+        margin-bottom: 1rem;
+    }
+
+    .control-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+
+    .control-group label {
+        font-size: 0.75rem;
+        color: var(--kmwc-text-color-2);
+        font-weight: 500;
+    }
+
+    .field-row {
+        display: flex;
+        gap: 0.5rem;
+        align-items: stretch;
+        flex-wrap: wrap;
+    }
+
+    .field-grow {
+        flex: 1;
+    }
+
+    /* ==========================================================================
+       DEMO AREAS
+       ========================================================================== */
+    .demo-area {
+        background: var(--kmwc-page-bg);
+        padding: 1.5rem;
+        border-radius: var(--kmwc-radius-md);
+        margin: 1rem 0;
+    }
+
+    .demo-label {
+        display: block;
+        font-weight: 600;
+        color: var(--kmwc-text-color-1);
+        margin-bottom: 0.5rem;
+    }
+
+    /* Trailing action buttons directly in a demo panel get top spacing; never
+       touches buttons nested in a `.controls` row. */
+    .demo-area > button {
+        margin-top: 1rem;
+    }
+
+    .demo-area > button + button {
+        margin-inline-start: 0.5rem;
+    }
+
+    /* ==========================================================================
+       BUTTONS
+       ========================================================================== */
+    button,
+    button.btn-primary {
+        cursor: pointer;
+        background: var(--kmwc-accent-color);
+        color: var(--kmwc-text-color-on-accent);
+        border: none;
+        padding: 0.5rem 1rem;
+        border-radius: var(--kmwc-radius-sm);
+        font-size: 0.875rem;
+        transition: background 0.2s;
+    }
+
+    button:hover,
+    button.btn-primary:hover {
+        background: var(--kmwc-accent-color-hover);
+    }
+
+    button:disabled,
+    button[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    button.secondary,
+    button.btn-secondary {
+        background: var(--kmwc-neutral-color);
+        color: var(--kmwc-text-color-on-accent);
+    }
+
+    button.secondary:hover,
+    button.btn-secondary:hover {
+        background: color-mix(in srgb, var(--kmwc-neutral-color) 80%, black);
+    }
+
+    button.btn-outline {
+        background: var(--kmwc-main-bg);
+        color: var(--kmwc-text-color-1);
+        border: 1px solid var(--kmwc-border-color-strong);
+    }
+
+    button.btn-outline:hover {
+        background: var(--kmwc-hover-bg);
+    }
+
+    button.btn-danger {
+        background: var(--kmwc-danger-color);
+        color: var(--kmwc-text-color-on-accent);
+    }
+
+    button.btn-danger:hover {
+        background: color-mix(in srgb, var(--kmwc-danger-color) 85%, black);
+    }
+}

package/src/examples/css/copy-link.css

@@ -0,0 +1,82 @@
+/* ==============================================================================
+   EXAMPLES KIT — COPY-LINK
+   ==============================================================================
+   Button appended inside every section <h2> (copy-link.js). Fades in on
+   heading hover, flips to a check + "Copied!" on success. */
+@layer kmwc {
+    .kmwc-copy-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.35rem;
+        font-size: 0.8rem;
+        line-height: 1;
+        padding: 0.25rem 0.4rem;
+        margin-inline-start: 0.15rem;
+        border: 1px solid transparent;
+        border-radius: var(--kmwc-radius-md);
+        background: transparent;
+        color: var(--kmwc-text-color-4);
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .card h2:hover .kmwc-copy-link,
+    .example-section h2:hover .kmwc-copy-link,
+    .kmwc-copy-link:focus-visible {
+        opacity: 1;
+    }
+
+    .kmwc-copy-link:hover {
+        color: var(--kmwc-accent-color);
+        background: var(--kmwc-accent-light-bg);
+        border-color: var(--kmwc-accent-border-color);
+    }
+
+    .kmwc-copy-link:focus-visible {
+        outline: 2px solid var(--kmwc-accent-color);
+        outline-offset: 1px;
+    }
+
+    .kmwc-copy-link__icon {
+        width: 1.05em;
+        height: 1.05em;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+    }
+
+    .kmwc-copy-link__icon--check,
+    .kmwc-copy-link__label {
+        display: none;
+    }
+
+    .kmwc-copy-link__label {
+        font-weight: 600;
+        font-size: 0.7rem;
+    }
+
+    .kmwc-copy-link--copied,
+    .kmwc-copy-link--failed {
+        --kmwc-copy-link-feedback-color: var(--kmwc-success-color);
+        opacity: 1;
+        color: var(--kmwc-copy-link-feedback-color);
+        background: color-mix(in srgb, var(--kmwc-copy-link-feedback-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--kmwc-copy-link-feedback-color) 40%, transparent);
+    }
+
+    .kmwc-copy-link--failed {
+        --kmwc-copy-link-feedback-color: var(--kmwc-danger-color);
+    }
+
+    .kmwc-copy-link--copied .kmwc-copy-link__icon--link {
+        display: none;
+    }
+
+    .kmwc-copy-link--copied .kmwc-copy-link__icon--check,
+    .kmwc-copy-link--copied .kmwc-copy-link__label {
+        display: inline-flex;
+    }
+}

package/src/examples/css/demo.css

@@ -0,0 +1,50 @@
+/* ==============================================================================
+   EXAMPLES KIT — DEMO
+   ==============================================================================
+   <kmwc-demo> output: the live preview, then the code that produced it (a
+   `.code-block`, so it inherits the code styles) with the kit's copy button. */
+@layer kmwc {
+    .kmwc-demo {
+        margin: 1rem 0;
+    }
+
+    .kmwc-demo__preview {
+        margin-bottom: 0;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    .kmwc-demo .kmwc-demo__code {
+        margin: 0;
+        border-radius: 0;
+    }
+
+    .kmwc-demo .kmwc-demo__code:last-child {
+        border-bottom-left-radius: var(--kmwc-radius-md);
+        border-bottom-right-radius: var(--kmwc-radius-md);
+    }
+
+    .kmwc-demo .kmwc-demo__code + .kmwc-demo__code {
+        border-top: 1px solid color-mix(in srgb, var(--kmwc-code-text-color) 12%, transparent);
+    }
+
+    .kmwc-demo__copy {
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        padding: 0.25rem 0.75rem;
+        font-size: 0.75rem;
+        background: color-mix(in srgb, var(--kmwc-code-text-color) 10%, transparent);
+        color: var(--kmwc-code-text-color);
+        border: 1px solid color-mix(in srgb, var(--kmwc-code-text-color) 20%, transparent);
+        border-radius: 4px;
+    }
+
+    .kmwc-demo__copy:hover {
+        background: color-mix(in srgb, var(--kmwc-code-text-color) 20%, transparent);
+    }
+
+    .kmwc-demo__copy--copied {
+        color: var(--kmwc-success-color);
+    }
+}

package/src/examples/css/index-page.css

@@ -0,0 +1,118 @@
+/* ==============================================================================
+   EXAMPLES KIT — INDEX PAGE
+   ==============================================================================
+   The generated examples landing page (index-page.js → body.kmwc-index). */
+@layer kmwc {
+    /* ==========================================================================
+       PAGE & HEADER
+       ========================================================================== */
+    body.kmwc-index {
+        min-height: 100vh;
+    }
+
+    .kmwc-index__page {
+        max-width: 1200px;
+        margin: 0 auto;
+    }
+
+    .kmwc-index__header {
+        background: var(--kmwc-header-bg);
+        border-radius: 16px;
+        padding: 2.5rem 3rem;
+        margin-bottom: 2rem;
+        color: var(--kmwc-text-color-on-accent);
+    }
+
+    .kmwc-index__header h1 {
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin: 0 0 0.5rem 0;
+        color: var(--kmwc-text-color-on-accent);
+    }
+
+    .kmwc-index__tagline {
+        font-size: 1.1rem;
+        opacity: 0.9;
+        margin: 0 0 1rem 0;
+    }
+
+    .kmwc-index__version:not(:empty) {
+        display: inline-block;
+        background: color-mix(in srgb, var(--kmwc-text-color-on-accent) 20%, transparent);
+        padding: 0.35rem 0.85rem;
+        border-radius: var(--kmwc-radius-md);
+        font-size: 0.875rem;
+        font-weight: 500;
+    }
+
+    /* ==========================================================================
+       CARDS
+       ========================================================================== */
+    .kmwc-index__cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 1.5rem;
+    }
+
+    .kmwc-index__card {
+        background: var(--kmwc-main-bg);
+        border-radius: var(--kmwc-radius-lg);
+        padding: 1.75rem;
+        box-shadow: 0 2px 8px var(--kmwc-shadow-color);
+        transition: transform 0.2s ease, box-shadow 0.2s ease;
+        text-decoration: none;
+        color: inherit;
+        display: block;
+    }
+
+    .kmwc-index__card:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 24px var(--kmwc-shadow-color);
+        text-decoration: none;
+    }
+
+    .kmwc-index__icon {
+        font-size: 2.5rem;
+        margin-bottom: 1rem;
+    }
+
+    .kmwc-index__card-title {
+        font-size: 1.25rem;
+        font-weight: 600;
+        margin: 0 0 0.5rem 0;
+        color: var(--kmwc-text-color-1);
+    }
+
+    .kmwc-index__card-description {
+        color: var(--kmwc-text-color-3);
+        line-height: 1.6;
+        margin: 0;
+        font-size: 0.95rem;
+    }
+
+    .kmwc-index__badge {
+        display: inline-block;
+        background: var(--kmwc-badge-new-bg);
+        color: var(--kmwc-text-color-on-accent);
+        padding: 0.15rem 0.5rem;
+        border-radius: var(--kmwc-radius-sm);
+        font-size: 0.65rem;
+        font-weight: 600;
+        margin-left: 0.5rem;
+        vertical-align: middle;
+        text-transform: uppercase;
+    }
+
+    .kmwc-index__footer {
+        text-align: center;
+        margin-top: 3rem;
+        color: var(--kmwc-text-color-3);
+        font-size: 0.875rem;
+    }
+
+    @media (max-width: 768px) {
+        .kmwc-index__header {
+            padding: 1.75rem 1.5rem;
+        }
+    }
+}