rimecms 0.33.0 → 1.0.0

package/dist/panel/components/ui/command/command-dialog.css

@@ -1,15 +1,39 @@
-.rz-command-dialog-content {
+/* The palette: a column near the top of the screen, its input a borderless line. */
+.rz-dialog-content.rz-command-dialog-content {
   overflow: hidden;
+  gap: 0;
+  width: min(38rem, calc(100% - 2 * var(--gutter)));
   padding: 0;
-  background-color: var(--rz-popover-bg);
+  border-radius: var(--rz-radius-xl);
+  background-color: var(--rz-bg-float);
   position: fixed;
   left: calc(50% - var(--gutter));
-  top: 20%;
+  top: 12vh;
   transform: translate(-50%, 0);
 }
 
+.rz-dialog-content.rz-command-dialog-content .rz-command-input {
+  height: var(--rz-size-12);
+  gap: var(--rz-size-2-5);
+  padding-inline: var(--rz-size-4) var(--rz-size-3-5);
+  border: 0;
+  border-bottom: 1px solid var(--rz-border);
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+
+  .rz-command-input__icon {
+    margin: 0;
+  }
+
+  .rz-command-input__input {
+    height: 100%;
+    font-size: var(--rz-text-xl);
+  }
+}
+
 .rz-command-dialog-content__command [data-cmdk-group-heading] {
-  color: hsl(var(--rz-color-fg) / 0.7);
+  color: var(--rz-fg-subtle);
   padding-left: var(--rz-size-2);
   padding-right: var(--rz-size-2);
   font-variation-settings: 'wght' 500;

package/dist/panel/components/ui/command/command-dialog.svelte

@@ -14,17 +14,20 @@
     ref = $bindable(null),
     value = $bindable(''),
     preventScroll = true,
+    onCloseAutoFocus,
     children,
     ...restProps
   }: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
     WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
       children: Snippet;
       preventScroll?: boolean;
+      /** The dialog is giving the focus back to where it was. */
+      onCloseAutoFocus?: (event: Event) => void;
     } = $props();
 </script>
 
 <Dialog.Root bind:open {...restProps}>
-  <Dialog.Content class="rz-command-dialog-content" {preventScroll}>
+  <Dialog.Content class="rz-command-dialog-content" {preventScroll} {onCloseAutoFocus}>
     <Command
       class="rz-command-dialog-content__command"
       {...restProps}

package/dist/panel/components/ui/command/command-dialog.svelte.d.ts

@@ -4,6 +4,8 @@ import './command-dialog.css';
 type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
     children: Snippet;
     preventScroll?: boolean;
+    /** The dialog is giving the focus back to where it was. */
+    onCloseAutoFocus?: (event: Event) => void;
 };
 declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "open">;
 type CommandDialog = ReturnType<typeof CommandDialog>;

package/dist/panel/components/ui/command/command-empty.css

@@ -1,4 +1,4 @@
 .rz-command-empty {
   padding: var(--rz-size-6);
-  opacity: 0.6;
+  color: var(--rz-fg-subtle);
 }

package/dist/panel/components/ui/command/command-group.css

