@sveltia/ui 0.1.3 → 0.1.5

package/package/components/composite/calendar.svelte

@@ -2,7 +2,6 @@
   import { _ } from 'svelte-i18n';
   import Button from '../core/button.svelte';
   import Icon from '../core/icon.svelte';
-  import MenuButton from '../core/menu-button.svelte';
   import Separator from '../core/separator.svelte';
   import Spacer from '../core/spacer.svelte';
 
@@ -43,14 +42,14 @@
 <div role="group">
   <input type="hidden" bind:value />
   <div class="header">
-    <MenuButton
+    <Button
       class="ternary"
       label={firstDay.toLocaleDateString('en', { year: 'numeric', month: 'short' })}
       aria-haspopup="dialog"
-      iconName="arrow_drop_down"
     >
+      <Icon slot="end-icon" name="arrow_drop_down" />
       <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div class="popup-inner" on:click|stopPropagation>
+      <div slot="popup" class="popup-inner" on:click|stopPropagation>
         <div role="group" aria-label={$_('sui.calendar.year')}>
           <div class="header">
             <Button
@@ -91,7 +90,7 @@
           </div>
         </div>
       </div>
-    </MenuButton>
+    </Button>
     <Button
       on:click={() => {
         firstDay.setUTCMonth(firstDay.getUTCMonth() - 1);

package/package/components/composite/combobox.svelte

@@ -8,6 +8,7 @@
   import { _ } from 'svelte-i18n';
   import { writable } from 'svelte/store';
   import Button from '../core/button.svelte';
+  import Icon from '../core/icon.svelte';
   import TextInput from '../core/text-input.svelte';
   import { getRandomId } from '../helpers/util';
   import Popup from '../util/popup.svelte';
@@ -80,7 +81,9 @@
       {...$$restProps}
       bind:this={comboboxElement}
     >
-      {value !== undefined ? label || value : $_('sui.combobox.select_an_option')}
+      <div class="label">
+        {value !== undefined ? label || value : $_('sui.combobox.select_an_option')}
+      </div>
     </div>
   {:else}
     <TextInput
@@ -103,8 +106,6 @@
     aria-expanded={$isPopupOpen}
     aria-disabled={disabled ? true : undefined}
     class="ternary iconic"
-    iconName="expand_more"
-    iconLabel={$isPopupOpen ? $_('sui._.collapse') : $_('sui._.expand')}
     on:click={(event) => {
       event.stopPropagation();
 
@@ -112,7 +113,13 @@
         $isPopupOpen = !$isPopupOpen;
       }
     }}
-  />
+  >
+    <Icon
+      slot="start-icon"
+      name="expand_more"
+      label={$isPopupOpen ? $_('sui._.collapse') : $_('sui._.expand')}
+    />
+  </Button>
 </div>
 <Popup
   id="{id}-popup"
@@ -172,6 +179,13 @@
   opacity: 0.4;
   cursor: default;
 }
