@sakura-ui/sakura-ui 0.5.3 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/sakura-ui",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "keywords": [],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
@@ -19,10 +19,10 @@
     "pnpm": ">=9.15.1"
   },
   "dependencies": {
-    "@sakura-ui/core": "0.5.2",
-    "@sakura-ui/forms": "0.4.3",
     "@sakura-ui/helper": "0.0.10",
-    "@sakura-ui/tailwind-theme-plugin": "0.4.2"
+    "@sakura-ui/tailwind-theme-plugin": "0.4.2",
+    "@sakura-ui/forms": "0.4.3",
+    "@sakura-ui/core": "0.5.3"
   },
   "peerDependencies": {
     "react": "^19.2.1",

package/packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakura-ui/core",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "",
   "keywords": [
     "react",

package/packages/core/src/components/Link.tsx

@@ -20,6 +20,22 @@ export namespace Link {
   }
 }
 
+/**
+ * A link that opens elsewhere must not hand the opener to the page it opens.
+ * Merged with what the caller asked for rather than replacing it, so a
+ * `rel="nofollow"` does not take `noopener` away with it.
+ */
+const externalRel = (rel: unknown): string =>
+  Array.from(
+    new Set([
+      'noopener',
+      'noreferrer',
+      ...String(rel ?? '')
+        .split(/\s+/)
+        .filter(Boolean)
+    ])
+  ).join(' ')
+
 export const Link = <T extends React.ElementType = 'a'>(
   props: Link.Props<T> & Omit<React.ComponentProps<T>, keyof Link.Props<T>>
 ) => {
@@ -32,6 +48,7 @@ export const Link = <T extends React.ElementType = 'a'>(
         className={cx(style, className)}
         target="_blank"
         {...restProps}
+        rel={externalRel(restProps.rel)}
       >
         <span>{children}</span>
         <Icon opticalSize={16} altText="Opens in new tab" className="ml-0.5">

package/packages/core/tests/Link.test.tsx

@@ -39,6 +39,47 @@ describe('Link', () => {
     expect(text).toBeInTheDocument()
   })
 
+  it('should not hand the opener to the page it opens', async () => {
+    render(<Link href="https://example.com">Button</Link>)
+
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'rel',
+      'noopener noreferrer'
+    )
+  })
+
+  it('should keep the rel the caller asked for as well', async () => {
+    render(
+      <Link href="https://example.com" rel="nofollow">
+        Button
+      </Link>
+    )
+
+    const rel = screen.getByRole('link').getAttribute('rel')?.split(' ')
+    expect(rel).toContain('noopener')
+    expect(rel).toContain('noreferrer')
+    expect(rel).toContain('nofollow')
+  })
+
+  it('should not repeat a rel the caller already asked for', async () => {
+    render(
+      <Link href="https://example.com" rel="noopener">
+        Button
+      </Link>
+    )
+
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'rel',
+      'noopener noreferrer'
+    )
+  })
+
+  it('should leave a link that stays on the page without a rel', async () => {
+    render(<Link href="/">Button</Link>)
+
+    expect(screen.getByRole('link')).not.toHaveAttribute('rel')
+  })
+
   it('should labeled text from Button', async () => {
     render(<Link href="/">here</Link>)
 

package/packages/forms/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
 $ rimraf dist
 $ run-p build:*
-$ vite build
 $ tsc && tsc-alias
+$ vite build
 vite v7.3.6 building client environment for production...
 transforming...
 ✓ 25 modules transformed.
@@ -9,4 +9,4 @@ rendering chunks...
 computing gzip size...
 dist/index.es.js  24.22 kB │ gzip: 6.09 kB
 dist/index.cjs.js  16.80 kB │ gzip: 5.23 kB
-✓ built in 667ms
+✓ built in 378ms

package/packages/helper/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
 $ rimraf dist
 $ run-p build:*
-$ tsc && tsc-alias
 $ vite build
+$ tsc && tsc-alias
 vite v7.3.6 building client environment for production...
 transforming...
 ✓ 6 modules transformed.
@@ -9,4 +9,4 @@ rendering chunks...
 computing gzip size...
 dist/index.es.js  2.76 kB │ gzip: 0.96 kB
 dist/index.cjs.js  2.58 kB │ gzip: 0.95 kB
-✓ built in 264ms
+✓ built in 194ms

package/packages/markdown/.turbo/turbo-build.log

@@ -1,12 +1,12 @@
 $ rimraf dist
 $ run-p build:*
-$ vite build
 $ tsc && tsc-alias
+$ vite build
 vite v7.3.6 building client environment for production...
 transforming...
-✓ 31 modules transformed.
+✓ 32 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.es.js  129.42 kB │ gzip: 39.48 kB
-dist/index.cjs.js  98.44 kB │ gzip: 34.86 kB
-✓ built in 825ms
+dist/index.es.js  130.23 kB │ gzip: 39.67 kB
+dist/index.cjs.js  98.98 kB │ gzip: 35.01 kB
+✓ built in 485ms

package/packages/markdown/README.md

@@ -116,6 +116,22 @@ instead.
 ```
 <img width="288" alt="スクリーンショット 2024-07-26 23 44 39" src="https://github.com/user-attachments/assets/997ccf27-4d83-4fb5-b173-ae94cd7d76cb">
 
+### Image
+
+`![alt](src)` has nowhere to put a size, so `::img` takes one. `width` and
+`height` are pixels; either on its own leaves the other to follow the
+proportions of the image.
+
+```
+::img{src=/photo.jpg alt="A field at dawn" width=520}
+```
+
+A width also caps the image at the width of its column, so a number larger than
+the screen shrinks rather than overflowing.
+
+Write `alt` for anything a reader would miss without it. An image that only
+decorates takes `alt=""`, which tells a screen reader to skip it.
+
 ### YouTube
 
 The address of the video, as it is copied from the browser. The watch page, the
@@ -347,7 +363,7 @@ using them is what keeps a new directive behaving like the others:
 
 | | |
 |---|---|
-| `root(…)` | Attributes for the element the directive **is**. Adds the id from `{#name}`, and `data-sakura`, which tells `decorate.ts` the element is dressed already and to leave its classes alone. Headings are the exception: one rendered by a directive still has an id generated for it and still reaches the table of contents, which is how a card title gets there. |
+| `root(…)` | Attributes for the element the directive **is**. Adds the id from `{#name}`, and `data-styled`, which tells `decorate.ts` the element is dressed already and to leave its classes alone. Headings are the exception: one rendered by a directive still has an id generated for it and still reaches the table of contents, which is how a card title gets there. |
 | `own(…)` | The same without the id, for elements **inside** it. A link card's title is a heading around an anchor; only the heading is the directive. |
 | `body()` | The children, already rendered — inline for a `TEXT` or `LEAF`, block for a `CONTAINER`. |