@diwacopilot/components 1.1.1 → 1.2.1

package/dist-custom-elements/p-7c951f7f.js.map

@@ -1 +0,0 @@
-{"file":"p-7c951f7f.js","mappings":";;;AAGO,MAAM,eAAe,GAAG,CAAC,KAAiB;IAC/C,MAAM,UAAU,GACd,KAAK,KAAK,SAAS;UACf,kCAAkC;UAClC,KAAK,KAAK,OAAO;cACf,gCAAgC;cAChC,KAAK,KAAK,SAAS;kBACjB,kCAAkC;kBAClC,KAAK,KAAK,MAAM;sBACd,+BAA+B;sBAC/B,4BAA4B,CAAC;IAEzC,MAAM,OAAO,GACX,KAAK,KAAK,SAAS;UACf,uCAAuC;UACvC,KAAK,KAAK,OAAO;cACf,qCAAqC;cACrC,KAAK,KAAK,SAAS;kBACjB,uCAAuC;kBACvC,KAAK,KAAK,MAAM;sBACd,oCAAoC;sBACpC,yBAAyB,CAAC;IAEtC,OAAO;;;;;;;;;;;;;;;;;;;kBAmBS,OAAO;kDACyB,UAAU;;;;;;;;;;;;;;aAc/C,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;IA0BnB,oBAAoB,CAAC,QAAQ,EAAE,kCAAkC,CAAC;;IAElE,aAAa,CAAC,QAAQ,CAAC;;IAEvB,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC;GAC1C,CAAC;AACJ,CAAC;;ACvFD,MAAM,WAAW,GAA+B;IAC9C,OAAO,EAAE,2QAA2Q;IACpR,IAAI,EAAE,2QAA2Q;IACjR,OAAO,EAAE,6NAA6N;IACtO,OAAO,EAAE,iRAAiR;IAC1R,KAAK,EAAE,6PAA6P;CACrQ,CAAC;AAEF,MAAM,UAAU,GAAG,8MAA8M,CAAC;MAYrN,aAAa;IAJ1B;;;;;;QAM2B,UAAK,GAAU,MAAM,CAAC;;QAGvC,SAAI,GAAW,EAAE,CAAC;;QAGD,UAAK,GAAe,SAAS,CAAC;QAQ/C,gBAAW,GAAG;YACpB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB,CAAC;KAoBH;IAlBC,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,IAAI,CAAC,KAAK,IAC1B,8DAAO,SAAS,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,EACjD,4DAAK,KAAK,EAAC,OAAO,IAChB,6DAAM,KAAK,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAI,EAC5E,6DAAM,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAQ,EACrC,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,gBACF,sBAAsB,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,UAAU,GACrB,CACE,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/diwa-toast-item/diwa-toast-item-styles.ts","src/components/diwa-toast-item/diwa-toast-item.tsx"],"sourcesContent":["import type { ToastState } from './types';\r\nimport { getFocusStyle, getHoverCapableStyle, getReducedMotionStyle } from '../../utils/styles';\n\r\nexport const getComponentCss = (state: ToastState): string => {\r\n  const stateColor =\r\n    state === 'success'\r\n      ? 'var(--diwa-notification-success)'\r\n      : state === 'error'\r\n        ? 'var(--diwa-notification-error)'\r\n        : state === 'warning'\r\n          ? 'var(--diwa-notification-warning)'\r\n          : state === 'info'\r\n            ? 'var(--diwa-notification-info)'\r\n            : 'var(--diwa-text-secondary)';\r\n\r\n  const stateBg =\r\n    state === 'success'\r\n      ? 'var(--diwa-notification-success-soft)'\r\n      : state === 'error'\r\n        ? 'var(--diwa-notification-error-soft)'\r\n        : state === 'warning'\r\n          ? 'var(--diwa-notification-warning-soft)'\r\n          : state === 'info'\r\n            ? 'var(--diwa-notification-info-soft)'\r\n            : 'var(--diwa-bg-elevated)';\r\n\r\n  return `\r\n  :host {\r\n    display: block;\r\n    font-family: var(--diwa-font-family-base);\r\n    pointer-events: all;\r\n  }\r\n\r\n  :host([hidden]) {\r\n    display: none;\r\n  }\r\n\r\n  .toast {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: var(--diwa-space-3);\r\n    min-width: var(--diwa-toast-min-width);\r\n    max-width: var(--diwa-toast-max-width);\r\n    padding: var(--diwa-space-4);\r\n    border-radius: var(--diwa-radius-md);\r\n    background: ${stateBg};\r\n    border: var(--diwa-border-width-thin) solid ${stateColor};\r\n    box-shadow: var(--diwa-shadow-md);\r\n    animation: slideIn var(--diwa-motion-duration-short) var(--diwa-motion-easing-out);\r\n  }\r\n\r\n  @keyframes slideIn {\r\n    from { opacity: 0; transform: translateY(8px); }\r\n    to   { opacity: 1; transform: translateY(0); }\r\n  }\r\n\r\n  .icon {\r\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    color: ${stateColor};\r\n  }\r\n\r\n  .text {\r\n    flex: 1;\r\n    font-size: var(--diwa-font-size-sm);\r\n    color: var(--diwa-text-primary);\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .close {\n    flex-shrink: 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: var(--diwa-touch-target-min-size, 44px);\n    height: var(--diwa-touch-target-min-size, 44px);\n    border: none;\r\n    background: transparent;\r\n    color: var(--diwa-text-secondary);\r\n    cursor: pointer;\r\n    border-radius: var(--diwa-radius-sm);\r\n    padding: 0;\r\n    transition: color var(--diwa-transition-base);\n  }\n\n  ${getHoverCapableStyle('.close', 'color: var(--diwa-text-primary);')}\n\r\n  ${getFocusStyle('.close')}\r\n\r\n  ${getReducedMotionStyle('.toast', '.close')}\n  `;\n};\n","import { Component, Event, type EventEmitter, Host, Prop, h } from '@stencil/core';\r\nimport type { ToastState } from './types';\r\nimport type { Theme } from '../../utils/styles';\r\nimport { getComponentCss } from './diwa-toast-item-styles';\r\n\r\nconst STATE_ICONS: Record<ToastState, string> = {\r\n  neutral: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><line x1=\"8\" y1=\"5\" x2=\"8\" y2=\"8.5\"/><circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/></svg>`,\r\n  info: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><line x1=\"8\" y1=\"5\" x2=\"8\" y2=\"8.5\"/><circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/></svg>`,\r\n  success: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><polyline points=\"5,8 7,10 11,6\"/></svg>`,\r\n  warning: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M8 2.5L14 13H2L8 2.5Z\"/><line x1=\"8\" y1=\"6.5\" x2=\"8\" y2=\"9.5\"/><circle cx=\"8\" cy=\"11.5\" r=\"0.75\" fill=\"currentColor\" stroke=\"none\"/></svg>`,\r\n  error: `<svg viewBox=\"0 0 16 16\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><circle cx=\"8\" cy=\"8\" r=\"6.5\"/><line x1=\"5.5\" y1=\"5.5\" x2=\"10.5\" y2=\"10.5\"/><line x1=\"10.5\" y1=\"5.5\" x2=\"5.5\" y2=\"10.5\"/></svg>`,\r\n};\r\n\r\nconst CLOSE_ICON = `<svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"><line x1=\"4\" y1=\"4\" x2=\"12\" y2=\"12\"/><line x1=\"12\" y1=\"4\" x2=\"4\" y2=\"12\"/></svg>`;\r\n\r\n/**\r\n * @component diwa-toast-item\r\n *\r\n * Renders a single toast notification. Managed by `diwa-toast` — do not\r\n * use this component directly; use `diwa-toast.addMessage()` instead.\r\n */\r\n@Component({\r\n  tag: 'diwa-toast-item',\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DiwaToastItem {\r\n  /** Per-component theme override. */\r\n  @Prop({ reflect: true }) theme: Theme = 'dark';\r\n\r\n  /** Message text to display. */\r\n  @Prop() text: string = '';\r\n\r\n  /** Visual state affecting icon and colour. */\r\n  @Prop({ reflect: true }) state: ToastState = 'neutral';\r\n\r\n  /**\r\n   * Emitted when the user dismisses the toast or the auto-dismiss timer fires.\r\n   */\r\n  @Event({ bubbles: false, composed: false })\r\n  dismiss!: EventEmitter<void>;\r\n\r\n  private handleClose = () => {\r\n    this.dismiss.emit();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host data-theme={this.theme}>\r\n        <style innerHTML={getComponentCss(this.state)} />\r\n        <div class=\"toast\">\r\n          <span class=\"icon\" aria-hidden=\"true\" innerHTML={STATE_ICONS[this.state]} />\r\n          <span class=\"text\">{this.text}</span>\r\n          <button\r\n            type=\"button\"\r\n            class=\"close\"\r\n            aria-label=\"Dismiss notification\"\r\n            onClick={this.handleClose}\r\n            innerHTML={CLOSE_ICON}\r\n          />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}