@sveltia/ui 0.4.0 → 0.6.0

package/package/components/toolbar/toolbar.svelte.d.ts

@@ -6,7 +6,7 @@
  * @see https://w3c.github.io/aria/#toolbar
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
  */
-export default class Toolbar extends SvelteComponentTyped<{
+export default class Toolbar extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     orientation?: "vertical" | "horizontal";
@@ -19,7 +19,7 @@ export default class Toolbar extends SvelteComponentTyped<{
 export type ToolbarProps = typeof __propDef.props;
 export type ToolbarEvents = typeof __propDef.events;
 export type ToolbarSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -52,175 +52,180 @@
 
 <style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
-:global(:root[data-theme=light]) {
-  --foreground-color-1-hsl: var(--base-hue) 5% 0%;
-  --foreground-color-2-hsl: var(--base-hue) 5% 20%;
-  --foreground-color-3-hsl: var(--base-hue) 5% 40%;
-  --foreground-color-4-hsl: var(--base-hue) 5% 60%;
-  --background-color-1-hsl: var(--base-hue) 5% 100%;
-  --background-color-2-hsl: var(--base-hue) 5% 98%;
-  --background-color-3-hsl: var(--base-hue) 5% 94%;
-  --background-color-4-hsl: var(--base-hue) 5% 90%;
-  --background-color-5-hsl: var(--base-hue) 5% 86%;
-  --border-color-1-hsl: var(--base-hue) 5% 78%;
-  --border-color-2-hsl: var(--base-hue) 5% 82%;
-  --shadow-color: var(--base-hue) 10% 0%;
-  --primary-accent-color: hsl(var(--base-hue) 80% 45%);
-  --primary-accent-color-lighter: hsl(var(--base-hue) 80% 40%);
-  --primary-accent-color-darker: hsl(var(--base-hue) 80% 50%);
-  --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%);
-  --danger-color-hue: 0;
-  --warning-color-hue: 40;
-  --success-color-hue: 100;
-  --info-color-hue: 220;
-  --alert-foreground-color-saturation: 88%;
-  --alert-foreground-color-lightness: 28%;
-  --alert-background-color-saturation: 68%;
-  --alert-background-color-lightness: 88%;
-  --alert-border-color-saturation: 48%;
-  --alert-border-color-lightness: 68%;
+:global(:root[data-theme=light]),
+:global(:host[data-theme=light]) {
+  --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 0%;
+  --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 20%;
+  --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 40%;
+  --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 60%;
+  --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
+  --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
+  --sui-background-color-3-hsl: var(--sui-base-hue) 5% 94%;
+  --sui-background-color-4-hsl: var(--sui-base-hue) 5% 90%;
+  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 86%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 78%;
+  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 82%;
+  --sui-shadow-color: var(--sui-base-hue) 10% 0%;
+  --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 45%);
+  --sui-primary-accent-color-lighter: hsl(var(--sui-base-hue) 80% 40%);
+  --sui-primary-accent-color-darker: hsl(var(--sui-base-hue) 80% 50%);
+  --sui-primary-accent-color-foreground: hsl(var(--sui-base-hue) 10% 100%);
+  --sui-error-color-hue: 0;
+  --sui-warning-color-hue: 40;
+  --sui-info-color-hue: 210;
+  --sui-success-color-hue: 100;
+  --sui-alert-foreground-color-saturation: 88%;
+  --sui-alert-foreground-color-lightness: 28%;
+  --sui-alert-background-color-saturation: 68%;
+  --sui-alert-background-color-lightness: 88%;
+  --sui-alert-border-color-saturation: 48%;
+  --sui-alert-border-color-lightness: 68%;
 }
 
-:global(:root[data-theme=dark]) {
-  --foreground-color-1-hsl: var(--base-hue) 10% 100%;
-  --foreground-color-2-hsl: var(--base-hue) 10% 80%;
-  --foreground-color-3-hsl: var(--base-hue) 10% 60%;
-  --foreground-color-4-hsl: var(--base-hue) 10% 40%;
-  --background-color-1-hsl: var(--base-hue) 10% 10%;
-  --background-color-2-hsl: var(--base-hue) 10% 12%;
-  --background-color-3-hsl: var(--base-hue) 10% 16%;
-  --background-color-4-hsl: var(--base-hue) 10% 20%;
-  --background-color-5-hsl: var(--base-hue) 10% 24%;
-  --border-color-1-hsl: var(--base-hue) 10% 32%;
-  --border-color-2-hsl: var(--base-hue) 10% 28%;
-  --shadow-color: var(--base-hue) 10% 0%;
-  --primary-accent-color: hsl(var(--base-hue) 100% 45%);
-  --primary-accent-color-lighter: hsl(var(--base-hue) 100% 55%);
-  --primary-accent-color-darker: hsl(var(--base-hue) 100% 35%);
-  --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%);
-  --danger-color-hue: 0;
-  --warning-color-hue: 40;
-  --success-color-hue: 100;
-  --info-color-hue: 220;
-  --alert-foreground-color-saturation: 48%;
-  --alert-foreground-color-lightness: 68%;
-  --alert-background-color-saturation: 88%;
-  --alert-background-color-lightness: 8%;
-  --alert-border-color-saturation: 38%;
-  --alert-border-color-lightness: 18%;
+:global(:root[data-theme=dark]),
+:global(:host[data-theme=dark]) {
+  --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 100%;
+  --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 80%;
+  --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 60%;
+  --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 40%;
+  --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
+  --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
+  --sui-background-color-3-hsl: var(--sui-base-hue) 10% 16%;
+  --sui-background-color-4-hsl: var(--sui-base-hue) 10% 20%;
+  --sui-background-color-5-hsl: var(--sui-base-hue) 10% 24%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 32%;
+  --sui-border-color-2-hsl: var(--sui-base-hue) 10% 28%;
+  --sui-shadow-color: var(--sui-base-hue) 10% 0%;
+  --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 45%);
+  --sui-primary-accent-color-lighter: hsl(var(--sui-base-hue) 100% 55%);
+  --sui-primary-accent-color-darker: hsl(var(--sui-base-hue) 100% 35%);
+  --sui-primary-accent-color-foreground: hsl(var(--sui-base-hue) 10% 100%);
+  --sui-error-color-hue: 0;
+  --sui-warning-color-hue: 40;
+  --sui-info-color-hue: 210;
+  --sui-success-color-hue: 100;
+  --sui-alert-foreground-color-saturation: 48%;
+  --sui-alert-foreground-color-lightness: 68%;
+  --sui-alert-background-color-saturation: 88%;
+  --sui-alert-background-color-lightness: 8%;
+  --sui-alert-border-color-saturation: 38%;
+  --sui-alert-border-color-lightness: 18%;
 }
 
