@ni/fast-foundation 0.0.2

package/dist/esm/accordion-item/accordion-item.js

@@ -0,0 +1,72 @@
+import { __decorate } from "tslib";
+import { attr, nullableNumberConverter, } from "@ni/fast-element";
+import { FoundationElement, } from "../foundation-element/foundation-element.js";
+import { StartEnd } from "../patterns/start-end.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+/**
+ * An individual item in an {@link @ni/fast-foundation#(Accordion:class) }.
+ *
+ * @slot start - Content which can be provided between the heading and the icon
+ * @slot end - Content which can be provided between the start slot and icon
+ * @slot heading - Content which serves as the accordion item heading and text of the expand button
+ * @slot - The default slot for accordion item content
+ * @slot expanded-icon - The expanded icon
+ * @slot collapsed-icon - The collapsed icon
+ * @fires change - Fires a custom 'change' event when the button is invoked
+ * @csspart heading - Wraps the button
+ * @csspart button - The button which serves to invoke the item
+ * @csspart heading-content - Wraps the slot for the heading content within the button
+ * @csspart icon - The icon container
+ * @csspart expanded-icon - The expanded icon slot
+ * @csspart collapsed-icon - The collapsed icon
+ * @csspart region - The wrapper for the accordion item content
+ *
+ * @public
+ */
+export class AccordionItem extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
+         * heading element.
+         *
+         * @defaultValue 2
+         * @public
+         * @remarks
+         * HTML attribute: heading-level
+         */
+        this.headinglevel = 2;
+        /**
+         * Expands or collapses the item.
+         *
+         * @public
+         * @remarks
+         * HTML attribute: expanded
+         */
+        this.expanded = false;
+        /**
+         * @internal
+         */
+        this.clickHandler = (e) => {
+            this.expanded = !this.expanded;
+            this.change();
+        };
+        this.change = () => {
+            this.$emit("change");
+        };
+    }
+}
+__decorate([
+    attr({
+        attribute: "heading-level",
+        mode: "fromView",
+        converter: nullableNumberConverter,
+    })
+], AccordionItem.prototype, "headinglevel", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], AccordionItem.prototype, "expanded", void 0);
+__decorate([
+    attr
+], AccordionItem.prototype, "id", void 0);
+applyMixins(AccordionItem, StartEnd);

package/dist/esm/accordion-item/accordion-item.template.js

@@ -0,0 +1,49 @@
+import { html, ref } from "@ni/fast-element";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/start-end.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(AccordionItem:class)} component.
+ * @public
+ */
+export const accordionItemTemplate = (context, definition) => html `
+    <template class="${x => (x.expanded ? "expanded" : "")}">
+        <div
+            class="heading"
+            part="heading"
+            role="heading"
+            aria-level="${x => x.headinglevel}"
+        >
+            <button
+                class="button"
+                part="button"
+                ${ref("expandbutton")}
+                aria-expanded="${x => x.expanded}"
+                aria-controls="${x => x.id}-panel"
+                id="${x => x.id}"
+                @click="${(x, c) => x.clickHandler(c.event)}"
+            >
+                <span class="heading-content" part="heading-content">
+                    <slot name="heading"></slot>
+                </span>
+            </button>
+            ${startSlotTemplate(context, definition)}
+            ${endSlotTemplate(context, definition)}
+            <span class="icon" part="icon" aria-hidden="true">
+                <slot name="expanded-icon" part="expanded-icon">
+                    ${definition.expandedIcon || ""}
+                </slot>
+                <slot name="collapsed-icon" part="collapsed-icon">
+                    ${definition.collapsedIcon || ""}
+                </slot>
+            <span>
+        </div>
+        <div
+            class="region"
+            part="region"
+            id="${x => x.id}-panel"
+            role="region"
+            aria-labelledby="${x => x.id}"
+        >
+            <slot></slot>
+        </div>
+    </template>
+`;

package/dist/esm/accordion-item/index.js

@@ -0,0 +1,2 @@
+export * from "./accordion-item.template.js";
+export * from "./accordion-item.js";

package/dist/esm/anchor/anchor.js

