diff --git a/package-lock.json b/package-lock.json index 61e116a59..d318953cc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13984,6 +13984,7 @@ "@shoelace-style/localize": "^3.2.1", "composed-offset-position": "^0.0.6", "lit": "^3.2.1", + "nanoid": "^5.1.5", "qr-creator": "^1.0.0", "style-observer": "^0.0.7" }, @@ -14010,6 +14011,23 @@ "engines": { "node": ">=14.17.0" } + }, + "packages/webawesome/node_modules/nanoid": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz", + "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.js" + }, + "engines": { + "node": "^18 || >=20" + } } } } diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css index ba413cb2c..8489f562e 100644 --- a/packages/webawesome/docs/assets/styles/docs.css +++ b/packages/webawesome/docs/assets/styles/docs.css @@ -144,8 +144,8 @@ wa-page > header { border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border); font-size: var(--wa-font-size-s); line-height: var(--wa-line-height-condensed); - margin: 0; padding-inline-start: var(--wa-space-m); + margin: 0; } ul ul { @@ -158,6 +158,7 @@ wa-page > header { li { list-style: none; + margin: 0; + li { margin-block-start: var(--wa-space-m); @@ -620,12 +621,6 @@ table.colors { min-inline-size: 8rem; } -/* Utilities */ -.two-columns { - columns: 2; - gap: 1rem; -} - /* Component API tables */ wa-scroller:has(.component-table) { margin-block-end: var(--wa-space-xl); diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index 15f7c79f5..38168db5a 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -15,6 +15,8 @@ Components with the Experimental badge sh - Fixed a bug in `` where `appearance="pulse"` was not working as expected [pr:1173] - Fixed a missing TypeScript type for `` for its `attention` property missing `bounce` value. [pr:1173] - Fixed a bug in `` that prevented the hint from showing up [pr:1174] +- Fixed the missing `nanoid` dependency in `package.json` [discuss:1139] +- Fixed a bug in `` that prevented the hint from showing up [discuss:1172] ## 3.0.0-beta.2 diff --git a/packages/webawesome/docs/docs/utilities/native.md b/packages/webawesome/docs/docs/utilities/native.md index 1d9ee27ba..6d0759dfc 100644 --- a/packages/webawesome/docs/docs/utilities/native.md +++ b/packages/webawesome/docs/docs/utilities/native.md @@ -5,27 +5,52 @@ layout: page-outline tags: styleUtilities --- -Web Awesome provides optional Native Styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit. +Native styles use design tokens to spruce up native HTML elements so that they match the look and feel of your theme. While these native styles are completely optional, they're a great starting point for a cohesive design and a huge help when using a combination of native elements and Web Awesome components in your project. -## Installation +## Using native styles -To use all Web Awesome page styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project: +To use all Web Awesome styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project: ```html ``` -Or, to _only_ include styles for native elements: +Or, if you only want styles for native elements, include the default theme and native styles individually: ```html + ``` -## Elements +You can additionally include any pre-made [theme](/docs/themes/) or [color palette](/docs/color-palettes/) to change the look of native elements. + +## Content flow + +Native styles set default space between many block-level HTML elements using the `--wa-content-spacing` token from your theme. This helps ensure that your content is readable. + +```html {.example} +

Curabitur odio ligula

+

Fusce mollis quam lorem, et gravida arcu laoreet ut. Pellentesque et malesuada mi. Morbi faucibus nisl nec nulla porta, ac scelerisque elit finibus.

+
The Road goes ever on and on
+Out from the door where it began.
+

Donec varius, ipsum sit amet lobortis tristique, quam arcu pellentesque turpis, non porta lacus arcu non arcu. Morbi luctus at nisl sit amet faucibus.

+
+
    +
  • Aenean imperdiet
    • +
  • Vivamus consectetur at est
    • +
  • Quisque vel leo in leo semper
    • +
+``` + +To remove this default spacing, you can set `--wa-content-spacing: 0` in your styles. + +## Typography + +Native styles use [typography design tokens](/docs/tokens/typography/) to style text elements. A number of styles — such as `color`, `font-family`, `font-size`, `font-weight`, and `line-height` — are set on the `` element to be inherited by child elements. ### Headings -Semantic heading elements with proper hierarchy and styling. +Create headings with `

` through `

`. Headings use tokens with the `-heading` suffix, condensed line height, and `text-wrap: balance` for a prominent yet compact appearance. ```html {.example}

Heading 1

@@ -38,7 +63,7 @@ Semantic heading elements with proper hierarchy and styling. ### Paragraphs -Standard paragraph text with optimal spacing and readability. +Create paragraphs with `

`. Paragraphs inherit the default text styles set on the `` element and use `text-wrap: pretty` to prevent orphaned lines in supported browsers. ```html {.example}