-:global(:root) {
-  --base-hue: 210;
-  --highlight-foreground-color: hsl(var(--foreground-color-1-hsl));
-  --primary-foreground-color: hsl(var(--foreground-color-2-hsl));
-  --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
-  --tertiary-foreground-color: hsl(var(--foreground-color-3-hsl));
-  --disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
-  --danger-foreground-color: hsl(
-    var(--danger-color-hue) var(--alert-foreground-color-saturation)
-      var(--alert-foreground-color-lightness)
+:global(:root),
+:global(:host) {
+  --sui-base-hue: 210;
+  --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
+  --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
+  --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
+  --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
+  --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
+  --sui-error-foreground-color: hsl(
+    var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
+      var(--sui-alert-foreground-color-lightness)
   );
-  --warning-foreground-color: hsl(
-    var(--warning-color-hue) var(--alert-foreground-color-saturation)
-      var(--alert-foreground-color-lightness)
+  --sui-warning-foreground-color: hsl(
+    var(--sui-warning-color-hue) var(--sui-alert-foreground-color-saturation)
+      var(--sui-alert-foreground-color-lightness)
   );
-  --success-foreground-color: hsl(
-    var(--success-color-hue) var(--alert-foreground-color-saturation)
-      var(--alert-foreground-color-lightness)
+  --sui-info-foreground-color: hsl(
+    var(--sui-info-color-hue) var(--sui-alert-foreground-color-saturation)
+      var(--sui-alert-foreground-color-lightness)
   );
-  --info-foreground-color: hsl(
-    var(--info-color-hue) var(--alert-foreground-color-saturation)
-      var(--alert-foreground-color-lightness)
+  --sui-success-foreground-color: hsl(
+    var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
+      var(--sui-alert-foreground-color-lightness)
   );
-  --highlight-background-color: hsl(var(--background-color-5-hsl));
-  --content-background-color: hsl(var(--background-color-1-hsl));
-  --primary-background-color: hsl(var(--background-color-2-hsl));
-  --primary-background-color-translucent: hsl(var(--background-color-2-hsl) / 80%);
-  --secondary-background-color: hsl(var(--background-color-3-hsl));
-  --secondary-background-color-translucent: hsl(var(--background-color-3-hsl) / 80%);
-  --tertiary-background-color: hsl(var(--background-color-4-hsl));
-  --tertiary-background-color-translucent: hsl(var(--background-color-4-hsl) / 80%);
-  --control-background-color: hsl(var(--background-color-1-hsl));
-  --disabled-background-color: hsl(var(--background-color-4-hsl));
-  --danger-background-color: hsl(
-    var(--danger-color-hue) var(--alert-background-color-saturation)
-      var(--alert-background-color-lightness)
+  --sui-highlight-background-color: hsl(var(--sui-background-color-5-hsl));
+  --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
+  --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
+  --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
+  --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
+  --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
+  --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
+  --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
+  --sui-control-background-color: hsl(var(--sui-background-color-1-hsl));
+  --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
+  --sui-error-background-color: hsl(
+    var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
+      var(--sui-alert-background-color-lightness)
   );
-  --warning-background-color: hsl(
-    var(--warning-color-hue) var(--alert-background-color-saturation)
-      var(--alert-background-color-lightness)
+  --sui-warning-background-color: hsl(
+    var(--sui-warning-color-hue) var(--sui-alert-background-color-saturation)
+      var(--sui-alert-background-color-lightness)
   );
-  --success-background-color: hsl(
-    var(--success-color-hue) var(--alert-background-color-saturation)
-      var(--alert-background-color-lightness)
+  --sui-info-background-color: hsl(
+    var(--sui-info-color-hue) var(--sui-alert-background-color-saturation)
+      var(--sui-alert-background-color-lightness)
   );
-  --info-background-color: hsl(
-    var(--info-color-hue) var(--alert-background-color-saturation)
-      var(--alert-background-color-lightness)
+  --sui-success-background-color: hsl(
+    var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
+      var(--sui-alert-background-color-lightness)
   );
-  --primary-border-color: hsl(var(--border-color-1-hsl));
-  --secondary-border-color: hsl(var(--border-color-2-hsl));
-  --control-border-color: hsl(var(--border-color-2-hsl));
-  --checkbox-border-color: hsl(var(--foreground-color-3-hsl));
-  --danger-border-color: hsl(
-    var(--danger-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  --sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
+  --sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-3-hsl));
+  --sui-error-border-color: hsl(
+    var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
+      var(--sui-alert-border-color-lightness)
   );
-  --warning-border-color: hsl(
-    var(--warning-color-hue) var(--alert-border-color-saturation)
-      var(--alert-border-color-lightness)
+  --sui-warning-border-color: hsl(
+    var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
+      var(--sui-alert-border-color-lightness)
   );
-  --success-border-color: hsl(
-    var(--success-color-hue) var(--alert-border-color-saturation)
-      var(--alert-border-color-lightness)
+  --sui-info-border-color: hsl(
+    var(--sui-info-color-hue) var(--sui-alert-border-color-saturation)
+      var(--sui-alert-border-color-lightness)
   );
-  --info-border-color: hsl(
-    var(--info-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  --sui-success-border-color: hsl(
+    var(--sui-success-color-hue) var(--sui-alert-border-color-saturation)
+      var(--sui-alert-border-color-lightness)
   );
-  --popup-shadow-color: hsl(var(--shadow-color) / 40%);
-  --popup-backdrop-color: hsl(var(--shadow-color) / 40%);
-  --font-family--default: "Merriweather Sans", sans-serif;
-  --font-size--xxx-large: 24px;
-  --font-size--xx-large: 20px;
-  --font-size--x-large: 18px;
-  --font-size--large: 16px;
-  --font-size--default: 14px;
-  --font-size--small: 12px;
-  --font-size--x-small: 10px;
-  --font-weight--normal: 300;
-  --font-weight--bold: 600;
-  --font-family--monospace: "Noto Sans Mono", monospace;
-  --font-size--monospace: 13px;
-  --control--small--border-width: 1px;
-  --control--small--border-radius: 2px;
-  --control--small--height: 24px;
-  --control--medium--border-width: 1px;
-  --control--medium--border-radius: 4px;
-  --control--medium--height: 32px;
-  --control--large--border-width: 1px;
-  --control--large--border-radius: 8px;
-  --control--large--height: 40px;
-  --button--small--border-radius: var(--control--small--border-radius);
-  --button--small--height: var(--control--small--height);
-  --button--medium--border-radius: var(--control--medium--border-radius);
-  --button--medium--height: var(--control--medium--height);
-  --button--large--border-radius: var(--control--large--border-radius);
-  --button--large--height: var(--control--large--height);
-  --option--small--border-radius: var(--control--small--border-radius);
-  --option--small--height: var(--control--small--height);
-  --option--medium--border-radius: var(--control--medium--border-radius);
-  --option--medium--height: var(--control--medium--height);
-  --option--large--border-radius: var(--control--large--border-radius);
-  --option--large--height: var(--control--large--height);
-  --input--small--border-radius: var(--control--small--border-radius);
-  --input--small--height: var(--control--small--height);
-  --input--medium--border-radius: var(--control--medium--border-radius);
-  --input--medium--height: var(--control--medium--height);
-  --input--large--border-radius: var(--control--large--border-radius);
-  --input--large--height: var(--control--large--height);
-  --tab--small--height: var(--control--small--height);
-  --tab--medium--height: var(--control--medium--height);
-  --tab--large--height: var(--control--large--height);
+  --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
+  --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
+  --sui-font-family-default: "Merriweather Sans", sans-serif;
+  --sui-font-size-xxx-large: 24px;
+  --sui-font-size-xx-large: 20px;
+  --sui-font-size-x-large: 18px;
+  --sui-font-size-large: 16px;
+  --sui-font-size-default: 14px;
+  --sui-font-size-small: 12px;
+  --sui-font-size-x-small: 10px;
+  --sui-font-weight-normal: 300;
+  --sui-font-weight-bold: 600;
+  --sui-font-family-monospace: "Noto Sans Mono", monospace;
+  --sui-font-size-monospace: 13px;
+  --sui-control-small-border-width: 1px;
+  --sui-control-small-border-radius: 2px;
+  --sui-control-small-height: 24px;
+  --sui-control-medium-border-width: 1px;
+  --sui-control-medium-border-radius: 4px;
+  --sui-control-medium-height: 32px;
+  --sui-control-large-border-width: 1px;
+  --sui-control-large-border-radius: 8px;
+  --sui-control-large-height: 40px;
+  --sui-button-small-border-radius: var(--sui-control-small-border-radius);
+  --sui-button-small-height: var(--sui-control-small-height);
+  --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
+  --sui-button-medium-height: var(--sui-control-medium-height);
+  --sui-button-large-border-radius: var(--sui-control-large-border-radius);
+  --sui-button-large-height: var(--sui-control-large-height);
+  --sui-option-small-border-radius: var(--sui-control-small-border-radius);
+  --sui-option-small-height: var(--sui-control-small-height);
+  --sui-option-medium-border-radius: var(--sui-control-medium-border-radius);
+  --sui-option-medium-height: var(--sui-control-medium-height);
+  --sui-option-large-border-radius: var(--sui-control-large-border-radius);
+  --sui-option-large-height: var(--sui-control-large-height);
+  --sui-input-small-border-radius: var(--sui-control-small-border-radius);
+  --sui-input-small-height: var(--sui-control-small-height);
+  --sui-input-medium-border-radius: var(--sui-control-medium-border-radius);
+  --sui-input-medium-height: var(--sui-control-medium-height);
+  --sui-input-large-border-radius: var(--sui-control-large-border-radius);
+  --sui-input-large-height: var(--sui-control-large-height);
+  --sui-tab-small-height: var(--sui-control-small-height);
+  --sui-tab-medium-height: var(--sui-control-medium-height);
+  --sui-tab-large-height: var(--sui-control-large-height);
 }
 
 :global(.material-symbols-outlined) {
@@ -244,7 +249,7 @@
 }
 
 :global(:focus-visible) {
-  outline-color: var(--primary-accent-color-lighter);
+  outline-color: var(--sui-primary-accent-color-lighter);
 }
 
 :global(h1),
@@ -254,15 +259,15 @@
 :global(h5),
 :global(h6) {
   margin: 0;
-  font-weight: var(--font-weight--bold);
+  font-weight: var(--sui-font-weight-bold);
 }
 
 :global(strong) {
-  font-weight: var(--font-weight--bold);
+  font-weight: var(--sui-font-weight-bold);
 }
 
 :global(a) {
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
   text-decoration: none;
 }
 
@@ -289,7 +294,7 @@
 
 :global(code),
 :global(pre) {
-  font-family: var(--font-family--monospace);
+  font-family: var(--sui-font-family-monospace);
 }
 
 :global(pre) {
@@ -326,11 +331,11 @@
   overflow: hidden;
   width: 100%;
   height: 100%;
-  color: var(--primary-foreground-color);
-  background-color: var(--primary-background-color);
-  font-family: var(--font-family--default);
-  font-size: var(--font-size--default);
-  font-weight: var(--font-weight--normal);
+  color: var(--sui-primary-foreground-color);
+  background-color: var(--sui-primary-background-color);
+  font-family: var(--sui-font-family-default);
+  font-size: var(--sui-font-size-default);
+  font-weight: var(--sui-font-weight-normal);
   -webkit-user-select: none;
   user-select: none;
   touch-action: none;

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

@@ -6,8 +6,8 @@
  * dark/light mode switching. This component has to be placed directly under `<body>` (or
  * `<div style="display:contents">` in a SvelteKit app).
  */
-export default class AppShell extends SvelteComponentTyped<{
-    [x: string]: never;
+export default class AppShell extends SvelteComponent<{
+    [x: string]: any;
 }, {
     dragover: DragEvent;
     drop: DragEvent;
@@ -20,10 +20,10 @@ export default class AppShell extends SvelteComponentTyped<{
 export type AppShellProps = typeof __propDef.props;
 export type AppShellEvents = typeof __propDef.events;
 export type AppShellSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         dragover: DragEvent;

package/package/components/util/group.svelte.d.ts

@@ -5,7 +5,7 @@
  * A generic group layout.
  * @see https://w3c.github.io/aria/#group
  */
-export default class Group extends SvelteComponentTyped<{
+export default class Group extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     ariaLabel?: string;
@@ -18,7 +18,7 @@ export default class Group extends SvelteComponentTyped<{
 export type GroupProps = typeof __propDef.props;
 export type GroupEvents = typeof __propDef.events;
 export type GroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/util/popup.svelte

@@ -153,17 +153,17 @@
   position: fixed;
   overflow-y: auto;
   outline-width: 0 !important;
-  color: var(--primary-foreground-color);
-  background-color: var(--secondary-background-color-translucent);
+  color: var(--sui-primary-foreground-color);
+  background-color: var(--sui-secondary-background-color-translucent);
   backdrop-filter: blur(16px);
-  box-shadow: 0 8px 16px var(--popup-shadow-color);
+  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   will-change: opacity, transform;
   transition-property: opacity, transform;
 }
 .content.listbox, .content.menu {
   border-width: 1px;
   border-style: solid;
-  border-color: var(--secondary-border-color);
+  border-color: var(--sui-secondary-border-color);
   border-radius: 4px;
 }
 .content.listbox :global(.sui.listbox),

package/package/components/util/popup.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  PopupEvents */
 /** @typedef {typeof __propDef.slots}  PopupSlots */
 /** Generic popup helper. */
-export default class Popup extends SvelteComponentTyped<{
+export default class Popup extends SvelteComponent<{
     [x: string]: any;
     dialog?: HTMLDialogElement;
     position?: PopupPosition;
@@ -33,7 +33,7 @@ export default class Popup extends SvelteComponentTyped<{
 export type PopupProps = typeof __propDef.props;
 export type PopupEvents = typeof __propDef.events;
 export type PopupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/util/portal.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  PortalEvents */
 /** @typedef {typeof __propDef.slots}  PortalSlots */
 /** @see https://github.com/sveltejs/svelte/issues/3088 */
-export default class Portal extends SvelteComponentTyped<{
+export default class Portal extends SvelteComponent<{
     class?: string;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -13,7 +13,7 @@ export default class Portal extends SvelteComponentTyped<{
 export type PortalProps = typeof __propDef.props;
 export type PortalEvents = typeof __propDef.events;
 export type PortalSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

package/package/index.d.ts

@@ -2,6 +2,7 @@ export function initLocales({ fallbackLocale, initialLocale }?: {
     fallbackLocale?: string;
     initialLocale?: string;
 }): void;
+export { default as Alert } from "./components/alert/alert.svelte";
 export { default as Button } from "./components/button/button.svelte";
 export { default as SelectButtonGroup } from "./components/button/select-button-group.svelte";
 export { default as SelectButton } from "./components/button/select-button.svelte";

package/package/index.js

@@ -29,6 +29,7 @@ export const initLocales = ({ fallbackLocale = 'en', initialLocale = 'en' } = {}
 
 initLocales();
 
+export { default as Alert } from './components/alert/alert.svelte';
 export { default as Button } from './components/button/button.svelte';
 export { default as SelectButtonGroup } from './components/button/select-button-group.svelte';
 export { default as SelectButton } from './components/button/select-button.svelte';

package/package/styles/core.scss

@@ -27,7 +27,7 @@
 }
 
 :focus-visible {
-  outline-color: var(--primary-accent-color-lighter);
+  outline-color: var(--sui-primary-accent-color-lighter);
 }
 
 h1,
@@ -37,15 +37,15 @@ h4,
 h5,
 h6 {
   margin: 0;
-  font-weight: var(--font-weight--bold);
+  font-weight: var(--sui-font-weight-bold);
 }
 
 strong {
-  font-weight: var(--font-weight--bold);
+  font-weight: var(--sui-font-weight-bold);
 }
 
 a {
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
   text-decoration: none;
 }
 
@@ -72,7 +72,7 @@ li {
 
 code,
 pre {
-  font-family: var(--font-family--monospace);
+  font-family: var(--sui-font-family-monospace);
 }
 
 pre {