@m3e/web 2.0.3 → 2.0.4

package/dist/nav-bar.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-bar.min.js","sources":["../../../node_modules/tslib/tslib.es6.js","../../src/nav-bar/NavBarElement.ts","../../src/nav-bar/NavItemElement.ts"],"sourcesContent":["/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    if (typeof b !== \"function\" && b !== null)\r\n        throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n                t[p[i]] = s[p[i]];\r\n        }\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    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;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\r\n    function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\r\n    var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\r\n    var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\r\n    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\r\n    var _, done = false;\r\n    for (var i = decorators.length - 1; i >= 0; i--) {\r\n        var context = {};\r\n        for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\r\n        for (var p in contextIn.access) context.access[p] = contextIn.access[p];\r\n        context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\r\n        var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\r\n        if (kind === \"accessor\") {\r\n            if (result === void 0) continue;\r\n            if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\r\n            if (_ = accept(result.get)) descriptor.get = _;\r\n            if (_ = accept(result.set)) descriptor.set = _;\r\n            if (_ = accept(result.init)) initializers.unshift(_);\r\n        }\r\n        else if (_ = accept(result)) {\r\n            if (kind === \"field\") initializers.unshift(_);\r\n            else descriptor[key] = _;\r\n        }\r\n    }\r\n    if (target) Object.defineProperty(target, contextIn.name, descriptor);\r\n    done = true;\r\n};\r\n\r\nexport function __runInitializers(thisArg, initializers, value) {\r\n    var useValue = arguments.length > 2;\r\n    for (var i = 0; i < initializers.length; i++) {\r\n        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\r\n    }\r\n    return useValue ? value : void 0;\r\n};\r\n\r\nexport function __propKey(x) {\r\n    return typeof x === \"symbol\" ? x : \"\".concat(x);\r\n};\r\n\r\nexport function __setFunctionName(f, name, prefix) {\r\n    if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\r\n    return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\r\n};\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\r\n    return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (g && (g = 0, op[0] && (_ = 0)), _) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    var desc = Object.getOwnPropertyDescriptor(m, k);\r\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\r\n        desc = { enumerable: true, get: function() { return m[k]; } };\r\n    }\r\n    Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n    var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n    if (m) return m.call(o);\r\n    if (o && typeof o.length === \"number\") return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n    throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n    for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n            r[k] = a[j];\r\n    return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n        if (ar || !(i in from)) {\r\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n            ar[i] = from[i];\r\n        }\r\n    }\r\n    return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\r\n    function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n    o[\"default\"] = v;\r\n};\r\n\r\nvar ownKeys = function(o) {\r\n    ownKeys = Object.getOwnPropertyNames || function (o) {\r\n        var ar = [];\r\n        for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\r\n        return ar;\r\n    };\r\n    return ownKeys(o);\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\r\n    __setModuleDefault(result, mod);\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n    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\");\r\n    return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n    if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n    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\");\r\n    return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n\r\nexport function __classPrivateFieldIn(state, receiver) {\r\n    if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\r\n    return typeof state === \"function\" ? receiver === state : state.has(receiver);\r\n}\r\n\r\nexport function __addDisposableResource(env, value, async) {\r\n    if (value !== null && value !== void 0) {\r\n        if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\r\n        var dispose, inner;\r\n        if (async) {\r\n            if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\r\n            dispose = value[Symbol.asyncDispose];\r\n        }\r\n        if (dispose === void 0) {\r\n            if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\r\n            dispose = value[Symbol.dispose];\r\n            if (async) inner = dispose;\r\n        }\r\n        if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\r\n        if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\r\n        env.stack.push({ value: value, dispose: dispose, async: async });\r\n    }\r\n    else if (async) {\r\n        env.stack.push({ async: true });\r\n    }\r\n    return value;\r\n\r\n}\r\n\r\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\r\n    var e = new Error(message);\r\n    return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\r\n};\r\n\r\nexport function __disposeResources(env) {\r\n    function fail(e) {\r\n        env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\r\n        env.hasError = true;\r\n    }\r\n    var r, s = 0;\r\n    function next() {\r\n        while (r = env.stack.pop()) {\r\n            try {\r\n                if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\r\n                if (r.dispose) {\r\n                    var result = r.dispose.call(r.value);\r\n                    if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\r\n                }\r\n                else s |= 1;\r\n            }\r\n            catch (e) {\r\n                fail(e);\r\n            }\r\n        }\r\n        if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\r\n        if (env.hasError) throw env.error;\r\n    }\r\n    return next();\r\n}\r\n\r\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\r\n    if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\r\n        return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\r\n            return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\r\n        });\r\n    }\r\n    return path;\r\n}\r\n\r\nexport default {\r\n    __extends: __extends,\r\n    __assign: __assign,\r\n    __rest: __rest,\r\n    __decorate: __decorate,\r\n    __param: __param,\r\n    __esDecorate: __esDecorate,\r\n    __runInitializers: __runInitializers,\r\n    __propKey: __propKey,\r\n    __setFunctionName: __setFunctionName,\r\n    __metadata: __metadata,\r\n    __awaiter: __awaiter,\r\n    __generator: __generator,\r\n    __createBinding: __createBinding,\r\n    __exportStar: __exportStar,\r\n    __values: __values,\r\n    __read: __read,\r\n    __spread: __spread,\r\n    __spreadArrays: __spreadArrays,\r\n    __spreadArray: __spreadArray,\r\n    __await: __await,\r\n    __asyncGenerator: __asyncGenerator,\r\n    __asyncDelegator: __asyncDelegator,\r\n    __asyncValues: __asyncValues,\r\n    __makeTemplateObject: __makeTemplateObject,\r\n    __importStar: __importStar,\r\n    __importDefault: __importDefault,\r\n    __classPrivateFieldGet: __classPrivateFieldGet,\r\n    __classPrivateFieldSet: __classPrivateFieldSet,\r\n    __classPrivateFieldIn: __classPrivateFieldIn,\r\n    __addDisposableResource: __addDisposableResource,\r\n    __disposeResources: __disposeResources,\r\n    __rewriteRelativeImportExtension: __rewriteRelativeImportExtension,\r\n};\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { customElement, property, state } from \"lit/decorators.js\";\r\n\r\nimport { DesignToken, Role } from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport { M3eNavItemElement } from \"./NavItemElement\";\r\nimport { NavItemOrientation } from \"./NavItemOrientation\";\r\nimport { NavBarMode } from \"./NavBarMode\";\r\n\r\n/**\r\n * A horizontal bar, typically used on smaller devices, that allows a user to switch between 3-5 views.\r\n *\r\n * @description\r\n * The `m3e-nav-bar` component provides a horizontal navigation bar for switching between primary destinations in\r\n * an application. Designed for smaller devices, it supports 3-5 interactive items, orientation, and theming\r\n * via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav bar with vertically oriented items.\r\n * ```html\r\n * <m3e-nav-bar>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-bar>\r\n * ```\r\n *\r\n * @tag m3e-nav-bar\r\n *\r\n * @slot - Renders the items of the bar.\r\n *\r\n * @attr mode - The mode in which items in the bar are presented.\r\n *\r\n * @fires change - Emitted when the selected state of an item changes.\r\n *\r\n * @cssprop --m3e-nav-bar-height - Height of the navigation bar.\r\n * @cssprop --m3e-nav-bar-container-color - Background color of the navigation bar container.\r\n * @cssprop --m3e-nav-bar-vertical-item-width - Minimum width of vertical nav items.\r\n */\r\n@customElement(\"m3e-nav-bar\")\r\nexport class M3eNavBarElement extends Role(LitElement, \"navigation\") {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      overflow-x: auto;\r\n      overflow-y: hidden;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      min-height: var(--m3e-nav-bar-height, 4rem);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: stretch;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      min-height: inherit;\r\n      height: inherit;\r\n      width: 100%;\r\n      background-color: var(--m3e-nav-bar-container-color, ${DesignToken.color.surfaceContainer});\r\n      --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem);\r\n    }\r\n  `;\r\n\r\n  /** @internal */ readonly [selectionManager] = new SelectionManager<M3eNavItemElement>().disableRovingTabIndex();\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ @state() private _mode?: Exclude<NavBarMode, \"auto\">;\r\n\r\n  /**\r\n   * The mode in which items in the bar are presented.\r\n   * @default \"compact\"\r\n   */\r\n  @property({ reflect: true }) mode: NavBarMode = \"compact\";\r\n\r\n  /** The items of the bar. */\r\n  get items(): readonly M3eNavItemElement[] {\r\n    return this[selectionManager].items;\r\n  }\r\n\r\n  /** The selected item. */\r\n  get selected(): M3eNavItemElement | null {\r\n    return this[selectionManager].selectedItems[0] ?? null;\r\n  }\r\n\r\n  /** The current mode applied to the bar. */\r\n  get currentMode(): Exclude<NavBarMode, \"auto\"> {\r\n    return this._mode ?? (this.mode !== \"compact\" ? \"expanded\" : \"compact\");\r\n  }\r\n  set currentMode(value: Exclude<NavBarMode, \"auto\">) {\r\n    this._mode = value;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._mode = undefined;\r\n    this.#breakpointUnobserve?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"mode\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.mode === \"auto\") {\r\n        this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) => {\r\n          this._mode = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? \"compact\" : \"expanded\";\r\n          this._updateItems();\r\n        });\r\n      } else {\r\n        this._mode = undefined;\r\n        this._updateItems();\r\n      }\r\n    }\r\n    if (changedProperties.has(\"_mode\")) {\r\n      this._updateItems();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @change=\"${this.#handleChange}\" @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    this[selectionManager].setItems([...this.querySelectorAll(\"m3e-nav-item\")]);\r\n    this._updateItems();\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateItems(): void {\r\n    const orientation: NavItemOrientation = this.currentMode === \"compact\" ? \"vertical\" : \"horizontal\";\r\n    this._updateOrientation(orientation);\r\n    this.classList.toggle(\"-compact\", orientation === \"vertical\");\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateOrientation(orientation: NavItemOrientation): void {\r\n    this[selectionManager].items.forEach((x) => (x.orientation = orientation));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-bar\": M3eNavBarElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { customElement, property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  DesignToken,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eNavBarElement } from \"./NavBarElement\";\r\nimport { NavItemOrientation } from \"./NavItemOrientation\";\r\n\r\n/**\r\n * An item, placed in a navigation bar or rail, used to navigate to destinations in an application.\r\n *\r\n * @description\r\n * The `m3e-nav-item` component represents an interactive navigation item for use in navigation bars\r\n * or rails. Designed according to Material 3 principles, it supports icon and label slots, selection state,\r\n * orientation, and extensive theming via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav bar with vertically oriented items.\r\n * ```html\r\n * <m3e-nav-bar>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-bar>\r\n * ```\r\n *\r\n * @tag m3e-nav-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders the icon of the item.\r\n * @slot selected-icon - Renders the icon of the item when selected.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr orientation - The layout orientation of the item.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr selected - A value indicating whether the element is selected.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires input - Emitted when the selected state changes.\r\n * @fires change - Emitted when the selected state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-nav-item-label-text-font-size - Font size for the label text.\r\n * @cssprop --m3e-nav-item-label-text-font-weight - Font weight for the label text.\r\n * @cssprop --m3e-nav-item-label-text-line-height - Line height for the label text.\r\n * @cssprop --m3e-nav-item-label-text-tracking - Letter spacing for the label text.\r\n * @cssprop --m3e-nav-item-shape - Border radius of the nav item.\r\n * @cssprop --m3e-nav-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-nav-item-spacing - Spacing between icon and label.\r\n * @cssprop --m3e-nav-item-inactive-label-text-color - Color of the label text when inactive.\r\n * @cssprop --m3e-nav-item-inactive-icon-color - Color of the icon when inactive.\r\n * @cssprop --m3e-nav-item-inactive-hover-state-layer-color - State layer color on hover when inactive.\r\n * @cssprop --m3e-nav-item-inactive-focus-state-layer-color - State layer color on focus when inactive.\r\n * @cssprop --m3e-nav-item-inactive-pressed-state-layer-color - State layer color on press when inactive.\r\n * @cssprop --m3e-nav-item-active-label-text-color - Color of the label text when active/selected.\r\n * @cssprop --m3e-nav-item-active-icon-color - Color of the icon when active/selected.\r\n * @cssprop --m3e-nav-item-active-container-color - Container color when active/selected.\r\n * @cssprop --m3e-nav-item-active-hover-state-layer-color - State layer color on hover when active.\r\n * @cssprop --m3e-nav-item-active-focus-state-layer-color - State layer color on focus when active.\r\n * @cssprop --m3e-nav-item-active-pressed-state-layer-color - State layer color on press when active.\r\n * @cssprop --m3e-nav-item-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-nav-item-disabled-label-text-color - Color of the label text when disabled.\r\n * @cssprop --m3e-nav-item-disabled-label-text-opacity - Opacity of the label text when disabled.\r\n * @cssprop --m3e-nav-item-disabled-icon-color - Color of the icon when disabled.\r\n * @cssprop --m3e-nav-item-disabled-icon-opacity - Opacity of the icon when disabled.\r\n * @cssprop --m3e-horizontal-nav-item-padding - Padding for horizontal orientation.\r\n * @cssprop --m3e-horizontal-nav-item-active-indicator-height - Height of the active indicator in horizontal orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-width - Width of the active indicator in vertical orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-height - Height of the active indicator in vertical orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-margin - Margin for the active indicator in vertical orientation.\r\n */\r\n@customElement(\"m3e-nav-item\")\r\nexport class M3eNavItemElement extends LinkButton(\r\n  Selected(KeyboardClick(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, \"button\"), true)))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      position: relative;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: 1;\r\n      font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize});\r\n      font-weight: var(\r\n        --m3e-nav-item-label-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.medium.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-nav-item-label-text-line-height,\r\n        ${DesignToken.typescale.standard.label.medium.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking});\r\n      border-radius: var(--m3e-nav-item-shape, ${DesignToken.shape.corner.full});\r\n      min-width: var(--_nav-item-min-width);\r\n      align-self: var(--_nav-item-align-self);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host([orientation=\"horizontal\"]) {\r\n      max-width: fit-content;\r\n    }\r\n    :host(:not(:disabled):not([disabled-interactive])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([disabled-interactive]) {\r\n      cursor: not-allowed;\r\n    }\r\n    .outer {\r\n      height: 100%;\r\n    }\r\n    .outer,\r\n    .inner {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: var(--_nav-item-justify-content, center);\r\n      position: relative;\r\n      border-radius: inherit;\r\n    }\r\n    .icon-wrapper {\r\n      position: relative;\r\n      flex: none;\r\n    }\r\n    .base {\r\n      justify-content: unset;\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n    }\r\n    .icon {\r\n      position: absolute;\r\n    }\r\n    .label {\r\n      vertical-align: middle;\r\n    }\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"selected-icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important;\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-item-inactive-hover-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-item-inactive-focus-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-nav-item-inactive-pressed-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label {\r\n      color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {\r\n      color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .outer {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-item-active-hover-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-item-active-focus-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-nav-item-active-pressed-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .label {\r\n      color: var(--m3e-nav-item-active-label-text-color, ${DesignToken.color.secondary});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {\r\n      background-color: var(--m3e-nav-item-active-container-color, ${DesignToken.color.secondaryContainer});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .icon {\r\n      color: var(--m3e-nav-item-active-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([orientation=\"vertical\"]) .outer {\r\n      align-self: stretch;\r\n      align-items: flex-start;\r\n    }\r\n    :host([orientation=\"vertical\"]) .label {\r\n      text-align: center;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-nav-item-spacing, 0.25rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple {\r\n      top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n      bottom: unset;\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple,\r\n    :host([orientation=\"vertical\"]) .icon-wrapper {\r\n      width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple,\r\n    :host([orientation=\"vertical\"]) .icon-wrapper {\r\n      height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .icon {\r\n      top: calc(\r\n        calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc(\r\n            var(--m3e-nav-item-icon-size, 1.5rem) / 2\r\n          )\r\n      );\r\n      left: calc(\r\n        calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc(\r\n            var(--m3e-nav-item-icon-size, 1.5rem) / 2\r\n          )\r\n      );\r\n    }\r\n    :host([orientation=\"vertical\"]) .focus-ring {\r\n      border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([orientation=\"horizontal\"]) .icon-wrapper {\r\n      width: var(--m3e-nav-item-icon-size, 1.5rem);\r\n      height: var(--m3e-nav-item-icon-size, 1.5rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .base {\r\n      padding: var(--m3e-horizontal-nav-item-padding, 1rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .label {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([orientation=\"horizontal\"]) .base {\r\n      column-gap: var(--m3e-nav-item-spacing, 0.25rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .inner {\r\n      height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem);\r\n      width: fit-content;\r\n    }\r\n    .state-layer,\r\n    .ripple {\r\n      margin-inline: auto;\r\n    }\r\n    :host(:disabled) .label,\r\n    :host([disabled-interactive]) .label {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-item-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-item-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .icon,\r\n    :host([disabled-interactive]) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-item-disabled-icon-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-item-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:disabled) .label,\r\n      :host([disabled-interactive]) .label,\r\n      :host(:disabled) .icon,\r\n      :host([disabled-interactive]) .icon {\r\n        color: GrayText;\r\n      }\r\n      :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label,\r\n      :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {\r\n        color: ButtonText;\r\n      }\r\n      :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {\r\n        background-color: ButtonText;\r\n      }\r\n      :host([orientation=\"vertical\"][selected]:not(:disabled):not([disabled-interactive])) .label {\r\n        color: ButtonText;\r\n      }\r\n      :host([orientation=\"horizontal\"][selected]:not(:disabled):not([disabled-interactive])) .label,\r\n      :host([selected]:not(:disabled):not([disabled-interactive])) .icon {\r\n        forced-color-adjust: none;\r\n        color: ButtonFace;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /**\r\n   * The layout orientation of the item.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ reflect: true }) orientation: NavItemOrientation = \"vertical\";\r\n\r\n  /** The navigation bar to which this item belongs. */\r\n  get navBar(): M3eNavBarElement | null {\r\n    return this.closest(\"m3e-nav-bar\") ?? this.closest(\"m3e-nav-rail\") ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler, { capture: true });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler, { capture: true });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.ariaSelected = null;\r\n      this.ariaPressed = null;\r\n      this.ariaCurrent = `${this.selected}`;\r\n      for (const icon of this.querySelectorAll(\"m3e-icon\")) {\r\n        icon.toggleAttribute(\"filled\", this.selected);\r\n      }\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"orientation\")) {\r\n      this._focusRing?.attach(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const disabled = this.disabled || this.disabledInteractive;\r\n    return html`${this.orientation === \"vertical\"\r\n        ? html`<m3e-focus-ring class=\"focus-ring\" inward></m3e-focus-ring>`\r\n        : nothing}\r\n      <div class=\"outer\">\r\n        ${this[renderPseudoLink]()}\r\n        <div class=\"inner\">\r\n          ${this.orientation === \"horizontal\" ? html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>` : nothing}\r\n          <m3e-state-layer class=\"state-layer\" ?disabled=\"${disabled}\"></m3e-state-layer>\r\n          <m3e-ripple class=\"ripple\" centered ?disabled=\"${disabled}\"></m3e-ripple>\r\n          <div class=\"touch\" aria-hidden=\"true\"></div>\r\n          <div class=\"base\">\r\n            <div class=\"icon-wrapper\" aria-hidden=\"true\">\r\n              <div class=\"icon\">\r\n                <slot name=\"icon\" aria-hidden=\"true\"></slot>\r\n              </div>\r\n            </div>\r\n            <div class=\"label\">\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    this.selected = true;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.selected = false;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-item\": M3eNavItemElement;\r\n  }\r\n}\r\n"],"names":["__decorate","decorators","target","key","desc","d","c","arguments","length","r","Object","getOwnPropertyDescriptor","Reflect","decorate","i","defineProperty","__classPrivateFieldGet","receiver","state","kind","f","TypeError","has","call","value","get","SuppressedError","M3eNavBarElement","Role","LitElement","constructor","this","SelectionManager","disableRovingTabIndex","_M3eNavBarElement_breakpointUnobserve","set","mode","items","selectionManager","selected","selectedItems","currentMode","_mode","disconnectedCallback","super","undefined","update","changedProperties","__classPrivateFieldSet","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","_updateItems","render","html","_M3eNavBarElement_instances","_M3eNavBarElement_handleChange","_M3eNavBarElement_handleSlotChange","orientation","_updateOrientation","classList","toggle","forEach","x","setItems","querySelectorAll","e","stopPropagation","dispatchEvent","Event","bubbles","styles","css","DesignToken","scrollbar","thinWidth","color","surfaceContainer","prototype","property","reflect","customElement","M3eNavItemElement","LinkButton","Selected","KeyboardClick","Focusable","DisabledInteractive","Disabled","AttachInternals","_M3eNavItemElement_clickHandler","navBar","closest","connectedCallback","addEventListener","capture","removeEventListener","ariaSelected","ariaPressed","ariaCurrent","icon","toggleAttribute","notifySelectionChange","updated","_changedProperties","_focusRing","attach","firstUpdated","_stateLayer","_ripple","disabled","disabledInteractive","nothing","renderPseudoLink","defaultPrevented","composed","cancelable","typescale","standard","label","medium","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","onSecondaryContainer","onSurfaceVariant","secondary","secondaryContainer","onSurface","query"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"nav-bar.min.js","sources":["../../../node_modules/tslib/tslib.es6.js","../../src/nav-bar/NavBarElement.ts","../../src/nav-bar/NavItemElement.ts"],"sourcesContent":["/******************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n***************************************************************************** */\r\n/* global Reflect, Promise, SuppressedError, Symbol, Iterator */\r\n\r\nvar extendStatics = function(d, b) {\r\n    extendStatics = Object.setPrototypeOf ||\r\n        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\r\n        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n    return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n    if (typeof b !== \"function\" && b !== null)\r\n        throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n    extendStatics(d, b);\r\n    function __() { this.constructor = d; }\r\n    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n    __assign = Object.assign || function __assign(t) {\r\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n            s = arguments[i];\r\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n        }\r\n        return t;\r\n    }\r\n    return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n    var t = {};\r\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n        t[p] = s[p];\r\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n                t[p[i]] = s[p[i]];\r\n        }\r\n    return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    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;\r\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n    return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {\r\n    function accept(f) { if (f !== void 0 && typeof f !== \"function\") throw new TypeError(\"Function expected\"); return f; }\r\n    var kind = contextIn.kind, key = kind === \"getter\" ? \"get\" : kind === \"setter\" ? \"set\" : \"value\";\r\n    var target = !descriptorIn && ctor ? contextIn[\"static\"] ? ctor : ctor.prototype : null;\r\n    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});\r\n    var _, done = false;\r\n    for (var i = decorators.length - 1; i >= 0; i--) {\r\n        var context = {};\r\n        for (var p in contextIn) context[p] = p === \"access\" ? {} : contextIn[p];\r\n        for (var p in contextIn.access) context.access[p] = contextIn.access[p];\r\n        context.addInitializer = function (f) { if (done) throw new TypeError(\"Cannot add initializers after decoration has completed\"); extraInitializers.push(accept(f || null)); };\r\n        var result = (0, decorators[i])(kind === \"accessor\" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);\r\n        if (kind === \"accessor\") {\r\n            if (result === void 0) continue;\r\n            if (result === null || typeof result !== \"object\") throw new TypeError(\"Object expected\");\r\n            if (_ = accept(result.get)) descriptor.get = _;\r\n            if (_ = accept(result.set)) descriptor.set = _;\r\n            if (_ = accept(result.init)) initializers.unshift(_);\r\n        }\r\n        else if (_ = accept(result)) {\r\n            if (kind === \"field\") initializers.unshift(_);\r\n            else descriptor[key] = _;\r\n        }\r\n    }\r\n    if (target) Object.defineProperty(target, contextIn.name, descriptor);\r\n    done = true;\r\n};\r\n\r\nexport function __runInitializers(thisArg, initializers, value) {\r\n    var useValue = arguments.length > 2;\r\n    for (var i = 0; i < initializers.length; i++) {\r\n        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);\r\n    }\r\n    return useValue ? value : void 0;\r\n};\r\n\r\nexport function __propKey(x) {\r\n    return typeof x === \"symbol\" ? x : \"\".concat(x);\r\n};\r\n\r\nexport function __setFunctionName(f, name, prefix) {\r\n    if (typeof name === \"symbol\") name = name.description ? \"[\".concat(name.description, \"]\") : \"\";\r\n    return Object.defineProperty(f, \"name\", { configurable: true, value: prefix ? \"\".concat(prefix, \" \", name) : name });\r\n};\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n    if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n    return new (P || (P = Promise))(function (resolve, reject) {\r\n        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n        function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n        step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n    });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === \"function\" ? Iterator : Object).prototype);\r\n    return g.next = verb(0), g[\"throw\"] = verb(1), g[\"return\"] = verb(2), typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n    function verb(n) { return function (v) { return step([n, v]); }; }\r\n    function step(op) {\r\n        if (f) throw new TypeError(\"Generator is already executing.\");\r\n        while (g && (g = 0, op[0] && (_ = 0)), _) try {\r\n            if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n            if (y = 0, t) op = [op[0] & 2, t.value];\r\n            switch (op[0]) {\r\n                case 0: case 1: t = op; break;\r\n                case 4: _.label++; return { value: op[1], done: false };\r\n                case 5: _.label++; y = op[1]; op = [0]; continue;\r\n                case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n                default:\r\n                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n                    if (t[2]) _.ops.pop();\r\n                    _.trys.pop(); continue;\r\n            }\r\n            op = body.call(thisArg, _);\r\n        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n    }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    var desc = Object.getOwnPropertyDescriptor(m, k);\r\n    if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\r\n        desc = { enumerable: true, get: function() { return m[k]; } };\r\n    }\r\n    Object.defineProperty(o, k2, desc);\r\n}) : (function(o, m, k, k2) {\r\n    if (k2 === undefined) k2 = k;\r\n    o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n    for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n    var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n    if (m) return m.call(o);\r\n    if (o && typeof o.length === \"number\") return {\r\n        next: function () {\r\n            if (o && i >= o.length) o = void 0;\r\n            return { value: o && o[i++], done: !o };\r\n        }\r\n    };\r\n    throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n    var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n    if (!m) return o;\r\n    var i = m.call(o), r, ar = [], e;\r\n    try {\r\n        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n    }\r\n    catch (error) { e = { error: error }; }\r\n    finally {\r\n        try {\r\n            if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n        }\r\n        finally { if (e) throw e.error; }\r\n    }\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spread() {\r\n    for (var ar = [], i = 0; i < arguments.length; i++)\r\n        ar = ar.concat(__read(arguments[i]));\r\n    return ar;\r\n}\r\n\r\n/** @deprecated */\r\nexport function __spreadArrays() {\r\n    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n    for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n            r[k] = a[j];\r\n    return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n        if (ar || !(i in from)) {\r\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n            ar[i] = from[i];\r\n        }\r\n    }\r\n    return to.concat(ar || Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n    return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var g = generator.apply(thisArg, _arguments || []), i, q = [];\r\n    return i = Object.create((typeof AsyncIterator === \"function\" ? AsyncIterator : Object).prototype), verb(\"next\"), verb(\"throw\"), verb(\"return\", awaitReturn), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n    function awaitReturn(f) { return function (v) { return Promise.resolve(v).then(f, reject); }; }\r\n    function verb(n, f) { if (g[n]) { i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; if (f) i[n] = f(i[n]); } }\r\n    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n    function fulfill(value) { resume(\"next\", value); }\r\n    function reject(value) { resume(\"throw\", value); }\r\n    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n    var i, p;\r\n    return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n    if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n    var m = o[Symbol.asyncIterator], i;\r\n    return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n    if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n    return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n    Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n    o[\"default\"] = v;\r\n};\r\n\r\nvar ownKeys = function(o) {\r\n    ownKeys = Object.getOwnPropertyNames || function (o) {\r\n        var ar = [];\r\n        for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;\r\n        return ar;\r\n    };\r\n    return ownKeys(o);\r\n};\r\n\r\nexport function __importStar(mod) {\r\n    if (mod && mod.__esModule) return mod;\r\n    var result = {};\r\n    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== \"default\") __createBinding(result, mod, k[i]);\r\n    __setModuleDefault(result, mod);\r\n    return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n    return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n    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\");\r\n    return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n    if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n    if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n    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\");\r\n    return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n\r\nexport function __classPrivateFieldIn(state, receiver) {\r\n    if (receiver === null || (typeof receiver !== \"object\" && typeof receiver !== \"function\")) throw new TypeError(\"Cannot use 'in' operator on non-object\");\r\n    return typeof state === \"function\" ? receiver === state : state.has(receiver);\r\n}\r\n\r\nexport function __addDisposableResource(env, value, async) {\r\n    if (value !== null && value !== void 0) {\r\n        if (typeof value !== \"object\" && typeof value !== \"function\") throw new TypeError(\"Object expected.\");\r\n        var dispose, inner;\r\n        if (async) {\r\n            if (!Symbol.asyncDispose) throw new TypeError(\"Symbol.asyncDispose is not defined.\");\r\n            dispose = value[Symbol.asyncDispose];\r\n        }\r\n        if (dispose === void 0) {\r\n            if (!Symbol.dispose) throw new TypeError(\"Symbol.dispose is not defined.\");\r\n            dispose = value[Symbol.dispose];\r\n            if (async) inner = dispose;\r\n        }\r\n        if (typeof dispose !== \"function\") throw new TypeError(\"Object not disposable.\");\r\n        if (inner) dispose = function() { try { inner.call(this); } catch (e) { return Promise.reject(e); } };\r\n        env.stack.push({ value: value, dispose: dispose, async: async });\r\n    }\r\n    else if (async) {\r\n        env.stack.push({ async: true });\r\n    }\r\n    return value;\r\n\r\n}\r\n\r\nvar _SuppressedError = typeof SuppressedError === \"function\" ? SuppressedError : function (error, suppressed, message) {\r\n    var e = new Error(message);\r\n    return e.name = \"SuppressedError\", e.error = error, e.suppressed = suppressed, e;\r\n};\r\n\r\nexport function __disposeResources(env) {\r\n    function fail(e) {\r\n        env.error = env.hasError ? new _SuppressedError(e, env.error, \"An error was suppressed during disposal.\") : e;\r\n        env.hasError = true;\r\n    }\r\n    var r, s = 0;\r\n    function next() {\r\n        while (r = env.stack.pop()) {\r\n            try {\r\n                if (!r.async && s === 1) return s = 0, env.stack.push(r), Promise.resolve().then(next);\r\n                if (r.dispose) {\r\n                    var result = r.dispose.call(r.value);\r\n                    if (r.async) return s |= 2, Promise.resolve(result).then(next, function(e) { fail(e); return next(); });\r\n                }\r\n                else s |= 1;\r\n            }\r\n            catch (e) {\r\n                fail(e);\r\n            }\r\n        }\r\n        if (s === 1) return env.hasError ? Promise.reject(env.error) : Promise.resolve();\r\n        if (env.hasError) throw env.error;\r\n    }\r\n    return next();\r\n}\r\n\r\nexport function __rewriteRelativeImportExtension(path, preserveJsx) {\r\n    if (typeof path === \"string\" && /^\\.\\.?\\//.test(path)) {\r\n        return path.replace(/\\.(tsx)$|((?:\\.d)?)((?:\\.[^./]+?)?)\\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {\r\n            return tsx ? preserveJsx ? \".jsx\" : \".js\" : d && (!ext || !cm) ? m : (d + ext + \".\" + cm.toLowerCase() + \"js\");\r\n        });\r\n    }\r\n    return path;\r\n}\r\n\r\nexport default {\r\n    __extends: __extends,\r\n    __assign: __assign,\r\n    __rest: __rest,\r\n    __decorate: __decorate,\r\n    __param: __param,\r\n    __esDecorate: __esDecorate,\r\n    __runInitializers: __runInitializers,\r\n    __propKey: __propKey,\r\n    __setFunctionName: __setFunctionName,\r\n    __metadata: __metadata,\r\n    __awaiter: __awaiter,\r\n    __generator: __generator,\r\n    __createBinding: __createBinding,\r\n    __exportStar: __exportStar,\r\n    __values: __values,\r\n    __read: __read,\r\n    __spread: __spread,\r\n    __spreadArrays: __spreadArrays,\r\n    __spreadArray: __spreadArray,\r\n    __await: __await,\r\n    __asyncGenerator: __asyncGenerator,\r\n    __asyncDelegator: __asyncDelegator,\r\n    __asyncValues: __asyncValues,\r\n    __makeTemplateObject: __makeTemplateObject,\r\n    __importStar: __importStar,\r\n    __importDefault: __importDefault,\r\n    __classPrivateFieldGet: __classPrivateFieldGet,\r\n    __classPrivateFieldSet: __classPrivateFieldSet,\r\n    __classPrivateFieldIn: __classPrivateFieldIn,\r\n    __addDisposableResource: __addDisposableResource,\r\n    __disposeResources: __disposeResources,\r\n    __rewriteRelativeImportExtension: __rewriteRelativeImportExtension,\r\n};\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, state } from \"lit/decorators.js\";\r\n\r\nimport { AttachInternals, element, DesignToken, Role, setCustomState } from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport { M3eNavItemElement } from \"./NavItemElement\";\r\nimport { NavItemOrientation } from \"./NavItemOrientation\";\r\nimport { NavBarMode } from \"./NavBarMode\";\r\n\r\n/**\r\n * A horizontal bar, typically used on smaller devices, that allows a user to switch between 3-5 views.\r\n *\r\n * @description\r\n * The `m3e-nav-bar` component provides a horizontal navigation bar for switching between primary destinations in\r\n * an application. Designed for smaller devices, it supports 3-5 interactive items, orientation, and theming\r\n * via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav bar with vertically oriented items.\r\n * ```html\r\n * <m3e-nav-bar>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-bar>\r\n * ```\r\n *\r\n * @tag m3e-nav-bar\r\n *\r\n * @slot - Renders the items of the bar.\r\n *\r\n * @attr mode - The mode in which items in the bar are presented.\r\n *\r\n * @fires change - Emitted when the selected state of an item changes.\r\n *\r\n * @cssprop --m3e-nav-bar-height - Height of the navigation bar.\r\n * @cssprop --m3e-nav-bar-container-color - Background color of the navigation bar container.\r\n * @cssprop --m3e-nav-bar-vertical-item-width - Minimum width of vertical nav items.\r\n */\r\n@element(\"m3e-nav-bar\")\r\nexport class M3eNavBarElement extends AttachInternals(Role(LitElement, \"navigation\")) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: block;\r\n      overflow-x: auto;\r\n      overflow-y: hidden;\r\n      scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n      scrollbar-color: ${DesignToken.scrollbar.color};\r\n      min-height: var(--m3e-nav-bar-height, 4rem);\r\n    }\r\n    .base {\r\n      display: flex;\r\n      align-items: stretch;\r\n      justify-content: center;\r\n      box-sizing: border-box;\r\n      min-height: inherit;\r\n      height: inherit;\r\n      width: 100%;\r\n      background-color: var(--m3e-nav-bar-container-color, ${DesignToken.color.surfaceContainer});\r\n      --_nav-item-min-width: var(--m3e-nav-bar-vertical-item-width, 7rem);\r\n    }\r\n  `;\r\n\r\n  /** @internal */ readonly [selectionManager] = new SelectionManager<M3eNavItemElement>().disableRovingTabIndex();\r\n  /** @private */ #breakpointUnobserve?: () => void;\r\n  /** @private */ @state() private _mode?: Exclude<NavBarMode, \"auto\">;\r\n\r\n  /**\r\n   * The mode in which items in the bar are presented.\r\n   * @default \"compact\"\r\n   */\r\n  @property({ reflect: true }) mode: NavBarMode = \"compact\";\r\n\r\n  /** The items of the bar. */\r\n  get items(): readonly M3eNavItemElement[] {\r\n    return this[selectionManager].items;\r\n  }\r\n\r\n  /** The selected item. */\r\n  get selected(): M3eNavItemElement | null {\r\n    return this[selectionManager].selectedItems[0] ?? null;\r\n  }\r\n\r\n  /** The current mode applied to the bar. */\r\n  get currentMode(): Exclude<NavBarMode, \"auto\"> {\r\n    return this._mode ?? (this.mode !== \"compact\" ? \"expanded\" : \"compact\");\r\n  }\r\n  set currentMode(value: Exclude<NavBarMode, \"auto\">) {\r\n    this._mode = value;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n\r\n    this._mode = undefined;\r\n    this.#breakpointUnobserve?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"mode\")) {\r\n      this.#breakpointUnobserve?.();\r\n\r\n      if (this.mode === \"auto\") {\r\n        this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall, Breakpoint.Small], (matches) => {\r\n          this._mode = matches.get(Breakpoint.XSmall) || matches.get(Breakpoint.Small) ? \"compact\" : \"expanded\";\r\n          this._updateItems();\r\n        });\r\n      } else {\r\n        this._mode = undefined;\r\n        this._updateItems();\r\n      }\r\n    }\r\n    if (changedProperties.has(\"_mode\")) {\r\n      this._updateItems();\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <slot @change=\"${this.#handleChange}\" @slotchange=\"${this.#handleSlotChange}\"></slot>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange(): void {\r\n    this[selectionManager].setItems([...this.querySelectorAll(\"m3e-nav-item\")]);\r\n    this._updateItems();\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateItems(): void {\r\n    const orientation: NavItemOrientation = this.currentMode === \"compact\" ? \"vertical\" : \"horizontal\";\r\n    this._updateOrientation(orientation);\r\n    setCustomState(this, \"-compact\", orientation === \"vertical\");\r\n  }\r\n\r\n  /** @internal */\r\n  protected _updateOrientation(orientation: NavItemOrientation): void {\r\n    this[selectionManager].items.forEach((x) => (x.orientation = orientation));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-bar\": M3eNavBarElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, nothing, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  element,\r\n  DesignToken,\r\n  Disabled,\r\n  DisabledInteractive,\r\n  Focusable,\r\n  KeyboardClick,\r\n  LinkButton,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  renderPseudoLink,\r\n  Role,\r\n  Selected,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\nimport type { M3eNavBarElement } from \"./NavBarElement\";\r\nimport { NavItemOrientation } from \"./NavItemOrientation\";\r\n\r\n/**\r\n * An item, placed in a navigation bar or rail, used to navigate to destinations in an application.\r\n *\r\n * @description\r\n * The `m3e-nav-item` component represents an interactive navigation item for use in navigation bars\r\n * or rails. Designed according to Material 3 principles, it supports icon and label slots, selection state,\r\n * orientation, and extensive theming via CSS custom properties.\r\n *\r\n * @example\r\n * The following example illustrates a nav bar with vertically oriented items.\r\n * ```html\r\n * <m3e-nav-bar>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"news\"></m3e-icon>News</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"globe\"></m3e-icon>Global</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"star\"></m3e-icon>For you</m3e-nav-item>\r\n *   <m3e-nav-item><m3e-icon slot=\"icon\" name=\"newsstand\"></m3e-icon>Trending</m3e-nav-item>\r\n * </m3e-nav-bar>\r\n * ```\r\n *\r\n * @tag m3e-nav-item\r\n *\r\n * @slot - Renders the label of the item.\r\n * @slot icon - Renders the icon of the item.\r\n * @slot selected-icon - Renders the icon of the item when selected.\r\n *\r\n * @attr disabled - A value indicating whether the element is disabled.\r\n * @attr disabled-interactive - A value indicating whether the element is disabled and interactive.\r\n * @attr download - A value indicating whether the `target` of the link button will be downloaded, optionally specifying the new name of the file.\r\n * @attr href - The URL to which the link button points.\r\n * @attr orientation - The layout orientation of the item.\r\n * @attr rel - The relationship between the `target` of the link button and the document.\r\n * @attr selected - A value indicating whether the element is selected.\r\n * @attr target - The target of the link button.\r\n *\r\n * @fires input - Emitted when the selected state changes.\r\n * @fires change - Emitted when the selected state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-nav-item-label-text-font-size - Font size for the label text.\r\n * @cssprop --m3e-nav-item-label-text-font-weight - Font weight for the label text.\r\n * @cssprop --m3e-nav-item-label-text-line-height - Line height for the label text.\r\n * @cssprop --m3e-nav-item-label-text-tracking - Letter spacing for the label text.\r\n * @cssprop --m3e-nav-item-shape - Border radius of the nav item.\r\n * @cssprop --m3e-nav-item-icon-size - Size of the icon.\r\n * @cssprop --m3e-nav-item-spacing - Spacing between icon and label.\r\n * @cssprop --m3e-nav-item-inactive-label-text-color - Color of the label text when inactive.\r\n * @cssprop --m3e-nav-item-inactive-icon-color - Color of the icon when inactive.\r\n * @cssprop --m3e-nav-item-inactive-hover-state-layer-color - State layer color on hover when inactive.\r\n * @cssprop --m3e-nav-item-inactive-focus-state-layer-color - State layer color on focus when inactive.\r\n * @cssprop --m3e-nav-item-inactive-pressed-state-layer-color - State layer color on press when inactive.\r\n * @cssprop --m3e-nav-item-active-label-text-color - Color of the label text when active/selected.\r\n * @cssprop --m3e-nav-item-active-icon-color - Color of the icon when active/selected.\r\n * @cssprop --m3e-nav-item-active-container-color - Container color when active/selected.\r\n * @cssprop --m3e-nav-item-active-hover-state-layer-color - State layer color on hover when active.\r\n * @cssprop --m3e-nav-item-active-focus-state-layer-color - State layer color on focus when active.\r\n * @cssprop --m3e-nav-item-active-pressed-state-layer-color - State layer color on press when active.\r\n * @cssprop --m3e-nav-item-focus-ring-shape - Border radius for the focus ring.\r\n * @cssprop --m3e-nav-item-disabled-label-text-color - Color of the label text when disabled.\r\n * @cssprop --m3e-nav-item-disabled-label-text-opacity - Opacity of the label text when disabled.\r\n * @cssprop --m3e-nav-item-disabled-icon-color - Color of the icon when disabled.\r\n * @cssprop --m3e-nav-item-disabled-icon-opacity - Opacity of the icon when disabled.\r\n * @cssprop --m3e-horizontal-nav-item-padding - Padding for horizontal orientation.\r\n * @cssprop --m3e-horizontal-nav-item-active-indicator-height - Height of the active indicator in horizontal orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-width - Width of the active indicator in vertical orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-height - Height of the active indicator in vertical orientation.\r\n * @cssprop --m3e-vertical-nav-item-active-indicator-margin - Margin for the active indicator in vertical orientation.\r\n */\r\n@element(\"m3e-nav-item\")\r\nexport class M3eNavItemElement extends LinkButton(\r\n  Selected(KeyboardClick(Focusable(DisabledInteractive(Disabled(AttachInternals(Role(LitElement, \"button\"), true)))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      vertical-align: middle;\r\n      position: relative;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: 1;\r\n      font-size: var(--m3e-nav-item-label-text-font-size, ${DesignToken.typescale.standard.label.medium.fontSize});\r\n      font-weight: var(\r\n        --m3e-nav-item-label-text-font-weight,\r\n        ${DesignToken.typescale.standard.label.medium.fontWeight}\r\n      );\r\n      line-height: var(\r\n        --m3e-nav-item-label-text-line-height,\r\n        ${DesignToken.typescale.standard.label.medium.lineHeight}\r\n      );\r\n      letter-spacing: var(--m3e-nav-item-label-text-tracking, ${DesignToken.typescale.standard.label.medium.tracking});\r\n      border-radius: var(--m3e-nav-item-shape, ${DesignToken.shape.corner.full});\r\n      min-width: var(--_nav-item-min-width);\r\n      align-self: var(--_nav-item-align-self);\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    :host([orientation=\"horizontal\"]) {\r\n      max-width: fit-content;\r\n    }\r\n    :host(:not(:disabled):not([disabled-interactive])) {\r\n      cursor: pointer;\r\n    }\r\n    :host([disabled-interactive]) {\r\n      cursor: not-allowed;\r\n    }\r\n    .outer {\r\n      height: 100%;\r\n    }\r\n    .outer,\r\n    .inner {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: var(--_nav-item-justify-content, center);\r\n      position: relative;\r\n      border-radius: inherit;\r\n    }\r\n    .icon-wrapper {\r\n      position: relative;\r\n      flex: none;\r\n    }\r\n    .base {\r\n      justify-content: unset;\r\n      box-sizing: border-box;\r\n      vertical-align: middle;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      position: relative;\r\n      width: 100%;\r\n    }\r\n    .icon {\r\n      position: absolute;\r\n    }\r\n    .label {\r\n      vertical-align: middle;\r\n    }\r\n    ::slotted([slot=\"icon\"]),\r\n    ::slotted([slot=\"selected-icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-nav-item-icon-size, 1.5rem) !important;\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .outer {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-item-inactive-hover-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-item-inactive-focus-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-nav-item-inactive-pressed-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label {\r\n      color: var(--m3e-nav-item-inactive-label-text-color, ${DesignToken.color.onSurfaceVariant});\r\n    }\r\n    :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {\r\n      color: var(--m3e-nav-item-inactive-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .outer {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-nav-item-active-hover-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-nav-item-active-focus-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(\r\n        --m3e-nav-item-active-pressed-state-layer-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .label {\r\n      color: var(--m3e-nav-item-active-label-text-color, ${DesignToken.color.secondary});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {\r\n      background-color: var(--m3e-nav-item-active-container-color, ${DesignToken.color.secondaryContainer});\r\n    }\r\n    :host([selected]:not(:disabled):not([disabled-interactive])) .icon {\r\n      color: var(--m3e-nav-item-active-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host([orientation=\"vertical\"]) .outer {\r\n      align-self: stretch;\r\n      align-items: flex-start;\r\n    }\r\n    :host([orientation=\"vertical\"]) .label {\r\n      text-align: center;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      line-clamp: 2;\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      flex-direction: column;\r\n      row-gap: var(--m3e-nav-item-spacing, 0.25rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .base {\r\n      margin-block: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple {\r\n      top: var(--m3e-vertical-nav-item-active-indicator-margin, 0.375rem);\r\n      bottom: unset;\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple,\r\n    :host([orientation=\"vertical\"]) .icon-wrapper {\r\n      width: var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .state-layer,\r\n    :host([orientation=\"vertical\"]) .ripple,\r\n    :host([orientation=\"vertical\"]) .icon-wrapper {\r\n      height: var(--m3e-vertical-nav-item-active-indicator-height, 2rem);\r\n    }\r\n    :host([orientation=\"vertical\"]) .icon {\r\n      top: calc(\r\n        calc(var(--m3e-vertical-nav-item-active-indicator-height, 2rem) / 2) - calc(\r\n            var(--m3e-nav-item-icon-size, 1.5rem) / 2\r\n          )\r\n      );\r\n      left: calc(\r\n        calc(var(--m3e-vertical-nav-item-active-indicator-width, 3.5rem) / 2) - calc(\r\n            var(--m3e-nav-item-icon-size, 1.5rem) / 2\r\n          )\r\n      );\r\n    }\r\n    :host([orientation=\"vertical\"]) .focus-ring {\r\n      border-radius: var(--m3e-nav-item-focus-ring-shape, ${DesignToken.shape.corner.medium});\r\n    }\r\n    :host([orientation=\"horizontal\"]) .icon-wrapper {\r\n      width: var(--m3e-nav-item-icon-size, 1.5rem);\r\n      height: var(--m3e-nav-item-icon-size, 1.5rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .base {\r\n      padding: var(--m3e-horizontal-nav-item-padding, 1rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .label {\r\n      flex: 1 1 auto;\r\n    }\r\n    :host([orientation=\"horizontal\"]) .base {\r\n      column-gap: var(--m3e-nav-item-spacing, 0.25rem);\r\n    }\r\n    :host([orientation=\"horizontal\"]) .inner {\r\n      height: var(--m3e-horizontal-nav-item-active-indicator-height, 2.5rem);\r\n      width: fit-content;\r\n    }\r\n    .state-layer,\r\n    .ripple {\r\n      margin-inline: auto;\r\n    }\r\n    :host(:disabled) .label,\r\n    :host([disabled-interactive]) .label {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-item-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-item-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .icon,\r\n    :host([disabled-interactive]) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-nav-item-disabled-icon-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-nav-item-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    a {\r\n      all: unset;\r\n      display: block;\r\n      position: absolute;\r\n      top: 0px;\r\n      left: 0px;\r\n      right: 0px;\r\n      bottom: 0px;\r\n      z-index: 1;\r\n    }\r\n    @media (forced-colors: active) {\r\n      :host(:disabled) .label,\r\n      :host([disabled-interactive]) .label,\r\n      :host(:disabled) .icon,\r\n      :host([disabled-interactive]) .icon {\r\n        color: GrayText;\r\n      }\r\n      :host(:not([selected]):not(:disabled):not([disabled-interactive])) .label,\r\n      :host(:not([selected]):not(:disabled):not([disabled-interactive])) .icon {\r\n        color: ButtonText;\r\n      }\r\n      :host([selected]:not(:disabled):not([disabled-interactive])) .state-layer {\r\n        background-color: ButtonText;\r\n      }\r\n      :host([orientation=\"vertical\"][selected]:not(:disabled):not([disabled-interactive])) .label {\r\n        color: ButtonText;\r\n      }\r\n      :host([orientation=\"horizontal\"][selected]:not(:disabled):not([disabled-interactive])) .label,\r\n      :host([selected]:not(:disabled):not([disabled-interactive])) .icon {\r\n        forced-color-adjust: none;\r\n        color: ButtonFace;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n\r\n  /**\r\n   * The layout orientation of the item.\r\n   * @default \"vertical\"\r\n   */\r\n  @property({ reflect: true }) orientation: NavItemOrientation = \"vertical\";\r\n\r\n  /** The navigation bar to which this item belongs. */\r\n  get navBar(): M3eNavBarElement | null {\r\n    return this.closest(\"m3e-nav-bar\") ?? this.closest(\"m3e-nav-rail\") ?? null;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler, { capture: true });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler, { capture: true });\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"selected\")) {\r\n      this.ariaSelected = null;\r\n      this.ariaPressed = null;\r\n      this.ariaCurrent = `${this.selected}`;\r\n      for (const icon of this.querySelectorAll(\"m3e-icon\")) {\r\n        icon.toggleAttribute(\"filled\", this.selected);\r\n      }\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override updated(_changedProperties: PropertyValues<this>): void {\r\n    super.updated(_changedProperties);\r\n\r\n    if (_changedProperties.has(\"orientation\")) {\r\n      this._focusRing?.attach(this);\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    const disabled = this.disabled || this.disabledInteractive;\r\n    return html`${this.orientation === \"vertical\"\r\n        ? html`<m3e-focus-ring class=\"focus-ring\" inward></m3e-focus-ring>`\r\n        : nothing}\r\n      <div class=\"outer\">\r\n        ${this[renderPseudoLink]()}\r\n        <div class=\"inner\">\r\n          ${this.orientation === \"horizontal\" ? html`<m3e-focus-ring class=\"focus-ring\"></m3e-focus-ring>` : nothing}\r\n          <m3e-state-layer class=\"state-layer\" ?disabled=\"${disabled}\"></m3e-state-layer>\r\n          <m3e-ripple class=\"ripple\" centered ?disabled=\"${disabled}\"></m3e-ripple>\r\n          <div class=\"touch\" aria-hidden=\"true\"></div>\r\n          <div class=\"base\">\r\n            <div class=\"icon-wrapper\" aria-hidden=\"true\">\r\n              <div class=\"icon\">\r\n                <slot name=\"icon\" aria-hidden=\"true\"></slot>\r\n              </div>\r\n            </div>\r\n            <div class=\"label\">\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    this.selected = true;\r\n    if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n      this.navBar?.[selectionManager].notifySelectionChange(this);\r\n      this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n    } else {\r\n      this.selected = false;\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-nav-item\": M3eNavItemElement;\r\n  }\r\n}\r\n"],"names":["__decorate","decorators","target","key","desc","d","c","arguments","length","r","Object","getOwnPropertyDescriptor","Reflect","decorate","i","defineProperty","__classPrivateFieldGet","receiver","state","kind","f","TypeError","has","call","value","get","SuppressedError","M3eNavBarElement","AttachInternals","Role","LitElement","constructor","this","SelectionManager","disableRovingTabIndex","_M3eNavBarElement_breakpointUnobserve","set","mode","items","selectionManager","selected","selectedItems","currentMode","_mode","disconnectedCallback","super","undefined","update","changedProperties","__classPrivateFieldSet","M3eBreakpointObserver","observe","Breakpoint","XSmall","Small","matches","_updateItems","render","html","_M3eNavBarElement_instances","_M3eNavBarElement_handleChange","_M3eNavBarElement_handleSlotChange","orientation","_updateOrientation","setCustomState","forEach","x","setItems","querySelectorAll","e","stopPropagation","dispatchEvent","Event","bubbles","styles","css","DesignToken","scrollbar","thinWidth","color","surfaceContainer","prototype","property","reflect","element","M3eNavItemElement","LinkButton","Selected","KeyboardClick","Focusable","DisabledInteractive","Disabled","_M3eNavItemElement_clickHandler","navBar","closest","connectedCallback","addEventListener","capture","removeEventListener","ariaSelected","ariaPressed","ariaCurrent","icon","toggleAttribute","notifySelectionChange","updated","_changedProperties","_focusRing","attach","firstUpdated","_stateLayer","_ripple","disabled","disabledInteractive","nothing","renderPseudoLink","defaultPrevented","composed","cancelable","typescale","standard","label","medium","fontSize","fontWeight","lineHeight","tracking","shape","corner","full","onSecondaryContainer","onSurfaceVariant","secondary","secondaryContainer","onSurface","query"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/nav-menu.js

@@ -4,10 +4,10 @@
  * See LICENSE file in the project root for full license text.
  */
 import { LitElement, html, css, unsafeCSS } from 'lit';
-import { query, state, property, customElement } from 'lit/decorators.js';
-import { Selected, Disabled, EventAttribute, AttachInternals, Role, DesignToken, hasAssignedNodes, scrollIntoViewIfNeeded, PressedController, FocusController } from '@m3e/web/core';
+import { Selected, Disabled, EventAttribute, AttachInternals, Role, DesignToken, element, setCustomState, hasAssignedNodes, hasCustomState, scrollIntoViewIfNeeded, PressedController, FocusController, deleteCustomState } from '@m3e/web/core';
 import { selectionManager, SelectionManager } from '@m3e/web/core/a11y';
 import { M3eDirectionality } from '@m3e/web/core/bidi';
+import { query, state, property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 /******************************************************************************
@@ -308,7 +308,7 @@ _M3eNavMenuItemElement_renderIcon = function _M3eNavMenuItemElement_renderIcon()
   return this.selected && !this.hasChildItems ? html`<slot name="selected-icon" @slotchange="${__classPrivateFieldGet(this, _M3eNavMenuItemElement_instances, "m", _M3eNavMenuItemElement_handleIconSlotChange)}">${icon}</slot>` : icon;
 };
 _M3eNavMenuItemElement_handleIconSlotChange = function _M3eNavMenuItemElement_handleIconSlotChange(e) {
-  this.classList.toggle("-with-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "-with-icon", hasAssignedNodes(e.target));
 };
 _M3eNavMenuItemElement_handleSlotChange = function _M3eNavMenuItemElement_handleSlotChange(e) {
   __classPrivateFieldSet(this, _M3eNavMenuItemElement_link, e.target.assignedElements({
@@ -322,7 +322,7 @@ _M3eNavMenuItemElement_handleItemSlotChange = function _M3eNavMenuItemElement_ha
   }).filter(x => x instanceof M3eNavMenuItemElement_1), "f");
   const hadChildItems = this._hasChildItems;
   this._hasChildItems = __classPrivateFieldGet(this, _M3eNavMenuItemElement_items, "f").length > 0;
-  this.classList.toggle("-has-items", this._hasChildItems);
+  setCustomState(this, "-with-items", this._hasChildItems);
   if (hadChildItems || this._hasChildItems) {
     this.selected = __classPrivateFieldGet(this, _M3eNavMenuItemElement_items, "f").some(x => x.selected);
   }
@@ -336,8 +336,8 @@ _M3eNavMenuItemElement_handleClick = function _M3eNavMenuItemElement_handleClick
     __classPrivateFieldGet(this, _M3eNavMenuItemElement_link, "f")?.click();
     const drawerContainer = this.closest("m3e-drawer-container");
     if (drawerContainer) {
-      const drawer = this.closest("[slot='start']") ?? this.closest("[slot='end')");
-      if (drawer && (drawerContainer.classList.contains(`-${drawer.slot}-push`) || drawerContainer.classList.contains(`-${drawer.slot}-over`))) {
+      const drawer = this.closest("[slot='start']") ?? this.closest("[slot='end']");
+      if (drawer && (hasCustomState(drawerContainer, `-${drawer.slot}-push`) || hasCustomState(drawerContainer, `-${drawer.slot}-over`))) {
         setTimeout(() => {
           drawerContainer.removeAttribute(drawer.slot);
           drawerContainer.dispatchEvent(new Event("change", {
@@ -357,7 +357,7 @@ _M3eNavMenuItemElement_handleCollapsibleEvent = function _M3eNavMenuItemElement_
   }));
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
     lightDomStyle.replaceSync(css`m3e-nav-menu-item > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; } m3e-nav-menu-item > m3e-nav-menu-item:first-of-type { margin-block-start: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); } m3e-nav-menu-item > m3e-nav-menu-item:last-of-type { margin-block-end: var(--m3e-nav-menu-item-vertical-inset, 0.25rem); }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
@@ -366,7 +366,7 @@ _M3eNavMenuItemElement_handleCollapsibleEvent = function _M3eNavMenuItemElement_
 /** The styles of the element. */
 M3eNavMenuItemElement.styles = css`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; padding-inline: var(--m3e-nav-menu-item-padding, 1.5rem); height: calc(var(--m3e-nav-menu-item-height, 3.5rem) + ${DesignToken.density.calc(-3)}); column-gap: var(--m3e-nav-menu-item-spacing, 0.75rem); font-size: var(--m3e-nav-menu-item-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-tracking, ${DesignToken.typescale.standard.label.large.tracking}); transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard},
         background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-nav-menu-item-shape, ${DesignToken.shape.corner.full}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .icon, .toggle { flex: none; display: flex; align-items: center; justify-content: center; position: relative; vertical-align: middle; } ::slotted([slot="badge"]) { flex: none; position: relative; font-size: var(--m3e-nav-menu-item-badge-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-nav-menu-item-badge-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-nav-menu-item-badge-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-nav-menu-item-badge-tracking, ${DesignToken.typescale.standard.label.large.tracking}); } .toggle { transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken.motion.duration.medium1})
-        ${DesignToken.motion.easing.standard}`)}; } :host(:not(.-with-icon)) .icon { display: none; } .icon { margin-inline-start: -0.5rem; } .toggle { margin-inline-end: -0.5rem; } .group { padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem); } :host([open]) .toggle { transform: rotate(180deg); } :host(:not(.-has-items)) .toggle, :host(:not(.-has-items)) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem); } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-nav-menu-item-label-color, ${DesignToken.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-nav-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-nav-menu-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(.-has-items):not(:disabled)) .base { color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected]):not(.-has-items):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-unselected-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-unselected-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken.color.onSurface}); } .state-layer { margin-inline: auto; } :host([selected].-has-items:not(:disabled)) .base { background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken.color.surfaceContainerHighest}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-open-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-open-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken.color.onSurface}); } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host([selected]:not(.-has-items):not(:disabled)) .base { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([selected].-has-items:not(:disabled)) .base { background-color: unset; color: ButtonText; } }`;
+        ${DesignToken.motion.easing.standard}`)}; } :host(:not(:state(-with-icon))) .icon { display: none; } .icon { margin-inline-start: -0.5rem; } .toggle { margin-inline-end: -0.5rem; } .group { padding-inline-start: var(--m3e-nav-menu-item-inset, 1rem); } :host([open]) .toggle { transform: rotate(180deg); } :host(:not(:state(-with-items))) .toggle, :host(:not(:state(-with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-nav-menu-item-icon-size, 1.5rem); } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-nav-menu-item-label-color, ${DesignToken.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-nav-menu-item-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-nav-menu-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:state(-with-items)):not(:disabled)) .base { color: var(--m3e-nav-menu-item-selected-label-color, ${DesignToken.color.onSecondaryContainer}); background-color: var(--m3e-nav-menu-item-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-nav-menu-item-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not([selected]):not(:state(-with-items)):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-unselected-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-unselected-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-unselected-ripple-color, ${DesignToken.color.onSurface}); } .state-layer { margin-inline: auto; } :host([selected]:state(-with-items):not(:disabled)) .base { background-color: var(--m3e-nav-menu-item-open-container-color, ${DesignToken.color.surfaceContainerHighest}); --m3e-state-layer-focus-color: var( --m3e-nav-menu-item-open-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-nav-menu-item-open-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-nav-menu-item-open-ripple-color, ${DesignToken.color.onSurface}); } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not([selected]):not(:disabled)) .base { color: ButtonText; } :host([selected]:not(:state(-with-items)):not(:disabled)) .base { forced-color-adjust: none; color: ButtonFace; background-color: ButtonText; } :host([selected]:state(-with-items):not(:disabled)) .base { background-color: unset; color: ButtonText; } }`;
 __decorate([query(".state-layer")], M3eNavMenuItemElement.prototype, "stateLayer", void 0);
 __decorate([query(".focus-ring")], M3eNavMenuItemElement.prototype, "focusRing", void 0);
 __decorate([query(".ripple")], M3eNavMenuItemElement.prototype, "ripple", void 0);
@@ -376,7 +376,7 @@ __decorate([property({
   type: Boolean,
   reflect: true
 })], M3eNavMenuItemElement.prototype, "open", void 0);
-M3eNavMenuItemElement = M3eNavMenuItemElement_1 = __decorate([customElement("m3e-nav-menu-item")], M3eNavMenuItemElement);
+M3eNavMenuItemElement = M3eNavMenuItemElement_1 = __decorate([element("m3e-nav-menu-item")], M3eNavMenuItemElement);
 
 var _M3eNavMenuElement_instances, _M3eNavMenuElement_ignoreFocusVisible, _M3eNavMenuElement_ignoreFocus, _M3eNavMenuElement_keyDownHandler, _M3eNavMenuElement_keyUpHandler, _M3eNavMenuElement_pointerDownHandler, _M3eNavMenuElement_handleSlotChange, _M3eNavMenuElement_handleKeyDown, _M3eNavMenuElement_handleKeyUp, _M3eNavMenuElement_handlePointerDown, _M3eNavMenuElement_activateItem, _M3eNavMenuElement_updateFocusVisible, _M3eNavMenuElement_updateItemFocusVisible, _b;
 var M3eNavMenuElement_1;
@@ -585,7 +585,7 @@ _M3eNavMenuElement_handleKeyDown = function _M3eNavMenuElement_handleKeyDown(e)
         item.ripple.show(0, 0, true);
       }
       if (item.hasChildItems) {
-        item.toggle();
+        requestAnimationFrame(() => item.toggle());
       } else if (!item.selected) {
         this[selectionManager].select(item);
         item.link?.click();
@@ -600,12 +600,14 @@ _M3eNavMenuElement_handleKeyDown = function _M3eNavMenuElement_handleKeyDown(e)
       e.preventDefault();
       if (M3eDirectionality.current === "ltr") {
         if (item.hasChildItems && item.open) {
-          item.collapse();
+          requestAnimationFrame(() => item.collapse());
         } else {
           const parent = item.parentItem;
           if (parent) {
-            parent.collapse();
-            this[selectionManager].setActiveItem(parent);
+            requestAnimationFrame(() => {
+              parent.collapse();
+              this[selectionManager].setActiveItem(parent);
+            });
           }
         }
       } else if (item.hasChildItems && !item.open) {
@@ -617,12 +619,14 @@ _M3eNavMenuElement_handleKeyDown = function _M3eNavMenuElement_handleKeyDown(e)
       e.preventDefault();
       if (M3eDirectionality.current === "rtl") {
         if (item.hasChildItems && item.open) {
-          item.collapse();
+          requestAnimationFrame(() => item.collapse());
         } else {
           const parent = item.parentItem;
           if (parent) {
-            parent.collapse();
-            this[selectionManager].setActiveItem(parent);
+            requestAnimationFrame(() => {
+              parent.collapse();
+              this[selectionManager].setActiveItem(parent);
+            });
           }
         }
       } else if (item.hasChildItems && !item.open) {
@@ -680,7 +684,7 @@ _M3eNavMenuElement_updateItemFocusVisible = function _M3eNavMenuElement_updateIt
   }
 };
 (() => {
-  if (document) {
+  if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
     lightDomStyle.replaceSync(css`m3e-nav-menu > m3e-divider { margin-block: var(--m3e-nav-menu-divider-margin, 0.25rem); flex: none; }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
