lightning-base-components 1.27.5-alpha → 1.28.3-alpha

package/src/lightning/accordion/accordion.js-meta.xml

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
-    <isExposed>true</isExposed>
-    <minApiVersion>41.0</minApiVersion>
-    <support>GA</support>
-    <capabilities>
-        <capability>lightning__ServerRenderableWithHydration</capability>
-    </capabilities>
-    <ai>
-        <description>Displays vertically stacked sections of content that can be expanded and collapsed. Users can control how much content is visible at once, reducing the need to scroll. By default, only one section can be open at a time, but can be configured to allow multiple open sections. Slots: default - Placeholder for accordion-section components. Events: sectiontoggle - Fired when an accordion loads with at least one active section or when a section is toggled, returns openSections parameter containing active section names.</description>
-        <property name="activeSectionName" aiDescription="Expands the specified accordion sections. Section names are case-sensitive. The first section is expanded by default. To support multiple active sections, set allowMultipleSectionsOpen to true." />
-        <property name="allowMultipleSectionsOpen" aiDescription="If true, all sections will be closed by default and the accordion will allow multiple sections open at a time." />
-    </ai>
-</LightningComponentBundle>

package/src/lightning/accordionSection/__docs__/accordionSection.md

@@ -1,100 +0,0 @@
----
-examples:
-    - name: basic
-      label: Basic Accordion Section
-      description: Content for an accordion is an accordion-section.
----
-
-A `lightning-accordion-section` defines the content of an accordion section inside a `lightning-accordion` component.
-Each section can contain HTML markup or Lightning components.
-
-This example creates a basic accordion with three sections, where section B is
-expanded by specifying it with the `active-section-name` attribute in `lightning-accordion`.
-
-```html
-<template>
-    <lightning-accordion active-section-name="B">
-        <lightning-accordion-section name="A" label="Accordion Title A"
-            >This is the content area for section A</lightning-accordion-section
-        >
-        <lightning-accordion-section name="B" label="Accordion Title B"
-            >This is the content area for section B</lightning-accordion-section
-        >
-        <lightning-accordion-section name="C" label="Accordion Title C"
-            >This is the content area for section C</lightning-accordion-section
-        >
-    </lightning-accordion>
-</template>
-```
-
-Use the `label` attribute to provide optional header text for an accordion section. When the header text is too long to display in the viewport, the text is truncated and displayed with an ellipsis on desktop screens. Hover with the mouse to see the full text.
-
-On mobile devices, long header text wraps to multiple lines because hover text isn't available.
-
-To expand or collapse a section, click the toggle button or header text.
-
-#### Adding an Action to a Section
-
-This example creates the same basic accordion with an added `lightning-button-menu` on
-the first section. The button menu is assigned to the `actions` slot which makes it display on the section header.
-
-```html
-<template>
-    <lightning-accordion active-section-name="B">
-        <lightning-accordion-section name="A" label="Accordion Title A">
-            <lightning-button-menu
-                slot="actions"
-                alternative-text="Show menu"
-                menu-alignment="right"
-            >
-                <lightning-menu-item
-                    value="New"
-                    label="Menu Item One"
-                ></lightning-menu-item>
-                <lightning-menu-item
-                    value="Edit"
-                    label="Menu Item Two"
-                ></lightning-menu-item>
-            </lightning-button-menu>
-            <p>This is the content area for section A.</p>
-        </lightning-accordion-section>
-        <lightning-accordion-section name="B" label="Accordion Title B"
-            >This is the content area for section B</lightning-accordion-section
-        >
-        <lightning-accordion-section name="C" label="Accordion Title C"
-            >This is the content area for section C</lightning-accordion-section
-        >
-    </lightning-accordion>
-</template>
-```
-
-#### Component Styling
-
-This component implements the
-[accordion](https://www.lightningdesignsystem.com/components/accordion) blueprint in the Salesforce Lightning Design System (SLDS).
-
-To apply additional styling, use the SLDS [utility classes](https://www.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.
-
-For more information, see [lightning-accordion](bundle/lightning-accordion/documentation).
-
-#### Usage Considerations
-
-If two or more sections use the same name and that name is also specified as
-the `active-section-name`, the first section using that name is expanded by default.
-
-This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](https://developer.salesforce.com/docs/platform/lwc/guide/migrate-map-aura-lwc-components) in the Lightning Web Components Developer Guide.
-
-#### Accessibility
-
-`lightning-accordion-section` renders the toggle button and title in a `<button>` element. When a section is expanded, the button
-renders with `aria-expanded="true"`. When a section is collapsed, the button renders with `aria-expanded="false"`.
-
-To expand or collapse a section using the keyboard, press the Tab key to set focus on the toggle button or header text and press Enter.
-
-To set the `aria-level` value on the section header, pass in a number from 1 to 6 on the `heading-level` attribute.
-
-`lightning-accordion-section` observes these roles, states, and properties.
-
-- `lightning-accordion-section` has `role="listitem"`.
-- The button on a section header displays the label you provide to the `label` attribute.
-- The button on a section header assigns `aria-controls` to the ID of the element that contains the accordion section content. This attribute sets a relationship between the button and the element with the accordion section content. When the button is clicked, the element with the content specifies either `aria-hidden="true"` or `aria-hidden="false"` depending on whether the content is visible or not.

package/src/lightning/accordionSection/__examples__/basic/basic.html

@@ -1,19 +0,0 @@
-<template>
-    <div class="slds-m-around_medium">
-        <h1 class="slds-text-heading_small">Basic accordion-section</h1>
-        <p class="slds-text-body_regular">A lightning-accordion-section component is a single section that’s nested in a lightning-accordion component. You can't use this component on its own. This example creates a basic accordion with one section.</p>
-    </div>
-    <lightning-accordion active-section-name="A">
-        <lightning-accordion-section name="A" label="Accordion Title A">
-                <lightning-button-menu slot="actions" alternative-text="Show menu" icon-size="x-small" menu-alignment="auto">
-                    <lightning-menu-item value="New" label="Menu Item One"></lightning-menu-item>
-                    <lightning-menu-item value="Edit" label="Menu Item Two"></lightning-menu-item>
-                </lightning-button-menu>
-                <p>This is the content area for section A.</p>
-                <p>.</p>
-                <p>.</p>
-                <p>.</p>
-                <p>The section height expands to fit your content.</p>
-        </lightning-accordion-section>
-    </lightning-accordion>
-</template>

package/src/lightning/accordionSection/accordionSection.js-meta.xml

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
-    <isExposed>true</isExposed>
-    <minApiVersion>41.0</minApiVersion>
-    <support>GA</support>
-    <capabilities>
-        <capability>lightning__ServerRenderableWithHydration</capability>
-    </capabilities>
-    <ai>
-        <description>Defines the content of an accordion section inside a lightning-accordion component. Each section can contain HTML markup or Lightning components. Slots: default - Placeholder for your content in the accordion section. actions - Placeholder for actionable components, such as lightning-button or lightning-button-menu, displayed at the top right corner of the accordion section.</description>
-        <property name="name" aiDescription="The unique section name to use with the active-section-name attribute in the accordion component. If you use the sectiontoggle event, provide a name to identify the section that's opened." />
-        <property name="label" aiDescription="The text that displays as the title of the section." />
-        <property name="headingLevel" aiDescription="Changes the 'aria-level' for the h2 markup tag. Supported values are 1 to 6." />
-    </ai>
-</LightningComponentBundle>

package/src/lightning/accordionUtilsPrivate/accordionUtilsPrivate.js-meta.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="xmlns=http://soap.sforce.com/2006/04/metadata">
-    <capabilities>
-        <capability>lightning__ServerRenderableWithHydration</capability>
-    </capabilities>
-</LightningComponentBundle>

package/src/lightning/alert/__docs__/alert.md

@@ -1,112 +0,0 @@
-The `lightning/alert` module lets you create an alert modal within your component. Use `LightningAlert` on your components to communicate a state that affects the entire system, not just a feature or page.
-
-Use `LightningAlert.open()` instead of the native `window.alert()` for a more consistent user experience. They have similar functions, but `LightningAlert.open()` works in cross-origin iframes, where the `.alert()` method is no longer supported in Chrome and Safari. Unlike `window.alert()`, `LightningAlert.open()` doesn't halt execution on the page, it returns a Promise. Use `async`/`await` or `.then()` for any code you want to execute after the alert has closed.
-
-Import `LightningAlert` from the `lightning/alert` module in the component that will launch the alert modal, and call `LightningAlert.open()` with your desired attributes.
-
-This example creates an alert modal with an error message and **OK** button. The `.open()` function returns a promise that resolves when you click **OK**.
-
-```html
-<!-- c/myApp.html -->
-<template>
-    <lightning-button onclick={handleAlertClick} label="Open Alert Modal">
-    </lightning-button>
-</template>
-```
-
-```javascript
-import { LightningElement } from 'lwc';
-import LightningAlert from 'lightning/alert';
-
-export default class MyApp extends LightningElement {
-    async handleAlertClick() {
-        await LightningAlert.open({
-            message: 'this is the alert message',
-            theme: 'error', // a red theme intended for error states
-            label: 'Error!', // this is the header text
-        });
-        //Alert has been closed
-    }
-}
-```
-
-#### Component Styling
-
-This component uses the Salesforce Lightning Design System (SLDS) [`prompt` blueprint](https://www.lightningdesignsystem.com/components/prompt/#site-main-content).
-
-`LightningAlert` supports the following attributes:
-
-- `message`: Message text that displays in the alert.
-- `label`: Header text, also used as the `aria-label`. Default string is `Alert`.
-- `variant`: Two values, `header` and `headerless`. Default value is `header`.
-- `theme`: Color theme for the header. The `theme` attribute supports the following [options](https://www.lightningdesignsystem.com/utilities/themes/#site-main-content) from SLDS:
-    - `default`: white
-    - `shade`: gray
-    - `inverse`: dark blue
-    - `alt-inverse`: darker blue
-    - `success`: green
-    - `info`: gray-ish blue
-    - `warning`: yellow
-    - `error`: red
-    - `offline`: ​black
-
-If an invalid value is provided, `LightningAlert` uses the `default` theme. `LightningAlert` ignores the `style` attribute.
-
-#### Testing Your Component's Alert
-
-Code using `LightningAlert` can be tested by mocking the `LightningAlert.open()` method.
-
-The example below uses a button to open an alert dialog with text that changes when the alert opens.
-
-```html
-<button data-button onclick={handleClick}>Open Alert</button>
-<template if:true={alertViewed}>
-    <div data-text>Content Viewed</div>
-</template>
-<template if:false={alertViewed}>
-    <div data-text>Click to View Content</div>
-</template>
-```
-
-```javascript
-import LightningAlert from 'lightning/alert';
-jest.mock('lightning/alert');
-​
-test(() => {
-    // Create and appendChild(element)
-​
-    const buttonEle = element.shadowRoot.querySelector('[data-button]');
-    const textEle = element.shadowRoot.querySelector('[data-text]');
-​
-    // Mock .open()
-    // No value passed since LightningAlert doesn't have a return value
-    LightningAlert.open = jest.fn().mockResolvedValue();
-    // Initial value
-    expect(textEle.textContent).toBe('Click to View Content');
-    // Click modal open button
-    buttonEle.click();
-​
-    // Click handler render cycle
-    await Promise.resolve();
-    // Render cycle triggered by tracked value {result}
-    await Promise.resolve();
-​
-    // Verify alertViewed has updated in template
-    expect(textEle.textContent).toBe('Content Viewed');
-    // Open triggered once
-    expect(LightningAlert.open.mock.calls).toHaveLength(1);
-})
-```
-
-#### Accessibility
-
-The `lightning/alert` module implements the SLDS [prompt blueprint](https://www.lightningdesignsystem.com/components/prompt/#site-main-content), which follows the [WAI-ARIA Authoring Practices for the alert and message dialogs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). Like modals, the alert dialog is a focus trap, but it displays with `role="alertdialog"` to indicate its severity.
-
-Use the keyboard interaction guidelines on the SLDS site. When the dialog opens, focus moves to the header text on the dialog, which has `tabindex="-1"`.
-
-To close the dialog, you can press the Esc key. Alternatively, you can tab to the OK button and press Enter.
-
-`lightning/alert` observes these roles, states, and properties.
-
-- The section element has `role="alertdialog"` with an `aria-description`, which uses the value you provide for the `message` attribute.
-- The `aria-labelledby` value on the section is set to the ID of the header text. Provide a header text using the `label` attribute.

package/src/lightning/alert/alert.js-meta.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-    <isExposed>true</isExposed>
-    <minApiVersion>54.0</minApiVersion>
-    <support>GA</support>
-    <capabilities>
-        <capability>lightning__ServerRenderableWithHydration</capability>
-    </capabilities>
-</LightningComponentBundle>

package/src/lightning/alert/alert.ts

@@ -1,97 +0,0 @@
-import { api } from 'lwc';
-import LightningInteractiveDialogBase from 'lightning/interactiveDialogBase';
-import LightningOverlay from 'lightning/overlay';
-import { parent, instanceName, secure } from 'lightning/overlayUtils';
-import labelDefault from '@salesforce/label/LightningAlert.defaultLabel';
-
-type Theme =
-    | 'default'
-    | 'shade'
-    | 'inverse'
-    | 'alt-inverse'
-    | 'success'
-    | 'info'
-    | 'warning'
-    | 'error'
-    | 'offline';
-
-/**
- * Create an alert modal within your component that communicates
- * a state that affects the entire system, not just a feature or page.
- */
-
-export default class LightningAlert extends LightningOverlay {
-    static [instanceName]: string = 'lightning-alert';
-    static [parent]: typeof LightningInteractiveDialogBase =
-        LightningInteractiveDialogBase;
-
-    /**
-     * Value to use for header text in "header" variant
-     * or aria-label in "headerless" variant.
-     * @type {string}
-     * @default "Alert" (translated accordingly)
-     */
-    @api label: string = labelDefault;
-
-    /**
-     * Text to display in the alert.
-     */
-    @api message: string = '';
-
-    /**
-     * Variant to use for alert. Valid values are
-     * "header" and "headerless".
-     */
-    @api variant: 'header' | 'headerless' = 'header';
-
-    /**
-     * Theme to use when variant is "header".
-     * Valid values are "default", "shade",
-     * "inverse", "alt-inverse", "success",
-     * "success", "info", "warning", "error",
-     * and "offline".
-     */
-    @api theme: Theme = 'default';
-
-    /**
-     * Dispatches privateclose event
-     * and closes dialog
-     */
-    close(result?: unknown): void {
-        // Here we use Promise<void> since we know that resolve is not called with any arguments
-        // see handlePrivateClose in lightning/modalBase.ts
-        const promise = new Promise<void>((resolve) => {
-            if (!import.meta.env.SSR) {
-                this.dispatchEvent(
-                    new CustomEvent('privateclose', {
-                        detail: {
-                            resolve,
-                            [secure]: true,
-                        },
-                        bubbles: true,
-                    })
-                );
-            }
-        });
-        super.close(result, promise);
-    }
-
-    /**
-     * Dispatches privatechildrender event
-     * with data parent needs to correctly render
-     */
-    renderedCallback(): void {
-        const evt = new CustomEvent('privatechildrender', {
-            bubbles: true,
-            detail: {
-                message: this.message,
-                label: this.label,
-                hideCancel: true,
-                showDescription: true,
-                role: 'alertdialog',
-            },
-        });
-        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-        this.dispatchEvent(evt);
-    }
-}

package/src/lightning/ariaObserver/__docs__/ariaObserver.md

@@ -1,174 +0,0 @@
-The `lightning/ariaObserver` module provides an easy way for users to write accessible component that works in both synthetic and native shadow.
-
-## Aria ID referencing in native shadow
-
-Use the `AriaObserver` library to write accessible component that works where `ariaLabelledBy` would break native shadow.
-
-Here's an example that won't work with native shadow. In the following code, we support attribute `ariaLabelledBy` in our component `c-foo`, so the `input` element is labelled by external elements.
-
-```html
-<template>
-    <input aria-labelledby={ariaLabelledBy}>
-</template>
-```
-
-```
-class Foo extends LightningElement {
-    @api ariaLabelledBy;
-}
-```
-
-This example uses the `aria-labelledby` attribute to use the internal input as an external label in `c-foo`.
-
-```html
-<span id="my-label">Input field</span>
-<c-foo aria-labelledby="my-label"></c-foo>
-```
-
-The above example works fine in synthetic shadow, but in native shadow mode, the `aria-labelledby` ID reference is broken. The `input` element is isolated in its own shadow DOM, so the label with id `my-label` isn't in the same shadow boundary.
-
-## Creating AriaObserver
-
-To use `AriaObserver` in your component, first import it from `lightning/ariaObserver`. Then, instantiate the `AriaObserver` within your component.
-
-The `AriaObserver` constructor takes one parameter:
-
-- `cmpReference` The reference of the current component (`this`).
-
-```js
-import AriaObserver from 'lightning/ariaObserver';
-
-export default class Foo extends LightningElement {
-    connectedCallback() {
-        if (!this.ariaObserver) {
-            this.ariaObserver = new AriaObserver(this);
-        }
-    }
-}
-```
-
-> [!WARNING]
-> Initializing the observer in the constructor, rather than `connectedCallback`, can lead to subtle bugs.
-
-Next, use the `connect(options)` method to connect between the internal element and the external reference. It takes an options object with the following keys:
-
-- `attribute` The name of the aria attribute. Two supported options: `aria-labelledby`, `aria-describedby`, `aria-activedescendant` and `aria-controls`.
-- `targetSelector` The selector to the internal element where the aria attribute should be attached.
-- `targetNode` The element where the aria attribute should be attached. If not provided, the `targetSelector` is used.
-- `relatedNodeIds` ID(s) of the external element(s) to which the `targetNode` will be related. Passed as a space separated string `id1 id2 id3` or an Array of strings `['id1', 'id2', 'id3']`. Combined with `relatedNodes` if both are present.
-- `relatedNodes` An Array of HTMLElement element(s) to which the `targetNode` will be related. Combined with `relatedNodeIds` if both are present.
-
-This example uses `connect(options)` to display an aria label for the internal `input` element.
-
-```js
-@api
-get ariaLabelledBy() {
-    return this._ariaLabelledBy;
-}
-set ariaLabelledBy(refs) {
-    this._ariaLabelledBy = refs;
-
-    this.ariaObserver.connect({
-        targetSelector: 'input',
-        attribute: 'aria-labelledby',
-        relatedNodeIds: refs
-    });
-}
-```
-
-Then use the `sync(isNativeShadow)` method to synchronize the ID references when the template is re-rendered.
-
-- `isNativeShadow` An optional parameter that indicates whether the relationships involve components rendered in native shadow.
-  Used when the `targetSelector` or `targetNode` is within a shadow boundary, but the parent component where AriaObserver has been
-  instantiated is not. Example: `lightning-primitive-input-simple` may be rendered in native shadow, but `lightning-input` may not be.
-
-It is important to protect the call to `sync` by checking if the component `isConnected`. This is because there are some cases where a component may be rendered but not connected and calling `sync` when a component is not connected will fail.
-
-```js
-renderedCallback() {
-    if (this.isConnected) {
-        this.ariaObserver.sync();
-    }
-}
-```
-
-When the containing component is native shadow enabled, AriaObserver observes the component's root node to find and link
-the related elements. This can be overridden in cases where the component's root node does not contain the related elements,
-but one of its ancestor nodes does. For example, `lightning-base-combobox` is contained within `lightning-combobox` so the root of `lightning-combobox` should be used in place of the root of `lightning-base-combobox`. It is important to protect this assignment by checking if `ariaObserver` is defined. This is because the root node setters can be called after `ariaObserver` is set to `undefined` in the `disconnectedCallback`.
-
-```js
-    if (this.ariaObserver) {
-        this.ariaObserver.root = parentRootNode;
-    }
-```
-
-Finally, disconnect the aria observer and free the resources at the end of the component lifecycle.
-
-```js
-disconnectedCallback() {
-    if (this.ariaObserver) {
-        this.ariaObserver.disconnect();
-        this.ariaObserver = undefined;
-    }
-}
-```
-
-Here is all these steps combined into a complete example of a component using `AriaObserver`.
-
-```html
-<template>
-    <!-- element where the aria attribute is attached -->
-    <input>
-</template>
-```
-
-```js
-import {api, LightningElement} from 'lwc';
-import AriaObserver from 'lightning/ariaObserver';
-
-export default class Foo extends LightningElement {
-    ariaObserver;
-    _ariaLabelledBy = '';
-
-    @api
-    get ariaLabelledBy() {
-        return this._ariaLabelledBy;
-    }
-    set ariaLabelledBy(refs) {
-        this._ariaLabelledBy = refs;
-
-        /* Establish the connection between input and the external label */
-        this.ariaObserver.connect({
-            targetSelector: 'input',
-            attribute: 'aria-labelledby',
-            relatedNodeIds: refs
-        });
-    }
-
-    connectedCallback() {
-        if (!this.ariaObserver) {
-            this.ariaObserver = new AriaObserver(this);
-        }
-    }
-
-    renderedCallback() {
-        if (this.isConnected) {
-            this.ariaObserver.sync();
-        }
-    }
-
-    disconnectedCallback() {
-        if (this.ariaObserver) {
-            this.ariaObserver.disconnect();
-            this.ariaObserver = undefined;
-        }
-    }
-}
-```
-
-Supported attributes:
-
-- `aria-labelledby`
-- `aria-describedby`
-- `aria-activedescendant`
-- `aria-controls`

package/src/lightning/ariaObserver/__examples__/connect/connect.html

@@ -1,19 +0,0 @@
-<template>
-    <div>
-        <label id="foo">Foo</label>
-    </div>
-    <div>
-        <label id="bar">Bar</label>
-    </div>
-    <div>
-        <label id="hello">Hello</label>
-    </div>
-    <div>
-        <label id="world">World</label>
-    </div>
-    <div>
-        <ariaobserver-connect-child aria-labelledby={connectIds}></ariaobserver-connect-child>
-        <div>Current Id: {connectIds}</div>
-        <div><button onclick={handleUpdateIds}>Update Ids to 'foo bar hello world'</button></div>
-    </div>
-</template>

package/src/lightning/ariaObserver/__examples__/connectChild/connectChild.html

@@ -1,3 +0,0 @@
-<template>
-    <input type="text" />
-</template>

package/src/lightning/ariaObserver/ariaObserver.js-meta.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
-    <isExposed>true</isExposed>
-    <capabilities>
-        <capability>lightning__ServerRenderable</capability>
-    </capabilities>
-</LightningComponentBundle>