@sveltia/ui 0.6.3 → 0.6.4

package/package/components/button/button.svelte.d.ts

@@ -13,9 +13,9 @@ export default class Button extends SvelteComponent<{
     type?: "reset" | "submit" | "button";
     disabled?: boolean;
     size?: "small" | "medium" | "large";
+    hidden?: boolean;
     element?: HTMLButtonElement;
     role?: string;
-    hidden?: boolean;
     pressed?: boolean | "true" | "false" | "mixed";
     popupPosition?: PopupPosition;
     keyShortcuts?: string;
@@ -84,9 +84,9 @@ declare const __propDef: {
         type?: ('button' | 'submit' | 'reset');
         disabled?: boolean;
         size?: ('small' | 'medium' | 'large');
+        hidden?: boolean;
         element?: HTMLButtonElement | null;
         role?: string;
-        hidden?: boolean;
         pressed?: (boolean | 'false' | 'mixed' | 'true' | undefined);
         popupPosition?: PopupPosition;
         keyShortcuts?: string;

package/package/components/button/select-button-group.svelte

@@ -57,7 +57,7 @@
 }
 .select-button-group :global(button) {
   border-radius: 0;
-  color: var(--sui-secondary-foreground-color);
+  color: var(--sui-primary-foreground-color);
 }
 .select-button-group :global(button):first-child {
   border-radius: 4px 0 0 4px;

package/package/components/util/app-shell.svelte

@@ -7,6 +7,17 @@
 <script>
   import { onMount } from 'svelte';
 
+  const stylesheets = [
+    // https://fonts.google.com/share?selection.family=Merriweather%20Sans:ital,wght@0,300;0,600;1,300%7CNoto%20Sans%20Mono
+    'https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap',
+    // https://fonts.google.com/icons?icon.set=Material+Symbols
+    // Use `font-display: block;` @see https://stackoverflow.com/q/41710834
+    'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block',
+  ];
+
+  /** @type {HTMLElement} */
+  let fontLoader;
+
   onMount(() => {
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const { dataset } = document.documentElement;
@@ -28,9 +39,29 @@
     mediaQuery.onchange = () => {
       applyTheme();
     };
+
+    window.setTimeout(() => {
+      fontLoader.remove();
+    }, 1000);
   });
 </script>
 
+<svelte:head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="google" content="notranslate" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+  {#each stylesheets as href}
+    <link rel="preload" {href} as="style" />
+    <link rel="stylesheet" {href} />
+  {/each}
+</svelte:head>
+
+<!-- Preload fonts, including the icons -->
+<div class="font-loader" aria-hidden="true" bind:this={fontLoader}>
+  Sveltia UI <span class="material-symbols-outlined">favorite</span>
+</div>
+
 <div
   class="sui app-shell"
   role="none"
@@ -163,7 +194,7 @@
   );
   --sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
-  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-3-hsl));
+  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-4-hsl));
   --sui-error-border-color: hsl(
     var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
       var(--sui-alert-border-color-lightness)
@@ -255,6 +286,7 @@
   outline-color: transparent;
   border-width: 0;
   border-style: solid;
+  vertical-align: top;
 }
 
 :global(:focus) {
@@ -285,12 +317,6 @@
   text-decoration: none;
 }
 
-:global(img),
-:global(svg),
-:global(iframe) {
-  vertical-align: top;
-}
-
 :global(p),
 :global(li) {
   line-height: var(--sui-line-height-comfortable);
@@ -329,6 +355,11 @@
   background: transparent;
 }
 
+:global(.font-loader) {
+  position: absolute;
+  left: -99999px;
+}
+
 :global(.app-shell) {
   position: fixed;
   inset: 0;

package/package/components/util/popup.svelte

@@ -127,6 +127,7 @@
     style:z-index={$style.zIndex}
     style:min-width={$style.width}
     style:max-height={$style.height}
+    style:visibility={$style.inset ? undefined : 'hidden'}
   >
     {#if showContent}
       <slot />

package/package/styles/core.scss

@@ -24,6 +24,7 @@
   outline-color: transparent;
   border-width: 0;
   border-style: solid;
+  vertical-align: top;
 }
 
 :focus {
@@ -54,12 +55,6 @@ a {
   text-decoration: none;
 }
 
-img,
-svg,
-iframe {
-  vertical-align: top;
-}
-
 p,
 li {
   line-height: var(--sui-line-height-comfortable);

package/package/styles/variables.scss

@@ -117,7 +117,7 @@
   // Borders
   --sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
-  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-3-hsl));
+  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-4-hsl));
   --sui-error-border-color: hsl(
     var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
       var(--sui-alert-border-color-lightness)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "license": "MIT",
   "type": "module",
   "publishConfig": {