@@ -690,7 +694,7 @@ _M3eNavMenuElement_updateItemFocusVisible = function _M3eNavMenuElement_updateIt
 M3eNavMenuElement.styles = css`:host { display: block; outline: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: ${DesignToken.scrollbar.width}; scrollbar-color: ${DesignToken.scrollbar.color}; } .base { width: 100%; display: flex; flex-direction: column; position: relative; min-height: inherit; box-sizing: border-box; padding-block-start: var(--m3e-nav-menu-padding-top, 0.5rem); padding-block-end: var(--m3e-nav-menu-padding-bottom, 0.5rem); padding-inline-start: var(--m3e-nav-menu-padding-left, 0.75rem); padding-inline-end: var(--m3e-nav-menu-padding-right, 0.75rem); }`;
 /** @private */
 M3eNavMenuElement.__nextId = 0;
-M3eNavMenuElement = M3eNavMenuElement_1 = __decorate([customElement("m3e-nav-menu")], M3eNavMenuElement);
+M3eNavMenuElement = M3eNavMenuElement_1 = __decorate([element("m3e-nav-menu")], M3eNavMenuElement);
 
 var _M3eNavMenuItemGroupElement_instances, _M3eNavMenuItemGroupElement_labelId, _M3eNavMenuItemGroupElement_label, _M3eNavMenuItemGroupElement_handleLabelSlotChange;
 var M3eNavMenuItemGroupElement_1;
