astro-better-details 0.1.2 → 0.1.4

package/Details.astro

@@ -1,14 +1,14 @@
 ---
-interface Props {
-  open?: boolean;
-  class?: string;
+import type { HTMLAttributes } from 'astro/types';
+
+interface Props extends HTMLAttributes<'details'> {
   title?: string;
 }
 
-const { open, class: cls, title } = Astro.props;
+const { open, class: cls, title, ...rest } = Astro.props;
 ---
 
-<details class:list={['abt-details', cls]} open={open}>
+<details class:list={['abt-details', cls]} open={open} {...rest}>
   <summary class="abt-details-summary">
     <span class="abt-details-title">{title}<slot name="title" /></span>
     <svg class="abt-details-chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -32,8 +32,9 @@ const { open, class: cls, title } = Astro.props;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
+    gap: 0.5rem;
+    /* about 40px tall at a 24px line height, above the 24px WCAG 2.2 target minimum */
+    padding: 0.5rem 0.75rem;
     cursor: pointer;
     list-style: none;
     background: var(--abt-details-summary-bg, #f9fafb);
@@ -43,6 +44,12 @@ const { open, class: cls, title } = Astro.props;
     border-bottom: 1px solid transparent;
   }
 
+  /* the container's overflow: hidden would clip an outside focus ring */
+  .abt-details-summary:focus-visible {
+    outline: 2px solid var(--abt-details-focus, currentColor);
+    outline-offset: -2px;
+  }
+
   .abt-details-summary::-webkit-details-marker { display: none; }
   .abt-details-summary::marker { display: none; }
 
@@ -68,6 +75,6 @@ const { open, class: cls, title } = Astro.props;
   }
 
   .abt-details-body {
-    padding: 1rem;
+    padding: 0.5rem 0.75rem;
   }
 </style>

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright (c) 2026 Better Static Sites
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -10,21 +10,32 @@ npm install astro-better-details
 
 ## Basic usage
 
+Pass a plain string via the `title` prop:
+
 ```mdx
 import Details from 'astro-better-details/Details.astro';
 
+<Details title="What is this?">
+  This is the expanded content. It can contain any Markdown or MDX.
+</Details>
+```
+
+Use the `title` slot when the header needs inline markup -- code, links, or components:
+
+```mdx
 <Details>
-  <span slot="title">What is this?</span>
+  <span slot="title">Why use <code>astro-better-details</code>?</span>
   This is the expanded content. It can contain any Markdown or MDX.
 </Details>
 ```
 
-The `title` slot holds the always-visible summary label. The default slot holds the body content shown when expanded.
+The `title` slot takes precedence over the `title` prop if both are provided. The default slot holds the body content shown when expanded.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
+| `title` | `string` | -- | Plain-text header label; use the `title` slot for inline markup |
 | `open` | `boolean` | `false` | Render the component already expanded |
 | `class` | `string` | -- | Additional CSS class(es) applied to the `<details>` element |
 
@@ -32,11 +43,9 @@ The `title` slot holds the always-visible summary label. The default slot holds
 
 | Slot | Description |
 |------|-------------|
-| `title` (named) | Label shown in the clickable summary bar |
+| `title` (named) | Header content with inline markup; takes precedence over the `title` prop |
 | default | Body content, shown when expanded |
 
-The title slot accepts any inline content -- plain text, backtick code, links, or JSX components.
-
 ## Theming
 
 The component uses CSS custom properties for all visual values. Override them on `.abt-details` or any parent selector to match your brand:

package/package.json

@@ -1,15 +1,31 @@
 {
   "name": "astro-better-details",
-  "version": "0.1.2",
-  "type": "module",
+  "version": "0.1.4",
   "description": "Expandable details/disclosure component for Astro",
-  "author": "Nathan Contino <ncontino@lambdalatitudinarians.org>",
+  "keywords": [
+    "astro",
+    "astro-component",
+    "details",
+    "disclosure"
+  ],
   "license": "MIT",
-  "keywords": ["astro", "astro-component", "details", "disclosure"],
+  "author": "Nathan Contino <ncontino@lambdalatitudinarians.org>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/better-static-sites/better-static-sites.github.io.git",
+    "directory": "astro-better-details"
+  },
+  "homepage": "https://better-static-sites.github.io",
+  "bugs": {
+    "url": "https://github.com/better-static-sites/better-static-sites.github.io/issues"
+  },
+  "type": "module",
   "exports": {
     "./Details.astro": "./Details.astro"
   },
-  "files": ["Details.astro"],
+  "files": [
+    "Details.astro"
+  ],
   "peerDependencies": {
     "astro": ">=4.0.0"
   }