@warp-ds/elements 2.9.1 → 2.10.0-next.1

package/dist/docs/modal/api.md

@@ -0,0 +1,51 @@
+## `<w-modal>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| content-id | `string` | `-` | - |
+| ignore-backdrop-clicks | `boolean` | `false` | Ignores clicks to the backdrop when set |
+| show | `boolean` | `false` | Controls if the modal should show or hide. |
+
+### Property Details
+
+#### content-id
+
+
+
+- Type: `string`
+- Default: `-`
+
+#### ignore-backdrop-clicks
+
+Ignores clicks to the backdrop when set
+
+- Type: `boolean`
+- Default: `false`
+
+#### show
+
+Controls if the modal should show or hide.
+
+You can also call the `open()` and `close()` methods.
+
+- Type: `boolean`
+- Default: `false`
+
+### Events
+
+#### hidden
+
+
+
+- Type: `CustomEvent`
+#### shown
+
+
+
+- Type: `CustomEvent`
+
+

package/dist/docs/modal/examples.md

@@ -0,0 +1,67 @@
+## Examples
+
+
+
+### With a titlebar
+
+<elements-example>
+
+```html
+<div>
+  <w-button aria-haspopup='dialog'>
+    Open a modal
+  </w-button>
+  <w-modal>
+    <w-modal-header
+      slot='header'
+      title='An example modal'
+    ></w-modal-header>
+    <div slot='content'>
+      <w-button variant='utility' small>
+        Toggle back button
+      </w-button>
+      <p>
+        I bomb atomically, Socrates' philosophies and hypotheses...
+      </p>
+      <p>
+        First I'm gonna getcha, once I gotcha, I gat-cha...
+      </p>
+    </div>
+    <w-modal-footer slot='footer'>
+      <w-button variant='primary'>
+        OK
+      </w-button>
+    </w-modal-footer>
+  </w-modal>
+</div>
+```
+
+</elements-example>
+
+### With an image at the top
+
+<elements-example>
+
+```html
+<w-button aria-haspopup="dialog" commandfor="my-modal" command="show-modal">
+    Open a modal
+</w-button>
+<w-modal id="my-modal">
+    <w-modal-header slot="header" title="Look a doggo!">
+        <img
+        slot="top"
+        class="h-[256] w-full object-cover"
+        src="/pages/public/unocssmusical.jpeg"
+        alt="AI-generated picture of a band in colourful setup"
+        >
+    </w-modal-header>
+    <div slot="content">
+        <p>I bomb atomically, Socrates' philosophies and hypotheses...</p>
+    </div>
+    <w-modal-footer slot="footer">
+        <w-button variant="primary" id="modal-close-button-two">OK</w-button>
+    </w-modal-footer>
+</w-modal>
+```
+
+</elements-example>

package/dist/docs/modal/modal.md