@@ -736,7 +740,7 @@ var M3eNavMenuItemGroupElement_1;
  * @cssprop --m3e-nav-menu-item-group-label-inset - Insets the label from the start edge of the group.
  * @cssprop --m3e-nav-menu-item-group-label-space - Vertical spacing around the group's label.
  */
-let M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = class M3eNavMenuItemGroupElement extends Role(LitElement, "group") {
+let M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = class M3eNavMenuItemGroupElement extends AttachInternals(Role(LitElement, "group")) {
   constructor() {
     super(...arguments);
     _M3eNavMenuItemGroupElement_instances.add(this);
@@ -748,12 +752,12 @@ let M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = class M3eNavMenu
   /** @inheritdoc */
   connectedCallback() {
     super.connectedCallback();
-    this.classList.toggle("-divided", this.previousElementSibling?.tagName === "M3E-DIVIDER");
+    setCustomState(this, "-divided", this.previousElementSibling?.tagName === "M3E-DIVIDER");
   }
   /** @inheritdoc */
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.classList.remove("-divided");
+    deleteCustomState(this, "-divided");
   }
   /** @inheritdoc */
   render() {
@@ -781,13 +785,13 @@ _M3eNavMenuItemGroupElement_handleLabelSlotChange = function _M3eNavMenuItemGrou
       this.removeAttribute("aria-labelledby");
     }
   }
-  this.classList.toggle("-has-label", __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f") !== undefined);
+  setCustomState(this, "-with-label", __classPrivateFieldGet(this, _M3eNavMenuItemGroupElement_label, "f") !== undefined);
 };
 /** The styles of the element. */
-M3eNavMenuItemGroupElement.styles = css`:host { display: contents; } :host(:not(.-has-label)) .label { display: none; } .label { margin-inline-start: var(--m3e-nav-menu-item-group-label-inset, 1rem); margin-block-end: var(--m3e-nav-menu-item-group-label-space, 1rem); flex: none; } :host(.-divided) .label { margin-block-start: calc( var(--m3e-nav-menu-item-group-label-space, 1rem) - var(--m3e-nav-menu-divider-margin, 0.25rem) ); } :host(:not(.-divided)) .label { margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem); }`;
+M3eNavMenuItemGroupElement.styles = css`:host { display: contents; } :host(:not(:state(-with-label))) .label { display: none; } .label { margin-inline-start: var(--m3e-nav-menu-item-group-label-inset, 1rem); margin-block-end: var(--m3e-nav-menu-item-group-label-space, 1rem); flex: none; } :host(:state(-divided)) .label { margin-block-start: calc( var(--m3e-nav-menu-item-group-label-space, 1rem) - var(--m3e-nav-menu-divider-margin, 0.25rem) ); } :host(:not(:state(-divided))) .label { margin-block-start: var(--m3e-nav-menu-item-group-label-space, 1rem); }`;
 /** @private */
 M3eNavMenuItemGroupElement.__nextId = 0;
-M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = __decorate([customElement("m3e-nav-menu-item-group")], M3eNavMenuItemGroupElement);
+M3eNavMenuItemGroupElement = M3eNavMenuItemGroupElement_1 = __decorate([element("m3e-nav-menu-item-group")], M3eNavMenuItemGroupElement);
 
 export { M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement };
 //# sourceMappingURL=nav-menu.js.map