openproject-primer_view_components 0.6.3

data/app/components/primer/alpha/underline_nav.pcss

@@ -0,0 +1,134 @@
+/* UnderlineNav */
+
+.UnderlineNav {
+  display: flex;
+  min-height: var(--base-size-48);
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted);
+  -webkit-overflow-scrolling: auto;
+  justify-content: space-between;
+
+  & .Counter {
+    margin-left: var(--control-medium-gap);
+    color: var(--fgColor-default);
+    background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
+  }
+
+  & .Counter--primary {
+    color: var(--fgColor-onEmphasis);
+    background-color: var(--bgColor-neutral-emphasis);
+  }
+}
+
+.UnderlineNav-body {
+  display: flex;
+  align-items: center;
+  gap: var(--control-medium-gap);
+  list-style: none;
+}
+
+.UnderlineNav-item {
+  position: relative;
+  display: flex;
+  padding: 0 var(--control-medium-paddingInline-condensed);
+  font-size: var(--text-body-size-medium);
+  line-height: 30px;
+  color: var(--fgColor-default);
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--borderRadius-medium);
+  align-items: center;
+
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    color: var(--fgColor-default);
+    text-decoration: none;
+    border-bottom-color: var(--borderColor-neutral-muted);
+    outline-offset: -2px;
+    transition: border-bottom-color 0.12s ease-out;
+  }
+
+  /* renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected */
+  & [data-content]::before {
+    display: block;
+    height: 0;
+    font-weight: var(--base-text-weight-semibold);
+    visibility: hidden;
+    content: attr(data-content);
+  }
+
+  /* increase touch target area */
+  &::before {
+    @mixin minTouchTarget 48px;
+  }
+
+  /* hover state was "sticking" on mobile after click */
+  @media (pointer: fine) {
+    &:hover {
+      color: var(--fgColor-default);
+      text-decoration: none;
+      background: var(--control-transparent-bgColor-hover);
+      transition: background 0.12s ease-out;
+    }
+  }
+
+  &.selected,
+  &[role='tab'][aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    font-weight: var(--base-text-weight-semibold);
+    color: var(--fgColor-default);
+    border-bottom-color: var(--underlineNav-borderColor-active);
+
+    /* current/selected underline */
+    &::after {
+      position: absolute;
+      z-index: 1; /* raise above full-width flash banner */
+      right: 50%;
+      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */
+      width: 100%;
+      height: 2px;
+      content: '';
+      background: var(--underlineNav-borderColor-active);
+      border-radius: var(--borderRadius-medium);
+      transform: translate(50%, -50%);
+    }
+  }
+}
+
+.UnderlineNav--right {
+  justify-content: flex-end;
+
+  & .UnderlineNav-actions {
+    flex: 1 1 auto;
+  }
+}
+
+.UnderlineNav-actions {
+  align-self: center;
+}
+
+.UnderlineNav--full {
+  display: block;
+
+  /* required for underline to align with additional wrapper element */
+  & .UnderlineNav-body {
+    min-height: var(--base-size-48);
+  }
+}
+
+.UnderlineNav-octicon {
+  display: inline !important;
+  margin-right: var(--control-medium-gap);
+  color: var(--fgColor-muted);
+  fill: var(--fgColor-muted);
+}
+
+.UnderlineNav-container {
+  display: flex;
+  justify-content: space-between;
+}

data/app/components/primer/alpha/underline_nav.rb

