@cbpds/web-components/dist/cjs/cbp-list.cjs.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');

const cbpListCss = ":root{--cbp-list-padding:var(--cbp-space-4x);--cbp-list-font-size:var(--cbp-font-size-body);--cbp-list-item-line-height:var(--cbp-line-height-sm);--cbp-list-item-padding-block:var(--cbp-space-half-x);--cbp-list-item-color:var(--cbp-color-text-darkest);--cbp-list-item-color-dark:var(--cbp-color-text-lightest);--cbp-link-list-gutter:var(--cbp-space-9x);--cbp-link-list-icon-margin:calc(var(--cbp-space-5x) * -1);--cbp-link-list-icon-color:var(--cbp-color-interactive-primary-dark);--cbp-link-list-icon-color-dark:var(--cbp-color-interactive-primary-dark);--cbp-desc-list-color:var(--cbp-color-text-darker);--cbp-desc-list-color-dark:var(--cbp-color-text-lighter);--cbp-desc-list-description-color:var(--cbp-color-text-darkest);--cbp-desc-list-description-color-dark:var(--cbp-color-text-lightest)}[data-cbp-theme=light] cbp-list[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-list:not([context=dark-inverts]):not([context=light-always]){--cbp-list-item-color:var(--cbp-list-item-color-dark);--cbp-link-list-icon-color:var(--cbp-link-list-icon-color-dark);--cbp-desc-list-color:var(--cbp-desc-list-color-dark);--cbp-desc-list-description-color:var(--cbp-desc-list-description-color-dark)}cbp-list{font-size:var(--cbp-list-font-size)}cbp-list li{color:var(--cbp-list-item-color);font-weight:var(--cbp-font-weight-bold);line-height:var(--cbp-list-item-line-height);padding-block:var(--cbp-list-item-padding-block)}cbp-list[size=large]{--cbp-list-font-size:var(--cbp-font-size-heading-sm);--cbp-list-item-line-height:var(--cbp-line-height-md);--cbp-list-item-padding-block:var(--cbp-space-1x)}cbp-list ol,cbp-list ul{padding-inline-start:var(--cbp-list-padding)}cbp-list ul>li{list-style-type:disc}cbp-list ul>li ul li{list-style-type:\"- \"}cbp-list ol>li{list-style-type:decimal}cbp-list ol>li ol li{list-style-type:upper-alpha}cbp-list ol>li ol li ol{counter-reset:count}cbp-list ol>li ol li ol li{counter-increment:count}cbp-list ol>li ol li ol li::marker{content:counter(count, decimal) \") \"}cbp-list ol>li ol li ol li ol{counter-reset:count}cbp-list ol>li ol li ol li ol li{counter-increment:count}cbp-list ol>li ol li ol li ol li::marker{content:counter(count, lower-alpha) \". \"}cbp-list[variant=unstyled] ul,cbp-list[variant=unstyled] ol{padding-inline:0}cbp-list[variant=unstyled] ul li,cbp-list[variant=unstyled] ol li{list-style-type:none}cbp-list[variant=link] ul{padding-inline-start:var(--cbp-link-list-gutter)}cbp-list[variant=link] ul li{list-style-type:none}cbp-list[variant=link] ul li cbp-icon{margin-inline-start:var(--cbp-link-list-icon-margin);margin-inline-end:var(--cbp-space-1x)}cbp-list[variant=link][size=large]{--cbp-link-list-gutter:var(--cbp-space-11x);--cbp-link-list-icon-margin:calc(var(--cbp-space-6x) * -1);--cbp-list-item-line-height:var(--cbp-line-height-sm);--cbp-list-item-padding-block:var(--cbp-space-1x)}cbp-list[variant=icon]{padding-inline-start:var(--cbp-space-8x);font-size:var(--cbp-font-size-heading-sm);--cbp-list-padding:var(--cbp-space-6x)}cbp-list[variant=icon] li{list-style-type:none}cbp-list[variant=icon] li cbp-icon{margin-inline-start:calc(var(--cbp-space-4x) * -1);padding-inline-end:var(--cbp-space-3x)}cbp-list dl{padding-inline-start:var(--cbp-space-12x)}cbp-list dl dt{color:var(--cbp-desc-list-color);font-size:var(--cbp-font-size-heading-sm);font-weight:var(--cbp-font-weight-medium);line-height:var(--cbp-line-height-sm);padding-block-end:var(--cbp-space-2x)}cbp-list dl dt cbp-icon{margin-inline-start:calc(var(--cbp-space-9x) * -1);padding-inline-end:var(--cbp-space-3x)}cbp-list dl dd{color:var(--cbp-desc-list-description-color);line-height:var(--cbp-line-height-xs);padding-block-end:var(--cbp-space-6x)}";
const CbpListStyle0 = cbpListCss;

const CbpList = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.variant = undefined;
        this.tag = 'ul';
        this.size = 'normal';
        this.accessibilityText = undefined;
        this.sx = {};
        this.context = undefined;
    }
    componentDidLoad() {
        if (typeof this.sx == 'string') {
            this.sx = JSON.parse(this.sx) || {};
        }
        utils.setCSSProps(this.renderedTag, Object.assign({}, this.sx));
    }
    render() {
        const Tag = this.tag;
        return (index.h(index.Host, { key: '508de0dd5dbcf7f09cc98ae4fc869c7fdb6fb905' }, index.h(Tag, { key: '3443808040cd86c1d0145fc9ddfcd5390b61d45f', ref: (el) => this.renderedTag = el, "aria-label": this.accessibilityText }, index.h("slot", { key: '21a8ebbfbd35e3e52062b6c85f8d620c00f5131a' }))));
    }
    get host() { return index.getElement(this); }
};
CbpList.style = CbpListStyle0;

exports.cbp_list = CbpList;

//# sourceMappingURL=cbp-list.cjs.entry.js.map