{"version":3,"file":"templateEditor.module.mjs","names":[],"sources":["../../../../package/common/templateEditor/templateEditor.module.pcss"],"sourcesContent":[".templateEditor {\n  /* Theme tokens resolved once, each with a built-in fallback. Set any of the\n     public `--template-editor-*` variables via ThemeProvider (theme-wide) or\n     `style` (per instance) to override; unset ones fall back to the values below. */\n  --custom-te-palette-width: var(--template-editor-palette-width, 200px);\n  --custom-te-gap: var(--template-editor-gap, 16px);\n\n  display: flex;\n  gap: var(--custom-te-gap);\n  width: 100%;\n  color: var(--text-color);\n\n  &-right {\n    flex-flow: row wrap;\n    align-items: flex-start;\n  }\n\n  &-bottom {\n    flex-direction: column;\n  }\n\n  &-field {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  &-surface {\n    /* How far below the top of the field the first line starts. On a multiline field that is\n       Input's own 4px padding-top; a single-line one sets it below. */\n    --custom-te-line-top: 4px;\n\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    width: 100%;\n\n    &-singleLine {\n      --custom-te-line-top: calc(7px - var(--field-label-offset, 0px));\n    }\n  }\n\n  &-editable {\n    flex: 1 1 auto;\n    min-width: 0;\n\n    /* Literal `\\n` characters carry the line breaks, so the DOM inside the\n       field stays a flat list of text nodes and chips. */\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n    outline: none;\n    max-height: 60vh;\n    overflow-y: auto;\n\n    &[data-dragover='true'] {\n      background: var(--background-accent-light);\n      border-radius: var(--default-border-radius);\n    }\n\n    &-disabled {\n      opacity: 0.6;\n    }\n  }\n\n  &-chip {\n    display: inline-block;\n    vertical-align: baseline;\n    border-radius: 99999px;\n    padding: 1px 8px;\n\n    /* No side margins: the gap beside a chip is then exactly the text beside it, so two chips with\n       no space between them touch, and read as the joined words they will be sent as. */\n    font-size: 0.9em;\n    line-height: 1.4;\n    white-space: nowrap;\n\n    /* Deliberately no `user-select: none`. WebKit refuses to drag an element\n       that has it, and on an inline chip it would also drop the chip out of a\n       text selection dragged across it, so copying a range spanning a chip\n       would lose the placeholder. */\n\n    /* Read here, not resolved on the root like the others: the --tone properties are set by the\n       tone class on each chip, so they do not exist on the root. */\n    background: var(--template-editor-chip-background, var(--tone-light));\n    color: var(--template-editor-chip-color, var(--tone-text));\n\n    &[data-dragging='true'] {\n      opacity: 0.4;\n    }\n\n    &[data-highlighted] {\n      outline: 2px solid var(--tone);\n      outline-offset: 1px;\n    }\n\n    /* Drawn whole, in the colour text is selected in: left to the engines, Chromium painted a\n       selected chip not at all and Firefox drew hard rectangles inside the pill. The attribute\n       outranks the one-class preview and unknown rules below. */\n    &[data-selected] {\n      background: Highlight;\n      color: HighlightText;\n    }\n\n    /* The keyframes are named apart from this class: both would camelCase to the same module key,\n       and the keyframes' export would replace the class. */\n    &-inserted {\n      animation: templateEditorChipPop 400ms ease-out;\n    }\n\n    /* The sample reads as the prose it will become: the field's own size and line, marked only by\n       the tone's underline. It wraps like that prose too: a nowrap inline-block ran a sample longer\n       than the field out of it. */\n    &-preview {\n      display: inline;\n      padding: 0;\n      background: none;\n      font-size: inherit;\n      white-space: inherit;\n      text-decoration: underline dotted;\n      text-underline-offset: 0.2em;\n    }\n\n    &-unknown {\n      background: var(--template-editor-unknown-chip-background, var(--tone-light));\n      color: var(--template-editor-unknown-chip-color, var(--tone-text));\n    }\n\n    &-remove {\n      display: inline-block;\n\n      /* Negative right margin keeps the chip's visual padding unchanged while\n         the padding here widens the tap target on touch. */\n      margin: 0 -3px 0 4px;\n      padding: 0 3px;\n      font-weight: 700;\n      line-height: 1;\n      opacity: 0.5;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n  }\n\n  /* Invisible element the autocomplete anchors to. It lives outside the\n     editable: inside, it would be serialized into the value, split by editing,\n     and typed into. One pixel wide, not zero: WebKit counts an anchor without\n     area as hidden, and `position-visibility: anchors-visible` hid the list too. */\n  &-caretAnchor {\n    position: absolute;\n    width: 1px;\n    pointer-events: none;\n  }\n\n  &-dropCaret {\n    position: absolute;\n    width: 2px;\n    background: var(--primary-color);\n    pointer-events: none;\n    opacity: 0;\n\n    &-visible {\n      opacity: 1;\n    }\n  }\n\n  /* One line tall and level with the first line, so the buttons sit on that line however many\n     follow, and never set the field's height themselves. 1.25em is Input's line-height. */\n  &-actions {\n    flex: none;\n    display: flex;\n    align-items: center;\n    gap: 2px;\n    height: 1.25em;\n    margin-top: var(--custom-te-line-top);\n  }\n\n  &-palette {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    min-width: 0;\n\n    &-label {\n      font-size: 0.8em;\n      color: var(--text-light);\n    }\n\n    &-list {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n    }\n\n    &-group {\n      min-width: 0;\n    }\n\n    &-group-label {\n      font-size: 0.75em;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--text-light);\n      margin-bottom: 4px;\n    }\n\n    &-items {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 6px;\n    }\n\n    &-item {\n      display: inline-flex;\n      align-items: baseline;\n      gap: 6px;\n      cursor: grab;\n      -webkit-tap-highlight-color: transparent;\n\n      /* Explicit for WebKit, which otherwise drags the item's text rather than\n         the element itself. */\n      -webkit-user-drag: element;\n      max-width: 100%;\n\n      &:focus-visible {\n        outline: 2px solid var(--primary-color);\n        outline-offset: 2px;\n      }\n\n      &:not([aria-disabled]):active {\n        cursor: grabbing;\n      }\n\n      &-label {\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      &-description {\n        font-size: 0.85em;\n        opacity: 0.7;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      /* Grey rather than faded: a disabled entry is there to be read, its description usually\n         saying why it cannot be used. Overrides the chip rule's colour, so it stays after it.\n         Unselectable, or a press-and-drag that cannot move it highlights its text instead. */\n      &-disabled {\n        color: var(--text-light);\n        cursor: not-allowed;\n        user-select: none;\n        -webkit-user-drag: none;\n      }\n    }\n  }\n\n  &-suggestions {\n    background: var(--background);\n    border: 1px solid var(--border-color);\n    border-radius: var(--default-border-radius);\n    box-shadow: var(--card-shadow);\n    max-height: 260px;\n    overflow-y: auto;\n    min-width: 220px;\n\n    /* Caps what a long sample can stretch the list to, so the sample is cut short instead. */\n    max-width: min(360px, 100vw - 32px);\n    padding: 4px 0;\n\n    &-anchor {\n      position: fixed;\n      top: 0;\n      left: 0;\n\n      /* Shared by every overlay, so the order they are portaled in, which is the order they opened in, decides. */\n      z-index: 1;\n\n      /* Hidden until usePopoverPosition writes the first coordinates, to avoid a top-left flash. */\n      visibility: hidden;\n    }\n  }\n\n  &-suggestion {\n    &-list {\n      display: flex;\n      flex-direction: column;\n    }\n\n    &-group {\n      min-width: 0;\n    }\n\n    &-group-label {\n      font-size: 0.7em;\n      text-transform: uppercase;\n      letter-spacing: 0.04em;\n      color: var(--text-light);\n      padding: 6px 12px 2px;\n    }\n\n    &-item {\n      display: grid;\n      grid-template-columns: auto minmax(0, 1fr);\n      column-gap: 16px;\n      align-items: baseline;\n      padding: 6px 12px;\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n\n      &-active {\n        background: var(--background-accent-light);\n      }\n    }\n\n    &-label {\n      color: var(--text-color);\n    }\n\n    &-match {\n      background: none;\n      color: inherit;\n      font-weight: 600;\n    }\n\n    &-sample {\n      justify-self: end;\n      max-width: 100%;\n      overflow: hidden;\n      font-size: 0.85em;\n      color: var(--text-light);\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    &-description {\n      grid-column: 1 / -1;\n      font-size: 0.85em;\n      color: var(--text-light);\n    }\n  }\n}\n\n/* The palette wraps under the field once the two no longer fit side by side, and takes the whole\n   row there. The 999 hands nearly all spare width on a wide row to the field, so beside it the\n   palette keeps its own width. Two classes, so it beats the single-class rules above. */\n.templateEditor-right .templateEditor-field {\n  flex: 999 1 320px;\n}\n\n.templateEditor-right .templateEditor-palette {\n  flex: 1 0 var(--custom-te-palette-width);\n}\n\n/* Half of the 14px that Input's min-height adds to a 1.25em line, less the label offset its\n   container pads with: one line then fills the field exactly, as an Input's centred text does. Left\n   to Input's centring instead, a second line had no room to centre in and the first jumped up 4px.\n   Two classes, to beat Input's own padding on the field. */\n.templateEditor-surface-singleLine .templateEditor-editable {\n  padding-block: var(--custom-te-line-top);\n}\n\n/* 1.2 of the chip's 0.9em is 1.08em, inside the field's 1.25em line: chips on consecutive lines\n   keep a gap instead of overlapping, and a line holding one is no taller than the rest. Not on\n   palette entries, which share the chip class and keep their larger tap target. */\n.templateEditor-editable .templateEditor-chip {\n  padding-block: 0;\n  line-height: 1.2;\n}\n\n/* The native highlight inside a chip, which `data-selected` replaces. */\n.templateEditor-editable .templateEditor-chip ::selection {\n  background: transparent;\n}\n\n/* The preview toggle's morph, see `morphChips`. Each image keeps its own size, pinned to the start\n   and clipped by the box resizing between chip and sample. By default both are scaled to the box's\n   width, which shrank a chip's label to a sliver and blew a short sample up to several lines tall. */\n::view-transition-group(*.templateEditor-chip-morph) {\n  animation-duration: 300ms;\n}\n\n::view-transition-old(*.templateEditor-chip-morph),\n::view-transition-new(*.templateEditor-chip-morph) {\n  height: 100%;\n  object-fit: none;\n  object-position: left center;\n  overflow: clip;\n}\n\n@keyframes templateEditorChipPop {\n  0% {\n    transform: scale(0.8);\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 45%, transparent);\n  }\n\n  35% {\n    transform: scale(1.05);\n  }\n\n  60% {\n    transform: scale(1);\n  }\n\n  100% {\n    box-shadow: 0 0 0 2px transparent;\n  }\n}\n\n@keyframes templateEditorChipGlow {\n  from {\n    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tone) 45%, transparent);\n  }\n\n  to {\n    box-shadow: 0 0 0 2px transparent;\n  }\n}\n\n/* Only the scale is motion. The glow alone still shows where the chip landed. */\n@media (prefers-reduced-motion: reduce) {\n  .templateEditor-chip-inserted {\n    animation-name: templateEditorChipGlow;\n  }\n\n  /* The box no longer travels or resizes; the chip and its sample still cross-fade in place. */\n  ::view-transition-group(*.templateEditor-chip-morph) {\n    animation-name: none;\n  }\n}\n"],"mappings":""}