@keenmate/web-components-devkit 1.0.0-rc01 → 1.0.0-rc03

package/src/examples/chapter-search.js

@@ -0,0 +1,84 @@
+/**
+ * Chapter search for the spotlight. MIRRORS web-commandpalette — see
+ * scripts/spotlight-mirror.json for the files and the commit it is aligned to;
+ * `npm run check:spotlight-mirror` lists what changed there since. A block
+ * marked `mirrors …` keeps the wcp structure line for line (devkit naming): fix
+ * a bug in one, port it to the other.
+ *
+ * Matching is wcp's: lower-cased substring of the whole query against any
+ * field — here the section code and the heading text. On top (spotlight only):
+ * a query that is a section code finds it without the zero padding (`th7` →
+ * TH07), and the order is exact code, then codes starting with the query, then
+ * the rest — each in index order. Pure, so it is unit-tested.
+ */
+import { mapToCodeKey } from './sections.js';
+
+const RANK_EXACT_CODE = 0;
+const RANK_CODE_PREFIX = 1;
+const RANK_TEXT = 2;
+
+// mirrors web-commandpalette src/filter.ts `norm`
+const mapToNormalizedText = (value) => (value == null ? '' : String(value)).toLowerCase();
+
+// mirrors web-commandpalette src/icons.ts escapeHtml()
+export function mapToEscapedHtml(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+/** Substring match of `needle` against any of `fields`. Empty needle matches all. */
+// mirrors web-commandpalette src/filter.ts matchesAny()
+export function checkMatchesAny(fields, needle) {
+  const query = mapToNormalizedText(needle).trim();
+  if (!query) return true;
+  return fields.some((field) => mapToNormalizedText(field).includes(query));
+}
+
+/** The fields a chapter is searched by (wcp: commandFields()). */
+export function getChapterFields(chapter) {
+  return [chapter.code, chapter.title];
+}
+
+/**
+ * @param {Array<{ code: string | null, title: string }>} chapters
+ * @param {string} query
+ * @returns the matching chapters, best first (all of them for an empty query)
+ */
+export function searchChapters(chapters, query) {
+  const needle = mapToNormalizedText(query).trim();
+  if (!needle) return chapters.slice();
+  const queryCodeKey = mapToCodeKey(needle);
+
+  const rankedChapters = [];
+  chapters.forEach((chapter, chapterIndex) => {
+    const code = mapToNormalizedText(chapter.code);
+    const isExactCode = code !== '' && mapToCodeKey(code) === queryCodeKey;
+    if (!isExactCode && !checkMatchesAny(getChapterFields(chapter), needle)) return;
+    const rank = isExactCode ? RANK_EXACT_CODE : code.startsWith(needle) ? RANK_CODE_PREFIX : RANK_TEXT;
+    rankedChapters.push({ chapter, rank, chapterIndex });
+  });
+
+  return rankedChapters
+    .sort((first, second) => first.rank - second.rank || first.chapterIndex - second.chapterIndex)
+    .map((rankedChapter) => rankedChapter.chapter);
+}
+
+/** Escape `text`, wrapping case-insensitive occurrences of `needle` in `<mark>`. */
+// mirrors web-commandpalette src/render.ts highlight()
+export function renderHighlightedText(text, needle) {
+  const query = needle.trim();
+  if (!query) return mapToEscapedHtml(text);
+  const lowerText = text.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+  let html = '';
+  let index = 0;
+  for (let matchIndex = lowerText.indexOf(lowerQuery); matchIndex !== -1; matchIndex = lowerText.indexOf(lowerQuery, index)) {
+    html += mapToEscapedHtml(text.slice(index, matchIndex)) + '<mark>' + mapToEscapedHtml(text.slice(matchIndex, matchIndex + lowerQuery.length)) + '</mark>';
+    index = matchIndex + lowerQuery.length;
+  }
+  return html + mapToEscapedHtml(text.slice(index));
+}

package/src/examples/constants.js

@@ -20,6 +20,57 @@ export const CHAPTER_NAV_CLASSES = {
 
 export const CHAPTER_NAV_PANEL_ID = 'kmwc-chapter-nav-panel';
 
+/**
+ * Spotlight: the cross-page chapter search (spotlight.js). Element names
+ * mirror web-commandpalette's `pa-command-palette__*` shell (pure-admin's
+ * canonical command-palette snippet) under the kit prefix; `trigger` and
+ * `itemCode` are the spotlight's own.
+ */
+export const SPOTLIGHT_CLASSES = {
+  root: 'kmwc-spotlight',
+  rootActive: 'kmwc-spotlight--active',
+  rootFullscreen: 'kmwc-spotlight--fullscreen',
+  backdrop: 'kmwc-spotlight__backdrop',
+  container: 'kmwc-spotlight__container',
+  fullscreenBar: 'kmwc-spotlight__fullscreen-bar',
+  fullscreenTitle: 'kmwc-spotlight__fullscreen-title',
+  close: 'kmwc-spotlight__close',
+  search: 'kmwc-spotlight__search',
+  inputWrapper: 'kmwc-spotlight__input-wrapper',
+  input: 'kmwc-spotlight__input',
+  results: 'kmwc-spotlight__results',
+  homeSection: 'kmwc-spotlight__home-section',
+  homeHeading: 'kmwc-spotlight__home-heading',
+  item: 'kmwc-spotlight__item',
+  itemActive: 'kmwc-spotlight__item--active',
+  itemCode: 'kmwc-spotlight__item-code',
+  itemContent: 'kmwc-spotlight__item-content',
+  itemTitle: 'kmwc-spotlight__item-title',
+  empty: 'kmwc-spotlight__empty',
+  footer: 'kmwc-spotlight__footer',
+  hint: 'kmwc-spotlight__hint',
+  key: 'kmwc-spotlight__key',
+  live: 'kmwc-spotlight__live',
+  trigger: 'kmwc-spotlight__trigger',
+  triggerKey: 'kmwc-spotlight__trigger-key',
+};
+
+export const SPOTLIGHT_RESULTS_ID = 'kmwc-spotlight-results';
+export const SPOTLIGHT_ITEM_ID_PREFIX = 'kmwc-spotlight-item-';
+/** The Ctrl/⌘ + letter that toggles the spotlight (wcp: `openKey`, default `k`). */
+export const SPOTLIGHT_OPEN_KEY = 'k';
+/** PgUp / PgDn step (wcp palette.ts PAGE_STEP). */
+export const SPOTLIGHT_PAGE_STEP = 8;
+/** Touch phone → fullscreen sheet (wcp: core's device classification, approximated in CSS terms). */
+export const SPOTLIGHT_FULLSCREEN_MEDIA = '(pointer: coarse) and (max-width: 768px)';
+
+/**
+ * A section code at the start of a heading label: `TH07 · Title` (rulebook
+ * example-pages.md). Forgiving on purpose — `EV4b` counts; enforcing the
+ * format is the rulebook check's job.
+ */
+export const CHAPTER_CODE_PATTERN = /^([A-Z]{2,3}\d+[a-z]?)\s*·\s*/;
+
 export const COPY_LINK_CLASSES = {
   root: 'kmwc-copy-link',
   rootCopied: 'kmwc-copy-link--copied',

package/src/examples/css/content.css

@@ -1,7 +1,7 @@
 /* ==============================================================================
    EXAMPLES KIT — CONTENT
    ==============================================================================
-   Output panels, code, notes, grids, reference tables, badges. */
+   Output panels, code, notes, grids, badges. Tables are tables.css. */
 @layer kmwc {
     /* ==========================================================================
        OUTPUT
@@ -99,8 +99,10 @@
         position: absolute;
         top: 0.5rem;
         right: 0.5rem;
+        min-height: 0;  /* not the control height (button rule) */
         padding: 0.25rem 0.75rem;
         font-size: 0.75rem;
+        line-height: normal;
         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);
@@ -184,40 +186,8 @@
     }
 
     /* ==========================================================================
-       REFERENCE TABLE & BADGES
+       BADGES & HELPERS
        ========================================================================== */
-    .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;

package/src/examples/css/controls.css

@@ -1,7 +1,8 @@
 /* ==============================================================================
    EXAMPLES KIT — CONTROLS
    ==============================================================================
-   Demo forms, the `.controls` switch rows, demo areas and buttons. */
+   Demo forms, the `.controls` switch rows, demo areas and buttons. How the
+   native controls themselves look is form-controls.css. */
 @layer kmwc {
     /* ==========================================================================
        FORMS
@@ -61,30 +62,23 @@
         align-items: center;
         gap: 0.5rem;
         cursor: pointer;
+        /* A long label wraps inside the row instead of pushing the page wider. */
+        flex-wrap: wrap;
+        max-width: 100%;
     }
 
-    .toggle-label {
-        margin-bottom: 0.75rem;
+    .controls label code,
+    .toggle-label code {
+        overflow-wrap: anywhere;
     }
 
-    .controls input[type="checkbox"] {
-        width: 16px;
-        height: 16px;
-        accent-color: var(--kmwc-accent-color);
+    /* A select is as wide as its longest option — cap it at the row. */
+    .controls select {
+        max-width: 100%;
     }
 
-    .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);
+    .toggle-label {
+        margin-bottom: 0.75rem;
     }
 
     /* Control group — a label stacked over an input/select; rows of them wrap
@@ -155,13 +149,24 @@
         cursor: pointer;
         background: var(--kmwc-accent-color);
         color: var(--kmwc-text-color-on-accent);
-        border: none;
-        padding: 0.5rem 1rem;
+        /* The control height (form-controls.css): a transparent border, so an
+           outline button is as tall as a filled one, and a fixed line box. */
+        border: 1px solid transparent;
+        min-height: var(--kmwc-control-height);
+        padding: calc((var(--kmwc-control-height) - 1.25rem - 2px) / 2) 1rem;
         border-radius: var(--kmwc-radius-sm);
+        font: inherit;
         font-size: 0.875rem;
+        line-height: 1.25rem;
+        vertical-align: middle;
         transition: background 0.2s;
     }
 
+    button:focus-visible {
+        outline: 2px solid var(--kmwc-accent-color);
+        outline-offset: 2px;
+    }
+
     button:hover,
     button.btn-primary:hover {
         background: var(--kmwc-accent-color-hover);
@@ -176,7 +181,7 @@
     button.secondary,
     button.btn-secondary {
         background: var(--kmwc-neutral-color);
-        color: var(--kmwc-text-color-on-accent);
+        color: var(--kmwc-text-color-on-neutral);
     }
 
     button.secondary:hover,
@@ -195,11 +200,11 @@
     }
 
     button.btn-danger {
-        background: var(--kmwc-danger-color);
-        color: var(--kmwc-text-color-on-accent);
+        background: var(--kmwc-danger-fill-color);
+        color: var(--kmwc-text-color-on-danger);
     }
 
     button.btn-danger:hover {
-        background: color-mix(in srgb, var(--kmwc-danger-color) 85%, black);
+        background: var(--kmwc-danger-fill-color-hover);
     }
 }

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

@@ -9,6 +9,7 @@
         align-items: center;
         gap: 0.35rem;
         font-size: 0.8rem;
+        min-height: 0;  /* not the control height (button rule) */
         line-height: 1;
         padding: 0.25rem 0.4rem;
         margin-inline-start: 0.15rem;

package/src/examples/css/demo.css

@@ -32,8 +32,10 @@
         position: absolute;
         top: 0.5rem;
         right: 0.5rem;
+        min-height: 0;  /* not the control height (button rule) */
         padding: 0.25rem 0.75rem;
         font-size: 0.75rem;
+        line-height: normal;
         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);

