@likable-hair/svelte 2.0.9 → 3.0.1

package/dist/components/composed/search/GlobalSearchTextField.css

@@ -0,0 +1,11 @@
+:root {
+  --global-search-text-field-default-ring-color: rgb(var(--global-color-contrast-100)); /* rgba(24, 24, 27, .1) */
+  --global-search-text-field-default-hover-ring-color: rgb(var(--global-color-contrast-300)); /* rgba(24, 24, 27, .2) */
+  --global-search-text-field-default-color: rgb(var(--global-color-contrast-600)); /* rgb(113 113 122) */
+  --global-search-text-field-default-width: 100%;
+  --global-search-text-field-default-max-width: 28rem;
+  --global-search-text-field-default-height: 2rem;
+  --global-search-text-field-default-background-color: rgb(var(--global-color-background-100));
+  --global-search-text-field-default-padding: 0rem 0.75rem 0rem 0.5rem;
+  --global-search-text-field-default-font-size: .875rem;
+}

package/dist/components/composed/search/GlobalSearchTextField.svelte

@@ -1,9 +1,13 @@
-<script>import Dialog from "../../simple/dialogs/Dialog.svelte";
+<script>import "$lib/css/main.css";
+import "./GlobalSearchTextField.css";
+import Dialog from "../../simple/dialogs/Dialog.svelte";
 import { createEventDispatcher, onMount } from "svelte";
 import SearchBar from "./SearchBar.svelte";
 import Keyboarder, {} from "../../../utils/keyboarder";
 import SearchResults, {} from "./SearchResults.svelte";