@@ -0,0 +1,138 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `UnderlineNav` to style navigation links with a minimal
+    # underlined selected state, typically placed at the top
+    # of the page.
+    #
+    # For panel navigation, use <%= link_to_component(Primer::Alpha::UnderlinePanels) %> instead.
+    #
+    # @accessibility
+    #   - By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an
+    #     implicit landmark role of `navigation` which should be reserved for main links.
+    #     For all other set of links, set tag to `:div`.
+    #   - See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional
+    #     accessibility considerations.
+    class UnderlineNav < Primer::Component
+      include Primer::TabbedComponentHelper
+      include Primer::UnderlineNavHelper
+
+      BODY_TAG_DEFAULT = :ul
+
+      TAG_DEFAULT = :nav
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      # Use the tabs to list page links.
+      #
+      # @param selected [Boolean] Whether the tab is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :tabs, lambda { |selected: false, **system_arguments|
+        system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
+        Primer::Alpha::Navigation::Tab.new(
+          list: true,
+          selected: selected,
+          icon_classes: "UnderlineNav-octicon",
+          **system_arguments
+        )
+      }
+
+      # Use actions for a call to action.
+      #
+      # @param tag [Symbol] (Primer::UnderlineNavHelper::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavHelper::ACTIONS_TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
+        system_arguments[:classes] = underline_nav_action_classes(system_arguments[:classes])
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default with `<nav>`
+      #   @description
+      #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
+      #   @code
+      #     <%= render(Primer::Alpha::UnderlineNav.new(label: "Default with nav element")) do |component| %>
+      #       <% component.with_tab(href: "#", selected: true) { "Item 1" } %>
+      #       <% component.with_tab(href: "#") { "Item 2" } %>
+      #       <% component.with_actions do %>
+      #         <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #       <% end %>
+      #     <% end %>
+      #
+      # @example With `<div>`
+      #   <%= render(Primer::Alpha::UnderlineNav.new(tag: :div, label: "With div element")) do |component| %>
+      #     <% component.with_tab(href: "#", selected: true) { "Item 1" } %>
+      #     <% component.with_tab(href: "#") { "Item 2" } %>
+      #     <% component.with_actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With icons and counters
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "With icons and counters")) do |component| %>
+      #     <% component.with_tab(href: "#", selected: true) do |tab| %>
+      #       <% tab.with_icon(icon: :star) %>
+      #       <% tab.with_text { "Item 1" } %>
+      #     <% end %>
+      #     <% component.with_tab(href: "#") do |tab| %>
+      #       <% tab.with_icon(icon: :star) %>
+      #       <% tab.with_text { "Item 2" } %>
+      #       <% tab.with_counter(count: 10) %>
+      #     <% end %>
+      #     <% component.with_tab(href: "#") do |tab| %>
+      #       <% tab.with_text { "Item 3" } %>
+      #       <% tab.with_counter(count: 10) %>
+      #     <% end %>
+      #     <% component.with_actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Align right
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Align right", align: :right)) do |component| %>
+      #     <% component.with_tab(href: "#", selected: true) do |tab| %>
+      #       <% tab.with_text { "Item 1" } %>
+      #     <% end %>
+      #     <% component.with_tab(href: "#") do |tab| %>
+      #       <% tab.with_text { "Item 2" } %>
+      #     <% end %>
+      #     <% component.with_actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Customizing the body
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #   <% end %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Alpha::UnderlineNav::TAG_OPTIONS) %>
+      # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements.
+      # @param align [Symbol] <%= one_of(Primer::UnderlineNavHelper::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavHelper::ALIGN_DEFAULT %>
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, tag: TAG_DEFAULT, align: ALIGN_DEFAULT, body_arguments: {}, **system_arguments)
+        @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+        @system_arguments[:classes] = underline_nav_classes(@system_arguments[:classes], @align)
+
+        @body_arguments = body_arguments
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = underline_nav_body_classes(@body_arguments[:classes])
+
+        aria_label_for_page_nav(label)
+      end
+
+      private
+
+      def body
+        Primer::BaseComponent.new(**@body_arguments)
+      end
+    end
+  end
+end

data/app/components/primer/alpha/underline_panels.html.erb

@@ -0,0 +1,18 @@
+<%= tab_container_wrapper(with_panel: true, **@wrapper_arguments) do %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <% if @align == :right %>
+      <%= actions %>
+    <% end %>
+    <%= render body do %>
+      <% tabs.each do |tab| %>
+        <%= tab %>
+      <% end %>
+    <% end %>
+    <% if @align == :left %>
+      <%= actions %>
+    <% end %>
+  <% end %>
+  <% tabs.each do |tab| %>
+    <%= tab.panel %>
+  <% end %>
+<% end %>

data/app/components/primer/alpha/underline_panels.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `UnderlinePanels` to style tabs with an associated panel and an underlined selected state.
+    class UnderlinePanels < Primer::Component
+      include Primer::TabbedComponentHelper
+      include Primer::UnderlineNavHelper
+      # Use to render a button and an associated panel slot. See the example below or refer to <%= link_to_component(Primer::Alpha::Navigation::Tab) %>.
+      #
+      # @param id [String] Unique ID of tab.
+      # @param selected [Boolean] Whether the tab is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :tabs, lambda { |id:, selected: false, **system_arguments|
+        system_arguments[:id] = id
+        system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
+
+        Primer::Alpha::Navigation::Tab.new(
+          selected: selected,
+          with_panel: true,
+          list: true,
+          icon_classes: "UnderlineNav-octicon",
+          panel_id: "panel-#{id}",
+          **system_arguments
+        )
+      }
+
+      # Use actions for a call to action.
+      #
+      # @param tag [Symbol] (Primer::UnderlineNavHelper::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavHelper::ACTIONS_TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
+        system_arguments[:classes] = underline_nav_action_classes(system_arguments[:classes])
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <%= render(Primer::Alpha::UnderlinePanels.new(label: "With panels")) do |component| %>
+      #     <% component.with_tab(id: "tab-1", selected: true) do |tab| %>
+      #       <% tab.with_text { "Tab 1" } %>
+      #       <% tab.with_panel do %>
+      #         Panel 1
+      #       <% end %>
+      #     <% end %>
+      #     <% component.with_tab(id: "tab-2") do |tab| %>
+      #       <% tab.with_text { "Tab 2" } %>
+      #       <% tab.with_panel do %>
+      #         Panel 2
+      #       <% end %>
+      #     <% end %>
+      #     <% component.with_actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
+      # @param align [Symbol] <%= one_of(Primer::UnderlineNavHelper::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavHelper::ALIGN_DEFAULT %>
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, align: ALIGN_DEFAULT, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
+        @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+        @wrapper_arguments = wrapper_arguments
+
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = underline_nav_classes(@system_arguments[:classes], @align)
+
+        @body_arguments = deny_tag_argument(**body_arguments)
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = underline_nav_body_classes(@body_arguments[:classes])
+
+        @body_arguments[:role] = :tablist
+        @body_arguments[:"aria-label"] = label
+      end
+
+      private
+
+      def body
+        Primer::BaseComponent.new(**@body_arguments)
+      end
+    end
+  end
+end

