@swisspost/design-system-components 1.3.10 → 1.5.0

package/dist/collection/components/post-tab-panel/post-tab-panel.js

@@ -0,0 +1,55 @@
+import { h, Host } from '@stencil/core';
+import { version } from '../../../package.json';
+export class PostTabPanel {
+  constructor() {
+    this.panelId = undefined;
+    this.name = undefined;
+  }
+  componentWillLoad() {
+    // get the id set on the host element or use a random id by default
+    this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
+  }
+  render() {
+    return (h(Host, { "data-version": version }, h("div", { class: "tab-pane", id: this.panelId, role: "tabpanel" }, h("slot", null))));
+  }
+  static get is() { return "post-tab-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-tab-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-tab-panel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the panel, used to associate it with a tab header."
+        },
+        "attribute": "name",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "panelId": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=post-tab-panel.js.map

package/dist/collection/components/post-tab-panel/post-tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-tab-panel.js","sourceRoot":"","sources":["../../../../src/components/post-tab-panel/post-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAOhD,MAAM,OAAO,YAAY;;;;;EAUvB,iBAAiB;IACf,mEAAmE;IACnE,IAAI,CAAC,OAAO,GAAG,SAAS,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,UAAU,EAAE,EAAE,CAAC;EAChE,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,oBAAe,OAAO;MACzB,WACE,KAAK,EAAC,UAAU,EAChB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAC,UAAU;QAEf,eAAO,CACH,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { version } from '../../../package.json';\n\n@Component({\n  tag: 'post-tab-panel',\n  styleUrl: 'post-tab-panel.scss',\n  shadow: true,\n})\nexport class PostTabPanel {\n  @Element() host: HTMLPostTabPanelElement;\n\n  @State() panelId: string;\n\n  /**\n   * The name of the panel, used to associate it with a tab header.\n   */\n  @Prop() readonly name: string;\n\n  componentWillLoad() {\n    // get the id set on the host element or use a random id by default\n    this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div\n          class=\"tab-pane\"\n          id={this.panelId}\n          role=\"tabpanel\"\n        >\n          <slot/>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/post-tabs/post-tabs.css

@@ -0,0 +1,148 @@
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+.tabs-wrapper {
+  position: relative;
+  padding-top: 1rem;
+  border: 0;
+  background-color: #faf9f8;
+}
+.tabs-wrapper::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background-color: hsl(0, 0%, 80%);
+}
+.tabs-wrapper .tabs {
+  background-color: transparent !important;
+}
+@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
+  .tabs-wrapper::after {
+    background-color: ButtonBorder;
+  }
+}
+
+.tabs {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  /* prevent scroll chaining on x scroll */
+  overscroll-behavior-x: contain;
+  white-space: nowrap;
+}
+.tabs::after {
+  content: "";
+  display: block;
+  flex: 1 0 auto;
+  width: 1rem;
+}
+
+.tab-content {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.bg-yellow .tabs-wrapper {
+  background-color: #fc0;
+}
+
+.bg-light .tabs-wrapper {
+  background-color: #faf9f8;
+}
+
+.bg-gray .tabs-wrapper {
+  background-color: #f4f3f1;
+}
+
+.bg-dark .tabs-wrapper {
+  background-color: hsl(0, 0%, 20%);
+}
+
+.bg-primary .tabs-wrapper {
+  background-color: hsl(0, 0%, 20%);
+}
+
+.bg-white .tabs-wrapper {
+  background-color: #fff;
+}
+
+.bg-black .tabs-wrapper {
+  background-color: #000;
+}
+
+.bg-success .tabs-wrapper {
+  background-color: #2c911c;
+}
+
+.bg-info .tabs-wrapper {
+  background-color: #cce4ee;
+}
+
+.bg-warning .tabs-wrapper {
+  background-color: #f49e00;
+}
+
+.bg-danger .tabs-wrapper {
+  background-color: #a51728;
+}
+
+.bg-nightblue .tabs-wrapper {
+  background-color: #004976;
+}
+
+.bg-nightblue-bright .tabs-wrapper {
+  background-color: #0076a8;
+}
+
+.bg-petrol .tabs-wrapper {
+  background-color: #006d68;
+}
+
+.bg-petrol-bright .tabs-wrapper {
+  background-color: #00968f;
+}
+
+.bg-coral .tabs-wrapper {
+  background-color: #9e2a2f;
+}
+
+.bg-coral-bright .tabs-wrapper {
+  background-color: #e03c31;
+}
+
+.bg-olive .tabs-wrapper {
+  background-color: #716135;
+}
+
+.bg-olive-bright .tabs-wrapper {
+  background-color: #aa9d2e;
+}
+
+.bg-purple .tabs-wrapper {
+  background-color: #80276c;
+}
+
+.bg-purple-bright .tabs-wrapper {
+  background-color: #c5299b;
+}
+
+.bg-aubergine .tabs-wrapper {
+  background-color: #523178;
+}
+
+.bg-aubergine-bright .tabs-wrapper {
+  background-color: #7566a0;
+}
+
+:host {
+  display: block;
+}

package/dist/collection/components/post-tabs/post-tabs.js

@@ -0,0 +1,208 @@
+import { Host, h } from '@stencil/core';
+import { version } from '../../../package.json';
+import { fadeIn, fadeOut } from '../../animations';
+export class PostTabs {
+  constructor() {
+    this.isLoaded = false;
+    this.activePanel = undefined;
+  }
+  get tabs() {
+    return this.host.querySelectorAll('post-tab-header');
+  }
+  componentDidLoad() {
+    this.moveMisplacedTabs();
+    this.enableTabs();
+    const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;
+    this.show(initiallyActivePanel);
+    this.isLoaded = true;
+  }
+  /**
+   * Shows the panel with the given name and selects its associated tab.
+   * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
+   */
+  async show(panelName) {
+    var _a;
+    // do nothing if the tab is already active
+    if (panelName === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)) {
+      return;
+    }
+    const previousTab = this.activeTab;
+    const newTab = this.host.querySelector(`post-tab-header[panel=${panelName}]`);
+    this.activateTab(newTab);
+    // if a panel is currently being displayed, remove it from the view and complete the associated animation
+    if (this.showing) {
+      this.showing.effect['target'].style.display = 'none';
+      this.showing.finish();
+    }
+    // hide the currently visible panel only if no other animation is running
+    if (previousTab && !this.showing && !this.hiding) {
+      this.hidePanel(previousTab.panel);
+    }
+    // wait for any hiding animation to complete before showing the selected tab
+    if (this.hiding) {
+      await this.hiding.finished;
+    }
+    this.showSelectedPanel();
+    // wait for any display animation to complete for the returned promise to fully resolve
+    if (this.showing) {
+      await this.showing.finished;
+    }
+    this.tabChange.emit(this.activeTab.panel);
+  }
+  moveMisplacedTabs() {
+    if (!this.tabs)
+      return;
+    this.tabs.forEach(tab => {
+      if (tab.getAttribute('slot') === 'tabs')
+        return;
+      tab.setAttribute('slot', 'tabs');
+    });
+  }
+  enableTabs() {
+    if (!this.tabs)
+      return;
+    this.tabs.forEach(async (tab) => {
+      await tab.componentOnReady();
+      const tabTitle = tab.shadowRoot.querySelector('.tab-title');
+      // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
+      if (tabTitle.getAttribute('aria-controls'))
+        return;
+      const tabPanel = this.getPanel(tab.panel).shadowRoot.querySelector('.tab-pane');
+      tabTitle.setAttribute('aria-controls', tabPanel.id);
+      tabPanel.setAttribute('aria-labelledby', tabTitle.id);
+      tab.addEventListener('click', e => {
+        e.preventDefault();
+        this.show(tab.panel);
+      });
+    });
+    // if the currently active tab was removed from the DOM then select the first one
+    if (this.activeTab && !this.activeTab.isConnected) {
+      this.show(this.tabs.item(0).panel);
+    }
+  }
+  activateTab(tab) {
+    if (this.activeTab) {
+      const tabTitle = this.activeTab.shadowRoot.querySelector('.tab-title');
+      tabTitle.setAttribute('aria-selected', 'false');
+      tabTitle.classList.remove('active');
+    }
+    const tabTitle = tab.shadowRoot.querySelector('.tab-title');
+    tabTitle.setAttribute('aria-selected', 'true');
+    tabTitle.classList.add('active');
+    this.activeTab = tab;
+  }
+  hidePanel(panelName) {
+    const previousPanel = this.getPanel(panelName);
+    if (!previousPanel)
+      return;
+    this.hiding = fadeOut(previousPanel);
+    this.hiding.onfinish = () => {
+      previousPanel.style.display = 'none';
+      this.hiding = null;
+    };
+  }
+  showSelectedPanel() {
+    const panel = this.getPanel(this.activeTab.panel);
+    panel.style.display = 'block';
+    // prevent the initially selected panel from fading in
+    if (!this.isLoaded)
+      return;
+    this.showing = fadeIn(panel);
+    this.showing.onfinish = () => {
+      this.showing = null;
+    };
+  }
+  getPanel(name) {
+    return this.host.querySelector(`post-tab-panel[name=${name}]`);
+  }
+  render() {
+    return (h(Host, { "data-version": version }, h("div", { class: "tabs-wrapper" }, h("ul", { class: "tabs nav", role: "tablist" }, h("slot", { name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: () => this.moveMisplacedTabs() }))));
+  }
+  static get is() { return "post-tabs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["post-tabs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["post-tabs.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "activePanel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLPostTabPanelElement['name']",
+          "resolved": "string",
+          "references": {
+            "HTMLPostTabPanelElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the panel that is initially shown.\nIf not specified, it defaults to the panel associated with the first tab.\n\n**Changing this value after initialization has no effect.**"
+        },
+        "attribute": "active-panel",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tabChange",
+        "name": "tabChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.\nThe payload is the name of the newly shown panel."
+        },
+        "complexType": {
+          "original": "HTMLPostTabPanelElement['name']",
+          "resolved": "string",
+          "references": {
+            "HTMLPostTabPanelElement": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "show": {
+        "complexType": {
+          "signature": "(panelName: string) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "HTMLPostTabHeaderElement": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Shows the panel with the given name and selects its associated tab.\nAny other panel that was previously shown becomes hidden and its associated tab is unselected.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=post-tabs.js.map

package/dist/collection/components/post-tabs/post-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-tabs.js","sourceRoot":"","sources":["../../../../src/components/post-tabs/post-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Element, Method, Event, EventEmitter, Prop } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { fadeIn, fadeOut } from '../../animations';\n\n@Component({\n  tag: 'post-tabs',\n  styleUrl: 'post-tabs.scss',\n  shadow: true,\n})\nexport class PostTabs {\n  private activeTab: HTMLPostTabHeaderElement;\n  private showing: Animation;\n  private hiding: Animation;\n  private isLoaded = false;\n\n  private get tabs(): NodeListOf<HTMLPostTabHeaderElement> {\n    return this.host.querySelectorAll('post-tab-header');\n  }\n\n  @Element() host: HTMLPostTabsElement;\n\n  /**\n   * The name of the panel that is initially shown.\n   * If not specified, it defaults to the panel associated with the first tab.\n   *\n   * **Changing this value after initialization has no effect.**\n   */\n  @Prop() readonly activePanel: HTMLPostTabPanelElement['name'];\n\n  /**\n   * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.\n   * The payload is the name of the newly shown panel.\n   */\n  @Event() tabChange: EventEmitter<HTMLPostTabPanelElement['name']>;\n\n  componentDidLoad() {\n    this.moveMisplacedTabs();\n    this.enableTabs();\n\n    const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;\n    this.show(initiallyActivePanel);\n\n    this.isLoaded = true;\n  }\n\n  /**\n   * Shows the panel with the given name and selects its associated tab.\n   * Any other panel that was previously shown becomes hidden and its associated tab is unselected.\n   */\n  @Method()\n  async show(panelName: string) {\n    // do nothing if the tab is already active\n    if (panelName === this.activeTab?.panel) {\n      return;\n    }\n\n    const previousTab = this.activeTab;\n    const newTab : HTMLPostTabHeaderElement = this.host.querySelector(`post-tab-header[panel=${panelName}]`);\n    this.activateTab(newTab);\n\n    // if a panel is currently being displayed, remove it from the view and complete the associated animation\n    if (this.showing) {\n      this.showing.effect['target'].style.display = 'none';\n      this.showing.finish();\n    }\n\n    // hide the currently visible panel only if no other animation is running\n    if (previousTab && !this.showing && !this.hiding) {\n      this.hidePanel(previousTab.panel);\n    }\n\n    // wait for any hiding animation to complete before showing the selected tab\n    if (this.hiding) {\n      await this.hiding.finished;\n    }\n\n    this.showSelectedPanel();\n\n    // wait for any display animation to complete for the returned promise to fully resolve\n    if (this.showing) {\n      await this.showing.finished;\n    }\n\n    this.tabChange.emit(this.activeTab.panel);\n  }\n  private moveMisplacedTabs() {\n    if (!this.tabs) return;\n\n    this.tabs.forEach(tab => {\n      if (tab.getAttribute('slot') === 'tabs') return;\n      tab.setAttribute('slot', 'tabs');\n    });\n  }\n\n  private enableTabs() {\n    if (!this.tabs) return;\n\n    this.tabs.forEach(async tab => {\n      await tab.componentOnReady();\n\n      const tabTitle = tab.shadowRoot.querySelector('.tab-title');\n\n      // if the tab has an \"aria-controls\" attribute it was already linked to its panel: do nothing\n      if (tabTitle.getAttribute('aria-controls')) return;\n\n      const tabPanel = this.getPanel(tab.panel).shadowRoot.querySelector('.tab-pane');\n      tabTitle.setAttribute('aria-controls', tabPanel.id);\n      tabPanel.setAttribute('aria-labelledby', tabTitle.id);\n\n      tab.addEventListener('click', e => {\n        e.preventDefault();\n        this.show(tab.panel);\n      });\n    });\n\n    // if the currently active tab was removed from the DOM then select the first one\n    if (this.activeTab && !this.activeTab.isConnected) {\n      this.show(this.tabs.item(0).panel);\n    }\n  }\n\n  private activateTab(tab: HTMLPostTabHeaderElement) {\n    if (this.activeTab) {\n      const tabTitle = this.activeTab.shadowRoot.querySelector('.tab-title');\n      tabTitle.setAttribute('aria-selected', 'false');\n      tabTitle.classList.remove('active');\n    }\n\n    const tabTitle = tab.shadowRoot.querySelector('.tab-title');\n    tabTitle.setAttribute('aria-selected', 'true');\n    tabTitle.classList.add('active');\n\n    this.activeTab = tab;\n  }\n\n  private hidePanel(panelName: HTMLPostTabPanelElement['name']) {\n    const previousPanel = this.getPanel(panelName);\n\n    if (!previousPanel) return;\n\n    this.hiding = fadeOut(previousPanel);\n    this.hiding.onfinish = () => {\n      previousPanel.style.display = 'none';\n      this.hiding = null;\n    };\n  }\n\n  private showSelectedPanel() {\n    const panel = this.getPanel(this.activeTab.panel);\n    panel.style.display = 'block';\n\n    // prevent the initially selected panel from fading in\n    if (!this.isLoaded) return;\n\n    this.showing = fadeIn(panel);\n    this.showing.onfinish = () => {\n      this.showing = null;\n    };\n  }\n\n  private getPanel(name: string): HTMLPostTabPanelElement {\n    return this.host.querySelector(\n      `post-tab-panel[name=${name}]`\n    );\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div class=\"tabs-wrapper\">\n          <ul class=\"tabs nav\" role=\"tablist\">\n            <slot name=\"tabs\" onSlotchange={() => this.enableTabs()} />\n          </ul>\n        </div>\n        <div class=\"tab-content\">\n          <slot onSlotchange={() => this.moveMisplacedTabs()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/post-tooltip/post-tooltip.css

@@ -0,0 +1,194 @@
+/**
+ * Colors used by the post style guide
+ */
+/**
+ * Maps. Allow maps to have custom colors from the project
+ * by always merging into a default empty map
+ */
+:host, .bg-yellow {
+  --post-bg-opacity: 1;
+  background-color: rgba(var(--post-bg-rgb), var(--post-bg-opacity)) !important;
+  color: var(--post-contrast-color) !important;
+}
+
+.bg-yellow {
+  --post-contrast-color: #000;
+  --post-contrast-color-inverted: #fff;
+  --post-gray-10: hsl(0, 0%, 90%);
+  --post-gray-20: hsl(0, 0%, 80%);
+  --post-gray-40: hsl(0, 0%, 60%);
+  --post-gray-60: hsl(0, 0%, 40%);
+  --post-gray-80: hsl(0, 0%, 20%);
+  --post-yellow: #fc0;
+  --post-light: #faf9f8;
+  --post-gray: #f4f3f1;
+  --post-dark: hsl(0, 0%, 20%);
+  --post-primary: hsl(0, 0%, 20%);
+  --post-white: #fff;
+  --post-black: #000;
+  --post-success: #2c911c;
+  --post-info: #cce4ee;
+  --post-warning: #f49e00;
+  --post-danger: #a51728;
+  --post-nightblue: #004976;
+  --post-nightblue-bright: #0076a8;
+  --post-petrol: #006d68;
+  --post-petrol-bright: #00968f;
+  --post-coral: #9e2a2f;
+  --post-coral-bright: #e03c31;
+  --post-olive: #716135;
+  --post-olive-bright: #aa9d2e;
+  --post-purple: #80276c;
+  --post-purple-bright: #c5299b;
+  --post-aubergine: #523178;
+  --post-aubergine-bright: #7566a0;
+  --post-contrast-color-rgb: 0, 0, 0;
+  --post-contrast-color-inverted-rgb: 255, 255, 255;
+  --post-gray-10-rgb: 230, 230, 230;
+  --post-gray-20-rgb: 204, 204, 204;
+  --post-gray-40-rgb: 153, 153, 153;
+  --post-gray-60-rgb: 102, 102, 102;
+  --post-gray-80-rgb: 51, 51, 51;
+  --post-yellow-rgb: 255, 204, 0;
+  --post-light-rgb: 250, 249, 248;
+  --post-gray-rgb: 244, 243, 241;
+  --post-dark-rgb: 51, 51, 51;
+  --post-primary-rgb: 51, 51, 51;
+  --post-white-rgb: 255, 255, 255;
+  --post-black-rgb: 0, 0, 0;
+  --post-success-rgb: 44, 145, 28;
+  --post-info-rgb: 204, 228, 238;
+  --post-warning-rgb: 244, 158, 0;
+  --post-danger-rgb: 165, 23, 40;
+  --post-nightblue-rgb: 0, 73, 118;
+  --post-nightblue-bright-rgb: 0, 118, 168;
+  --post-petrol-rgb: 0, 109, 104;
+  --post-petrol-bright-rgb: 0, 150, 143;
+  --post-coral-rgb: 158, 42, 47;
+  --post-coral-bright-rgb: 224, 60, 49;
+  --post-olive-rgb: 113, 97, 53;
+  --post-olive-bright-rgb: 170, 157, 46;
+  --post-purple-rgb: 128, 39, 108;
+  --post-purple-bright-rgb: 197, 41, 155;
+  --post-aubergine-rgb: 82, 49, 120;
+  --post-aubergine-bright-rgb: 117, 102, 160;
+}
+
+:host {
+  --post-contrast-color: #fff;
+  --post-contrast-color-inverted: #000;
+  --post-dark: #faf9f8;
+  --post-light: hsl(0, 0%, 20%);
+  --post-gray-80: hsl(0, 0%, 90%);
+  --post-gray-60: hsl(0, 0%, 80%);
+  --post-gray-40: hsl(0, 0%, 60%);
+  --post-gray-20: hsl(0, 0%, 40%);
+  --post-gray-10: hsl(0, 0%, 20%);
+  --post-contrast-color-rgb: 255, 255, 255;
+  --post-contrast-color-inverted-rgb: 0, 0, 0;
+  --post-dark-rgb: 250, 249, 248;
+  --post-light-rgb: 51, 51, 51;
+  --post-gray-80-rgb: 230, 230, 230;
+  --post-gray-60-rgb: 204, 204, 204;
+  --post-gray-40-rgb: 153, 153, 153;
+  --post-gray-20-rgb: 102, 102, 102;
+  --post-gray-10-rgb: 51, 51, 51;
+}
+
+@layer polyfill {
+  [popover] {
+    position: fixed;
+    z-index: 2147483647;
+    inset: 0;
+    padding: 0.25em;
+    width: fit-content;
+    height: fit-content;
+    border-width: initial;
+    border-color: initial;
+    border-image: initial;
+    border-style: solid;
+    background-color: canvas;
+    color: canvastext;
+    overflow: auto;
+    margin: auto;
+  }
+  [popover]:not(.\:popover-open) {
+    display: none;
+  }
+  [popover]:is(dialog[open]) {
+    display: revert;
+  }
+  [anchor].\:popover-open {
+    inset: auto;
+  }
+  @supports selector([popover]:open) {
+    [popover]:not(.\:popover-open, dialog[open]) {
+      display: revert;
+    }
+    [anchor]:is(:open) {
+      inset: auto;
+    }
+  }
+  @supports selector([popover]:popover-open) {
+    [popover]:not(.\:popover-open, dialog[open]) {
+      display: revert;
+    }
+    [anchor]:is(:popover-open) {
+      inset: auto;
+    }
+  }
+  @supports not (background-color: canvas) {
+    [popover] {
+      background-color: white;
+      color: black;
+    }
+  }
+  @supports (width: -moz-fit-content) {
+    [popover] {
+      width: -moz-fit-content;
+      height: -moz-fit-content;
+    }
+  }
+  @supports not (inset: 0) {
+    [popover] {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
+:host {
+  --post-bg-rgb: 51, 51, 51;
+}
+
+div {
+  position: absolute;
+  z-index: 1070;
+  width: max-content;
+  max-width: 30ch;
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  color: inherit;
+  background-color: inherit;
+  border-color: transparent;
+  border-radius: 4px;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.arrow {
+  position: absolute;
+  width: 0.7071067812rem;
+  aspect-ratio: 1/1;
+  background-color: inherit;
+  rotate: 45deg;
+  pointer-events: none;
+  z-index: -1;
+  border-right: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+}
+
+.bg-yellow {
+  --post-bg-rgb: 255, 204, 0;
+}