@@ -0,0 +1,85 @@
+import { __decorate } from "tslib";
+import { attr, observable } from "@ni/fast-element";
+import { FoundationElement, } from "../foundation-element/foundation-element.js";
+import { ARIAGlobalStatesAndProperties, StartEnd, } from "../patterns/index.js";
+import { applyMixins } from "../utilities/apply-mixins.js";
+/**
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
+ * @public
+ */
+export class Anchor extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Overrides the focus call for where delegatesFocus is unsupported.
+         * This check works for Chrome, Edge Chromium, FireFox, and Safari
+         * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
+         */
+        this.handleUnsupportedDelegatesFocus = () => {
+            var _a;
+            // Check to see if delegatesFocus is supported
+            if (window.ShadowRoot &&
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                this.focus = () => {
+                    var _a;
+                    (_a = this.control) === null || _a === void 0 ? void 0 : _a.focus();
+                };
+            }
+        };
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleUnsupportedDelegatesFocus();
+    }
+}
+__decorate([
+    attr
+], Anchor.prototype, "download", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "href", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "hreflang", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "ping", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "referrerpolicy", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "rel", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "target", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "type", void 0);
+__decorate([
+    observable
+], Anchor.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+export class DelegatesARIALink {
+}
+__decorate([
+    attr({ attribute: "aria-expanded" })
+], DelegatesARIALink.prototype, "ariaExpanded", void 0);
+applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
+applyMixins(Anchor, StartEnd, DelegatesARIALink);

package/dist/esm/anchor/anchor.template.js

@@ -0,0 +1,47 @@
+import { html, ref, slotted } from "@ni/fast-element";
+import { endSlotTemplate, startSlotTemplate } from "../patterns/start-end.js";
+/**
+ * The template for the {@link @ni/fast-foundation#(Anchor:class)} component.
+ * @public
+ */
+export const anchorTemplate = (context, definition) => html `
+    <a
+        class="control"
+        part="control"
+        download="${x => x.download}"
+        href="${x => x.href}"
+        hreflang="${x => x.hreflang}"
+        ping="${x => x.ping}"
+        referrerpolicy="${x => x.referrerpolicy}"
+        rel="${x => x.rel}"
+        target="${x => x.target}"
+        type="${x => x.type}"
+        aria-atomic="${x => x.ariaAtomic}"
+        aria-busy="${x => x.ariaBusy}"
+        aria-controls="${x => x.ariaControls}"
+        aria-current="${x => x.ariaCurrent}"
+        aria-describedby="${x => x.ariaDescribedby}"
+        aria-details="${x => x.ariaDetails}"
+        aria-disabled="${x => x.ariaDisabled}"
+        aria-errormessage="${x => x.ariaErrormessage}"
+        aria-expanded="${x => x.ariaExpanded}"
+        aria-flowto="${x => x.ariaFlowto}"
+        aria-haspopup="${x => x.ariaHaspopup}"
+        aria-hidden="${x => x.ariaHidden}"
+        aria-invalid="${x => x.ariaInvalid}"
+        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-live="${x => x.ariaLive}"
+        aria-owns="${x => x.ariaOwns}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
+        ${ref("control")}
+    >
+        ${startSlotTemplate(context, definition)}
+        <span class="content" part="content">
+            <slot ${slotted("defaultSlottedContent")}></slot>
+        </span>
+        ${endSlotTemplate(context, definition)}
+    </a>
+`;

package/dist/esm/anchor/index.js

@@ -0,0 +1,2 @@
+export * from "./anchor.template.js";
+export * from "./anchor.js";

package/dist/esm/anchored-region/anchored-region-config.js

@@ -0,0 +1,59 @@
+/**
+ * Building blocks - partial configs
+ */
+/**
+ * A region that matches the size and position of the anchor horizontally
+ */
+const horizontalAnchorOverlay = {
+    horizontalDefaultPosition: "center",
+    horizontalPositioningMode: "locktodefault",
+    horizontalInset: false,
+    horizontalScaling: "anchor",
+};
+/**
+ * Exported configs
+ */
+/**
+ * A region that always places itself above the anchor, has
+ * a width to match the anchor, and is sized vertically by content
+ *
+ * @public
+ */
+export const FlyoutPosTop = Object.assign(Object.assign({}, horizontalAnchorOverlay), { verticalDefaultPosition: "top", verticalPositioningMode: "locktodefault", verticalInset: false, verticalScaling: "content" });
+/**
+ * A region that always places itself below the anchor, has
+ * a width to match the anchor, and is sized vertically by content
+ *
+ * @public
+ */
+export const FlyoutPosBottom = Object.assign(Object.assign({}, horizontalAnchorOverlay), { verticalDefaultPosition: "bottom", verticalPositioningMode: "locktodefault", verticalInset: false, verticalScaling: "content" });
+/**
+ * A region that places itself above or below the anchor
+ * based on available space, has a width to match the anchor,
+ * and is sized vertically by content
+ *
+ * @public
+ */
+export const FlyoutPosTallest = Object.assign(Object.assign({}, horizontalAnchorOverlay), { verticalPositioningMode: "dynamic", verticalInset: false, verticalScaling: "content" });
+/**
+ * A region that always places itself above the anchor, has
+ * a width to match the anchor, and is sized vertically by available space
+ *
+ * @public
+ */
+export const FlyoutPosTopFill = Object.assign(Object.assign({}, FlyoutPosTop), { verticalScaling: "fill" });
+/**
+ * A region that always places itself below the anchor, has
+ * a width to match the anchor, and is sized vertically by available space
+ *
+ * @public
+ */
+export const FlyoutPosBottomFill = Object.assign(Object.assign({}, FlyoutPosBottom), { verticalScaling: "fill" });
+/**
+ * A region that places itself above or below the anchor
+ * based on available space, has a width to match the anchor,
+ * and is sized vertically by available space
+ *
+ * @public
+ */
+export const FlyoutPosTallestFill = Object.assign(Object.assign({}, FlyoutPosTallest), { verticalScaling: "fill" });