@@ -55,7 +80,7 @@ Standard paragraph text with optimal spacing and readability. ### Blockquotes -Styled quotations that stand out from regular text. +Emphasize longer quotations with `

`. Block quotes use your theme's serif font family and a leading border to stand out. ```html {.example}
@@ -67,51 +92,51 @@ Styled quotations that stand out from regular text. ### Lists -Organized content in bulleted or numbered format with proper nesting support. +Create ordered and unordered lists with `
    ` and `
      `, plus `
    • ` for list items within. ```html {.example} -
        -
      • List item 1
        • -
      • - List item 2 -
          -
        • Subitem a
          • -
        • Subitem b
          • -
        -
        • -
      • List item 3
        • -
      + ``` -### Description Lists - -Term and definition pairs for glossaries and descriptions. +Use `
      ` to create lists of terms (`
      `) and definitions (`
      `). ```html {.example}
      -
      Definition 1
      +
      First term
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      -
      Definition 2
      +
      Second term
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      -
      Definition 3
      +
      Final term
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. @@ -119,13 +144,153 @@ Term and definition pairs for glossaries and descriptions.
      ``` +### Code blocks + +Create code blocks or other preformatted text with `
      `. Preformatted text uses your theme's monospace font family and a subtle background color.
+
+```html {.example}
+
      +// do a thing
+export function thing() {
+  return true;
+}
+
      
+```
+
+### Inline text
+
+Use any inline text element like ``, ``, ``, ``, and others to stylize or emphasize text.
+
+```html {.example}
+
+```
+
+## Widgets & media
+
+### Media
+
+Add responsive media with ``, ``, `A gray kitten lays next to a toy
+```
+
+### Tables
+
+Structure tabular data with `` and related elements like ``, ``, ``, and `
      `, `
      `, `
      `.
+
+```html {.example}
+
+  
+  
+    
+      
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+  
+
      
+    This <caption> describes the table
+  
      First columnSecond columnThird columnFinal column
      DataDataDataData
      DataDataDataData
      DataDataDataData
      DataDataDataData
      
+```
+
+Add the `wa-hover-rows` class to highlight table rows on hover and the `wa-zebra-rows` class to add alternating row colors to your table.
+
+```html {.example}
+
+  
+    
+      
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+  
+
+```
+
 ### Details
 
-Collapsible content sections with expand/collapse functionality.
+Create disclosure widgets with `
      ` and ``. Details closely match the appearance of [``](/docs/components/details/).
 
 ```html {.example}
 
      
-  Tincidunt nunc pulvinar
+  Summary
   
      
     Ut lectus arcu bibendum at varius. Convallis a cras semper auctor neque vitae. Odio pellentesque diam volutpat
     commodo sed egestas. Amet dictum sit amet justo donec enim diam vulputate ut.
@@ -135,7 +300,7 @@ Collapsible content sections with expand/collapse functionality.
 
 ### Dialog
 
-Modal dialog windows for alerts, confirmations, and overlays.
+Create modal and non-modal dialog boxes with `
      `. Dialogs closely match the appearance of [``](/docs/components/dialog/).
 
 ```html {.example}
 
@@ -155,55 +320,9 @@ Modal dialog windows for alerts, confirmations, and overlays.
 
 ```
 
-### Inline Text
+### Progress
 
-Various text formatting elements for emphasis and semantic meaning.
-
-```html {.example}
-
      
-  
      Bold
      
-  
      Italic
      
-  
      Underline
      
-  
      Strike-through
      
-  
      Deleted
      
-  
      Inserted
      
-  
      Small
      
-  
      
-    Subscript Sub
-  
      
-  
      
-    Superscript Sup
-  
      
-  
      Abbr.
      
-  
      Highlighted
      
-  
      Link text
      
-  
      Inline code
      
-  
      Keyboard
      
-
      
-```
-
-### Code Blocks
-
-Formatted code snippets with proper syntax styling.
-
-```html {.example}
-
      -// do a thing
-export function thing() {
-  return true;
-}
-
      
-```
-
-### Images
-
-Responsive images with proper scaling and styling.
-
-![A gray kitten lays next to a toy](https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)
-
-### Progress Bars
-
-Visual indicators for task completion and loading states.
+Create progress indicators with ``. Progress indicators closely match the appearance of [``](/docs/components/progress-bar/).
 
 ```html {.example}
 
@@ -211,151 +330,43 @@ Visual indicators for task completion and loading states.
 
 ```
 
-### Tables
+## Forms
 