@@ -0,0 +1,238 @@
+# Modal (w-modal)
+
+## Description
+
+Modals (or dialogs) display important information that users need to acknowledge.
+
+## Usage
+
+To creat a modal you need three different components:
+
+- `<w-modal>` - the parent component.
+- `<w-modal-header>` - for the title and close button.
+- `<w-modal-footer>` - for the actions such as Cancel and Confirm.
+
+### JavaScript API
+
+To open and close the modal using JavaScript, get a reference to the `<w-modal>` and call `open()` and `close()` respectively.
+
+
+<elements-example>
+
+```html
+<w-button data-testid="js-example-show" aria-haspopup="dialog">Show me some lyrics</w-button>
+<w-modal data-testid="js-example-modal">
+    <w-modal-header slot="header" title="Triumph by Wu Tang Clan"></w-modal-header>
+    <div slot="content">
+        <p>
+        My beats travel like a vortex through your spine, to the top of your
+        cerebral cortex. The rebel, I make more noise than heavy metal. Now,
+        lo and behold, another deadly episode, bound to catch another charge
+        when I explode Perpendicular to the square we stay in gold like
+        Flair, escape from your dragon's lair in particular. Handcuffed in
+        the back of a bus, forty of us. Slammin a hype verse til ya head
+        burst. Handcuffed in the back of a bus, forty of us. I bomb
+        atomically Socrates' philosophies and hypothesis can't define how I
+        be dropping these mockeries. I be that insane one from the psycho
+        ward, I'm on the trigger, plus I got the Wu-Tang sword. Step through
+        your section with the Force like Luke Skywalker, rhyme author,
+        orchestrate mind torture.
+        </p>
+    </div>
+    <w-modal-footer slot="footer">
+        <div class="flex gap-16">
+            <w-button variant="secondary" data-testid="js-example-cancel">Cancel</w-button>
+            <w-button variant="primary" data-testid="js-example-confirm">Confirm</w-button>
+        </div>
+    </w-modal-footer>
+</w-modal>
+
+<script>
+const modal = document.querySelector('w-modal[data-testid="js-example-modal"]');
+
+const openButton = document.querySelector('w-button[data-testid="js-example-show"]');
+const confirmButton = document.querySelector('w-button[data-testid="js-example-confirm"]');
+const cancelButton = document.querySelector('w-button[data-testid="js-example-cancel"]');
+
+openButton.addEventListener('click', () => modal.open());
+confirmButton.addEventListener('click', () => modal.close());
+cancelButton.addEventListener('click', () => modal.close());
+</script>
+```
+
+</elements-example>
+
+### Invoker Commands
+
+In [supported browsers](https://caniuse.com/?search=commandfor) (or [if you include the polyfill](https://github.com/keithamus/invokers-polyfill)) you can use the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) to potentially skip JavaScript alltogether.
+
+The available commands for `<w-modal>` are:
+
+- `--show-modal`
+- `--close`
+- `--confirm`
+
+<elements-example>
+
+```html
+<w-button commandfor="invoker-modal" command="--show-modal" aria-haspopup="dialog">Show me some lyrics</w-button>
+<w-modal id="invoker-modal">
+    <w-modal-header slot="header" title="Triumph by Wu Tang Clan"></w-modal-header>
+    <div slot="content">
+        <p>
+        First I'm gonna getcha, once I gotcha, I gat-cha, You could never
+        capture the Method Man's stature. So uhh, tic toc and keep ticking,
+        while I get you flipping off what I'm kicking. Yes, the rhythm, the
+        rebel, alone in my level heat it up past the boiling point of metal.
+        Shackling the masses with drastic rap tactics, graphic displays melt
+        the steel like blacksmiths. My beats travel like a vortex through
+        your spine, to the top of your cerebral cortex. Yes, the rhythm, the
+        rebel, alone in my level heat it up past the boiling point of metal.
+        Small change, they putting shame in the game. Murderous material,
+        made by a madman, it's the mic wrecker, Inspector, bad man.
+        </p>
+    </div>
+    <w-modal-footer slot="footer">
+        <div class="flex gap-16">
+            <w-button variant="secondary" commandfor="invoker-modal" command="--close">Dope</w-button>
+            <w-button variant="primary" commandfor="invoker-modal" command="--confirm">Dope</w-button>
+        </div>
+    </w-modal-footer>
+</w-modal>
+```
+
+</elements-example>
+
+Since `--confirm` and `--cancel` both close the modal, but mean different things, listen for the `command` event on `w-modal` to do stuff on the `--confirm` event, such as submit a response to an API. You can listen for the other commands as well (including `--show-modal`) if you need to add tracking events for example.
+
+```ts
+const modal = document.querySelector('w-modal');
+
+modal.addEventListener('command', function (event: CommandEvent) {
+    if (event.command === '--confirm') {
+        console.log("Doing stuff!");
+    }
+});
+```
+
+## Accessibility
+
+## Examples
+
+
+
+### With a titlebar
+
+<elements-example>
+
+```html
+<div>
+  <w-button aria-haspopup='dialog'>
+    Open a modal
+  </w-button>
+  <w-modal>
+    <w-modal-header
+      slot='header'
+      title='An example modal'
+    ></w-modal-header>
+    <div slot='content'>
+      <w-button variant='utility' small>
+        Toggle back button
+      </w-button>
+      <p>
+        I bomb atomically, Socrates' philosophies and hypotheses...
+      </p>
+      <p>
+        First I'm gonna getcha, once I gotcha, I gat-cha...
+      </p>
+    </div>
+    <w-modal-footer slot='footer'>
+      <w-button variant='primary'>
+        OK
+      </w-button>
+    </w-modal-footer>
+  </w-modal>
+</div>
+```
+
+</elements-example>
+
+### With an image at the top
+
+<elements-example>
+
+```html
+<w-button aria-haspopup="dialog" commandfor="my-modal" command="show-modal">
+    Open a modal
+</w-button>
+<w-modal id="my-modal">
+    <w-modal-header slot="header" title="Look a doggo!">
+        <img
+        slot="top"
+        class="h-[256] w-full object-cover"
+        src="/pages/public/unocssmusical.jpeg"
+        alt="AI-generated picture of a band in colourful setup"
+        >
+    </w-modal-header>
+    <div slot="content">
+        <p>I bomb atomically, Socrates' philosophies and hypotheses...</p>
+    </div>
+    <w-modal-footer slot="footer">
+        <w-button variant="primary" id="modal-close-button-two">OK</w-button>
+    </w-modal-footer>
+</w-modal>
+```
+
+</elements-example>
+
+## `<w-modal>` API
+
+Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
+
+### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| content-id | `string` | `-` | - |
+| ignore-backdrop-clicks | `boolean` | `false` | Ignores clicks to the backdrop when set |
+| show | `boolean` | `false` | Controls if the modal should show or hide. |
+
+### Property Details
+
+#### content-id
+
+
+
+- Type: `string`
+- Default: `-`
+
+#### ignore-backdrop-clicks
+
+Ignores clicks to the backdrop when set
+
+- Type: `boolean`
+- Default: `false`
+
+#### show
+
+Controls if the modal should show or hide.
+
+You can also call the `open()` and `close()` methods.
+
+- Type: `boolean`
+- Default: `false`
+
+### Events
+
+#### hidden
+
+
+
+- Type: `CustomEvent`
+#### shown
+
+
+
+- Type: `CustomEvent`
+
+

package/dist/docs/modal/usage.md

@@ -0,0 +1,110 @@
+## Usage
+
+To creat a modal you need three different components:
+
+- `<w-modal>` - the parent component.
+- `<w-modal-header>` - for the title and close button.
+- `<w-modal-footer>` - for the actions such as Cancel and Confirm.
+
+### JavaScript API
+
+To open and close the modal using JavaScript, get a reference to the `<w-modal>` and call `open()` and `close()` respectively.
+
+
+<elements-example>
+
+```html
+<w-button data-testid="js-example-show" aria-haspopup="dialog">Show me some lyrics</w-button>
+<w-modal data-testid="js-example-modal">
+    <w-modal-header slot="header" title="Triumph by Wu Tang Clan"></w-modal-header>
+    <div slot="content">
+        <p>
+        My beats travel like a vortex through your spine, to the top of your
+        cerebral cortex. The rebel, I make more noise than heavy metal. Now,
+        lo and behold, another deadly episode, bound to catch another charge
+        when I explode Perpendicular to the square we stay in gold like
+        Flair, escape from your dragon's lair in particular. Handcuffed in
+        the back of a bus, forty of us. Slammin a hype verse til ya head
+        burst. Handcuffed in the back of a bus, forty of us. I bomb
+        atomically Socrates' philosophies and hypothesis can't define how I
+        be dropping these mockeries. I be that insane one from the psycho
+        ward, I'm on the trigger, plus I got the Wu-Tang sword. Step through
+        your section with the Force like Luke Skywalker, rhyme author,
+        orchestrate mind torture.
+        </p>
+    </div>
+    <w-modal-footer slot="footer">
+        <div class="flex gap-16">
+            <w-button variant="secondary" data-testid="js-example-cancel">Cancel</w-button>
+            <w-button variant="primary" data-testid="js-example-confirm">Confirm</w-button>
+        </div>
+    </w-modal-footer>
+</w-modal>
+
+<script>
+const modal = document.querySelector('w-modal[data-testid="js-example-modal"]');
+
+const openButton = document.querySelector('w-button[data-testid="js-example-show"]');
+const confirmButton = document.querySelector('w-button[data-testid="js-example-confirm"]');
+const cancelButton = document.querySelector('w-button[data-testid="js-example-cancel"]');
+
+openButton.addEventListener('click', () => modal.open());
+confirmButton.addEventListener('click', () => modal.close());
+cancelButton.addEventListener('click', () => modal.close());
+</script>
+```
+
+</elements-example>
+
+### Invoker Commands
+
+In [supported browsers](https://caniuse.com/?search=commandfor) (or [if you include the polyfill](https://github.com/keithamus/invokers-polyfill)) you can use the [Invoker Commands API](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) to potentially skip JavaScript alltogether.
+
+The available commands for `<w-modal>` are:
+
+- `--show-modal`
+- `--close`
+- `--confirm`
+
+<elements-example>
+
+```html
+<w-button commandfor="invoker-modal" command="--show-modal" aria-haspopup="dialog">Show me some lyrics</w-button>
+<w-modal id="invoker-modal">
+    <w-modal-header slot="header" title="Triumph by Wu Tang Clan"></w-modal-header>
+    <div slot="content">
+        <p>
+        First I'm gonna getcha, once I gotcha, I gat-cha, You could never
+        capture the Method Man's stature. So uhh, tic toc and keep ticking,
+        while I get you flipping off what I'm kicking. Yes, the rhythm, the
+        rebel, alone in my level heat it up past the boiling point of metal.
+        Shackling the masses with drastic rap tactics, graphic displays melt
+        the steel like blacksmiths. My beats travel like a vortex through
+        your spine, to the top of your cerebral cortex. Yes, the rhythm, the
+        rebel, alone in my level heat it up past the boiling point of metal.
+        Small change, they putting shame in the game. Murderous material,
+        made by a madman, it's the mic wrecker, Inspector, bad man.
+        </p>
+    </div>
+    <w-modal-footer slot="footer">
+        <div class="flex gap-16">
+            <w-button variant="secondary" commandfor="invoker-modal" command="--close">Dope</w-button>
+            <w-button variant="primary" commandfor="invoker-modal" command="--confirm">Dope</w-button>
+        </div>
+    </w-modal-footer>
+</w-modal>
+```
+
+</elements-example>
+
+Since `--confirm` and `--cancel` both close the modal, but mean different things, listen for the `command` event on `w-modal` to do stuff on the `--confirm` event, such as submit a response to an API. You can listen for the other commands as well (including `--show-modal`) if you need to add tracking events for example.
+
+```ts
+const modal = document.querySelector('w-modal');
+
+modal.addEventListener('command', function (event: CommandEvent) {
+    if (event.command === '--confirm') {
+        console.log("Doing stuff!");
+    }
+});
+```

package/dist/docs/modal-footer/accessibility.md

@@ -0,0 +1 @@
+## Accessibility

package/dist/docs/modal-footer/api.md

@@ -0,0 +1,11 @@
+### `<w-modal-footer>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+
+#### Property Details
+
+No public fields documented.
+

package/dist/docs/modal-footer/examples.md

@@ -0,0 +1 @@
+## Examples

package/dist/docs/modal-footer/modal-footer.md

@@ -0,0 +1,23 @@
+# ModalFooter (w-modal-footer)
+
+## Description
+
+The footer section of a modal, typically where you place actions.
+
+## Usage
+
+## Accessibility
+
+## Examples
+
+### `<w-modal-footer>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+
+#### Property Details
+
+No public fields documented.
+

package/dist/docs/modal-footer/usage.md

@@ -0,0 +1 @@
+## Usage

package/dist/docs/modal-header/accessibility.md

@@ -0,0 +1 @@
+## Accessibility

package/dist/docs/modal-header/api.md

@@ -0,0 +1,42 @@
+### `<w-modal-header>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| back | `boolean` | `false` | Whether the modal header should have a back button |
+| no-close | `boolean` | `false` | Lets you hide the close button in the header |
+| title | `string` | `-` | A short but descriptive title for the modal |
+
+#### Property Details
+
+##### back
+
+Whether the modal header should have a back button
+
+- Type: `boolean`
+- Default: `false`
+
+##### no-close
+
+Lets you hide the close button in the header
+
+- Type: `boolean`
+- Default: `false`
+
+##### title
+
+A short but descriptive title for the modal
+
+- Type: `string`
+- Default: `-`
+
+#### Events
+
+##### backClicked
+
+
+
+- Type: `CustomEvent`
+
+

package/dist/docs/modal-header/examples.md

@@ -0,0 +1 @@
+## Examples

package/dist/docs/modal-header/modal-header.md

@@ -0,0 +1,54 @@
+# ModalHeader (w-modal-header)
+
+## Description
+
+The header section of a modal, typically where you place the title and a close button.
+
+## Usage
+
+## Accessibility
+
+## Examples
+
+### `<w-modal-header>` API
+
+#### Properties
+
+| Name | Type | Default | Summary |
+|-|-|-|-|
+| back | `boolean` | `false` | Whether the modal header should have a back button |
+| no-close | `boolean` | `false` | Lets you hide the close button in the header |
+| title | `string` | `-` | A short but descriptive title for the modal |
+
+#### Property Details
+
+##### back
+
+Whether the modal header should have a back button
+
+- Type: `boolean`
+- Default: `false`
+
+##### no-close
+
+Lets you hide the close button in the header
+
+- Type: `boolean`
+- Default: `false`
+
+##### title
+
+A short but descriptive title for the modal
+
+- Type: `string`
+- Default: `-`
+
+#### Events
+
+##### backClicked
+
+
+
+- Type: `CustomEvent`
+
+

package/dist/docs/modal-header/usage.md

@@ -0,0 +1 @@
+## Usage

package/dist/docs/page-indicator/api.md

@@ -6,22 +6,22 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| page-count | `number` | `-` | Total number of pages (minimum 1) |
-| selected-page | `number` | `-` | Currently selected page (1-based index, clamped to valid range) |
+| page-count | `number` | `1` | Total number of pages |
+| selected-page | `number` | `1` | Currently selected page (1-based index) |
 
 ### Property Details
 
 #### page-count
 
-Total number of pages (minimum 1)
+Total number of pages
 
 - Type: `number`
-- Default: `-`
+- Default: `1`
 
 #### selected-page
 
-Currently selected page (1-based index, clamped to valid range)
+Currently selected page (1-based index)
 
 - Type: `number`
-- Default: `-`
+- Default: `1`
 

package/dist/docs/page-indicator/examples.md

@@ -1 +1,9 @@
 ## Examples
+
+<elements-example>
+
+```html
+<w-page-indicator selected-page="3" page-count="5"></w-page-indicator>
+```
+
+</elements-example>