-export let color = "rgb(113 113 122)", searchButtonRingColor = "rgba(24,24,27,.1)", searchButtonHoverRingColor = "rgba(24,24,27,.2)", searchButtonWidth = "100%", searchButtonMaxWidth = "28rem", searchButtonHeight = "2rem", searchButtonBackgroundColor = "white", searchButtonPadding = "0rem 0.75rem 0rem 0.5rem", searchButtonFontSize = ".875rem", searchButtonText = "Search", searchDialogOpened = false, transitionDuration = ".8s", searcher = () => Promise.resolve([]);
+let clazz = {};
+export { clazz as class };
+export let searchButtonText = "Search", searchDialogOpened = false, transitionDuration = ".8s", searcher = () => Promise.resolve([]);
 let searchBarInput, searchText = void 0, searchResults = void 0, searchLoading = false;
 let dispatch = createEventDispatcher();
 onMount(() => {
@@ -38,24 +42,14 @@ async function search() {
 }
 </script>
 
-<div
-  style:--global-search-text-field-ring-color={searchButtonRingColor}
-  style:--global-search-text-field-hover-ring-color={searchButtonHoverRingColor}
-  style:--global-search-text-field-color={color}
-  style:--global-search-text-field-width={searchButtonWidth}
-  style:--global-search-text-field-max-width={searchButtonMaxWidth}
-  style:--global-search-text-field-height={searchButtonHeight}
-  style:--global-search-text-field-background-color={searchButtonBackgroundColor}
-  style:--global-search-text-field-padding={searchButtonPadding}
-  style:--global-search-text-field-font-size={searchButtonFontSize}
->
+<div class={clazz.container || ''}>
   <slot 
     name="search-button"
     {toggleSearchDialog}
   >
     <button 
       on:click={toggleSearchDialog}
-      class="search-like-button"
+      class="search-like-button {clazz.button || ''}"
     >
       <slot name="search-button-icon">
         <svg
@@ -74,15 +68,15 @@ async function search() {
         {searchButtonText}
       </slot>
       <slot name="search-button-shortcut">
-        <kbd class="shortcut"><kbd class="shortcut">⌘</kbd><kbd class="shortcut">K</kbd></kbd>
+        <kbd class="shortcut {clazz.shortcut || ''}"><kbd class="shortcut">⌘</kbd><kbd class="shortcut">K</kbd></kbd>
       </slot>
     </button>
   </slot>
   <Dialog
     bind:open={searchDialogOpened}
     transition="scale"
-    overlayBackdropFilter="blur(2px)"
-    transitionDuration={transitionDuration}
+    _overlayBackdropFilter="blur(2px)"
+    _transitionDuration={transitionDuration}
   >
     <div
       style:max-width="90vw"
@@ -119,8 +113,8 @@ async function search() {
             searchResults
           >
             <SearchResults
-              margin="-.5rem 0 0 0"
-              borderRadius="0 0 .5rem .5rem"
+              --search-results-margin="-.5rem 0 0 0"
+              --search-results-border-radius="0 0 .5rem .5rem"
               loading={searchLoading}
               results={searchResults}
               activeKeyboard
@@ -135,20 +129,43 @@ async function search() {
 
 <style>
   .search-like-button {
-    --global-search-text-field-ring-real-color: var(--global-search-text-field-ring-color);
-    box-shadow: inset 0 0 0 1px var(--global-search-text-field-ring-color);
-    color: var(--global-search-text-field-color);
+    box-shadow: inset 0 0 0 1px var(
+      --global-search-text-field-ring-color,
+      var(--global-search-text-field-default-ring-color)
+    );
+    color: var(
+      --global-search-text-field-color,
+      var(--global-search-text-field-default-color)
+    );
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    width: var(--global-search-text-field-width);
-    max-width: var(--global-search-text-field-max-width);
-    height: var(--global-search-text-field-height);
-    font-size: var(--global-search-text-field-font-size);
+    width: var(
+      --global-search-text-field-width,
+      var(--global-search-text-field-default-width)
+    );
+    max-width: var(
+      --global-search-text-field-max-width,
+      var(--global-search-text-field-default-max-width)
+    );
+    height: var(
+      --global-search-text-field-height,
+      var(--global-search-text-field-default-height)
+    );
+    font-size: var(
+      --global-search-text-field-font-size,
+      var(--global-search-text-field-default-font-size)
+    );
     line-height: 1.5rem;
-    background-color: var(--global-search-text-field-background-color);
+    background-color: var(
+      --global-search-text-field-background-color,
+      var(--global-search-text-field-default-background-color)
+    );
     border-radius: 9999px;
-    padding: var(--global-search-text-field-padding);
+    padding: var(
+      --global-search-text-field-padding,
+      var(--global-search-text-field-default-padding)
+    );
     border: 0 solid #e5e7eb;
     cursor: pointer;
     transition-property: box-shadow;
@@ -157,7 +174,10 @@ async function search() {
   }
 
   .search-like-button:hover {
-    box-shadow: inset 0 0 0 1px var(--global-search-text-field-hover-ring-color);
+    box-shadow: inset 0 0 0 1px var(
+      --global-search-text-field-hover-ring-color,
+      var(--global-search-text-field-default-hover-ring-color)
+    );
   }
 
   .search-icon {
@@ -169,7 +189,10 @@ async function search() {
   .shortcut {
     margin-left: auto;
     font-size: 1rem;
-    color: var(--global-search-text-field-color);
+    color: var(
+      --global-search-text-field-color,
+      var(--global-search-text-field-default-color)
+    );
     text-transform: none;
     font-family: ui-sans-serif,system-ui,-apple-system;
   }

package/dist/components/composed/search/GlobalSearchTextField.svelte.d.ts

@@ -1,16 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
+import '$lib/css/main.css';
+import './GlobalSearchTextField.css';
 import { type Result } from './SearchResults.svelte';
 declare const __propDef: {
     props: {
-        color?: string | undefined;
-        searchButtonRingColor?: string | undefined;
-        searchButtonHoverRingColor?: string | undefined;
-        searchButtonWidth?: string | undefined;
-        searchButtonMaxWidth?: string | undefined;
-        searchButtonHeight?: string | undefined;
-        searchButtonBackgroundColor?: string | undefined;
-        searchButtonPadding?: string | undefined;
-        searchButtonFontSize?: string | undefined;
+        class?: {
+            container?: string | undefined;
+            button?: string | undefined;
+            shortcut?: string | undefined;
+        } | undefined;
         searchButtonText?: string | undefined;
         searchDialogOpened?: boolean | undefined;
         transitionDuration?: string | undefined;

package/dist/components/composed/search/SearchBar.css

@@ -0,0 +1,10 @@
+:root {
+  --search-bar-default-ring-color: rgb(var(--global-color-contrast-100));
+  --search-bar-default-background-color: rgb(var(--global-color-background-100));
+  --search-bar-default-border-radius: 0.5rem;
+  --search-bar-default-height: 3rem;
+  --search-bar-default-padding: 0rem 1rem 0rem 1rem;
+  --search-bar-default-line-height: 1.5rem;
+  --search-bar-default-font-size: .875rem;
+  --search-bar-default-width: 100%;
+}

package/dist/components/composed/search/SearchBar.svelte

@@ -1,24 +1,19 @@
-<script>export let maxWidth = void 0, width = "100%", ringColor = "rgba(24,24,27,.1)", backgroundColor = "rgb(250 250 250/1)", borderRadius = "0.5rem", height = "3rem", padding = "0rem 1rem 0rem 1rem", lineHeight = "1.5rem", fontSize = ".875rem", input = void 0, value = void 0;
+<script>import "$lib/css/main.css";
+import "./SearchBar.css";
+let clazz = {};
+export { clazz as class };
+export let input = void 0, value = void 0;
 </script>
 
 <div
-  style:--search-bar-ring-color={ringColor}
-  style:--search-bar-background-color={backgroundColor}
-  style:--search-bar-border-radius={borderRadius}
-  style:--search-bar-height={height}
-  style:--search-bar-padding={padding}
-  style:--search-bar-line-height={lineHeight}
-  style:--search-bar-font-size={fontSize}
-  style:max-width={maxWidth}
-  style:width={width}
-  class="container"
+  class="container {clazz.container}"
 >
   <slot name="icon">
     <svg
       viewBox="0 0 20 20"
       fill="none"
       aria-hidden="true"
-      class="search-icon"
+      class="search-icon {clazz.icon}"
       ><path
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -39,7 +34,7 @@
       placeholder="Find something..." 
       maxlength="512" 
       tabindex="0"
-      class="input" 
+      class="input {clazz.input}"
       bind:this={input}
       bind:value={value}
       on:input
@@ -51,20 +46,49 @@
 
 <style>
   .container {
-    box-shadow: inset 0 0 0 1px var(--search-bar-ring-color);
-    background-color: var(--search-bar-background-color);
-    border-radius: var(--search-bar-border-radius);
-    height: var(--search-bar-height);
+    box-shadow: inset 0 0 0 1px var(
+      --search-bar-ring-color,
+      var(--search-bar-default-ring-color)
+    );
+    background-color: var(
+      --search-bar-background-color,
+      var(--search-bar-default-background-color)
+    );
+    border-radius: var(
+      --search-bar-border-radius,
+      var(--search-bar-default-border-radius)
+    );
+    height: var(
+      --search-bar-height,
+      var(--search-bar-default-height)
+    );
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding: var(--search-bar-padding);
+    padding: var(
+      --search-bar-padding,
+      var(--search-bar-default-padding)
+    );
     box-sizing: border-box;
+    max-width: var(
+      --search-bar-max-width,
+      var(--search-bar-default-max-width)
+    );
+    width: var(
+      --search-bar-width,
+      var(--search-bar-default-width)
+    );
   }
 
   .input {
-    font-size: var(--search-bar-font-size);
-    line-height: var(--search-bar-line-height);
+    font-size: var(
+      --search-bar-font-size,
+      var(--search-bar-default-font-size)
+    );
+    line-height: var(
+      --search-bar-line-height,
+      var(--search-bar-default-line-height)
+    );
     box-sizing: border-box;
     border: 0 solid #e5e7eb;
     outline: 2px solid transparent;

package/dist/components/composed/search/SearchBar.svelte.d.ts

@@ -1,15 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import '$lib/css/main.css';
+import './SearchBar.css';
 declare const __propDef: {
     props: {
-        maxWidth?: string | undefined;
-        width?: string | undefined;
-        ringColor?: string | undefined;
-        backgroundColor?: string | undefined;
-        borderRadius?: string | undefined;
-        height?: string | undefined;
-        padding?: string | undefined;
-        lineHeight?: string | undefined;
-        fontSize?: string | undefined;
+        class?: {
+            container?: string | undefined;
+            icon?: string | undefined;
+            input?: string | undefined;
+        } | undefined;
         input?: HTMLElement | undefined;
         value?: string | undefined;
     };

package/dist/components/composed/search/SearchResults.css

@@ -0,0 +1,5 @@
+:root {
+  --search-results-default-width: 100%;
+  --search-results-default-background-color: rgb(var(--global-color-background-100));
+  --search-results-default-border-color: rgb(var(--global-color-background-300));
+}

package/dist/components/composed/search/SearchResults.svelte

@@ -1,36 +1,32 @@
 <script context="module"></script>
 
-<script>import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
-export let maxWidth = void 0, width = "100%", height = void 0, maxHeight = void 0, margin = void 0, backgroundColor = "rgb(255 255 255/1)", noDataText = "Sorry, nothing found", loadingText = "Searching for references ...", borderColor = "rgb(228 228 231/1)", borderRadius = void 0, results = [], loading = false, footer = true, activeKeyboard = false;
+<script>import "$lib/css/main.css";
+import "./SearchResults.css";
+import SelectableVerticalList from "../../simple/lists/SelectableVerticalList.svelte";
+let clazz = {};
+export { clazz as class };
+export let noDataText = "Sorry, nothing found", loadingText = "Searching for references ...", results = [], loading = false, footer = true, activeKeyboard = false;
 </script>
 
 <div 
-  style:--search-results-width={width}
-  style:--search-results-max-width={maxWidth}
-  style:--search-results-height={height}
-  style:--search-results-max-height={maxHeight}
-  style:--search-results-margin={margin}
-  style:--search-results-background-color={backgroundColor}
-  style:--search-results-border-color={borderColor}
-  style:--search-results-border-radius={borderRadius}
-  class="container"
+  class="container {clazz.container || ''}"
 >
   {#if loading}
-    <div class="loading-container">
+    <div class="loading-container {clazz.loading || ''}">
       <slot name="loading">
         <span style:font-size=".875rem">{loadingText}</span>
       </slot>
     </div>
   {:else if !results || results.length == 0}
     <div
-      class="no-data-container"
+      class="no-data-container {clazz.noData || ''}"
     >
       <slot name="no-data">
         <span style:font-size=".875rem">{noDataText}</span>
       </slot>
     </div>
   {:else}
-    <div>
+    <div class={clazz.results || ''}>
       <SelectableVerticalList
         elements={results.map((r) => {
           return {
@@ -72,14 +68,38 @@ export let maxWidth = void 0, width = "100%", height = void 0, maxHeight = void
 
 <style>
   .container {
-    width: var(--search-results-width);
-    max-width: var(--search-results-max-width);
-    height: var(--search-results-height);
-    max-height: var(--search-results-max-height);
-    background-color: var(--search-results-background-color);
-    margin: var(--search-results-margin);
-    border-top: 1px solid var(--search-results-border-color);
-    border-radius: var(--search-results-border-radius);
+    width: var(
+      --search-results-width,
+      var(--search-results-default-width)
+    );
+    max-width: var(
+      --search-results-max-width,
+      var(--search-results-default-max-width)
+    );
+    height: var(
+      --search-results-height,
+      var(--search-results-default-height)
+    );
+    max-height: var(
+      --search-results-max-height,
+      var(--search-results-default-max-height)
+    );
+    background-color: var(
+      --search-results-background-color,
+      var(--search-results-default-background-color)
+    );
+    margin: var(
+      --search-results-margin,
+      var(--search-results-default-margin)
+    );
+    border-top: 1px solid var(
+      --search-results-border-color,
+      var(--search-results-default-border-color)
+    );
+    border-radius: var(
+      --search-results-border-radius,
+      var(--search-results-default-border-radius)
+    );
   }
 
   .no-data-container, .loading-container {
@@ -90,7 +110,10 @@ export let maxWidth = void 0, width = "100%", height = void 0, maxHeight = void
   }
 
   .footer {
-    border-top: 1px solid var(--search-results-border-color);
+    border-top: 1px solid var(
+      --search-results-border-color,
+      var(--search-results-default-border-color)
+    );
     display: flex;
     align-items: center;
     justify-content: flex-end;

package/dist/components/composed/search/SearchResults.svelte.d.ts

@@ -6,18 +6,18 @@ export type Result = {
     url?: string;
     data?: Record<string, any>;
 };
+import '$lib/css/main.css';
+import './SearchResults.css';
 declare const __propDef: {
     props: {
-        maxWidth?: string | undefined;
-        width?: string | undefined;
-        height?: string | undefined;
-        maxHeight?: string | undefined;
-        margin?: string | undefined;
-        backgroundColor?: string | undefined;
+        class?: {
+            container?: string | undefined;
+            loading?: string | undefined;
+            noData?: string | undefined;
+            results?: string | undefined;
+        } | undefined;
         noDataText?: string | undefined;
         loadingText?: string | undefined;
-        borderColor?: string | undefined;
-        borderRadius?: string | undefined;
         results?: Result[] | undefined;
         loading?: boolean | undefined;
         footer?: boolean | undefined;

package/dist/components/layouts/CollapsibleSideBarLayout.css

@@ -0,0 +1,5 @@
+:root {
+  --collapsible-side-bar-layout-default-sidebar-width: 16rem;
+  --collapsible-side-bar-layout-default-sidebar-collapsed-width: 3.5rem;
+  --collapsible-side-bar-layout-default-logo-height: 3.8rem;
+}