@redvars/peacock 3.6.2 → 3.7.0

package/dist/canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"canvas.js","sources":["../../src/canvas/canvas.ts"],"sourcesContent":["import { html, LitElement, svg, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './canvas.scss';\n\nexport type CanvasDirection = 'up' | 'down' | 'left' | 'right';\n\nexport type CanvasStrokeVariant = 'solid' | 'dashed' | 'animated-dashed';\n\nexport interface CanvasPoint {\n  x: number;\n  y: number;\n}\n\nexport interface CanvasPathSegment {\n  direction: CanvasDirection;\n  length: number;\n}\n\ninterface BaseCanvasShape {\n  color?: string;\n}\n\ninterface BaseCanvasStrokeShape extends BaseCanvasShape {\n  variant?: CanvasStrokeVariant;\n  showArrow?: boolean;\n  clickable?: boolean;\n}\n\nexport interface CanvasCircleShape extends BaseCanvasShape {\n  type: 'circle';\n  x?: number;\n  y?: number;\n  radius?: number;\n}\n\nexport interface CanvasRectShape extends BaseCanvasShape {\n  type: 'rect';\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n}\n\nexport interface CanvasLineShape extends BaseCanvasStrokeShape {\n  type: 'line';\n  start?: CanvasPoint;\n  end?: CanvasPoint;\n}\n\nexport interface CanvasConnectorShape extends BaseCanvasStrokeShape {\n  type: 'connector';\n  start?: CanvasPoint;\n  path?: CanvasPathSegment[];\n}\n\nexport type CanvasShape =\n  | CanvasCircleShape\n  | CanvasRectShape\n  | CanvasLineShape\n  | CanvasConnectorShape;\n\ninterface CanvasBounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\n/**\n * @label Canvas\n * @tag wc-canvas\n * @rawTag canvas\n * @summary A Material 3 inspired SVG canvas for drawing shapes, lines, and connectors on a dotted grid.\n *\n * @cssprop --canvas-background - Background color for the canvas wrapper. Defaults to surface-container-low.\n * @cssprop --canvas-dot-color - Color of the background grid dots. Defaults to outline-variant.\n * @cssprop --canvas-line-color - Default stroke color for lines and connectors. Defaults to on-surface.\n * @cssprop --canvas-hover-color - Stroke color on hover for clickable shapes. Defaults to primary.\n * @cssprop --canvas-arrow-color - Stroke color for arrow markers. Defaults to on-surface.\n *\n * @example\n * ```html\n * <wc-canvas id=\"my-canvas\"></wc-canvas>\n * <script>\n *   document.querySelector('#my-canvas').shapes = [\n *     { type: 'circle', x: 0, y: 0, radius: 0.25, color: 'red' },\n *   ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class Canvas extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Array of shape objects to render on the canvas.\n   */\n  @property({ type: Array })\n  shapes: CanvasShape[] = [];\n\n  /**\n   * Padding around the computed viewbox (in grid units).\n   */\n  @property({ type: Number, reflect: true })\n  padding: number = 1;\n\n  /**\n   * Zoom multiplier for the canvas dimensions.\n   */\n  @property({ type: Number, reflect: true })\n  zoom: number = 1;\n\n  /**\n   * Optional viewbox override string (e.g. \"0 0 100 100\").\n   */\n  @property({ type: String })\n  viewbox?: string;\n\n  private unitSize: number = 1;\n\n  private gap: number = this.unitSize * 10;\n\n  private static getNextPoint(\n    point: CanvasPoint,\n    direction: CanvasDirection,\n    length: number,\n  ): CanvasPoint {\n    if (direction === 'down') return { x: point.x, y: point.y + length };\n    if (direction === 'up') return { x: point.x, y: point.y - length };\n    if (direction === 'left') return { x: point.x - length, y: point.y };\n    if (direction === 'right') return { x: point.x + length, y: point.y };\n    return { x: point.x, y: point.y };\n  }\n\n  private static updateComputationArea(\n    point: CanvasPoint,\n    area: CanvasBounds,\n  ): CanvasBounds {\n    const nextArea = { ...area };\n    if (point.x > nextArea.width) nextArea.width = point.x;\n    else if (point.x < nextArea.x) nextArea.x = point.x;\n    if (point.y > nextArea.height) nextArea.height = point.y;\n    else if (point.y < nextArea.y) nextArea.y = point.y;\n    return nextArea;\n  }\n\n  private static getStrokeVariantClasses(variant?: CanvasStrokeVariant) {\n    return {\n      line: true,\n      'no-color': false,\n      'variant-dashed': variant === 'dashed' || variant === 'animated-dashed',\n      'variant-animated-dashed': variant === 'animated-dashed',\n    };\n  }\n\n  private computeShapes(initialBounds: CanvasBounds) {\n    const dotRadius = this.unitSize;\n    let computedViewbox = { ...initialBounds };\n\n    const shapes = this.shapes.map(shape => {\n      switch (shape.type) {\n        case 'circle': {\n          const r = shape.radius || 1;\n          const cx = shape.x || 0;\n          const cy = shape.y || 0;\n          if (cx + Math.ceil(r) > computedViewbox.width)\n            computedViewbox.width = cx + Math.ceil(r);\n          if (cx - Math.ceil(r) < computedViewbox.x)\n            computedViewbox.x = cx - Math.ceil(r);\n          if (cy + Math.ceil(r) > computedViewbox.height)\n            computedViewbox.height = cy + Math.ceil(r);\n          if (cy - Math.ceil(r) < computedViewbox.y)\n            computedViewbox.y = cy - Math.ceil(r);\n\n          return svg`<circle\n            cx=${cx * this.gap + dotRadius}\n            cy=${cy * this.gap + dotRadius}\n            r=${r * this.gap}\n            fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}\n          />`;\n        }\n        case 'rect': {\n          const w = shape.width || 1;\n          const h = shape.height || 1;\n          const rx = shape.x || 0;\n          const ry = shape.y || 0;\n          if (rx + Math.ceil(w) > computedViewbox.width)\n            computedViewbox.width = rx + Math.ceil(w);\n          if (rx - Math.ceil(w) < computedViewbox.x)\n            computedViewbox.x = rx - Math.ceil(w);\n          if (ry + Math.ceil(h) > computedViewbox.height)\n            computedViewbox.height = ry + Math.ceil(h);\n          if (ry - Math.ceil(h) < computedViewbox.y)\n            computedViewbox.y = ry - Math.ceil(h);\n\n          return svg`<rect\n            x=${rx * this.gap + dotRadius}\n            y=${ry * this.gap}\n            width=${w * this.gap + dotRadius}\n            height=${h * this.gap + dotRadius}\n            fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}\n          />`;\n        }\n        case 'line': {\n          const start = shape.start || { x: 0, y: 0 };\n          const end = shape.end || { x: 0, y: 0 };\n          const pathString = `M${start.x * this.gap + dotRadius} ${start.y * this.gap + dotRadius} L${end.x * this.gap + dotRadius} ${end.y * this.gap + dotRadius}`;\n          const strokeColor =\n            shape.color ||\n            'var(--canvas-line-color, var(--color-on-surface))';\n\n          return svg`<path\n            class=${classMap({\n              ...Canvas.getStrokeVariantClasses(shape.variant),\n              clickable: !!shape.clickable,\n              'no-color': !shape.color,\n            })}\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke=${strokeColor}\n            marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}\n            d=${pathString}\n            stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : nothing}\n            fill=\"none\"\n          />`;\n        }\n        case 'connector': {\n          const start = shape.start || { x: 0, y: 0 };\n          let pathString = `M${start.x * this.gap + dotRadius} ${start.y * this.gap + dotRadius}`;\n          let current = { ...start };\n          computedViewbox = Canvas.updateComputationArea(current, computedViewbox);\n\n          const pathSegments = shape.path || [];\n          for (let i = 0; i < pathSegments.length; i += 1) {\n            const path = pathSegments[i];\n\n            if (i === 0) {\n              const point = Canvas.getNextPoint(current, path.direction, 1);\n              pathString += ` L${point.x * this.gap + dotRadius} ${point.y * this.gap + dotRadius}`;\n              current = { ...point };\n              computedViewbox = Canvas.updateComputationArea(current, computedViewbox);\n            }\n\n            const point = Canvas.getNextPoint(\n              current,\n              path.direction,\n              path.length - 2,\n            );\n            pathString += ` L${point.x * this.gap + dotRadius} ${point.y * this.gap + dotRadius}`;\n            current = { ...point };\n            computedViewbox = Canvas.updateComputationArea(current, computedViewbox);\n\n            if (i === pathSegments.length - 1) {\n              const endPoint = Canvas.getNextPoint(current, path.direction, 1);\n              pathString += ` L${endPoint.x * this.gap + dotRadius} ${endPoint.y * this.gap + dotRadius}`;\n              current = { ...endPoint };\n              computedViewbox = Canvas.updateComputationArea(current, computedViewbox);\n            } else {\n              const nextPath = pathSegments[i + 1];\n              const midPoint = Canvas.getNextPoint(current, path.direction, 1);\n              const nextPoint = Canvas.getNextPoint(\n                midPoint,\n                nextPath.direction,\n                1,\n              );\n              pathString += ` Q ${midPoint.x * this.gap + dotRadius} ${midPoint.y * this.gap + dotRadius} ${nextPoint.x * this.gap + dotRadius} ${nextPoint.y * this.gap + dotRadius}`;\n              current = { ...nextPoint };\n              computedViewbox = Canvas.updateComputationArea(current, computedViewbox);\n            }\n          }\n\n          const strokeColor =\n            shape.color ||\n            'var(--canvas-line-color, var(--color-on-surface))';\n\n          return svg`<g class=${classMap({ clickable: !!shape.clickable })}>\n            <path\n              class=${classMap({\n                ...Canvas.getStrokeVariantClasses(shape.variant),\n                'no-color': !shape.color,\n              })}\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke=${strokeColor}\n              marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}\n              d=${pathString}\n              stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : nothing}\n              fill=\"none\"\n            />\n            <path\n              stroke-width=\"10\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke=\"transparent\"\n              d=${pathString}\n              fill=\"none\"\n            />\n          </g>`;\n        }\n        default:\n          return nothing;\n      }\n    });\n\n    // Padding\n    computedViewbox.x -= this.padding;\n    computedViewbox.y -= this.padding;\n    computedViewbox.width += this.padding;\n    computedViewbox.height += this.padding;\n    computedViewbox.width -= computedViewbox.x;\n    computedViewbox.height -= computedViewbox.y;\n\n    return { shapes, computedViewbox };\n  }\n\n  protected render() {\n    const dotRadius = this.unitSize;\n    let computedViewBox = { width: 0, height: 0, x: 0, y: 0 };\n\n    const { shapes, computedViewbox } = this.computeShapes(computedViewBox);\n    computedViewBox = computedViewbox;\n\n    if (this.viewbox) {\n      const viewBox = this.viewbox.split(' ');\n      computedViewBox = {\n        x: parseInt(viewBox[0], 10),\n        y: parseInt(viewBox[1], 10),\n        width: parseInt(viewBox[2], 10),\n        height: parseInt(viewBox[3], 10),\n      };\n    }\n\n    const wrapperWidth =\n      (computedViewBox.width * this.gap + 2) * dotRadius * this.zoom;\n    const wrapperHeight =\n      (computedViewBox.height * this.gap + 2) * dotRadius * this.zoom;\n\n    const svgViewBox = `${computedViewBox.x * this.gap} ${computedViewBox.y * this.gap} ${computedViewBox.width * this.gap + 2 * dotRadius} ${computedViewBox.height * this.gap + 2 * dotRadius}`;\n\n    return html`\n      <div\n        class=\"canvas-wrapper\"\n        style=\"width: ${wrapperWidth}px; height: ${wrapperHeight}px;\"\n      >\n        <svg\n          class=\"canvas\"\n          height=\"100%\"\n          width=\"100%\"\n          viewBox=${svgViewBox}\n        >\n          <defs>\n            <pattern\n              id=\"canvas-background\"\n              patternUnits=\"userSpaceOnUse\"\n              width=${this.gap}\n              height=${this.gap}\n            >\n              <circle cx=\"1\" cy=\"1\" r=${dotRadius} />\n            </pattern>\n\n            <marker\n              id=\"endarrow\"\n              markerWidth=\"15\"\n              markerHeight=\"22.5\"\n              refX=\"9\"\n              refY=\"15\"\n              markerUnits=\"userSpaceOnUse\"\n              orient=\"auto\"\n            >\n              <polyline points=\"0 22.5, 7.5 15, 0 7.5\"></polyline>\n            </marker>\n          </defs>\n\n          <rect\n            x=${computedViewBox.x * this.gap}\n            y=${computedViewBox.y * this.gap}\n            width=\"100%\"\n            height=\"100%\"\n            fill=\"url(#canvas-background)\"\n          />\n\n          ${shapes}\n        </svg>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","svg","w","classMap","nothing","html","styles","property"],"mappings":"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"}
+{"version":3,"file":"canvas.js","sources":["../../src/canvas/canvas.ts"],"sourcesContent":["import { html, LitElement, svg, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './canvas.scss';\n\nexport type CanvasDirection = 'up' | 'down' | 'left' | 'right';\n\nexport type CanvasStrokeVariant = 'solid' | 'dashed' | 'animated-dashed';\n\nexport interface CanvasPoint {\n  x: number;\n  y: number;\n}\n\nexport interface CanvasPathSegment {\n  direction: CanvasDirection;\n  length: number;\n}\n\ninterface BaseCanvasShape {\n  color?: string;\n}\n\ninterface BaseCanvasStrokeShape extends BaseCanvasShape {\n  variant?: CanvasStrokeVariant;\n  showArrow?: boolean;\n  clickable?: boolean;\n}\n\nexport interface CanvasCircleShape extends BaseCanvasShape {\n  type: 'circle';\n  x?: number;\n  y?: number;\n  radius?: number;\n}\n\nexport interface CanvasRectShape extends BaseCanvasShape {\n  type: 'rect';\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n}\n\nexport interface CanvasLineShape extends BaseCanvasStrokeShape {\n  type: 'line';\n  start?: CanvasPoint;\n  end?: CanvasPoint;\n}\n\nexport interface CanvasConnectorShape extends BaseCanvasStrokeShape {\n  type: 'connector';\n  start?: CanvasPoint;\n  path?: CanvasPathSegment[];\n}\n\nexport type CanvasShape =\n  | CanvasCircleShape\n  | CanvasRectShape\n  | CanvasLineShape\n  | CanvasConnectorShape;\n\nconst GRID_GAP = 10;\nconst GRID_DOT_RADIUS = 1;\n\ninterface CanvasBounds {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\ninterface CanvasExtents {\n  minX: number;\n  minY: number;\n  maxX: number;\n  maxY: number;\n}\n\ninterface CanvasViewBox {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\n/**\n * @label Canvas\n * @tag wc-canvas\n * @rawTag canvas\n * @summary A Material 3 inspired SVG canvas for drawing shapes, lines, and connectors on a dotted grid.\n *\n * @cssprop --canvas-background - Background color for the canvas wrapper. Defaults to surface-container-low.\n * @cssprop --canvas-dot-color - Color of the background grid dots. Defaults to outline-variant.\n * @cssprop --canvas-line-color - Default stroke color for lines and connectors. Defaults to on-surface.\n * @cssprop --canvas-hover-color - Stroke color on hover for clickable shapes. Defaults to primary.\n * @cssprop --canvas-arrow-color - Stroke color for arrow markers. Defaults to on-surface.\n *\n * @example\n * ```html\n * <wc-canvas id=\"my-canvas\"></wc-canvas>\n * <script>\n *   document.querySelector('#my-canvas').shapes = [\n *     { type: 'circle', x: 0, y: 0, radius: 0.25, color: 'red' },\n *   ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class Canvas extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Array of shape objects to render on the canvas.\n   */\n  @property({ type: Array })\n  shapes: CanvasShape[] = [];\n\n  /**\n   * Padding around the computed viewbox (in grid units).\n   */\n  @property({ type: Number, reflect: true })\n  padding: number = 1;\n\n  /**\n   * Zoom multiplier for the canvas dimensions.\n   */\n  @property({ type: Number, reflect: true })\n  zoom: number = 1;\n\n  /**\n   * Optional viewbox override string (e.g. \"0 0 100 100\").\n   */\n  @property({ type: String })\n  viewbox?: string;\n\n  private static getNextPoint(\n    point: CanvasPoint,\n    direction: CanvasDirection,\n    length: number,\n  ): CanvasPoint {\n    if (direction === 'down') return { x: point.x, y: point.y + length };\n    if (direction === 'up') return { x: point.x, y: point.y - length };\n    if (direction === 'left') return { x: point.x - length, y: point.y };\n    if (direction === 'right') return { x: point.x + length, y: point.y };\n    return { x: point.x, y: point.y };\n  }\n\n  private static updateExtents(\n    extents: CanvasExtents,\n    x: number,\n    y: number,\n  ) {\n    if (x < extents.minX) extents.minX = x;\n    if (x > extents.maxX) extents.maxX = x;\n    if (y < extents.minY) extents.minY = y;\n    if (y > extents.maxY) extents.maxY = y;\n  }\n\n  private static getStrokeVariantClasses(variant?: CanvasStrokeVariant) {\n    return {\n      line: true,\n      'variant-dashed': variant === 'dashed' || variant === 'animated-dashed',\n      'variant-animated-dashed': variant === 'animated-dashed',\n    };\n  }\n\n  private computeShapes(initialBounds: CanvasBounds) {\n    // Track world-space bounds (grid units) as shapes are processed.\n    const extents: CanvasExtents = {\n      minX: initialBounds.x,\n      minY: initialBounds.y,\n      maxX: initialBounds.x + initialBounds.width,\n      maxY: initialBounds.y + initialBounds.height,\n    };\n\n    const shapes = this.shapes.map(shape => {\n      switch (shape.type) {\n        case 'circle': {\n          const r = shape.radius || 1;\n          const cx = shape.x || 0;\n          const cy = shape.y || 0;\n          Canvas.updateExtents(extents, cx - r, cy - r);\n          Canvas.updateExtents(extents, cx + r, cy + r);\n\n          // Convert from grid units to SVG pixels using the fixed gap.\n          return svg`<circle\n            cx=${cx * GRID_GAP + GRID_DOT_RADIUS}\n            cy=${cy * GRID_GAP + GRID_DOT_RADIUS}\n            r=${r * GRID_GAP}\n            fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}\n          />`;\n        }\n        case 'rect': {\n          const w = shape.width || 1;\n          const h = shape.height || 1;\n          const rx = shape.x || 0;\n          const ry = shape.y || 0;\n          Canvas.updateExtents(extents, rx, ry);\n          Canvas.updateExtents(extents, rx + w, ry + h);\n\n          return svg`<rect\n            x=${rx * GRID_GAP + GRID_DOT_RADIUS}\n            y=${ry * GRID_GAP}\n            width=${w * GRID_GAP + GRID_DOT_RADIUS}\n            height=${h * GRID_GAP + GRID_DOT_RADIUS}\n            fill=${shape.color || 'var(--canvas-line-color, var(--color-on-surface))'}\n          />`;\n        }\n        case 'line': {\n          const start = shape.start || { x: 0, y: 0 };\n          const end = shape.end || { x: 0, y: 0 };\n          Canvas.updateExtents(extents, start.x, start.y);\n          Canvas.updateExtents(extents, end.x, end.y);\n          const pathString = `M${start.x * GRID_GAP + GRID_DOT_RADIUS} ${start.y * GRID_GAP + GRID_DOT_RADIUS} L${end.x * GRID_GAP + GRID_DOT_RADIUS} ${end.y * GRID_GAP + GRID_DOT_RADIUS}`;\n          const strokeColor =\n            shape.color ||\n            'var(--canvas-line-color, var(--color-on-surface))';\n\n          return svg`<path\n            class=${classMap({\n              ...Canvas.getStrokeVariantClasses(shape.variant),\n              clickable: !!shape.clickable,\n            })}\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke=${strokeColor}\n            marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}\n            d=${pathString}\n            stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : nothing}\n            fill=\"none\"\n          />`;\n        }\n        case 'connector': {\n          const start = shape.start || { x: 0, y: 0 };\n          let pathString = `M${start.x * GRID_GAP + GRID_DOT_RADIUS} ${start.y * GRID_GAP + GRID_DOT_RADIUS}`;\n          let current = { ...start };\n          Canvas.updateExtents(extents, current.x, current.y);\n\n          const pathSegments = shape.path || [];\n          for (let i = 0; i < pathSegments.length; i += 1) {\n            const path = pathSegments[i];\n\n            if (i === 0) {\n              // Move one unit first so curved corner joins don't overlap start.\n              const point = Canvas.getNextPoint(current, path.direction, 1);\n              pathString += ` L${point.x * GRID_GAP + GRID_DOT_RADIUS} ${point.y * GRID_GAP + GRID_DOT_RADIUS}`;\n              current = { ...point };\n              Canvas.updateExtents(extents, current.x, current.y);\n            }\n\n            const point = Canvas.getNextPoint(\n              current,\n              path.direction,\n              path.length - 2,\n            );\n            pathString += ` L${point.x * GRID_GAP + GRID_DOT_RADIUS} ${point.y * GRID_GAP + GRID_DOT_RADIUS}`;\n            current = { ...point };\n            Canvas.updateExtents(extents, current.x, current.y);\n\n            if (i === pathSegments.length - 1) {\n              const endPoint = Canvas.getNextPoint(current, path.direction, 1);\n              pathString += ` L${endPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${endPoint.y * GRID_GAP + GRID_DOT_RADIUS}`;\n              current = { ...endPoint };\n              Canvas.updateExtents(extents, current.x, current.y);\n            } else {\n              const nextPath = pathSegments[i + 1];\n              const midPoint = Canvas.getNextPoint(current, path.direction, 1);\n              Canvas.updateExtents(extents, midPoint.x, midPoint.y);\n              const nextPoint = Canvas.getNextPoint(\n                midPoint,\n                nextPath.direction,\n                1,\n              );\n              // Use a quadratic segment to round corners between directions.\n              pathString += ` Q ${midPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${midPoint.y * GRID_GAP + GRID_DOT_RADIUS} ${nextPoint.x * GRID_GAP + GRID_DOT_RADIUS} ${nextPoint.y * GRID_GAP + GRID_DOT_RADIUS}`;\n              current = { ...nextPoint };\n              Canvas.updateExtents(extents, current.x, current.y);\n            }\n          }\n\n          const strokeColor =\n            shape.color ||\n            'var(--canvas-line-color, var(--color-on-surface))';\n\n          return svg`<g class=${classMap({ clickable: !!shape.clickable })}>\n            <path\n              class=${classMap({\n                ...Canvas.getStrokeVariantClasses(shape.variant),\n              })}\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke=${strokeColor}\n              marker-end=${shape.showArrow ? 'url(#endarrow)' : ''}\n              d=${pathString}\n              stroke-dasharray=${shape.variant === 'dashed' || shape.variant === 'animated-dashed' ? '6,6' : nothing}\n              fill=\"none\"\n            />\n            <path\n              stroke-width=\"10\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke=\"transparent\"\n              d=${pathString}\n              fill=\"none\"\n            />\n          </g>`;\n        }\n        default:\n          return nothing;\n      }\n    });\n\n    // Expand bounds with padding so shapes are not flush to the edge.\n    const computedViewbox = {\n      x: extents.minX - this.padding,\n      y: extents.minY - this.padding,\n      width: Math.max(extents.maxX - extents.minX + this.padding * 2, 0),\n      height: Math.max(extents.maxY - extents.minY + this.padding * 2, 0),\n    };\n\n    return { shapes, computedViewbox };\n  }\n\n  private renderBackgroundSvg(computedViewBox: CanvasViewBox, svgViewBox: string) {\n    return html`\n      <svg\n        class=\"canvas canvas-background\"\n        height=\"100%\"\n        width=\"100%\"\n        viewBox=${svgViewBox}\n        aria-hidden=\"true\"\n      >\n        <defs>\n          <pattern\n            id=\"canvas-background\"\n            patternUnits=\"userSpaceOnUse\"\n            width=${GRID_GAP}\n            height=${GRID_GAP}\n          >\n            <circle cx=\"1\" cy=\"1\" r=${GRID_DOT_RADIUS} />\n          </pattern>\n        </defs>\n\n        <rect\n          x=${computedViewBox.x * GRID_GAP}\n          y=${computedViewBox.y * GRID_GAP}\n          width=\"100%\"\n          height=\"100%\"\n          fill=\"url(#canvas-background)\"\n        />\n      </svg>\n    `;\n  }\n\n  private renderShapesSvg(shapes: unknown[], svgViewBox: string) {\n    return html`\n      <svg\n        class=\"canvas canvas-shapes\"\n        height=\"100%\"\n        width=\"100%\"\n        viewBox=${svgViewBox}\n      >\n        <defs>\n          <marker id=\"endarrow\" markerWidth=\"10\" markerHeight=\"10\" refX=\"5\" refY=\"5\" markerUnits=\"strokeWidth\" orient=\"auto\">\n            <polyline  points=\"0 2, 5 5, 0 8\"></polyline>\n          </marker>\n        </defs>\n\n        ${shapes}\n      </svg>\n    `;\n  }\n\n  protected render() {\n    let computedViewBox = { width: 0, height: 0, x: 0, y: 0 };\n\n    const { shapes, computedViewbox } = this.computeShapes(computedViewBox);\n    computedViewBox = computedViewbox;\n\n    if (this.viewbox) {\n      const viewBox = this.viewbox.split(' ');\n      computedViewBox = {\n        x: parseInt(viewBox[0], 10),\n        y: parseInt(viewBox[1], 10),\n        width: parseInt(viewBox[2], 10),\n        height: parseInt(viewBox[3], 10),\n      };\n    }\n\n    // Zoom scales the outer viewport size while the SVG viewBox stays in world units.\n    const wrapperWidth =\n      (computedViewBox.width * GRID_GAP + 2) * GRID_DOT_RADIUS * this.zoom;\n    const wrapperHeight =\n      (computedViewBox.height * GRID_GAP + 2) * GRID_DOT_RADIUS * this.zoom;\n\n    // viewBox maps world-space extents into the internal SVG coordinate system.\n    const svgViewBox = `${computedViewBox.x * GRID_GAP} ${computedViewBox.y * GRID_GAP} ${computedViewBox.width * GRID_GAP + 2 * GRID_DOT_RADIUS} ${computedViewBox.height * GRID_GAP + 2 * GRID_DOT_RADIUS}`;\n\n    return html`\n      <div\n        class=\"canvas-wrapper\"\n        style=\"width: ${wrapperWidth}px; height: ${wrapperHeight}px;\"\n      >\n        ${this.renderBackgroundSvg(computedViewBox, svgViewBox)}\n        ${this.renderShapesSvg(shapes, svgViewBox)}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","svg","w","classMap","nothing","html","styles","property"],"mappings":"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"}

