carbon-design-system · annawen1 · Feb 20, 2024 · Feb 17, 2024 · Feb 17, 2024 · Feb 17, 2024
diff --git a/.yarn/cache/@floating-ui-core-npm-1.6.0-47cc2a9b3a-d6a47cacde.zip b/.yarn/cache/@floating-ui-core-npm-1.6.0-47cc2a9b3a-d6a47cacde.zip
diff --git a/.yarn/cache/@floating-ui-dom-npm-1.6.3-cf39e1c671-83e97076c7.zip b/.yarn/cache/@floating-ui-dom-npm-1.6.3-cf39e1c671-83e97076c7.zip
diff --git a/.yarn/cache/@floating-ui-utils-npm-0.2.1-5ad70234fc-33c9ab346e.zip b/.yarn/cache/@floating-ui-utils-npm-0.2.1-5ad70234fc-33c9ab346e.zip
diff --git a/packages/carbon-web-components/examples/codesandbox/autoalign/cdn.html b/packages/carbon-web-components/examples/codesandbox/autoalign/cdn.html
@@ -0,0 +1,159 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css"
+    />
+    <style>
+      /* Suppress custom element until styles are loaded */
+      cds-accordion:not(:defined) {
+        display: none;
+      }
+    </style>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/toggle-tip.min.js"
+    ></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/tooltip.min.js"
+    ></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/popover.min.js"
+    ></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/slug.min.js"
+    ></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/button.min.js"
+    ></script>
+  </head>
+  <body>
+    <div class="section">
+      <cds-popover open autoalign>
+        <button class="playground-trigger" aria-label="Settings" type="button">
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            aria-hidden="true"
+            width="16"
+            height="16"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"
+            ></path>
+          </svg>
+        </button>
+        <cds-popover-content>
+          <div class="p-3">
+            <p class="popover-title">Available storage</p>
+            <p class="popover-details">
+              This server has 150 GB of block storage remaining.
+            </p>
+          </div>
+        </cds-popover-content>
+      </cds-popover>
+    </div>
+
+    <div class="section">
+      <cds-toggletip autoalign>
+        Toggletip label
+
+        <p slot="body-text">
+          Occassionally, services are updated in a specified time window to
+          ensure no down time for customers.
+        </p>
+        <cds-link slot="actions">Test</cds-link>
+        <cds-button slot="actions">Button</cds-button>
+      </cds-toggletip>
+    </div>
+
+    <div class="section">
+      <cds-tooltip autoalign>
+        <button
+          class="sb-tooltip-trigger"
+          role="button"
+          aria-labelledby="content"
+        >
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            aria-hidden="true"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+          >
+            <!--?lit$163743842$-->
+            <path
+              d="M8.5 11L8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11zM8 3.5c-.4 0-.8.3-.8.8S7.6 5 8 5c.4 0 .8-.3.8-.8S8.4 3.5 8 3.5z"
+            ></path>
+            <path
+              d="M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z"
+            ></path>
+          </svg>
+        </button>
+        <cds-tooltip-content id="content">
+          Occassionally, services are updated in a specified time window to
+          ensure no down time for customers.
+        </cds-tooltip-content>
+      </cds-tooltip>
+    </div>
+
+    <div class="section">
+      <cds-slug autoalign>
+        <div slot="body-text">
+          <p class="secondary">AI Explained</p>
+          <h1>84%</h1>
+          <p class="secondary bold">Confidence score</p>
+          <p class="secondary">
+            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+          </p>
+          <hr />
+          <p class="secondary">Model type</p>
+          <p class="bold">Foundation model</p>
+        </div>
+      </cds-slug>
+    </div>
+
+    <script>
+      _handleClick = () => {
+        const popover = document.querySelector("cds-popover");
+        const open = popover?.hasAttribute("open");
+        open
+          ? popover?.removeAttribute("open")
+          : popover?.setAttribute("open", "");
+      };
+
+      const trigger = document.querySelector(".playground-trigger");
+      trigger.addEventListener("click", _handleClick);
+    </script>
+  </body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/autoalign/index.html b/packages/carbon-web-components/examples/codesandbox/autoalign/index.html
@@ -0,0 +1,143 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+  <head>
+    <title>carbon-web-components example</title>
+    <meta charset="UTF-8" />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"
+    />
+
+    <link rel="stylesheet" href="src/styles.scss" />
+    <style>
+      /* Suppress custom element until styles are loaded */
+      cds-popover:not(:defined) {
+        display: none;
+      }
+      cds-toggletip:not(:defined) {
+        display: none;
+      }
+      cds-tooltip:not(:defined) {
+        display: none;
+      }
+      cds-slug:not(:defined) {
+        display: none;
+      }
+    </style>
+    <script type="module" src="src/index.js"></script>
+  </head>
+  <body>
+    <div class="section">
+      <cds-popover open autoalign>
+        <button class="playground-trigger" aria-label="Settings" type="button">
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            aria-hidden="true"
+            width="16"
+            height="16"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"
+            ></path>
+          </svg>
+        </button>
+        <cds-popover-content>
+          <div class="p-3">
+            <p class="popover-title">Available storage</p>
+            <p class="popover-details">
+              This server has 150 GB of block storage remaining.
+            </p>
+          </div>
+        </cds-popover-content>
+      </cds-popover>
+    </div>
+
+    <div class="section">
+      <cds-toggletip autoalign>
+        Toggletip label
+
+        <p slot="body-text">
+          Occassionally, services are updated in a specified time window to
+          ensure no down time for customers.
+        </p>
+        <cds-link slot="actions">Test</cds-link>
+        <cds-button slot="actions">Button</cds-button>
+      </cds-toggletip>
+    </div>
+
+    <div class="section">
+      <cds-tooltip autoalign>
+        <button
+          class="sb-tooltip-trigger"
+          role="button"
+          aria-labelledby="content"
+        >
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            aria-hidden="true"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+          >
+            <!--?lit$163743842$-->
+            <path
+              d="M8.5 11L8.5 6.5 6.5 6.5 6.5 7.5 7.5 7.5 7.5 11 6 11 6 12 10 12 10 11zM8 3.5c-.4 0-.8.3-.8.8S7.6 5 8 5c.4 0 .8-.3.8-.8S8.4 3.5 8 3.5z"
+            ></path>
+            <path
+              d="M8,15c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S11.9,15,8,15z M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z"
+            ></path>
+          </svg>
+        </button>
+        <cds-tooltip-content id="content">
+          Occassionally, services are updated in a specified time window to
+          ensure no down time for customers.
+        </cds-tooltip-content>
+      </cds-tooltip>
+    </div>
+
+    <div class="section">
+      <cds-slug autoalign>
+        <div slot="body-text">
+          <p class="secondary">AI Explained</p>
+          <h1>84%</h1>
+          <p class="secondary bold">Confidence score</p>
+          <p class="secondary">
+            Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed
+            do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+          </p>
+          <hr />
+          <p class="secondary">Model type</p>
+          <p class="bold">Foundation model</p>
+        </div>
+      </cds-slug>
+    </div>
+
+    <script>
+      _handleClick = () => {
+        const popover = document.querySelector("cds-popover");
+        const open = popover?.hasAttribute("open");
+        open
+          ? popover?.removeAttribute("open")
+          : popover?.setAttribute("open", "");
+      };
+
+      const trigger = document.querySelector(".playground-trigger");
+      trigger.addEventListener("click", _handleClick);
+    </script>
+  </body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/autoalign/package.json b/packages/carbon-web-components/examples/codesandbox/autoalign/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "carbon-web-components-accordion-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.51.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/autoalign/sandbox.config.json b/packages/carbon-web-components/examples/codesandbox/autoalign/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/autoalign/src/index.js b/packages/carbon-web-components/examples/codesandbox/autoalign/src/index.js
@@ -0,0 +1,14 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "@carbon/web-components/es/components/slug/index.js";
+import "@carbon/web-components/es/components/popover/index.js";
+import "@carbon/web-components/es/components/toggle-tip/index.js";
+import "@carbon/web-components/es/components/tooltip/index.js";
+import "@carbon/web-components/es/components/button/index.js";