@netlify/spark-ui 0.0.12 → 0.0.13

package/packages/components/preact/SearchModal/components/{SearchHeading.tsx → SearchHeading/SearchHeading.tsx}

@@ -1,11 +1,13 @@
-import { h, type ComponentChildren } from 'preact';
+import { type ComponentChildren } from 'preact';
+
+import './SearchHeading.css';
 
 type SearchHeadingProps = {
   children: ComponentChildren;
 };
 
 const SearchHeading = ({ children }: SearchHeadingProps) => {
-  return <h2 class="search-results-heading">{children}</h2>;
+  return <h2 class="n-search-heading">{children}</h2>;
 };
 
 export default SearchHeading;

package/packages/components/preact/SearchModal/components/SearchInput.tsx

@@ -1,8 +1,7 @@
-import { h } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 import Icon from '../../Icon';
 
-interface Props extends h.JSX.HTMLAttributes<HTMLInputElement> {
+interface Props {
   setSearchTerm: (term: string) => void;
   placeholder?: string;
   initialValue?: string;
@@ -24,15 +23,15 @@ const SearchInput = (props: Props) => {
   }, [props.initialValue, setValue]);
 
   return (
-    <div class="search-input-wrapper">
-      <label class="search-label" htmlFor="search">
+    <div class="n-search-input-wrapper">
+      <label class="n-search-label" htmlFor="search">
         <span class="visually-hidden">Search</span>
-        <div class="search-icon">
+        <div class="n-search-icon">
           <Icon name="search" />
         </div>
       </label>
       <input
-        class="search-input"
+        class="n-search-input"
         type="text"
         value={value}
         placeholder={props.placeholder || 'Search...'}

package/packages/components/preact/SearchModal/components/SearchLink.tsx

@@ -1,4 +1,3 @@
-import { h } from 'preact';
 import Icon, { type IconName } from '../../Icon';
 
 export interface Props {
@@ -9,11 +8,11 @@ export interface Props {
   excerpt?: string;
 }
 
-const SearchLink = ({ icon, title, content_type, url, excerpt }: Props) => {
+const SearchLink = ({ icon, title, url, excerpt }: Props) => {
   return (
-    <a className="result-link" href={url}>
-      <div className="result-header">
-        <div className="result-title">
+    <a className="n-result-link" href={url}>
+      <div className="n-result-header">
+        <div className="n-result-title">
           {icon && (
             <span className="icon">
               <Icon name={icon} />
@@ -25,7 +24,7 @@ const SearchLink = ({ icon, title, content_type, url, excerpt }: Props) => {
           <Icon name="caretRight" />
         </div>
       </div>
-      {excerpt && <p className="result-excerpt" dangerouslySetInnerHTML={{ __html: excerpt }} />}
+      {excerpt && <p className="n-result-excerpt" dangerouslySetInnerHTML={{ __html: excerpt }} />}
     </a>
   );
 };

package/packages/{styles/search.css → components/preact/SearchModal/components/SearchModal/SearchModal.css}

@@ -1,106 +1,86 @@
-/* Imports */
-@import url('./tokens.css');
-@import url('./utils.css');
-
 /* Root Variables */
-.search-modal {
-  --ntl-search-padding-inline: .5em;
-  --ntl-search-color-text: var(--color-text-2);
-  --ntl-search-color-bg: var(--color-bg-1);
-  --ntl-search-color-border: var(--color-bg-3);
-  --ntl-search-border-radius: 8px;
-  --ntl-search-max-w: 600px;
-  --ntl-search-text-highlight: var(--color-text-accent);
-  --ntl-search-footer-key-color-text: var(--color-text-2);
+.n-search-modal {
+  --n-search-padding-inline: .5em;
+  --n-search-color-text: var(--color-text-1, currentColor);
+  --n-search-color-text-secondary: var(--color-text-2, currentColor);
+  --n-search-color-bg: var(--color-bg-1);
+  --n-search-color-bg-2: var(--color-bg-2);
+  --n-search-color-border: var(--color-bg-3);
+  --n-search-border-radius: 8px;
+  --n-search-max-w: 600px;
+  --n-search-text-highlight: var(--color-text-accent);
+}
+
+.n-search-modal {
+  padding: 0;
+  border: none;
+  border-radius: var(--n-search-border-radius);
+  width: min(var(--n-search-max-w), 100%);
+  margin-inline: auto;
 }
 
 /* Container Styles */
-.search-container {
-  --mark-bg: var(--ntl-search-text-highlight);
+.n-search-container {
+  --mark-bg: var(--n-search-text-highlight);
   display: grid;
-  width: min(var(--ntl-search-max-w), 100%);
+  width: min(var(--n-search-max-w), 100%);
   min-height: 470px;
-  background-color: var(--ntl-search-color-bg);
-  border-radius: var(--ntl-search-border-radius);
+  background-color: var(--n-search-color-bg);
+  border-radius: var(--n-search-border-radius);
   overflow: hidden;
 }
 
-.search-modal {
-  padding: 0;
-  border: none;
-  border-radius: var(--ntl-search-border-radius);
-  width: min(var(--ntl-search-max-w), 100%);
-  margin-inline: auto;
-}
-
 /* Search Bar */
-.search {
+.n-search-bar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   overflow: hidden;
-  background: var(--ntl-search-color-bg);
-  border-bottom: 1px solid var(--ntl-search-color-border);
-}
-
-.search > * {
-  display: inline-block;
-}
-
-.search-trigger {
-  width: var(--ntl-search-icon-size, 1rem);
-  height: auto;
-  border: none;
-  background: none;
-  padding: 0;
-  cursor: pointer;
-  padding-inline: var(--space-2xs);
-  color: var(--color-text-1);
-  box-sizing: content-box;
-  display: block;
+  background: var(--n-search-color-bg);
+  border-bottom: 1px solid var(--n-search-color-border);
 }
 
 /* Search Input */
-.search-input-wrapper {
+.n-search-input-wrapper {
   all: unset;
   display: flex;
   width: 100%;
 }
 
-.search-input {
+.n-search-input {
   display: inline-flex;
   box-sizing: border-box;
-  background: var(--ntl-search-color-bg);
+  background: var(--n-search-color-bg);
   inline-size: 100%;
   padding-block: .75rem;
-  padding-inline: var(--ntl-search-padding-inline);
+  padding-inline: var(--n-search-padding-inline);
   flex: 1;
   border: none;
   outline: none;
   font-size: 1rem;
 }
 
-.search-input::placeholder {
-  color: var(--ntl-search-color-text);
+.n-search-input::placeholder {
+  color: var(--n-search-color-text);
 }
 
 /* Search Label */
-.search-label {
+.n-search-label {
   display: flex;
-  padding-inline: var(--ntl-search-padding-inline);
+  padding-inline: var(--n-search-padding-inline);
 }
 
-.search-label > * {
+.n-search-label > * {
   display: inline-block;
   margin: 0;
 }
 
 /* Icons */
-.search-icon {
+.n-search-icon {
   display: flex;
   width: 1em;
   height: auto;
-  color: lightgray;
+  color: var(--n-search-color-text-secondary);
 }
 
 .icon {
@@ -112,70 +92,62 @@
 
 .icon [data-icon="caretRight"] {
   width: 10px;
-  color: var(--neutral-300);
+  color: var(--n-search-color-text-secondary);
 }
 
 /* Search Key & Term */
-.search-term {
+.n-search-term {
   font-weight: var(--font-medium);
   font-size: 1.1em;
 }
 
 /* Search Results */
-.search-results-heading {
-  padding-inline: 1rem;
-  margin-block: var(--space-xs);
-  font-size: var(--step--2);
-  font-weight: var(--font-regular);
-  color: var(--color-text-3);
-}
-
-.search-window {
+.n-search-window {
   height: 400px;
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
   margin-block: 0;
-  background: var(--ntl-search-color-bg);
+  background: var(--n-search-color-bg);
 }
 
-.results-list, ul[role="list"] {
+.n-results-list, ul[role="list"] {
   list-style: none;
   padding: 0;
 }
 
-.results-list-item {
+.n-results-list-item {
   border-bottom: 1px solid var(--color-bg-3);
 }
-.results-list-item:first-of-type {
+.n-results-list-item:first-of-type {
   border-top: 1px solid var(--color-bg-3);
 }
 
 /* Result Items */
-.result-link {
+.n-result-link {
   all: unset;
   display: flex;
   flex-wrap: wrap;
   row-gap: var(--space-3xs);
-  padding: var(--ntl-result-padding-block, 1em) var(--ntl-result-padding-inline, 1rem);
+  padding: var(--n-result-padding-block, 1em) var(--n-result-padding-inline, 1rem);
   font-size: var(--step--1);
   font-weight: var(--font-regular);
   text-decoration: none;
   cursor: pointer;
 }
 
-.result-link:is(:hover, :focus-within) {
-  background: var(--neutral-100);
+.n-result-link:is(:hover, :focus-within) {
+  background: var(--n-search-color-bg-2);
 }
 
-.result-header {
+.n-result-header {
   display: flex;
   justify-content: space-between;
   width: 100%;
   align-items: center;
 }
 
-.result-title {
+.n-result-title {
   display: flex;
   align-items: center;
   gap: var(--space-s);
@@ -183,7 +155,7 @@
   color: var(--color-text-2);
 }
 
-.result-excerpt {
+.n-result-excerpt {
   color: var(--color-text-3);
   line-height: 1.3;
   font-size: .9em;
@@ -191,17 +163,17 @@
 }
 
 /* Footer */
-.search-footer {
-  border-top: 1px solid var(--ntl-search-color-border);
+.n-search-footer {
+  border-top: 1px solid var(--n-search-color-border);
   padding: var(--space-2xs) var(--space-s);
   background: var(--color-bg-2);
   display: flex;
   gap: var(--space-m);
 }
 
-.search-footer-tip {
-  --ntl-key-text-color: var(--ntl-search-footer-key-color-text);
-  color: var(--ntl-search-footer-key-color-text);
+.n-search-footer-tip {
+  --n-key-text-color: var(--n-search-color-text-secondary);
+  color: var(--n-search-color-text-secondary);
   display: flex;
   gap: var(--space-2xs);
   align-items: center;
@@ -209,7 +181,7 @@
 }
 
 /* Animations */ 
-.search-modal {
+.n-search-modal {
   transition: display .2s allow-discrete, overlay .2s allow-discrete;
   animation: closeSearch .2s forwards;
   &[open] {
@@ -242,11 +214,11 @@
   }
 }
 
-.search-modal::backdrop {
+.n-search-modal::backdrop {
   animation: closeSearchBackdrop .2s forwards;
 }
 
-.search-modal[open]::backdrop  {
+.n-search-modal[open]::backdrop  {
   animation: openSearchBackdrop .2s forwards;
 }
 

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.tsx

@@ -0,0 +1,77 @@
+import { type ComponentChildren } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+
+import Modal from '@components/preact/Modal/Modal';
+import KeyboardKey from '@components/preact/KeyboardKey/KeyboardKey';
+import SearchWindow from '../../components/SearchWindow';
+import SearchInput from '../../components/SearchInput';
+import { useClickOutside } from '@utils/useClickOutside';
+import {
+  useSearch,
+  useKeyboardNav,
+  useSearchHotkeys,
+  useSearchParams,
+  useSearchToggles,
+} from '../../hooks';
+
+import './SearchModal.css';
+
+interface Props {
+  children: ComponentChildren;
+  className: string;
+}
+
+function SearchModal(props: Props) {
+  const { children, className, ...rest } = props;
+  const { state, actions } = useSearch();
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  const openSearch = () => setSearchOpen(true);
+  const closeSearch = () => setSearchOpen(false);
+
+  const modalRef = useRef<HTMLDialogElement>(null);
+  const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
+
+  useSearchToggles(openSearch);
+  useSearchParams(actions.setSearchTerm, openSearch);
+  useSearchHotkeys(searchOpen, openSearch, closeSearch);
+  useKeyboardNav(modalRef, searchOpen, closeSearch);
+
+  useEffect(() => {
+    if (!modalRef.current) return;
+    searchOpen ? modalRef.current.showModal() : modalRef.current.close();
+  }, [searchOpen]);
+
+  return (
+    <Modal ref={modalRef} className={`${className} n-search-modal`} {...rest}>
+      <div ref={containerRef} className="n-search-container">
+        <form className="n-search-bar">
+          <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
+        </form>
+
+        <SearchWindow
+          searchLoading={state.isLoading}
+          searchTerm={state.searchTerm}
+          results={state.results}
+        >
+          {children}
+        </SearchWindow>
+
+        <div className="n-search-footer">
+          <p className="n-search-footer-tip">
+            <KeyboardKey keyNames={['Esc']} />
+            to close
+          </p>
+          <p className="n-search-footer-tip">
+            <KeyboardKey keyNames={['Tab']} />
+            <span>or</span>
+            <KeyboardKey keyNames={['↑', '↓']} />
+            to navigate
+          </p>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default SearchModal;

package/packages/components/preact/SearchModal/components/SearchToggle/SearchToggle.css

@@ -1,4 +1,4 @@
-.search-toggle {
+.n-search-toggle {
   all: unset;
   outline: revert;
   cursor: pointer;
@@ -8,6 +8,6 @@
   max-width: max-content;
 }
 
-.search-toggle:disabled {
+.n-search-toggle:disabled {
   opacity: .3;
 }

package/packages/components/preact/SearchModal/components/SearchToggle/SearchToggle.tsx

@@ -10,7 +10,7 @@ interface Props {
 
 export default forwardRef(function SearchToggle(props: Props, ref: Ref<HTMLButtonElement>) {
   return (
-    <button id={props.id} ref={ref} class="search-toggle" disabled data-ntl-search-toggle>
+    <button id={props.id} ref={ref} class="n-search-toggle" disabled data-ntl-search-toggle>
       <span class="visually-hidden">Search</span>
       <Icon name={props.iconName || 'search'} />
     </button>

package/packages/components/preact/SearchModal/components/SearchWindow.tsx

@@ -1,8 +1,6 @@
-import { h } from 'preact';
-
 import type { FunctionComponent } from 'preact';
 import type { ResultProps, SearchResultsProps, SearchWindowProps } from '../types/search.types';
-import SearchHeading from './SearchHeading';
+import SearchHeading from './SearchHeading/SearchHeading';
 import SearchLink from './SearchLink';
 
 /* --- Search Results Window (for active searches) --- */
@@ -14,7 +12,7 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
   if (searchLoading) {
     return (
       <SearchHeading>
-        Searching for <span className="search-term">{searchTerm}</span> ...
+        Searching for <span className="n-search-term">{searchTerm}</span> ...
       </SearchHeading>
     );
   }
@@ -22,15 +20,15 @@ const SearchResults: FunctionComponent<SearchResultsProps> = ({
   if (!results || results.length === 0) {
     return (
       <SearchHeading>
-        0 results for <span className="search-term">{searchTerm}</span>
+        0 results for <span className="n-search-term">{searchTerm}</span>
       </SearchHeading>
     );
   }
 
   return (
-    <ul className="results-list" role="list">
+    <ul className="n-results-list" role="list">
       {results.slice(0, 15).map((result, idx) => (
-        <li key={idx} className="results-list-item">
+        <li key={idx} className="n-results-list-item">
           <SearchLink {...result} />
         </li>
       ))}
@@ -52,7 +50,7 @@ export default function SearchWindow({
   };
 
   return (
-    <div className="search-window">
+    <div className="n-search-window">
       <div className="search-links">
         <SearchLink {...askNetlify} />
         {searchTerm ? (

package/packages/components/preact/SearchModal/hooks/index.ts

@@ -0,0 +1,5 @@
+export { useSearch } from '../hooks/useSearch';
+export { useKeyboardNav } from '../hooks/useKeyboardNav';
+export { useSearchHotkeys } from '../hooks/useSearchHotkeys';
+export { useSearchParams } from '../hooks/useSearchParams';
+export { useSearchToggles } from '../hooks/useSearchToggles';

package/packages/components/preact/SearchModal/index.tsx

@@ -1,72 +1,6 @@
-import { type ComponentChildren } from 'preact';
-import { useState, useEffect, useRef } from 'preact/hooks';
-
-import Modal from '../Modal';
-import { SearchFooter, SearchFooterTip, SearchInput, SearchWindow } from './components';
-import KeyboardKey from '../KeyboardKey';
-import { useSearch } from './hooks/useSearch';
-import { useKeyboardNav } from './hooks/useKeyboardNav';
-import { useSearchHotkeys } from './hooks/useSearchHotkeys';
-import { useSearchParams } from './hooks/useSearchParams';
-import { useSearchToggles } from './hooks/useSearchToggles';
-import { useClickOutside } from '../../../utils/useClickOutside';
-
-import '../../../styles/search.css';
-
-interface Props {
-  children: ComponentChildren;
-}
-
-function SearchModal({ children }: Props) {
-  const { state, actions } = useSearch();
-  const [searchOpen, setSearchOpen] = useState(false);
-
-  const openSearch = () => setSearchOpen(true);
-  const closeSearch = () => setSearchOpen(false);
-
-  const modalRef = useRef<HTMLDialogElement>(null);
-  const containerRef = useClickOutside<HTMLDivElement>(closeSearch);
-
-  useSearchToggles(openSearch);
-  useSearchParams(actions.setSearchTerm, openSearch);
-  useSearchHotkeys(searchOpen, openSearch, closeSearch);
-  useKeyboardNav(modalRef, searchOpen, closeSearch);
-
-  useEffect(() => {
-    if (!modalRef.current) return;
-    searchOpen ? modalRef.current.showModal() : modalRef.current.close();
-  }, [searchOpen]);
-
-  return (
-    <Modal ref={modalRef} className="search-modal">
-      <div ref={containerRef} class="search-container">
-        <form class="search">
-          <SearchInput setSearchTerm={actions.setSearchTerm} initialValue={state.searchTerm} />
-        </form>
-
-        <SearchWindow
-          searchLoading={state.isLoading}
-          searchTerm={state.searchTerm}
-          results={state.results}
-        >
-          {children}
-        </SearchWindow>
-
-        <SearchFooter>
-          <SearchFooterTip>
-            <KeyboardKey keyNames={['Esc']} />
-            to close
-          </SearchFooterTip>
-          <SearchFooterTip>
-            <KeyboardKey keyNames={['Tab']} />
-            <span>or</span>
-            <KeyboardKey keyNames={['↑', '↓']} />
-            to navigate
-          </SearchFooterTip>
-        </SearchFooter>
-      </div>
-    </Modal>
-  );
-}
-
-export default SearchModal;
+export { default as SearchHeading } from './components/SearchHeading/SearchHeading';
+export { default as SearchInput } from './components/SearchInput';
+export { default as SearchLink } from './components/SearchLink';
+export { default as SearchToggle } from './components/SearchToggle/SearchToggle';
+export { default as SearchWindow } from './components/SearchWindow';
+export { default as SearchModal } from './components/SearchModal/SearchModal';

package/packages/components/preact/SearchModal/types/search.types.tsx

@@ -1,4 +1,4 @@
-import type { ComponentChildren, FunctionComponent } from 'preact';
+import type { ComponentChildren } from 'preact';
 import type { IconName } from '../../Icon';
 
 export interface ResultProps {

package/packages/components/preact/index.ts

@@ -1,9 +1,9 @@
-export { default as KeyboardKey } from './KeyboardKey';
-export { default as Modal } from './Modal';
+export { default as KeyboardKey } from './KeyboardKey/KeyboardKey';
+export { default as Modal } from './Modal/Modal';
 export { default as Icon } from './Icon';
 export { default as SearchLink } from './SearchModal/components/SearchLink';
-export { default as SearchHeading } from './SearchModal/components/SearchHeading';
+export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
-export { default as SearchModal } from './SearchModal';
+export { SearchModal } from './SearchModal';
 
 export { type IconName } from './Icon';

package/dist/assets/index.css

@@ -1 +0,0 @@
-:root{--ntl-key-text-size: .8em;--ntl-key-border-radius: 6px;--ntl-key-text-color: var(--neutral-300);--ntl-key-bg-color: transparent}.keyboard-key{display:flex;gap:calc(var(--space-3xs) * .5);font-size:var(--ntl-key-text-size);color:var(--ntl-key-text-color);background:var(--ntl-key-bg-color);border:1px solid currentColor;border-radius:var(--ntl-key-border-radius);padding:var(--ntl-key-padding-block, .05em) var(--ntl-key-padding-inline, .3em)}

package/dist/assets/index2.css

@@ -1 +0,0 @@
-:root{--blue-000: color(srgb .9294117647058824 .9568627450980393 1);--blue-100: color(srgb .803921568627451 .8862745098039215 1);--blue-200: color(srgb .7098039215686275 .8235294117647058 .984313725490196);--blue-300: color(srgb .611764705882353 .7450980392156863 .9647058823529412);--blue-400: color(srgb .5019607843137255 .6705882352941176 .9803921568627451);--blue-500: color(srgb .36470588235294116 .5529411764705883 .9607843137254902);--blue-600: color(srgb .19215686274509805 .4196078431372549 .9568627450980393);--blue-700: color(srgb .1803921568627451 .3176470588235294 .9294117647058824);--blue-800: color(srgb .12549019607843137 .21176470588235294 .6313725490196078);--blue-900: color(srgb .10588235294117647 .12549019607843137 .3568627450980392);--color-bg-1: var(--neutral-000);--color-bg-2: var(--neutral-100);--color-bg-3: var(--neutral-200);--color-brand: var(--blue-700);--color-disabled-bg: var(--neutral-200);--color-disabled-border: var(--neutral-400);--color-disabled-text: var(--neutral-400);--color-invalid-bg: var(--red-100);--color-invalid-border: var(--red-600);--color-invalid-text: var(--red-600);--color-link: var(--neutral-800);--color-success-bg: var(--green-100);--color-success-border: var(--green-300);--color-success-text: var(--green-800);--color-text-1: var(--neutral-800);--color-text-2: var(--neutral-600);--color-text-3: var(--neutral-400);--color-text-accent: var(--teal-000);--color-warning-bg: var(--gold-100);--color-warning-border: var(--gold-300);--color-warning-text: var(--gold-800);--font-bold: 800;--font-light: 300;--font-medium: 500;--font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;--font-primary: "Mulish", system-ui, "Helvetica", sans-serif;--font-regular: 400;--font-secondary: "Pacaembu", system-ui, "Helvetica", sans-serif;--font-semibold: 680;--font-semilight: 350;--gold-000: color(srgb .9921568627450981 .9607843137254902 .8470588235294118);--gold-100: color(srgb .9647058823529412 .8784313725490196 .6470588235294118);--gold-200: color(srgb .9803921568627451 .803921568627451 .43529411764705883);--gold-300: color(srgb .984313725490196 .6941176470588235 .23921568627450981);--gold-400: color(srgb .9764705882352941 .5568627450980392 .12941176470588237);--gold-500: color(srgb .8352941176470589 .4666666666666667 .10196078431372549);--gold-600: color(srgb .6588235294117647 .36470588235294116 .07450980392156863);--gold-700: color(srgb .5490196078431373 .2980392156862745 .050980392156862744);--gold-800: color(srgb .3764705882352941 .20392156862745098 .03137254901960784);--gold-900: color(srgb .2 .13333333333333333 .07450980392156863);--green-000: color(srgb .9058823529411765 .9882352941176471 .9137254901960784);--green-100: color(srgb .7450980392156863 .9764705882352941 .7764705882352941);--green-200: color(srgb .5764705882352941 .9607843137254902 .6470588235294118);--green-300: color(srgb .39215686274509803 .8470588235294118 .4980392156862745);--green-400: color(srgb .22745098039215686 .7647058823529411 .39215686274509803);--green-500: color(srgb .19215686274509805 .6588235294117647 .3333333333333333);--green-600: color(srgb .13333333333333333 .5098039215686274 .25098039215686274);--green-700: color(srgb .10196078431372549 .4196078431372549 .20392156862745098);--green-800: color(srgb .058823529411764705 .2901960784313726 .12941176470588237);--green-900: color(srgb .08235294117647059 .16470588235294117 .09803921568627451);--line-height-heading: 1.2;--line-height-none: 1;--line-height-prose: 1.5;--neutral-000: color(srgb 1 1 1);--neutral-100: color(srgb .9647058823529412 .9647058823529412 .9686274509803922);--neutral-200: color(srgb .9137254901960784 .9215686274509803 .9294117647058824);--neutral-300: color(srgb .8196078431372549 .8352941176470589 .8549019607843137);--neutral-400: color(srgb .615686274509804 .6549019607843137 .6980392156862745);--neutral-500: color(srgb .4666666666666667 .5019607843137255 .5372549019607843);--neutral-600: color(srgb .32941176470588235 .35294117647058826 .3803921568627451);--neutral-700: color(srgb .20784313725490197 .22745098039215686 .24313725490196078);--neutral-800: color(srgb .09411764705882353 .10196078431372549 .10980392156862745);--neutral-900: color(srgb .023529411764705882 .043137254901960784 .06274509803921569);--pink-000: color(srgb .9882352941176471 .9411764705882353 .984313725490196);--pink-100: color(srgb .9647058823529412 .8235294117647058 .9490196078431372);--pink-200: color(srgb .9686274509803922 .7372549019607844 .9529411764705882);--pink-300: color(srgb .9529411764705882 .6588235294117647 .9333333333333333);--pink-400: color(srgb .9372549019607843 .4980392156862745 .9215686274509803);--pink-500: color(srgb .8745098039215686 .35294117647058826 .8627450980392157);--pink-600: color(srgb .7254901960784313 .2196078431372549 .7215686274509804);--pink-700: color(srgb .6039215686274509 .17647058823529413 .6);--pink-800: color(srgb .4235294117647059 .11372549019607843 .4196078431372549);--pink-900: color(srgb .2196078431372549 .10588235294117647 .21568627450980393);--purple-000: color(srgb .9607843137254902 .9490196078431372 .9882352941176471);--purple-100: color(srgb .8862745098039215 .8509803921568627 .9686274509803922);--purple-200: color(srgb .8470588235294118 .7803921568627451 1);--purple-300: color(srgb .792156862745098 .7254901960784313 .9568627450980393);--purple-400: color(srgb .7058823529411765 .615686274509804 .9450980392156862);--purple-500: color(srgb .6078431372549019 .5019607843137255 .9294117647058824);--purple-600: color(srgb .4666666666666667 .3607843137254902 .9058823529411765);--purple-700: color(srgb .3803921568627451 .2901960784313726 .792156862745098);--purple-800: color(srgb .2196078431372549 .16470588235294117 .6431372549019608);--purple-900: color(srgb .1607843137254902 .12941176470588237 .25882352941176473);--red-000: color(srgb .984313725490196 .9333333333333333 .9294117647058824);--red-100: color(srgb .984313725490196 .8274509803921568 .8156862745098039);--red-200: color(srgb 1 .7411764705882353 .7294117647058823);--red-300: color(srgb 1 .6784313725490196 .6627450980392157);--red-400: color(srgb .996078431372549 .5137254901960784 .5098039215686274);--red-500: color(srgb .996078431372549 .3058823529411765 .3607843137254902);--red-600: color(srgb .8392156862745098 .15294117647058825 .25098039215686274);--red-700: color(srgb .6862745098039216 .1450980392156863 .21176470588235294);--red-800: color(srgb .5019607843137255 .0392156862745098 .12549019607843137);--red-900: color(srgb .23921568627450981 .10980392156862745 .10588235294117647);--shadow-deep: 0 16px 24px 0 color(srgb 0 0 0 / .07), 0 6px 30px 0 color(srgb 0 0 0 / .06), 0 8px 10px 0 color(srgb 0 0 0 / .1);--shadow-heavy: -10px 10px 80px 0 color(srgb 0 0 0 / .1);--shadow-hover: 0 4px 12px 0 color(srgb 0 0 0 / .25);--shadow-light: 0 2px 4px 0 color(srgb .2 .21568627450980393 .23137254901960785 / .08), 0 1px 10px 0 color(srgb .2 .21568627450980393 .23137254901960785 / .06);--space-2xl: 4rem;--space-2xs: .5rem;--space-3xl: 6rem;--space-3xs: .25rem;--space-4xl: 10rem;--space-l: 2rem;--space-m: 1.5rem;--space-s: 1rem;--space-xl: 3rem;--space-xs: .75rem;--teal-000: color(srgb .8705882352941177 1 .996078431372549);--teal-100: color(srgb .5568627450980392 .984313725490196 .9686274509803922);--teal-200: color(srgb .19607843137254902 .9019607843137255 .8862745098039215);--teal-300: color(srgb .0784313725490196 .8470588235294118 .8313725490196079);--teal-400: color(srgb .0196078431372549 .7411764705882353 .7294117647058823);--teal-500: color(srgb .01568627450980392 .6352941176470588 .6235294117647059);--teal-600: color(srgb .00784313725490196 .5019607843137255 .49019607843137253);--teal-700: color(srgb .00392156862745098 .4117647058823529 .40784313725490196);--teal-800: color(srgb .00392156862745098 .2823529411764706 .2784313725490196);--teal-900: color(srgb .047058823529411764 .16470588235294117 .16470588235294117);--text-2xl: 1.74rem;--text-3xl: 2.3rem;--text-4xl: 3.04rem;--text-5xl: 4.01rem;--text-base: 1rem;--text-lg: 1.125rem;--text-sm: .875rem;--text-xl: 1.32rem;--text-xs: .8125rem}@media (prefers-color-scheme: light){:root{--color-bg-1: var(--neutral-000);--color-bg-2: var(--neutral-100);--color-bg-3: var(--neutral-200);--color-brand: var(--blue-700);--color-disabled-bg: var(--neutral-200);--color-disabled-border: var(--neutral-400);--color-disabled-text: var(--neutral-400);--color-invalid-bg: var(--red-100);--color-invalid-border: var(--red-600);--color-invalid-text: var(--red-600);--color-link: var(--neutral-800);--color-success-bg: var(--green-100);--color-success-border: var(--green-300);--color-success-text: var(--green-800);--color-text-1: var(--neutral-800);--color-text-2: var(--neutral-600);--color-text-3: var(--neutral-400);--color-text-accent: var(--teal-000);--color-warning-bg: var(--gold-100);--color-warning-border: var(--gold-300);--color-warning-text: var(--gold-800);--neutral-000: color(srgb 1 1 1);--neutral-100: color(srgb .9647058823529412 .9647058823529412 .9686274509803922);--neutral-200: color(srgb .9137254901960784 .9215686274509803 .9294117647058824);--neutral-300: color(srgb .8196078431372549 .8352941176470589 .8549019607843137);--neutral-400: color(srgb .615686274509804 .6549019607843137 .6980392156862745);--neutral-500: color(srgb .4666666666666667 .5019607843137255 .5372549019607843);--neutral-600: color(srgb .32941176470588235 .35294117647058826 .3803921568627451);--neutral-700: color(srgb .20784313725490197 .22745098039215686 .24313725490196078);--neutral-800: color(srgb .09411764705882353 .10196078431372549 .10980392156862745)}}[data-mode=light]{--color-bg-1: var(--neutral-000);--color-bg-2: var(--neutral-100);--color-bg-3: var(--neutral-200);--color-brand: var(--blue-700);--color-disabled-bg: var(--neutral-200);--color-disabled-border: var(--neutral-400);--color-disabled-text: var(--neutral-400);--color-invalid-bg: var(--red-100);--color-invalid-border: var(--red-600);--color-invalid-text: var(--red-600);--color-link: var(--neutral-800);--color-success-bg: var(--green-100);--color-success-border: var(--green-300);--color-success-text: var(--green-800);--color-text-1: var(--neutral-800);--color-text-2: var(--neutral-600);--color-text-3: var(--neutral-400);--color-text-accent: var(--teal-000);--color-warning-bg: var(--gold-100);--color-warning-border: var(--gold-300);--color-warning-text: var(--gold-800);--neutral-000: color(srgb 1 1 1);--neutral-100: color(srgb .9647058823529412 .9647058823529412 .9686274509803922);--neutral-200: color(srgb .9137254901960784 .9215686274509803 .9294117647058824);--neutral-300: color(srgb .8196078431372549 .8352941176470589 .8549019607843137);--neutral-400: color(srgb .615686274509804 .6549019607843137 .6980392156862745);--neutral-500: color(srgb .4666666666666667 .5019607843137255 .5372549019607843);--neutral-600: color(srgb .32941176470588235 .35294117647058826 .3803921568627451);--neutral-700: color(srgb .20784313725490197 .22745098039215686 .24313725490196078);--neutral-800: color(srgb .09411764705882353 .10196078431372549 .10980392156862745)}@media (prefers-color-scheme: dark){:root{--color-bg-1: var(--neutral-800);--color-bg-2: var(--neutral-700);--color-bg-3: var(--neutral-600);--color-brand: var(--teal-200);--color-disabled-bg: var(--neutral-600);--color-disabled-border: var(--neutral-400);--color-disabled-text: var(--neutral-400);--color-invalid-bg: var(--red-200);--color-invalid-border: var(--red-700);--color-invalid-text: var(--red-700);--color-link: var(--neutral-100);--color-success-bg: var(--green-200);--color-success-border: var(--green-400);--color-success-text: var(--green-900);--color-text-1: var(--neutral-100);--color-text-2: var(--neutral-300);--color-text-3: var(--neutral-500);--color-text-accent: var(--teal-600);--color-warning-bg: var(--gold-200);--color-warning-border: var(--gold-400);--color-warning-text: var(--gold-900);--neutral-100: color(srgb .9019607843137255 .9254901960784314 .9490196078431372);--neutral-200: color(srgb .6705882352941176 .7098039215686275 .7490196078431373);--neutral-300: color(srgb .49411764705882355 .5294117647058824 .5725490196078431);--neutral-400: color(srgb .30196078431372547 .33725490196078434 .37254901960784315);--neutral-500: color(srgb .23137254901960785 .2627450980392157 .2980392156862745);--neutral-600: color(srgb .15294117647058825 .1843137254901961 .2196078431372549);--neutral-700: color(srgb .11764705882352941 .1411764705882353 .17254901960784313);--neutral-800: color(srgb .07058823529411765 .09411764705882353 .12156862745098039);--neutral-900: color(srgb .023529411764705882 .043137254901960784 .06274509803921569)}}[data-mode=dark]{--color-bg-1: var(--neutral-800);--color-bg-2: var(--neutral-700);--color-bg-3: var(--neutral-600);--color-brand: var(--teal-200);--color-disabled-bg: var(--neutral-600);--color-disabled-border: var(--neutral-400);--color-disabled-text: var(--neutral-400);--color-invalid-bg: var(--red-200);--color-invalid-border: var(--red-700);--color-invalid-text: var(--red-700);--color-link: var(--neutral-100);--color-success-bg: var(--green-200);--color-success-border: var(--green-400);--color-success-text: var(--green-900);--color-text-1: var(--neutral-100);--color-text-2: var(--neutral-300);--color-text-3: var(--neutral-500);--color-text-accent: var(--teal-600);--color-warning-bg: var(--gold-200);--color-warning-border: var(--gold-400);--color-warning-text: var(--gold-900);--neutral-100: color(srgb .9019607843137255 .9254901960784314 .9490196078431372);--neutral-200: color(srgb .6705882352941176 .7098039215686275 .7490196078431373);--neutral-300: color(srgb .49411764705882355 .5294117647058824 .5725490196078431);--neutral-400: color(srgb .30196078431372547 .33725490196078434 .37254901960784315);--neutral-500: color(srgb .23137254901960785 .2627450980392157 .2980392156862745);--neutral-600: color(srgb .15294117647058825 .1843137254901961 .2196078431372549);--neutral-700: color(srgb .11764705882352941 .1411764705882353 .17254901960784313);--neutral-800: color(srgb .07058823529411765 .09411764705882353 .12156862745098039);--neutral-900: color(srgb .023529411764705882 .043137254901960784 .06274509803921569)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.search-modal{--ntl-search-padding-inline: .5em;--ntl-search-color-text: var(--color-text-2);--ntl-search-color-bg: var(--color-bg-1);--ntl-search-color-border: var(--color-bg-3);--ntl-search-border-radius: 8px;--ntl-search-max-w: 600px;--ntl-search-text-highlight: var(--color-text-accent);--ntl-search-footer-key-color-text: var(--color-text-2)}.search-container{--mark-bg: var(--ntl-search-text-highlight);display:grid;width:min(var(--ntl-search-max-w),100%);min-height:470px;background-color:var(--ntl-search-color-bg);border-radius:var(--ntl-search-border-radius);overflow:hidden}.search-modal{padding:0;border:none;border-radius:var(--ntl-search-border-radius);width:min(var(--ntl-search-max-w),100%);margin-inline:auto}.search{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;background:var(--ntl-search-color-bg);border-bottom:1px solid var(--ntl-search-color-border)}.search>*{display:inline-block}.search-trigger{width:var(--ntl-search-icon-size, 1rem);height:auto;border:none;background:none;padding:0;cursor:pointer;padding-inline:var(--space-2xs);color:var(--color-text-1);box-sizing:content-box;display:block}.search-input-wrapper{all:unset;display:flex;width:100%}.search-input{display:inline-flex;box-sizing:border-box;background:var(--ntl-search-color-bg);inline-size:100%;padding-block:.75rem;padding-inline:var(--ntl-search-padding-inline);flex:1;border:none;outline:none;font-size:1rem}.search-input::placeholder{color:var(--ntl-search-color-text)}.search-label{display:flex;padding-inline:var(--ntl-search-padding-inline)}.search-label>*{display:inline-block;margin:0}.search-icon{display:flex;width:1em;height:auto;color:#d3d3d3}.icon{display:flex;width:1em;height:auto;height:1em}.icon [data-icon=caretRight]{width:10px;color:var(--neutral-300)}.search-term{font-weight:var(--font-medium);font-size:1.1em}.search-results-heading{padding-inline:1rem;margin-block:var(--space-xs);font-size:var(--step--2);font-weight:var(--font-regular);color:var(--color-text-3)}.search-window{height:400px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;margin-block:0;background:var(--ntl-search-color-bg)}.results-list,ul[role=list]{list-style:none;padding:0}.results-list-item{border-bottom:1px solid var(--color-bg-3)}.results-list-item:first-of-type{border-top:1px solid var(--color-bg-3)}.result-link{all:unset;display:flex;flex-wrap:wrap;row-gap:var(--space-3xs);padding:var(--ntl-result-padding-block, 1em) var(--ntl-result-padding-inline, 1rem);font-size:var(--step--1);font-weight:var(--font-regular);text-decoration:none;cursor:pointer}.result-link:is(:hover,:focus-within){background:var(--neutral-100)}.result-header{display:flex;justify-content:space-between;width:100%;align-items:center}.result-title{display:flex;align-items:center;gap:var(--space-s);font-weight:var(--font-semibold);color:var(--color-text-2)}.result-excerpt{color:var(--color-text-3);line-height:1.3;font-size:.9em;padding-inline-start:var(--space-l)}.search-footer{border-top:1px solid var(--ntl-search-color-border);padding:var(--space-2xs) var(--space-s);background:var(--color-bg-2);display:flex;gap:var(--space-m)}.search-footer-tip{--ntl-key-text-color: var(--ntl-search-footer-key-color-text);color:var(--ntl-search-footer-key-color-text);display:flex;gap:var(--space-2xs);align-items:center;font-size:var(--step--1)}.search-modal{transition:display .2s allow-discrete,overlay .2s allow-discrete;animation:closeSearch .2s forwards}.search-modal[open]{animation:openSearch .2s forwards}@keyframes openSearch{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes closeSearch{0%{opacity:1;transform:translateY(0) scale(1)}50%{opacity:.3}to{opacity:0;transform:translateY(20px) scale(.9)}}.search-modal::backdrop{animation:closeSearchBackdrop .2s forwards}.search-modal[open]::backdrop{animation:openSearchBackdrop .2s forwards}@keyframes openSearchBackdrop{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}@keyframes closeSearchBackdrop{0%{opacity:1;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}50%{opacity:.3}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}

package/dist/components/preact/KeyboardKey/index.d.ts

@@ -1,6 +0,0 @@
-import { h } from 'preact';
-interface Props {
-    keyNames: string[];
-}
-declare function KeyboardKey(props: Props): h.JSX.Element;
-export default KeyboardKey;