package/dist/card-content.js

@@ -4,7 +4,6 @@ import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from '
  * @label Card Content
  * @tag wc-card-content
  * @rawTag card-content
- * @parentRawTag
  *
  * @cssprop --card-content-padding - Inner padding for the card container. Defaults to 1rem.
  *

package/dist/card-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-content.js","sources":["../../src/card/card-content.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport IndividualComponent from '../IndividualComponent.js';\n\n/**\n * @label Card Content\n * @tag wc-card-content\n * @rawTag card-content\n * @parentRawTag \n * \n * @cssprop --card-content-padding - Inner padding for the card container. Defaults to 1rem.\n *\n * ```\n */\n@IndividualComponent\nexport class CardContent extends LitElement {\n  static styles = css`\n      :host {\n          padding-inline: 1rem;\n          display: block;\n      }\n  `;\n\n   render() {\n    return html`<slot></slot>`;\n   }\n}"],"names":["LitElement","html","css"],"mappings":";;AAGA;;;;;;;;;AASG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQA,GAAU,CAAA;IAQxC,MAAM,GAAA;QACL,OAAOC,CAAI,CAAA,CAAA,aAAA,CAAe;IAC3B;;AATM,WAAA,CAAA,MAAM,GAAGC,CAAG,CAAA;;;;;AAKlB,EAAA,CALY;AADF,WAAW,GAAA,UAAA,CAAA;IADvB;AACY,CAAA,EAAA,WAAW,CAWvB;;;;"}
+{"version":3,"file":"card-content.js","sources":["../../src/card/card-content.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport IndividualComponent from '../IndividualComponent.js';\n\n/**\n * @label Card Content\n * @tag wc-card-content\n * @rawTag card-content\n *\n * @cssprop --card-content-padding - Inner padding for the card container. Defaults to 1rem.\n *\n * ```\n */\n@IndividualComponent\nexport class CardContent extends LitElement {\n  static styles = css`\n      :host {\n          padding-inline: 1rem;\n          display: block;\n      }\n  `;\n\n   render() {\n    return html`<slot></slot>`;\n   }\n}\n"],"names":["LitElement","html","css"],"mappings":";;AAGA;;;;;;;;AAQG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQA,GAAU,CAAA;IAQxC,MAAM,GAAA;QACL,OAAOC,CAAI,CAAA,CAAA,aAAA,CAAe;IAC3B;;AATM,WAAA,CAAA,MAAM,GAAGC,CAAG,CAAA;;;;;AAKlB,EAAA,CALY;AADF,WAAW,GAAA,UAAA,CAAA;IADvB;AACY,CAAA,EAAA,WAAW,CAWvB;;;;"}