-Structured data presentation with clean styling, optional row highlighting on hover, and optional zebra striping.
-
-```html {.example}
-
-  
-  
-    
-      
-      
-      
-      
-    
-  
-  
-    
-      
-      
-      
-      
-    
-    
-      
-      
-      
-      
-    
-    
-      
-      
-      
-      
-    
-    
-      
-      
-      
-      
-    
-  
-
      
-    I'm just a table
-  
      Column 1Column 2Column 3Column 4
      CellCellCellCell
      CellCellCellCell
      CellCellCellCell
      CellCellCellCell
      
-```
-
-You can use the `wa-hover-rows` class to highlight table rows on hover and the `wa-zebra-rows` class to add alternating row colors to your table.
-
-```html {.example}
-
-  
-  
-    
-      
-      
-      
-      
-    
-  
-  
-    
-      
-      
-      
-      
-    
-    
-      
-      
-      
-      
-    
-    
-      
-      
-      
-      
-    
-    
-      
-      
-      
-      
-    
-  
-
-```
-
-## Form Controls
+Native styles use [form control design tokens](/docs/tokens/component-groups/#form-controls) to style form elements like buttons and inputs. Form elements additionally inherit `font-family` from the `` element.
 
 ### Buttons
 
-Use the [variant utility classes](../utilities/color.md) to set the button's semantic variant.
+Create buttons with `
+
+
+
+
+```
+
+Add the `wa-brand`, `wa-neutral`, `wa-success`, `wa-warning`, or `wa-danger` class to specify the button's [color variant](/docs/utilities/color/).
+
+
+```html {.example}
+
 
 
 
 
 ```
 
-Use the [appearance utility classes](/docs/utilities/appearance) to change the button's visual appearance:
+Add the `wa-accent`, `wa-filled`, `wa-outlined`, or `wa-plain` class to specify the button's visual appearance.
 
 ```html {.example}
-
      
-  
-  
-  
-  
-  
-
      
-
      
-  
-  
-  
-  
-  
-
      
-
      
-  
-  
-  
-  
-  
-
      
-
      
-  
-  
-  
-  
-  
-
      
-
      
-  
-  
-  
-  
-  
-
      
+
+
+
+
+
 ```
 
-Use the [size utility classes](../utilities/size.md) to change a button's size.
+Add the `wa-size-s`, `wa-size-m`, or `wa-size-l` class to specify the size of the button.
 
 ```html {.example}
 
@@ -363,131 +374,113 @@ Use the [size utility classes](../utilities/size.md) to change a button's size.
 
 ```
 
-Use the `wa-pill` class to give buttons rounded edges.
+Add the `wa-pill` class to give buttons rounded edges.
 
 ```html {.example}
-
-
-
+
 ```
 
-### Checkboxes
+### Form controls
 
-Multi-select form controls with checked, indeterminate, and disabled states.
+Create a variety of form controls with ``, `
+  
+  
+
 
 
 ```
 
-### Radios
-
-Single-select form controls for mutually exclusive choices.
-
-You can wrap native radios in a flex container to give them a horizontal or vertical orientation with even spacing. The convenience [`wa-cluster`](/docs/utilities/cluster) and [`wa-stack`](/docs/utilities/stack) utilities make this easy.
+Add the `wa-filled` class to an input to give it a filled background.
 
 ```html {.example}
-
-
-
-```
-
-### Selects
-
-Dropdown menus for choosing from a list of options.
-
-```html {.example}
-
+  
+
 ```
 
-### Sliders
-
-Range inputs for selecting numeric values within a specified range.
+Add the `wa-pill` class to an input or select to give it rounded edges.
 
 ```html {.example}
-
-```
-
-### Text Fields
-
-Various input types for collecting user text and data.
-
-```html {.example}
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-Add the `wa-pill` class to an `` to make it pill-shaped.
-
-```html {.example}
-
-```
-
-### Color Pickers
-
-Visual color selection interface with hex value input.
-
-```html {.example}
-
-```
-
-### Date & Time Pickers
-
-Specialized inputs for selecting dates, times, and datetime values.
-
-```html {.example}
-
-
-
-
-
-```
-
-### Textareas
-
-Multi-line text input fields for longer content.
-
-```html {.example}
-
+
 ```
 
 ### Fieldsets
 
+Group form controls together with `
      ` and ``.
+
 ```html {.example}
-
      
+
 ```
+
+### Form layouts
+
+Wrap form controls in a flex container to arrange them horizontally or vertically with even spacing. Layout utility classes like [`wa-cluster`](/docs/utilities/cluster) and [`wa-stack`](/docs/utilities/stack) can be added directly to a `
      ` or `
      ` to make this especially easy.
+
+```html {.example}
+
+
+
      
+
+
+  
+  
+  
+  
+
      
+```
diff --git a/packages/webawesome/package.json b/packages/webawesome/package.json
index 6450db910..da8a30980 100644
--- a/packages/webawesome/package.json
+++ b/packages/webawesome/package.json
@@ -77,10 +77,10 @@
     "@shoelace-style/localize": "^3.2.1",
     "composed-offset-position": "^0.0.6",
     "lit": "^3.2.1",
+    "nanoid": "^5.1.5",
     "qr-creator": "^1.0.0",
     "style-observer": "^0.0.7"
   },
-  "devDependencies": {},
   "lint-staged": {
     "*.{ts,js}": [
       "prettier --write"
diff --git a/packages/webawesome/scripts/build.js b/packages/webawesome/scripts/build.js
index ac300ccd6..5ef2acec0 100644
--- a/packages/webawesome/scripts/build.js
+++ b/packages/webawesome/scripts/build.js
@@ -8,7 +8,7 @@ import { replace } from 'esbuild-plugin-replace';
 import { mkdir, readFile } from 'fs/promises';
 import getPort, { portNumbers } from 'get-port';
 import { globby } from 'globby';
-import { dirname, join, relative } from 'node:path';
+import { dirname, join, posix, relative } from 'node:path';
 import process from 'node:process';
 import { fileURLToPath } from 'node:url';
 import ora from 'ora';
@@ -186,11 +186,11 @@ export async function build(options = {}) {
         join(rootDir, 'src/webawesome.loader.ts'),
         join(rootDir, 'src/webawesome.ssr-loader.ts'),
         // Individual components
-        ...(await globby(join(rootDir, 'src/components/**/!(*.(style|test)).ts'))),
+        ...(await globby(posix.join(rootDir, 'src/components/**/!(*.(style|test)).ts'))),
         // Translations
-        ...(await globby(join(rootDir, 'src/translations/**/*.ts'))),
+        ...(await globby(posix.join(rootDir, 'src/translations/**/*.ts'))),
         // React wrappers
-        ...(await globby(join(rootDir, 'src/react/**/*.ts'))),
+        ...(await globby(posix.join(rootDir, 'src/react/**/*.ts'))),
       ],
       outdir: getCdnDir(),
       chunkNames: 'chunks/[name].[hash]',
diff --git a/packages/webawesome/scripts/make-react.js b/packages/webawesome/scripts/make-react.js
index 402e46295..72d135112 100644
--- a/packages/webawesome/scripts/make-react.js
+++ b/packages/webawesome/scripts/make-react.js
@@ -25,7 +25,7 @@ for await (const component of components) {
   const tagWithoutPrefix = component.tagName.replace(/^wa-/, '');
   const componentDir = path.join(reactDir, tagWithoutPrefix);
   const componentFile = path.join(componentDir, 'index.ts');
-  const importPath = path.relative(srcDir, component.path);
+  const importPath = path.posix.relative(srcDir, component.path);
 
   // We only want to wrap wa- prefixed events, because the others are native
   const eventsToWrap = component.events?.filter(event => event.name.startsWith('wa-')) || [];
diff --git a/packages/webawesome/src/styles/native.css b/packages/webawesome/src/styles/native.css
index 0f9fe33d8..a58798169 100644
--- a/packages/webawesome/src/styles/native.css
+++ b/packages/webawesome/src/styles/native.css
@@ -49,6 +49,7 @@
   h4,
   h5,
   h6,
+  hr,
   iframe,
   ol,
   p,
@@ -103,10 +104,6 @@
 
   p {
     text-wrap: pretty;
-
-    &:not(:last-child) {
-      margin-block-end: 1lh;
-    }
   }
 
   blockquote {
@@ -119,7 +116,7 @@
   }
 
   hr {
-    margin: var(--wa-space-xl) 0;
+    margin: var(--wa-content-spacing) 0;
 
     border: none;
     border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
@@ -129,13 +126,12 @@
   /* #region Lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
   ul,
   ol {
-    margin-inline-start: 1.125em;
     padding: 0;
   }
 
   li > ul,
   li > ol {
-    margin-inline-start: 1.375em;
+    margin-inline-start: 0.25em;
   }
 
   ul {
@@ -143,6 +139,7 @@
   }
 
   li {
+    margin-inline-start: 1.125em;
     padding: 0;
   }
 
@@ -348,7 +345,6 @@
   caption {
     color: var(--wa-color-text-quiet);
     font-size: var(--wa-font-size-smaller);
-    font-weight: var(--wa-font-weight-bold);
 
     &:has(+ *) {
       margin-block-end: 0.75em;
@@ -1138,7 +1134,7 @@
     --indicator-color: var(--wa-color-brand-fill-loud);
 
     width: 100%;
-    height: 1.25rem;
+    height: 1rem;
     overflow: hidden;
 
     color: var(--wa-color-brand-on-loud);