dap-design-system 0.62.3 → 0.63.0

package/dist/components/typography/typography.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.component.js","sources":["../../../src/components/typography/typography.component.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport { clsx } from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { anchorClass } from '@/common/const'\n\nimport { Common, Size } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/typography.scss?inline'\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'body'\n  | 'caption'\n  | 'description'\n\nexport type TypographySize =\n  | Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>\n  | null\n  | undefined\n\ntype HeadingProps = {\n  variant: Extract<TypographyVariant, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>\n  size?: TypographySize\n}\n\ntype BodyProps = {\n  variant: Extract<TypographyVariant, 'body'>\n  size: TypographySize\n}\n\ntype CaptionProps = {\n  variant: Extract<TypographyVariant, 'caption'>\n  size: never\n}\n\ntype DescriptionProps = {\n  variant: Extract<TypographyVariant, 'description'>\n  size: Extract<TypographySize, 'lg' | 'sm'>\n}\n\nexport type TypographyProps =\n  | HeadingProps\n  | BodyProps\n  | CaptionProps\n  | DescriptionProps\n\nconst typographyStyles = cva('typography', {\n  variants: {\n    variant: {\n      h1: 'heading typography-h1',\n      h2: 'heading typography-h2',\n      h3: 'heading typography-h3',\n      h4: 'heading typography-h4',\n      h5: 'heading typography-h5',\n      h6: 'heading typography-h6',\n      body: 'typography-body',\n      caption: 'typography-caption',\n      description: 'typography-description',\n    },\n    size: {\n      lg: 'typography-size-lg',\n      md: 'typography-size-md',\n      sm: 'typography-size-sm',\n      xs: 'typography-size-xs',\n    },\n    inverted: {\n      true: 'typography-inverted',\n    },\n  },\n  compoundVariants: [\n    {\n      variant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n      class: '',\n    },\n    {\n      variant: 'description',\n      size: 'lg',\n      class: 'typography-description-lg',\n    },\n    {\n      variant: 'description',\n      size: 'sm',\n      class: 'typography-description-sm',\n    },\n    {\n      variant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n      inverted: true,\n      class: 'typography-heading-inverted',\n    },\n    {\n      variant: 'description',\n      inverted: true,\n      class: 'typography-description-inverted',\n    },\n    {\n      variant: 'body',\n      inverted: true,\n      class: 'typography-inverted',\n    },\n    {\n      variant: 'caption',\n      inverted: true,\n      class: 'typography-caption-inverted',\n    },\n  ],\n})\n\n/**\n * @element dap-ds-typography\n * @summary Typography is used to display text in different styles.\n * @title - Typography\n *\n * @slot default - The content of the typography.\n *\n * @csspart base - The main typography container.\n *\n * @cssproperty --dds-text-color - The color of the typography. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-text-color-inverted - The color of the typography in inverted mode. (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-text-heading-color - The color of the heading typography. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-text-heading-color-inverted - The color of the heading typography in inverted mode. (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-text-description-color - The color of the subtle typography. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-text-description-color-inverted - The color of the subtle typography in inverted mode. (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-text-font-family - The font family of the typography. (default: var(--font-family))\n * @cssproperty --dds-text-font-weight-medium - The font weight of the medium typography. (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-text-font-weight-bold - The font weight of the bold typography. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-text-font-size-h1 - The font size of the h1 typography. (default: var(--dds-font-7xl))\n * @cssproperty --dds-text-font-size-h2 - The font size of the h2 typography. (default: var(--dds-font-4xl))\n * @cssproperty --dds-text-font-size-h3 - The font size of the h3 typography. (default: var(--dds-font-2xl))\n * @cssproperty --dds-text-font-size-h4 - The font size of the h4 typography. (default: var(--dds-font-xl))\n * @cssproperty --dds-text-font-size-h5 - The font size of the h5 typography. (default: var(--dds-font-lg))\n * @cssproperty --dds-text-font-size-h6 - The font size of the h6 typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-body - The font size of the body typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-caption - The font size of the caption typography. (default: var(--dds-font-xs))\n * @cssproperty --dds-text-font-size-description - The font size of the description typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-description-lg - The font size of the description lg typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-description-sm - The font size of the description sm typography. (default: var(--dds-font-sm))\n * @cssproperty --dds-text-font-size-lg - The font size of the lg typography. (default: var(--dds-font-lg))\n * @cssproperty --dds-text-font-size-md - The font size of the md typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-sm - The font size of the sm typography. (default: var(--dds-font-sm))\n * @cssproperty --dds-text-font-size-xs - The font size of the xs typography. (default: var(--dds-font-xs))\n */\nexport default class DapDSTypography\n  extends DdsElement\n  implements Common<TypographyProps>\n{\n  static tagName = 'dap-ds-typography'\n\n  /**\n   * The variant of the typography.\n   * @type {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'caption' | 'description'}\n   */\n  @property({ reflect: true }) variant!: TypographyVariant\n  /**\n   * The size of the typography.\n   * @type {'xs' | 'sm' | 'md' | 'lg'}\n   */\n  @property({ reflect: true }) size?: TypographySize\n  /**\n   * The html element of the body typography.\n   */\n  @property({ reflect: true }) bodyAs?: string\n  /** The custom class of the typography. */\n  @property() customClass?: string\n  /** Whether the typography is an anchor for the TOC component. */\n  @property({ type: Boolean, reflect: true }) anchor = false\n  /** Whether the typography is inverted. */\n  @property({ type: Boolean, reflect: true }) inverted = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    if (this.elementId) {\n      this.setAttribute('id', this.elementId)\n    }\n  }\n\n  private get elementId() {\n    return this.id ? this.id : undefined\n  }\n\n  private _renderHeading(\n    elementId: string | undefined,\n    customClass: string,\n    variant: TypographyVariant,\n    size: TypographySize,\n    inverted: boolean,\n  ) {\n    return html`\n      <${unsafeStatic(variant)}\n        part=\"base\"\n        id=${ifDefined(elementId)}\n        class=${clsx(\n          typographyStyles({ variant, size, inverted }),\n          { [anchorClass]: this.anchor },\n          customClass,\n        )}\n      >\n       <slot></slot>\n      </${unsafeStatic(variant)}>\n    `\n  }\n\n  private _renderBody(\n    elementId: string | undefined,\n    customClass: string,\n    size: TypographySize,\n    bodyAs: string,\n    inverted: boolean,\n  ) {\n    return html`\n      <${unsafeStatic(bodyAs)}\n        id=${ifDefined(elementId)}\n        part=\"base\"\n        class=${clsx(typographyStyles({ variant: 'body', size, inverted }), customClass)}\n      >\n        <slot></slot>\n      </${unsafeStatic(bodyAs)}>\n    `\n  }\n\n  private _renderCaption(\n    elementId: string | undefined,\n    customClass: string,\n    inverted: boolean,\n  ) {\n    return html`\n      <span\n        id=${ifDefined(elementId)}\n        part=\"base\"\n        class=${clsx(\n          typographyStyles({ variant: 'caption', inverted }),\n          customClass,\n        )}>\n        <slot></slot>\n      </span>\n    `\n  }\n\n  private _renderDescription(\n    elementId: string | undefined,\n    customClass: string,\n    size: TypographySize,\n    inverted: boolean,\n  ) {\n    return html`\n      <span\n        id=${ifDefined(elementId)}\n        part=\"base\"\n        class=${clsx(\n          typographyStyles({ variant: 'description', size, inverted }),\n          customClass,\n        )}>\n        <slot></slot>\n      </span>\n    `\n  }\n\n  private _getElement(\n    elementId: string | undefined,\n    variant: TypographyVariant,\n    size: TypographySize,\n    customClass: string = '',\n    bodyAs: string = 'p',\n    inverted: boolean = false,\n  ) {\n    switch (variant) {\n      case 'h1':\n      case 'h2':\n      case 'h3':\n      case 'h4':\n      case 'h5':\n      case 'h6':\n        return this._renderHeading(\n          elementId,\n          customClass,\n          variant,\n          size,\n          inverted,\n        )\n      case 'body':\n        return this._renderBody(elementId, customClass, size, bodyAs, inverted)\n      case 'caption':\n        return this._renderCaption(elementId, customClass, inverted)\n      case 'description':\n        return this._renderDescription(elementId, customClass, size, inverted)\n      default:\n        return null\n    }\n  }\n\n  render() {\n    return this._getElement(\n      this.elementId,\n      this.variant,\n      this.size,\n      this.customClass,\n      this.bodyAs,\n      this.inverted,\n    )\n  }\n}\n"],"names":["typographyStyles","cva","_DapDSTypography","DdsElement","_changedProperties","elementId","customClass","variant","size","inverted","html","unsafeStatic","ifDefined","clsx","anchorClass","bodyAs","unsafeCSS","styles","DapDSTypography","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;AAuDA,MAAMA,IAAmBC,EAAI,cAAc;AAAA,EACzC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EAEV;AAAA,EACA,kBAAkB;AAAA,IAChB;AAAA,MACE,SAAS,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,MAC5C,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,SAAS,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,IAAI;AAAA,MAC5C,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,CAAC,GAoCoBC,IAArB,MAAqBA,UACXC,EAEV;AAAA,EAHA,cAAA;AAAA,UAAA,GAAA,SAAA,GAuBuD,KAAA,SAAA,IAEE,KAAA,WAAA;AAAA,EAAA;AAAA,EAI7C,aACRC,GACM;AACN,UAAM,aAAaA,CAAkB,GACjC,KAAK,aACF,KAAA,aAAa,MAAM,KAAK,SAAS;AAAA,EACxC;AAAA,EAGF,IAAY,YAAY;AACf,WAAA,KAAK,KAAK,KAAK,KAAK;AAAA,EAAA;AAAA,EAGrB,eACNC,GACAC,GACAC,GACAC,GACAC,GACA;AACO,WAAAC;AAAAA,SACFC,EAAaJ,CAAO,CAAC;AAAA;AAAA,aAEjBK,EAAUP,CAAS,CAAC;AAAA,gBACjBQ;AAAA,MACNb,EAAiB,EAAE,SAAAO,GAAS,MAAAC,GAAM,UAAAC,GAAU;AAAA,MAC5C,EAAE,CAACK,CAAW,GAAG,KAAK,OAAO;AAAA,MAC7BR;AAAA,IACD,CAAA;AAAA;AAAA;AAAA,UAGCK,EAAaJ,CAAO,CAAC;AAAA;AAAA,EAAA;AAAA,EAIrB,YACNF,GACAC,GACAE,GACAO,GACAN,GACA;AACO,WAAAC;AAAAA,SACFC,EAAaI,CAAM,CAAC;AAAA,aAChBH,EAAUP,CAAS,CAAC;AAAA;AAAA,gBAEjBQ,EAAKb,EAAiB,EAAE,SAAS,QAAQ,MAAAQ,GAAM,UAAAC,GAAU,GAAGH,CAAW,CAAC;AAAA;AAAA;AAAA,UAG9EK,EAAaI,CAAM,CAAC;AAAA;AAAA,EAAA;AAAA,EAIpB,eACNV,GACAC,GACAG,GACA;AACO,WAAAC;AAAAA;AAAAA,aAEEE,EAAUP,CAAS,CAAC;AAAA;AAAA,gBAEjBQ;AAAA,MACNb,EAAiB,EAAE,SAAS,WAAW,UAAAS,GAAU;AAAA,MACjDH;AAAA,IAAA,CACD;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAMC,mBACND,GACAC,GACAE,GACAC,GACA;AACO,WAAAC;AAAAA;AAAAA,aAEEE,EAAUP,CAAS,CAAC;AAAA;AAAA,gBAEjBQ;AAAA,MACNb,EAAiB,EAAE,SAAS,eAAe,MAAAQ,GAAM,UAAAC,GAAU;AAAA,MAC3DH;AAAA,IAAA,CACD;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAMC,YACND,GACAE,GACAC,GACAF,IAAsB,IACtBS,IAAiB,KACjBN,IAAoB,IACpB;AACA,YAAQF,GAAS;AAAA,MACf,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACH,eAAO,KAAK;AAAA,UACVF;AAAA,UACAC;AAAA,UACAC;AAAA,UACAC;AAAA,UACAC;AAAA,QACF;AAAA,MACF,KAAK;AACH,eAAO,KAAK,YAAYJ,GAAWC,GAAaE,GAAMO,GAAQN,CAAQ;AAAA,MACxE,KAAK;AACH,eAAO,KAAK,eAAeJ,GAAWC,GAAaG,CAAQ;AAAA,MAC7D,KAAK;AACH,eAAO,KAAK,mBAAmBJ,GAAWC,GAAaE,GAAMC,CAAQ;AAAA,MACvE;AACS,eAAA;AAAA,IAAA;AAAA,EACX;AAAA,EAGF,SAAS;AACP,WAAO,KAAK;AAAA,MACV,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IACP;AAAA,EAAA;AAEJ;AA9JEP,EAAO,UAAU,qBAuBDA,EAAA,SAASc,EAAUC,CAAM;AA3B3C,IAAqBC,IAArBhB;AAU+BiB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAVRF,EAUU,WAAA,SAAA;AAKAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAfRF,EAeU,WAAA,MAAA;AAIAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAnBRF,EAmBU,WAAA,QAAA;AAEjBC,EAAA;AAAA,EAAXC,EAAS;AAAA,GArBSF,EAqBP,WAAA,aAAA;AAEgCC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAvBvBF,EAuByB,WAAA,QAAA;AAEAC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAzBvBF,EAyByB,WAAA,UAAA;"}
+{"version":3,"file":"typography.component.js","sources":["../../../src/components/typography/typography.component.ts"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport { clsx } from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { anchorClass } from '@/common/const'\n\nimport { Common, Size } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './_styles/typography.scss?inline'\n\nexport type TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'body'\n  | 'caption'\n  | 'description'\n\nexport type TypographySize =\n  | Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>\n  | null\n  | undefined\n\ntype HeadingProps = {\n  variant: Extract<TypographyVariant, 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>\n  size?: TypographySize\n}\n\ntype BodyProps = {\n  variant: Extract<TypographyVariant, 'body'>\n  size: TypographySize\n}\n\ntype CaptionProps = {\n  variant: Extract<TypographyVariant, 'caption'>\n  size: never\n}\n\ntype DescriptionProps = {\n  variant: Extract<TypographyVariant, 'description'>\n  size: Extract<TypographySize, 'lg' | 'sm'>\n}\n\nexport type TypographyProps =\n  | HeadingProps\n  | BodyProps\n  | CaptionProps\n  | DescriptionProps\n\nconst typographyStyles = cva('typography', {\n  variants: {\n    variant: {\n      h1: 'heading typography-h1',\n      h2: 'heading typography-h2',\n      h3: 'heading typography-h3',\n      h4: 'heading typography-h4',\n      h5: 'heading typography-h5',\n      h6: 'heading typography-h6',\n      body: 'typography-body',\n      caption: 'typography-caption',\n      description: 'typography-description',\n    },\n    size: {\n      lg: 'typography-size-lg',\n      md: 'typography-size-md',\n      sm: 'typography-size-sm',\n      xs: 'typography-size-xs',\n    },\n    inverted: {\n      true: 'typography-inverted',\n    },\n  },\n  compoundVariants: [\n    {\n      variant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n      class: '',\n    },\n    {\n      variant: 'description',\n      size: 'lg',\n      class: 'typography-description-lg',\n    },\n    {\n      variant: 'description',\n      size: 'sm',\n      class: 'typography-description-sm',\n    },\n    {\n      variant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n      inverted: true,\n      class: 'typography-heading-inverted',\n    },\n    {\n      variant: 'description',\n      inverted: true,\n      class: 'typography-description-inverted',\n    },\n    {\n      variant: 'body',\n      inverted: true,\n      class: 'typography-inverted',\n    },\n    {\n      variant: 'caption',\n      inverted: true,\n      class: 'typography-caption-inverted',\n    },\n  ],\n})\n\n/**\n * @element dap-ds-typography\n * @summary Typography is used to display text in different styles.\n * @title - Typography\n *\n * @slot default - The content of the typography.\n *\n * @csspart base - The main typography container.\n *\n * @cssproperty --dds-text-color - The color of the typography. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-text-color-inverted - The color of the typography in inverted mode. (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-text-heading-color - The color of the heading typography. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-text-heading-color-inverted - The color of the heading typography in inverted mode. (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-text-description-color - The color of the subtle typography. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-text-description-color-inverted - The color of the subtle typography in inverted mode. (default: var(--dds-text-neutral-on-inverted))\n * @cssproperty --dds-text-font-family - The font family of the typography. (default: var(--font-family))\n * @cssproperty --dds-text-font-weight-medium - The font weight of the medium typography. (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-text-font-weight-bold - The font weight of the bold typography. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-text-font-size-h1 - The font size of the h1 typography. (default: var(--dds-font-7xl))\n * @cssproperty --dds-text-font-size-h2 - The font size of the h2 typography. (default: var(--dds-font-4xl))\n * @cssproperty --dds-text-font-size-h3 - The font size of the h3 typography. (default: var(--dds-font-2xl))\n * @cssproperty --dds-text-font-size-h4 - The font size of the h4 typography. (default: var(--dds-font-xl))\n * @cssproperty --dds-text-font-size-h5 - The font size of the h5 typography. (default: var(--dds-font-lg))\n * @cssproperty --dds-text-font-size-h6 - The font size of the h6 typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-body - The font size of the body typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-caption - The font size of the caption typography. (default: var(--dds-font-xs))\n * @cssproperty --dds-text-font-size-description - The font size of the description typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-description-lg - The font size of the description lg typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-description-sm - The font size of the description sm typography. (default: var(--dds-font-sm))\n * @cssproperty --dds-text-font-size-lg - The font size of the lg typography. (default: var(--dds-font-lg))\n * @cssproperty --dds-text-font-size-md - The font size of the md typography. (default: var(--dds-font-base))\n * @cssproperty --dds-text-font-size-sm - The font size of the sm typography. (default: var(--dds-font-sm))\n * @cssproperty --dds-text-font-size-xs - The font size of the xs typography. (default: var(--dds-font-xs))\n */\nexport default class DapDSTypography\n  extends DdsElement\n  implements Common<TypographyProps>\n{\n  static tagName = 'dap-ds-typography'\n\n  /**\n   * The variant of the typography.\n   * @type {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'caption' | 'description'}\n   */\n  @property({ reflect: true }) variant!: TypographyVariant\n  /**\n   * The size of the typography.\n   * @type {'xs' | 'sm' | 'md' | 'lg'}\n   */\n  @property({ reflect: true }) size?: TypographySize\n  /**\n   * The html element of the body typography.\n   */\n  @property({ reflect: true }) bodyAs?: string\n  /** The custom class of the typography. */\n  @property() customClass?: string\n  /** Whether the typography is an anchor for the TOC component. */\n  @property({ type: Boolean, reflect: true }) anchor = false\n  /** Whether the typography is inverted. */\n  @property({ type: Boolean, reflect: true }) inverted = false\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    if (this.elementId) {\n      this.setAttribute('id', this.elementId)\n    }\n  }\n\n  private get elementId() {\n    return this.id ? this.id : undefined\n  }\n\n  private _renderHeading(\n    elementId: string | undefined,\n    customClass: string,\n    variant: TypographyVariant,\n    size: TypographySize,\n    inverted: boolean,\n  ) {\n    return html`\n      <${unsafeStatic(variant)}\n        part=\"base\"\n        id=${ifDefined(elementId)}\n        class=${clsx(\n          typographyStyles({ variant, size, inverted }),\n          { [anchorClass]: this.anchor },\n          customClass,\n        )}\n      >\n       <slot></slot>\n      </${unsafeStatic(variant)}>\n    `\n  }\n\n  private _renderBody(\n    elementId: string | undefined,\n    customClass: string,\n    size: TypographySize,\n    bodyAs: string,\n    inverted: boolean,\n  ) {\n    return html`\n      <${unsafeStatic(bodyAs)}\n        id=${ifDefined(elementId)}\n        part=\"base\"\n        class=${clsx(typographyStyles({ variant: 'body', size, inverted }), customClass)}\n      >\n        <slot></slot>\n      </${unsafeStatic(bodyAs)}>\n    `\n  }\n\n  private _renderCaption(\n    elementId: string | undefined,\n    customClass: string,\n    inverted: boolean,\n  ) {\n    return html`\n      <span\n        id=${ifDefined(elementId)}\n        part=\"base\"\n        class=${clsx(\n          typographyStyles({ variant: 'caption', inverted }),\n          customClass,\n        )}>\n        <slot></slot>\n      </span>\n    `\n  }\n\n  private _renderDescription(\n    elementId: string | undefined,\n    customClass: string,\n    size: TypographySize,\n    inverted: boolean,\n  ) {\n    return html`\n      <span\n        id=${ifDefined(elementId)}\n        part=\"base\"\n        class=${clsx(\n          typographyStyles({ variant: 'description', size, inverted }),\n          customClass,\n        )}>\n        <slot></slot>\n      </span>\n    `\n  }\n\n  private _getElement(\n    elementId: string | undefined,\n    variant: TypographyVariant,\n    size: TypographySize,\n    customClass: string = '',\n    bodyAs: string = 'p',\n    inverted: boolean = false,\n  ) {\n    switch (variant) {\n      case 'h1':\n      case 'h2':\n      case 'h3':\n      case 'h4':\n      case 'h5':\n      case 'h6':\n        return this._renderHeading(\n          elementId,\n          customClass,\n          variant,\n          size,\n          inverted,\n        )\n      case 'body':\n        return this._renderBody(elementId, customClass, size, bodyAs, inverted)\n      case 'caption':\n        return this._renderCaption(elementId, customClass, inverted)\n      case 'description':\n        return this._renderDescription(elementId, customClass, size, inverted)\n      default:\n        return null\n    }\n  }\n\n  render() {\n    return this._getElement(\n      this.elementId,\n      this.variant,\n      this.size,\n      this.customClass,\n      this.bodyAs,\n      this.inverted,\n    )\n  }\n}\n"],"names":["typographyStyles","cva","_DapDSTypography","DdsElement","_changedProperties","elementId","customClass","variant","size","inverted","html","unsafeStatic","ifDefined","clsx","anchorClass","bodyAs","unsafeCSS","styles","DapDSTypography","__decorateClass","property"],"mappings":"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"}

package/dist/components.d.ts

@@ -8,6 +8,9 @@ export { default as DapDSBanner } from './components/banner/banner';
 export { default as DapDSBreadcrumb } from './components/breadcrumb/breadcrumb';
 export { default as DapDSBreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item';
 export { default as DapDSButton } from './components/button/button';
+export { default as DapDSButtonGroup } from './components/button-group/button-group';
+export { default as DapDSButtonGroupSeparator } from './components/button-group/button-group-separator';
+export { default as DapDSButtonGroupText } from './components/button-group/button-group-text';
 export { default as DapDSCalendar } from './components/calendar/calendar';
 export { default as DapDSCalendarCell } from './components/calendar/calendar-cell';
 export { default as DapDSCallout } from './components/callout/callout';

package/dist/components.js

@@ -8,6 +8,9 @@ import "./components/banner/banner.js";
 import "./components/breadcrumb/breadcrumb.js";
 import "./components/breadcrumb-item/breadcrumb-item.js";
 import "./components/button/button.js";
+import "./components/button-group/button-group.js";
+import "./components/button-group/button-group-separator.js";
+import "./components/button-group/button-group-text.js";
 import "./components/calendar/calendar.js";
 import "./components/calendar/calendar-cell.js";
 import "./components/callout/callout.js";
@@ -93,201 +96,207 @@ import "./components/tooltip/tooltip.js";
 import "./components/tray/tray.js";
 import "./components/typography/typography.js";
 import "./localization/localization.js";
-import { anchorClass as qa } from "./common/const.js";
-import { FileError as Ja, HttpError as Ka } from "./common/errors.js";
-import { default as Ua } from "./components/accordion/accordion.component.js";
-import { default as Xa } from "./components/accordion-group/accordion-group.component.js";
-import { default as _a } from "./components/anchor-heading/anchor-heading.component.js";
-import { default as ao } from "./components/avatar/avatar.component.js";
-import { default as to } from "./components/avatar-group/avatar-group.component.js";
-import { default as po } from "./components/badge/badge.component.js";
-import { default as mo } from "./components/banner/banner.component.js";
-import { default as Do } from "./components/breadcrumb/breadcrumb.component.js";
-import { default as lo } from "./components/breadcrumb-item/breadcrumb-item.component.js";
-import { default as So } from "./components/button/button.component.js";
-import { default as xo } from "./components/calendar/calendar.component.js";
-import { default as co } from "./components/calendar/calendar-cell.component.js";
-import { default as Io } from "./components/callout/callout.component.js";
-import { default as To } from "./components/card/card.component.js";
-import { default as Bo } from "./components/card/card-actions.component.js";
-import { default as ko } from "./components/card/card-content.component.js";
-import { default as vo } from "./components/card/card-image.component.js";
-import { default as Ao } from "./components/card/card-subtitle.component.js";
-import { default as No } from "./components/card/card-title.component.js";
-import { default as Oo } from "./components/checkbox/checkbox.component.js";
-import { default as yo } from "./components/chip/chip.component.js";
-import { default as Ro } from "./components/code-puncher/code-puncher.component.js";
-import { default as Eo } from "./components/code-puncher/code-puncher-slot.component.js";
-import { default as Zo } from "./components/combobox/combobox.component.js";
-import { default as qo } from "./components/command/command.component.js";
-import { default as Jo } from "./components/command/command-group.component.js";
-import { default as Qo } from "./components/command/command-item.component.js";
-import { default as Vo } from "./components/content-switcher/content-switcher.component.js";
-import { default as Yo } from "./components/content-switcher/content-switcher-item.component.js";
-import { default as $o } from "./components/copybox-input/copybox-input.component.js";
-import { default as ot } from "./components/dap-badge/dap-badge.component.js";
-import { default as rt } from "./components/datatable/datatable.component.js";
-import { default as et } from "./components/datepicker/datepicker.component.js";
-import { default as ft } from "./components/divider/divider.component.js";
-import { default as it } from "./components/feedback/feedback.component.js";
-import { default as dt } from "./components/file-input/file-input.component.js";
-import { default as St } from "./components/file-input/file-input-list.component.js";
-import { default as xt } from "./components/file-input/file-input-list-item.component.js";
-import { default as ct } from "./components/form/form-label/form-label.component.js";
-import { default as It } from "./components/form/input-group/input-group.component.js";
-import { default as Tt } from "./components/form/radio-group/radio-group.component.js";
-import { default as Bt } from "./components/icon/icon.component.js";
-import { default as kt } from "./components/icon-button/icon-button.component.js";
-import { default as vt } from "./components/image-zoom/image-zoom.component.js";
-import { default as At } from "./components/input/input.component.js";
-import { default as Nt } from "./components/label/label.component.js";
-import { default as Ot } from "./components/link/link.component.js";
-import { default as yt } from "./components/list-item/list-item.component.js";
-import { default as Rt } from "./components/modal/modal.component.js";
-import { default as Et } from "./components/navigation-menu/navigation-menu.component.js";
-import { default as Zt } from "./components/navigation-menu/navigation-menu-item.component.js";
-import { default as qt } from "./components/notification-badge/notification-badge.component.js";
-import { default as Jt } from "./components/number-input/number-input.component.js";
-import { default as Qt } from "./components/official-website-banner/official-website-banner.component.js";
-import { default as Vt } from "./components/option-group/option-group.component.js";
-import { default as Yt } from "./components/option-item/option-item.component.js";
-import { default as $t } from "./components/option-list/option-list.component.js";
-import { default as or } from "./components/overlay/overlay.component.js";
-import { default as rr } from "./components/pager/pager.component.js";
-import { default as er } from "./components/password-input/password-input.component.js";
-import { default as fr } from "./components/popup/popup.component.js";
-import { default as ir } from "./components/progress/progress.component.js";
-import { default as dr } from "./components/radio-button/radio-button.component.js";
-import { default as Sr } from "./components/rating/rating.component.js";
-import { default as xr } from "./components/scroll-area/scroll-area.component.js";
-import { default as cr } from "./components/scroll-progress/scroll-progress.component.js";
-import { default as Ir } from "./components/search/search.component.js";
-import { default as Tr } from "./components/select/select.component.js";
-import { default as Br } from "./components/sidenav/sidenav.component.js";
-import { default as kr } from "./components/sidenav/sidenav-group.component.js";
-import { default as vr } from "./components/sidenav/sidenav-item.component.js";
-import { default as Ar } from "./components/skeleton/skeleton.component.js";
-import { default as Nr } from "./components/skip-link/skip-link.component.js";
-import { default as Or } from "./components/snackbar/snackbar.component.js";
-import { default as yr } from "./components/snackbar/snackbar-message.component.js";
-import { default as Rr } from "./components/spinner/spinner.component.js";
-import { default as Er } from "./components/stack/stack.component.js";
-import { default as Zr } from "./components/switch/switch.component.js";
-import { default as qr } from "./components/tab/tab.component.js";
-import { default as Jr } from "./components/tab/tab-group.component.js";
-import { default as Qr } from "./components/table/table.component.js";
-import { default as Vr } from "./components/table/table-cell.component.js";
-import { default as Yr } from "./components/table/table-header.component.js";
-import { default as $r } from "./components/table/table-row.component.js";
-import { default as op } from "./components/textarea/textarea.component.js";
-import { default as rp } from "./components/timeline/timeline.component.js";
-import { default as ep } from "./components/timeline/timeline-item.component.js";
-import { default as fp } from "./components/timepicker/time-grid.component.js";
-import { default as ip } from "./components/timepicker/timepicker.component.js";
-import { default as dp } from "./components/toc/toc.component.js";
-import { default as Sp } from "./components/toggle-button/toggle-button.component.js";
-import { default as xp } from "./components/tooltip/tooltip.component.js";
-import { default as cp } from "./components/tray/tray.component.js";
-import { default as Ip } from "./components/typography/typography.component.js";
-import { default as Tp } from "./node_modules/i18next/dist/esm/i18next.js";
+import { anchorClass as Qo } from "./common/const.js";
+import { FileError as Vo, HttpError as Xo } from "./common/errors.js";
+import { default as _o } from "./components/accordion/accordion.component.js";
+import { default as ot } from "./components/accordion-group/accordion-group.component.js";
+import { default as at } from "./components/anchor-heading/anchor-heading.component.js";
+import { default as pt } from "./components/avatar/avatar.component.js";
+import { default as mt } from "./components/avatar-group/avatar-group.component.js";
+import { default as Dt } from "./components/badge/badge.component.js";
+import { default as lt } from "./components/banner/banner.component.js";
+import { default as dt } from "./components/breadcrumb/breadcrumb.component.js";
+import { default as st } from "./components/breadcrumb-item/breadcrumb-item.component.js";
+import { default as nt } from "./components/button/button.component.js";
+import { default as Ct } from "./components/button-group/button-group.component.js";
+import { default as bt } from "./components/button-group/button-group-separator.component.js";
+import { default as gt } from "./components/button-group/button-group-text.component.js";
+import { default as Gt } from "./components/calendar/calendar.component.js";
+import { default as kt } from "./components/calendar/calendar-cell.component.js";
+import { default as vt } from "./components/callout/callout.component.js";
+import { default as Lt } from "./components/card/card.component.js";
+import { default as Ft } from "./components/card/card-actions.component.js";
+import { default as wt } from "./components/card/card-content.component.js";
+import { default as Mt } from "./components/card/card-image.component.js";
+import { default as Ht } from "./components/card/card-subtitle.component.js";
+import { default as Wt } from "./components/card/card-title.component.js";
+import { default as jt } from "./components/checkbox/checkbox.component.js";
+import { default as zt } from "./components/chip/chip.component.js";
+import { default as Kt } from "./components/code-puncher/code-puncher.component.js";
+import { default as Ut } from "./components/code-puncher/code-puncher-slot.component.js";
+import { default as Xt } from "./components/combobox/combobox.component.js";
+import { default as _t } from "./components/command/command.component.js";
+import { default as oa } from "./components/command/command-group.component.js";
+import { default as aa } from "./components/command/command-item.component.js";
+import { default as pa } from "./components/content-switcher/content-switcher.component.js";
+import { default as ma } from "./components/content-switcher/content-switcher-item.component.js";
+import { default as Da } from "./components/copybox-input/copybox-input.component.js";
+import { default as la } from "./components/dap-badge/dap-badge.component.js";
+import { default as da } from "./components/datatable/datatable.component.js";
+import { default as sa } from "./components/datepicker/datepicker.component.js";
+import { default as na } from "./components/divider/divider.component.js";
+import { default as Ca } from "./components/feedback/feedback.component.js";
+import { default as ba } from "./components/file-input/file-input.component.js";
+import { default as ga } from "./components/file-input/file-input-list.component.js";
+import { default as Ga } from "./components/file-input/file-input-list-item.component.js";
+import { default as ka } from "./components/form/form-label/form-label.component.js";
+import { default as va } from "./components/form/input-group/input-group.component.js";
+import { default as La } from "./components/form/radio-group/radio-group.component.js";
+import { default as Fa } from "./components/icon/icon.component.js";
+import { default as wa } from "./components/icon-button/icon-button.component.js";
+import { default as Ma } from "./components/image-zoom/image-zoom.component.js";
+import { default as Ha } from "./components/input/input.component.js";
+import { default as Wa } from "./components/label/label.component.js";
+import { default as ja } from "./components/link/link.component.js";
+import { default as za } from "./components/list-item/list-item.component.js";
+import { default as Ka } from "./components/modal/modal.component.js";
+import { default as Ua } from "./components/navigation-menu/navigation-menu.component.js";
+import { default as Xa } from "./components/navigation-menu/navigation-menu-item.component.js";
+import { default as _a } from "./components/notification-badge/notification-badge.component.js";
+import { default as or } from "./components/number-input/number-input.component.js";
+import { default as ar } from "./components/official-website-banner/official-website-banner.component.js";
+import { default as pr } from "./components/option-group/option-group.component.js";
+import { default as mr } from "./components/option-item/option-item.component.js";
+import { default as Dr } from "./components/option-list/option-list.component.js";
+import { default as lr } from "./components/overlay/overlay.component.js";
+import { default as dr } from "./components/pager/pager.component.js";
+import { default as sr } from "./components/password-input/password-input.component.js";
+import { default as nr } from "./components/popup/popup.component.js";
+import { default as Cr } from "./components/progress/progress.component.js";
+import { default as br } from "./components/radio-button/radio-button.component.js";
+import { default as gr } from "./components/rating/rating.component.js";
+import { default as Gr } from "./components/scroll-area/scroll-area.component.js";
+import { default as kr } from "./components/scroll-progress/scroll-progress.component.js";
+import { default as vr } from "./components/search/search.component.js";
+import { default as Lr } from "./components/select/select.component.js";
+import { default as Fr } from "./components/sidenav/sidenav.component.js";
+import { default as wr } from "./components/sidenav/sidenav-group.component.js";
+import { default as Mr } from "./components/sidenav/sidenav-item.component.js";
+import { default as Hr } from "./components/skeleton/skeleton.component.js";
+import { default as Wr } from "./components/skip-link/skip-link.component.js";
+import { default as jr } from "./components/snackbar/snackbar.component.js";
+import { default as zr } from "./components/snackbar/snackbar-message.component.js";
+import { default as Kr } from "./components/spinner/spinner.component.js";
+import { default as Ur } from "./components/stack/stack.component.js";
+import { default as Xr } from "./components/switch/switch.component.js";
+import { default as _r } from "./components/tab/tab.component.js";
+import { default as op } from "./components/tab/tab-group.component.js";
+import { default as ap } from "./components/table/table.component.js";
+import { default as pp } from "./components/table/table-cell.component.js";
+import { default as mp } from "./components/table/table-header.component.js";
+import { default as Dp } from "./components/table/table-row.component.js";
+import { default as lp } from "./components/textarea/textarea.component.js";
+import { default as dp } from "./components/timeline/timeline.component.js";
+import { default as sp } from "./components/timeline/timeline-item.component.js";
+import { default as np } from "./components/timepicker/time-grid.component.js";
+import { default as Cp } from "./components/timepicker/timepicker.component.js";
+import { default as bp } from "./components/toc/toc.component.js";
+import { default as gp } from "./components/toggle-button/toggle-button.component.js";
+import { default as Gp } from "./components/tooltip/tooltip.component.js";
+import { default as kp } from "./components/tray/tray.component.js";
+import { default as vp } from "./components/typography/typography.component.js";
+import { default as Lp } from "./node_modules/i18next/dist/esm/i18next.js";
 export {
-  Ua as DapDSAccordion,
-  Xa as DapDSAccordionGroup,
-  _a as DapDSAnchorHeading,
-  ao as DapDSAvatar,
-  to as DapDSAvatarGroup,
-  po as DapDSBadge,
-  mo as DapDSBanner,
-  Do as DapDSBreadcrumb,
-  lo as DapDSBreadcrumbItem,
-  So as DapDSButton,
-  xo as DapDSCalendar,
-  co as DapDSCalendarCell,
-  Io as DapDSCallout,
-  To as DapDSCard,
-  Bo as DapDSCardActions,
-  ko as DapDSCardContent,
-  vo as DapDSCardImage,
-  Ao as DapDSCardSubtitle,
-  No as DapDSCardTitle,
-  Oo as DapDSCheckbox,
-  yo as DapDSChip,
-  Ro as DapDSCodePuncher,
-  Eo as DapDSCodePuncherSlot,
-  Zo as DapDSCombobox,
-  qo as DapDSCommand,
-  Jo as DapDSCommandGroup,
-  Qo as DapDSCommandItem,
-  Vo as DapDSContentSwitcher,
-  Yo as DapDSContentSwitcherItem,
-  $o as DapDSCopyBoxInput,
-  ot as DapDSDAPBadge,
-  rt as DapDSDataTable,
-  et as DapDSDatePicker,
-  ft as DapDSDivider,
-  it as DapDSFeedback,
-  dt as DapDSFileInput,
-  St as DapDSFileInputList,
-  xt as DapDSFileInputListItem,
-  ct as DapDSFormLabel,
-  Bt as DapDSIcon,
-  kt as DapDSIconButton,
-  vt as DapDSImageZoom,
-  At as DapDSInput,
-  It as DapDSInputGroup,
-  Nt as DapDSLabel,
-  Ot as DapDSLink,
-  yt as DapDSListItem,
-  Rt as DapDSModal,
-  Et as DapDSNavigationMenu,
-  Zt as DapDSNavigationMenuItem,
-  qt as DapDSNotificationBadge,
-  Jt as DapDSNumberInput,
-  Qt as DapDSOfficialWebsiteBanner,
-  Vt as DapDSOptionGroup,
-  Yt as DapDSOptionItem,
-  $t as DapDSOptionList,
-  or as DapDSOverlay,
-  rr as DapDSPager,
-  er as DapDSPasswordInput,
-  fr as DapDSPopup,
-  ir as DapDSProgress,
-  dr as DapDSRadioButton,
-  Tt as DapDSRadioGroup,
-  Sr as DapDSRating,
-  xr as DapDSScrollArea,
-  cr as DapDSScrollProgress,
-  Ir as DapDSSearch,
-  Tr as DapDSSelect,
-  Br as DapDSSideNav,
-  kr as DapDSSideNavGroup,
-  vr as DapDSSideNavItem,
-  Ar as DapDSSkeleton,
-  Nr as DapDSSkipLink,
-  Or as DapDSSnackbar,
-  yr as DapDSSnackbarMessage,
-  Rr as DapDSSpinner,
-  Er as DapDSStack,
-  Zr as DapDSSwitch,
-  dp as DapDSTOC,
-  qr as DapDSTab,
-  Jr as DapDSTabGroup,
-  Qr as DapDSTable,
-  Vr as DapDSTableCell,
-  Yr as DapDSTableHeader,
-  $r as DapDSTableRow,
-  op as DapDSTextarea,
-  fp as DapDSTimeGrid,
-  ip as DapDSTimePicker,
-  rp as DapDSTimeline,
-  ep as DapDSTimelineItem,
-  Sp as DapDSToggleButton,
-  xp as DapDSTooltip,
-  cp as DapDSTray,
-  Ip as DapDSTypography,
-  Ja as FileError,
-  Ka as HttpError,
-  qa as anchorClass,
-  Tp as i18next
+  _o as DapDSAccordion,
+  ot as DapDSAccordionGroup,
+  at as DapDSAnchorHeading,
+  pt as DapDSAvatar,
+  mt as DapDSAvatarGroup,
+  Dt as DapDSBadge,
+  lt as DapDSBanner,
+  dt as DapDSBreadcrumb,
+  st as DapDSBreadcrumbItem,
+  nt as DapDSButton,
+  Ct as DapDSButtonGroup,
+  bt as DapDSButtonGroupSeparator,
+  gt as DapDSButtonGroupText,
+  Gt as DapDSCalendar,
+  kt as DapDSCalendarCell,
+  vt as DapDSCallout,
+  Lt as DapDSCard,
+  Ft as DapDSCardActions,
+  wt as DapDSCardContent,
+  Mt as DapDSCardImage,
+  Ht as DapDSCardSubtitle,
+  Wt as DapDSCardTitle,
+  jt as DapDSCheckbox,
+  zt as DapDSChip,
+  Kt as DapDSCodePuncher,
+  Ut as DapDSCodePuncherSlot,
+  Xt as DapDSCombobox,
+  _t as DapDSCommand,
+  oa as DapDSCommandGroup,
+  aa as DapDSCommandItem,
+  pa as DapDSContentSwitcher,
+  ma as DapDSContentSwitcherItem,
+  Da as DapDSCopyBoxInput,
+  la as DapDSDAPBadge,
+  da as DapDSDataTable,
+  sa as DapDSDatePicker,
+  na as DapDSDivider,
+  Ca as DapDSFeedback,
+  ba as DapDSFileInput,
+  ga as DapDSFileInputList,
+  Ga as DapDSFileInputListItem,
+  ka as DapDSFormLabel,
+  Fa as DapDSIcon,
+  wa as DapDSIconButton,
+  Ma as DapDSImageZoom,
+  Ha as DapDSInput,
+  va as DapDSInputGroup,
+  Wa as DapDSLabel,
+  ja as DapDSLink,
+  za as DapDSListItem,
+  Ka as DapDSModal,
+  Ua as DapDSNavigationMenu,
+  Xa as DapDSNavigationMenuItem,
+  _a as DapDSNotificationBadge,
+  or as DapDSNumberInput,
+  ar as DapDSOfficialWebsiteBanner,
+  pr as DapDSOptionGroup,
+  mr as DapDSOptionItem,
+  Dr as DapDSOptionList,
+  lr as DapDSOverlay,
+  dr as DapDSPager,
+  sr as DapDSPasswordInput,
+  nr as DapDSPopup,
+  Cr as DapDSProgress,
+  br as DapDSRadioButton,
+  La as DapDSRadioGroup,
+  gr as DapDSRating,
+  Gr as DapDSScrollArea,
+  kr as DapDSScrollProgress,
+  vr as DapDSSearch,
+  Lr as DapDSSelect,
+  Fr as DapDSSideNav,
+  wr as DapDSSideNavGroup,
+  Mr as DapDSSideNavItem,
+  Hr as DapDSSkeleton,
+  Wr as DapDSSkipLink,
+  jr as DapDSSnackbar,
+  zr as DapDSSnackbarMessage,
+  Kr as DapDSSpinner,
+  Ur as DapDSStack,
+  Xr as DapDSSwitch,
+  bp as DapDSTOC,
+  _r as DapDSTab,
+  op as DapDSTabGroup,
+  ap as DapDSTable,
+  pp as DapDSTableCell,
+  mp as DapDSTableHeader,
+  Dp as DapDSTableRow,
+  lp as DapDSTextarea,
+  np as DapDSTimeGrid,
+  Cp as DapDSTimePicker,
+  dp as DapDSTimeline,
+  sp as DapDSTimelineItem,
+  gp as DapDSToggleButton,
+  Gp as DapDSTooltip,
+  kp as DapDSTray,
+  vp as DapDSTypography,
+  Vo as FileError,
+  Xo as HttpError,
+  Qo as anchorClass,
+  Lp as i18next
 };
 //# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"components.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components.native.css

@@ -228,12 +228,15 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  width: auto;
+  width: var(--dds-button-group-item-width, auto);
   height: auto;
   column-gap: var(--dds-spacing-100);
   transition: var(--dds-button-transition);
   border: var(--dds-border-width-large) solid transparent;
-  border-radius: var(--dds-button-border-radius);
+  border-start-start-radius: var(--dds-button-group-start-start-radius, var(--dds-button-border-radius));
+  border-start-end-radius: var(--dds-button-group-start-end-radius, var(--dds-button-border-radius));
+  border-end-start-radius: var(--dds-button-group-end-start-radius, var(--dds-button-border-radius));
+  border-end-end-radius: var(--dds-button-group-end-end-radius, var(--dds-button-border-radius));
   font-weight: var(--dds-button-font-weight);
   line-height: var(--dds-button-line-height);
   vertical-align: top;