package/dist/card.js

@@ -4,8 +4,8 @@ import { r } from './state-DwbEjqVk.js';
 import { e as e$1 } from './query-QBcUV-L_.js';
 import { e } from './class-map-YU7g0o3B.js';
 import { i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
-import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.js';
-import { B as BaseHyperlinkMixin, t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
+import { N as NativeHyperlinkMixin, t as throttle, i as isLink } from './NativeHyperlinkMixin-DrYXyfMQ.js';
+import { o as observerSlotChangesWithCallback } from './observe-slot-change-D8Xg-kSS.js';
 import './directive-ZPhl09Yt.js';
 
 var css_248z$1 = i`* {
@@ -17,6 +17,7 @@ var css_248z$1 = i`* {
 }
 
 :host {
+  position: relative;
   display: block;
   --card-gap: 0;
   --card-padding: 0;
@@ -25,6 +26,10 @@ var css_248z$1 = i`* {
   --card-container-shape-start-end: unset;
   --card-container-shape-end-start: unset;
   --card-container-shape-end-end: unset;
+  --_container-shape-start-start: var(--card-container-shape-start-start, var(--card-container-shape));
+  --_container-shape-start-end: var(--card-container-shape-start-end, var(--card-container-shape));
+  --_container-shape-end-start: var(--card-container-shape-end-start, var(--card-container-shape));
+  --_container-shape-end-end: var(--card-container-shape-end-end, var(--card-container-shape));
 }
 
 /*
@@ -41,14 +46,10 @@ var css_248z$1 = i`* {
 }
 
 .card {
-  position: relative;
   display: flex;
   height: 100%;
   width: 100%;
-  --_container-shape-start-start: var(--card-container-shape-start-start, var(--card-container-shape));
-  --_container-shape-start-end: var(--card-container-shape-start-end, var(--card-container-shape));
-  --_container-shape-end-start: var(--card-container-shape-end-start, var(--card-container-shape));
-  --_container-shape-end-end: var(--card-container-shape-end-end, var(--card-container-shape));
+  z-index: 0;
 }
 .card .card-content {
   z-index: 0;
@@ -72,12 +73,11 @@ var css_248z$1 = i`* {
   width: 100%;
   height: 100%;
 }
-.card {
-  /*
-    Background layers
-   */
-}
-.card .focus-ring {
+
+/*
+  Background layers
+ */
+.focus-ring {
   z-index: 2;
   display: none;
   --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
@@ -86,7 +86,8 @@ var css_248z$1 = i`* {
   --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
   --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
 }
-.card .ripple {
+
+.ripple {
   display: none;
   border-start-start-radius: var(--_container-shape-start-start);
   border-start-end-radius: var(--_container-shape-start-end);
@@ -96,7 +97,8 @@ var css_248z$1 = i`* {
   --ripple-state-opacity: var(--_container-state-opacity, 0);
   --ripple-pressed-color: var(--_container-state-color);
 }
-.card .background {
+
+.background {
   z-index: 0;
   display: block;
   position: absolute;
@@ -113,7 +115,8 @@ var css_248z$1 = i`* {
   corner-shape: var(--_container-corner-shape-variant);
   pointer-events: none;
 }
-.card .elevation {
+
+.elevation {
   --elevation-level: var(--_container-elevation-level);
   transition-duration: 280ms;
   --elevation-container-shape-start-start: var(--_container-shape-start-start);
@@ -122,7 +125,8 @@ var css_248z$1 = i`* {
   --elevation-container-shape-end-end: var(--_container-shape-end-end);
   --elevation-container-shape-variant: var(--_container-corner-shape-variant);
 }
-.card .outline {
+
+.outline {
   z-index: 0;
   display: none;
   position: absolute;
@@ -140,83 +144,83 @@ var css_248z$1 = i`* {
   corner-shape: var(--_container-corner-shape-variant);
 }
 
-.card.actionable .focus-ring,
-.card.actionable .ripple {
+:host([actionable]) .focus-ring,
+:host([actionable]) .ripple {
   display: block;
 }
-.card.actionable .card-content {
+:host([actionable]) .card-content {
   pointer-events: none;
 }
 
-.card.variant-elevated {
+:host([variant=elevated]) {
   --_container-color: var(--elevated-card-container-color);
   --_label-text-color: var(--elevated-card-label-text-color);
   --_container-elevation-level: 1;
   --_container-state-color: var(--_label-text-color);
 }
-.card.variant-elevated:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=elevated]):hover:not([disabled]) {
   --_container-elevation-level: 2;
   --_container-state-opacity: 0.08;
 }
-.card.variant-elevated.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=elevated]):has(.card.pressed):not([disabled]) {
   --_container-elevation-level: 1;
   --_container-state-opacity: 0.12;
 }
-.card.variant-elevated.disabled {
+:host([variant=elevated])[disabled] {
   --_container-color: var(--color-on-surface);
   --_container-opacity: 0.1;
   --_label-text-color: var(--color-on-surface);
   --_label-text-opacity: 0.38;
 }
-.card.variant-elevated.disabled .ripple {
+:host([variant=elevated])[disabled] .ripple {
   display: none;
 }
 
-.card.variant-filled {
+:host([variant=filled]) {
   --_container-color: var(--filled-card-container-color);
   --_label-text-color: var(--filled-card-label-text-color);
   --_container-state-color: var(--_label-text-color);
 }
-.card.variant-filled:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=filled]):hover:not([disabled]) {
   --_container-elevation-level: 1;
   --_container-state-opacity: 0.08;
 }
-.card.variant-filled.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=filled]):has(.card.pressed):not([disabled]) {
   --_container-elevation-level: 0;
   --_container-state-opacity: 0.1;
 }
-.card.variant-filled.disabled {
+:host([variant=filled])[disabled] {
   --_container-color: var(--color-on-surface);
   --_container-opacity: 0.1;
   --_label-text-color: var(--color-on-surface);
   --_label-text-opacity: 0.38;
 }
-.card.variant-filled.disabled .ripple {
+:host([variant=filled])[disabled] .ripple {
   display: none;
 }
 
-.card.variant-outlined {
+:host([variant=outlined]) {
   --_outline-width: var(--outlined-card-outline-width, 0.0675rem);
   --_outline-color: var(--outlined-card-outline-color);
   --_label-text-color: var(--outlined-card-label-text-color);
   --_container-state-color: var(--_label-text-color);
 }
-.card.variant-outlined .outline {
+:host([variant=outlined]) .outline {
   display: block;
 }
-.card.variant-outlined:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=outlined]):hover:not([disabled]) {
   --_container-state-opacity: 0.08;
 }
-.card.variant-outlined.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+:host([variant=outlined]):has(.card.pressed):not([disabled]) {
   --_container-state-opacity: 0.12;
 }
-.card.variant-outlined.disabled {
+:host([variant=outlined])[disabled] {
   --_outline-color: var(--color-on-surface);
   --_label-text-color: var(--color-on-surface);
   --_label-text-opacity: 0.38;
   --_outline-opacity: 0.12;
 }
-.card.variant-outlined.disabled .ripple {
+:host([variant=outlined])[disabled] .ripple {
   display: none;
 }`;
 
@@ -241,13 +245,15 @@ var _Card_id, _Card_tabindex;
  *
  * @example
  * ```html
- * <wc-card variant="outlined">
- *   <h3>Title</h3>
- *   <p>Supportive text</p>
+ * <wc-card variant="outlined" style="padding-block: 1rem;">
+ *   <wc-card-content>
+ *     <h3 class="text-headline">Title</h3>
+ *     <p class="text-body">Supportive text</p>
+ *   </wc-card-content>
  * </wc-card>
  * ```
  */
-let Card = class Card extends BaseHyperlinkMixin(i$1) {
+let Card = class Card extends NativeHyperlinkMixin(i$1) {
     constructor() {
         super(...arguments);
         _Card_id.set(this, crypto.randomUUID());
@@ -255,8 +261,8 @@ let Card = class Card extends BaseHyperlinkMixin(i$1) {
         this.disabled = false;
         this.actionable = false;
         /**
-        * If button is disabled, the reason why it is disabled.
-        */
+         * If button is disabled, the reason why it is disabled.
+         */
         this.disabledReason = '';
         /**
          * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
@@ -328,74 +334,74 @@ let Card = class Card extends BaseHyperlinkMixin(i$1) {
         return A;
     }
     render() {
-        const isLink = this.__isLink();
-        const disableSlotTabbing = this.actionable || isLink;
+        const isLinkElement = isLink(this);
+        const disableSlotTabbing = this.actionable || isLinkElement;
+        return b `
+      <wc-focus-ring class="focus-ring" for="card"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple" for="card"></wc-ripple>
+
+      ${this.renderCardElement(isLinkElement, disableSlotTabbing)}
+    `;
+    }
+    renderCardElement(isLinkElement, disableSlotTabbing) {
         const cssClasses = {
             card: true,
             'card-element': true,
             [`variant-${this.variant}`]: true,
-            actionable: (this.actionable && !this.disabled) || isLink,
+            actionable: (this.actionable && !this.disabled) || isLinkElement,
             disabled: this.disabled,
             pressed: this.isPressed,
             'has-content': this.slotHasContent,
         };
-        if (!this.actionable && !isLink) {
-            return b `<div
-              class=${e(cssClasses)}
-              id="card"
-              >
-              ${this.renderCardContent(disableSlotTabbing)}
-            </div>`;
+        if (!this.actionable && !isLinkElement) {
+            return b `<div class=${e(cssClasses)} id="card">
+        ${this.renderCardContent(disableSlotTabbing)}
+      </div>`;
         }
-        if (!isLink) {
+        if (!isLinkElement) {
             return b `<button
-              class=${e(cssClasses)}
-              id="card"
-              tabindex=${__classPrivateFieldGet(this, _Card_tabindex, "f")}
-              @click=${this.__dispatchClickWithThrottle}
-              @mousedown=${this.__handlePress}
-              @keydown=${this.__handlePress}
-              @keyup=${this.__handlePress}
-              ?aria-describedby=${this.__getDisabledReasonID()}
-              aria-disabled=${`${this.disabled}`}
-              ?disabled=${this.disabled}
-            >
-              ${this.renderCardContent(disableSlotTabbing)}
-            </button>`;
+        class=${e(cssClasses)}
+        id="card"
+        tabindex=${__classPrivateFieldGet(this, _Card_tabindex, "f")}
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        ?aria-describedby=${this.__getDisabledReasonID()}
+        aria-disabled=${`${this.disabled}`}
+        ?disabled=${this.disabled}
+      >
+        ${this.renderCardContent(disableSlotTabbing)}
+      </button>`;
         }
         return b `<a
-            class=${e(cssClasses)}
-            id="card"
-            tabindex=${__classPrivateFieldGet(this, _Card_tabindex, "f")}
-            href=${this.href}
-            target=${this.target}
-            @click=${this.__dispatchClickWithThrottle}
-            @mousedown=${this.__handlePress}
-            @keydown=${this.__handlePress}
-            @keyup=${this.__handlePress}
-            role="button"
-            ?aria-describedby=${this.__getDisabledReasonID()}
-            aria-disabled=${`${this.disabled}`}
-          >
-            ${this.renderCardContent(disableSlotTabbing)}
-          </a>`;
+      class=${e(cssClasses)}
+      id="card"
+      tabindex=${__classPrivateFieldGet(this, _Card_tabindex, "f")}
+      href=${this.href}
+      target=${this.target}
+      @click=${this.__dispatchClickWithThrottle}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handlePress}
+      @keyup=${this.__handlePress}
+      role="button"
+      ?aria-describedby=${this.__getDisabledReasonID()}
+      aria-disabled=${`${this.disabled}`}
+    >
+      ${this.renderCardContent(disableSlotTabbing)}
+    </a>`;
     }
     renderCardContent(disableSlotTabbing) {
         return b `
-      <wc-focus-ring class="focus-ring" for='card'></wc-focus-ring>
-      <wc-elevation class="elevation"></wc-elevation>
-      <div class="background"></div>
-      <div class="outline"></div>
-      <wc-ripple class="ripple"></wc-ripple> 
-
       <div class="card-content">
-
         <div class="slot-container" ?inert=${disableSlotTabbing}>
           <slot></slot>
         </div>
-
       </div>
-      `;
+    `;
     }
 };
 _Card_id = new WeakMap();

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../src/card/card.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.js';\nimport { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './card.scss';\nimport colorStyles from './card-colors.scss';\nimport BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';\n\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * @label Card\n * @tag wc-card\n * @rawTag card\n * @summary A Material 3 inspired card surface for grouping related content.\n * @cssprop --card-padding - Inner padding for the card container. Defaults to 1rem.\n * @cssprop --card-shape - Corner radius for the card container. Defaults to a large radius.\n * @cssprop --card-gap - Gap between slotted children.\n *\n * @example\n * ```html\n * <wc-card variant=\"outlined\">\n *   <h3>Title</h3>\n *   <p>Supportive text</p>\n * </wc-card>\n * ```\n */\n@IndividualComponent\nexport class Card extends BaseHyperlinkMixin(LitElement) {\n  static styles = [styles, colorStyles];\n\n  #id = crypto.randomUUID();\n\n  @property({ type: String, reflect: true })\n  variant: CardVariant = 'elevated';\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  actionable: boolean = false;\n\n  /**\n  * If button is disabled, the reason why it is disabled.\n  */\n  @property({ attribute: 'disabled-reason' })\n  disabledReason: string = '';\n\n  /**\n   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.\n   */\n  @property() throttleDelay = 200;\n\n  /**\n   * States\n   */\n  @state()\n  isPressed = false;\n\n  @state()\n  private slotHasContent = false;\n\n\n  @query('.card') readonly cardElement!: HTMLElement | null;\n\n  #tabindex?: number = 0;\n\n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\n    };\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.disabled && this.href) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.cardElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.cardElement);\n  };\n\n  __getDisabledReasonID() {\n    return this.disabled && this.disabledReason\n      ? `disabled-reason-${this.#id}`\n      : nothing;\n  }\n\n  __renderDisabledReason() {\n    const disabledReasonID = this.__getDisabledReasonID();\n    if (disabledReasonID)\n      return html`<div\n        id=\"disabled-reason-${this.#id}\"\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  __handlePress = (event: KeyboardEvent | MouseEvent) => {\n    if (this.disabled) return;\n    if (\n      event instanceof KeyboardEvent &&\n      event.type === 'keydown' &&\n      (event.key === 'Enter' || event.key === ' ')\n    ) {\n      this.isPressed = true;\n    } else if (event.type === 'mousedown') {\n      this.isPressed = true;\n    } else {\n      this.isPressed = false;\n    }\n  };\n\n\n\n\n  render() {\n\n    const isLink = this.__isLink();\n    const disableSlotTabbing = this.actionable || isLink;\n\n    const cssClasses = {\n      card: true,\n      'card-element': true,\n      [`variant-${this.variant}`]: true,\n      actionable: (this.actionable && !this.disabled) || isLink,\n      disabled: this.disabled,\n      pressed: this.isPressed,\n      'has-content': this.slotHasContent,\n    };\n\n    if (!this.actionable && !isLink) {\n      return html`<div\n              class=${classMap(cssClasses)}\n              id=\"card\"\n              >\n              ${this.renderCardContent(disableSlotTabbing)}\n            </div>`;\n    }\n\n    if (!isLink) {\n      return html`<button\n              class=${classMap(cssClasses)}\n              id=\"card\"\n              tabindex=${this.#tabindex}\n              @click=${this.__dispatchClickWithThrottle}\n              @mousedown=${this.__handlePress}\n              @keydown=${this.__handlePress}\n              @keyup=${this.__handlePress}\n              ?aria-describedby=${this.__getDisabledReasonID()}\n              aria-disabled=${`${this.disabled}`}\n              ?disabled=${this.disabled}\n            >\n              ${this.renderCardContent(disableSlotTabbing)}\n            </button>`;\n    }\n    return html`<a\n            class=${classMap(cssClasses)}\n            id=\"card\"\n            tabindex=${this.#tabindex}\n            href=${this.href}\n            target=${this.target}\n            @click=${this.__dispatchClickWithThrottle}\n            @mousedown=${this.__handlePress}\n            @keydown=${this.__handlePress}\n            @keyup=${this.__handlePress}\n            role=\"button\"\n            ?aria-describedby=${this.__getDisabledReasonID()}\n            aria-disabled=${`${this.disabled}`}\n          >\n            ${this.renderCardContent(disableSlotTabbing)}\n          </a>`;\n  }\n\n  renderCardContent(disableSlotTabbing: boolean) {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for='card'></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple> \n\n      <div class=\"card-content\">\n\n        <div class=\"slot-container\" ?inert=${disableSlotTabbing}>\n          <slot></slot>\n        </div>\n\n      </div>\n      `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","colorStyles","property","state","query"],"mappings":"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"}
+{"version":3,"file":"card.js","sources":["../../src/card/card.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../__utils/dispatch-event-utils.js';\nimport { isLink } from '@/__utils/is-link.js';\nimport { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './card.scss';\nimport colorStyles from './card-colors.scss';\nimport NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';\n\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * @label Card\n * @tag wc-card\n * @rawTag card\n * @summary A Material 3 inspired card surface for grouping related content.\n * @cssprop --card-padding - Inner padding for the card container. Defaults to 1rem.\n * @cssprop --card-shape - Corner radius for the card container. Defaults to a large radius.\n * @cssprop --card-gap - Gap between slotted children.\n *\n * @example\n * ```html\n * <wc-card variant=\"outlined\" style=\"padding-block: 1rem;\">\n *   <wc-card-content>\n *     <h3 class=\"text-headline\">Title</h3>\n *     <p class=\"text-body\">Supportive text</p>\n *   </wc-card-content>\n * </wc-card>\n * ```\n */\n@IndividualComponent\nexport class Card extends NativeHyperlinkMixin(LitElement) {\n  static styles = [styles, colorStyles];\n\n  #id = crypto.randomUUID();\n\n  @property({ type: String, reflect: true })\n  variant: CardVariant = 'elevated';\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  actionable: boolean = false;\n\n  /**\n   * If button is disabled, the reason why it is disabled.\n   */\n  @property({ attribute: 'disabled-reason' })\n  disabledReason: string = '';\n\n  /**\n   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.\n   */\n  @property() throttleDelay = 200;\n\n  /**\n   * States\n   */\n  @state()\n  isPressed = false;\n\n  @state()\n  private slotHasContent = false;\n\n  @query('.card') readonly cardElement!: HTMLElement | null;\n\n  #tabindex?: number = 0;\n\n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\n    };\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.disabled && this.href) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.cardElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.cardElement);\n  };\n\n  __getDisabledReasonID() {\n    return this.disabled && this.disabledReason\n      ? `disabled-reason-${this.#id}`\n      : nothing;\n  }\n\n  __renderDisabledReason() {\n    const disabledReasonID = this.__getDisabledReasonID();\n    if (disabledReasonID)\n      return html`<div\n        id=\"disabled-reason-${this.#id}\"\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  __handlePress = (event: KeyboardEvent | MouseEvent) => {\n    if (this.disabled) return;\n    if (\n      event instanceof KeyboardEvent &&\n      event.type === 'keydown' &&\n      (event.key === 'Enter' || event.key === ' ')\n    ) {\n      this.isPressed = true;\n    } else if (event.type === 'mousedown') {\n      this.isPressed = true;\n    } else {\n      this.isPressed = false;\n    }\n  };\n\n  render() {\n    const isLinkElement = isLink(this);\n    const disableSlotTabbing = this.actionable || isLinkElement;\n\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"card\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\" for=\"card\"></wc-ripple>\n\n      ${this.renderCardElement(isLinkElement, disableSlotTabbing)}\n    `;\n  }\n\n  renderCardElement(isLinkElement: boolean, disableSlotTabbing: boolean) {\n    const cssClasses = {\n      card: true,\n      'card-element': true,\n      [`variant-${this.variant}`]: true,\n      actionable: (this.actionable && !this.disabled) || isLinkElement,\n      disabled: this.disabled,\n      pressed: this.isPressed,\n      'has-content': this.slotHasContent,\n    };\n\n    if (!this.actionable && !isLinkElement) {\n      return html`<div class=${classMap(cssClasses)} id=\"card\">\n        ${this.renderCardContent(disableSlotTabbing)}\n      </div>`;\n    }\n\n    if (!isLinkElement) {\n      return html`<button\n        class=${classMap(cssClasses)}\n        id=\"card\"\n        tabindex=${this.#tabindex}\n        @click=${this.__dispatchClickWithThrottle}\n        @mousedown=${this.__handlePress}\n        @keydown=${this.__handlePress}\n        @keyup=${this.__handlePress}\n        ?aria-describedby=${this.__getDisabledReasonID()}\n        aria-disabled=${`${this.disabled}`}\n        ?disabled=${this.disabled}\n      >\n        ${this.renderCardContent(disableSlotTabbing)}\n      </button>`;\n    }\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"card\"\n      tabindex=${this.#tabindex}\n      href=${this.href}\n      target=${this.target}\n      @click=${this.__dispatchClickWithThrottle}\n      @mousedown=${this.__handlePress}\n      @keydown=${this.__handlePress}\n      @keyup=${this.__handlePress}\n      role=\"button\"\n      ?aria-describedby=${this.__getDisabledReasonID()}\n      aria-disabled=${`${this.disabled}`}\n    >\n      ${this.renderCardContent(disableSlotTabbing)}\n    </a>`;\n  }\n\n  renderCardContent(disableSlotTabbing: boolean) {\n    return html`\n      <div class=\"card-content\">\n        <div class=\"slot-container\" ?inert=${disableSlotTabbing}>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","colorStyles","property","state","query"],"mappings":"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"}

package/dist/cb-compound-expression.js

@@ -30,6 +30,7 @@ var css_248z = i`* {
   line-height: var(--typography-label-medium-line-height);
   letter-spacing: var(--typography-label-medium-letter-spacing);
   color: var(--color-on-surface-variant);
+  text-align: center;
 }
 .compound-expression .field-name-container .field-compound-type {
   flex: 1;
@@ -37,6 +38,9 @@ var css_248z = i`* {
 }
 .compound-expression .conditions {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 .slot-end {
@@ -49,7 +53,6 @@ var css_248z = i`* {
  * @rawTag cb-compound-expression
  * @summary A compound expression group in a condition builder that displays a field label, an optional condition operator divider, and slots for child expressions.
  * @tags condition-builder
- * @parentRawTag compound-builder
  *
  * @example
  * ```html

package/dist/cb-compound-expression.js.map

@@ -1 +1 @@
-{"version":3,"file":"cb-compound-expression.js","sources":["../../src/condition-builder/cb-compound-expression.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-compound-expression.scss';\n\n/**\n * @label CB Compound Expression\n * @tag wc-cb-compound-expression\n * @rawTag cb-compound-expression\n * @summary A compound expression group in a condition builder that displays a field label, an optional condition operator divider, and slots for child expressions.\n * @tags condition-builder\n * @parentRawTag compound-builder\n *\n * @example\n * ```html\n * <wc-cb-compound-expression field-label=\"Age\" condition-operator=\"or\">\n *   <wc-cb-expression>\n *     <wc-input placeholder=\"Enter value\"></wc-input>\n *   </wc-cb-expression>\n * </wc-cb-compound-expression>\n * ```\n */\n@IndividualComponent\nexport class CbCompoundExpression extends LitElement {\n  static styles = [styles];\n\n  /** The logical operator joining conditions in this group ('and' or 'or'). */\n  @property({ type: String, attribute: 'condition-operator', reflect: true })\n  conditionOperator?: 'and' | 'or';\n\n  /** The field name for the compound expression. */\n  @property({ type: String, attribute: 'field-name' })\n  fieldName = '';\n\n  /** The display label for the field. */\n  @property({ type: String, attribute: 'field-label' })\n  fieldLabel = '';\n\n  override updated() {\n    this.__adjustSlotEndPadding();\n  }\n\n  private __adjustSlotEndPadding() {\n    const slotEnd = this.renderRoot.querySelector<HTMLElement>('.slot-end');\n    const fieldNameContainer =\n      this.renderRoot.querySelector<HTMLElement>('.field-name-container');\n    if (slotEnd && fieldNameContainer) {\n      slotEnd.style.paddingInlineStart =\n        fieldNameContainer.getBoundingClientRect().width + 'px';\n    }\n  }\n\n  private __renderOperatorDivider() {\n    if (!this.conditionOperator) return nothing;\n    return html`\n      <wc-cb-divider connect-end>\n        <wc-tag color=\"yellow\" size=\"sm\">${this.conditionOperator}</wc-tag>\n      </wc-cb-divider>\n    `;\n  }\n\n  render() {\n    return html`\n      <div class=\"compound-expression\" field-name=${this.fieldName}>\n        <div class=\"field-name-container\">\n          <span class=\"field-label\">${this.fieldLabel}</span>\n          <div class=\"field-compound-type\">\n            ${this.__renderOperatorDivider()}\n          </div>\n        </div>\n        <div class=\"conditions\">\n          <slot></slot>\n        </div>\n      </div>\n      <div class=\"slot-end\">\n        <slot name=\"end\"></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;;;AAgBG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQA,GAAU,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QASL,IAAA,CAAA,SAAS,GAAG,EAAE;;QAId,IAAA,CAAA,UAAU,GAAG,EAAE;IA2CjB;IAzCW,OAAO,GAAA;QACd,IAAI,CAAC,sBAAsB,EAAE;IAC/B;IAEQ,sBAAsB,GAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,WAAW,CAAC;QACvE,MAAM,kBAAkB,GACtB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,uBAAuB,CAAC;AACrE,QAAA,IAAI,OAAO,IAAI,kBAAkB,EAAE;YACjC,OAAO,CAAC,KAAK,CAAC,kBAAkB;AAC9B,gBAAA,kBAAkB,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,IAAI;QAC3D;IACF;IAEQ,uBAAuB,GAAA;QAC7B,IAAI,CAAC,IAAI,CAAC,iBAAiB;AAAE,YAAA,OAAOC,CAAO;AAC3C,QAAA,OAAOC,CAAI,CAAA;;AAE4B,yCAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;KAE5D;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOA,CAAI,CAAA;AACqC,kDAAA,EAAA,IAAI,CAAC,SAAS,CAAA;;AAE5B,oCAAA,EAAA,IAAI,CAAC,UAAU,CAAA;;cAEvC,IAAI,CAAC,uBAAuB,EAAE;;;;;;;;;;KAUvC;IACH;;AAtDO,oBAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIxB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAE;AACzC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,MAAA,CAAA;AAIjC,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE;AACpC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAIf,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE;AACpC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAbL,oBAAoB,GAAA,UAAA,CAAA;IADhC;AACY,CAAA,EAAA,oBAAoB,CAwDhC;;;;"}
+{"version":3,"file":"cb-compound-expression.js","sources":["../../src/condition-builder/cb-compound-expression.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-compound-expression.scss';\n\n/**\n * @label CB Compound Expression\n * @tag wc-cb-compound-expression\n * @rawTag cb-compound-expression\n * @summary A compound expression group in a condition builder that displays a field label, an optional condition operator divider, and slots for child expressions.\n * @tags condition-builder\n *\n * @example\n * ```html\n * <wc-cb-compound-expression field-label=\"Age\" condition-operator=\"or\">\n *   <wc-cb-expression>\n *     <wc-input placeholder=\"Enter value\"></wc-input>\n *   </wc-cb-expression>\n * </wc-cb-compound-expression>\n * ```\n */\n@IndividualComponent\nexport class CbCompoundExpression extends LitElement {\n  static styles = [styles];\n\n  /** The logical operator joining conditions in this group ('and' or 'or'). */\n  @property({ type: String, attribute: 'condition-operator', reflect: true })\n  conditionOperator?: 'and' | 'or';\n\n  /** The field name for the compound expression. */\n  @property({ type: String, attribute: 'field-name' })\n  fieldName = '';\n\n  /** The display label for the field. */\n  @property({ type: String, attribute: 'field-label' })\n  fieldLabel = '';\n\n  override updated() {\n    this.__adjustSlotEndPadding();\n  }\n\n  private __adjustSlotEndPadding() {\n    const slotEnd = this.renderRoot.querySelector<HTMLElement>('.slot-end');\n    const fieldNameContainer =\n      this.renderRoot.querySelector<HTMLElement>('.field-name-container');\n    if (slotEnd && fieldNameContainer) {\n      slotEnd.style.paddingInlineStart =\n        fieldNameContainer.getBoundingClientRect().width + 'px';\n    }\n  }\n\n  private __renderOperatorDivider() {\n    if (!this.conditionOperator) return nothing;\n    return html`\n      <wc-cb-divider connect-end>\n        <wc-tag color=\"yellow\" size=\"sm\">${this.conditionOperator}</wc-tag>\n      </wc-cb-divider>\n    `;\n  }\n\n  render() {\n    return html`\n      <div class=\"compound-expression\" field-name=${this.fieldName}>\n        <div class=\"field-name-container\">\n          <span class=\"field-label\">${this.fieldLabel}</span>\n          <div class=\"field-compound-type\">\n            ${this.__renderOperatorDivider()}\n          </div>\n        </div>\n        <div class=\"conditions\">\n          <slot></slot>\n        </div>\n      </div>\n      <div class=\"slot-end\">\n        <slot name=\"end\"></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;;AAeG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQA,GAAU,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QASL,IAAA,CAAA,SAAS,GAAG,EAAE;;QAId,IAAA,CAAA,UAAU,GAAG,EAAE;IA2CjB;IAzCW,OAAO,GAAA;QACd,IAAI,CAAC,sBAAsB,EAAE;IAC/B;IAEQ,sBAAsB,GAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,WAAW,CAAC;QACvE,MAAM,kBAAkB,GACtB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,uBAAuB,CAAC;AACrE,QAAA,IAAI,OAAO,IAAI,kBAAkB,EAAE;YACjC,OAAO,CAAC,KAAK,CAAC,kBAAkB;AAC9B,gBAAA,kBAAkB,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,IAAI;QAC3D;IACF;IAEQ,uBAAuB,GAAA;QAC7B,IAAI,CAAC,IAAI,CAAC,iBAAiB;AAAE,YAAA,OAAOC,CAAO;AAC3C,QAAA,OAAOC,CAAI,CAAA;;AAE4B,yCAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;KAE5D;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOA,CAAI,CAAA;AACqC,kDAAA,EAAA,IAAI,CAAC,SAAS,CAAA;;AAE5B,oCAAA,EAAA,IAAI,CAAC,UAAU,CAAA;;cAEvC,IAAI,CAAC,uBAAuB,EAAE;;;;;;;;;;KAUvC;IACH;;AAtDO,oBAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIxB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAE;AACzC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,MAAA,CAAA;AAIjC,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE;AACpC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAIf,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE;AACpC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAbL,oBAAoB,GAAA,UAAA,CAAA;IADhC;AACY,CAAA,EAAA,oBAAoB,CAwDhC;;;;"}

package/dist/cb-divider.js

@@ -95,7 +95,6 @@ var css_248z = i`* {
  * @rawTag cb-divider
  * @summary A divider line used within a condition builder to visually connect expressions with operator tags.
  * @tags condition-builder
- * @parentRawTag compound-builder
  *
  * @example
  * ```html

package/dist/cb-divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"cb-divider.js","sources":["../../src/condition-builder/cb-divider.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-divider.scss';\n\n/**\n * @label CB Divider\n * @tag wc-cb-divider\n * @rawTag cb-divider\n * @summary A divider line used within a condition builder to visually connect expressions with operator tags.\n * @tags condition-builder\n * @parentRawTag compound-builder\n *\n * @example\n * ```html\n * <wc-cb-divider>\n *   <wc-tag color=\"green\">and</wc-tag>\n * </wc-cb-divider>\n * ```\n */\n@IndividualComponent\nexport class CbDivider extends LitElement {\n  static styles = [styles];\n\n  /** Whether to render the divider vertically instead of horizontally. */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  /** Whether to render a connecting line at the start. */\n  @property({ type: Boolean, reflect: true, attribute: 'connect-start' })\n  connectStart = false;\n\n  /** Whether to render a connecting line at the end. */\n  @property({ type: Boolean, reflect: true, attribute: 'connect-end' })\n  connectEnd = false;\n\n  render() {\n    const classes = {\n      divider: true,\n      'connect-start': this.connectStart,\n      'connect-end': this.connectEnd,\n      vertical: this.vertical,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <div class=\"line line-start\"></div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n        <div class=\"line line-end\"></div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;AAcG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;AAAlC,IAAA,WAAA,GAAA;;;QAKL,IAAA,CAAA,QAAQ,GAAG,KAAK;;QAIhB,IAAA,CAAA,YAAY,GAAG,KAAK;;QAIpB,IAAA,CAAA,UAAU,GAAG,KAAK;IAoBpB;IAlBE,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI,CAAC,YAAY;YAClC,aAAa,EAAE,IAAI,CAAC,UAAU;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AAED,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,OAAO,CAAC,CAAA;;;;;;;KAO/B;IACH;;AA/BO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACzB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAIjB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE;AACjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAIrB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE;AACjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAbR,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CAiCrB;;;;"}
+{"version":3,"file":"cb-divider.js","sources":["../../src/condition-builder/cb-divider.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-divider.scss';\n\n/**\n * @label CB Divider\n * @tag wc-cb-divider\n * @rawTag cb-divider\n * @summary A divider line used within a condition builder to visually connect expressions with operator tags.\n * @tags condition-builder\n *\n * @example\n * ```html\n * <wc-cb-divider>\n *   <wc-tag color=\"green\">and</wc-tag>\n * </wc-cb-divider>\n * ```\n */\n@IndividualComponent\nexport class CbDivider extends LitElement {\n  static styles = [styles];\n\n  /** Whether to render the divider vertically instead of horizontally. */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  /** Whether to render a connecting line at the start. */\n  @property({ type: Boolean, reflect: true, attribute: 'connect-start' })\n  connectStart = false;\n\n  /** Whether to render a connecting line at the end. */\n  @property({ type: Boolean, reflect: true, attribute: 'connect-end' })\n  connectEnd = false;\n\n  render() {\n    const classes = {\n      divider: true,\n      'connect-start': this.connectStart,\n      'connect-end': this.connectEnd,\n      vertical: this.vertical,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <div class=\"line line-start\"></div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n        <div class=\"line line-end\"></div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;AAaG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;AAAlC,IAAA,WAAA,GAAA;;;QAKL,IAAA,CAAA,QAAQ,GAAG,KAAK;;QAIhB,IAAA,CAAA,YAAY,GAAG,KAAK;;QAIpB,IAAA,CAAA,UAAU,GAAG,KAAK;IAoBpB;IAlBE,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI,CAAC,YAAY;YAClC,aAAa,EAAE,IAAI,CAAC,UAAU;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AAED,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,OAAO,CAAC,CAAA;;;;;;;KAO/B;IACH;;AA/BO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACzB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAIjB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE;AACjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAIrB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE;AACjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAbR,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CAiCrB;;;;"}