package/src/examples/css/form-controls.css

@@ -0,0 +1,285 @@
+/* ==============================================================================
+   EXAMPLES KIT — FORM CONTROLS
+   ==============================================================================
+   One look for the native controls a demo page uses — text fields, selects
+   (single and multiple), textareas, checkboxes, radios, switches, ranges,
+   colour and file inputs — wherever the page puts them, not only in a
+   `.controls` row. Modelled on pure-admin's forms (fixed control height,
+   accent focus border + halo, the shared --base-icon-check tick) and read
+   through the --base-* contract, so a theme restyles them with the component.
+
+   Every selector is wrapped in :where() — zero specificity — so any page or
+   component rule wins. `.kmwc-native` on an element (or an ancestor) keeps
+   the browser's own controls, e.g. for a light-DOM component that draws its
+   own inputs. A switch is `<input type="checkbox" role="switch">`. */
+@layer kmwc {
+    /* ==========================================================================
+       TEXT FIELDS & SELECT
+       ==========================================================================
+       A fixed height and no vertical padding: the browser centres the text. */
+    :where(
+        input:not([type]),
+        input[type="text"], input[type="search"], input[type="email"], input[type="url"],
+        input[type="tel"], input[type="password"], input[type="number"], input[type="date"],
+        input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
+        select, textarea
+    ):not(:where(.kmwc-native, .kmwc-native *)) {
+        box-sizing: border-box;
+        height: var(--kmwc-control-height);
+        padding: 0 0.625rem;
+        border: var(--kmwc-input-border);
+        border-radius: var(--kmwc-radius-sm);
+        background-color: var(--kmwc-input-bg);
+        color: var(--kmwc-input-color);
+        font: inherit;
+        font-size: 0.875rem;
+        transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
+    }
+
+    :where(input, select, textarea):not(:where(.kmwc-native, .kmwc-native *))::placeholder {
+        color: var(--kmwc-input-placeholder-color);
+        opacity: 1;
+    }
+
+    :where(
+        input:not([type]),
+        input[type="text"], input[type="search"], input[type="email"], input[type="url"],
+        input[type="tel"], input[type="password"], input[type="number"], input[type="date"],
+        input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
+        select, textarea
+    ):not(:where(.kmwc-native, .kmwc-native *)):hover {
+        border: var(--kmwc-input-border-hover);
+    }
+
+    :where(
+        input:not([type]),
+        input[type="text"], input[type="search"], input[type="email"], input[type="url"],
+        input[type="tel"], input[type="password"], input[type="number"], input[type="date"],
+        input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
+        select, textarea
+    ):not(:where(.kmwc-native, .kmwc-native *)):focus {
+        outline: none;
+        border: var(--kmwc-input-border-focus);
+        box-shadow: var(--kmwc-input-box-shadow-focus);
+    }
+
+    /* A field the user has left invalid (not one that starts empty). */
+    :where(input, select, textarea):not(:where(.kmwc-native, .kmwc-native *)):user-invalid {
+        border-color: var(--kmwc-danger-fill-color);
+    }
+
+    :where(input, select, textarea):not(:where(.kmwc-native, .kmwc-native *)):disabled {
+        background-color: var(--kmwc-input-disabled-bg);
+        opacity: var(--kmwc-disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    :where(input[type="number"]):not(:where(.kmwc-native, .kmwc-native *)) {
+        padding-inline-end: 0.25rem;  /* room for the spin buttons */
+    }
+
+    /* Single select: the kit's caret (drawn from the input icon colour, so it
+       follows the theme) instead of the platform's. */
+    :where(select:not([multiple], [size])):not(:where(.kmwc-native, .kmwc-native *)) {
+        appearance: none;
+        padding-inline-end: 2rem;
+        background-image:
+            linear-gradient(45deg, transparent 50%, var(--kmwc-input-icon-color) 50%),
+            linear-gradient(135deg, var(--kmwc-input-icon-color) 50%, transparent 50%);
+        background-position:
+            right 0.95rem center,
+            right 0.65rem center;
+        background-size: 0.3rem 0.3rem;
+        background-repeat: no-repeat;
+        cursor: pointer;
+    }
+
+    /* Multiple select / list box: grows with its rows; options are rows. */
+    :where(select[multiple], select[size]):not(:where(.kmwc-native, .kmwc-native *)) {
+        height: auto;
+        padding: 0.25rem;
+    }
+
+    :where(select[multiple], select[size]):not(:where(.kmwc-native, .kmwc-native *)) option {
+        padding: 0.25rem 0.5rem;
+        border-radius: var(--kmwc-radius-sm);
+    }
+
+    :where(select[multiple], select[size]):not(:where(.kmwc-native, .kmwc-native *)) option:checked {
+        background: var(--kmwc-accent-light-bg-hover);
+        color: var(--kmwc-text-color-1);
+    }
+
+    :where(textarea):not(:where(.kmwc-native, .kmwc-native *)) {
+        height: auto;
+        min-height: 5rem;
+        padding: 0.5rem 0.625rem;
+        line-height: 1.5;
+        resize: vertical;
+    }
+
+    /* Inside a form group a field takes the row (pure-admin .pa-input). */
+    :where(.form-group) :where(
+        input:not([type]),
+        input[type="text"], input[type="search"], input[type="email"], input[type="url"],
+        input[type="tel"], input[type="password"], input[type="number"], input[type="date"],
+        input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
+        select, textarea
+    ) {
+        width: 100%;
+    }
+
+    /* ==========================================================================
+       CHECKBOX & RADIO
+       ==========================================================================
+       The native input, redrawn: the contract's checkbox render method — a
+       border-box square sized by --base-checkbox-scale, the tick / dash masked
+       from --base-icon-check / --base-icon-indeterminate (the glyph every
+       Keenmate component draws). Radios get a dot from the same tokens. */
+    :where(input[type="checkbox"], input[type="radio"]):not(:where(.kmwc-native, .kmwc-native *)) {
+        appearance: none;
+        box-sizing: border-box;
+        position: relative;
+        flex-shrink: 0;
+        display: inline-block;
+        width: var(--kmwc-checkbox-size);
+        height: var(--kmwc-checkbox-size);
+        margin: 0;
+        vertical-align: -0.15em;
+        border: calc(1px * var(--base-checkbox-scale, 1)) solid var(--kmwc-checkbox-border-color);
+        border-radius: calc(4px * var(--base-checkbox-scale, 1));
+        background-color: var(--kmwc-input-bg);
+        cursor: pointer;
+        transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    :where(input[type="radio"]):not(:where(.kmwc-native, .kmwc-native *)) {
+        border-radius: 50%;
+    }
+
+    :where(input[type="checkbox"], input[type="radio"]):not(:where(.kmwc-native, .kmwc-native *)):hover:not(:checked, :indeterminate, :disabled) {
+        border-color: var(--kmwc-accent-color);
+    }
+
+    :where(input[type="checkbox"], input[type="radio"]):not(:where(.kmwc-native, .kmwc-native *)):focus-visible {
+        outline: none;
+        border-color: var(--kmwc-accent-color);
+        box-shadow: 0 0 0 3px var(--kmwc-accent-light-bg-hover);
+    }
+
+    :where(input[type="checkbox"]):not(:where(.kmwc-native, .kmwc-native *)):is(:checked, :indeterminate) {
+        background-color: var(--kmwc-accent-color);
+        border-color: var(--kmwc-accent-color);
+    }
+
+    :where(input[type="checkbox"]):not(:where(.kmwc-native, .kmwc-native *, [role="switch"])):is(:checked, :indeterminate)::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: var(--kmwc-text-color-on-accent);
+        mask: var(--kmwc-icon-check) center / var(--kmwc-icon-check-size) no-repeat;
+    }
+
+    :where(input[type="checkbox"]):not(:where(.kmwc-native, .kmwc-native *, [role="switch"])):indeterminate::before {
+        mask-image: var(--kmwc-icon-indeterminate);
+    }
+
+    :where(input[type="radio"]):not(:where(.kmwc-native, .kmwc-native *)):checked {
+        border-color: var(--kmwc-accent-color);
+        background: radial-gradient(circle, var(--kmwc-text-color-on-accent) 0 30%, var(--kmwc-accent-color) 34%);
+    }
+
+    :where(input[type="checkbox"], input[type="radio"]):not(:where(.kmwc-native, .kmwc-native *)):disabled {
+        opacity: var(--kmwc-disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    /* The option's label fades with it. */
+    :where(label):has(> :is(input, select, textarea):disabled) {
+        color: var(--kmwc-text-color-3);
+        cursor: not-allowed;
+    }
+
+    /* ==========================================================================
+       SWITCH — <input type="checkbox" role="switch">
+       ========================================================================== */
+    :where(input[type="checkbox"][role="switch"]):not(:where(.kmwc-native, .kmwc-native *)) {
+        width: calc(var(--kmwc-checkbox-size) * 1.9);
+        border-radius: 999px;
+        background-color: var(--kmwc-checkbox-border-color);
+        border-color: var(--kmwc-checkbox-border-color);
+    }
+
+    :where(input[type="checkbox"][role="switch"]):not(:where(.kmwc-native, .kmwc-native *))::before {
+        content: '';
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        width: calc(var(--kmwc-checkbox-size) - 4px);
+        height: calc(var(--kmwc-checkbox-size) - 4px);
+        border-radius: 50%;
+        background-color: var(--kmwc-main-bg);
+        transition: translate 0.15s ease;
+    }
+
+    :where(input[type="checkbox"][role="switch"]):not(:where(.kmwc-native, .kmwc-native *)):checked::before {
+        translate: calc(var(--kmwc-checkbox-size) * 0.9) 0;
+    }
+
+    /* ==========================================================================
+       RANGE, COLOUR, FILE
+       ========================================================================== */
+    :where(input[type="range"], progress, meter):not(:where(.kmwc-native, .kmwc-native *)) {
+        accent-color: var(--kmwc-accent-color);
+        vertical-align: middle;
+    }
+
+    :where(input[type="color"]):not(:where(.kmwc-native, .kmwc-native *)) {
+        box-sizing: border-box;
+        width: var(--kmwc-control-height);
+        height: var(--kmwc-control-height);
+        padding: 0.2rem;
+        border: var(--kmwc-input-border);
+        border-radius: var(--kmwc-radius-sm);
+        background-color: var(--kmwc-input-bg);
+        cursor: pointer;
+    }
+
+    :where(input[type="file"]):not(:where(.kmwc-native, .kmwc-native *)) {
+        font: inherit;
+        font-size: 0.875rem;
+        color: var(--kmwc-text-color-2);
+    }
+
+    :where(input[type="file"]):not(:where(.kmwc-native, .kmwc-native *))::file-selector-button {
+        height: var(--kmwc-control-height);
+        margin-inline-end: 0.75rem;
+        padding: 0 1rem;
+        border: 1px solid var(--kmwc-border-color-strong);
+        border-radius: var(--kmwc-radius-sm);
+        background: var(--kmwc-main-bg);
+        color: var(--kmwc-text-color-1);
+        font: inherit;
+        cursor: pointer;
+    }
+
+    :where(input[type="file"]):not(:where(.kmwc-native, .kmwc-native *))::file-selector-button:hover {
+        background: var(--kmwc-hover-bg);
+    }
+
+    /* ==========================================================================
+       FIELDSET
+       ========================================================================== */
+    :where(fieldset):not(:where(.kmwc-native, .kmwc-native *)) {
+        border: 1px solid var(--kmwc-border-color);
+        border-radius: var(--kmwc-radius-md);
+        padding: 0.75rem 1rem 1rem;
+    }
+
+    :where(legend):not(:where(.kmwc-native, .kmwc-native *)) {
+        padding: 0 0.375rem;
+        font-weight: 600;
+        font-size: 0.875rem;
+        color: var(--kmwc-text-color-2);
+    }
+}

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

@@ -93,7 +93,7 @@
     .kmwc-index__badge {
         display: inline-block;
         background: var(--kmwc-badge-new-bg);
-        color: var(--kmwc-text-color-on-accent);
+        color: var(--kmwc-text-color-on-badge-new);
         padding: 0.15rem 0.5rem;
         border-radius: var(--kmwc-radius-sm);
         font-size: 0.65rem;