sky-ui-kit 0.1.5 → 0.1.7

package/dist/components/mapContextMenuStyles.d.ts

@@ -0,0 +1,2 @@
+/** Shared DOM menu skin. The consumer owns menu DOM, events and map operations. */
+export declare const mapContextMenuStyles = "\n      .maplibre-context-menu {\n        box-sizing: border-box;\n        overflow-wrap: anywhere;\n        display: none;\n        position: fixed;\n        z-index: 1000;\n        background-color: var(--userssite-color-panel, var(--el-bg-color-overlay, #ffffff));\n        color: var(--userssite-color-text, var(--el-text-color-primary, #303133));\n        max-width: calc(100vw - 16px);\n        max-height: calc(100vh - 16px);\n        overflow: auto;\n        border: 1px solid var(--userssite-color-border, var(--el-border-color-light, #e4e7ed));\n        width: 304px;\n        border-radius: 14px;\n        box-shadow: 0 12px 32px var(--userssite-shadow-color, #182b4920), 0 2px 6px var(--userssite-shadow-color, #182b4920);\n        opacity: 0;\n        transition: opacity 0.12s ease;\n        font: 13px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;\n        scrollbar-width: thin;\n        overscroll-behavior: contain;\n      }\n      .maplibre-context-menu .context-menu-group { flex-basis: 100%; list-style: none; padding: 6px 8px; font-weight: 600; }\n      .maplibre-context-menu button:disabled { opacity: .55; cursor: not-allowed; }\n      .maplibre-context-menu button[aria-busy=\"true\"] { cursor: progress; }\n      .maplibre-context-menu.show {\n        display: block;\n        opacity: 1;\n      }\n      .maplibre-context-menu.hide {\n        opacity: 0;\n      }\n      .maplibre-context-menu button {\n        box-sizing: border-box;\n        border: 0; background: transparent; color: inherit; font: inherit;\n        text-align: left;\n      }\n      .maplibre-context-menu button:focus-visible {\n        outline: 2px solid var(--userssite-color-primary, Highlight); outline-offset: -2px;\n      }\n      .maplibre-context-menu-arrow {\n        display: none; position: fixed; inset: 0; width: 100%; height: 100%;\n        z-index: 1000; pointer-events: none; overflow: visible;\n        fill: var(--userssite-color-panel, var(--el-bg-color-overlay, #ffffff)); stroke: var(--userssite-color-border, var(--el-border-color-light, #e4e7ed)); stroke-width: 1;\n        stroke-linejoin: round; stroke-linecap: round;\n      }\n      .maplibre-context-menu .context-menu-selection { padding: 16px; border-bottom: 1px solid var(--userssite-color-border, var(--el-border-color-light, #e4e7ed)); }\n      .maplibre-context-menu .context-menu-selection strong { display: block; font-size: 14px; line-height: 1.6; font-weight: 650; }\n      .maplibre-context-menu .context-menu-selection strong::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--userssite-color-primary, Highlight); vertical-align: 2px; }\n      .maplibre-context-menu .context-menu-selection p { margin: 8px 0 0; font-size: 11px; line-height: 1.8; white-space: pre-line; opacity: .72; }\n      .maplibre-context-menu .context-menu-attributes { margin-top: 12px; max-height: 200px; overflow: auto; border-radius: 8px; background: var(--userssite-color-hover, ButtonFace); }\n      .maplibre-context-menu .context-menu-attributes table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }\n      .maplibre-context-menu .context-menu-attributes th,\n      .maplibre-context-menu .context-menu-attributes td { text-align: left; vertical-align: top; padding: 8px; overflow-wrap: anywhere; white-space: pre-wrap; border-bottom: 1px solid var(--userssite-color-border, var(--el-border-color-light, #e4e7ed)); }\n      .maplibre-context-menu .context-menu-attributes th { width: 36%; font-weight: 500; }\n      .maplibre-context-menu .context-menu-list button[hidden] { display: none; }\n      .maplibre-context-location-dot {\n        box-sizing: border-box; width: 32px; height: 40px;\n        color: var(--userssite-color-primary, Highlight);\n        filter: drop-shadow(0 2px 3px var(--userssite-shadow-color, #182b4920));\n        pointer-events: none !important;\n      }\n      .maplibre-context-location-dot svg { display: block; width: 32px; height: 40px; }\n      .maplibre-context-menu [aria-pressed=\"true\"] { background: var(--userssite-color-hover, ButtonFace); box-shadow: inset 3px 0 var(--userssite-color-primary, Highlight); }\n      .maplibre-context-menu .context-menu-item,\n      .maplibre-context-menu .context-menu-coords { display: block; width: 100%; }\n      .maplibre-context-menu svg { width: 100%; height: 100%; pointer-events: none; }\n      .maplibre-context-menu .context-menu-list {\n        list-style: none;\n        padding: 0 8px 8px;\n        margin: 0;\n      }\n      .maplibre-context-menu .context-menu-item {\n        padding: 10px 12px;\n        min-height: 38px;\n        border-radius: 8px;\n        transition: background-color .12s ease;\n        cursor: pointer;\n      }\n      .maplibre-context-menu .context-menu-item:hover {\n        background-color: var(--userssite-color-hover, ButtonFace);\n      }\n      .maplibre-context-menu .context-menu-list .context-menu-item {\n        display: flex; align-items: center; gap: 10px;\n        min-height: 44px; margin: 4px 0; padding: 8px 10px;\n        border: 1px solid transparent; border-radius: 10px;\n      }\n      .maplibre-context-menu .context-menu-action-icon {\n        display: inline-flex; align-items: center; justify-content: center;\n        width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;\n        background: var(--userssite-color-hover, ButtonFace); color: var(--userssite-color-primary, Highlight);\n      }\n      .maplibre-context-menu .context-menu-action-icon svg { width: 16px; height: 16px; }\n      .maplibre-context-menu .context-menu-action-icon > * { width: 16px; height: 16px; object-fit: contain; pointer-events: none; }\n      .maplibre-context-menu .context-menu-icon > img { width: 16px; height: 16px; object-fit: contain; }\n      .maplibre-context-menu .context-menu-icons { flex-wrap: wrap; }\n      .maplibre-context-menu .context-menu-icon { flex: 1 0 30px; }\n      .maplibre-context-menu .context-menu-action-label { flex: 1; min-width: 0; }\n      .maplibre-context-menu .context-menu-list .context-menu-item:hover,\n      .maplibre-context-menu .context-menu-list .context-menu-item:focus-visible {\n        border-color: var(--userssite-color-border, var(--el-border-color-light, #e4e7ed));\n      }\n      .maplibre-context-menu .context-menu-list [data-action=\"addMarker\"] {\n        color: var(--userssite-color-primary, Highlight); font-weight: 600;\n      }\n      .maplibre-context-menu .context-menu-list [data-action=\"removeMarker\"] {\n        color: var(--color-danger, var(--userssite-color-text, var(--el-text-color-primary, #303133)));\n        border-top-color: var(--userssite-color-border, var(--el-border-color-light, #e4e7ed));\n      }\n      .maplibre-context-menu [data-action=\"removeMarker\"] .context-menu-action-icon { color: inherit; }\n      .maplibre-context-menu button:active { filter: brightness(.94); }\n      .maplibre-context-menu .context-menu-coords {\n        cursor: pointer;\n        padding: 10px 12px;\n        margin: 0 0 6px;\n        border-radius: 8px;\n        background: var(--userssite-color-hover, ButtonFace);\n        color: var(--userssite-color-text, var(--el-text-color-primary, #303133));\n      }\n      .maplibre-context-menu .context-menu-coords-label { display: block; font-size: 11px; opacity: .7; margin-bottom: 4px; }\n      .maplibre-context-menu .context-menu-coords-value { display: block; font: 12px/1.6 ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }\n      .maplibre-context-menu .context-menu-coords:hover { box-shadow: inset 0 0 0 1px var(--userssite-color-primary, Highlight); }\n      .maplibre-context-menu .context-menu-icons {\n        display: flex;\n        gap: 6px;\n        flex-wrap: wrap;\n        padding: 10px 8px;\n      }\n      .maplibre-context-menu .context-menu-icon {\n        flex: 1;\n        min-width: 30px;\n        max-width: 48px;\n        height: 34px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        border-radius: 7px;\n        font-size: 12px;\n        cursor: pointer;\n        padding: 4px;\n        border: 1px solid var(--userssite-color-border, var(--el-border-color-light, #e4e7ed));\n      }\n      .maplibre-context-menu .context-menu-icon svg { width: 15px; height: 15px; flex-shrink: 0; }\n      .maplibre-context-menu .context-menu-drawing { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0 8px 10px; }\n      .maplibre-context-menu .context-menu-drawing[hidden] { display: none; }\n      .maplibre-context-menu .context-menu-drawing button { padding: 6px 2px; border: 1px solid var(--color-soft-border); border-radius: var(--radius-s); color: var(--color-text); background: var(--surface-control); cursor: pointer; }\n      .maplibre-context-menu .context-menu-drawing button:hover,\n      .maplibre-context-menu .context-menu-drawing button:focus-visible { background: var(--surface-control-hover); color: var(--color-primary); }\n      .maplibre-context-menu .context-menu-drawing button { display: flex; flex-direction: column; align-items: center; gap: 5px; }\n      .maplibre-context-menu .context-menu-drawing svg { width: 20px; height: 20px; }\n      .maplibre-context-menu .context-menu-selection .context-menu-measurement { color: var(--color-primary); font-size: 14px; font-weight: 650; opacity: 1; }\n      .maplibre-context-menu .context-menu-icon[hidden] { display: none; }\n        .maplibre-context-menu .context-menu-icon:hover {\n        background-color: var(--userssite-color-hover, ButtonFace);\n        }\n    ";