@diwacopilot/components 1.1.1 → 1.2.1

package/dist-custom-elements/p-35c7c864.js.map

@@ -1 +0,0 @@
-{"file":"p-35c7c864.js","mappings":";;AAGA;;;;;;;MAOa,WAAW,GAAG,CACzB,KAAsB,EACtB,SAAkB,EAClB,SAAkB,EAClB,OAAgB,EAChB,QAAiB,EACjB,MAAe,EACf,SAAkB;IAElB,MAAM,WAAW,GACf,KAAK,KAAK,OAAO;UACb,gCAAgC;UAChC,KAAK,KAAK,SAAS;cACjB,kCAAkC;cAClC,0BAA0B,CAAC;IAEnC,MAAM,YAAY,GAChB,KAAK,KAAK,OAAO;UACb,gCAAgC;UAChC,KAAK,KAAK,SAAS;cACjB,kCAAkC;cAClC,4BAA4B,CAAC;IAErC,MAAM,WAAW,GAAG,OAAO;UACvB,iDAAiD;UACjD,mEAAmE,CAAC;IACxE,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,GAAG,mCAAmC,CAAC;IAC3E,MAAM,YAAY,GAAG,CAAC,MAAM,IAAI,SAAS,IAAI,KAAK,GAAG,mCAAmC,CAAC;IAEzF,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiDK,WAAW;;kDAEyB,WAAW;;;;;;;IAOzD,oBAAoB,CACpB,qEAAqE,EACrE,iBAAiB,KAAK,KAAK,MAAM,GAAG,0BAA0B,GAAG,WAAW,GAAG,CAChF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA8Cc,YAAY,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkD7B,OAAO,GAAG,iDAAiD,GAAG,yCAAyC;;;;;;;;;;;IAWpH,oBAAoB,CAAC,aAAa,EAAE,kCAAkC,CAAC;;;;;;;;;;;;;;;;;;;;aAoB9D,YAAY;;;;;IAKrB,qBAAqB,CAAC,gBAAgB,EAAE,aAAa,CAAC;CACzD,CAAC;AACF;;;;","names":[],"sources":["src/components/diwa-input/input-styles.ts"],"sourcesContent":["import type { InputFieldState } from './types';\nimport { getHoverCapableStyle, getReducedMotionStyle } from '../../utils/styles';\n\n/**\n * Returns the shared Shadow DOM CSS for all diwa-input-* components.\n *\n * NOTE: Border and background live on .input-wrapper so start/end slot content\n * shares the same bordered box as the native input. This also prevents Tailwind\n * v4 preflight from stripping padding set directly on :host.\n */\nexport const getInputCss = (\n  state: InputFieldState,\n  _disabled: boolean,\n  _readonly: boolean,\n  compact: boolean,\n  hasStart: boolean,\n  hasEnd: boolean,\n  hasSuffix: boolean,\n): string => {\n  const borderColor =\n    state === 'error'\n      ? 'var(--diwa-notification-error)'\n      : state === 'success'\n        ? 'var(--diwa-notification-success)'\n        : 'var(--diwa-input-border)';\n\n  const messageColor =\n    state === 'error'\n      ? 'var(--diwa-notification-error)'\n      : state === 'success'\n        ? 'var(--diwa-notification-success)'\n        : 'var(--diwa-text-secondary)';\n\n  const inputHeight = compact\n    ? 'var(--diwa-touch-target-min-size-compact, 32px)'\n    : 'var(--diwa-input-height, var(--diwa-touch-target-min-size, 44px))';\n  const paddingLeft = hasStart ? '4px' : 'var(--diwa-input-padding-x, 12px)';\n  const paddingRight = (hasEnd || hasSuffix) ? '4px' : 'var(--diwa-input-padding-x, 12px)';\n\n  return `\n  /* ── Host ──────────────────────────────────────────────────────────── */\n\n  :host {\n    display: block;\n    font-family: var(--diwa-font-family-base);\n    outline: none;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  /* ── Root layout ────────────────────────────────────────────────────── */\n\n  .root {\n    display: flex;\n    flex-direction: column;\n    gap: var(--diwa-space-2);\n  }\n\n  /* ── Label row ──────────────────────────────────────────────────────── */\n\n  .label-row {\n    display: flex;\n    align-items: baseline;\n    gap: var(--diwa-space-1);\n  }\n\n  .label {\n    display: block;\n    font-size: var(--diwa-font-size-sm);\n    font-weight: var(--diwa-font-weight-semibold);\n    color: var(--diwa-text-secondary);\n    line-height: var(--diwa-line-height-normal);\n    cursor: default;\n  }\n\n  .required {\n    color: var(--diwa-notification-error);\n    font-weight: var(--diwa-font-weight-semibold);\n  }\n\n  /* ── Input wrapper (owns border + background) ───────────────────────── */\n\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: ${inputHeight};\n    background: var(--diwa-input-bg, var(--diwa-bg-input));\n    border: var(--diwa-border-width-thin) solid ${borderColor};\n    border-radius: var(--diwa-input-radius, var(--diwa-radius-md));\n    box-sizing: border-box;\n    overflow: hidden;\n    transition: border-color var(--diwa-transition-fast), background var(--diwa-transition-fast), box-shadow var(--diwa-transition-fast);\n  }\n\n  ${getHoverCapableStyle(\n    '.input-wrapper:not(:has(input:disabled)):not(:has(input[readonly]))',\n    `border-color: ${state === 'none' ? 'var(--diwa-border-hover)' : borderColor};`,\n  )}\n\n  /* Focus — border and ring become visible on keyboard navigation */\n  .input-wrapper:focus-within {\n    border-color: var(--diwa-border-focus);\n    box-shadow: 0 0 0 var(--diwa-focus-ring-width) var(--diwa-border-focus);\n  }\n\n  /* Disabled */\n  .input-wrapper:has(input:disabled) {\n    opacity: var(--diwa-opacity-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* Read-only */\n  .input-wrapper:has(input[readonly]) {\n    background: var(--diwa-bg-surface);\n    border-style: dashed;\n    cursor: default;\n  }\n\n  /* ── Start / End slot containers ────────────────────────────────────── */\n\n  .slot-start {\n    display: flex;\n    align-items: center;\n    padding-left: var(--diwa-input-padding-x, 12px);\n    color: var(--diwa-text-secondary);\n    flex-shrink: 0;\n  }\n\n  .slot-end {\n    display: flex;\n    align-items: center;\n    padding-right: var(--diwa-input-padding-x, 12px);\n    color: var(--diwa-text-secondary);\n    flex-shrink: 0;\n  }\n\n  /* ── Native input ───────────────────────────────────────────────────── */\n\n  input.input {\n    flex: 1;\n    min-width: 0;\n    height: 100%;\n    padding: 0 ${paddingRight} 0 ${paddingLeft};\n    background: transparent;\n    border: none;\n    box-sizing: border-box;\n    appearance: none;\n    -webkit-appearance: none;\n    outline: none;\n    margin: 0;\n    font-family: inherit;\n    font-size: var(--diwa-font-size-base);\n    color: var(--diwa-text-primary);\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  input.input::placeholder {\n    color: var(--diwa-text-disabled);\n    opacity: 1;\n  }\n\n  /* Number — hide native spinners */\n  input.input[type=\"number\"]::-webkit-inner-spin-button,\n  input.input[type=\"number\"]::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  input.input[type=\"number\"] { -moz-appearance: textfield; }\n\n  /* Search — hide browser-native clear button */\n  input.input[type=\"search\"]::-webkit-search-cancel-button {\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  /* Date / time — hide native picker icon in webkit */\n  input.input[type=\"date\"]::-webkit-calendar-picker-indicator,\n  input.input[type=\"time\"]::-webkit-calendar-picker-indicator,\n  input.input[type=\"month\"]::-webkit-calendar-picker-indicator,\n  input.input[type=\"week\"]::-webkit-calendar-picker-indicator {\n    opacity: 0.5;\n    cursor: pointer;\n  }\n\n  /* ── Suffix button (password toggle / search clear) ─────────────────── */\n\n  .suffix-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    height: 100%;\n    min-width: ${compact ? 'var(--diwa-touch-target-min-size-compact, 32px)' : 'var(--diwa-touch-target-min-size, 44px)'};\n    padding: 0 var(--diwa-space-3);\n    background: none;\n    border: none;\n    margin: 0;\n    cursor: pointer;\n    color: var(--diwa-text-secondary);\n    line-height: 0;\n    transition: color var(--diwa-transition-fast);\n  }\n\n  ${getHoverCapableStyle('.suffix-btn', 'color: var(--diwa-text-primary);')}\n\n  .suffix-btn:focus-visible {\n    outline: var(--diwa-focus-ring-width) solid var(--diwa-border-focus);\n    outline-offset: -2px;\n  }\n\n  /* ── Description ────────────────────────────────────────────────── */\n\n  .description {\n    font-size: var(--diwa-font-size-sm);\n    color: var(--diwa-text-secondary);\n    margin: 0;\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  /* ── Message (state-coloured) ───────────────────────────────────── */\n\n  .message {\n    font-size: var(--diwa-font-size-sm);\n    color: ${messageColor};\n    margin: 0;\n    line-height: var(--diwa-line-height-normal);\n  }\n\n  ${getReducedMotionStyle('.input-wrapper', '.suffix-btn')}\n`;\n};\n"],"version":3}