Page Title
+Main content area. The sidebar should remain fixed while this content scrolls.
+import { LitElement, html } from 'lit';
+
+export class MyElement extends LitElement {
+ override render() {
+ return html\`<p>Hello world!</p>\`;
+ }
+}<sl-button variant="primary">Click me</sl-button>
+<sl-button variant="default">Cancel</sl-button>:host {
+ display: block;
+ color: red;
+}<button>Click me</button><sl-button>Click me</sl-button>
+
+ ${this.showSource
+ ? source
+ : html`
+
+
+ Code
+
+ ${source}
+
+ `}
+ `;
+ }
+}
diff --git a/docs/components/src/code/code.css b/docs/components/src/code/code.css
new file mode 100644
index 0000000000..ec3455fa82
--- /dev/null
+++ b/docs/components/src/code/code.css
@@ -0,0 +1,24 @@
+:host {
+ display: inline;
+}
+
+:host(:hover) doc-copy-button,
+doc-copy-button:focus-within {
+ opacity: 1;
+}
+
+code {
+ anchor-name: --code;
+ background: var(--sl-color-background-neutral-subtle);
+ border-radius: var(--sl-size-borderRadius-default);
+ padding-block: var(--sl-size-025);
+ padding-inline: var(--sl-size-075);
+}
+
+doc-copy-button {
+ opacity: 0;
+ position: absolute;
+ position-anchor: --code;
+ position-area: center end;
+ transition: opacity 0.15s;
+}
diff --git a/docs/components/src/code/code.spec.ts b/docs/components/src/code/code.spec.ts
new file mode 100644
index 0000000000..0c31b66bac
--- /dev/null
+++ b/docs/components/src/code/code.spec.ts
@@ -0,0 +1,57 @@
+import { fixture } from '@sl-design-system/vitest-browser-lit';
+import { html } from 'lit';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { Code } from './code.js';
+
+try {
+ customElements.define('doc-code', Code);
+} catch {
+ /* empty */
+}
+
+describe('doc-code', () => {
+ let el: Code;
+
+ describe('defaults', () => {
+ beforeEach(async () => {
+ el = await fixture(html`
+ Code
+
+ ${source}
+ Use the
-
+ ${results.map(
+ (command, index) => html`
+
- this.#select(command)}
+ @pointermove=${() => (this.activeIndex = index)}>
+ ${command.icon ? html`
` : nothing} + ${command.label} +
+ `
+ )}
+
This text will be copied to the clipboard.
+const foo = 'bar';+
+
+ `;
+ }
+
+ async #copy(text: string): Promisenpm install @sl-design-system/${this.package}
+
+
+
+ `;
+ }
+} satisfies Meta
+
+ Button
+Overview
++ 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. 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. +
+Usage
++ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni + dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor + sit amet. +
+When to use
++ Consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam + aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit + laboriosam, nisi ut aliquid ex ea commodi consequatur. +
++ Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel + illum qui dolorem eum fugiat quo voluptas nulla pariatur. +
+Variants
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti + atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident. +
+Primary
++ Similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem + rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque + nihil impedit quo minus id quod maxime placeat facere possimus. +
++ Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates + repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut + reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. +
+Properties
++ 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. + Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. +
++ Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui + dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora + incidunt ut labore et dolore magnam aliquam quaerat voluptatem. +
+Size
++ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex + ea commodi consequatur. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil + molestiae consequatur. +
+Accessibility
++ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni + dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor + sit amet, consectetur, adipisci velit. +
+Keyboard interaction and focus management
++ 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. +
+WAI-ARIA
++ 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. +
+Related components
++ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti + atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique + sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. +
++ Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi + optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, + omnis dolor repellendus. +
+-
+ ${this.results.map(
+ (result, index) => html`
+
- this.#select(index)}>
+
+ + ${result.title} + ${result.description + ? html`${result.description}` + : nothing} + ${result.url.replace(/^\//, '')} ++
+ `
+ )}
+
+
+
+
+
+
+
+
+
+
+ `
+} satisfies Meta;
+
+export const Basic: Story = {};
diff --git a/docs/components/src/sidebar/sidebar.ts b/docs/components/src/sidebar/sidebar.ts
new file mode 100644
index 0000000000..4cf517089e
--- /dev/null
+++ b/docs/components/src/sidebar/sidebar.ts
@@ -0,0 +1,49 @@
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import { type ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+import { Icon } from '@sl-design-system/icon';
+import { type CSSResultGroup, LitElement, type TemplateResult, html } from 'lit';
+import { Search } from '../search/search.js';
+import { SiteNav } from '../site-nav/site-nav.js';
+import { ThemeSwitch } from '../theme-switch/theme-switch.js';
+import styles from './sidebar.css' with { type: 'css' };
+
+Icon.register(faGithub);
+
+export class Sidebar extends ScopedElementsMixin(LitElement) {
+ /** @internal */
+ static get scopedElements(): ScopedElementsMap {
+ return {
+ 'doc-search': Search,
+ 'doc-site-nav': SiteNav,
+ 'doc-theme-switch': ThemeSwitch,
+ 'sl-icon': Icon
+ };
+ }
+
+ /** @internal */
+ static styles: CSSResultGroup = styles;
+
+ render(): TemplateResult {
+ return html`
+ 
+ 
+
+
+
+
+
+
+
+
+
+
+
+ `;
+ }
+};
diff --git a/docs/components/src/site-nav/nav-group.ts b/docs/components/src/site-nav/nav-group.ts
new file mode 100644
index 0000000000..2207d8ba40
--- /dev/null
+++ b/docs/components/src/site-nav/nav-group.ts
@@ -0,0 +1,68 @@
+import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
+import { type ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js';
+import { Icon } from '@sl-design-system/icon';
+import { type CSSResultGroup, LitElement, type TemplateResult, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './nav-group.css' with { type: 'css' };
+
+Icon.register(faChevronDown);
+
+export class NavGroup extends ScopedElementsMixin(LitElement) {
+ /** @internal */
+ static get scopedElements(): ScopedElementsMap {
+ return {
+ 'sl-icon': Icon
+ };
+ }
+
+ /** @internal */
+ static styles: CSSResultGroup = styles;
+
+ /** Whether this group can be collapsed. */
+ @property({ type: Boolean, reflect: true }) collapsible?: boolean;
+
+ /** Whether this group is collapsed. Only applies when collapsible is true. */
+ @property({ type: Boolean, reflect: true }) collapsed?: boolean;
+
+ /** The section heading text. */
+ @property() heading?: string;
+
+ /** Optional URL for the heading. */
+ @property() href?: string;
+
+ override connectedCallback(): void {
+ super.connectedCallback();
+
+ this.setAttribute('role', 'group');
+ }
+
+ override render(): TemplateResult {
+ return html`
+ ${this.heading
+ ? html`
+
+ ${this.href ? html`${this.heading}` : this.heading}
+ ${this.collapsible
+ ? html`
+ `
+ : nothing}
+
+
+ ${this.icon ? html`
+
+ `;
+ }
+
+ return html`
+
+ ${this.icon ? html`
+ ${this.icon ? html`
+
+
+
+ Part of the {{ component.name }} component.
+{% endif %} + + + +{% if component.summary %} +{{ component.summary | safe }}
+{% endif %} + +Slots
+{% if element.slots and element.slots.length %} +| Name | +Description | +
|---|---|
{% if slot.name %}{{ slot.name }}{% else %}(default){% endif %} |
+ {{ slot.description | safe }} | +
No slots defined.
+{% endif %} + +Attributes & Properties
+{% if element.attributesAndProperties and element.attributesAndProperties.length %} +| Name | +Description | +Reflects | +
|---|---|---|
+ {% if item.static %}{{ item.name }}
+ {% if item.attribute and item.attribute != item.name %}{{ item.attribute }}{% endif %}
+ |
+ + {{ item.description | safe }} + {% if item.type or item.default %} + + {% endif %} + | +{% if item.reflects %} |
+
No attributes or properties defined.
+{% endif %} + +Methods
+{% if element.methods and element.methods.length %} +| Name | +Parameters | +Description | +
|---|---|---|
{% if method.static %}{{ method.name }}() |
+
+ {% if method.parameters and method.parameters.length %}
+ {% for param in method.parameters %}{{ param.name }}{% if param.type %}: {{ param.type.text }}{% endif %}{% if not loop.last %}, {% endif %}{% endfor %}
+ {% endif %}
+ |
+ + {{ method.description | safe }} + {% if method.return and method.return.type and method.return.type.text != "void" %} + + {% endif %} + | +
No methods defined.
+{% endif %} + +Events
+{% if element.events and element.events.length %} +| Name | +Description | +
|---|---|
{{ event.name }} |
+ {{ event.description | safe }} | +
No events defined.
+{% endif %} + +CSS custom properties
+{% if element.cssProperties and element.cssProperties.length %} +| Name | +Description | +
|---|---|
{{ prop.name }} |
+ {{ prop.description | safe }} | +
No CSS custom properties defined.
+{% endif %} + +CSS custom states
+{% if element.cssStates and element.cssStates.length %} +| Name | +Description | +CSS selector | +
|---|---|---|
{{ state.name }} |
+ {{ state.description | safe }} | +
No CSS custom states defined.
+{% endif %} + +CSS parts
+{% if element.cssParts and element.cssParts.length %} +| Name | +Description | +CSS selector | +
|---|---|---|
{{ part.name }} |
+ {{ part.description | safe }} | +
No CSS parts defined.
+{% endif %} diff --git a/docs/website/src/content/components/actions/actions.md b/docs/website/src/content/components/actions/actions.md new file mode 100644 index 0000000000..db79cfde0c --- /dev/null +++ b/docs/website/src/content/components/actions/actions.md @@ -0,0 +1,32 @@ +--- +title: Actions +layout: docs +eleventyNavigation: + key: Actions + parent: Components + order: 1 + icon: bolt +--- + +Action components let users trigger operations, make choices or navigate. They are the primary way +users interact with an application. + +## Overview + +[Button](/components/actions/button) +: Triggers an action or navigates. + +[Button bar](/components/actions/button-bar) +: Groups related buttons together in a bar. + +[Menu button](/components/actions/menu-button) +: A button that opens a menu of actions. + +[Toggle button](/components/actions/toggle-button) +: A button that switches between a pressed and unpressed state. + +[Toggle group](/components/actions/toggle-group) +: A set of toggle buttons where one or more can be active. + +[Switch](/components/actions/switch) +: A single on/off toggle. diff --git a/docs/website/src/content/components/actions/button-bar.md b/docs/website/src/content/components/actions/button-bar.md new file mode 100644 index 0000000000..eb8ce1681a --- /dev/null +++ b/docs/website/src/content/components/actions/button-bar.md @@ -0,0 +1,186 @@ +--- +title: Button bar +layout: component +issueNumber: 2315 +storybook: actions-button-bar--basic +eleventyNavigation: + key: Button bar + parent: Actions +--- + +```html {.example .show-source} +Commands Example
+This dialog was opened without any JavaScript.
+