data/app/components/primer/alpha/x_banner.d.ts

@@ -0,0 +1,13 @@
+declare class XBannerElement extends HTMLElement {
+    #private;
+    titleText: HTMLElement;
+    dismiss(): void;
+    show(): void;
+    hide(): void;
+}
+declare global {
+    interface Window {
+        XBannerElement: typeof XBannerElement;
+    }
+}
+export {};

data/app/components/primer/alpha/x_banner.js

@@ -0,0 +1,49 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _XBannerElement_instances, _XBannerElement_dismissScheme_get;
+import { controller, target } from '@github/catalyst';
+let XBannerElement = class XBannerElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _XBannerElement_instances.add(this);
+    }
+    dismiss() {
+        const parentElement = this.parentElement;
+        if (!parentElement)
+            return;
+        if (__classPrivateFieldGet(this, _XBannerElement_instances, "a", _XBannerElement_dismissScheme_get) === 'remove') {
+            parentElement.removeChild(this);
+        }
+        else {
+            this.hide();
+        }
+    }
+    show() {
+        this.style.setProperty('display', 'initial');
+    }
+    hide() {
+        this.style.setProperty('display', 'none');
+    }
+};
+_XBannerElement_instances = new WeakSet(), _XBannerElement_dismissScheme_get = function _XBannerElement_dismissScheme_get() {
+    return this.getAttribute('data-dismiss-scheme');
+};
+__decorate([
+    target
+], XBannerElement.prototype, "titleText", void 0);
+XBannerElement = __decorate([
+    controller
+], XBannerElement);
+if (!window.customElements.get('x-banner')) {
+    window.XBannerElement = XBannerElement;
+    window.customElements.define('x-banner', XBannerElement);
+}

data/app/components/primer/alpha/x_banner.ts

@@ -0,0 +1,40 @@
+import {controller, target} from '@github/catalyst'
+
+@controller
+class XBannerElement extends HTMLElement {
+  @target titleText: HTMLElement
+
+  dismiss() {
+    const parentElement = this.parentElement
+    if (!parentElement) return
+
+    if (this.#dismissScheme === 'remove') {
+      parentElement.removeChild(this)
+    } else {
+      this.hide()
+    }
+  }
+
+  show() {
+    this.style.setProperty('display', 'initial')
+  }
+
+  hide() {
+    this.style.setProperty('display', 'none')
+  }
+
+  get #dismissScheme(): string {
+    return this.getAttribute('data-dismiss-scheme')!
+  }
+}
+
+declare global {
+  interface Window {
+    XBannerElement: typeof XBannerElement
+  }
+}
+
+if (!window.customElements.get('x-banner')) {
+  window.XBannerElement = XBannerElement
+  window.customElements.define('x-banner', XBannerElement)
+}

data/app/components/primer/anchored_position.d.ts

@@ -0,0 +1,27 @@
+import type { AnchorAlignment, AnchorSide, PositionSettings } from '@primer/behaviors';
+export default class AnchoredPositionElement extends HTMLElement implements PositionSettings {
+    #private;
+    get align(): AnchorAlignment;
+    set align(value: AnchorAlignment);
+    get side(): AnchorSide;
+    set side(value: AnchorSide);
+    get anchorOffset(): number;
+    set anchorOffset(value: number | 'normal' | 'spacious');
+    get anchor(): string;
+    set anchor(value: string);
+    get anchorElement(): HTMLElement | null;
+    set anchorElement(value: HTMLElement | null);
+    get alignmentOffset(): number;
+    set alignmentOffset(value: number);
+    get allowOutOfBounds(): boolean;
+    set allowOutOfBounds(value: boolean);
+    connectedCallback(): void;
+    static observedAttributes: string[];
+    attributeChangedCallback(): void;
+    update(): void;
+}
+declare global {
+    interface Window {
+        AnchoredPositionElement: typeof AnchoredPositionElement;
+    }
+}