+.combobox div[role=combobox] .label {
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .combobox :global(input) {
   padding: 0 32px 0 8px;
   width: 100%;

package/package/components/composite/combobox.svelte.d.ts

@@ -13,11 +13,11 @@ export type ComboboxSlots = typeof __propDef.slots;
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         label?: string;
+        position?: any;
+        class?: string;
         disabled?: boolean;
         value?: (string | undefined);
-        position?: any;
         readOnly?: boolean;
     };
     events: {

package/package/components/composite/disclosure.svelte.d.ts

@@ -12,8 +12,8 @@ export type DisclosureEvents = typeof __propDef.events;
 export type DisclosureSlots = typeof __propDef.slots;
 declare const __propDef: {
     props: {
-        class?: string;
         label?: string;
+        class?: string;
         expanded?: boolean;
     };
     events: {

package/package/components/composite/menu-item-group.svelte.d.ts

@@ -9,8 +9,8 @@ export type MenuItemGroupSlots = typeof __propDef.slots;
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         title?: string;
+        class?: string;
         ariaLabel?: string;
     };
     events: {

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

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

package/package/components/composite/select.svelte.d.ts

@@ -10,8 +10,8 @@ export type SelectSlots = typeof __propDef.slots;
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         label?: string;
+        class?: string;
         value?: (string | undefined);
     };
     events: {

package/package/components/composite/tab-list.svelte.d.ts

@@ -26,8 +26,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        name?: string;
         element?: (HTMLElement | undefined);
+        name?: string;
         orientation?: ('horizontal' | 'vertical');
     };
     events: {

package/package/components/core/button.svelte

@@ -6,12 +6,13 @@
 <svelte:options accessors={true} />
 
 <script>
-  import Icon from './icon.svelte';
+  import Popup from '../util/popup.svelte';
 
   /**
    * CSS class name on the button.
    * @type {String}
    */
+  // eslint-disable-next-line padding-line-between-statements
   let className = '';
 
   export { className as class };
@@ -65,20 +66,13 @@
   export let label = '';
 
   /**
-   * The name of the Material Symbols icon on the button.
+   * Where to show the dropdown menu.
+   * @type {PopupPosition}
    */
-  export let iconName = '';
+  export let popupPosition = 'bottom-left';
 
-  /**
-   * The accessible label on the icon. It can be omitted of a visible `label` is defined.
-   */
-  export let iconLabel = '';
-
-  /**
-   * Where the icon is displayed.
-   * @type {('start'|'end')}
-   */
-  export let iconPosition = 'start';
+  /** @type {?Popup} */
+  let popupComponent;
 </script>
 
 <button
@@ -103,18 +97,20 @@
   on:keypress
   bind:this={element}
 >
-  {#if iconName && iconPosition === 'start'}
-    <Icon name={iconName} label={iconLabel} />
-  {/if}
+  <slot name="start-icon" />
   {#if label}
     <span class="label">{label}</span>
   {/if}
   <slot />
-  {#if iconName && iconPosition === 'end'}
-    <Icon name={iconName} label={iconLabel} />
-  {/if}
+  <slot name="end-icon" />
 </button>
 
+{#if $$slots.popup}
+  <Popup anchor={element} position={popupPosition} bind:this={popupComponent}>
+    <slot name="popup" />
+  </Popup>
+{/if}
+
 <style>button {
   display: inline-flex;
   align-items: center;

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

@@ -34,14 +34,8 @@ export default class Button {
     set label(arg: any);
     get label(): any;
     /**accessor*/
-    set iconName(arg: any);
-    get iconName(): any;
-    /**accessor*/
-    set iconLabel(arg: any);
-    get iconLabel(): any;
-    /**accessor*/
-    set iconPosition(arg: any);
-    get iconPosition(): any;
+    set popupPosition(arg: any);
+    get popupPosition(): any;
 }
 export type ButtonProps = typeof __propDef.props;
 export type ButtonEvents = typeof __propDef.events;
@@ -49,8 +43,8 @@ export type ButtonSlots = typeof __propDef.slots;
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         label?: string;
+        class?: string;
         element?: (HTMLButtonElement | undefined);
         type?: ('button' | 'submit' | 'reset');
         role?: string;
@@ -58,9 +52,7 @@ declare const __propDef: {
         hidden?: boolean;
         disabled?: boolean;
         pressed?: (boolean | string | undefined);
-        iconName?: string;
-        iconLabel?: string;
-        iconPosition?: ('start' | 'end');
+        popupPosition?: any;
     };
     events: {
         mouseenter: MouseEvent;
@@ -77,7 +69,10 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'start-icon': {};
         default: {};
+        'end-icon': {};
+        popup: {};
     };
 };
 export {};

package/package/components/core/checkbox.svelte

@@ -7,6 +7,7 @@
   import { createEventDispatcher } from 'svelte';
   import { getRandomId } from '../helpers/util';
   import Button from './button.svelte';
+  import Icon from './icon.svelte';
 
   /**
    * CSS class name on the button.
@@ -32,10 +33,6 @@
   const id = getRandomId('checkbox');
   /** @type {Button} */
   let button;
-
-  $: {
-    dispatch('change', { checked });
-  }
 </script>
 
 {#if name && value && checked && !indeterminate}
@@ -53,7 +50,6 @@
 >
   <Button
     {id}
-    iconName={indeterminate ? 'remove' : 'check'}
     role="checkbox"
     aria-checked={indeterminate ? 'mixed' : checked}
     aria-labelledby="{id}-label"
@@ -63,8 +59,11 @@
       event.stopPropagation();
       checked = indeterminate ? true : !checked;
       indeterminate = false;
+      dispatch('change', { checked });
     }}
-  />
+  >
+    <Icon slot="start-icon" name={indeterminate ? 'remove' : 'check'} />
+  </Button>
   {#if $$slots.default}
     <label id="{id}-label">
       <slot />

package/package/components/core/dialog.svelte

@@ -7,6 +7,7 @@
   import { createEventDispatcher, onMount } from 'svelte';
   import { _ } from 'svelte-i18n';
   import Button from './button.svelte';
+  import Icon from './icon.svelte';
   import Spacer from './spacer.svelte';
 
   /**
@@ -134,13 +135,13 @@
             {#if showClose}
               <Button
                 class="ternary iconic"
-                iconName="close"
-                iconLabel={$_('sui._.close')}
                 on:click={() => {
                   dialog.returnValue = 'close';
                   open = false;
                 }}
-              />
+              >
+                <Icon slot="start-icon" name="close" label={$_('sui._.close')} />
+              </Button>
             {/if}
           {/if}
         </div>

package/package/components/core/dialog.svelte.d.ts

@@ -12,10 +12,10 @@ export type DialogEvents = typeof __propDef.events;
 export type DialogSlots = typeof __propDef.slots;
 declare const __propDef: {
     props: {
-        class?: string;
-        size?: ('small' | 'medium' | 'large');
         title?: string;
         open?: boolean;
+        class?: string;
+        size?: ('small' | 'medium' | 'large');
         modal?: boolean;
         showCancel?: boolean;
         showOk?: boolean;

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

@@ -9,8 +9,8 @@ export type GroupSlots = typeof __propDef.slots;
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         title?: string;
+        class?: string;
         ariaLabel?: string;
     };
     events: {

package/package/components/core/icon.svelte.d.ts

@@ -8,9 +8,9 @@ export type IconEvents = typeof __propDef.events;
 export type IconSlots = typeof __propDef.slots;
 declare const __propDef: {
     props: {
+        label?: string;
         class?: string;
         name?: string;
-        label?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/core/menu-button.svelte

@@ -3,7 +3,6 @@
   @see https://w3c.github.io/aria-practices/#menubutton
 -->
 <script>
-  import Menu from '../composite/menu.svelte';
   import Popup from '../util/popup.svelte';
   import Button from './button.svelte';
 
@@ -19,25 +18,17 @@
    * Where to show the dropdown menu.
    * @type {PopupPosition}
    */
-  export let position = 'bottom-left';
-
-  /**
-   * Whether to show an arrow icon next to the label, if `iconName` is not given. The default is
-   * `true`.
-   */
-  export let showArrow = true;
+  export let popupPosition = 'bottom-left';
 
   /** @type {?Button} */
   let buttonComponent;
-  /** @type {?Menu} */
-  let menuComponent;
+  /** @type {?Popup} */
+  let popupComponent;
 </script>
 
 <Button
   class="sui menu-button {className}"
   aria-haspopup="menu"
-  iconName={$$props.iconName || (showArrow ? 'arrow_drop_down' : undefined)}
-  iconPosition="end"
   {...$$restProps}
   bind:this={buttonComponent}
   on:keydown={(event) => {
@@ -47,7 +38,7 @@
       event.preventDefault();
 
       const members = [
-        ...menuComponent.element.querySelectorAll('[role^="menuitem"]:not([aria-disabled="true"])'),
+        ...popupComponent.dialog.querySelectorAll('[role^="menuitem"]:not([aria-disabled="true"])'),
       ];
 
       if (members.length) {
@@ -56,10 +47,11 @@
     }
   }}
 >
-  <slot name="button" />
+  <slot name="start-icon" slot="start-icon" />
+  <slot />
+  <slot name="end-icon" slot="end-icon" />
 </Button>
-<Popup anchor={buttonComponent?.element} {position}>
-  <Menu bind:this={menuComponent}>
-    <slot />
-  </Menu>
+
+<Popup anchor={buttonComponent?.element} position={popupPosition} bind:this={popupComponent}>
+  <slot name="popup" />
 </Popup>

package/package/components/core/menu-button.svelte.d.ts

@@ -11,15 +11,20 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        position?: any;
-        showArrow?: boolean;
+        popupPosition?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        button: {};
+        'start-icon': {
+            slot: string;
+        };
         default: {};
+        'end-icon': {
+            slot: string;
+        };
+        popup: {};
     };
 };
 export {};

package/package/components/core/menu-item.svelte

@@ -48,7 +48,7 @@
     }}
   >
     {#if iconName}
-      <Icon name={iconName} label={iconLabel} />
+      <Icon slot="start-icon" name={iconName} label={iconLabel} />
     {/if}
     {#if label}
       <span class="label">{label}</span>

package/package/components/core/menu-item.svelte.d.ts

@@ -10,12 +10,12 @@ export type MenuItemSlots = typeof __propDef.slots;
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         label?: string;
+        class?: string;
         role?: ('menuitem' | 'menuitemcheckbox' | 'menuitemradio');
+        checked?: boolean;
         iconName?: string;
         iconLabel?: string;
-        checked?: boolean;
     };
     events: {
         click: any;

package/package/components/core/number-input.svelte

@@ -5,6 +5,7 @@
 <script>
   import { _ } from 'svelte-i18n';
   import Button from './button.svelte';
+  import Icon from './icon.svelte';
   import TextInput from './text-input.svelte';
 
   /**
@@ -70,21 +71,21 @@
   <Button
     class="iconic"
     disabled={disabled || Number.isNaN(Number(value))}
-    iconLabel={$_('sui.number_input.decrease')}
-    iconName={'arrow_downward'}
     on:click={() => {
       decrease();
     }}
-  />
+  >
+    <Icon slot="start-icon" name="arrow_downward" label={$_('sui.number_input.decrease')} />
+  </Button>
   <Button
     class="iconic"
     disabled={disabled || Number.isNaN(Number(value))}
-    iconLabel={$_('sui.number_input.increase')}
-    iconName={'arrow_upward'}
     on:click={() => {
       increase();
     }}
-  />
+  >
+    <Icon slot="start-icon" name={'arrow_upward'} label={$_('sui.number_input.increase')} />
+  </Button>
 </div>
 
 <style>.number-input {

package/package/components/core/option.svelte

@@ -28,10 +28,12 @@
     on:dragend
     on:drop
   >
-    <slot />
     {#if selected}
       <Icon class="check" name="check" />
     {/if}
+    <slot name="start-icon" slot="start-icon" />
+    <slot />
+    <slot name="end-icon" slot="end-icon" />
   </Button>
 </div>
 

package/package/components/core/option.svelte.d.ts

@@ -23,7 +23,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'start-icon': {
+            slot: string;
+        };
         default: {};
+        'end-icon': {
+            slot: string;
+        };
     };
 };
 export {};

package/package/components/core/password-input.svelte

@@ -5,6 +5,7 @@
 <script>
   import { _ } from 'svelte-i18n';
   import Button from './button.svelte';
+  import Icon from './icon.svelte';
   import TextInput from './text-input.svelte';
 
   /**
@@ -44,12 +45,16 @@
   <Button
     class="iconic"
     pressed={passwordVisible}
-    iconLabel={$_('sui.password_input.show_password')}
-    iconName={passwordVisible ? 'visibility_off' : 'visibility'}
     on:click={() => {
       passwordVisible = !passwordVisible;
     }}
-  />
+  >
+    <Icon
+      slot="start-icon"
+      name={passwordVisible ? 'visibility_off' : 'visibility'}
+      label={$_('sui.password_input.show_password')}
+    />
+  </Button>
 </div>
 
 <style>.password-input {

package/package/components/core/radio-button.svelte

@@ -6,6 +6,7 @@
 <script>
   import { getRandomId } from '../helpers/util';
   import Button from './button.svelte';
+  import Icon from './icon.svelte';
 
   /**
    * CSS class name on the button.
@@ -44,7 +45,6 @@
 >
   <Button
     {id}
-    iconName="circle"
     role="radio"
     aria-checked={selected}
     aria-labelledby="{id}-label"
@@ -53,7 +53,9 @@
       event.preventDefault();
       selected = !selected;
     }}
-  />
+  >
+    <Icon slot="start-icon" name="circle" />
+  </Button>
   <label id="{id}-label">
     <slot />
   </label>

package/package/components/core/search-bar.svelte

@@ -47,8 +47,6 @@
   {#if value}
     <Button
       class="ternary iconic"
-      iconName="close"
-      iconLabel={$_('sui._.clear')}
       on:click={() => {
         value = '';
         input.element.focus();
@@ -58,7 +56,9 @@
           input.element.dispatchEvent(new KeyboardEvent('change'));
         });
       }}
-    />
+    >
+      <Icon slot="start-icon" name="close" label={$_('sui._.clear')} />
+    </Button>
   {/if}
 </div>
 

package/package/components/core/search-bar.svelte.d.ts

@@ -17,8 +17,8 @@ export type SearchBarSlots = typeof __propDef.slots;
 declare const __propDef: {
     props: {
         [x: string]: any;
-        class?: string;
         focus?: () => void;
+        class?: string;
         value?: string;
     };
     events: {

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

@@ -25,5 +25,7 @@
   {...$$restProps}
   on:click
 >
+  <slot name="start-icon" slot="start-icon" />
   <slot />
+  <slot name="end-icon" slot="end-icon" />
 </Button>

package/package/components/core/select-button.svelte.d.ts

@@ -23,7 +23,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'start-icon': {
+            slot: string;
+        };
         default: {};
+        'end-icon': {
+            slot: string;
+        };
     };
 };
 export {};

package/package/components/core/switch.svelte.d.ts

@@ -12,8 +12,8 @@ export type SwitchEvents = typeof __propDef.events;
 export type SwitchSlots = typeof __propDef.slots;
 declare const __propDef: {
     props: {
-        class?: string;
         label?: string;
+        class?: string;
         disabled?: boolean;
         checked?: boolean;
     };

package/package/components/core/tab.svelte

@@ -16,5 +16,7 @@
 </script>
 
 <Button role="tab" class="sui tab {className}" {...$$restProps}>
+  <slot name="start-icon" slot="start-icon" />
   <slot />
+  <slot name="end-icon" slot="end-icon" />
 </Button>

package/package/components/core/tab.svelte.d.ts

@@ -19,7 +19,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'start-icon': {
+            slot: string;
+        };
         default: {};
+        'end-icon': {
+            slot: string;
+        };
     };
 };
 export {};

package/package/components/core/text-area.svelte.d.ts

@@ -26,8 +26,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        name?: string;
         element?: (HTMLTextAreaElement | undefined);
+        name?: string;
         value?: (string | undefined);
         autoResize?: boolean;
     };

package/package/components/core/text-input.svelte.d.ts

@@ -32,10 +32,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
-        name?: string;
         element?: (HTMLInputElement | undefined);
         role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
         disabled?: boolean;
+        name?: string;
         value?: (string | undefined);
         readOnly?: boolean;
     };

package/package/components/editor/markdown.svelte

@@ -1,6 +1,7 @@
 <script>
   import { _ } from 'svelte-i18n';
   import Button from '../core/button.svelte';
+  import Icon from '../core/icon.svelte';
   import Separator from '../core/separator.svelte';
   import TextArea from '../core/text-area.svelte';
   import Toolbar from '../core/toolbar.svelte';
@@ -47,7 +48,9 @@
       {#if separator}
         <Separator />
       {:else}
-        <Button {disabled} iconName={icon} iconLabel={label} />
+        <Button {disabled}>
+          <Icon slot="start-icon" name={icon} {label} />
+        </Button>
       {/if}
     {/each}
   </Toolbar>

package/package/components/helpers/popup.js

@@ -19,41 +19,61 @@ class Popup {
         return;
       }
 
-      const top = this.position.startsWith('bottom-')
+      const contentHeight = this.popupElement.querySelector('.content').scrollHeight;
+      const topMargin = intersectionRect.top - 8;
+      const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
+      let { position } = this;
+      let height;
+
+      // Alter the position if the space is limited
+      // @todo Handle more overflow cases
+      if (position.startsWith('bottom-')) {
+        if (contentHeight > bottomMargin) {
+          if (topMargin > bottomMargin) {
+            position = position.replace('bottom-', 'top-');
+            height = topMargin;
+          } else {
+            height = bottomMargin;
+          }
+        }
+      }
+
+      const top = position.startsWith('bottom-')
         ? `${Math.round(intersectionRect.bottom)}px`
-        : this.position.endsWith('-top')
+        : position.endsWith('-top')
         ? `${Math.round(intersectionRect.top)}px`
         : 'auto';
 
-      const right = this.position.startsWith('left-')
+      const right = position.startsWith('left-')
         ? `${Math.round(rootBounds.width - intersectionRect.left)}px`
-        : this.position.endsWith('-right')
+        : position.endsWith('-right')
         ? `${Math.round(rootBounds.width - intersectionRect.right)}px`
         : 'auto';
 
-      const bottom = this.position.startsWith('top-')
+      const bottom = position.startsWith('top-')
         ? `${Math.round(rootBounds.height - intersectionRect.top)}px`
-        : this.position.endsWith('-bottom')
+        : position.endsWith('-bottom')
         ? `${Math.round(rootBounds.height - intersectionRect.bottom)}px`
         : 'auto';
 
-      const left = this.position.startsWith('right-')
+      const left = position.startsWith('right-')
         ? `${Math.round(intersectionRect.right)}px`
-        : this.position.endsWith('-left')
+        : position.endsWith('-left')
         ? `${Math.round(intersectionRect.left)}px`
         : 'auto';
 
-      const width = `${Math.round(intersectionRect.width)}px`;
-      const height = `${Math.round(rootBounds.height - intersectionRect.bottom - 8)}px`;
       const anchorPopup = this.anchorElement.closest('.popup');
 
-      // @todo fix the final position
-      this.style.set({
+      const style = {
         inset: [top, right, bottom, left].join(' '),
         zIndex: anchorPopup ? Number(anchorPopup.style.zIndex) + 1 : 1000,
-        width,
-        height,
-      });
+        width: `${Math.round(intersectionRect.width)}px`,
+        height: height ? `${Math.round(height)}px` : 'auto',
+      };
+
+      if (JSON.stringify(style) !== JSON.stringify(get(this.style))) {
+        this.style.set(style);
+      }
     });
   });
 

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

@@ -112,7 +112,7 @@
   --background-color-2-hsl: var(--hue) 5% 98%;
   --background-color-3-hsl: var(--hue) 5% 96%;
   --background-color-4-hsl: var(--hue) 5% 94%;
-  --background-color-5-hsl: var(--hue) 5% 90%;
+  --background-color-5-hsl: var(--hue) 5% 80%;
   --shadow-color: var(--hue) 10% 0%;
   --primary-accent-color: hsl(var(--hue) 80% 45%);
   --primary-accent-color-lighter: hsl(var(--hue) 80% 40%);

package/package/components/util/popup.svelte

@@ -28,6 +28,7 @@
 
   let showDialog = false;
   let showContent = false;
+  let contentType;
   let closeDialogTimer = 0;
 
   let style = writable({
@@ -40,6 +41,7 @@
   $: {
     if (anchor && dialog) {
       ({ open, style } = activatePopup(anchor, dialog, position));
+      contentType = anchor.getAttribute('aria-haspopup');
     }
   }
 
@@ -91,7 +93,7 @@
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div
     tabindex="0"
-    class="content"
+    class="content {contentType}"
     style:inset={$style.inset}
     style:z-index={$style.zIndex}
     style:min-width={$style.width}
@@ -128,4 +130,16 @@
   box-shadow: 0 8px 16px var(--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-radius: 4px;
+}
+.content.listbox :global(.sui.listbox),
+.content.listbox :global(.sui.menu), .content.menu :global(.sui.listbox),
+.content.menu :global(.sui.menu) {
+  border-width: 0;
+  border-radius: 0;
 }</style>

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

@@ -23,8 +23,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         dialog?: (HTMLElement | undefined);
-        anchor?: (HTMLElement | undefined);
         position?: any;
+        anchor?: (HTMLElement | undefined);
         open?: any;
     };
     events: {

package/package/styles/variables.scss

@@ -80,7 +80,7 @@
   --background-color-2-hsl: var(--hue) 5% 98%; // primary
   --background-color-3-hsl: var(--hue) 5% 96%; // secondary/ternary
   --background-color-4-hsl: var(--hue) 5% 94%; // disabled
-  --background-color-5-hsl: var(--hue) 5% 90%; // highlight
+  --background-color-5-hsl: var(--hue) 5% 80%; // highlight
   --shadow-color: var(--hue) 10% 0%;
   // Accents
   --primary-accent-color: hsl(var(--hue) 80% 45%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -29,12 +29,12 @@
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@babel/eslint-parser": "^7.21.3",
-    "@playwright/test": "^1.32.1",
+    "@playwright/test": "^1.32.2",
     "@sveltejs/adapter-auto": "2.0.0",
-    "@sveltejs/kit": "1.15.0",
+    "@sveltejs/kit": "1.15.2",
     "@sveltejs/package": "^2.0.2",
     "cspell": "^6.31.1",
-    "eslint": "^8.37.0",
+    "eslint": "^8.38.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
@@ -44,17 +44,17 @@
     "postcss-html": "^1.5.0",
     "prettier": "^2.8.7",
     "prettier-plugin-svelte": "^2.10.0",
-    "sass": "^1.60.0",
+    "sass": "^1.61.0",
     "stylelint": "^15.4.0",
     "stylelint-config-recommended-scss": "^9.0.1",
     "stylelint-scss": "^4.6.0",
-    "svelte-check": "^3.1.4",
+    "svelte-check": "^3.2.0",
     "svelte-i18n": "^3.6.0",
     "svelte-migrate": "^1.1.3",
     "svelte-preprocess": "^5.0.3",
     "tslib": "^2.5.0",
     "vite": "^4.2.1",
-    "vitest": "^0.29.8"
+    "vitest": "^0.30.0"
   },
   "exports": {
     "./package.json": "./package.json",