@@ -1,12 +1,12 @@
 .rz-command-group {
-  color: hsl(var(--rz-color-fg));
+  color: var(--rz-fg);
   overflow-x: hidden;
   overflow-y: auto;
   padding: var(--rz-size-1);
 }
 
 .rz-command-group [data-cmdk-group-heading] {
-  color: hsl(var(--rz-color-fg) / 0.7);
+  color: var(--rz-fg-subtle);
   padding-left: var(--rz-size-2);
   padding-right: var(--rz-size-2);
   padding-top: var(--rz-size-1-5);
@@ -16,7 +16,7 @@
   font-weight: 500;
 }
 .rz-command-group__heading {
-  color: hsl(var(--rz-color-fg) / 0.7);
+  color: var(--rz-fg-subtle);
   padding-left: var(--rz-size-2);
   padding-right: var(--rz-size-2);
   padding-top: var(--rz-size-1-5);

package/dist/panel/components/ui/command/command-input-select.svelte

@@ -30,7 +30,7 @@
     & :global(.rz-command-input-select__icon) {
       margin-right: var(--rz-size-2);
       flex-shrink: 0;
-      opacity: 0.5;
+      color: var(--rz-fg-subtle);
     }
 
     & :global(.rz-command-input-select__input) {
@@ -43,11 +43,11 @@
     }
 
     & :global(.rz-command-input-select__input::-moz-placeholder) {
-      color: hsl(var(--rz-color-fg) / 0.4);
+      color: var(--rz-fg-subtle);
     }
 
     & :global(.rz-command-input-select__input::placeholder) {
-      color: hsl(var(--rz-color-fg) / 0.4);
+      color: var(--rz-fg-subtle);
     }
 
     & :global(.rz-command-input-select__input:disabled) {

package/dist/panel/components/ui/command/command-input.svelte

@@ -1,28 +1,52 @@
 <script lang="ts">
   import { Search } from '@lucide/svelte';
   import { Command as CommandPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
 
   let {
     ref = $bindable(null),
     class: className,
     value = $bindable(''),
+    end,
     ...restProps
-  }: CommandPrimitive.InputProps = $props();
+  }: CommandPrimitive.InputProps & {
+    /** Drawn after the input, on its right: a key hint. */
+    end?: Snippet;
+  } = $props();
 </script>
 
 <div class="rz-command-input" data-command-input-wrapper="">
-  <Search class="rz-command-input__icon" size={12} />
+  <Search class="rz-command-input__icon" size={14} />
   <CommandPrimitive.Input
     class="rz-command-input__input {className}"
     bind:ref
     {...restProps}
     bind:value
   />
+  {@render end?.()}
 </div>
 
-<style>
-  .rz-command-input {
-    background-color: hsl(var(--rz-input-bg));
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+.rz-command-input {
+    background-color: var(--rz-bg-well);
+    border: 1px solid var(--rz-border);
+    &:hover {
+    border-color: var(--rz-border-strong);
+  }
     display: flex;
     align-items: center;
     border-top-left-radius: var(--rz-radius-md);
@@ -31,21 +55,21 @@
     padding-block: var(--rz-size-1);
 
     &:global([data-focused]) {
-      box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
+      outline: none;
+      border-color: var(--rz-accent-border);
+      box-shadow: 0 0 0 3px var(--rz-ring);
     }
 
     &:global([data-error]) {
-      box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-alert) / var(--rz-ring-opacity, 1));
+      outline: none;
+      border-color: var(--rz-danger);
+      box-shadow: 0 0 0 3px oklch(from var(--rz-danger) l c h / 0.15);
     }
 
     & :global(.rz-command-input__icon) {
       margin-right: var(--rz-size-2);
       flex-shrink: 0;
-      opacity: 0.5;
+      color: var(--rz-fg-subtle);
     }
 
     & :global(.rz-command-input__input) {
@@ -58,11 +82,11 @@
     }
 
     & :global(.rz-command-input__input::-moz-placeholder) {
-      color: hsl(var(--rz-color-fg) / 0.7);
+      color: var(--rz-fg-subtle);
     }
 
     & :global(.rz-command-input__input::placeholder) {
-      color: hsl(var(--rz-color-fg) / 0.7);
+      color: var(--rz-fg-subtle);
     }
 
     & :global(.rz-command-input__input:disabled) {

package/dist/panel/components/ui/command/command-input.svelte.d.ts

@@ -1,4 +1,9 @@
 import { Command as CommandPrimitive } from 'bits-ui';
-declare const CommandInput: import("svelte").Component<CommandPrimitive.InputProps, {}, "value" | "ref">;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = CommandPrimitive.InputProps & {
+    /** Drawn after the input, on its right: a key hint. */
+    end?: Snippet;
+};
+declare const CommandInput: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
 type CommandInput = ReturnType<typeof CommandInput>;
 export default CommandInput;

package/dist/panel/components/ui/command/command-item.css

@@ -16,8 +16,8 @@
 
 .rz-command-item[aria-selected='true'] {
   border-radius: var(--rz-radius-sm);
-  background-color: var(--rz-popover-highlight-bg);
-  color: hsl(var(--rz-color-fg));
+  background-color: var(--rz-bg-active);
+  color: var(--rz-fg);
 }
 
 .rz-command-item[data-disabled] {

package/dist/panel/components/ui/command/command-list.css

@@ -1,6 +1,6 @@
 .rz-command-list {
   overflow-x: hidden;
-  background-color: var(--rz-popover-bg);
+  background-color: var(--rz-bg-float);
   padding: var(--rz-size-1);
   max-height: 19.75rem;
 }

package/dist/panel/components/ui/command/command-separator.css

@@ -1,5 +1,5 @@
 .rz-command-separator {
-  background-color: hsl(var(--rz-color-border));
+  background-color: var(--rz-border);
   margin-left: calc(-1 * var(--rz-size-1));
   margin-right: calc(-1 * var(--rz-size-1));
   height: 1px;

package/dist/panel/components/ui/context-menu/context-menu-item.css

@@ -9,11 +9,11 @@
   gap: var(--rz-size-2);
   border-radius: var(--rz-radius-md);
   outline: none;
-  color: hsl(var(--rz-color-fg));
+  color: var(--rz-fg);
   padding-block: var(--rz-size-2);
   padding-inline: var(--rz-size-3);
   &[data-highlighted] {
-    background-color: var(--rz-popover-highlight-bg);
+    background-color: var(--rz-bg-active);
   }
   &[data-disabled] {
     pointer-events: none;

package/dist/panel/components/ui/context-menu/context-menu.css

@@ -1,14 +1,13 @@
 .rz-context-menu-content {
   position: relative;
-  border-radius: var(--rz-radius-lg);
-  border: var(--rz-border);
-  box-shadow: var(--rz-shadow-md);
+  background-color: var(--rz-bg-float);
+  box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
   outline: none;
-  background-color: var(--rz-popover-bg);
-  z-index: 120;
+  /* Over the sidebar (300) and a dialog (1010), which a menu can open from. */
+  z-index: 1100;
   min-width: var(--min-width, 8rem);
   border-radius: var(--rz-radius-lg);
-  border: var(--rz-border);
   padding: var(--rz-size-1);
-  box-shadow: var(--rz-shadow-xl);
 }

package/dist/panel/components/ui/dialog/dialog-content.css

@@ -1,6 +1,9 @@
 .rz-dialog-content {
   --gutter: var(--rz-size-4);
-  background-color: var(--rz-popover-bg);
+  background-color: var(--rz-bg-float);
+  box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
   position: fixed;
   left: calc(50% - var(--gutter));
   top: 40%;
@@ -9,9 +12,7 @@
   width: calc(100% - 2 * var(--gutter));
   transform: translate(-50%, -50%);
   gap: var(--rz-size-4);
-  border: var(--rz-border);
   padding: var(--rz-size-3);
-  box-shadow: var(--rz-shadow-lg);
   border-radius: var(--rz-radius-lg);
   margin: 0 var(--gutter);
 
@@ -38,21 +39,18 @@
 }
 
 [data-dialog-close] {
-  color: hsl(var(--rz-color-fg) / 0.7);
+  color: var(--rz-fg-muted);
   position: absolute;
   right: var(--rz-size-4);
   top: var(--rz-size-3);
   border-radius: var(--rz-radius-sm);
-  opacity: 0.7;
-  transition: opacity 0.2s;
+  transition: color 0.2s;
   z-index: 20;
 }
 
 [data-dialog-close]:focus {
-  outline: none;
-  box-shadow:
-    0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
-    0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
+  outline: 2px solid var(--rz-accent-border);
+  outline-offset: 2px;
 }
 
 [data-dialog-close]:disabled {

package/dist/panel/components/ui/dialog/dialog-content.svelte

@@ -13,6 +13,7 @@
     class: className,
     size = 'default',
     children,
+    onkeydown,
     ...restProps
   }: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
     children?: Snippet;
@@ -25,6 +26,23 @@
     >;
     size?: 'sm' | 'default' | 'lg' | 'xl';
   } = $props();
+
+  /**
+   * Enter clicks the button showing `enter`. A field, a button or a link with the focus keeps
+   * the key, and so does an input in a form, which submits it.
+   */
+  function enter(event: KeyboardEvent & { currentTarget: HTMLDivElement }) {
+    onkeydown?.(event);
+    if (event.key !== 'Enter' || event.defaultPrevented || event.isComposing) return;
+    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+    const target = event.target as HTMLElement;
+    if (target.closest('textarea, select, button, a[href], [contenteditable="true"]')) return;
+    if (target instanceof HTMLInputElement && target.form) return;
+    const button = ref?.querySelector<HTMLButtonElement>('button[data-kbd="enter"]:not(:disabled)');
+    if (!button) return;
+    event.preventDefault();
+    button.click();
+  }
 </script>
 
 <Dialog.Portal>
@@ -32,6 +50,7 @@
   <DialogPrimitive.Content
     bind:ref
     class="rz-dialog-content rz-dialog-content--{size} {className}"
+    onkeydown={enter}
     {...restProps}
   >
     {@render children?.()}

package/dist/panel/components/ui/dialog/dialog-description.css

@@ -1,4 +1,4 @@
 .rz-dialog-description {
-  color: hsl(var(--rz-color-fg) / 0.7);
+  color: var(--rz-fg-muted);
   font-size: var(--rz-text-sm);
 }

package/dist/panel/components/ui/dialog/dialog-footer.svelte

@@ -15,6 +15,7 @@
 </div>
 
 <style>
+  /* The buttons share the width, side by side; stacked, the first at the bottom, on a phone. */
   .rz-dialog-footer {
     display: flex;
     gap: var(--rz-size-3);
@@ -24,7 +25,10 @@
   @media (min-width: 640px) {
     .rz-dialog-footer {
       flex-direction: row;
-      justify-content: var(--rz-justify-content, flex-end);
+    }
+
+    .rz-dialog-footer > :global(*) {
+      flex: 1;
     }
   }
 </style>

package/dist/panel/components/ui/dialog/dialog-overlay.css

@@ -1,5 +1,5 @@
 .rz-dialog-overlay {
-  background-color: var(--rz-overlay-color);
+  background-color: var(--rz-bg-overlay);
   position: fixed;
   inset: 0;
   z-index: 1010;

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -35,7 +35,22 @@
   {/snippet}
 </DropdownMenuPrimitive.CheckboxItem>
 
-<style>:global {
+<style>/* A level: its fill, a hairline, its shadow. raised, float. */
+
+/* A well: an input, a track, a dropzone. Its edge shows on hover. */
+
+/* The hover tint, laid over the element's own fill. */
+
+/* The picked item of a segmented control. */
+
+/* The primary button's face: black on light, white on dark. */
+
+/* Keyboard focus on a button, a tab, a link. */
+
+/* A focused input: an accent edge and a soft halo. */
+
+/* An input with an error. */
+:global {
     .rz-dropdown-checkbox {
       position: relative;
       display: flex;
@@ -49,13 +64,12 @@
       font-size: var(--rz-text-sm);
       outline: none;
       padding-block: var(--rz-size-1-5);
-      & [data-disabled] {
+      &[data-disabled] {
         pointer-events: none;
         opacity: 0.5;
       }
-      & .rz-dropdown-checkbox[data-highlighted] {
-        background-color: hsl(var(--rz-gray-4));
-        color: hsl(var(--rz-color-accent-fg) / 1);
+      &[data-highlighted] {
+        background-color: var(--rz-bg-active);
       }
     }
 

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-content.css

@@ -1,11 +1,13 @@
 .rz-dropdown-content {
-  background-color: var(--rz-popover-bg);
-  z-index: 120;
+  background-color: var(--rz-bg-float);
+  box-shadow:
+    0 0 0 1px var(--rz-border),
+    var(--rz-shadow-float);
+  /* Over the sidebar (300) and a dialog (1010), which a menu can open from. */
+  z-index: 1100;
   min-width: var(--min-width, 8rem);
   border-radius: var(--rz-radius-lg);
-  border: var(--rz-border);
   padding: var(--rz-size-1);
-  box-shadow: var(--rz-shadow-xl);
 }
 .rz-dropdown-content:focus {
   outline: none;

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-item.css

@@ -13,7 +13,7 @@
   padding-inline: var(--rz-size-2);
 
   &[data-highlighted] {
-    background-color: var(--rz-popover-highlight-bg);
+    background-color: var(--rz-bg-active);
   }
 
   &[data-disabled] {

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-radio-item.css

@@ -19,7 +19,7 @@
 }
 
 .rz-dropdown-radio[data-highlighted] {
-  background-color: var(--rz-popover-highlight-bg);
+  background-color: var(--rz-bg-active);
 }
 
 .rz-dropdown-radio__indicator {

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-separator.css

@@ -1,5 +1,5 @@
 .rz-dropdown-separator {
-  background-color: hsl(var(--rz-color-border));
+  background-color: var(--rz-border);
   margin-block: var(--rz-size-1);
   height: 1px;
 }