data/app/components/primer/anchored_position.js

@@ -0,0 +1,147 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _AnchoredPositionElement_anchorElement, _AnchoredPositionElement_animationFrame;
+import { getAnchoredPosition } from '@primer/behaviors';
+const updateWhenVisible = (() => {
+    const anchors = new Set();
+    let intersectionObserver = null;
+    let resizeObserver = null;
+    function updateVisibleAnchors() {
+        for (const anchor of anchors) {
+            anchor.update();
+        }
+    }
+    return (el) => {
+        // eslint-disable-next-line github/prefer-observers
+        window.addEventListener('resize', updateVisibleAnchors);
+        intersectionObserver || (intersectionObserver = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                const target = entry.target;
+                if (entry.isIntersecting) {
+                    target.update();
+                    anchors.add(target);
+                }
+                else {
+                    anchors.delete(target);
+                }
+            }
+        }));
+        resizeObserver || (resizeObserver = new ResizeObserver(() => {
+            for (const anchor of anchors) {
+                anchor.update();
+            }
+        }));
+        resizeObserver.observe(el.ownerDocument.documentElement);
+        intersectionObserver.observe(el);
+    };
+})();
+export default class AnchoredPositionElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _AnchoredPositionElement_anchorElement.set(this, null);
+        _AnchoredPositionElement_animationFrame.set(this, void 0);
+    }
+    get align() {
+        const value = this.getAttribute('align');
+        if (value === 'center' || value === 'end')
+            return value;
+        return 'start';
+    }
+    set align(value) {
+        this.setAttribute('align', `${value}`);
+    }
+    get side() {
+        const value = this.getAttribute('side');
+        if (value === 'inside-top' ||
+            value === 'inside-bottom' ||
+            value === 'inside-left' ||
+            value === 'inside-right' ||
+            value === 'inside-center' ||
+            value === 'outside-top' ||
+            value === 'outside-left' ||
+            value === 'outside-right') {
+            return value;
+        }
+        return 'outside-bottom';
+    }
+    set side(value) {
+        this.setAttribute('side', `${value}`);
+    }
+    get anchorOffset() {
+        const alias = this.getAttribute('anchor-offset');
+        if (alias === 'spacious' || alias === '8')
+            return 8;
+        return 4;
+    }
+    set anchorOffset(value) {
+        this.setAttribute('anchor-offset', `${value}`);
+    }
+    get anchor() {
+        return this.getAttribute('anchor') || '';
+    }
+    set anchor(value) {
+        this.setAttribute('anchor', `${value}`);
+    }
+    get anchorElement() {
+        if (__classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f"))
+            return __classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f");
+        const idRef = this.anchor;
+        if (!idRef)
+            return null;
+        return this.ownerDocument.getElementById(idRef);
+    }
+    set anchorElement(value) {
+        __classPrivateFieldSet(this, _AnchoredPositionElement_anchorElement, value, "f");
+        if (!__classPrivateFieldGet(this, _AnchoredPositionElement_anchorElement, "f")) {
+            this.removeAttribute('anchor');
+        }
+    }
+    get alignmentOffset() {
+        return Number(this.getAttribute('alignment-offset'));
+    }
+    set alignmentOffset(value) {
+        this.setAttribute('alignment-offset', `${value}`);
+    }
+    get allowOutOfBounds() {
+        return this.hasAttribute('allow-out-of-bounds');
+    }
+    set allowOutOfBounds(value) {
+        this.toggleAttribute('allow-out-of-bounds', value);
+    }
+    connectedCallback() {
+        this.update();
+        this.addEventListener('beforetoggle', () => this.update());
+        updateWhenVisible(this);
+    }
+    attributeChangedCallback() {
+        this.update();
+    }
+    update() {
+        if (!this.isConnected)
+            return;
+        cancelAnimationFrame(__classPrivateFieldGet(this, _AnchoredPositionElement_animationFrame, "f"));
+        __classPrivateFieldSet(this, _AnchoredPositionElement_animationFrame, requestAnimationFrame(() => {
+            const anchor = this.anchorElement;
+            if (!anchor)
+                return;
+            const { left, top } = getAnchoredPosition(this, anchor, this);
+            this.style.top = `${top}px`;
+            this.style.left = `${left}px`;
+        }), "f");
+    }
+}
+_AnchoredPositionElement_anchorElement = new WeakMap(), _AnchoredPositionElement_animationFrame = new WeakMap();
+AnchoredPositionElement.observedAttributes = ['align', 'side', 'anchor', 'alignment-offset', 'allow-out-of-bounds'];
+if (!customElements.get('anchored-position')) {
+    window.AnchoredPositionElement = AnchoredPositionElement;
+    customElements.define('anchored-position', AnchoredPositionElement);
+}