${ExpandableSection.localize("OSE.table.treasure.noItems")}
+
+
+
+
+
+
+ `
+ }
+
+ #onToggle() {
+ this.toggleAttribute("aria-expanded");
+ }
+
+ /**
+ * Let the sheet determine what creating an item means
+ */
+ #onAdd(e: Event) {
+ e.stopPropagation();
+ this.dispatchEvent(new Event("create", { bubbles: true }))
+ }
+
+ get #type() {
+ return this.getAttribute("type") || null;
+ }
+
+ get #canCreate() {
+ return this.hasAttribute("can-create") && this.#type && ExpandableSection.availableTypes.includes(this.#type);
+ }
+}
+
diff --git a/src/components/ItemRow/ItemRow.css b/src/components/ItemRow/ItemRow.css
new file mode 100644
index 00000000..f5ab5437
--- /dev/null
+++ b/src/components/ItemRow/ItemRow.css
@@ -0,0 +1,142 @@
+:host {
+ display: flex;
+ flex-direction: column;
+ cursor: grab;
+ transition: 333ms opacity ease-in-out;
+ --item-row-opacity: 1;
+ opacity: var(--item-row-opacity);
+}
+:host([exhausted]) {
+ --item-row-opacity: .75;
+ filter: saturate(.25);
+}
+:host([dragging]) {
+ cursor: grabbing;
+ opacity: calc(var(--item-row-opacity) / 2);
+}
+.row {
+ display: grid;
+ grid-template-columns: 40px 1fr minmax(0, 50px) max-content;
+ align-items: center;
+ gap: var(--spacing-full);
+}
+:host(:focus-within) {
+ box-shadow: 0 0 10px var(--color-shadow-primary);
+}
+.icon {
+ border-radius: var(--spacing-quarter);
+ overflow: hidden;
+ position: relative;
+ cursor: pointer;
+ align-self: start;
+}
+.icon img {
+ display: block;
+ width: 100%;
+ height: auto;
+}
+.icon .quantity {
+ position: absolute;
+ bottom: calc(var(--spacing-quarter) / 2);
+ right: calc(var(--spacing-quarter) / 2);
+}
+.item-name {
+ display: inline-block;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.controls {
+ justify-self: self-end;
+ display: flex;
+ gap: var(--spacing-half);
+}
+.supplemental-content {
+
+}
+.always-expanded:not(.empty) {
+ padding-top: var(--spacing-half);
+ padding-bottom: var(--spacing-half);
+ padding-left: var(--content-padding, var(--spacing-half));
+ padding-right: var(--content-padding, var(--spacing-half));
+}
+
+:host::part(content) {
+ align-self: end;
+ min-height: 0;
+ transition: visibility 333ms ease-in-out,
+ opacity 333ms ease-in-out,
+ padding-top 333ms ease-in-out,
+ padding-bottom 333ms ease-in-out;
+ visibility: hidden;
+ opacity: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ padding-left: var(--content-padding, var(--spacing-half));
+ padding-right: var(--content-padding, var(--spacing-half));
+}
+
+:host::part(title-content) {
+ display: flex;
+ gap: var(--spacing-quarter);
+ flex-wrap: wrap;
+}
+
+:host([always-expanded])::part(content),
+:host([aria-expanded])::part(content) {
+ opacity: 1;
+ visibility: visible;
+ padding: var(--content-padding, var(--spacing-half));
+}
+
+.collapsable {
+ display: grid;
+ grid-template-rows: 0fr;
+ overflow: hidden;
+ transition: grid-template-rows 333ms ease-in-out;
+}
+
+:host([always-expanded]) .collapsable,
+:host([aria-expanded]) .collapsable {
+ grid-template-rows: 1fr;
+}
+
+.charges {
+ display: flex;
+ align-items: center;
+ gap: var(--spacing-half);
+}
+
+button {
+ background: none;
+ border: none;
+ transition: opacity 333ms ease-in-out;
+ padding: var(--spacing-quarter) 0;
+}
+button.equip:not(.equip--enabled),
+button.favorite:not(.favorite--enabled) {
+ opacity: .3;
+}
+button:hover {
+ cursor: pointer;
+ opacity: .6;
+}
+button svg {
+ color: var(--color-primary);
+}
+
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+}
+::-webkit-scrollbar-track {
+ box-shadow: 0 0 1px var(--color-border-dark-2) inset;
+ border-radius: 4px;
+}
+::-webkit-scrollbar-thumb {
+ outline: none;
+ border-radius: 3px;
+ background: var(--color-underline-header);
+ border: 1px solid var(--color-border-highlight);
+}
\ No newline at end of file
diff --git a/src/components/ItemRow/ItemRow.ts b/src/components/ItemRow/ItemRow.ts
new file mode 100644
index 00000000..ec6a4c7d
--- /dev/null
+++ b/src/components/ItemRow/ItemRow.ts
@@ -0,0 +1,379 @@
+/**
+ * @file A custom element that represents an Ability Score and its modifier
+ */
+import { dom, icon } from "@fortawesome/fontawesome-svg-core";
+import { faWeightHanging, faTrash, faEye, faStar, faEdit, faShirt, faEyeSlash, faScroll, faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
+import OseItem from "../../module/item/entity";
+import BaseElement from "../_BaseElement";
+// @ts-expect-error
+import styles from "./ItemRow.css" assert { type: "css" };
+import { abbreviateNumber } from "../../module/helpers-numbers";
+import { component } from "../decorators";
+
+@component('uft-item-row')
+export default class ItemRow extends BaseElement {
+ static get styles() {
+ const iconSheet = new CSSStyleSheet();
+ iconSheet.replaceSync(dom.css());
+ return [styles, iconSheet];
+ }
+
+ static formAssociated = false;
+ static delegatesFocus = false;
+ static shadowMode:ShadowRootMode = "closed";
+
+ static get contextMenu() {
+ return {};
+ }
+
+ item: OseItem & {system: Record
+
+
+ 
+ ${this.#quantityLabel}
+
+
+ ${this.item?.name || ''}
+
+
+
+
+
+ ${this.#chargesLabel}
+ ${this.#weightLabel}
+
+
+
+ ${this.#controls}
+
+
+
+
+ `;
+ }
+}
diff --git a/src/components/LabeledSection/LabeledSection.css b/src/components/LabeledSection/LabeledSection.css
new file mode 100644
index 00000000..491ce5a9
--- /dev/null
+++ b/src/components/LabeledSection/LabeledSection.css
@@ -0,0 +1,70 @@
+:host {
+ --ls-color-heading: var(--color-heading);
+ --ls-background-heading: var(--background-color-heading);
+ --ls-border: var(--background-color-heading);
+
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ border: 1px solid var(--ls-border);
+}
+:host([unbordered]) {
+ border: none;
+}
+
+header {
+ font-family: "Signika Negative", "Signika", sans-serif;
+ font-size: var(--font-size-heading);
+ line-height: 1.5em;
+ font-weight: 700;
+ text-align: center;
+ color: var(--ls-color-heading);
+ background: var(--ls-background-heading);
+ width: 100%;
+ display: block;
+ transition: background 333ms ease-in-out,
+ border 333ms ease-in-out,
+ color 333ms ease-in-out;
+ flex: 0;
+}
+header ::slotted(*) {
+ font-weight: inherit !important;
+ font-size: inherit !important;
+ display: contents;
+}
+main {
+ padding: var(--content-padding, 8px);
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+main ::slotted(*) {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+.empty {
+ font-style: italic;
+ color: var(--color-secondary);
+ text-align: center;
+ margin: 0;
+ padding: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+ :host {
+ --ls-background-heading: transparent;
+ border: 1px solid transparent;
+ }
+
+ header {
+ font-weight: 400;
+ }
+
+ :host(:not([unbordered])) main {
+ border: 1px solid var(--color-ui-09);
+ background-color: var(--color-ui-09);
+ border-radius: var(--spacing-quarter);
+ }
+}
+
diff --git a/src/components/LabeledSection/LabeledSection.ts b/src/components/LabeledSection/LabeledSection.ts
new file mode 100644
index 00000000..e0aa39d1
--- /dev/null
+++ b/src/components/LabeledSection/LabeledSection.ts
@@ -0,0 +1,28 @@
+/**
+ * @file A custom element that represents an Ability Score and its modifier
+ */
+import BaseElement from "../_BaseElement";
+// @ts-expect-error
+import styles from './LabeledSection.css' assert { type: "css" };
+import { component } from "../decorators";
+
+@component('uft-labeled-section')
+export default class LabeledSection extends BaseElement {
+ static get styles() {
+ return [styles];
+ }
+
+ get template() {
+ return /*html*/ `
+
+
+ ${LabeledSection.localize("OSE.table.treasure.noItems")}
+
+
+
+
+ ${this.hasAttribute('max') ? maxField : ''}
+
+ -
+ ${slots}
+
-
+ ${spellLevels.map(this.#buildLevelTemplate.bind(this))?.join('')}
+
+
+ ${this.#quantityLabel}
+
+ ${this.item?.name || ""}
+ Your Template
+ * `
+ * ```
+ */
+ protected get template() {
+ return "";
+ }
+
+ /**
+ * The HTML template to render in the component's light DOM.
+ *
+ * **Note**: If you're using VSCode, install the `es6-string-html` extension
+ * to get syntax highlighting in these templates! Example:
+ *
+ * ```js
+ * return // html
+ * `
+ * Your Template
+ * `
+ * ```
+ */
+ protected get lightTemplate() {
+ return "";
+ }
+
+ /**
+ * Prepare any data ahead of rendering the component.
+ *
+ * Typically, this will be things like fetching a Document with its UUID.
+ */
+ protected async prepareData() {}
+
+ /**
+ * Bind any events here after the component is rendered here.
+ */
+ protected events() {}
+
+ /**
+ * Is this component associated to a form?
+ *
+ * A must when trying to use a component to update a Foundry document!
+ */
+ static formAssociated = true;
+
+ /**
+ * Should this component use the light DOM instead of the shadow DOM?
+ *
+ * Necessary to get Foundry to tab between fields while making changes!
+ */
+ static isLight = false;
+
+ /**
+ * Does this component expose its DOM to outside contexts?
+ */
+ static shadowMode: ShadowRootMode = "open";
+
+ /**
+ * Does this component delegate focus to the Shadow DOM?
+ */
+ static delegatesFocus = true;
+
+ // ---------------------------------------------------------------------
+ // INFRASTRUCTURE STUFF BELOW -- PROBABLY DON'T CHANGE IT IN A COMPONENT
+ // ---------------------------------------------------------------------
+
+ /**
+ * The root of this component's shadow DOM.
+ */
+ shadowRoot: ShadowRoot | null = null;
+
+ /**
+ * The element's internals, containing useful tools for interacting with forms and validation
+ */
+ protected internals: ElementInternals;
+
+ constructor() {
+ super();
+ if (!(this.constructor as typeof BaseComponent).isLight)
+ this.shadowRoot = this.attachShadow({
+ mode: (this.constructor as typeof BaseComponent).shadowMode,
+ delegatesFocus: (this.constructor as typeof BaseComponent).delegatesFocus,
+ });
+ this.internals = this.attachInternals();
+ }
+
+ /**
+ * Fires when the component is mounted to the DOM, and whenever it sees changes.
+ */
+ async connectedCallback() {
+ await this.prepareData();
+ if ((this.constructor as typeof BaseComponent).formAssociated)
+ this.value = this.getAttribute("value")?.toString() || "";
+ if (this.shadowRoot)
+ this.shadowRoot.adoptedStyleSheets = (this.constructor as typeof BaseComponent).styles;
+ if (this.shadowRoot)
+ this.shadowRoot.innerHTML = this.template;
+ if (this.lightTemplate) {
+ const template = document.createElement('template');
+ template.innerHTML = this.lightTemplate;
+ this.appendChild(template.content);
+ }
+ this.events();
+ }
+
+ /**
+ * The component's value, from its attributes.
+ */
+ get value() {
+ return this.getAttribute("value") || "";
+ }
+
+ /**
+ * Set the component's value on its internals and in its attributes,
+ * then tell the containing Sheet that we're ready to update.
+ *
+ * @param newValue - The new value that we'll use to update the component's value.
+ */
+ set value(newValue) {
+ // @ts-expect-error - this.constructor is of type Function,
+ // but refers to the inheritor's class,
+ // which has static members like formAssociated
+ if (!this.constructor.formAssociated)
+ return;
+
+ // this.setAttribute("value", newValue);
+ // this.internals?.setFormValue(newValue);
+ // this.dispatchEvent(new Event("change", { bubbles: true }));
+ }
+
+ get name() {
+ return this.getAttribute("name") || "";
+ }
+
+ static localize(s: string) {
+ return game.i18n.localize(s);
+ }
+
+ static format(s: string, options: Record