@lapis-notes/bases 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Bases changelog
 
+## 0.1.4
+
+### Patch Changes
+
+- Restore property-picker accessibility with unique search/result associations, named independent visibility/edit controls in grid rows, and readable hidden-property labels. Preserve keyboard activation without toggling visibility while opening an editor.
+
+- [#16](https://github.com/lapismd/lapis-plugins/pull/16) [`a6f080e`](https://github.com/lapismd/lapis-plugins/commit/a6f080e9e09197dc883968bbd8e15cbec55a6b8e) Thanks [@stevejuma](https://github.com/stevejuma)! - Preserve theme contrast for the results-limit label in the query menu.
+
 ## 0.1.3
 
 ### Patch Changes

package/README.md

@@ -13,7 +13,7 @@ Register the exported plugin class in the application's `PluginProfile`. Import
 registration so the host owns its lifecycle.
 
 The runtime plugin ID is `bases`. A matching signed
-`bases-0.1.3.lapis-plugin` archive is attached to the
+`bases-0.1.4.lapis-plugin` archive is attached to the
 package-scoped GitHub release for manual or registry installation.
 
 See the [repository README](https://github.com/lapismd/lapis-plugins#readme) for

package/dist/bases-view/components/column-visibility.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  const commandListId = $props.id();
   import * as Popover from "@lapismd/design-core/shadcn/popover";
   import * as Command from "@lapismd/design-core/shadcn/command";
   import * as DropdownMenu from "@lapismd/design-core/shadcn/dropdown-menu";
@@ -220,7 +221,7 @@
             <DropdownMenu.Root>
               <DropdownMenu.Trigger>
                 {#snippet child({ props }: { props: Record<string, unknown> })}
-                  <Button {...props} size="sm" variant="ghost"
+                  <Button {...props} size="sm" variant="ghost" aria-label={`${name} property actions`}
                     ><Ellipsis /></Button
                   >
                 {/snippet}
@@ -324,9 +325,11 @@
         </div>
       </Command.Root>
     {:else}
-      <Command.Root>
-        <Command.Input placeholder="Find or create" />
-        <Command.List class="bases-style-p-1-eb6a3c">
+      <Command.Root label="Filter properties">
+        <Command.Input aria-controls={commandListId} aria-haspopup="grid" placeholder="Find or create" />
+        <Command.List id={commandListId} class="bases-style-p-1-eb6a3c">
+          {#snippet child({ props })}
+          <div {...props} role="grid" aria-label="Properties">
           <Command.Empty>No results found.</Command.Empty>
           {#each sortedColumns as column (column.id)}
             <Command.Item
@@ -334,33 +337,58 @@
                 controller.toggleVisibility(column.id);
               }}
             >
-              <div
-                data-ui-part="bases-option-indicator"
-                data-selected={controller.isVisible(column.id)}
-                class={cn(
-                  "bases-style-mr-2-d2347e bases-style-flex-60fbb7 bases-style-size-4-f7b5fa bases-style-items-center-3960ff bases-style-justify-center-86843c bases-style-rounded-sm-36d446 border bases-style-border-var-interactive-accent-f46c93",
-                  controller.isVisible(column.id)
-                    ? "bases-style-ring-ring-3e1868 bases-style-border-none-4a5f0e bases-style-bg-var-interactive-accent-c58cc0 bases-style-text-var-text-on-accent-22b2b1 hover:ring bases-style-hover-ring-2-8a0edf"
-                    : "bases-style-opacity-50-0b8c50 [&_svg]:invisible",
-                )}
-              >
-                <CheckIcon class="bases-style-size-4-f7b5fa" />
+              {#snippet child({ props })}
+              <div {...props} role="row">
+              <div role="gridcell" class="bases-property-picker__visibility">
+                <button
+                  type="button"
+                  class="bases-property-picker__toggle"
+                  aria-label={`Toggle ${column.displayName ?? normalizeName(column.id)} visibility`}
+                  aria-pressed={controller.isVisible(column.id)}
+                  onkeydown={(event) => event.stopPropagation()}
+                  onclick={(event) => {
+                    event.stopPropagation();
+                    controller.toggleVisibility(column.id);
+                  }}
+                >
+                  <div
+                    data-ui-part="bases-option-indicator"
+                    data-selected={controller.isVisible(column.id)}
+                    class={cn(
+                      "bases-style-mr-2-d2347e bases-style-flex-60fbb7 bases-style-size-4-f7b5fa bases-style-items-center-3960ff bases-style-justify-center-86843c bases-style-rounded-sm-36d446 border bases-style-border-var-interactive-accent-f46c93",
+                      controller.isVisible(column.id)
+                        ? "bases-style-ring-ring-3e1868 bases-style-border-none-4a5f0e bases-style-bg-var-interactive-accent-c58cc0 bases-style-text-var-text-on-accent-22b2b1 hover:ring bases-style-hover-ring-2-8a0edf"
+                        : "bases-style-opacity-50-0b8c50 [&_svg]:invisible",
+                    )}
+                  >
+                    <CheckIcon class="bases-style-size-4-f7b5fa" />
+                  </div>
+                  <Icon name={[column.icon ?? "lucide-info"]} />
+                  <span
+                    class={cn({ "bases-style-text-muted-foreground-bfa603": !controller.isVisible(column.id) })}
+                    >{column.displayName ?? normalizeName(column.id)}</span
+                  >
+                </button>
               </div>
-              <Icon name={[column.icon ?? "lucide-info"]} />
-              <span
-                class={cn({ "bases-style-opacity-40-2a2db4": !controller.isVisible(column.id) })}
-                >{column.displayName ?? normalizeName(column.id)}</span
-              >
+              <div role="gridcell">
               <Command.Shortcut>
                 <button
                   class="bases-style-hover-bg-border-2e3f11 bases-style-rounded-sm-36d446 bases-style-p-1-eb6a3c"
+                  type="button"
+                  aria-label={`Edit ${column.displayName ?? normalizeName(column.id)}`}
+                  onkeydown={(event) => event.stopPropagation()}
                   onclick={(evt) => editColumn(evt, column)}
                 >
                   <ChevronRight />
                 </button>
               </Command.Shortcut>
+              </div>
+              </div>
+              {/snippet}
             </Command.Item>
           {/each}
+          </div>
+          {/snippet}
         </Command.List>
       </Command.Root>
     {/if}
@@ -386,3 +414,24 @@
     {/if}
   </Popover.Content>
 </Popover.Root>
+
+<style>
+  .bases-property-picker__visibility {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .bases-property-picker__toggle {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing, 0.25rem);
+    width: 100%;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+</style>

package/dist/bases-view/components/filters/filter-properties.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  const commandListId = $props.id();
   import * as Popover from "@lapismd/design-core/shadcn/popover";
   import { Button } from "@lapismd/design-core/shadcn/button";
   import * as Command from "@lapismd/design-core/shadcn/command";
@@ -47,8 +48,8 @@
   </Popover.Trigger>
   <Popover.Content class="bases-style-w-310px-8357f2 bases-style-p-0-8a539c" align="start">
     <Command.Root>
-      <Command.Input placeholder="Find or create" />
-      <Command.List class="bases-style-p-1-eb6a3c">
+      <Command.Input aria-controls={commandListId} placeholder="Find or create" />
+      <Command.List id={commandListId} class="bases-style-p-1-eb6a3c">
         <Command.Empty>No results found.</Command.Empty>
         {#each controller
           .getAllColumns()

package/dist/bases-view/components/filters/filter-row.svelte

@@ -3,6 +3,7 @@
 </script>
 
 <script lang="ts">
+  const commandListId = $props.id();
   import type { Table } from "@tanstack/table-core";
   import * as Popover from "@lapismd/design-core/shadcn/popover";
   import * as Command from "@lapismd/design-core/shadcn/command";
@@ -235,8 +236,8 @@
         </Popover.Trigger>
         <Popover.Content class="bases-style-w-max-2f935d bases-style-p-0-8a539c" align="start">
           <Command.Root>
-            <Command.Input placeholder="Find or create" />
-            <Command.List class="bases-style-p-1-eb6a3c">
+            <Command.Input aria-controls={commandListId} placeholder="Find or create" />
+            <Command.List id={commandListId} class="bases-style-p-1-eb6a3c">
               <Command.Empty>No results found.</Command.Empty>
               {#each controller.getAllColumns() as column (column.id)}
                 <Command.Item

package/dist/bases-view/components/group/group-root.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  const commandListId = $props.id();
   import * as Command from "@lapismd/design-core/shadcn/command";
   import * as Popover from "@lapismd/design-core/shadcn/popover";
   import * as Select from "@lapismd/design-core/shadcn/select";
@@ -66,8 +67,8 @@
   </Popover.Trigger>
   <Popover.Content class="bases-style-w-320px-57f3af bases-style-p-0-8a539c" align="start">
     <Command.Root>
-      <Command.Input placeholder="Group by property" />
-      <Command.List class="bases-style-p-1-eb6a3c">
+      <Command.Input aria-controls={commandListId} placeholder="Group by property" />
+      <Command.List id={commandListId} class="bases-style-p-1-eb6a3c">
         <Command.Empty>No properties found.</Command.Empty>
         {#each controller.getAllColumns() as column (column.id)}
           <Command.Item onSelect={() => setGroupBy(column.id)}>

package/dist/bases-view/components/limit.svelte

@@ -55,9 +55,7 @@
     <Command.Root>
       <div class="bases-style-p-2-7660b4">
         <div class="bases-style-grid-f3c543 bases-style-grid-cols-1-d7c833 bases-style-items-center-3960ff bases-style-gap-2-77a2a2 bases-style-px-2-d5eab2 bases-style-pt-1-6b7d6e">
-          <Label for="column_name" class="bases-style-text-sm-fc7473 bases-style-opacity-50-0b8c50"
-            >Limit number of results</Label
-          >
+          <Label for="column_name">Limit number of results</Label>
           <Input
             type="number"
             placeholder="e.g 10"

package/dist/bases-view/components/sort/sort-root.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  const commandListId = $props.id();
   import { DragDropProvider } from "@dnd-kit/svelte";
   import type { DragEndEvent } from "@dnd-kit/dom";
   import { arrayMove } from "@dnd-kit/helpers";
@@ -144,8 +145,8 @@
           </Popover.Trigger>
           <Popover.Content class="bases-style-w-max-2f935d bases-style-p-0-8a539c" align="start">
             <Command.Root>
-              <Command.Input placeholder="Group by property" />
-              <Command.List class="bases-style-p-1-eb6a3c">
+              <Command.Input aria-controls={commandListId} placeholder="Group by property" />
+              <Command.List id={commandListId} class="bases-style-p-1-eb6a3c">
                 <Command.Empty>No results found.</Command.Empty>
                 {#each controller.getAllColumns() as column (column.id)}
                   <Command.Item onSelect={() => setGroupBy(column.id)}>

package/dist/bases-view/components/sort/sort-row.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  const commandListId = $props.id();
   import { createDraggable, createDroppable } from "@dnd-kit/svelte";
   import * as Popover from "@lapismd/design-core/shadcn/popover";
   import * as Command from "@lapismd/design-core/shadcn/command";
@@ -124,8 +125,8 @@
         </Popover.Trigger>
         <Popover.Content class="bases-style-w-max-2f935d bases-style-p-0-8a539c" align="start">
           <Command.Root>
-            <Command.Input placeholder="Find or create" />
-            <Command.List class="bases-style-p-1-eb6a3c">
+            <Command.Input aria-controls={commandListId} placeholder="Find or create" />
+            <Command.List id={commandListId} class="bases-style-p-1-eb6a3c">
               <Command.Empty>No results found.</Command.Empty>
               {#each controller.getAllColumns() as column (column.id)}
                 <Command.Item

package/dist/bases-view/view-settings.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  const commandListId = $props.id();
   import { Icon } from "@lapis-notes/api/icon";
   import { Label } from "@lapismd/design-core/shadcn/label";
   import { Input } from "@lapismd/design-core/shadcn/input";
@@ -297,8 +298,8 @@
           </Popover.Trigger>
           <Popover.Content class="bases-style-w-310px-8357f2 bases-style-p-0-8a539c" align="start">
             <Command.Root>
-              <Command.Input placeholder="Find or create" />
-              <Command.List class="bases-style-p-1-eb6a3c">
+              <Command.Input aria-controls={`${commandListId}-${option.key}`} placeholder="Find or create" />
+              <Command.List id={`${commandListId}-${option.key}`} class="bases-style-p-1-eb6a3c">
                 <Command.Empty>No results found.</Command.Empty>
                 {#each controller
                   .getAllColumns()

package/manifest.json

@@ -1,12 +1,12 @@
 {
   "id": "bases",
   "name": "Bases",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "minAppVersion": "0.1.0",
   "description": "Build table, card, and grouped views from Markdown properties",
   "author": "Lapis Notes Bases",
   "authorUrl": "https://app.lapis.md",
-  "authorAvatarUrl": "https://www.gravatar.com/avatar/1df68d9ff087b0dd72fd8626056fca7f?s=128&d=404",
+  "authorAvatarUrl": "https://gravatar.com/avatar/f7226d5f9cf07af2a6a60d3ab11413abb9d2e2eb60f2d5cce17356845a166155?size=256&d=initials",
   "isDesktopOnly": false,
   "lapis": {
     "manifestVersion": 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lapis-notes/bases",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Lapis Notes Bases plugin",
   "license": "Apache-2.0",
   "type": "module",