Docs: Add initial attach

Author: jlukic

docs/src/content/examples/query-attach-behavior.mdx

@@ -0,0 +1,11 @@
+---
+title: 'Behavior - Attach'
+shortTitle: 'Attach'
+id: 'query-attach-behavior'
+category: 'Query'
+subcategory: 'Standard Plugins'
+exampleType: 'component'
+description: 'Position an element relative to another element'
+tags: ['query', 'plugin', 'behavior', 'attach', 'position']
+tip: 'Attach is a modern browser spec that automatically lets you position elements relative to another element'
+---

docs/src/examples/query/plugins/query-attach-behavior/page.css

@@ -0,0 +1,41 @@
+:root {
+  --box-size: 50vw;
+  --box-size-min: 200px;
+
+  --square-size: 10vw;
+  --square-size-min: 50px;
+
+  --square-margin: max(var(--square-size), var(--square-size-min)) auto;
+
+}
+
+.box {
+  position: relative;
+  margin: var(--square-margin);
+  background: var(--blue-0);
+  background-image: var(--angled-gradient);
+  border: var(--blue-border);
+  box-shadow: var(--shadow);
+  width: var(--box-size);
+  height: var(--box-size);
+  min-width: var(--box-size-min);
+  min-height: var(--box-size-min);
+}
+
+.square {
+  background-color: var(--red-5);
+  border: var(--red-border);
+  background-image: var(--angled-gradient);
+  width: var(--square-size);
+  height: var(--square-size);
+  min-width: var(--square-size-min);
+  min-height: var(--square-size-min);
+  position: absolute;
+  font-size: 9px;
+  padding: 5px;
+  font-weight: bold;
+  color: var(--red-text-color);
+  box-shadow: var(--shadow);
+  text-align: center;
+  align-content: center;
+}

docs/src/examples/query/plugins/query-attach-behavior/page.html

@@ -0,0 +1,13 @@
+<div class="box"></div>
+<div class="square" data-position="top left">Top Left</div>
+<div class="square" data-position="top">Top</div>
+<div class="square" data-position="top right">Top Right</div>
+<div class="square" data-position="right top">Right Top</div>
+<div class="square" data-position="right">Right</div>
+<div class="square" data-position="right bottom">Right Bottom</div>
+<div class="square" data-position="bottom right">Bottom Right</div>
+<div class="square" data-position="bottom">Bottom</div>
+<div class="square" data-position="bottom left">Bottom Left</div>
+<div class="square" data-position="left bottom">Left Bottom</div>
+<div class="square" data-position="left">Left</div>
+<div class="square" data-position="left top">Left Top</div>

docs/src/examples/query/plugins/query-attach-behavior/page.js

@@ -0,0 +1,7 @@
+import { Attach, Transition } from '@semantic-ui/core';
+import { $ } from '@semantic-ui/query';
+
+// initialize popup inside page
+$('.square').attach({
+  to: '.box',
+});