{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "src/components/cbp-accordion/cbp-accordion.tsx", "declarations": [ { "kind": "class", "description": "An Accordion is a common paradigm for progressive disclosure, organizing content under a relevant heading \nthat is used as a control for revealing and hiding its content. This component wraps multiple `cbp-accordion-item` tags.", "name": "CbpAccordion", "slots": [ { "description": "Accordion Items shall be slotted in the default slot. While other content may be included within the default slot, it is not recommended.", "name": "" } ], "members": [ { "kind": "field", "name": "items", "type": { "text": "HTMLCbpAccordionItemElement[]" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "multiple", "type": { "text": "boolean" }, "description": "Specifies whether multiple accordion items can be open at the same time. Defaults to false." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "init", "type": { "text": "init() => void" } }, { "kind": "method", "name": "accordionActionHandler", "parameters": [ { "name": "{ detail: { host, open } }" } ], "type": { "text": "accordionActionHandler({ detail: { host, open } }) => void" } } ], "attributes": [ { "name": "multiple", "fieldName": "multiple", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-accordion", "events": [], "customElement": true, "modulePath": "src/components/cbp-accordion/cbp-accordion.tsx", "definitionPath": "src/components/cbp-accordion/cbp-accordion.tsx" } ], "exports": [ { "kind": "js", "name": "CbpAccordion", "declaration": { "name": "CbpAccordion", "module": "src/components/cbp-accordion/cbp-accordion.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-accordion", "declaration": { "name": "CbpAccordion", "module": "src/components/cbp-accordion/cbp-accordion.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-action-bar/cbp-action-bar.tsx", "declarations": [ { "kind": "class", "description": "The Action Bar acts as a container for form controls (buttons) or other tools to affect the content of the page. \nIt is often used for batch actions on table or structured list data.", "name": "CbpActionBar", "slots": [ { "description": "Any controls or content may be slotted into the default slot and will be aligned to the right of the bar.", "name": "" }, { "description": "This named slot is intended for information placed before the default slot content, aligned to the left of the bar.", "name": "cbp-action-bar-info" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "variant", "type": { "text": "'inline' | 'floating' | 'sticky'" }, "default": "'inline'", "description": "Specifies whether the action bar is inline or floating. Defaults to inline." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "variant", "fieldName": "variant", "type": { "text": "'inline' | 'floating' | 'sticky'" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-action-bar", "events": [], "customElement": true, "modulePath": "src/components/cbp-action-bar/cbp-action-bar.tsx", "definitionPath": "src/components/cbp-action-bar/cbp-action-bar.tsx" } ], "exports": [ { "kind": "js", "name": "CbpActionBar", "declaration": { "name": "CbpActionBar", "module": "src/components/cbp-action-bar/cbp-action-bar.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-action-bar", "declaration": { "name": "CbpActionBar", "module": "src/components/cbp-action-bar/cbp-action-bar.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-accordion-item/cbp-accordion-item.tsx", "declarations": [ { "kind": "class", "description": "Accordion Items are placed as children of the parent `cbp-accordion` tag. The content is slotted and the \nheading control text is provided via the label property or the optional named slot.", "name": "CbpAccordionItem", "slots": [ { "description": "Accordion Item content is placed in the default slot.", "name": "" }, { "description": "Optionally, an Accordion Item heading with markup may be placed in this slot rather than via the labal property.", "name": "cbp-accordion-item-label" } ], "members": [ { "kind": "field", "name": "control", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "button", "type": { "text": "HTMLButtonElement" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "headingId", "type": { "text": "string" }, "description": "Specifies an optional `id` for the accordion item heading, also used to generate an `id` for \nthe accordion item content wrapper. If this property is not specified, a unique string will \nautomatically be generated." }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Specifies whether the accordion is open." }, { "kind": "field", "name": "label", "type": { "text": "string" }, "description": "The accordion control label." }, { "kind": "field", "name": "headingLevel", "type": { "text": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'" }, "default": "'h3'", "description": "The heading level of the accordion item control. Defaults to h3." }, { "kind": "field", "name": "color", "type": { "text": "'danger'" }, "description": "Specifies an optional color variant of the accordion item." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleClick(e) => void" } } ], "attributes": [ { "name": "heading-id", "fieldName": "headingId", "type": { "text": "string" } }, { "name": "open", "fieldName": "open", "type": { "text": "boolean" } }, { "name": "label", "fieldName": "label", "type": { "text": "string" } }, { "name": "heading-level", "fieldName": "headingLevel", "type": { "text": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'" } }, { "name": "color", "fieldName": "color", "type": { "text": "'danger'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-accordion-item", "events": [ { "name": "accordionItemClick", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the accordion item control is activated." } ], "customElement": true, "modulePath": "src/components/cbp-accordion-item/cbp-accordion-item.tsx", "definitionPath": "src/components/cbp-accordion-item/cbp-accordion-item.tsx" } ], "exports": [ { "kind": "js", "name": "CbpAccordionItem", "declaration": { "name": "CbpAccordionItem", "module": "src/components/cbp-accordion-item/cbp-accordion-item.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-accordion-item", "declaration": { "name": "CbpAccordionItem", "module": "src/components/cbp-accordion-item/cbp-accordion-item.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-app/cbp-app.tsx", "declarations": [ { "kind": "class", "description": "An overarching App tag acts as a low-barrier way to get core design system elements (design tokens and styles)\nas well as a way to manage site/page-level settings such as dark mode.", "name": "CbpApp", "slots": [ { "description": "All application markup should be placed within the default slot to inherit the base CSS, design tokens, and dark mode styling.", "name": "" } ], "members": [ { "kind": "field", "name": "darkMode", "type": { "text": "MediaQueryList" }, "privacy": "private" }, { "kind": "field", "name": "theme", "type": { "text": "\"light\" | \"dark\" | \"system\"" }, "default": "\"system\"", "description": "Optionally specifies light/dark mode. This is only needed if the application can change the theme separate from OS settings." }, { "kind": "field", "name": "debug", "type": { "text": "boolean" }, "description": "Turning on debug mode will log the version of the design system package and Stencil version it was built with to the console, in addition to application name and version, if specified." }, { "kind": "field", "name": "appName", "type": { "text": "string" }, "description": "Specifies the application name for logging with debug information." }, { "kind": "field", "name": "appVersion", "type": { "text": "string" }, "description": "Specifies the application version for logging with debug information. This may be automated by importing it from the application's package.json, if used." }, { "kind": "method", "name": "handleThemeChange", "parameters": [ { "name": "mql" } ], "type": { "text": "handleThemeChange(mql) => void" } } ], "attributes": [ { "name": "theme", "fieldName": "theme", "type": { "text": "\"light\" | \"dark\" | \"system\"" } }, { "name": "debug", "fieldName": "debug", "type": { "text": "boolean" } }, { "name": "app-name", "fieldName": "appName", "type": { "text": "string" } }, { "name": "app-version", "fieldName": "appVersion", "type": { "text": "string" } } ], "tagName": "cbp-app", "events": [], "customElement": true, "modulePath": "src/components/cbp-app/cbp-app.tsx", "definitionPath": "src/components/cbp-app/cbp-app.tsx" } ], "exports": [ { "kind": "js", "name": "CbpApp", "declaration": { "name": "CbpApp", "module": "src/components/cbp-app/cbp-app.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-app", "declaration": { "name": "CbpApp", "module": "src/components/cbp-app/cbp-app.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-app-header/cbp-app-header.tsx", "declarations": [ { "kind": "class", "description": "", "name": "CbpAppHeader", "slots": [ { "description": "The default slot usually contains only `cbp-nav-item` tags, but other content may also be included.", "name": "" }, { "description": "cbp-home - The link to the home page containing the Application Name as link text should be placed within this named slot for the intended visual treatment.", "name": "" }, { "description": "cbp-app-header-extras - Optional extra buttons/links that are right-aligned may be slotted within the app header but outside of the `nav` landmark.", "name": "" } ], "members": [ { "kind": "field", "name": "navItems", "type": { "text": "HTMLCbpNavItemElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "currentItem", "type": { "text": "HTMLCbpNavItemElement" }, "privacy": "private" }, { "kind": "field", "name": "drawerButton", "type": { "text": "HTMLCbpButtonElement" }, "privacy": "private" }, { "kind": "field", "name": "nav", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "children", "type": { "text": "HTMLElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "navWidth", "privacy": "private" }, { "kind": "field", "name": "searchForm", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "searchControl", "type": { "text": "HTMLCbpButtonElement" }, "privacy": "private" }, { "kind": "field", "name": "searchField", "type": { "text": "HTMLInputElement" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLCbpAppHeaderElement" }, "privacy": "private" }, { "kind": "field", "name": "subnavDrawerId", "type": { "text": "string" }, "description": "Specifies the id of the drawer to be launched" }, { "kind": "field", "name": "search", "type": { "text": "boolean" }, "description": "Specifies if there will be a slotted input for global search" }, { "kind": "field", "name": "searchMethod", "type": { "text": "string" }, "description": "Specifies the method attribute for the search form" }, { "kind": "field", "name": "searchAction", "type": { "text": "string" }, "description": "Specifies the action attribute for the search form" }, { "kind": "method", "name": "handleNavDrawerClose", "parameters": [ { "name": "e" } ], "type": { "text": "handleNavDrawerClose(e) => void" } }, { "kind": "method", "name": "handleSearchInput", "parameters": [ { "name": "e" } ], "type": { "text": "handleSearchInput(e) => void" } }, { "kind": "method", "name": "handleSearchSubmit", "parameters": [ { "name": "e" } ], "type": { "text": "handleSearchSubmit(e) => void" } }, { "kind": "method", "name": "handleKeyDown", "parameters": [ { "name": "ev", "type": { "text": "KeyboardEvent" } } ], "type": { "text": "handleKeyDown(ev: KeyboardEvent) => void" } }, { "kind": "method", "name": "handleClick", "parameters": [ { "name": "event", "type": { "text": "MouseEvent" } } ], "type": { "text": "handleClick(event: MouseEvent) => void" } }, { "kind": "method", "name": "openSearch", "description": "A public method to show the search form in the application header.", "type": { "text": "openSearch() => void" } }, { "kind": "method", "name": "closeSearch", "description": "A public method to close/hide the search form in the application header.", "type": { "text": "closeSearch() => void" } }, { "kind": "method", "name": "handleTabFocusOut", "parameters": [ { "name": "{ key, shiftKey }" } ], "type": { "text": "handleTabFocusOut({ key, shiftKey }) => void" } }, { "kind": "method", "name": "handleShiftTabFocusOut", "parameters": [ { "name": "{ key, shiftKey }" } ], "type": { "text": "handleShiftTabFocusOut({ key, shiftKey }) => void" } }, { "kind": "method", "name": "updateCurrentItem", "parameters": [ { "name": "newValue" } ], "type": { "text": "updateCurrentItem(newValue) => void" } }, { "kind": "method", "name": "setCurrentNav", "parameters": [ { "name": "activatedNav" } ], "type": { "text": "setCurrentNav(activatedNav) => void" } }, { "kind": "method", "name": "updateActiveItem", "parameters": [ { "name": "newValue" } ], "type": { "text": "updateActiveItem(newValue) => void" } }, { "kind": "method", "name": "handleResize", "parameters": [ { "name": "width" } ], "type": { "text": "handleResize(width) => void" } }, { "kind": "method", "name": "doResponsive", "type": { "text": "doResponsive() => void" } }, { "kind": "method", "name": "doFullSize", "type": { "text": "doFullSize() => void" } } ], "attributes": [ { "name": "subnav-drawer-id", "fieldName": "subnavDrawerId", "type": { "text": "string" } }, { "name": "search", "fieldName": "search", "type": { "text": "boolean" } }, { "name": "search-method", "fieldName": "searchMethod", "type": { "text": "string" } }, { "name": "search-action", "fieldName": "searchAction", "type": { "text": "string" } } ], "tagName": "cbp-app-header", "events": [ { "name": "searchInput", "type": { "text": "EventEmitter" }, "description": "A custom event emitted in accordance with the native input's onInput event." }, { "name": "searchSubmit", "type": { "text": "EventEmitter" }, "description": "A custom event emitted in accordance with the native search form's submit event." } ], "customElement": true, "modulePath": "src/components/cbp-app-header/cbp-app-header.tsx", "definitionPath": "src/components/cbp-app-header/cbp-app-header.tsx" } ], "exports": [ { "kind": "js", "name": "CbpAppHeader", "declaration": { "name": "CbpAppHeader", "module": "src/components/cbp-app-header/cbp-app-header.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-app-header", "declaration": { "name": "CbpAppHeader", "module": "src/components/cbp-app-header/cbp-app-header.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-badge/cbp-badge.tsx", "declarations": [ { "kind": "class", "description": "The Badge component is generally used for emphasizing a numeric characteristic of an object \n(e.g., the number of unread items in a folder).", "name": "CbpBadge", "slots": [ { "description": "The slotted badge content should be a short 1-2 digit number.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "color", "type": { "text": "\"default\"| \"danger\"" }, "description": "Specifies a color variant. Currently the only variant supported is \"danger\"." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "color", "fieldName": "color", "type": { "text": "\"default\"| \"danger\"" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-badge", "events": [], "customElement": true, "modulePath": "src/components/cbp-badge/cbp-badge.tsx", "definitionPath": "src/components/cbp-badge/cbp-badge.tsx" } ], "exports": [ { "kind": "js", "name": "CbpBadge", "declaration": { "name": "CbpBadge", "module": "src/components/cbp-badge/cbp-badge.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-badge", "declaration": { "name": "CbpBadge", "module": "src/components/cbp-badge/cbp-badge.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-banner/cbp-banner.tsx", "declarations": [ { "kind": "class", "description": "The Banner is a container spanning the entire viewport meant to highlight urgent or important content.", "name": "CbpBanner", "slots": [ { "description": "The main content of the banner goes in the default slot.", "name": "" }, { "description": "An optional banner title may be slotted here.", "name": "cbp-banner-title" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "color", "type": { "text": "\"info\"" }, "default": "\"info\"", "description": "Specifies a color variant for the banner." }, { "kind": "method", "name": "handleDismiss", "parameters": [ { "name": "e" } ], "type": { "text": "handleDismiss(e) => void" } } ], "attributes": [ { "name": "color", "fieldName": "color", "type": { "text": "\"info\"" } } ], "tagName": "cbp-banner", "events": [ { "name": "bannerDismiss", "type": { "text": "EventEmitter" }, "description": "A custom event emitted with the Banner is dismissed." } ], "customElement": true, "modulePath": "src/components/cbp-banner/cbp-banner.tsx", "definitionPath": "src/components/cbp-banner/cbp-banner.tsx" } ], "exports": [ { "kind": "js", "name": "CbpBanner", "declaration": { "name": "CbpBanner", "module": "src/components/cbp-banner/cbp-banner.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-banner", "declaration": { "name": "CbpBanner", "module": "src/components/cbp-banner/cbp-banner.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-breadcrumb/cbp-breadcrumb.tsx", "declarations": [ { "kind": "class", "description": "Breadcrumbs give users an indicator of where they are within a site/application hierarchy, \nespecially helpful when deeper within the site’s architecture. This component should wrap links \nrepresenting the parent sections of the current page, but not including the current page.", "name": "CbpBreadcrumb", "slots": [ { "description": "The individual links making up the breadcrumbs are placed in the default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "nav", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "menu", "type": { "text": "HTMLCbpMenuElement" }, "privacy": "private" }, { "kind": "field", "name": "ro", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "breadcrumbs", "type": { "text": "HTMLAnchorElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "children", "type": { "text": "HTMLElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "sizeMap", "type": { "text": "object[]" }, "privacy": "private", "default": "[\n {\n size: \"compact\",\n width: undefined\n },\n {\n size: \"medium\",\n width: undefined\n },\n {\n size: \"full\",\n width: undefined\n }\n ]" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "divider", "type": { "text": "string" }, "description": "Specifies a character as a divider between breadcrumb links. Defaults to \"/\"." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "field", "name": "menuItems", "type": { "text": "HTMLCbpMenuItemElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "sizeIndex", "type": { "text": "number" }, "privacy": "private", "default": "2" }, { "kind": "method", "name": "handleResize", "parameters": [ { "name": "width" } ], "type": { "text": "handleResize(width) => void" } }, { "kind": "method", "name": "resizeResponsive", "parameters": [ { "name": "mode" } ], "type": { "text": "resizeResponsive(mode) => void" } }, { "kind": "method", "name": "createMenu", "parameters": [ { "name": "breadcrumbs" } ], "type": { "text": "createMenu(breadcrumbs) => void" } } ], "attributes": [ { "name": "divider", "fieldName": "divider", "type": { "text": "string" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-breadcrumb", "events": [], "customElement": true, "modulePath": "src/components/cbp-breadcrumb/cbp-breadcrumb.tsx", "definitionPath": "src/components/cbp-breadcrumb/cbp-breadcrumb.tsx" } ], "exports": [ { "kind": "js", "name": "CbpBreadcrumb", "declaration": { "name": "CbpBreadcrumb", "module": "src/components/cbp-breadcrumb/cbp-breadcrumb.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-breadcrumb", "declaration": { "name": "CbpBreadcrumb", "module": "src/components/cbp-breadcrumb/cbp-breadcrumb.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-button/cbp-button.tsx", "declarations": [ { "kind": "class", "description": "The Button component represents a UI control visually styled like a button, regardless of whether \nit renders (or wraps) a button or an anchor tag.", "name": "CbpButton", "slots": [ { "description": "The button's label, which may contain markup such as icons, is placed in the default slot.", "name": "" }, { "description": "cbp-button-custom - Custom buttons/anchors may be slotted via named-slot, which prevents the web component from rendering its own tag. In such a case, component properties that render attributes directly onto the rendered button will have no effect, as they are expected to be supplied directly on the slotted element.", "name": "" } ], "members": [ { "kind": "field", "name": "button", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "controlTarget", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "persistedAttrs", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLCbpButtonElement" }, "privacy": "private" }, { "kind": "field", "name": "tag", "type": { "text": "'button' | 'a'" }, "default": "'button'", "description": "Specifies whether the button is a true button element or \"link button.\"" }, { "kind": "field", "name": "type", "type": { "text": "'button' | 'submit' | 'reset'" }, "default": "'button'", "description": "The `type` attribute of the button: button, submit, or reset. Defaults to \"button.\"" }, { "kind": "field", "name": "fill", "type": { "text": "'solid' | 'outline' | 'ghost'" }, "default": "'solid'", "description": "The visual fill of the button: solid, outline, or ghost. Defaults to \"solid.\"" }, { "kind": "field", "name": "color", "type": { "text": "'primary' | 'secondary' | 'danger'" }, "default": "'primary'", "description": "The color of the button: primary, secondary, or danger. Defaults to \"primary.\"" }, { "kind": "field", "name": "variant", "type": { "text": "'square' | 'circle' | 'cta'" }, "description": "Specifies a variant of the buttons, such as square for buttons with only an icon and call-to-action button." }, { "kind": "field", "name": "controlId", "type": { "text": "string" }, "description": "Optionally specify the ID of the control here, which is used to generate related pattern node IDs and associate everything for accessibility" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "The `name` attribute of the button, which is passed as part of formData (as a key) for the the pressed submit button." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "The `value` attribute of the button, which is passed as part of formData (as a value) for the the pressed submit button." }, { "kind": "field", "name": "href", "type": { "text": "string" }, "description": "The `href` attribute of a link button." }, { "kind": "field", "name": "rel", "type": { "text": "string" }, "description": "The `rel` attribute of a link button." }, { "kind": "field", "name": "target", "type": { "text": "string" }, "description": "The `target` attribute of a link button." }, { "kind": "field", "name": "download", "type": { "text": "boolean | string" }, "description": "The `download` attribute of a link button; when present tells the browser to download the specified href URI instead\nof viewing or navigating to it." }, { "kind": "field", "name": "width", "type": { "text": "string" }, "description": "Specifies the (min-)width of the button (in CSS units) when different from the default size." }, { "kind": "field", "name": "height", "type": { "text": "string" }, "description": "Specifies the (min-)height of the button (in CSS units) when different from the default size." }, { "kind": "field", "name": "pressed", "type": { "text": "\"true\" | \"false\"" }, "description": "Specifies if the button is pressed and results in `aria-pressed=\"true|false\"` being placed on the \nbutton when specified. Only valid on actual `button` elements." }, { "kind": "field", "name": "expanded", "type": { "text": "\"true\" | \"false\"" }, "description": "Specifies if a controlled UI widget is expanded and results in `aria-pressed=\"true|false\"` being placed \non the button when specified. This property is usually used for progressive disclosure patterns such as \naccordions, menus, expand/collapse, etc., where focus remains on the control after the user action." }, { "kind": "field", "name": "controls", "type": { "text": "string" }, "description": "Specifies the DOM element that the button controls and results in the `aria-controls` attribute\nrendered on the button with the specified value." }, { "kind": "field", "name": "targetProp", "type": { "text": "string" }, "description": "The property on the target element being toggled by the button/control (e.g., \"open\")." }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "Specifies an accessible label for the button/link as an `aria-label` when the button does not contain label text\nor a sufficiently unique label. This text overrides the default label and is not additive to it." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "description": "Marks the rendered button/link in a disabled state when specified." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleClick", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "e" } ], "type": { "text": "handleClick(e) => void" } } ], "attributes": [ { "name": "tag", "fieldName": "tag", "type": { "text": "'button' | 'a'" } }, { "name": "type", "fieldName": "type", "type": { "text": "'button' | 'submit' | 'reset'" } }, { "name": "fill", "fieldName": "fill", "type": { "text": "'solid' | 'outline' | 'ghost'" } }, { "name": "color", "fieldName": "color", "type": { "text": "'primary' | 'secondary' | 'danger'" } }, { "name": "variant", "fieldName": "variant", "type": { "text": "'square' | 'circle' | 'cta'" } }, { "name": "control-id", "fieldName": "controlId", "type": { "text": "string" } }, { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "value", "fieldName": "value", "type": { "text": "string" } }, { "name": "href", "fieldName": "href", "type": { "text": "string" } }, { "name": "rel", "fieldName": "rel", "type": { "text": "string" } }, { "name": "target", "fieldName": "target", "type": { "text": "string" } }, { "name": "download", "fieldName": "download", "type": { "text": "boolean | string" } }, { "name": "width", "fieldName": "width", "type": { "text": "string" } }, { "name": "height", "fieldName": "height", "type": { "text": "string" } }, { "name": "pressed", "fieldName": "pressed", "type": { "text": "\"true\" | \"false\"" } }, { "name": "expanded", "fieldName": "expanded", "type": { "text": "\"true\" | \"false\"" } }, { "name": "controls", "fieldName": "controls", "type": { "text": "string" } }, { "name": "target-prop", "fieldName": "targetProp", "type": { "text": "string" } }, { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-button", "events": [ { "name": "buttonClick", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the click event occurs for either a rendered button or anchor/link." }, { "name": "componentLoad", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the component has completed loading and its internal lifecycles." } ], "customElement": true, "modulePath": "src/components/cbp-button/cbp-button.tsx", "definitionPath": "src/components/cbp-button/cbp-button.tsx" } ], "exports": [ { "kind": "js", "name": "CbpButton", "declaration": { "name": "CbpButton", "module": "src/components/cbp-button/cbp-button.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-button", "declaration": { "name": "CbpButton", "module": "src/components/cbp-button/cbp-button.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-card/cbp-card.tsx", "declarations": [ { "kind": "class", "description": "The Card component is a visual treatment for a container meant for similarly-sized, repeated chunks of content.", "name": "CbpCard", "slots": [ { "description": "The default slot contains the body of the card.", "name": "" }, { "description": "Contains the card title, if present.", "name": "cbp-card-title" }, { "description": "Contains the links/buttons for cards.", "name": "cbp-card-actions" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "color", "type": { "text": "\"info\" | \"success\" | \"warning\" | \"danger\"" }, "description": "Optionally specifies a card color (different from the default color) based on predefined design token values." }, { "kind": "field", "name": "variant", "type": { "text": "\"banner\" | \"flag\"" }, "description": "Specifies optional variants with difference from the default card." }, { "kind": "field", "name": "interactive", "type": { "text": "\"clickable\" | \"selectable\" | \"radio\"" }, "description": "Specifies the interactivity of the card." }, { "kind": "field", "name": "href", "type": { "text": "string" }, "description": "Specifies the `href` value for the \"clickable\" interactive cards." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "description": "Marks the rendered card in a disabled state when specified." }, { "kind": "field", "name": "stretch", "type": { "text": "boolean" }, "default": "false", "description": "When present, the card will stretch vertically to fill its parent container; most useful when placed in an equally sized grid or row of cards." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." } ], "attributes": [ { "name": "color", "fieldName": "color", "type": { "text": "\"info\" | \"success\" | \"warning\" | \"danger\"" } }, { "name": "variant", "fieldName": "variant", "type": { "text": "\"banner\" | \"flag\"" } }, { "name": "interactive", "fieldName": "interactive", "type": { "text": "\"clickable\" | \"selectable\" | \"radio\"" } }, { "name": "href", "fieldName": "href", "type": { "text": "string" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "stretch", "fieldName": "stretch", "type": { "text": "boolean" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } } ], "tagName": "cbp-card", "events": [], "customElement": true, "modulePath": "src/components/cbp-card/cbp-card.tsx", "definitionPath": "src/components/cbp-card/cbp-card.tsx" } ], "exports": [ { "kind": "js", "name": "CbpCard", "declaration": { "name": "CbpCard", "module": "src/components/cbp-card/cbp-card.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-card", "declaration": { "name": "CbpCard", "module": "src/components/cbp-card/cbp-card.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-carousel/cbp-carousel.tsx", "declarations": [ { "kind": "class", "description": "The Carousel is a control meant to take slotted Carousel-items to visually\niterate though to display with a slotted control of a dot-indicator or other control", "name": "CbpCarousel", "slots": [ { "description": "Intended for a collection of CBP-Carousel-Items to be rendered in the cbp-carousel-container", "name": "" }, { "description": "This named slot is intended for a control of the carousel, for example: cbp-dot-indicator", "name": "cbp-carousel-controls" } ], "members": [ { "kind": "field", "name": "control", "type": { "text": "HTMLCbpDotIndicatorElement" }, "privacy": "private" }, { "kind": "field", "name": "items", "type": { "text": "HTMLCbpCarouselItemElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "height", "type": { "text": "string" }, "default": "'100%'", "description": "used to set the height (in CSS units or content values) of the carousel" }, { "kind": "field", "name": "width", "type": { "text": "string" }, "default": "'100%'", "description": "used to set the width (in CSS units or content values) of the carousel" }, { "kind": "field", "name": "current", "type": { "text": "number" }, "default": "0", "description": "used to set the current for the carousel" }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "method", "name": "watchCurrent", "type": { "text": "watchCurrent() => void" } }, { "kind": "method", "name": "navigateCollection", "parameters": [ { "name": "e" } ], "type": { "text": "navigateCollection(e) => void" } }, { "kind": "method", "name": "handleResize", "type": { "text": "handleResize() => void" } }, { "kind": "method", "name": "scrollToItem", "type": { "text": "scrollToItem() => void" } }, { "kind": "method", "name": "updateCurrent", "parameters": [ { "name": "index" } ], "type": { "text": "updateCurrent(index) => void" } } ], "attributes": [ { "name": "height", "fieldName": "height", "type": { "text": "string" } }, { "name": "width", "fieldName": "width", "type": { "text": "string" } }, { "name": "current", "fieldName": "current" }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } } ], "tagName": "cbp-carousel", "events": [], "customElement": true, "modulePath": "src/components/cbp-carousel/cbp-carousel.tsx", "definitionPath": "src/components/cbp-carousel/cbp-carousel.tsx" } ], "exports": [ { "kind": "js", "name": "CbpCarousel", "declaration": { "name": "CbpCarousel", "module": "src/components/cbp-carousel/cbp-carousel.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-carousel", "declaration": { "name": "CbpCarousel", "module": "src/components/cbp-carousel/cbp-carousel.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-carousel-item/cbp-carousel-item.tsx", "declarations": [ { "kind": "class", "description": "The Carousel Item is meant to be slotted into the CBP-Carousel and represents a single \niteration of content for the CBP-Carousel", "name": "CbpCarouselItem", "slots": [ { "description": "Anything placed into the default slot will be rendered in the cbp-carousel-item", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "height", "type": { "text": "string" }, "default": "'100%'", "description": "used to set the height (in CSS units or content values) of the carousel-item" }, { "kind": "field", "name": "width", "type": { "text": "string" }, "default": "'100%'", "description": "used to set the width (in CSS units or content values) of the carousel-item" } ], "attributes": [ { "name": "height", "fieldName": "height", "type": { "text": "string" } }, { "name": "width", "fieldName": "width", "type": { "text": "string" } } ], "tagName": "cbp-carousel-item", "events": [], "customElement": true, "modulePath": "src/components/cbp-carousel-item/cbp-carousel-item.tsx", "definitionPath": "src/components/cbp-carousel-item/cbp-carousel-item.tsx" } ], "exports": [ { "kind": "js", "name": "CbpCarouselItem", "declaration": { "name": "CbpCarouselItem", "module": "src/components/cbp-carousel-item/cbp-carousel-item.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-carousel-item", "declaration": { "name": "CbpCarouselItem", "module": "src/components/cbp-carousel-item/cbp-carousel-item.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-checkbox/cbp-checkbox.tsx", "declarations": [ { "kind": "class", "description": "The Checkbox component wraps the slotted native form control (`input type=\"checkbox\"`) and label text, \nproviding cross-browser styling according to the design system specifications.", "name": "CbpCheckbox", "slots": [ { "description": "the checkbox control and label text are placed in the default slot, both of which are rendered inside of the `label` element. The label should not include excessively long descriptive text.", "name": "" } ], "members": [ { "kind": "field", "name": "formField", "type": { "text": "HTMLInputElement" }, "privacy": "private" }, { "kind": "field", "name": "initialChecked", "type": { "text": "boolean" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "The `name` attribute of the checkbox, which is passed as part of formData (as a key) only when the checkbox is checked." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "Optionally set the `value` attribute of the checkbox at the component level. Not needed if the slotted checkbox has a value." }, { "kind": "field", "name": "fieldId", "type": { "text": "string" }, "description": "Optionally specify the ID of the checkbox input here, which is used to generate related pattern node IDs and associate everything for accessibility" }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "description": "Marks the checkbox as checked by default when specified." }, { "kind": "field", "name": "indeterminate", "type": { "text": "boolean" }, "description": "Marks the checkbox as checked by default when specified." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "description": "Marks the checkbox in a disabled state when specified." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleChange", "parameters": [ { "name": "e" } ], "type": { "text": "handleChange(e) => void" } }, { "kind": "method", "name": "reset", "description": "A custom method to reset the Checkbox component to its initial state and value since it does not update \nproperly on a native form reset when the checked state is set via the component property. This method may \nbe called manually, but is automatically called on form reset when using the `cbp-form` component.", "type": { "text": "reset() => void" } }, { "kind": "method", "name": "watchDisabledHandler", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchDisabledHandler(newValue: boolean) => void" } }, { "kind": "method", "name": "watchChecked", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchChecked(newValue: boolean) => void" } }, { "kind": "method", "name": "watchIndeterminateHandler", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchIndeterminateHandler(newValue: boolean) => void" } } ], "attributes": [ { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "value", "fieldName": "value", "type": { "text": "string" } }, { "name": "field-id", "fieldName": "fieldId", "type": { "text": "string" } }, { "name": "checked", "fieldName": "checked", "type": { "text": "boolean" } }, { "name": "indeterminate", "fieldName": "indeterminate", "type": { "text": "boolean" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-checkbox", "events": [ { "name": "stateChanged", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the checked state changes due to user interaction." } ], "customElement": true, "modulePath": "src/components/cbp-checkbox/cbp-checkbox.tsx", "definitionPath": "src/components/cbp-checkbox/cbp-checkbox.tsx" } ], "exports": [ { "kind": "js", "name": "CbpCheckbox", "declaration": { "name": "CbpCheckbox", "module": "src/components/cbp-checkbox/cbp-checkbox.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-checkbox", "declaration": { "name": "CbpCheckbox", "module": "src/components/cbp-checkbox/cbp-checkbox.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-chip/cbp-chip.tsx", "declarations": [ { "kind": "class", "description": "The Chip component acts like an interactive version of the Tag and is typically used for selecting or filtering.", "name": "CbpChip", "slots": [ { "description": "The default slot defines the chip's label.", "name": "" }, { "description": "Optionally slot a custom icon for the default state (will still show the x for removal when pressed).", "name": "cbp-chip-icon" } ], "members": [ { "kind": "field", "name": "button", "type": { "text": "HTMLButtonElement" }, "privacy": "private" }, { "kind": "field", "name": "icon", "type": { "text": "HTMLCbpIconElement" }, "privacy": "private" }, { "kind": "field", "name": "iconName", "type": { "text": "string" }, "privacy": "private", "default": "\"plus\"" }, { "kind": "field", "name": "ariaPressed", "type": { "text": "boolean" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "Specifies the `name` attribute of the rendered button" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "Specifies the `value` attribute of the rendered button" }, { "kind": "field", "name": "pressed", "type": { "text": "boolean" }, "default": "false", "description": "Specifies the pressed state of the button and `aria-pressed` attribute of the rendered button" }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "description": "Marks the rendered button/link in a disabled state when specified." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleClick(e) => void" } } ], "attributes": [ { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "value", "fieldName": "value", "type": { "text": "string" } }, { "name": "pressed", "fieldName": "pressed", "type": { "text": "boolean" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-chip", "events": [ { "name": "chipClick", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the chip is activated/toggled." } ], "customElement": true, "modulePath": "src/components/cbp-chip/cbp-chip.tsx", "definitionPath": "src/components/cbp-chip/cbp-chip.tsx" } ], "exports": [ { "kind": "js", "name": "CbpChip", "declaration": { "name": "CbpChip", "module": "src/components/cbp-chip/cbp-chip.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-chip", "declaration": { "name": "CbpChip", "module": "src/components/cbp-chip/cbp-chip.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-code-snippet/cbp-code-snippet.tsx", "declarations": [ { "kind": "class", "description": "The Code Snippet component is used to display code in a readable format and facilitate copying it.", "name": "CbpCodeSnippet", "slots": [ { "description": "Raw, unescaped code is slotted in the default slot and escaped for display purposes.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "codeBlock", "privacy": "private" }, { "kind": "field", "name": "toggleButtonText", "type": { "text": "string" }, "privacy": "private", "default": "'Show More'" }, { "kind": "field", "name": "toggleButtonRotate", "type": { "text": "number" }, "privacy": "private", "default": "90" }, { "kind": "field", "name": "variant", "type": { "text": "'inline' | 'block'" }, "default": "'inline'", "description": "Specifies inline or block layouts of the code snippet. Defaults to inline." }, { "kind": "field", "name": "height", "type": { "text": "string" }, "description": "Specifies the height (in CSS units) for a multiple line block variant while not expanded." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "field", "name": "expanded", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "codeContainerHeight", "type": { "text": "number" }, "privacy": "private" }, { "kind": "field", "name": "codeBlockHeight", "type": { "text": "number" }, "privacy": "private" }, { "kind": "method", "name": "copyText", "parameters": [ { "name": "e" } ], "type": { "text": "copyText(e) => void" } }, { "kind": "method", "name": "toggleShowAll", "parameters": [ { "name": "e" } ], "type": { "text": "toggleShowAll(e) => void" } } ], "attributes": [ { "name": "variant", "fieldName": "variant", "type": { "text": "'inline' | 'block'" } }, { "name": "height", "fieldName": "height", "type": { "text": "string" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-code-snippet", "events": [ { "name": "copyTextClick", "type": { "text": "EventEmitter" }, "description": "Emits a custom event when the \"Copy\" button is activated, copying the code to the clipboard." }, { "name": "toggleShowAllClick", "type": { "text": "EventEmitter" }, "description": "Emits a custom event when the the \"Show More/Less\" control is activated (for code blocks overflowing the specified height)." } ], "customElement": true, "modulePath": "src/components/cbp-code-snippet/cbp-code-snippet.tsx", "definitionPath": "src/components/cbp-code-snippet/cbp-code-snippet.tsx" } ], "exports": [ { "kind": "js", "name": "CbpCodeSnippet", "declaration": { "name": "CbpCodeSnippet", "module": "src/components/cbp-code-snippet/cbp-code-snippet.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-code-snippet", "declaration": { "name": "CbpCodeSnippet", "module": "src/components/cbp-code-snippet/cbp-code-snippet.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-container/cbp-container.tsx", "declarations": [ { "kind": "class", "description": "The Container component is a building block component for wrapping content and providing \nvisual treatment such as a background image or color.", "name": "CbpContainer", "slots": [ { "description": "Any content or layout components may be slotted within the container.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "background", "type": { "text": "string" }, "description": "Specifies the CSS background of the parent container, which could be a solid color, an image, a gradient, or any combination (or multiples) achievable via the CSS `background` property." }, { "kind": "field", "name": "textColor", "type": { "text": "string" }, "description": "Specifies the text color for content within the container, since it could be on any background." }, { "kind": "field", "name": "width", "type": { "text": "string" }, "description": "Specifies the width of the inner container area." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "background", "fieldName": "background", "type": { "text": "string" } }, { "name": "text-color", "fieldName": "textColor", "type": { "text": "string" } }, { "name": "width", "fieldName": "width", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-container", "events": [], "customElement": true, "modulePath": "src/components/cbp-container/cbp-container.tsx", "definitionPath": "src/components/cbp-container/cbp-container.tsx" } ], "exports": [ { "kind": "js", "name": "CbpContainer", "declaration": { "name": "CbpContainer", "module": "src/components/cbp-container/cbp-container.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-container", "declaration": { "name": "CbpContainer", "module": "src/components/cbp-container/cbp-container.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-dialog/cbp-dialog.tsx", "declarations": [ { "kind": "class", "description": "The Dialog component represents a dialog overlaid on top of the web page, which can be used similar \nto an alert/confirm dialog or contain a small form.", "name": "CbpDialog", "slots": [ { "description": "The body content of the dialog goes in the default slot.", "name": "" }, { "description": "The dialog header, which should render a semantic h2 tag, is slotted into this named slot.", "name": "cbp-dialog-header" }, { "description": "Body content may optionally be slotted into this named slot.", "name": "cbp-dialog-body" }, { "description": "The dialog actions (buttons) shall be slotted in this named slot.", "name": "cbp-dialog-actions" } ], "members": [ { "kind": "field", "name": "dialog", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "focusableElements", "type": { "text": "any[]" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "description": "When set, specifies that the dialog is open" }, { "kind": "field", "name": "height", "type": { "text": "string" }, "description": "Specifies the dialog height in CSS units (preferably relative units such as rem)." }, { "kind": "field", "name": "width", "type": { "text": "string" }, "description": "Specifies the dialog width in CSS units (preferably relative units such as rem)." }, { "kind": "field", "name": "uid", "type": { "text": "string" }, "description": "Specifies a unique `ID` for the dialog, used to wire up the controls and accessibility features." }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "Creates an accessible label for the dialog." }, { "kind": "field", "name": "color", "type": { "text": "'info' | 'success' | 'warning' | 'danger'" }, "description": "Optionally specifies a dialog color (different from the default color) based on predefined design token values." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "watchOpenHandler", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchOpenHandler(newValue: boolean) => void" } }, { "kind": "method", "name": "openDialog", "description": "A public method for opening the dialog.", "type": { "text": "openDialog() => void" } }, { "kind": "method", "name": "closeDialog", "description": "A public method for closing the dialog.", "type": { "text": "closeDialog() => void" } }, { "kind": "method", "name": "setFocus", "type": { "text": "setFocus() => void" } }, { "kind": "method", "name": "handleBackdropClick", "parameters": [ { "name": "{ target }" } ], "type": { "text": "handleBackdropClick({ target }) => void" } } ], "attributes": [ { "name": "open", "fieldName": "open", "type": { "text": "boolean" } }, { "name": "height", "fieldName": "height", "type": { "text": "string" } }, { "name": "width", "fieldName": "width", "type": { "text": "string" } }, { "name": "uid", "fieldName": "uid", "type": { "text": "string" } }, { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "color", "fieldName": "color", "type": { "text": "'info' | 'success' | 'warning' | 'danger'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-dialog", "events": [ { "name": "dialogOpen", "type": { "text": "EventEmitter" }, "description": "Custom event fired when the dialog is opened." }, { "name": "dialogClose", "type": { "text": "EventEmitter" }, "description": "Custom event fired when the dialog is closed." } ], "customElement": true, "modulePath": "src/components/cbp-dialog/cbp-dialog.tsx", "definitionPath": "src/components/cbp-dialog/cbp-dialog.tsx" } ], "exports": [ { "kind": "js", "name": "CbpDialog", "declaration": { "name": "CbpDialog", "module": "src/components/cbp-dialog/cbp-dialog.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-dialog", "declaration": { "name": "CbpDialog", "module": "src/components/cbp-dialog/cbp-dialog.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-dot-indicator/cbp-dot-indicator.tsx", "declarations": [ { "kind": "class", "description": "", "name": "CbpDotIndicator", "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "selectedIndex", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "focusIndex", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "current", "type": { "text": "number" }, "default": "0", "description": "the currently active dot" }, { "kind": "field", "name": "itemName", "type": { "text": "string" }, "default": "'Item'", "description": "unit of measure for what the dot indicator is measuring" }, { "kind": "field", "name": "items", "type": { "text": "number" }, "description": "Length of index dot-indicator is tracking" }, { "kind": "method", "name": "setIndexActive", "parameters": [ { "name": "index" } ], "type": { "text": "setIndexActive(index) => void" } }, { "kind": "method", "name": "generateIndicator", "type": { "text": "generateIndicator() => void" } }, { "kind": "method", "name": "keyboardNav", "parameters": [ { "name": "key" } ], "type": { "text": "keyboardNav(key) => void" } } ], "attributes": [ { "name": "current", "fieldName": "current", "type": { "text": "number" } }, { "name": "item-name", "fieldName": "itemName", "type": { "text": "string" } }, { "name": "items", "fieldName": "items", "type": { "text": "number" } } ], "tagName": "cbp-dot-indicator", "events": [ { "name": "navigateCollection", "type": { "text": "EventEmitter" }, "description": "Custom event emitted when the Dot-indicator changes active indicator" } ], "customElement": true, "modulePath": "src/components/cbp-dot-indicator/cbp-dot-indicator.tsx", "definitionPath": "src/components/cbp-dot-indicator/cbp-dot-indicator.tsx" } ], "exports": [ { "kind": "js", "name": "CbpDotIndicator", "declaration": { "name": "CbpDotIndicator", "module": "src/components/cbp-dot-indicator/cbp-dot-indicator.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-dot-indicator", "declaration": { "name": "CbpDotIndicator", "module": "src/components/cbp-dot-indicator/cbp-dot-indicator.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-drawer/cbp-drawer.tsx", "declarations": [ { "kind": "class", "description": "The Drawer is a container that may be hidden and revealed, sliding in from either side of the viewport, \ncontaining application-defined contents. The Drawer may optionally be rendered in the flow of the page \nat larger screen sizes.", "name": "CbpDrawer", "slots": [ { "description": "The Drawer contents go in the default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "drawer", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "focusableElements", "type": { "text": "any[]" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "position", "type": { "text": "'left' | 'right'" }, "default": "'left'", "description": "Specifies the position of the drawer (left or right)" }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "description": "When set, specifies that the drawer is open" }, { "kind": "field", "name": "uid", "type": { "text": "string" }, "description": "Specifies a unique `ID` for the drawer, used to wire up the controls and accessibility features." }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "Creates an accessible label for the drawer (dialog)." }, { "kind": "field", "name": "persistAt", "type": { "text": "string" }, "description": "Specifies a valid CSS media query (preferably using relative units), when met will hide the wrapped content using display: none. E.g., `min-width:64em`" }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "field", "name": "persistent", "type": { "text": "boolean" }, "default": "false" }, { "kind": "method", "name": "watchOpenHandler", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchOpenHandler(newValue: boolean) => void" } }, { "kind": "method", "name": "openDrawer", "description": "A public method for opening the drawer.", "type": { "text": "openDrawer() => void" } }, { "kind": "method", "name": "closeDrawer", "description": "A public method for closing the drawer.", "type": { "text": "closeDrawer() => void" } }, { "kind": "method", "name": "setFocus", "type": { "text": "setFocus() => void" } }, { "kind": "method", "name": "handleBackdropClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleBackdropClick(e) => void" } }, { "kind": "method", "name": "handleKeyUp", "parameters": [ { "name": "e" } ], "type": { "text": "handleKeyUp(e) => void" } }, { "kind": "method", "name": "doPersistAt", "parameters": [ { "name": "mql" } ], "type": { "text": "doPersistAt(mql) => void" } } ], "attributes": [ { "name": "position", "fieldName": "position", "type": { "text": "'left' | 'right'" } }, { "name": "open", "fieldName": "open", "type": { "text": "boolean" } }, { "name": "uid", "fieldName": "uid", "type": { "text": "string" } }, { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "persist-at", "fieldName": "persistAt", "type": { "text": "string" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-drawer", "events": [ { "name": "drawerOpen", "type": { "text": "EventEmitter" }, "description": "Custom event fired when the drawer is opened." }, { "name": "drawerClose", "type": { "text": "EventEmitter" }, "description": "Custom event fired when the drawer is closed." } ], "customElement": true, "modulePath": "src/components/cbp-drawer/cbp-drawer.tsx", "definitionPath": "src/components/cbp-drawer/cbp-drawer.tsx" } ], "exports": [ { "kind": "js", "name": "CbpDrawer", "declaration": { "name": "CbpDrawer", "module": "src/components/cbp-drawer/cbp-drawer.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-drawer", "declaration": { "name": "CbpDrawer", "module": "src/components/cbp-drawer/cbp-drawer.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-dropdown/cbp-dropdown.tsx", "declarations": [ { "kind": "class", "description": "The Dropdown component offers an alternative to the native select element that can be fully styled \nand support additional variants, such as a multi-select and/or combobox.", "name": "CbpDropdown", "slots": [ { "description": "Only Dropdown Items should be placed in the default slot. They get auto-slotted into 'cbp-dropdown-items' behind the scenes.", "name": "" }, { "description": "Dropdown items are auto-slotted here. Not need to specify this named slot.", "name": "cbp-dropdown-items" }, { "description": "Allows for an optional button control to be slotted as an overlay at the start of the dropdown (such as a \"previous\" button).", "name": "cbp-dropdown-attached-button-start" }, { "description": "Allows for an optional button control to be slotted as an overlay at the end of the dropdown (such as a \"next\" button).", "name": "cbp-dropdown-attached-button-end" } ], "members": [ { "kind": "field", "name": "control", "type": { "text": "HTMLButtonElement | HTMLInputElement" }, "privacy": "private" }, { "kind": "field", "name": "formField", "type": { "text": "HTMLInputElement" }, "privacy": "private" }, { "kind": "field", "name": "initialValue", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "listbox", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "dropdownItems", "type": { "text": "HTMLCbpDropdownItemElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "generatedItems", "type": { "text": "HTMLCbpDropdownItemElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "focusIndex", "type": { "text": "number | undefined" }, "privacy": "private" }, { "kind": "field", "name": "matches", "type": { "text": "number[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "matchIndex", "type": { "text": "number | undefined" }, "privacy": "private" }, { "kind": "field", "name": "counterControl", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "createOption", "type": { "text": "HTMLCbpDropdownItemElement" }, "privacy": "private" }, { "kind": "field", "name": "attachedButtonStart", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "attachedButtonEnd", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "attachedButtonStartWidth", "privacy": "private" }, { "kind": "field", "name": "attachedButtonEndWidth", "privacy": "private" }, { "kind": "field", "name": "createLabel", "type": { "text": "string | undefined" }, "privacy": "private" }, { "kind": "field", "name": "visible", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "observer", "type": { "text": "ResizeObserver" }, "privacy": "private" }, { "kind": "field", "name": "typingMode", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "newItems", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "host", "type": { "text": "HTMLCbpDropdownElement" }, "privacy": "private" }, { "kind": "field", "name": "multiple", "type": { "text": "boolean" }, "default": "false", "description": "Specifies whether multiple selections are supported, in which case checkboxes shall be slotted in accordance \nwith the design system specified pattern. Defaults to false, which renders a single-select dropdown." }, { "kind": "field", "name": "filter", "type": { "text": "boolean" }, "default": "false", "description": "Specifies whether the dropdown accepts key presses to filter results, enabling combobox functionality." }, { "kind": "field", "name": "async", "type": { "text": "boolean" }, "default": "false", "description": "Indicates that the filtering will be performed by asynchronous calls (handled by application logic)." }, { "kind": "field", "name": "minimumInputLength", "type": { "text": "number" }, "default": "1", "description": "Specifies the number of characters need to emit an event to make an API call and return filtered results. \nThis property is only used when filter=true AND async=true." }, { "kind": "field", "name": "items", "type": { "text": "string | object" }, "description": "A JSON object (or stringified JSON) containing an array of labels, values, and optionally selected status. \nLabels may contain markup as needed, but in such cases, a value should always be specified explicitly.\nThe expected format is [{\"label\":\"string\",\"value\":\"string\",\"selected\":\"boolean (optional\"}, ...]" }, { "kind": "field", "name": "create", "type": { "text": "boolean" }, "description": "Specifies that when an exact match is not found for a search string (for combobox functionality), an option to create a new item is presented." }, { "kind": "field", "name": "fieldId", "type": { "text": "string" }, "description": "Optionally specify the ID of the visible control here, which is used to generate related \npattern node IDs and associate everything for accessibility." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "Specifies the name of the (hidden) form field" }, { "kind": "field", "name": "placeholder", "type": { "text": "string" }, "default": "'Choose Item'", "description": "Represents placeholder text on the dropdown control, displayed in a distinctive style from the \nselected item. Defaults to \"Choose Item\". Has no effect on multi-selects, as the component manages this text." }, { "kind": "field", "name": "selectedLabel", "type": { "text": "string | undefined" }, "description": "Specifies the visible label on the dropdown control of the selected item. \nPrimarily updated dynamically by the component." }, { "kind": "field", "name": "value", "type": { "text": "any" }, "default": "''", "description": "Specifies the value of the hidden input holding the value (or barring one, the text label) \nof the selected item. Primarily updated dynamically by the component." }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Specifies whether the dropdown menu is open/visible." }, { "kind": "field", "name": "error", "type": { "text": "boolean" }, "default": "false", "description": "Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the \nparent `cbp-form-field` component." }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "default": "false", "description": "Specifies that the field is readonly. Primarily controlled by the parent `cbp-form-field` component." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles (to the host) as an object. This property is not reactive." }, { "kind": "field", "name": "debug", "type": { "text": "boolean" }, "default": "false", "description": "Turns on debug mode, since the dropdown is complex and has complex integration concerns. (This prop is temporary and will be removed)" }, { "kind": "field", "name": "selectedItems", "type": { "text": "HTMLCbpDropdownItemElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "selectedItemCount", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "searchString", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "method", "name": "handleDropdownItemClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleDropdownItemClick(e) => void" } }, { "kind": "method", "name": "watchOpen", "parameters": [ { "name": "newValue" } ], "type": { "text": "watchOpen(newValue) => void" } }, { "kind": "method", "name": "watchValue", "parameters": [ { "name": "newValue" }, { "name": "oldValue" } ], "type": { "text": "watchValue(newValue, oldValue) => void" } }, { "kind": "method", "name": "watchItems", "parameters": [ { "name": "newValue" } ], "type": { "text": "watchItems(newValue) => void" } }, { "kind": "method", "name": "reset", "description": "A custom method to reset the Dropdown component to its initial state and value since it does not update \nproperly on a native form reset. This method may be called manually, but is automatically called on \nform reset when using the `cbp-form` component.", "type": { "text": "reset() => void" } }, { "kind": "method", "name": "clearSelections", "parameters": [ { "name": "e", "default": "undefined" } ], "description": "A public method to clear all selected items in a dropdown (single or multi-select).\nEmits the valueChange event afterward.", "type": { "text": "clearSelections(e = undefined) => void" } }, { "kind": "method", "name": "doCreateItem", "parameters": [ { "name": "e" } ], "type": { "text": "doCreateItem(e) => void" } }, { "kind": "method", "name": "updateValue", "parameters": [ { "name": "value", "type": { "text": "string" } }, { "name": "selected", "default": "true", "type": { "text": "boolean" } } ], "type": { "text": "updateValue(value: string, selected: boolean = true) => void" } }, { "kind": "method", "name": "setSelectedFromValue", "type": { "text": "setSelectedFromValue() => void" } }, { "kind": "method", "name": "setValueFromSelected", "type": { "text": "setValueFromSelected() => void" } }, { "kind": "method", "name": "generateItems", "parameters": [ { "name": "items" } ], "type": { "text": "generateItems(items) => void" } }, { "kind": "method", "name": "checkExactMatch", "return": { "type": { "text": "boolean" } }, "type": { "text": "checkExactMatch() => boolean" } }, { "kind": "method", "name": "handleSlotChange", "parameters": [ { "name": "e" } ], "type": { "text": "handleSlotChange(e) => void" } }, { "kind": "method", "name": "handleCounterClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleCounterClick(e) => void" } }, { "kind": "method", "name": "handleCounterKeydown", "parameters": [ { "name": "e" } ], "type": { "text": "handleCounterKeydown(e) => void" } }, { "kind": "method", "name": "handleDropdownClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleDropdownClick(e) => void" } }, { "kind": "method", "name": "getActionFromKey", "parameters": [ { "name": "event" } ], "type": { "text": "getActionFromKey(event) => void" } }, { "kind": "method", "name": "jumpToLetter", "parameters": [ { "name": "letter" } ], "type": { "text": "jumpToLetter(letter) => void" } }, { "kind": "method", "name": "getFirstLetterMatches", "parameters": [ { "name": "letter" } ], "type": { "text": "getFirstLetterMatches(letter) => void" } }, { "kind": "method", "name": "handleComboBoxInput", "parameters": [ { "name": "event" } ], "type": { "text": "handleComboBoxInput(event) => void" } }, { "kind": "method", "name": "searchByString", "parameters": [ { "name": "searchString" }, { "name": "e" } ], "type": { "text": "searchByString(searchString, e) => void" } }, { "kind": "method", "name": "getSearchStringMatches", "parameters": [ { "name": "searchString" } ], "type": { "text": "getSearchStringMatches(searchString) => void" } }, { "kind": "method", "name": "filterDropdownItems", "parameters": [ { "name": "matches" } ], "type": { "text": "filterDropdownItems(matches) => void" } }, { "kind": "method", "name": "clearFilters", "type": { "text": "clearFilters() => void" } }, { "kind": "method", "name": "setDefaultItem", "type": { "text": "setDefaultItem() => void" } }, { "kind": "method", "name": "setCurrent", "parameters": [ { "name": "newValue", "default": "0", "type": { "text": "number" } }, { "name": "oldValue", "default": "undefined", "type": { "text": "number | undefined" } } ], "type": { "text": "setCurrent(newValue: number = 0, oldValue: number | undefined = undefined) => void" } }, { "kind": "method", "name": "isScrollable", "parameters": [ { "name": "element" } ], "type": { "text": "isScrollable(element) => void" } }, { "kind": "method", "name": "maintainScrollVisibility", "parameters": [ { "name": "activeElement" }, { "name": "scrollParent" } ], "type": { "text": "maintainScrollVisibility(activeElement, scrollParent) => void" } }, { "kind": "method", "name": "getSizeInfo", "type": { "text": "getSizeInfo() => void" } } ], "attributes": [ { "name": "multiple", "fieldName": "multiple", "type": { "text": "boolean" } }, { "name": "filter", "fieldName": "filter", "type": { "text": "boolean" } }, { "name": "async", "fieldName": "async", "type": { "text": "boolean" } }, { "name": "minimum-input-length", "fieldName": "minimumInputLength", "type": { "text": "number" } }, { "name": "items", "fieldName": "items", "type": { "text": "string | object" } }, { "name": "create", "fieldName": "create", "type": { "text": "boolean" } }, { "name": "field-id", "fieldName": "fieldId", "type": { "text": "string" } }, { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "placeholder", "fieldName": "placeholder", "type": { "text": "string" } }, { "name": "selected-label", "fieldName": "selectedLabel", "type": { "text": "string | undefined" } }, { "name": "value", "fieldName": "value", "type": { "text": "any" } }, { "name": "open", "fieldName": "open", "type": { "text": "boolean" } }, { "name": "error", "fieldName": "error", "type": { "text": "boolean" } }, { "name": "readonly", "fieldName": "readonly", "type": { "text": "boolean" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } }, { "name": "debug", "fieldName": "debug", "type": { "text": "boolean" } } ], "tagName": "cbp-dropdown", "events": [ { "name": "valueChange", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the a selection is made in the dropdown." }, { "name": "createItem", "type": { "text": "EventEmitter" }, "description": "A custom event that is fired when the \"create item\" option is clicked." }, { "name": "filterKeypress", "type": { "text": "EventEmitter" }, "description": "A custom event that is fired when a key is pressed while filtering a combobox." }, { "name": "populateCombobox", "type": { "text": "EventEmitter" }, "description": "A custom event emitted for asynchronous comboboxes (`async=true` and `filter=true`) and \nthe search string meets the `minimumInputLength` requirement. \nThis event can be listened for and the `items` (JSON) updated via application logic/service call." } ], "customElement": true, "modulePath": "src/components/cbp-dropdown/cbp-dropdown.tsx", "definitionPath": "src/components/cbp-dropdown/cbp-dropdown.tsx" } ], "exports": [ { "kind": "js", "name": "CbpDropdown", "declaration": { "name": "CbpDropdown", "module": "src/components/cbp-dropdown/cbp-dropdown.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-dropdown", "declaration": { "name": "CbpDropdown", "module": "src/components/cbp-dropdown/cbp-dropdown.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-dropdown-item/cbp-dropdown-item.tsx", "declarations": [ { "kind": "class", "description": "The Dropdown Item represents an individual option for the Dropdown, similar to an option in a\nnative `select` but with more flexibility.", "name": "CbpDropdownItem", "slots": [ { "description": "The Dropdown Item's label or content goes in the default slot; for multi-select dropdowns, this includes the checkbox component and slotted native `input type=\"checkbox\"` and label.", "name": "" } ], "members": [ { "kind": "field", "name": "checkbox", "type": { "text": "HTMLInputElement" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "Specifies an optional value to be passed in the FormData instead of the display text/label." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" } }, { "kind": "field", "name": "current", "type": { "text": "boolean" }, "description": "For Internal Use: Specifies the current item (referenced by `aria-activedescendant`) while using keyboard navigation." }, { "kind": "field", "name": "itemId", "type": { "text": "string" }, "description": "Optionally specify the ID of each dropdown item, which is used by the parent dropdown to associate `aria-activedescendant`. If no `itemId` is specified, one will be automatically generated." }, { "kind": "field", "name": "selected", "type": { "text": "boolean" }, "description": "Specifies if an item is selected" }, { "kind": "method", "name": "handleClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleClick(e) => void" } }, { "kind": "method", "name": "watchSelected", "parameters": [ { "name": "newValue" } ], "type": { "text": "watchSelected(newValue) => void" } } ], "attributes": [ { "name": "value", "fieldName": "value", "type": { "text": "string" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "current", "fieldName": "current", "type": { "text": "boolean" } }, { "name": "item-id", "fieldName": "itemId", "type": { "text": "string" } }, { "name": "selected", "fieldName": "selected", "type": { "text": "boolean" } } ], "tagName": "cbp-dropdown-item", "events": [ { "name": "dropdownItemClick", "type": { "text": "EventEmitter" }, "description": "Internal use: A custom event emitted when a dropdown item is clicked/activated and is handled by the \nparent dropdown, also resulting in a `valueChange` event emitted from the dropdown component." } ], "customElement": true, "modulePath": "src/components/cbp-dropdown-item/cbp-dropdown-item.tsx", "definitionPath": "src/components/cbp-dropdown-item/cbp-dropdown-item.tsx" } ], "exports": [ { "kind": "js", "name": "CbpDropdownItem", "declaration": { "name": "CbpDropdownItem", "module": "src/components/cbp-dropdown-item/cbp-dropdown-item.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-dropdown-item", "declaration": { "name": "CbpDropdownItem", "module": "src/components/cbp-dropdown-item/cbp-dropdown-item.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-expand/cbp-expand.tsx", "declarations": [ { "kind": "class", "description": "A standalone component used for progressive disclosure, the Expand component organizes content under a relevant heading, \nwhich is used as a control for revealing and hiding its content.", "name": "CbpExpand", "slots": [ { "description": "Hidden/revealed content is placed in the default slot.", "name": "" }, { "description": "Optionally the component label/heading may be slotted via named slot if it contains markup rather than plain text.", "name": "cbp-expand-label" } ], "members": [ { "kind": "field", "name": "control", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "button", "type": { "text": "HTMLButtonElement" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "headingId", "type": { "text": "string" }, "description": "Specifies an optional `id` for the component item heading, also used to generate an `id` for \nthe content wrapper. If this property is not specified, a unique string will \nautomatically be generated." }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Specifies whether the content is expanded and visible." }, { "kind": "field", "name": "label", "type": { "text": "string" }, "description": "The component control label." }, { "kind": "field", "name": "headingLevel", "type": { "text": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'" }, "default": "'h4'", "description": "The heading level of the expand item control. Defaults to h3." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleClick(e) => void" } } ], "attributes": [ { "name": "heading-id", "fieldName": "headingId", "type": { "text": "string" } }, { "name": "open", "fieldName": "open", "type": { "text": "boolean" } }, { "name": "label", "fieldName": "label", "type": { "text": "string" } }, { "name": "heading-level", "fieldName": "headingLevel", "type": { "text": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-expand", "events": [ { "name": "expandClick", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the accordion item control is activated." } ], "customElement": true, "modulePath": "src/components/cbp-expand/cbp-expand.tsx", "definitionPath": "src/components/cbp-expand/cbp-expand.tsx" } ], "exports": [ { "kind": "js", "name": "CbpExpand", "declaration": { "name": "CbpExpand", "module": "src/components/cbp-expand/cbp-expand.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-expand", "declaration": { "name": "CbpExpand", "module": "src/components/cbp-expand/cbp-expand.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-file-input/cbp-file-input.tsx", "declarations": [ { "kind": "class", "description": "The File Input component builds upon the native file input, allowing for custom styles and \nenhancing functionality when integrated with JavaScript frameworks. This component should \nbe used within the `cbp-form-field` component like any other input pattern.", "name": "CbpFileInput", "slots": [ { "description": "The native `input type=\"file\"` gets slotted in the default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "formField", "type": { "text": "HTMLInputElement" }, "privacy": "private" }, { "kind": "field", "name": "initialValue", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "The `name` attribute of the input, which is passed as part of formData (as a key)." }, { "kind": "field", "name": "fieldId", "type": { "text": "string" }, "description": "Optionally specify the ID of the input here, which is used to generate related pattern \nnode IDs and associate everything for accessibility." }, { "kind": "field", "name": "multiple", "type": { "text": "boolean" }, "description": "Specifies whether the file input accepts multiple files rather than a single file \n(may also be set directly on the slotted input)." }, { "kind": "field", "name": "accept", "type": { "text": "string" }, "description": "Specifies the files types accepted by the file input (may also be set directly on the slotted input). \nThis property is merely a suggestion to the browser and any file type restrictions should still be \nenforced in form validation." }, { "kind": "field", "name": "enhanced", "type": { "text": "boolean" }, "description": "Experimental: Specifies whether the functionality is enhanced over the native web platform file input. \nThis functionality requires integration with a framework or manual handling of the custom events\nand will not work with a native form post." }, { "kind": "field", "name": "status", "type": { "text": "any" }, "default": "{}", "description": "Supports passing back status and error messages as an array of objects or stringified JSON \nfrom the application. The array shall be the same length as the current file list.\nE.g., [ {\"status\": \"error|success|undefined\", \"message\": \"string\"}, ... ]\nOne could take the valueChange event's detail.value key, which contains an array of File objects, \nand add these keys to it before feeding it back to this component via the `status` property." }, { "kind": "field", "name": "error", "type": { "text": "boolean" }, "default": "false", "description": "Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the \nparent `cbp-form-field` component." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether \nit inverts when light/dark mode is toggled. \nDefault behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "field", "name": "files", "type": { "text": "File[]" }, "privacy": "private", "default": "[]" }, { "kind": "method", "name": "handleChange", "parameters": [ { "name": "e" } ], "type": { "text": "handleChange(e) => void" } }, { "kind": "method", "name": "reset", "description": "A custom method to reset the file input component (for enhanced/multi-file inputs) to its initial state and value \nsince it does not update properly on a native form reset. This method may be called manually, but is automatically \ncalled on form reset when using the `cbp-form` component.", "type": { "text": "reset() => void" } }, { "kind": "method", "name": "getData", "type": { "text": "getData() => void" } }, { "kind": "method", "name": "watchDisabledHandler", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchDisabledHandler(newValue: boolean) => void" } }, { "kind": "method", "name": "watchStatusHandler", "parameters": [ { "name": "newValue", "type": { "text": "any" } } ], "type": { "text": "watchStatusHandler(newValue: any) => void" } }, { "kind": "method", "name": "handleDelete", "parameters": [ { "name": "e" } ], "type": { "text": "handleDelete(e) => void" } } ], "attributes": [ { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "field-id", "fieldName": "fieldId", "type": { "text": "string" } }, { "name": "multiple", "fieldName": "multiple", "type": { "text": "boolean" } }, { "name": "accept", "fieldName": "accept", "type": { "text": "string" } }, { "name": "enhanced", "fieldName": "enhanced", "type": { "text": "boolean" } }, { "name": "status", "fieldName": "status", "type": { "text": "any" } }, { "name": "error", "fieldName": "error", "type": { "text": "boolean" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-file-input", "events": [ { "name": "valueChange", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the value of the component changes, either by selecting (non-duplicate) files \nor canceling the dialog, or clicking the button in the file list to remove a file." } ], "customElement": true, "modulePath": "src/components/cbp-file-input/cbp-file-input.tsx", "definitionPath": "src/components/cbp-file-input/cbp-file-input.tsx" } ], "exports": [ { "kind": "js", "name": "CbpFileInput", "declaration": { "name": "CbpFileInput", "module": "src/components/cbp-file-input/cbp-file-input.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-file-input", "declaration": { "name": "CbpFileInput", "module": "src/components/cbp-file-input/cbp-file-input.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-flex/cbp-flex.tsx", "declarations": [ { "kind": "class", "description": "The Flex component invokes a CSS Flexbox context, acting as the flex parent and implementing \nCSS Flexbox as a component API. Immediate child nodes are automatically considered flex items.", "name": "CbpFlex", "slots": [ { "description": "DOM nodes placed in the default slot automatically become flex children. The use of `cbp-flex-item` is only required for granular control of individual flex item properties.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "display", "type": { "text": "'flex' | 'inline-flex'" }, "default": "'flex'", "description": "Specifies the display mode. Defaults to \"flex\"" }, { "kind": "field", "name": "wrap", "type": { "text": "'nowrap' | 'wrap' | 'wrap-reverse'" }, "description": "Specifies the wrapping behavior of the flex children. Browser default behavior is \"nowrap\"." }, { "kind": "field", "name": "direction", "type": { "text": "'row' | 'row-reverse' | 'column' | 'column-reverse'" }, "default": "'row'", "description": "Specifies how flex items are placed in the flex container by setting the direction of the flex container’s main axis. Defaults to \"row\" for a horizontal flex context." }, { "kind": "field", "name": "alignItems", "type": { "text": "'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'" }, "default": "'stretch'", "description": "Specifies the alignment for all of the flex container’s items along the cross-axis. Defaults to \"stretch\"." }, { "kind": "field", "name": "alignContent", "type": { "text": "'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch'" }, "default": "'stretch'", "description": "Specifies the alignment of a flex container's items within the flex container (only when there is extra space in the cross-axis)." }, { "kind": "field", "name": "justifyContent", "type": { "text": "'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'" }, "default": "'flex-start'", "description": "Specifies the alignment of flex items along the main axis (of the current line) of the flex container." }, { "kind": "field", "name": "gap", "type": { "text": "string" }, "description": "Specifies the gap between items in CSS units (preferably relative units such as rem). Accepts a single value for horizontal and vertical gap or two values representing column gap and row gap, respectively." }, { "kind": "field", "name": "breakpoint", "type": { "text": "string" }, "description": "Specifies the size at which the flex children are linearized, specified in CSS units (preferably relative units such as rem)." }, { "kind": "field", "name": "contentBreakpoint", "type": { "text": "string" }, "description": "Not yet implemented" }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleBreakpointChange", "parameters": [ { "name": "mql" } ], "type": { "text": "handleBreakpointChange(mql) => void" } } ], "attributes": [ { "name": "display", "fieldName": "display", "type": { "text": "'flex' | 'inline-flex'" } }, { "name": "wrap", "fieldName": "wrap", "type": { "text": "'nowrap' | 'wrap' | 'wrap-reverse'" } }, { "name": "direction", "fieldName": "direction", "type": { "text": "'row' | 'row-reverse' | 'column' | 'column-reverse'" } }, { "name": "align-items", "fieldName": "alignItems", "type": { "text": "'auto' | 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'" } }, { "name": "align-content", "fieldName": "alignContent", "type": { "text": "'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch'" } }, { "name": "justify-content", "fieldName": "justifyContent", "type": { "text": "'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'" } }, { "name": "gap", "fieldName": "gap", "type": { "text": "string" } }, { "name": "breakpoint", "fieldName": "breakpoint", "type": { "text": "string" } }, { "name": "content-breakpoint", "fieldName": "contentBreakpoint", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-flex", "events": [], "customElement": true, "modulePath": "src/components/cbp-flex/cbp-flex.tsx", "definitionPath": "src/components/cbp-flex/cbp-flex.tsx" } ], "exports": [ { "kind": "js", "name": "CbpFlex", "declaration": { "name": "CbpFlex", "module": "src/components/cbp-flex/cbp-flex.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-flex", "declaration": { "name": "CbpFlex", "module": "src/components/cbp-flex/cbp-flex.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-flex-item/cbp-flex-item.tsx", "declarations": [ { "kind": "class", "description": "The Flex Item component may optionally be used to specify properties of an individual flex item.", "name": "CbpFlexItem", "slots": [ { "description": "Content slotted in the default slot may consist of any combination of text or DOM nodes.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "alignSelf", "type": { "text": "\"auto\" | \"stretch\" | \"flex-start\" | \"flex-end\" | \"center\" | \"baseline\"" }, "description": "Specifies the alignment of the specific flex item along the cross-axis separate from the parent context." }, { "kind": "field", "name": "order", "type": { "text": "number" }, "description": "Specifies an ordinal group value for sorting this flex item within its group. Defaults to zero, which renders the items in DOM order." }, { "kind": "field", "name": "flexGrow", "type": { "text": "number" }, "description": "Specifies the growth factor the item will grow at relative to other items. Defaults to zero, as flex items do not grow by default." }, { "kind": "field", "name": "flexShrink", "type": { "text": "number" }, "description": "Specifies the shrink factor the item will shrink at relative to other items. Defaults to 1, as flex items will shrink at an equal rate by default, taking content size into consideration." }, { "kind": "field", "name": "flexBasis", "type": { "text": "string" }, "description": "Specifies a basis (in CSS units or content values) for calculating flex behavior different from the default of \"auto\" (which usually evaluates to \"content\")." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "align-self", "fieldName": "alignSelf", "type": { "text": "\"auto\" | \"stretch\" | \"flex-start\" | \"flex-end\" | \"center\" | \"baseline\"" } }, { "name": "order", "fieldName": "order", "type": { "text": "number" } }, { "name": "flex-grow", "fieldName": "flexGrow", "type": { "text": "number" } }, { "name": "flex-shrink", "fieldName": "flexShrink", "type": { "text": "number" } }, { "name": "flex-basis", "fieldName": "flexBasis", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-flex-item", "events": [], "customElement": true, "modulePath": "src/components/cbp-flex-item/cbp-flex-item.tsx", "definitionPath": "src/components/cbp-flex-item/cbp-flex-item.tsx" } ], "exports": [ { "kind": "js", "name": "CbpFlexItem", "declaration": { "name": "CbpFlexItem", "module": "src/components/cbp-flex-item/cbp-flex-item.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-flex-item", "declaration": { "name": "CbpFlexItem", "module": "src/components/cbp-flex-item/cbp-flex-item.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-floating-action/cbp-floating-action.tsx", "declarations": [ { "kind": "class", "description": "", "name": "CbpFloatingAction", "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "top", "type": { "text": "string" }, "description": "Sets the top position (in CSS units) of the floating action component within the viewport." }, { "kind": "field", "name": "right", "type": { "text": "string" }, "description": "Sets the right position (in CSS units) of the floating action component within the viewport." }, { "kind": "field", "name": "bottom", "type": { "text": "string" }, "description": "Sets the bottom position (in CSS units) of the floating action component within the viewport." }, { "kind": "field", "name": "left", "type": { "text": "string" }, "description": "Sets the left position (in CSS units) of the floating action component within the viewport." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles (to the host) as an object. This property is not reactive." } ], "attributes": [ { "name": "top", "fieldName": "top", "type": { "text": "string" } }, { "name": "right", "fieldName": "right", "type": { "text": "string" } }, { "name": "bottom", "fieldName": "bottom", "type": { "text": "string" } }, { "name": "left", "fieldName": "left", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-floating-action", "events": [], "customElement": true, "modulePath": "src/components/cbp-floating-action/cbp-floating-action.tsx", "definitionPath": "src/components/cbp-floating-action/cbp-floating-action.tsx" } ], "exports": [ { "kind": "js", "name": "CbpFloatingAction", "declaration": { "name": "CbpFloatingAction", "module": "src/components/cbp-floating-action/cbp-floating-action.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-floating-action", "declaration": { "name": "CbpFloatingAction", "module": "src/components/cbp-floating-action/cbp-floating-action.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-footer/cbp-footer.tsx", "declarations": [ { "kind": "class", "description": "The Footer component serves site visitors who arrive at the bottom of a page without finding \nwhat they want, typically containing information about the agency and navigation links.", "name": "CbpFooter", "slots": [ { "description": "The main footer content goes in the default slot.", "name": "" }, { "description": "Footer navigation links are slotted within this named slot.", "name": "cbp-footer-nav" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-footer", "events": [], "customElement": true, "modulePath": "src/components/cbp-footer/cbp-footer.tsx", "definitionPath": "src/components/cbp-footer/cbp-footer.tsx" } ], "exports": [ { "kind": "js", "name": "CbpFooter", "declaration": { "name": "CbpFooter", "module": "src/components/cbp-footer/cbp-footer.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-footer", "declaration": { "name": "CbpFooter", "module": "src/components/cbp-footer/cbp-footer.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-form/cbp-form.tsx", "declarations": [ { "kind": "class", "description": "The Form component may optionally be used to wrap a native HTML form, providing enhanced functionality and support \nfor some component functionality that would otherwise not be supported by the native platform, e.g., an enhanced \nfile input that supports manipulating the file list and reset functionality for some custom form components.", "name": "CbpForm", "slots": [ { "description": "This tag is a wrapper for the native `form` tag and its contents, which are slotted in the default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "form", "type": { "text": "HTMLFormElement" }, "privacy": "private" }, { "kind": "field", "name": "enhancedFileInputs", "type": { "text": "HTMLCbpFileInputElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "files", "type": { "text": "object" }, "privacy": "private", "default": "{}" }, { "kind": "field", "name": "host", "type": { "text": "HTMLCbpFormElement" }, "privacy": "private" }, { "kind": "field", "name": "preventSubmit", "type": { "text": "boolean" }, "description": "When specified, applies preventDefault() to the submit event and emits a custom event with the formData to hand off to the application." }, { "kind": "field", "name": "debug", "type": { "text": "boolean" } }, { "kind": "method", "name": "handleReset", "type": { "text": "handleReset() => void" } }, { "kind": "method", "name": "handleFormData", "parameters": [ { "name": "e" } ], "type": { "text": "handleFormData(e) => void" } }, { "kind": "method", "name": "handleSubmit", "parameters": [ { "name": "e" } ], "type": { "text": "handleSubmit(e) => void" } }, { "kind": "method", "name": "addFiles", "parameters": [ { "name": "formData" } ], "type": { "text": "addFiles(formData) => void" } }, { "kind": "method", "name": "handleEnhancedFileInput", "parameters": [ { "name": "e" } ], "type": { "text": "handleEnhancedFileInput(e) => void" } } ], "attributes": [ { "name": "prevent-submit", "fieldName": "preventSubmit", "type": { "text": "boolean" } }, { "name": "debug", "fieldName": "debug", "type": { "text": "boolean" } } ], "tagName": "cbp-form", "events": [ { "name": "suppressedSubmit", "type": { "text": "EventEmitter" } } ], "customElement": true, "modulePath": "src/components/cbp-form/cbp-form.tsx", "definitionPath": "src/components/cbp-form/cbp-form.tsx" } ], "exports": [ { "kind": "js", "name": "CbpForm", "declaration": { "name": "CbpForm", "module": "src/components/cbp-form/cbp-form.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-form", "declaration": { "name": "CbpForm", "module": "src/components/cbp-form/cbp-form.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-form-field/cbp-form-field.tsx", "declarations": [ { "kind": "class", "description": "The Form Field component represents a generic, reusable pattern for form fields of all types, displaying the \nlabel and form control, along with optional descriptive text and error state in a consistent and accessible manner.", "name": "CbpFormField", "slots": [ { "description": "the default slot holds the form control(s)/input(s).", "name": "" }, { "description": "An optional slot for labels containing markup.", "name": "cbp-form-field-label" }, { "description": "An optional slot for descriptions containing markup.", "name": "cbp-form-field-description" } ], "members": [ { "kind": "field", "name": "formField", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "formFieldComponent", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "buttons", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "attachedButtons", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "hasDescription", "type": { "text": "boolean" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "description": "Provide a visible/accessible label for the form field/group." }, { "kind": "field", "name": "description", "type": { "text": "string" }, "description": "Provide additional details about the field, including whether it's required, which is applied to the form field via `aria-describedby`." }, { "kind": "field", "name": "fieldId", "type": { "text": "string" }, "description": "Optionally specify the ID of the field here, which is used to generate related pattern node IDs and associate everything for accessibility" }, { "kind": "field", "name": "group", "type": { "text": "boolean" }, "description": "Specifies that this form field represents a group of (slotted) inputs, such as a radio list, checklist, or related inputs in a compound pattern." }, { "kind": "field", "name": "error", "type": { "text": "boolean" }, "description": "Specifies that the field has an error (and sets aria-invalid accordingly)." }, { "kind": "field", "name": "errorMessages", "type": { "text": "string | any" }, "description": "Specifies the error message(s) to replace the description text while in an error state." }, { "kind": "field", "name": "readonly", "type": { "text": "boolean" }, "description": "Specifies that the field is readonly; sets all form fields as readonly and related button controls to disabled." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "description": "Specifies that the field is disabled; sets all form fields and button controls as disabled." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleChange", "parameters": [ { "name": "e" } ], "type": { "text": "handleChange(e) => void" } }, { "kind": "method", "name": "handleValueChange", "type": { "text": "handleValueChange() => void" } }, { "kind": "method", "name": "watchReadonlyHandler", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchReadonlyHandler(newValue: boolean) => void" } }, { "kind": "method", "name": "watchDisabledHandler", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchDisabledHandler(newValue: boolean) => void" } }, { "kind": "method", "name": "watchErrorHandler", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchErrorHandler(newValue: boolean) => void" } } ], "attributes": [ { "name": "label", "fieldName": "label", "type": { "text": "string" } }, { "name": "description", "fieldName": "description", "type": { "text": "string" } }, { "name": "field-id", "fieldName": "fieldId", "type": { "text": "string" } }, { "name": "group", "fieldName": "group", "type": { "text": "boolean" } }, { "name": "error", "fieldName": "error", "type": { "text": "boolean" } }, { "name": "error-messages", "fieldName": "errorMessages", "type": { "text": "string | any" } }, { "name": "readonly", "fieldName": "readonly", "type": { "text": "boolean" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-form-field", "events": [ { "name": "valueChange", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the the nested input is changed by user interaction." } ], "customElement": true, "modulePath": "src/components/cbp-form-field/cbp-form-field.tsx", "definitionPath": "src/components/cbp-form-field/cbp-form-field.tsx" } ], "exports": [ { "kind": "js", "name": "CbpFormField", "declaration": { "name": "CbpFormField", "module": "src/components/cbp-form-field/cbp-form-field.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-form-field", "declaration": { "name": "CbpFormField", "module": "src/components/cbp-form-field/cbp-form-field.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-form-field-wrapper/cbp-form-field-wrapper.tsx", "declarations": [ { "kind": "class", "description": "The Form Field Wrapper component is an optional wrapper that offers means for applying overlays \nand button controls to form inputs in accordance with design requirements.", "name": "CbpFormFieldWrapper", "slots": [ { "description": "The default slot holds the form control.", "name": "" }, { "description": "Optionally slot an overlay positioned on the left side of the form field.", "name": "cbp-form-field-overlay-start" }, { "description": "Optionally slot an overlay positioned on the right side of the form field.", "name": "cbp-form-field-overlay-end" }, { "description": "Optionally slot in any buttons that appear attached to the native form field.", "name": "cbp-form-field-attached-button" }, { "description": "Optionally slot in any buttons that appear horizontally after the native form field, but not attached to it.", "name": "cbp-form-field-unattached-buttons" } ], "members": [ { "kind": "field", "name": "parent", "type": { "text": "HTMLCbpFormFieldElement" }, "privacy": "private" }, { "kind": "field", "name": "formField", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "attachedButton", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "overlayStart", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "overlayEnd", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "overlayStartWidth", "privacy": "private" }, { "kind": "field", "name": "overlayEndWidth", "privacy": "private" }, { "kind": "field", "name": "attachedButtonWidth", "privacy": "private" }, { "kind": "field", "name": "visible", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "observer", "type": { "text": "ResizeObserver" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "method", "name": "getSizeInfo", "type": { "text": "getSizeInfo() => void" } } ], "tagName": "cbp-form-field-wrapper", "events": [], "customElement": true, "modulePath": "src/components/cbp-form-field-wrapper/cbp-form-field-wrapper.tsx", "definitionPath": "src/components/cbp-form-field-wrapper/cbp-form-field-wrapper.tsx" } ], "exports": [ { "kind": "js", "name": "CbpFormFieldWrapper", "declaration": { "name": "CbpFormFieldWrapper", "module": "src/components/cbp-form-field-wrapper/cbp-form-field-wrapper.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-form-field-wrapper", "declaration": { "name": "CbpFormFieldWrapper", "module": "src/components/cbp-form-field-wrapper/cbp-form-field-wrapper.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-grid/cbp-grid.tsx", "declarations": [ { "kind": "class", "description": "The Grid component invokes a CSS Grid context, acting as the grid parent and implementing \nCSS Grid as a component API. Immediate child nodes are automatically considered grid items.", "name": "CbpGrid", "slots": [ { "description": "The default slot accepts grid items. These should be `cbp-grid-item` components or DOM nodes; inserting plain text nodes as a direct descendant of the grid may yield unexpected results.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "display", "type": { "text": "'grid' | 'inline-grid'" }, "default": "'grid'", "description": "Specifies the grid display. Defaults to \"grid\"." }, { "kind": "field", "name": "gridTemplateAreas", "type": { "text": "string" }, "description": "Defines the grid via named grid areas (providing a visualization of the structure of the grid), which are not associated with any particular grid item, but can be referenced from the grid-placement properties." }, { "kind": "field", "name": "gridTemplateColumns", "type": { "text": "'none' | string" }, "description": "Specifies the track sizing functions (and optionally line names) of the grid columns as a space-separated track list." }, { "kind": "field", "name": "gridTemplateRows", "type": { "text": "'none' | string" }, "description": "Specifies the track sizing functions (and optionally line names) of the grid rows as a space-separated track list." }, { "kind": "field", "name": "gridAutoFlow", "type": { "text": "'row' | 'column' | 'row dense' | 'column dense'" }, "description": "Specifies how auto-placed items get flowed into the grid." }, { "kind": "field", "name": "gridAutoColumns", "type": { "text": "string" }, "description": "Specifies the size (in CSS units) of implicitly-created columns using the auto-placement algorithm." }, { "kind": "field", "name": "gridAutoRows", "type": { "text": "string" }, "description": "Specifies the size (in CSS units) of implicitly-created rows using the auto-placement algorithm." }, { "kind": "field", "name": "alignItems", "type": { "text": "'normal' | 'stretch' | 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline'" }, "description": "Aligns grid items in the vertical/column axis, perpendicular to the inline axis." }, { "kind": "field", "name": "justifyItems", "type": { "text": "'legacy' | 'normal' | 'stretch' | 'center' | 'safe center' | 'unsafe center' | 'start' | 'end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline'" }, "description": "Justifies grid content horizontally, along the inline/row axis." }, { "kind": "field", "name": "alignContent", "type": { "text": "'normal' | 'stretch' | 'center' | 'start' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | 'safe center' | 'unsafe center'" }, "description": "Aligns grid content vertically when total grid size is smaller than container." }, { "kind": "field", "name": "justifyContent", "type": { "text": "'normal' | 'stretch' | 'center' | 'start' | 'end' | 'left' | 'right' | 'space-around' | 'space-between' | 'space-evenly' | 'safe center' | 'unsafe center'" }, "description": "Justifies grid content horizontally when total grid size is smaller than container." }, { "kind": "field", "name": "gap", "type": { "text": "string" }, "description": "Specifies the spacing between grid items in the form of a single value or space-separated row-gap and column-gap values (in CSS units)." }, { "kind": "field", "name": "breakpoint", "type": { "text": "string" }, "description": "The size (in CSS units; preferably relative units such as `rem`) below which the grid items linearize." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleBreakpointChange", "parameters": [ { "name": "mql" } ], "type": { "text": "handleBreakpointChange(mql) => void" } } ], "attributes": [ { "name": "display", "fieldName": "display", "type": { "text": "'grid' | 'inline-grid'" } }, { "name": "grid-template-areas", "fieldName": "gridTemplateAreas", "type": { "text": "string" } }, { "name": "grid-template-columns", "fieldName": "gridTemplateColumns", "type": { "text": "'none' | string" } }, { "name": "grid-template-rows", "fieldName": "gridTemplateRows", "type": { "text": "'none' | string" } }, { "name": "grid-auto-flow", "fieldName": "gridAutoFlow", "type": { "text": "'row' | 'column' | 'row dense' | 'column dense'" } }, { "name": "grid-auto-columns", "fieldName": "gridAutoColumns", "type": { "text": "string" } }, { "name": "grid-auto-rows", "fieldName": "gridAutoRows", "type": { "text": "string" } }, { "name": "align-items", "fieldName": "alignItems", "type": { "text": "'normal' | 'stretch' | 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'baseline' | 'first baseline' | 'last baseline'" } }, { "name": "justify-items", "fieldName": "justifyItems", "type": { "text": "'legacy' | 'normal' | 'stretch' | 'center' | 'safe center' | 'unsafe center' | 'start' | 'end' | 'self-start' | 'self-end' | 'left' | 'right' | 'baseline' | 'first baseline' | 'last baseline'" } }, { "name": "align-content", "fieldName": "alignContent", "type": { "text": "'normal' | 'stretch' | 'center' | 'start' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | 'safe center' | 'unsafe center'" } }, { "name": "justify-content", "fieldName": "justifyContent", "type": { "text": "'normal' | 'stretch' | 'center' | 'start' | 'end' | 'left' | 'right' | 'space-around' | 'space-between' | 'space-evenly' | 'safe center' | 'unsafe center'" } }, { "name": "gap", "fieldName": "gap", "type": { "text": "string" } }, { "name": "breakpoint", "fieldName": "breakpoint", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-grid", "events": [], "customElement": true, "modulePath": "src/components/cbp-grid/cbp-grid.tsx", "definitionPath": "src/components/cbp-grid/cbp-grid.tsx" } ], "exports": [ { "kind": "js", "name": "CbpGrid", "declaration": { "name": "CbpGrid", "module": "src/components/cbp-grid/cbp-grid.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-grid", "declaration": { "name": "CbpGrid", "module": "src/components/cbp-grid/cbp-grid.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-grid-item/cbp-grid-item.tsx", "declarations": [ { "kind": "class", "description": "The Grid Item component may optionally be used to specify properties of an individual grid item.", "name": "CbpGridItem", "slots": [ { "description": "The default slot may contain any content representing the grid item.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "gridColumnStart", "type": { "text": "number | string" }, "description": "Specifies the starting position/edge of the grid item in the horizontal/column plane, which is used to calculate the size (including column and row spanning) and location within the grid." }, { "kind": "field", "name": "gridColumnEnd", "type": { "text": "number | string" }, "description": "Specifies the ending position/edge (non-inclusive) of the grid item in the horizontal/column plane, which is used to calculate the size (including column and row spanning) and location within the grid." }, { "kind": "field", "name": "gridRowStart", "type": { "text": "number | string" }, "description": "Specifies the starting position/edge of the grid item in the vertical/row plane, which is used to calculate the size (including column and row spanning) and location within the grid." }, { "kind": "field", "name": "gridRowEnd", "type": { "text": "number | string" }, "description": "Specifies the ending position/edge (non-inclusive) of the grid item in the vertical/row plane, which is used to calculate the size (including column and row spanning) and location within the grid." }, { "kind": "field", "name": "alignSelf", "type": { "text": "string" }, "description": "Aligns this specific grid item in the vertical/column axis, perpendicular to the inline axis, separate from the parent context." }, { "kind": "field", "name": "justifySelf", "type": { "text": "string" }, "description": "Justifies this specific grid item content horizontally, along the inline/row axis, separate from the parent context." }, { "kind": "field", "name": "gridArea", "type": { "text": "string" }, "description": "Names the Grid Area for use with grid-template-area on the parent." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "grid-column-start", "fieldName": "gridColumnStart", "type": { "text": "number | string" } }, { "name": "grid-column-end", "fieldName": "gridColumnEnd", "type": { "text": "number | string" } }, { "name": "grid-row-start", "fieldName": "gridRowStart", "type": { "text": "number | string" } }, { "name": "grid-row-end", "fieldName": "gridRowEnd", "type": { "text": "number | string" } }, { "name": "align-self", "fieldName": "alignSelf", "type": { "text": "string" } }, { "name": "justify-self", "fieldName": "justifySelf", "type": { "text": "string" } }, { "name": "grid-area", "fieldName": "gridArea", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-grid-item", "events": [], "customElement": true, "modulePath": "src/components/cbp-grid-item/cbp-grid-item.tsx", "definitionPath": "src/components/cbp-grid-item/cbp-grid-item.tsx" } ], "exports": [ { "kind": "js", "name": "CbpGridItem", "declaration": { "name": "CbpGridItem", "module": "src/components/cbp-grid-item/cbp-grid-item.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-grid-item", "declaration": { "name": "CbpGridItem", "module": "src/components/cbp-grid-item/cbp-grid-item.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-hide/cbp-hide.tsx", "declarations": [ { "kind": "class", "description": "The Hide component represents a component-based implementation for programmatically hiding \n(or visually hiding) content based on application logic or media query.", "name": "CbpHide", "slots": [ { "description": "Content in the default slot to be conditionally hidden.", "name": "" } ], "members": [ { "kind": "field", "name": "hidden", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "display", "type": { "text": "string" }, "default": "'inline'", "description": "Specifies the host's display when visible. The default is `inline`, which is the default display of a custom element." }, { "kind": "field", "name": "hide", "type": { "text": "boolean" }, "description": "When set to true, the host is hidden. Allows for toggling via property binding rather than media query." }, { "kind": "field", "name": "visuallyHide", "type": { "text": "boolean" }, "description": "When set to true, the host is visually hidden in an accessible manner. Allows for toggling via property binding rather than media query." }, { "kind": "field", "name": "hideAt", "type": { "text": "string" }, "description": "Specifies a valid CSS media query (preferably using relative units), when met will hide the wrapped content\nusing display: none; (e.g., `max-width: 64em`). \nFor complex media queries using AND/OR operators, each condition must be enclosed in parentheses \n(e.g., `(width < 37.5rem) OR (width > 63rem)`)." }, { "kind": "field", "name": "visuallyHideAt", "type": { "text": "string" }, "description": "Specifies a valid CSS media query (preferably using relative units), when met will visually hide the wrapped content \nin a way that is it still accessible as a label (e.g., `max-width: 64em`),\nFor complex media queries using AND/OR operators, each condition must be enclosed in parentheses \n(e.g., `(width < 37.5rem) OR (width > 63rem)`)." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "doHideAt", "parameters": [ { "name": "mql" } ], "type": { "text": "doHideAt(mql) => void" } }, { "kind": "method", "name": "doVisuallyHideAt", "parameters": [ { "name": "mql" } ], "type": { "text": "doVisuallyHideAt(mql) => void" } } ], "attributes": [ { "name": "display", "fieldName": "display", "type": { "text": "string" } }, { "name": "hide", "fieldName": "hide", "type": { "text": "boolean" } }, { "name": "visually-hide", "fieldName": "visuallyHide", "type": { "text": "boolean" } }, { "name": "hide-at", "fieldName": "hideAt", "type": { "text": "string" } }, { "name": "visually-hide-at", "fieldName": "visuallyHideAt", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-hide", "events": [ { "name": "hideToggle", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the accordion item control is activated." } ], "customElement": true, "modulePath": "src/components/cbp-hide/cbp-hide.tsx", "definitionPath": "src/components/cbp-hide/cbp-hide.tsx" } ], "exports": [ { "kind": "js", "name": "CbpHide", "declaration": { "name": "CbpHide", "module": "src/components/cbp-hide/cbp-hide.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-hide", "declaration": { "name": "CbpHide", "module": "src/components/cbp-hide/cbp-hide.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-icon/cbp-icon.tsx", "declarations": [ { "kind": "class", "description": "The Icon component represents a standard API for embedding accessible Scalable Vector Graphics (SVG) icons \ninto applications/documents. This component contains a number of icons used by the design system and may be used to wrap\nexternal icons for consistent styling via the component API.", "name": "CbpIcon", "slots": [ { "description": "For icons that are not baked into this component, the SVG of an external icon may be slotted within this component to inherit the component properties for controlling some aspects such as color, sizing, and rotation.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "Specifies which icon to use from the built-in set of icons." }, { "kind": "field", "name": "src", "type": { "text": "string" }, "description": "Specifies the exact `src` of an SVG file to use." }, { "kind": "field", "name": "size", "type": { "text": "string" }, "description": "Optionally specifies the size (both width and height) of the icon, which \ndefaults (via CSS) to `1rem` (16px), the intended size of icons alongside body text. \nIcon size may be specified via this property/attribute or the custom \nCSS property `--cbp-icon-size`." }, { "kind": "field", "name": "color", "type": { "text": "string" }, "description": "Optionally specifies the color of the icon (ideally using design-token-based CSS variables). Defaults to \"currentColor.\"" }, { "kind": "field", "name": "rotate", "type": { "text": "number" }, "description": "Optionally specify the degrees of rotation." }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "For icons that are not decorative, accessibilityText is rendered as an `aria-label` on the `svg` tag." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "field", "name": "icons", "type": { "text": "object" }, "privacy": "private", "default": "{\n \"address-book\": {\n name: 'address-book',\n viewbox: \"0 0 512 512\",\n path: \"M96 0C60.7 0 32 28.7 32 64l0 384c0 35.3 28.7 64 64 64l288 0c35.3 0 64-28.7 64-64l0-384c0-35.3-28.7-64-64-64L96 0zM208 288l64 0c44.2 0 80 35.8 80 80c0 8.8-7.2 16-16 16l-192 0c-8.8 0-16-7.2-16-16c0-44.2 35.8-80 80-80zm-32-96a64 64 0 1 1 128 0 64 64 0 1 1 -128 0zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64zM496 192c-8.8 0-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8 7.2 16 16 16s16-7.2 16-16l0-64z\",\n },\n \"angle-down\": {\n name: \"angle-down\",\n viewbox: \"0 0 448 512\",\n path: \"M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z\",\n },\n \"arrow-right\": {\n name: \"arrow-right\",\n viewbox: \"0 0 448 512\",\n path: \"M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z\",\n },\n \"arrow-right-from-bracket\": {\n name: \"arrow-right-from-bracket\",\n viewbox: \"0 0 640 640\",\n path: \"M224 160C241.7 160 256 145.7 256 128C256 110.3 241.7 96 224 96L160 96C107 96 64 139 64 192L64 448C64 501 107 544 160 544L224 544C241.7 544 256 529.7 256 512C256 494.3 241.7 480 224 480L160 480C142.3 480 128 465.7 128 448L128 192C128 174.3 142.3 160 160 160L224 160zM566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L438.6 169.3C426.1 156.8 405.8 156.8 393.3 169.3C380.8 181.8 380.8 202.1 393.3 214.6L466.7 288L256 288C238.3 288 224 302.3 224 320C224 337.7 238.3 352 256 352L466.7 352L393.3 425.4C380.8 437.9 380.8 458.2 393.3 470.7C405.8 483.2 426.1 483.2 438.6 470.7L566.6 342.7z\"\n },\n \"bars\": {\n name: \"bars\",\n viewbox: \"0 0 448 512\",\n path: \"M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z\",\n },\n 'caret-down': {\n name: \"caret-down\",\n viewbox: \"0 0 320 512\",\n path: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\",\n },\n 'check': {\n name: \"check\",\n viewbox: \"0 0 448 512\",\n path: \"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\",\n },\n \"check-circle\": {\n name: 'check-circle',\n viewbox: '0 0 512 512', \n path : \"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\",\n },\n \"chevron-right\": {\n name: \"chevron-right\",\n viewbox: \"0 0 320 512\",\n path: \"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\",\n },\n \"circle-info\": {\n name: \"circle-info\",\n viewbox: \"0 0 512 512\",\n path: \"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z\",\n },\n \"circle-xmark\": {\n name: \"circle-xmark\",\n viewbox: \"0 0 512 512\",\n path: \"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z\",\n },\n \"clock\": {\n name: \"clock\",\n viewbox: \"0 0 512 512\",\n path: \"M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120l0 136c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2 280 120c0-13.3-10.7-24-24-24s-24 10.7-24 24z\"\n },\n \"clone\": {\n name: \"clone\",\n viewbox: \"0 0 512 512\",\n path:\"M288 448L64 448l0-224 64 0 0-64-64 0c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l224 0c35.3 0 64-28.7 64-64l0-64-64 0 0 64zm-64-96l224 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L224 0c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64z\"\n }, \n \"comment\": {\n name: \"comment\",\n viewbox: \"0 0 512 512\",\n path: \"M512 240c0 114.9-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6C73.6 471.1 44.7 480 16 480c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4l0 0 0 0 0 0 0 0 .3-.3c.3-.3 .7-.7 1.3-1.4c1.1-1.2 2.8-3.1 4.9-5.7c4.1-5 9.6-12.4 15.2-21.6c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208z\",\n },\n \"computer\": {\n name: \"computer\",\n viewbox: \"0 0 640 640\",\n path: \"M380.8 96C372.7 110.1 368 126.5 368 144L368 160L96 160L96 384L368 384L368 448L96 448C60.7 448 32 419.3 32 384L32 160C32 124.7 60.7 96 96 96L380.8 96zM368 496C368 513.5 372.7 529.9 380.8 544L152 544C138.7 544 128 533.3 128 520C128 506.7 138.7 496 152 496L368 496zM464 96L560 96C586.5 96 608 117.5 608 144L608 496C608 522.5 586.5 544 560 544L464 544C437.5 544 416 522.5 416 496L416 144C416 117.5 437.5 96 464 96zM488 160C474.7 160 464 170.7 464 184C464 197.3 474.7 208 488 208L536 208C549.3 208 560 197.3 560 184C560 170.7 549.3 160 536 160L488 160zM488 256C474.7 256 464 266.7 464 280C464 293.3 474.7 304 488 304L536 304C549.3 304 560 293.3 560 280C560 266.7 549.3 256 536 256L488 256zM544 400C544 382.3 529.7 368 512 368C494.3 368 480 382.3 480 400C480 417.7 494.3 432 512 432C529.7 432 544 417.7 544 400z\"\n },\n \"ellipsis-vertical\": {\n name: \"ellipsis-vertical\",\n viewbox: \"0 0 128 512\",\n path: \"M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z\",\n },\n \"envelope\": {\n name: \"eye\",\n viewbox: \"0 0 512 512\",\n path: \"M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z\",\n },\n \"exclamation-circle\": {\n name: \"exclamation-circle\",\n viewbox: \"0 0 512 512\",\n path: \"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z\", \n },\n \"external-link-alt\": {\n name: \"external-link-alt\",\n viewbox: \"0 0 512 512\",\n path: \"M432 320H400a16 16 0 0 0 -16 16V448H64V128H208a16 16 0 0 0 16-16V80a16 16 0 0 0 -16-16H48A48 48 0 0 0 0 112V464a48 48 0 0 0 48 48H400a48 48 0 0 0 48-48V336A16 16 0 0 0 432 320zM488 0h-128c-21.4 0-32.1 25.9-17 41l35.7 35.7L135 320.4a24 24 0 0 0 0 34L157.7 377a24 24 0 0 0 34 0L435.3 133.3 471 169c15 15 41 4.5 41-17V24A24 24 0 0 0 488 0z\", \n },\n \"eye\": {\n name: \"envelope\",\n viewbox: \"0 0 576 512\",\n path: \"M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z\",\n },\n \"eye-slash\": {\n name: \"eye-slash\",\n viewbox: \"0 0 640 512\",\n path: \"M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z\",\n },\n \"file-lines\": {\n name: \"file-lines\",\n viewbox: \"0 0 384 512\",\n path: \"M64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-288-128 0c-17.7 0-32-14.3-32-32L224 0 64 0zM256 0l0 128 128 0L256 0zM112 256l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zm0 64l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z\",\n },\n \"globe\": {\n name: \"globe\",\n viewbox: \"0 0 512 512\",\n path: \"M352 256c0 22.2-1.2 43.6-3.3 64l-185.3 0c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64l185.3 0c2.2 20.4 3.3 41.8 3.3 64zm28.8-64l123.1 0c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64l-123.1 0c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32l-116.7 0c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0l-176.6 0c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0L18.6 160C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192l123.1 0c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64L8.1 320C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6l176.6 0c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352l116.7 0zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6l116.7 0z\", \n },\n \"headset\": {\n name: \"headset\",\n viewbox: \"0 0 512 512\",\n path: \"M256 48C141.1 48 48 141.1 48 256l0 40c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-40C0 114.6 114.6 0 256 0S512 114.6 512 256l0 144.1c0 48.6-39.4 88-88.1 88L313.6 488c-8.3 14.3-23.8 24-41.6 24l-32 0c-26.5 0-48-21.5-48-48s21.5-48 48-48l32 0c17.8 0 33.3 9.7 41.6 24l110.4 .1c22.1 0 40-17.9 40-40L464 256c0-114.9-93.1-208-208-208zM144 208l16 0c17.7 0 32 14.3 32 32l0 112c0 17.7-14.3 32-32 32l-16 0c-35.3 0-64-28.7-64-64l0-48c0-35.3 28.7-64 64-64zm224 0c35.3 0 64 28.7 64 64l0 48c0 35.3-28.7 64-64 64l-16 0c-17.7 0-32-14.3-32-32l0-112c0-17.7 14.3-32 32-32l16 0z\",\n },\n \"home\" : {\n name: \"home\",\n viewbox: \"0 0 576 512\",\n path: \"M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z\"\n },\n \"landmark\": {\n name: \"landmark\",\n viewbox: \"0 0 512 512\",\n path: \"M240.1 4.2c9.8-5.6 21.9-5.6 31.8 0l171.8 98.1L448 104l0 .9 47.9 27.4c12.6 7.2 18.8 22 15.1 36s-16.4 23.8-30.9 23.8L32 192c-14.5 0-27.2-9.8-30.9-23.8s2.5-28.8 15.1-36L64 104.9l0-.9 4.4-1.6L240.1 4.2zM64 224l64 0 0 192 40 0 0-192 64 0 0 192 48 0 0-192 64 0 0 192 40 0 0-192 64 0 0 196.3c.6 .3 1.2 .7 1.8 1.1l48 32c11.7 7.8 17 22.4 12.9 35.9S494.1 512 480 512L32 512c-14.1 0-26.5-9.2-30.6-22.7s1.1-28.1 12.9-35.9l48-32c.6-.4 1.2-.7 1.8-1.1L64 224z\",\n },\n \"lock\": {\n name: \"lock\",\n viewbox: \"0 0 448 512\",\n path: \"M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z\"\n },\n \"magnifying-glass\": {\n name: \"magnifying-glass\",\n viewbox: \"0 0 512 512\",\n path: \"M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z\",\n },\n \"minus\": {\n name: \"minus\",\n viewbox: \"0 0 448 512\",\n path: \"M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z\",\n },\n \"moon\": {\n name: \"moon\",\n viewbox: \"0 0 640 640\",\n path: \"M320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576C388.8 576 451.3 548.8 497.3 504.6C504.6 497.6 506.7 486.7 502.6 477.5C498.5 468.3 488.9 462.6 478.8 463.4C473.9 463.8 469 464 464 464C362.4 464 280 381.6 280 280C280 207.9 321.5 145.4 382.1 115.2C391.2 110.7 396.4 100.9 395.2 90.8C394 80.7 386.6 72.5 376.7 70.3C358.4 66.2 339.4 64 320 64z\"\n },\n \"pen-to-square\": {\n name: \"pen-to-square\",\n viewbox: \"0 0 512 512\",\n path: \"M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z\",\n },\n \"plus\": {\n name: \"plus\",\n viewbox: \"0 0 448 512\",\n path: \"M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z\",\n },\n \"right-to-bracket\": {\n name: \"right-to-bracket\",\n viewbox: \"0 0 512 512\",\n path: \"M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z\",\n },\n \"right-from-bracket\": {\n name: \"right-from-bracket\",\n viewbox: \"0 0 512 512\",\n path: \"M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z\",\n },\n \"rotate\": {\n name: \"rotate\",\n viewbox: \"0 0 640 640\",\n path: \"M544.1 256L552 256C565.3 256 576 245.3 576 232L576 88C576 78.3 570.2 69.5 561.2 65.8C552.2 62.1 541.9 64.2 535 71L483.3 122.8C439 86.1 382 64 320 64C191 64 84.3 159.4 66.6 283.5C64.1 301 76.2 317.2 93.7 319.7C111.2 322.2 127.4 310 129.9 292.6C143.2 199.5 223.3 128 320 128C364.4 128 405.2 143 437.7 168.3L391 215C384.1 221.9 382.1 232.2 385.8 241.2C389.5 250.2 398.3 256 408 256L544.1 256zM573.5 356.5C576 339 563.8 322.8 546.4 320.3C529 317.8 512.7 330 510.2 347.4C496.9 440.4 416.8 511.9 320.1 511.9C275.7 511.9 234.9 496.9 202.4 471.6L249 425C255.9 418.1 257.9 407.8 254.2 398.8C250.5 389.8 241.7 384 232 384L88 384C74.7 384 64 394.7 64 408L64 552C64 561.7 69.8 570.5 78.8 574.2C87.8 577.9 98.1 575.8 105 569L156.8 517.2C201 553.9 258 576 320 576C449 576 555.7 480.6 573.4 356.5z\"\n },\n \"times\": {\n name: \"times\",\n viewbox: \"0 0 384 512\",\n path: \"M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z\",\n },\n \"triangle-exclamation\": {\n name: \"triangle-exclamation\",\n viewbox: \"0 0 512 512\",\n path: \"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\",\n },\n \"up-right-from-square\": {\n name: \"up-right-from-square\",\n viewbox: \"0 0 512 512\",\n path: \"M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z\",\n },\n \"upload\": {\n name: \"upload\",\n viewbox: \"0 0 512 512\",\n path: \"M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z\",\n },\n \n // Should these be included?\n // TODO?: Facebook, twitter, Youtube, Flickr, Instagram, LinkedIn\n \"book\": {\n name: \"book\",\n viewbox: \"0 0 448 512\",\n path: \"M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z\"\n },\n \"circle\": {\n name: \"circle\",\n viewbox: \"0 0 512 512\",\n path: \"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z\"\n },\n \"filter\": {\n name: \"filter\",\n viewbox: \"0 0 512 512\",\n path: \"M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z\",\n },\n \"sort-asc\": {\n name: \"sort-asc\",\n viewbox: \"0 0 576 512\",\n path: \"M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96 365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V365.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 128h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 128H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 128H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320c-17.7 0-32-14.3-32-32s14.3-32 32-32z\",\n },\n \"sort-desc\": {\n name: \"sort-desc\",\n viewbox: \"0 0 576 512\",\n path: \"M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96 365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V365.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320z\",\n },\n \"square\": {\n name: \"square\",\n viewbox: \"0 0 448 512\",\n path: \"M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z\"\n },\n \"star\": {\n name: \"star\",\n viewbox: \"0 0 576 512\",\n path: \"M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z\"\n },\n \"star-solid\": {\n name: \"star\",\n viewbox: \"0 0 576 512\",\n path: \"M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z\",\n },\n \"sun\": {\n name: \"sun\",\n viewbox: \"0 0 640 640\",\n path: \"M210.2 53.9C217.6 50.8 226 51.7 232.7 56.1L320.5 114.3L408.3 56.1C415 51.7 423.4 50.9 430.8 53.9C438.2 56.9 443.4 63.5 445 71.3L465.9 174.5L569.1 195.4C576.9 197 583.5 202.4 586.5 209.7C589.5 217 588.7 225.5 584.3 232.2L526.1 320L584.3 407.8C588.7 414.5 589.5 422.9 586.5 430.3C583.5 437.7 576.9 443.1 569.1 444.6L465.8 465.4L445 568.7C443.4 576.5 438 583.1 430.7 586.1C423.4 589.1 414.9 588.3 408.2 583.9L320.4 525.7L232.6 583.9C225.9 588.3 217.5 589.1 210.1 586.1C202.7 583.1 197.3 576.5 195.8 568.7L175 465.4L71.7 444.5C63.9 442.9 57.3 437.5 54.3 430.2C51.3 422.9 52.1 414.4 56.5 407.7L114.7 320L56.5 232.2C52.1 225.5 51.3 217.1 54.3 209.7C57.3 202.3 63.9 196.9 71.7 195.4L175 174.6L195.9 71.3C197.5 63.5 202.9 56.9 210.2 53.9zM239.6 320C239.6 275.6 275.6 239.6 320 239.6C364.4 239.6 400.4 275.6 400.4 320C400.4 364.4 364.4 400.4 320 400.4C275.6 400.4 239.6 364.4 239.6 320zM448.4 320C448.4 249.1 390.9 191.6 320 191.6C249.1 191.6 191.6 249.1 191.6 320C191.6 390.9 249.1 448.4 320 448.4C390.9 448.4 448.4 390.9 448.4 320z\"\n },\n \"user\": {\n name: \"user\",\n viewbox: \"0 0 448 512\",\n path: \"M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z\",\n },\n }" } ], "attributes": [ { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "src", "fieldName": "src", "type": { "text": "string" } }, { "name": "size", "fieldName": "size", "type": { "text": "string" } }, { "name": "color", "fieldName": "color", "type": { "text": "string" } }, { "name": "rotate", "fieldName": "rotate", "type": { "text": "number" } }, { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-icon", "events": [], "customElement": true, "modulePath": "src/components/cbp-icon/cbp-icon.tsx", "definitionPath": "src/components/cbp-icon/cbp-icon.tsx" } ], "exports": [ { "kind": "js", "name": "CbpIcon", "declaration": { "name": "CbpIcon", "module": "src/components/cbp-icon/cbp-icon.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-icon", "declaration": { "name": "CbpIcon", "module": "src/components/cbp-icon/cbp-icon.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-link/cbp-link.tsx", "declarations": [ { "kind": "class", "description": "The cbp-link component is used to render an anchor or provide consistent styling for a slotted anchor.", "name": "CbpLink", "slots": [ { "description": "the default slot represents the linked content, which may include markup, for the rendered anchor tag.", "name": "" }, { "description": "Custom anchors may be slotted via named-slot, which prevents the web component from rendering its own anchor tag.", "name": "cbp-link-custom" } ], "members": [ { "kind": "field", "name": "anchor", "type": { "text": "HTMLAnchorElement" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "href", "type": { "text": "string" }, "description": "Specifies the `href` of the rendered anchor." }, { "kind": "field", "name": "rel", "type": { "text": "string" }, "description": "Specifies the `rel` attribute of the rendered anchor." }, { "kind": "field", "name": "target", "type": { "text": "string" }, "description": "Specifies the `target` attribute of the rendered anchor." }, { "kind": "field", "name": "download", "type": { "text": "boolean | string" }, "description": "Specifies the `download` boolean attribute of the rendered anchor." }, { "kind": "field", "name": "language", "type": { "text": "string" }, "description": "Specifies the `lang` attribute of the rendered anchor." }, { "kind": "field", "name": "shortcutKey", "type": { "text": "string" }, "description": "Defines an `accesskey` attribute of the rendered anchor." }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "Specifies an accessible label for the rendered anchor via `aria-label`." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "description": "Specifies whether the the rendered anchor is \"disabled\". Creating disabled anchors may introduce accessibility concerns - use with caution." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleClick(e) => void" } } ], "attributes": [ { "name": "href", "fieldName": "href", "type": { "text": "string" } }, { "name": "rel", "fieldName": "rel", "type": { "text": "string" } }, { "name": "target", "fieldName": "target", "type": { "text": "string" } }, { "name": "download", "fieldName": "download", "type": { "text": "boolean | string" } }, { "name": "language", "fieldName": "language", "type": { "text": "string" } }, { "name": "shortcut-key", "fieldName": "shortcutKey", "type": { "text": "string" } }, { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-link", "events": [ { "name": "linkClick", "type": { "text": "EventEmitter" }, "description": "A custom event emitted with the anchor is activated/clicked." } ], "customElement": true, "modulePath": "src/components/cbp-link/cbp-link.tsx", "definitionPath": "src/components/cbp-link/cbp-link.tsx" } ], "exports": [ { "kind": "js", "name": "CbpLink", "declaration": { "name": "CbpLink", "module": "src/components/cbp-link/cbp-link.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-link", "declaration": { "name": "CbpLink", "module": "src/components/cbp-link/cbp-link.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-list/cbp-list.tsx", "declarations": [ { "kind": "class", "description": "The List component is used to render semantic HTML lists in accordance with the design system, \nsupporting additional variants with custom/user-defined icons and description lists.", "name": "CbpList", "slots": [ { "description": "Only list items of the proper semantic type should be slotted in the default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "renderedTag", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "variant", "type": { "text": "'unstyled' | 'link' | 'icon'" }, "description": "Specifies the variant of list (unstyled, icon, special)" }, { "kind": "field", "name": "tag", "type": { "text": "'ul' | 'ol' | 'dl'" }, "default": "'ul'", "description": "Specifies the semantic tag to be rendered." }, { "kind": "field", "name": "size", "type": { "text": "'normal' | 'large'" }, "default": "'normal'", "description": "Specifies the font size for the list" }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "Specifies an accessible label for the list as an `aria-label`, similar to a table `caption`." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." } ], "attributes": [ { "name": "variant", "fieldName": "variant", "type": { "text": "'unstyled' | 'link' | 'icon'" } }, { "name": "tag", "fieldName": "tag", "type": { "text": "'ul' | 'ol' | 'dl'" } }, { "name": "size", "fieldName": "size", "type": { "text": "'normal' | 'large'" } }, { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } } ], "tagName": "cbp-list", "events": [], "customElement": true, "modulePath": "src/components/cbp-list/cbp-list.tsx", "definitionPath": "src/components/cbp-list/cbp-list.tsx" } ], "exports": [ { "kind": "js", "name": "CbpList", "declaration": { "name": "CbpList", "module": "src/components/cbp-list/cbp-list.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-list", "declaration": { "name": "CbpList", "module": "src/components/cbp-list/cbp-list.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-listbox/cbp-listbox.tsx", "declarations": [ { "kind": "class", "description": "A Listbox wraps a standard text or search input, enhancing it by providing suggestions in a format visually similar to a dropdown, from which a selection may optionally be made.", "name": "CbpListbox", "slots": [ { "description": "A native text or search input (or optionally `cbp-form-field-wrapper as well) should be slotted in the default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "formField", "type": { "text": "HTMLInputElement" }, "privacy": "private" }, { "kind": "field", "name": "autocomplete", "type": { "text": "string | null" }, "privacy": "private" }, { "kind": "field", "name": "value", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "field", "name": "listbox", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "listboxItems", "type": { "text": "HTMLLIElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "generatedItems", "type": { "text": "HTMLLIElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "focusIndex", "type": { "text": "number" }, "privacy": "private", "default": "-1" }, { "kind": "field", "name": "host", "type": { "text": "HTMLCbpDropdownElement" }, "privacy": "private" }, { "kind": "field", "name": "uid", "type": { "text": "string" }, "description": "Optionally specify the ID of the listbox element (role=listbox), which is used to generate related \npattern node IDs and associate it to the wrapped input for accessibility." }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Specifies whether the listbox is open/visible." }, { "kind": "field", "name": "items", "type": { "text": "string | object" }, "description": "A JSON object (or stringified JSON) containing an array of labels. Labels may contain markup as needed but \nonly the text can be populated into the native input upon selection.\nThe expected format is [{\"label\":\"string\"}, ...]" }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled.\nDefault behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles (to the host) as an object. This property is not reactive." }, { "kind": "method", "name": "watchOpen", "parameters": [ { "name": "newValue" } ], "type": { "text": "watchOpen(newValue) => void" } }, { "kind": "method", "name": "watchItems", "parameters": [ { "name": "newValue" } ], "type": { "text": "watchItems(newValue) => void" } }, { "kind": "method", "name": "getItems", "privacy": "private", "parameters": [ { "name": "items" } ] }, { "kind": "method", "name": "showListbox", "privacy": "private" }, { "kind": "method", "name": "closeListbox", "privacy": "private" }, { "kind": "method", "name": "handleFocus", "privacy": "private" }, { "kind": "method", "name": "handleInput", "privacy": "private", "parameters": [ { "name": "e" } ] }, { "kind": "method", "name": "handleListboxClick", "privacy": "private", "parameters": [ { "name": "e" } ] }, { "kind": "method", "name": "getActionFromKey", "parameters": [ { "name": "event" } ], "type": { "text": "getActionFromKey(event) => void" } }, { "kind": "method", "name": "setCurrent", "parameters": [ { "name": "newValue", "default": "0" }, { "name": "oldValue", "default": "undefined" } ], "type": { "text": "setCurrent(newValue = 0, oldValue = undefined) => void" } }, { "kind": "method", "name": "isScrollable", "parameters": [ { "name": "element" } ], "type": { "text": "isScrollable(element) => void" } }, { "kind": "method", "name": "maintainScrollVisibility", "parameters": [ { "name": "activeElement" }, { "name": "scrollParent" } ], "type": { "text": "maintainScrollVisibility(activeElement, scrollParent) => void" } }, { "kind": "method", "name": "generateItems", "privacy": "private", "parameters": [ { "name": "items" } ] } ], "attributes": [ { "name": "uid", "fieldName": "uid", "type": { "text": "string" } }, { "name": "open", "fieldName": "open", "type": { "text": "boolean" } }, { "name": "items", "fieldName": "items", "type": { "text": "string | object" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-listbox", "events": [ { "name": "updateListboxSuggestions", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the value of the wrapped input changes to update the listbox suggestions (items) \nvia application logic." }, { "name": "valueChange", "type": { "text": "EventEmitter" }, "description": "A custom event emitted only when a selection is made in the listbox.\nThis event will be listened for in addition to the native input's change event by the parent `cbp-form-field`, \nas selection does not trigger a native change event on the input.\nTo get all changes to the wrapped input, listen to the `valueChange` event on the parent `cbp-form-field`." } ], "customElement": true, "modulePath": "src/components/cbp-listbox/cbp-listbox.tsx", "definitionPath": "src/components/cbp-listbox/cbp-listbox.tsx" } ], "exports": [ { "kind": "js", "name": "CbpListbox", "declaration": { "name": "CbpListbox", "module": "src/components/cbp-listbox/cbp-listbox.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-listbox", "declaration": { "name": "CbpListbox", "module": "src/components/cbp-listbox/cbp-listbox.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-loader/cbp-loader.tsx", "declarations": [ { "kind": "class", "description": "The Loader is used as a visual indicator of progress during waiting periods.", "name": "CbpLoader", "slots": [ { "description": "Label text may be provided in the default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "progressId", "type": { "text": "string" }, "description": "Specifies a unique `ID` for the loader, used to wire up the controls and accessibility features." }, { "kind": "field", "name": "variant", "type": { "text": "\"circular\" | \"linear\"" }, "description": "Defines if the loader will be in displayed as a circular or linear variant" }, { "kind": "field", "name": "size", "type": { "text": "\"large\" | \"small\"" }, "default": "\"large\"", "description": "Defines the size of the loader render, default value of large" }, { "kind": "field", "name": "determinate", "type": { "text": "boolean" }, "default": "false", "description": "Defines if the loader will be in determinate/indeterminate, if true loader will display the current value out of max value" }, { "kind": "field", "name": "value", "type": { "text": "number" }, "default": "0", "description": "Used in deternminate mode to display the current value of loaded content" }, { "kind": "field", "name": "max", "type": { "text": "number" }, "default": "100", "description": "Used in deternminate mode to display the max value of loaded content" }, { "kind": "field", "name": "orientation", "type": { "text": "\"horizontal\" | \"vertical\"" }, "default": "'horizontal'", "description": "Used to set the text orientation for the circular determinate loader's description" }, { "kind": "field", "name": "success", "type": { "text": "boolean" }, "description": "Used to set the loader to the 'success' state of the loader" }, { "kind": "field", "name": "error", "type": { "text": "boolean" }, "description": "Used to set the loader to the 'error' state of the loader" }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. \nDefault behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "progress-id", "fieldName": "progressId", "type": { "text": "string" } }, { "name": "variant", "fieldName": "variant", "type": { "text": "\"circular\" | \"linear\"" } }, { "name": "size", "fieldName": "size", "type": { "text": "\"large\" | \"small\"" } }, { "name": "determinate", "fieldName": "determinate", "type": { "text": "boolean" } }, { "name": "value", "fieldName": "value", "type": { "text": "number" } }, { "name": "max", "fieldName": "max", "type": { "text": "number" } }, { "name": "orientation", "fieldName": "orientation", "type": { "text": "\"horizontal\" | \"vertical\"" } }, { "name": "success", "fieldName": "success", "type": { "text": "boolean" } }, { "name": "error", "fieldName": "error", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-loader", "events": [], "customElement": true, "modulePath": "src/components/cbp-loader/cbp-loader.tsx", "definitionPath": "src/components/cbp-loader/cbp-loader.tsx" } ], "exports": [ { "kind": "js", "name": "CbpLoader", "declaration": { "name": "CbpLoader", "module": "src/components/cbp-loader/cbp-loader.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-loader", "declaration": { "name": "CbpLoader", "module": "src/components/cbp-loader/cbp-loader.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-menu/cbp-menu.tsx", "declarations": [ { "kind": "class", "description": "A Menu contains additional actions in the form of links or buttons, which can be shown by activating a control.", "name": "CbpMenu", "slots": [ { "description": "Both the menu control and the menu items are slotted in the default slot. (The menu items are auto-slotting into their proper place).", "name": "" } ], "members": [ { "kind": "field", "name": "CBPButton", "type": { "text": "HTMLCbpButtonElement" }, "privacy": "private" }, { "kind": "field", "name": "control", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "menu", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "menuItems", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "focusIndex", "type": { "text": "number" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "position", "type": { "text": "'bottom-start' | \"bottom-end\" | 'top-start' | \"top-end\"" }, "default": "'bottom-start'", "description": "Specifies the position of the menu. Defaults to \"bottom-start\"." }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "When set, specifies that the menu is open." }, { "kind": "field", "name": "uid", "type": { "text": "string" }, "description": "Specifies a unique `ID` for the menu, used to wire up the controls and accessibility features." }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "Creates an accessible label for the menu control." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "openMenu", "description": "A public method for opening the menu.", "type": { "text": "openMenu() => void" } }, { "kind": "method", "name": "closeMenu", "description": "A public method for closing the menu.", "type": { "text": "closeMenu() => void" } }, { "kind": "method", "name": "watchOpen", "parameters": [ { "name": "newValue" } ], "type": { "text": "watchOpen(newValue) => void" } }, { "kind": "method", "name": "clickAwayHandler", "parameters": [ { "name": "{ target }" } ], "type": { "text": "clickAwayHandler({ target }) => void" } }, { "kind": "method", "name": "handleKeyPress", "parameters": [ { "name": "e" } ], "type": { "text": "handleKeyPress(e) => void" } }, { "kind": "method", "name": "setCurrentMenuItem", "parameters": [ { "name": "i", "default": "0" } ], "type": { "text": "setCurrentMenuItem(i = 0) => void" } }, { "kind": "method", "name": "handleKeyPressCloseButton", "parameters": [ { "name": "e" } ], "type": { "text": "handleKeyPressCloseButton(e) => void" } } ], "attributes": [ { "name": "position", "fieldName": "position", "type": { "text": "'bottom-start' | \"bottom-end\" | 'top-start' | \"top-end\"" } }, { "name": "open", "fieldName": "open", "type": { "text": "boolean" } }, { "name": "uid", "fieldName": "uid", "type": { "text": "string" } }, { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-menu", "events": [ { "name": "toggleMenu", "type": { "text": "EventEmitter" }, "description": "A custom event fired when the menu is opened or closed." } ], "customElement": true, "modulePath": "src/components/cbp-menu/cbp-menu.tsx", "definitionPath": "src/components/cbp-menu/cbp-menu.tsx" } ], "exports": [ { "kind": "js", "name": "CbpMenu", "declaration": { "name": "CbpMenu", "module": "src/components/cbp-menu/cbp-menu.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-menu", "declaration": { "name": "CbpMenu", "module": "src/components/cbp-menu/cbp-menu.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-menu-item/cbp-menu-item.tsx", "declarations": [ { "kind": "class", "description": "The Menu Item component wraps each individual control (link or button) within the menu.", "name": "CbpMenuItem", "slots": [ { "description": "Any form of control may be slotted in the default slot (a link, button, link component, button component, component-based Router, etc.). But any components should render a semantic anchor or button element.", "name": "" } ], "members": [ { "kind": "field", "name": "menuItem", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "indentLevel", "type": { "text": "number" }, "default": "0", "description": "Specifies an indent level to represent hierarchical items. Defaults to zero." }, { "kind": "field", "name": "color", "type": { "text": "\"danger\"" }, "description": "Specifies a color variant for the menu item. Currently the only supported variant is \"danger\"." }, { "kind": "field", "name": "slot", "type": { "text": "string" }, "default": "\"cbp-menu-items\"" } ], "attributes": [ { "name": "indent-level", "fieldName": "indentLevel", "type": { "text": "number" } }, { "name": "color", "fieldName": "color", "type": { "text": "\"danger\"" } } ], "tagName": "cbp-menu-item", "events": [], "customElement": true, "modulePath": "src/components/cbp-menu-item/cbp-menu-item.tsx", "definitionPath": "src/components/cbp-menu-item/cbp-menu-item.tsx" } ], "exports": [ { "kind": "js", "name": "CbpMenuItem", "declaration": { "name": "CbpMenuItem", "module": "src/components/cbp-menu-item/cbp-menu-item.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-menu-item", "declaration": { "name": "CbpMenuItem", "module": "src/components/cbp-menu-item/cbp-menu-item.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-multicol/cbp-multicol.tsx", "declarations": [ { "kind": "class", "description": "The Multicol component is a wrapper that invokes a CSS Multi-column layout context, ideal for \nusing with semantic lists and checklists/radio lists.", "name": "CbpMulticol", "slots": [ { "description": "The default slot contains any content or children to be arranged in a multi-column layout.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "columns", "type": { "text": "number" }, "description": "Specifies the maximum number of columns" }, { "kind": "field", "name": "width", "type": { "text": "string" }, "description": "Specifies the minimum column width in CSS units (preferably relative units such as `rem`). \nThe column width may affect how many columns are actually used based upon available space." }, { "kind": "field", "name": "gap", "type": { "text": "string" }, "description": "Specifies the gap between columns in CSS units (preferably relative units such as `rem`)." }, { "kind": "field", "name": "rule", "type": { "text": "string" }, "description": "Specifies the rule separating each column (syntax is similar to CSS borders, including a width, style, and color)." }, { "kind": "field", "name": "nobreak", "type": { "text": "boolean" }, "description": "Specifies that children shall not be broken to spread contents across columns (using `break-inside: avoid` CSS)." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "columns", "fieldName": "columns", "type": { "text": "number" } }, { "name": "width", "fieldName": "width", "type": { "text": "string" } }, { "name": "gap", "fieldName": "gap", "type": { "text": "string" } }, { "name": "rule", "fieldName": "rule", "type": { "text": "string" } }, { "name": "nobreak", "fieldName": "nobreak", "type": { "text": "boolean" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-multicol", "events": [], "customElement": true, "modulePath": "src/components/cbp-multicol/cbp-multicol.tsx", "definitionPath": "src/components/cbp-multicol/cbp-multicol.tsx" } ], "exports": [ { "kind": "js", "name": "CbpMulticol", "declaration": { "name": "CbpMulticol", "module": "src/components/cbp-multicol/cbp-multicol.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-multicol", "declaration": { "name": "CbpMulticol", "module": "src/components/cbp-multicol/cbp-multicol.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-nav-item/cbp-nav-item.tsx", "declarations": [ { "kind": "class", "description": "The Nav Item component wraps each individual control (link or button) within the App Header.", "name": "CbpNavItem", "slots": [ { "description": "Any form of control may be slotted in the default slot (a link, button, link component, button component, component-based Router, etc.). But any components should render a semantic anchor or button element.", "name": "" } ], "members": [ { "kind": "field", "name": "control", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLCbpNavItemElement" }, "privacy": "private" }, { "kind": "field", "name": "current", "type": { "text": "boolean" }, "description": "Specifies whether this is the Nav Item that represents the current page. Only one item per set should be marked as current." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "Specifies a name used to associated Nav Items with Subnav Items." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object." }, { "kind": "method", "name": "handleNavItemClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleNavItemClick(e) => void" } }, { "kind": "method", "name": "doSelected", "parameters": [ { "name": "newValue" } ], "type": { "text": "doSelected(newValue) => void" } } ], "attributes": [ { "name": "current", "fieldName": "current", "type": { "text": "boolean" } }, { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-nav-item", "events": [ { "name": "navItemClick", "type": { "text": "EventEmitter" } } ], "customElement": true, "modulePath": "src/components/cbp-nav-item/cbp-nav-item.tsx", "definitionPath": "src/components/cbp-nav-item/cbp-nav-item.tsx" } ], "exports": [ { "kind": "js", "name": "CbpNavItem", "declaration": { "name": "CbpNavItem", "module": "src/components/cbp-nav-item/cbp-nav-item.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-nav-item", "declaration": { "name": "CbpNavItem", "module": "src/components/cbp-nav-item/cbp-nav-item.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-notice/cbp-notice.tsx", "declarations": [ { "kind": "class", "description": "The Notice component presents persistent information that gives extra insight into a particular content area.", "name": "CbpNotice", "slots": [ { "description": "The notice body content is placed in the default slot.", "name": "" }, { "description": "The notice title is placed in this named slot.", "name": "cbp-notice-title" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "color", "type": { "text": "'info' | 'success' | 'warning' | 'danger'" }, "default": "'info'", "description": "Optionally specifies a notice color based on predefined design token values. Defaults to \"info\"." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." } ], "attributes": [ { "name": "color", "fieldName": "color", "type": { "text": "'info' | 'success' | 'warning' | 'danger'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } } ], "tagName": "cbp-notice", "events": [], "customElement": true, "modulePath": "src/components/cbp-notice/cbp-notice.tsx", "definitionPath": "src/components/cbp-notice/cbp-notice.tsx" } ], "exports": [ { "kind": "js", "name": "CbpNotice", "declaration": { "name": "CbpNotice", "module": "src/components/cbp-notice/cbp-notice.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-notice", "declaration": { "name": "CbpNotice", "module": "src/components/cbp-notice/cbp-notice.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-pagination/cbp-pagination.tsx", "declarations": [ { "kind": "class", "description": "The Pagination component presents a common UI pattern for displaying data sets broken up into smaller, \nmore consumable (and performant) chunks or \"pages.\"", "name": "CbpPagination", "slots": [ { "description": "The default slot positions specified content between the \"showing items\" text and page controls. This slot should rarely be used.", "name": "" }, { "description": "Slot a `cbp-dropdown` here with numeric values (or \"All\") defining the options for page size.", "name": "cbp-pagination-items-per-page" }, { "description": "Slot an empty `cbp-dropdown` here with next/previous controls for the page selection. The Pagination component will manage the items within this dropdown.", "name": "cbp-pagination-pages" } ], "members": [ { "kind": "field", "name": "pageSizeDropdown", "type": { "text": "HTMLCbpDropdownElement" }, "privacy": "private" }, { "kind": "field", "name": "pagesDropdown", "type": { "text": "HTMLCbpDropdownElement" }, "privacy": "private" }, { "kind": "field", "name": "pages", "type": { "text": "number" }, "privacy": "private", "default": "1" }, { "kind": "field", "name": "nextPageButton", "type": { "text": "HTMLCbpButtonElement" }, "privacy": "private" }, { "kind": "field", "name": "previousPageButton", "type": { "text": "HTMLCbpButtonElement" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "records", "type": { "text": "number" }, "default": "0", "description": "Specifies the number of records in the entire data set (complete or filtered) to be paginated." }, { "kind": "field", "name": "pageSize", "type": { "text": "number | \"all\"" }, "default": "10", "description": "Specifies the number of items to show per page. Accepts any number or \"all\". Defaults to 10." }, { "kind": "field", "name": "page", "type": { "text": "number" }, "default": "1", "description": "Specifies the current page being viewed. Defaults to 1." }, { "kind": "field", "name": "maxPages", "type": { "text": "number | undefined" }, "description": "Specifies the current maximum number of pages allowed. This property should be used for extremely large data sets \nthat have the potential to returns hundreds or thousands of pages." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "field", "name": "pagesDropdownItems", "type": { "text": "HTMLCbpDropdownItemElement[]" }, "privacy": "private" }, { "kind": "field", "name": "showingText", "type": { "text": "string" }, "privacy": "private" }, { "kind": "method", "name": "handlePagesButtonNav", "parameters": [ { "name": "{detail: {value} }" } ], "type": { "text": "handlePagesButtonNav({detail: {value} }) => void" } }, { "kind": "method", "name": "handlePageSizeChange", "privacy": "private", "parameters": [ { "name": "value" } ] }, { "kind": "method", "name": "handlePageChange", "privacy": "private", "parameters": [ { "name": "value" } ] }, { "kind": "method", "name": "checkPageButtonStates", "privacy": "private" }, { "kind": "method", "name": "updatePages", "privacy": "private" } ], "attributes": [ { "name": "records", "fieldName": "records", "type": { "text": "number" } }, { "name": "page-size", "fieldName": "pageSize", "type": { "text": "number | \"all\"" } }, { "name": "page", "fieldName": "page", "type": { "text": "number" } }, { "name": "max-pages", "fieldName": "maxPages", "type": { "text": "number | undefined" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-pagination", "events": [ { "name": "paginationChange", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the click event occurs for either a rendered button or anchor/link." } ], "customElement": true, "modulePath": "src/components/cbp-pagination/cbp-pagination.tsx", "definitionPath": "src/components/cbp-pagination/cbp-pagination.tsx" } ], "exports": [ { "kind": "js", "name": "CbpPagination", "declaration": { "name": "CbpPagination", "module": "src/components/cbp-pagination/cbp-pagination.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-pagination", "declaration": { "name": "CbpPagination", "module": "src/components/cbp-pagination/cbp-pagination.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-panel/cbp-panel.tsx", "declarations": [ { "kind": "class", "description": "A panel is a styled container for displaying information within the main page content area or to either side.", "name": "CbpPanel", "slots": [ { "description": "Panel content goes in the default slot.", "name": "" }, { "description": "The panel header is placed in this named slot.", "name": "cbp-panel-header" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-panel", "events": [], "customElement": true, "modulePath": "src/components/cbp-panel/cbp-panel.tsx", "definitionPath": "src/components/cbp-panel/cbp-panel.tsx" } ], "exports": [ { "kind": "js", "name": "CbpPanel", "declaration": { "name": "CbpPanel", "module": "src/components/cbp-panel/cbp-panel.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-panel", "declaration": { "name": "CbpPanel", "module": "src/components/cbp-panel/cbp-panel.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-radio/cbp-radio.tsx", "declarations": [ { "kind": "class", "description": "The Radio component wraps the slotted native form control (`input type=\"radio\"`) and label text, providing cross-browser styling.", "name": "CbpRadio", "slots": [ { "description": "The radio control and label text goes in the default slot, both of which are placed inside of the `label` element. The label should not include excessively long descriptive text.", "name": "" } ], "members": [ { "kind": "field", "name": "formField", "type": { "text": "HTMLInputElement" }, "privacy": "private" }, { "kind": "field", "name": "initialChecked", "type": { "text": "boolean" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "The `name` attribute of the radio button, which is passed as part of formData (as a key) only when the radio button is checked." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "Optionally set the `value` attribute of the radio button at the component level. Not needed if the slotted radio button has a value." }, { "kind": "field", "name": "fieldId", "type": { "text": "string" }, "description": "Optionally specify the ID of the checkbox input here, which is used to generate related pattern node IDs and associate everything for accessibility" }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "description": "Marks the radio button as checked by default when specified." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "description": "Marks the radio button in a disabled state when specified." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleChange", "parameters": [ { "name": "e" } ], "type": { "text": "handleChange(e) => void" } }, { "kind": "method", "name": "reset", "description": "A custom method to reset the Radio component to its initial state and value since it does not update \nproperly on a native form reset when the checked state is set via the component property. This method may \nbe called manually, but is automatically called on form reset when using the `cbp-form` component.", "type": { "text": "reset() => void" } }, { "kind": "method", "name": "watchDisabledHandler", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchDisabledHandler(newValue: boolean) => void" } } ], "attributes": [ { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "value", "fieldName": "value", "type": { "text": "string" } }, { "name": "field-id", "fieldName": "fieldId", "type": { "text": "string" } }, { "name": "checked", "fieldName": "checked", "type": { "text": "boolean" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-radio", "events": [ { "name": "stateChanged", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the click event occurs for either a rendered button or anchor/link." } ], "customElement": true, "modulePath": "src/components/cbp-radio/cbp-radio.tsx", "definitionPath": "src/components/cbp-radio/cbp-radio.tsx" } ], "exports": [ { "kind": "js", "name": "CbpRadio", "declaration": { "name": "CbpRadio", "module": "src/components/cbp-radio/cbp-radio.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-radio", "declaration": { "name": "CbpRadio", "module": "src/components/cbp-radio/cbp-radio.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-resize-observer/cbp-resize-observer.tsx", "declarations": [ { "kind": "class", "description": "The Resize Observer component is a wrapper that implements a resizeObserver to detect changes to its size,\ntypically to compare to an immediate child that is wrapping a collection of variable-sized elements \n(e.g., links, tabs, etc.), in order to implement responsive functionality that cannot be accomplished \nwith a media query or container query.", "name": "CbpResizeObserver", "slots": [ { "description": "any markup or content may be placed in the default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "observer", "type": { "text": "ResizeObserver" }, "privacy": "private" }, { "kind": "field", "name": "observedEl", "type": { "text": "Element" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "debounce", "type": { "text": "number" }, "default": "0", "description": "The number of milliseconds to debounce the event emitter. Defaults to 0.\nWhile the native resize observer is very performant, the calculations within its handler function may\nnot be, and performance may benefit from debouncing this event emitter." }, { "kind": "method", "name": "getCurrentSize", "type": { "text": "getCurrentSize() => void" } }, { "kind": "method", "name": "getClientRect", "type": { "text": "getClientRect() => void" } } ], "attributes": [ { "name": "debounce", "fieldName": "debounce", "type": { "text": "number" } } ], "tagName": "cbp-resize-observer", "events": [ { "name": "resized", "type": { "text": "EventEmitter" }, "description": "A custom event emitted when the component is resized to give new values for size of component." } ], "customElement": true, "modulePath": "src/components/cbp-resize-observer/cbp-resize-observer.tsx", "definitionPath": "src/components/cbp-resize-observer/cbp-resize-observer.tsx" } ], "exports": [ { "kind": "js", "name": "CbpResizeObserver", "declaration": { "name": "CbpResizeObserver", "module": "src/components/cbp-resize-observer/cbp-resize-observer.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-resize-observer", "declaration": { "name": "CbpResizeObserver", "module": "src/components/cbp-resize-observer/cbp-resize-observer.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-section/cbp-section.tsx", "declarations": [ { "kind": "class", "description": "The Section component represents a generic block that may be used for semantic meaning or as \na generic container for styling.", "name": "CbpSection", "slots": [ { "description": "Content slotted in the default slot is rendered inside of the specified tag, if any.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "tag", "type": { "text": "'div' | 'section' | 'none'" }, "default": "'none'", "description": "Specifies the tag to render. Use `section` with the `accessibilityText` property to make an accessible landmark element." }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "Specifies an accessible label as `aria-label` to make a `section` tag an accessible landmark element. Likely has no effect otherwise." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "tag", "fieldName": "tag", "type": { "text": "'div' | 'section' | 'none'" } }, { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-section", "events": [], "customElement": true, "modulePath": "src/components/cbp-section/cbp-section.tsx", "definitionPath": "src/components/cbp-section/cbp-section.tsx" } ], "exports": [ { "kind": "js", "name": "CbpSection", "declaration": { "name": "CbpSection", "module": "src/components/cbp-section/cbp-section.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-section", "declaration": { "name": "CbpSection", "module": "src/components/cbp-section/cbp-section.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-segmented-button-group/cbp-segmented-button-group.tsx", "declarations": [ { "kind": "class", "description": "The Segmented Button Group component wraps multiple buttons and can be used as a multi-option \ntoggle or group of controls.", "name": "SegmentedButtonGroup", "slots": [ { "description": "Only `cbp-button` components should be slotted within the default slot to make up the button group.", "name": "" } ], "members": [ { "kind": "field", "name": "buttongroup", "type": { "text": "array" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "initialValue", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "Optionally specifies the name of the (hidden) form field as a formData key \nwhen a value is intended to be passed." }, { "kind": "field", "name": "value", "type": { "text": "any" }, "description": "Optionally specifies a value of the group as a way to set the initial button pressed states and/or\nto be passed as part of submitted formData when a name is also specified. \nRequires that the individual buttons have a value specified for the group to pass a value." }, { "kind": "field", "name": "multiple", "type": { "text": "boolean" }, "description": "Specifies whether multiple buttons may be activated at the same time. Defaults to false." }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "Specifies accessibility text used to label the group, applied to the group via aria-label." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" } }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "reset", "description": "A custom method to reset the Segmented Button Group component to its initial state and value (when a name is specified)\nsince the hidden input does not update on a native form reset. This method may be called manually, but is automatically \ncalled on form reset when using the `cbp-form` component.", "type": { "text": "reset() => void" } }, { "kind": "method", "name": "handleComponentLoad", "parameters": [ { "name": "{ detail: { nativeElement: element, host } }" } ], "type": { "text": "handleComponentLoad({ detail: { nativeElement: element, host } }) => void" } }, { "kind": "method", "name": "handleButtonClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleButtonClick(e) => void" } }, { "kind": "method", "name": "watchValueHandler", "parameters": [ { "name": "newValue" } ], "type": { "text": "watchValueHandler(newValue) => void" } }, { "kind": "method", "name": "setValueFromButtons", "type": { "text": "setValueFromButtons() => void" } } ], "attributes": [ { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "value", "fieldName": "value", "type": { "text": "any" } }, { "name": "multiple", "fieldName": "multiple", "type": { "text": "boolean" } }, { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-segmented-button-group", "events": [ { "name": "segmentedButtonGroupClick", "type": { "text": "EventEmitter" }, "description": "A custom event fired when any of the group's buttons are clicked, whether toggled on or off." } ], "customElement": true, "modulePath": "src/components/cbp-segmented-button-group/cbp-segmented-button-group.tsx", "definitionPath": "src/components/cbp-segmented-button-group/cbp-segmented-button-group.tsx" } ], "exports": [ { "kind": "js", "name": "SegmentedButtonGroup", "declaration": { "name": "SegmentedButtonGroup", "module": "src/components/cbp-segmented-button-group/cbp-segmented-button-group.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-segmented-button-group", "declaration": { "name": "SegmentedButtonGroup", "module": "src/components/cbp-segmented-button-group/cbp-segmented-button-group.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-skip-nav/cbp-skip-nav.tsx", "declarations": [ { "kind": "class", "description": "The Skip Navigation link (or \"Skip Nav\") is an essential accessibility feature that allows screen \nreader users to skip repetitive portions of the page and get right to the main content.", "name": "CbpSkipNav", "slots": [ { "description": "The default slot accepts custom link text, which is only needed if multiple skip links are present. Otherwise, it is advised to use the default \"Skip to main content\", which has been validated for clarity and pronunciation.", "name": "" } ], "members": [ { "kind": "field", "name": "link", "type": { "text": "HTMLAnchorElement" }, "privacy": "private" }, { "kind": "field", "name": "targetId", "type": { "text": "string" }, "default": "\"main\"", "description": "Specifies the target `id` where focus is sent when the \"skip nav\" link is activated. Defaults to \"main\"." }, { "kind": "field", "name": "shortcutKey", "type": { "text": "string" }, "description": "Specifies a shortcut key, which is applied as an `accessKey` attribute." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleClick(e) => void" } } ], "attributes": [ { "name": "target-id", "fieldName": "targetId", "type": { "text": "string" } }, { "name": "shortcut-key", "fieldName": "shortcutKey", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-skip-nav", "events": [], "customElement": true, "modulePath": "src/components/cbp-skip-nav/cbp-skip-nav.tsx", "definitionPath": "src/components/cbp-skip-nav/cbp-skip-nav.tsx" } ], "exports": [ { "kind": "js", "name": "CbpSkipNav", "declaration": { "name": "CbpSkipNav", "module": "src/components/cbp-skip-nav/cbp-skip-nav.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-skip-nav", "declaration": { "name": "CbpSkipNav", "module": "src/components/cbp-skip-nav/cbp-skip-nav.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-slider/cbp-slider.tsx", "declarations": [ { "kind": "class", "description": "The Slider component allows for the selection of a value within a range, styled to design system specifications.", "name": "CbpSlider", "slots": [ { "description": "A native `input type=\"range\"` (or 2 for range sliders) gets slotted within the default slot.", "name": "" }, { "description": "an optional slot to place content (e.g., an icon) before the slider control.", "name": "cpb-slider-before" }, { "description": "an optional slot to place content (e.g., an icon) after the slider control.", "name": "cpb-slider-after" } ], "members": [ { "kind": "field", "name": "formFields", "type": { "text": "HTMLInputElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "valueField1", "type": { "text": "HTMLInputElement" }, "privacy": "private" }, { "kind": "field", "name": "valueField2", "type": { "text": "HTMLInputElement" }, "privacy": "private" }, { "kind": "field", "name": "valueFields", "type": { "text": "HTMLInputElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "initialValue", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "fieldId", "type": { "text": "string" }, "description": "Optionally specify the ID of the visible control here, which is used to generate related pattern node IDs and associate everything for accessibility. \nFor range sliders, \"-start\" and \"-end\" are appended to the specified/generated value automatically." }, { "kind": "field", "name": "value", "type": { "text": "number | number[] | string | string[]" }, "description": "Specifies the value of the slider and numeric entry field. It is highly recommended to set a contextually sensible default because\nthe native `input type=\"range\" cannot have an undefined or empty string as a value. If no value is specified, the default value will \nbe reported (and submitted) as halfway between the specified minimum and maximum; unless the maximum is actually less than the minimum, \nin which case the default is set to the value of the minimum attribute.\nThis prop should be set on this component rather than (or in addition to) the slotted `input type=\"range\"`." }, { "kind": "field", "name": "gap", "type": { "text": "number" }, "default": "0", "description": "Specifies the minimum difference in values in a range slider. If a non-zero value is specified, keep in mind the interaction with the \"step\" property." }, { "kind": "field", "name": "variant", "type": { "text": "\"single\" | \"range\"" }, "default": "\"single\"", "description": "Specifies whether the control is a single slider or a range with two values (can be auto-detected by the number of slotted `input[type=range]` tags)." }, { "kind": "field", "name": "min", "type": { "text": "number" }, "default": "0", "description": "Specifies the minimum value of the slider and numeric entry field (defaults to 0). \nThis prop should be set on this component rather than (or in addition to) the slotted `input type=\"range\"`." }, { "kind": "field", "name": "max", "type": { "text": "number" }, "default": "100", "description": "Specifies the maximum value of the slider and numeric entry field (defaults to 100). \nThis prop should be set on this component rather than (or in addition to) the slotted `input type=\"range\"`." }, { "kind": "field", "name": "step", "type": { "text": "number" }, "default": "1", "description": "Specifies the step value of the slider and numeric entry field (defaults to 1). \nThis prop should be set on this component rather than (or in addition to) the slotted `input type=\"range\"`." }, { "kind": "field", "name": "hideMinmax", "type": { "text": "boolean" }, "description": "Specifies whether the min/max values are hidden (shown by default)." }, { "kind": "field", "name": "hideInput", "type": { "text": "boolean" }, "description": "Specifies whether the numeric input is hidden (shown by default)." }, { "kind": "field", "name": "error", "type": { "text": "boolean" }, "default": "false", "description": "Specifies that the field has an error (and sets aria-invalid accordingly). Primarily controlled by the parent `cbp-form-field` component." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "default": "false", "description": "Specifies that the field is disabled. Primarily controlled by the parent `cbp-form-field` component." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. \nDefault behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "reset", "description": "A custom method to reset the Slider component to its initial state and value since it does not update \nproperly on a native form reset. This method may be called manually, but is automatically called on \nform reset when using the `cbp-form` component.", "type": { "text": "reset() => void" } }, { "kind": "method", "name": "watchDisabledHandler", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchDisabledHandler(newValue: boolean) => void" } }, { "kind": "method", "name": "handleChange", "parameters": [ { "name": "e" }, { "name": "i", "default": "0" } ], "type": { "text": "handleChange(e, i = 0) => void" } }, { "kind": "method", "name": "setSliderBar", "type": { "text": "setSliderBar() => void" } }, { "kind": "method", "name": "initRangeSlider", "type": { "text": "initRangeSlider() => void" } }, { "kind": "method", "name": "updateRangeBoundaries", "type": { "text": "updateRangeBoundaries() => void" } } ], "attributes": [ { "name": "field-id", "fieldName": "fieldId", "type": { "text": "string" } }, { "name": "value", "fieldName": "value", "type": { "text": "number | number[] | string | string[]" } }, { "name": "gap", "fieldName": "gap", "type": { "text": "number" } }, { "name": "variant", "fieldName": "variant", "type": { "text": "\"single\" | \"range\"" } }, { "name": "min", "fieldName": "min", "type": { "text": "number" } }, { "name": "max", "fieldName": "max", "type": { "text": "number" } }, { "name": "step", "fieldName": "step", "type": { "text": "number" } }, { "name": "hide-minmax", "fieldName": "hideMinmax", "type": { "text": "boolean" } }, { "name": "hide-input", "fieldName": "hideInput", "type": { "text": "boolean" } }, { "name": "error", "fieldName": "error", "type": { "text": "boolean" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-slider", "events": [ { "name": "valueChange", "type": { "text": "EventEmitter" }, "description": "A custom event fired when the value of the slider changes." } ], "customElement": true, "modulePath": "src/components/cbp-slider/cbp-slider.tsx", "definitionPath": "src/components/cbp-slider/cbp-slider.tsx" } ], "exports": [ { "kind": "js", "name": "CbpSlider", "declaration": { "name": "CbpSlider", "module": "src/components/cbp-slider/cbp-slider.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-slider", "declaration": { "name": "CbpSlider", "module": "src/components/cbp-slider/cbp-slider.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-structured-list/cbp-structured-list.tsx", "declarations": [ { "kind": "class", "description": "Structured lists are a way of displaying long lists of data where the user is not directly comparing \nraw data one row at a time.", "name": "CbpStructuredList", "slots": [ { "description": "Only list items may be slotted within the default content.", "name": "" }, { "description": "Optional information such as number of results, filters, etc. are provided by the application and slotted into this named slot.", "name": "cbp-structured-list-header" }, { "description": "Optional information and/or interactive elements are provided by the application and slotted into this named slot.", "name": "cbp-structured-list-footer" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "Specifies an accessible label for the list as an `aria-label`, similar to a table `caption`. \nSince the structured list contains significant amount of data, it is advised to always specify a label describing the list." }, { "kind": "field", "name": "headerId", "type": { "text": "string" }, "description": "References an `id` placed on the element slotted into the `cbp-structured-list-header` named slot to provide additional accessible context to the list label." }, { "kind": "field", "name": "striped", "type": { "text": "'odd' | 'even'" }, "description": "Specifies whether the list is striped, designating whether the colored rows are the odd or even rows (CBP DS standard is even when used)." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "header-id", "fieldName": "headerId", "type": { "text": "string" } }, { "name": "striped", "fieldName": "striped", "type": { "text": "'odd' | 'even'" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-structured-list", "events": [], "customElement": true, "modulePath": "src/components/cbp-structured-list/cbp-structured-list.tsx", "definitionPath": "src/components/cbp-structured-list/cbp-structured-list.tsx" } ], "exports": [ { "kind": "js", "name": "CbpStructuredList", "declaration": { "name": "CbpStructuredList", "module": "src/components/cbp-structured-list/cbp-structured-list.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-structured-list", "declaration": { "name": "CbpStructuredList", "module": "src/components/cbp-structured-list/cbp-structured-list.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-structured-list-item/cbp-structured-list-item.tsx", "declarations": [ { "kind": "class", "description": "The Structured List Item component may optionally be used to hold each list item's content. This component \nis needed primarily when designating an item with the \"danger\" color or when list items are selectable.", "name": "CbpStructuredListItem", "slots": [ { "description": "The list item content is placed in the default slot. Content may be wrapped in a CSS grid (e.g., `cbp-grid`) to give each list item consistent structure and sizing.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "color", "type": { "text": "'danger' | 'warning' | 'success' | 'info'" }, "description": "Optionally specifies a color variant based on design tokens." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "color", "fieldName": "color", "type": { "text": "'danger' | 'warning' | 'success' | 'info'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-structured-list-item", "events": [], "customElement": true, "modulePath": "src/components/cbp-structured-list-item/cbp-structured-list-item.tsx", "definitionPath": "src/components/cbp-structured-list-item/cbp-structured-list-item.tsx" } ], "exports": [ { "kind": "js", "name": "CbpStructuredListItem", "declaration": { "name": "CbpStructuredListItem", "module": "src/components/cbp-structured-list-item/cbp-structured-list-item.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-structured-list-item", "declaration": { "name": "CbpStructuredListItem", "module": "src/components/cbp-structured-list-item/cbp-structured-list-item.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-subnav/cbp-subnav.tsx", "declarations": [ { "kind": "class", "description": "Sub-Navigation (Subnav) is meant to be used as a secondary, vertical navigation.", "name": "CbpSubNav", "slots": [ { "description": "Subnav Items (and rarely anything else) should be slotted in the default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "subnavItems", "type": { "text": "HTMLCbpSubnavItemElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "currentItem", "type": { "text": "HTMLCbpSubnavItemElement" }, "privacy": "private" }, { "kind": "field", "name": "activeItem", "type": { "text": "HTMLCbpSubnavItemElement" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "default": "'Sub-Navigation'", "description": "Sets the aria-label for the `nav` landmark element rendered by the subnav." }, { "kind": "field", "name": "flat", "type": { "text": "boolean" }, "description": "Specifies a flat display, rather than the default indented layout based on tag hierarchy." }, { "kind": "field", "name": "store", "type": { "text": "boolean" }, "description": "Specifies whether the Subnav pushes updates to a state store to integrate with the Application Header." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "updateActiveItem", "parameters": [ { "name": "newValue" } ], "type": { "text": "updateActiveItem(newValue) => void" } }, { "kind": "method", "name": "updateCurrent", "parameters": [ { "name": "newValue" } ], "type": { "text": "updateCurrent(newValue) => void" } }, { "kind": "method", "name": "handleSubnavItemClick", "parameters": [ { "name": "{detail: {host}}" } ], "type": { "text": "handleSubnavItemClick({detail: {host}}) => void" } }, { "kind": "method", "name": "findParent", "return": { "type": { "text": "HTMLCbpSubnavItemElement" } }, "parameters": [ { "name": "subnavItem", "type": { "text": "HTMLCbpSubnavItemElement" } } ], "type": { "text": "findParent(subnavItem: HTMLCbpSubnavItemElement) => HTMLCbpSubnavItemElement" } } ], "attributes": [ { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "flat", "fieldName": "flat", "type": { "text": "boolean" } }, { "name": "store", "fieldName": "store", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-subnav", "events": [], "customElement": true, "modulePath": "src/components/cbp-subnav/cbp-subnav.tsx", "definitionPath": "src/components/cbp-subnav/cbp-subnav.tsx" } ], "exports": [ { "kind": "js", "name": "CbpSubNav", "declaration": { "name": "CbpSubNav", "module": "src/components/cbp-subnav/cbp-subnav.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-subnav", "declaration": { "name": "CbpSubNav", "module": "src/components/cbp-subnav/cbp-subnav.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-subnav-item/cbp-subnav-item.tsx", "declarations": [ { "kind": "class", "description": "The Subnav Item component represents a single navigation link and can also be nested multiple levels to convey a site/navigation hierarchy.", "name": "CbpSubnavItem", "slots": [ { "description": "The Subnav Item's children are placed in the default slot.", "name": "" }, { "description": "cbp-subnav-item-label - An optional slot in support of a label with markup. Replaces the `label` property if used.", "name": "" } ], "members": [ { "kind": "field", "name": "icon", "type": { "text": "string" }, "privacy": "private" }, { "kind": "field", "name": "parent", "type": { "text": "boolean" }, "privacy": "private" }, { "kind": "field", "name": "link", "type": { "text": "HTMLAnchorElement" }, "privacy": "private" }, { "kind": "field", "name": "expandButton", "type": { "text": "HTMLCbpButtonElement" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLCbpSubnavItemElement" }, "privacy": "private" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "description": "Specifies the text label for the subnav item." }, { "kind": "field", "name": "href", "type": { "text": "string" }, "description": "Specifies the href for the Subnav Item anchor." }, { "kind": "field", "name": "uid", "type": { "text": "string" }, "description": "Optionally specifies a unique `ID` for the menu, used to wire up the controls and accessibility features." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "Specifies a name used to associated Nav Items with Subnav Items." }, { "kind": "field", "name": "current", "type": { "text": "boolean" }, "default": "false", "description": "Specifies the current item within the collection of Subnav Items." }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Specifies whether a Subnav Item with nested children is expanded or collapsed. \nPrimarily used internally for user interactions." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleToggleSubnavItem", "parameters": [ { "name": "e" } ], "type": { "text": "handleToggleSubnavItem(e) => void" } }, { "kind": "method", "name": "handleSubnavClick", "parameters": [ { "name": "e" } ], "type": { "text": "handleSubnavClick(e) => void" } } ], "attributes": [ { "name": "label", "fieldName": "label", "type": { "text": "string" } }, { "name": "href", "fieldName": "href", "type": { "text": "string" } }, { "name": "uid", "fieldName": "uid", "type": { "text": "string" } }, { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "current", "fieldName": "current", "type": { "text": "boolean" } }, { "name": "open", "fieldName": "open", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-subnav-item", "events": [ { "name": "toggleSubnavItem", "type": { "text": "EventEmitter" } }, { "name": "subnavItemClick", "type": { "text": "EventEmitter" } } ], "customElement": true, "modulePath": "src/components/cbp-subnav-item/cbp-subnav-item.tsx", "definitionPath": "src/components/cbp-subnav-item/cbp-subnav-item.tsx" } ], "exports": [ { "kind": "js", "name": "CbpSubnavItem", "declaration": { "name": "CbpSubnavItem", "module": "src/components/cbp-subnav-item/cbp-subnav-item.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-subnav-item", "declaration": { "name": "CbpSubnavItem", "module": "src/components/cbp-subnav-item/cbp-subnav-item.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-tab/cbp-tab.tsx", "declarations": [ { "kind": "class", "description": "The Tab component represents an individual tab control within a tab set.", "name": "CbpTab", "slots": [ { "description": "The default slot holds the tab's label (rendered as a button label), which may include text as well as icons, badges, and tags.", "name": "" } ], "members": [ { "kind": "field", "name": "button", "type": { "text": "HTMLButtonElement" }, "privacy": "private" }, { "kind": "field", "name": "parent", "type": { "text": "HTMLCbpTabsElement" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An `ID`-conformant unique name of the tab; This value should match the corresponding cbp-tab-panel name and links the two together." }, { "kind": "field", "name": "selected", "type": { "text": "boolean" }, "description": "Specifies whether this is the selected tab. Only one tab per tabset should be marked as selected." }, { "kind": "field", "name": "color", "type": { "text": "'danger'" }, "description": "An optional color variant." }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "For tabs without a visible text label (e.g., icon tabs) or a label that is insufficiently unique/descriptive, you may provide accessibility text, which is rendered as an `aria-label` on the tab control (button element)." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleTabClick", "parameters": [ { "name": "e", "default": "undefined" } ], "type": { "text": "handleTabClick(e = undefined) => void" } } ], "attributes": [ { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "selected", "fieldName": "selected", "type": { "text": "boolean" } }, { "name": "color", "fieldName": "color", "type": { "text": "'danger'" } }, { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-tab", "events": [ { "name": "tabLoaded", "type": { "text": "EventEmitter" }, "description": "Emits an event when the tab has been fully loaded for registration with the parent tabset." }, { "name": "tabClicked", "type": { "text": "EventEmitter" }, "description": "Emits a custom even containing an object that describes the tab that was activated." } ], "customElement": true, "modulePath": "src/components/cbp-tab/cbp-tab.tsx", "definitionPath": "src/components/cbp-tab/cbp-tab.tsx" } ], "exports": [ { "kind": "js", "name": "CbpTab", "declaration": { "name": "CbpTab", "module": "src/components/cbp-tab/cbp-tab.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-tab", "declaration": { "name": "CbpTab", "module": "src/components/cbp-tab/cbp-tab.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-tab-panel/cbp-tab-panel.tsx", "declarations": [ { "kind": "class", "description": "The Tab Panel component is a wrapper representing a tabpanel role and containing the content to be progressively disclosed.", "name": "CbpTabPanel", "slots": [ { "description": "The default slot holds the contents of a tab panel, which may include any form of text, markup, and media elements.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "An `ID`-conformant unique name of the tab-panel, applied as an `id` on this tab panel; This value should match the corresponding cbp-tab name and links the two together." }, { "kind": "field", "name": "selected", "type": { "text": "boolean" }, "description": "Specifies if this is the tab panel corresponding to the selected tab and currently visible. This property is managed by the parent cbp-tabs component and does not need to be set manually." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "selected", "fieldName": "selected", "type": { "text": "boolean" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-tab-panel", "events": [], "customElement": true, "modulePath": "src/components/cbp-tab-panel/cbp-tab-panel.tsx", "definitionPath": "src/components/cbp-tab-panel/cbp-tab-panel.tsx" } ], "exports": [ { "kind": "js", "name": "CbpTabPanel", "declaration": { "name": "CbpTabPanel", "module": "src/components/cbp-tab-panel/cbp-tab-panel.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-tab-panel", "declaration": { "name": "CbpTabPanel", "module": "src/components/cbp-tab-panel/cbp-tab-panel.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-table/cbp-table.tsx", "declarations": [ { "kind": "class", "description": "The Table component is a wrapper component encapsulating design system styles for semantic HTML \ntables as well as applying progressive enhancements to the contained table.", "name": "CbpTable", "slots": [ { "description": "The semantic table HTML is placed within the default slot.", "name": "" }, { "description": "Any sort of filters or table controls may be slotted within this named slot.", "name": "cbp-table-toolbar" }, { "description": "For complex tables with many controls and/or pagination, the state of the data may be quantified and described accessibly via an `aria-live` region, which is hidden from view. E.g., Filtered by the term \"test\", ordered by Column 1 ascending, displaying records 100-200 of 1234.", "name": "cbp-table-live-region" } ], "members": [ { "kind": "field", "name": "table", "type": { "text": "HTMLTableElement" }, "privacy": "private" }, { "kind": "field", "name": "columnHeadings", "type": { "text": "HTMLTableCellElement[]" }, "privacy": "private" }, { "kind": "field", "name": "sortableColumns", "type": { "text": "HTMLTableCellElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "wrapper", "type": { "text": "HTMLDivElement" }, "privacy": "private" }, { "kind": "field", "name": "tableWidth", "privacy": "private" }, { "kind": "field", "name": "tableBreakpoint", "privacy": "private" }, { "kind": "field", "name": "liveRegionId", "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "striped", "type": { "text": "'odd' | 'even'" }, "description": "Specifies whether the table is striped, designating whether the colored rows are the odd or even rows (CBP DS standard is even when used)." }, { "kind": "field", "name": "hover", "type": { "text": "'row' | 'cell'" }, "default": "'row'", "description": "Specifies whether the mouse cursor highlights the table row or cell on hover. Defaults to \"row\"." }, { "kind": "field", "name": "columnHover", "type": { "text": "boolean" }, "description": "Specifies whether a hover effect is applied to columns when the column header is hovered. This feature is opt-in." }, { "kind": "field", "name": "overflow", "type": { "text": "'scroll' | 'linearize'" }, "default": "'scroll'", "description": "Specifies whether the table is striped, designating whether the colored rows are the odd or even rows (CBP DS standard is even when used)." }, { "kind": "field", "name": "debug", "type": { "text": "boolean" }, "description": "Turning on debug mode will log some calculations to the console for troubleshooting." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. \nDefault behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "field", "name": "sort", "type": { "text": "{\n columnHeading: HTMLTableCellElement, \n direction: string\n }" }, "privacy": "private" }, { "kind": "method", "name": "addScope", "privacy": "private" }, { "kind": "method", "name": "addHeaderDataAttrs", "privacy": "private" }, { "kind": "method", "name": "makeSortable", "privacy": "private" }, { "kind": "method", "name": "doSort", "parameters": [ { "name": "column", "type": { "text": "number" } }, { "name": "e", "default": "undefined", "type": { "text": "any" } } ], "description": "Updates the UI statefullness (`aria-pressed`, `aria-sort`, and visual arrow icon) and \nemits a custom event to hook up to application logic for the actual sorting", "type": { "text": "doSort(column: number, e: any = undefined) => void" } }, { "kind": "method", "name": "handleResize", "privacy": "private", "parameters": [ { "name": "width" } ] }, { "kind": "method", "name": "doHorizontalScroll", "privacy": "private", "parameters": [ { "name": "dir" } ] }, { "kind": "method", "name": "handleSlotChange", "privacy": "private", "parameters": [ { "name": "e" } ] } ], "attributes": [ { "name": "striped", "fieldName": "striped", "type": { "text": "'odd' | 'even'" } }, { "name": "hover", "fieldName": "hover", "type": { "text": "'row' | 'cell'" } }, { "name": "column-hover", "fieldName": "columnHover", "type": { "text": "boolean" } }, { "name": "overflow", "fieldName": "overflow", "type": { "text": "'scroll' | 'linearize'" } }, { "name": "debug", "fieldName": "debug", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-table", "events": [ { "name": "tableSort", "type": { "text": "EventEmitter" }, "description": "An event emitted when the table is sorted via user interaction activating a table header control." } ], "customElement": true, "modulePath": "src/components/cbp-table/cbp-table.tsx", "definitionPath": "src/components/cbp-table/cbp-table.tsx" } ], "exports": [ { "kind": "js", "name": "CbpTable", "declaration": { "name": "CbpTable", "module": "src/components/cbp-table/cbp-table.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-table", "declaration": { "name": "CbpTable", "module": "src/components/cbp-table/cbp-table.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-tabs/cbp-tabs.tsx", "declarations": [ { "kind": "class", "description": "Tabs are a common UI pattern of progressive disclosure mimicking the real world paradigm of tabbed \nfolders, each with a label and containing their own set of contents. Tabs allow the user to navigate \nmultiple views without leaving the page. This component wraps individual `cbp-tab` components.", "name": "CbpTabs", "slots": [ { "description": "Only `cbp-tab` components shall be slotted within the default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "tabs", "type": { "text": "HTMLCbpTabElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "selectedIndex", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "focusIndex", "type": { "text": "number" }, "privacy": "private", "default": "0" }, { "kind": "field", "name": "observer", "type": { "text": "ResizeObserver" }, "privacy": "private" }, { "kind": "field", "name": "observedEl", "type": { "text": "Element" }, "privacy": "private" }, { "kind": "field", "name": "wrapper", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "previousControl", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "nextControl", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "responsive", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "The accessible label of the tablist. Required unless `aria-labelledby` is specified on the host tag directly." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "initTabset", "type": { "text": "initTabset() => void" } }, { "kind": "method", "name": "setActiveTab", "parameters": [ { "name": "activatedTab" }, { "name": "init", "default": "false" } ], "type": { "text": "setActiveTab(activatedTab, init = false) => void" } }, { "kind": "method", "name": "keyboardNav", "parameters": [ { "name": "key" } ], "type": { "text": "keyboardNav(key) => void" } }, { "kind": "method", "name": "responsiveNav", "parameters": [ { "name": "direction" } ], "type": { "text": "responsiveNav(direction) => void" } } ], "attributes": [ { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-tabs", "events": [], "customElement": true, "modulePath": "src/components/cbp-tabs/cbp-tabs.tsx", "definitionPath": "src/components/cbp-tabs/cbp-tabs.tsx" } ], "exports": [ { "kind": "js", "name": "CbpTabs", "declaration": { "name": "CbpTabs", "module": "src/components/cbp-tabs/cbp-tabs.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-tabs", "declaration": { "name": "CbpTabs", "module": "src/components/cbp-tabs/cbp-tabs.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-tag/cbp-tag.tsx", "declarations": [ { "kind": "class", "description": "The Tag component is a non-interactive visual treatment for text, typically representing labels, keywords, or search terms.", "name": "CbpTag", "slots": [ { "description": "The tag label or content is placed in the default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "color", "type": { "text": "'default' | 'danger' | 'success' | 'warning'" }, "description": "Specifies a tag color variant. Default does not need to be specified." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "color", "fieldName": "color", "type": { "text": "'default' | 'danger' | 'success' | 'warning'" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-tag", "events": [], "customElement": true, "modulePath": "src/components/cbp-tag/cbp-tag.tsx", "definitionPath": "src/components/cbp-tag/cbp-tag.tsx" } ], "exports": [ { "kind": "js", "name": "CbpTag", "declaration": { "name": "CbpTag", "module": "src/components/cbp-tag/cbp-tag.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-tag", "declaration": { "name": "CbpTag", "module": "src/components/cbp-tag/cbp-tag.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-toast/cbp-toast.tsx", "declarations": [ { "kind": "class", "description": "The Toast component displays a brief, non-intrusive message that appears on a user interface to \nprovide feedback about an action or status update.", "name": "CbpToast", "slots": [ { "description": "The toast content is slotted in the default slot.", "name": "" }, { "description": "The large toast icon, usually corresponding to the color variant, is slotted in this named slot.", "name": "cbp-toast-icon" }, { "description": "The toast title is slotted within this named slot.", "name": "cbp-toast-title" }, { "description": "The toast action buttons, including a button to dismiss the toast at a minimum, are placed within this named slot.", "name": "cbp-toast-buttons" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "color", "type": { "text": "'info' | 'danger' | 'success' | 'warning'" }, "default": "'info'", "description": "specifies the color for the toast" }, { "kind": "field", "name": "duration", "type": { "text": "3 | 5 | 10" }, "description": "specifies time in seconds for the toast to be displayed" }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "description": "When set, specifies that the toast is open" }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "color", "fieldName": "color", "type": { "text": "'info' | 'danger' | 'success' | 'warning'" } }, { "name": "duration", "fieldName": "duration", "type": { "text": "3 | 5 | 10" } }, { "name": "open", "fieldName": "open", "type": { "text": "boolean" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-toast", "events": [], "customElement": true, "modulePath": "src/components/cbp-toast/cbp-toast.tsx", "definitionPath": "src/components/cbp-toast/cbp-toast.tsx" } ], "exports": [ { "kind": "js", "name": "CbpToast", "declaration": { "name": "CbpToast", "module": "src/components/cbp-toast/cbp-toast.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-toast", "declaration": { "name": "CbpToast", "module": "src/components/cbp-toast/cbp-toast.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-toggle/cbp-toggle.tsx", "declarations": [ { "kind": "class", "description": "The Toggle component is a visual variant of a Boolean selection form control (checkbox), \nrepresenting an on/off toggle switch.", "name": "CbpToggle", "slots": [ { "description": "The label text followed by the native `input type=\"checkbox\"` control are provided in the default slot.", "name": "" } ], "members": [ { "kind": "field", "name": "formField", "type": { "text": "HTMLInputElement" }, "privacy": "private" }, { "kind": "field", "name": "initialChecked", "type": { "text": "boolean" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "description": "Marks the toggle as checked (on) by default when specified." }, { "kind": "field", "name": "disabled", "type": { "text": "boolean" }, "description": "Marks the toggle in a disabled state when specified." }, { "kind": "field", "name": "hideStatus", "type": { "text": "boolean" }, "description": "Hides the status text after the toggle control when specified." }, { "kind": "field", "name": "statusTextOn", "type": { "text": "string" }, "default": "'On'", "description": "Specifies the status text for the true toggle." }, { "kind": "field", "name": "statusTextOff", "type": { "text": "string" }, "default": "'Off'", "description": "Specifies the status text for the false toggle." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "Optionally set the `name` attribute of the checkbox at the component level, which is passed as part of \nformData (as a key) only when the checkbox is checked. \nNot needed if the slotted checkbox has a name." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "Optionally set the `value` attribute of the checkbox at the component level. \nNot needed if the slotted checkbox has a value." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. \nDefault behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object." }, { "kind": "method", "name": "toggleEvent", "parameters": [ { "name": "e" } ], "type": { "text": "toggleEvent(e) => void" } }, { "kind": "method", "name": "reset", "description": "A custom method to reset the Toggle component to its initial state and value since it does not update \nproperly on a native form reset when the checked state is set via the component property. This method may \nbe called manually, but is automatically called on form reset when using the `cbp-form` component.", "type": { "text": "reset() => void" } }, { "kind": "method", "name": "watchDisabledHandler", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchDisabledHandler(newValue: boolean) => void" } }, { "kind": "method", "name": "watchCheckedHandler", "parameters": [ { "name": "newValue", "type": { "text": "boolean" } } ], "type": { "text": "watchCheckedHandler(newValue: boolean) => void" } } ], "attributes": [ { "name": "checked", "fieldName": "checked", "type": { "text": "boolean" } }, { "name": "disabled", "fieldName": "disabled", "type": { "text": "boolean" } }, { "name": "hide-status", "fieldName": "hideStatus", "type": { "text": "boolean" } }, { "name": "status-text-on", "fieldName": "statusTextOn", "type": { "text": "string" } }, { "name": "status-text-off", "fieldName": "statusTextOff", "type": { "text": "string" } }, { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "value", "fieldName": "value", "type": { "text": "string" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-toggle", "events": [ { "name": "toggleClick", "type": { "text": "EventEmitter" }, "description": "Custom event fired when the control is toggled by the user." } ], "customElement": true, "modulePath": "src/components/cbp-toggle/cbp-toggle.tsx", "definitionPath": "src/components/cbp-toggle/cbp-toggle.tsx" } ], "exports": [ { "kind": "js", "name": "CbpToggle", "declaration": { "name": "CbpToggle", "module": "src/components/cbp-toggle/cbp-toggle.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-toggle", "declaration": { "name": "CbpToggle", "module": "src/components/cbp-toggle/cbp-toggle.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-tooltip/cbp-tooltip.tsx", "declarations": [ { "kind": "class", "description": "The Tooltip component allows for the disclosure of supplemental, non-essential information via a triggering element.", "name": "CbpTooltip", "slots": [ { "description": "The tooltip control label is provided in the default slot.", "name": "" }, { "description": "The tooltip content is placed in this named slot.", "name": "cbp-tooltip-content" } ], "members": [ { "kind": "field", "name": "host", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "When set, specifies that the tooltip is open" }, { "kind": "field", "name": "variant", "type": { "text": "'definition'" }, "description": "used to set styles for the definition link for text controls" }, { "kind": "field", "name": "alignment", "type": { "text": "\"top-left\" | \"top-center\" | \"top-left\" | \"right-top\" | \"right-center\" | \"right-bottom\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\" | \"left-top\" | \"left-center\" | \"left-bottom\"" }, "default": "\"top-center\"", "description": "sets where the tooltip will be displayed and where the caret will be placed" }, { "kind": "field", "name": "fieldId", "type": { "text": "string" }, "description": "Optionally specify the ID of the visible control here, which is used to generate related pattern node IDs and associate everything for accessibility" }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "dismissTooltip", "type": { "text": "dismissTooltip() => void" } }, { "kind": "method", "name": "handleFocusOut", "parameters": [ { "name": "{ key, shiftKey }" } ], "type": { "text": "handleFocusOut({ key, shiftKey }) => void" } }, { "kind": "method", "name": "handleKeyDown", "parameters": [ { "name": "ev", "type": { "text": "KeyboardEvent" } } ], "type": { "text": "handleKeyDown(ev: KeyboardEvent) => void" } }, { "kind": "method", "name": "invertContext", "type": { "text": "invertContext() => void" } } ], "attributes": [ { "name": "open", "fieldName": "open", "type": { "text": "boolean" } }, { "name": "variant", "fieldName": "variant", "type": { "text": "'definition'" } }, { "name": "alignment", "fieldName": "alignment", "type": { "text": "\"top-left\" | \"top-center\" | \"top-left\" | \"right-top\" | \"right-center\" | \"right-bottom\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\" | \"left-top\" | \"left-center\" | \"left-bottom\"" } }, { "name": "field-id", "fieldName": "fieldId", "type": { "text": "string" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-tooltip", "events": [], "customElement": true, "modulePath": "src/components/cbp-tooltip/cbp-tooltip.tsx", "definitionPath": "src/components/cbp-tooltip/cbp-tooltip.tsx" } ], "exports": [ { "kind": "js", "name": "CbpTooltip", "declaration": { "name": "CbpTooltip", "module": "src/components/cbp-tooltip/cbp-tooltip.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-tooltip", "declaration": { "name": "CbpTooltip", "module": "src/components/cbp-tooltip/cbp-tooltip.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-treeview/cbp-treeview.tsx", "declarations": [ { "kind": "class", "description": "", "name": "CbpTreeview", "members": [ { "kind": "field", "name": "childIds", "type": { "text": "string" }, "privacy": "private" }, { "kind": "field", "name": "treeviewItems", "type": { "text": "any" }, "privacy": "private" }, { "kind": "field", "name": "focusIndex", "type": { "text": "number" }, "privacy": "private" }, { "kind": "field", "name": "host", "type": { "text": "HTMLCbpTreeviewElement" } }, { "kind": "field", "name": "selectable", "type": { "text": "boolean" }, "description": "Specifies that the entire tree is selectable. Setting this property at this level overrides all child treeview items." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "Specifies the name for all checkboxes in selectable treeviews, similar to a checklist." }, { "kind": "field", "name": "accessibilityText", "type": { "text": "string" }, "description": "Creates an accessible label for the treeview control if one has not been associated via `aria-labelledby`." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component (and its child items) as it applies to the visual design and whether it \ninverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" }, { "kind": "method", "name": "handleUpdateTreeviewItemParent", "parameters": [ { "name": "e" } ], "type": { "text": "handleUpdateTreeviewItemParent(e) => void" } }, { "kind": "method", "name": "handleKeyPress", "privacy": "private", "parameters": [ { "name": "e" } ] }, { "kind": "method", "name": "setCurrentTreeviewItem", "privacy": "private", "parameters": [ { "name": "i", "default": "0" } ] } ], "attributes": [ { "name": "selectable", "fieldName": "selectable", "type": { "text": "boolean" } }, { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "accessibility-text", "fieldName": "accessibilityText", "type": { "text": "string" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-treeview", "events": [ { "name": "valueChange", "type": { "text": "EventEmitter" }, "description": "A custom event that rolls up all selected values and is emitted when any selectable item is changed. \nOnly selectable items that have both a name and value specified will be included.\nIf all items/checkboxes have the same name, specified by the `cbp-treeview`, then the values are returned as a simple array.\nIf items/checkboxes have individually specified names, values are returned as an array of objects containing name-value pairs." } ], "customElement": true, "modulePath": "src/components/cbp-treeview/cbp-treeview.tsx", "definitionPath": "src/components/cbp-treeview/cbp-treeview.tsx" } ], "exports": [ { "kind": "js", "name": "CbpTreeview", "declaration": { "name": "CbpTreeview", "module": "src/components/cbp-treeview/cbp-treeview.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-treeview", "declaration": { "name": "CbpTreeview", "module": "src/components/cbp-treeview/cbp-treeview.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-treeview-item/cbp-treeview-item.tsx", "declarations": [ { "kind": "class", "description": "", "name": "CbpTreeviewItem", "members": [ { "kind": "field", "name": "parent", "type": { "text": "HTMLCbpTreeviewItemElement" }, "privacy": "private" }, { "kind": "field", "name": "immediateChildren", "type": { "text": "HTMLCbpTreeviewItemElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "allChildren", "type": { "text": "HTMLCbpTreeviewItemElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "checkbox", "type": { "text": "HTMLCbpCheckboxElement" }, "privacy": "private" }, { "kind": "field", "name": "eventTimer", "type": { "text": "number" }, "privacy": "private", "default": "50" }, { "kind": "field", "name": "host", "type": { "text": "HTMLCbpTreeviewItemElement" } }, { "kind": "field", "name": "label", "type": { "text": "string" }, "description": "Specifies the label to be displayed in the treeview item control. For selectable items, this becomes the checkbox label." }, { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Specifies whether the item, if a parent to nested items, is open/expanded." }, { "kind": "field", "name": "selectable", "type": { "text": "boolean" }, "description": "Specifies whether this item is selectable, and if so renders a checkbox within the item.\nThis property can be set on the parent `cbp-treeview` component to be applied to all treeview items." }, { "kind": "field", "name": "name", "type": { "text": "string" }, "description": "Specifies a name for a selectable item's checkbox." }, { "kind": "field", "name": "value", "type": { "text": "string" }, "description": "Specifies the value for a selectable item's checkbox and to pass in the `cbp-treeview`'s custom event emitter." }, { "kind": "field", "name": "checked", "type": { "text": "boolean" }, "default": "false", "description": "Specifies whether a selectable item (and its rendered checkbox) is in a checked state." }, { "kind": "field", "name": "indeterminate", "type": { "text": "boolean" }, "default": "false", "description": "Specifies whether a selectable item (and its rendered checkbox) is in an indeterminate state. This logic is handled internally and should not need to be set manually." }, { "kind": "field", "name": "uid", "type": { "text": "string" }, "description": "Specifies a unique `id` for the treeview item, used to wire up the controls and accessibility features. \nThis property is not required and will auto-generate an `id` if none is specified." }, { "kind": "field", "name": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" }, "description": "Specifies the context of the component as it applies to the visual design and whether it \ninverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified. \nThis property is passed down from the parent `cbp-treeview` and does not need to be set at this level." }, { "kind": "method", "name": "handleCheck", "parameters": [ { "name": "e", "default": "undefined" } ], "type": { "text": "handleCheck(e = undefined) => void" } }, { "kind": "method", "name": "handleUpdateTreeviewItemParent", "parameters": [ { "name": "e" } ], "type": { "text": "handleUpdateTreeviewItemParent(e) => void" } }, { "kind": "method", "name": "toggleOpen", "privacy": "private" } ], "attributes": [ { "name": "label", "fieldName": "label", "type": { "text": "string" } }, { "name": "open", "fieldName": "open", "type": { "text": "boolean" } }, { "name": "selectable", "fieldName": "selectable", "type": { "text": "boolean" } }, { "name": "name", "fieldName": "name", "type": { "text": "string" } }, { "name": "value", "fieldName": "value", "type": { "text": "string" } }, { "name": "checked", "fieldName": "checked" }, { "name": "indeterminate", "fieldName": "indeterminate" }, { "name": "uid", "fieldName": "uid", "type": { "text": "string" } }, { "name": "context", "fieldName": "context", "type": { "text": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'" } } ], "tagName": "cbp-treeview-item", "events": [ { "name": "updateTreeviewItemParent", "type": { "text": "EventEmitter" }, "description": "Custom event emitted to the parent treeview item to re-evaluate its checked/indeterminate state based on actions below it." } ], "customElement": true, "modulePath": "src/components/cbp-treeview-item/cbp-treeview-item.tsx", "definitionPath": "src/components/cbp-treeview-item/cbp-treeview-item.tsx" } ], "exports": [ { "kind": "js", "name": "CbpTreeviewItem", "declaration": { "name": "CbpTreeviewItem", "module": "src/components/cbp-treeview-item/cbp-treeview-item.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-treeview-item", "declaration": { "name": "CbpTreeviewItem", "module": "src/components/cbp-treeview-item/cbp-treeview-item.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-typography/cbp-typography.tsx", "declarations": [ { "kind": "class", "description": "The Typography component encapsulates predefined styles for different kinds of text that makes \nup a website, merging design language with CSS and HTML implementations.", "name": "CbpTypography", "slots": [ { "description": "The content provided in the default slot is wrapped within the specified HTML tag.", "name": "" } ], "members": [ { "kind": "field", "name": "renderedTag", "type": { "text": "HTMLElement" }, "privacy": "private" }, { "kind": "field", "name": "tag", "type": { "text": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'code' | 'pre' | 'div' | 'span'" }, "default": "\"span\"", "description": "Specifies the semantic tag to be rendered." }, { "kind": "field", "name": "variant", "type": { "text": "'masthead-1' | 'masthead-2' | 'heading-xxl' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'heading-xs' | 'body-text' | 'subhead' | 'heading-dialog'" }, "description": "Specifies the visual style of the text regardless of the semantic tag." }, { "kind": "field", "name": "divider", "type": { "text": "'underline' | 'fill'" }, "description": "Specifies whether the text contains visual treatments that act as a divider." }, { "kind": "field", "name": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" }, "description": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified." }, { "kind": "field", "name": "sx", "type": { "text": "any" }, "default": "{}", "description": "Supports adding inline styles as an object" } ], "attributes": [ { "name": "tag", "fieldName": "tag", "type": { "text": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'code' | 'pre' | 'div' | 'span'" } }, { "name": "variant", "fieldName": "variant", "type": { "text": "'masthead-1' | 'masthead-2' | 'heading-xxl' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'heading-xs' | 'body-text' | 'subhead' | 'heading-dialog'" } }, { "name": "divider", "fieldName": "divider", "type": { "text": "'underline' | 'fill'" } }, { "name": "context", "fieldName": "context", "type": { "text": "\"light-inverts\" | \"light-always\" | \"dark-inverts\" | \"dark-always\"" } }, { "name": "sx", "fieldName": "sx", "type": { "text": "any" } } ], "tagName": "cbp-typography", "events": [], "customElement": true, "modulePath": "src/components/cbp-typography/cbp-typography.tsx", "definitionPath": "src/components/cbp-typography/cbp-typography.tsx" } ], "exports": [ { "kind": "js", "name": "CbpTypography", "declaration": { "name": "CbpTypography", "module": "src/components/cbp-typography/cbp-typography.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-typography", "declaration": { "name": "CbpTypography", "module": "src/components/cbp-typography/cbp-typography.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-universal-header/cbp-universal-header.tsx", "declarations": [ { "kind": "class", "description": "The Universal Header component establishes CBP branding, displaying the seal in a standard DHS blue header.", "name": "CbpUniversalHeader", "slots": [ { "description": "The default slot may contain any application-specific markup placed to the right of the CBP seal, usually a list of links.", "name": "" } ], "members": [ { "kind": "field", "name": "logoSrcLg", "type": { "text": "string" }, "default": "\"/assets/images/cbp-header-logo.svg\"", "description": "Fully qualified or relative URL pointing to the larger SVG containing the CPB seal with text." }, { "kind": "field", "name": "logoSrcSm", "type": { "text": "string" }, "default": "\"/assets/images/cbp-seal.svg\"", "description": "Fully qualified or relative URL pointing to the plain SVG version of the CPB seal for smaller screens (\"CBP\" text is supplied via CSS automatically)." } ], "attributes": [ { "name": "logo-src-lg", "fieldName": "logoSrcLg", "type": { "text": "string" } }, { "name": "logo-src-sm", "fieldName": "logoSrcSm", "type": { "text": "string" } } ], "tagName": "cbp-universal-header", "events": [], "customElement": true, "modulePath": "src/components/cbp-universal-header/cbp-universal-header.tsx", "definitionPath": "src/components/cbp-universal-header/cbp-universal-header.tsx" } ], "exports": [ { "kind": "js", "name": "CbpUniversalHeader", "declaration": { "name": "CbpUniversalHeader", "module": "src/components/cbp-universal-header/cbp-universal-header.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-universal-header", "declaration": { "name": "CbpUniversalHeader", "module": "src/components/cbp-universal-header/cbp-universal-header.tsx" } } ] }, { "kind": "javascript-module", "path": "src/components/cbp-usa-banner/cbp-usa-banner.tsx", "declarations": [ { "kind": "class", "description": "The \"USA Banner\" is similar to the U.S. Web Design System \"banner\" component, intended to establish trust \nas a common identifier on public-facing government sites.", "name": "CbpUsaBanner", "members": [ { "kind": "field", "name": "open", "type": { "text": "boolean" }, "default": "false", "description": "Specifies that the banner is open. Primarily used for internal component logic." }, { "kind": "method", "name": "handleClick", "type": { "text": "handleClick() => void" } } ], "attributes": [ { "name": "open", "fieldName": "open", "type": { "text": "boolean" } } ], "tagName": "cbp-usa-banner", "events": [], "customElement": true, "modulePath": "src/components/cbp-usa-banner/cbp-usa-banner.tsx", "definitionPath": "src/components/cbp-usa-banner/cbp-usa-banner.tsx" } ], "exports": [ { "kind": "js", "name": "CbpUsaBanner", "declaration": { "name": "CbpUsaBanner", "module": "src/components/cbp-usa-banner/cbp-usa-banner.tsx" } }, { "kind": "custom-element-definition", "name": "cbp-usa-banner", "declaration": { "name": "CbpUsaBanner", "module": "src/components/cbp-usa-banner/cbp-usa-banner.tsx" } } ] } ] }